305 lines
7.7 KiB
Vue
305 lines
7.7 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="title">添加爱情故事</div>
|
|
<el-form ref="formRef" :model="formData" :rules="rules">
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="12">
|
|
<el-form-item :label-width="labelWidth" label="标题" prop="love_story_title">
|
|
<el-input v-model='formData.love_story_title' type="text" placeholder='请输入标题'></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label-width="labelWidth" label="作者" prop="love_story_author">
|
|
<el-input v-model='formData.love_story_author' type="text" placeholder='请输入作者'></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label-width="labelWidth" label="地点" prop="love_story_place">
|
|
<el-input v-model='formData.love_story_place' type="text" placeholder='请输入地点'></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label-width="labelWidth" label="日期" prop="love_story_date">
|
|
<el-date-picker v-model="formData.love_story_date" type="date" value-format="YYYY-MM-DD"
|
|
placeholder="日期" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span='12'>
|
|
<el-form-item :label-width='labelWidth' label='封面' prop='love_story_cover'>
|
|
<input ref="love_story_cover" type="file" accept=".jpg,.png,.jpeg">
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span='12'>
|
|
<el-form-item :label-width='labelWidth' label='音乐' prop='love_story_music'>
|
|
<input ref="love_story_music" type="file" accept=".mp3,.m4a,.flac">
|
|
</el-form-item>
|
|
</el-col>
|
|
<client-only>
|
|
<el-col :span="24">
|
|
<el-form-item :label-width="labelWidth" label="内容" prop="love_story_content">
|
|
<RichText v-model='formData.love_story_content' :min-height='196'></RichText>
|
|
</el-form-item>
|
|
</el-col>
|
|
</client-only>
|
|
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<div class="btn-box">
|
|
<button class="liuguang-btn" @click="router.back()">
|
|
返回
|
|
</button>
|
|
<button class="liuguang-btn" @click="handleAddClick(formRef)">
|
|
提交
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
// --业务参数
|
|
const router = useRouter()
|
|
const love_story_music = ref(null)
|
|
const love_story_cover = ref(null)
|
|
|
|
|
|
// --业务方法
|
|
|
|
|
|
|
|
// --基础参数
|
|
const isBtnLod = ref(false);
|
|
const formRef = ref();
|
|
const labelWidth = 90;
|
|
const formData = reactive({});
|
|
|
|
const uoloadData = ref({
|
|
dirName: "LoveStory"
|
|
})
|
|
|
|
const rules = reactive({
|
|
love_story_title: [
|
|
{
|
|
required: true,
|
|
message: '标题不能为空'
|
|
}
|
|
],
|
|
love_story_place: [
|
|
{
|
|
required: true,
|
|
message: '地点不能为空'
|
|
}
|
|
],
|
|
love_story_date: [
|
|
{
|
|
required: true,
|
|
message: '日期不能为空'
|
|
}
|
|
],
|
|
|
|
});
|
|
|
|
|
|
|
|
// --基础方法
|
|
|
|
// 打开弹窗时执行
|
|
|
|
const handleAddClick = async (formEl) => {
|
|
if (!formEl) return;
|
|
formEl.validate(async (valid) => {
|
|
if (!valid) {
|
|
return;
|
|
}
|
|
if (!love_story_cover.value.value) {
|
|
ElMessage({
|
|
message: "请上传封面",
|
|
type: 'error',
|
|
})
|
|
}
|
|
|
|
useFetch('/api/loveStory/addLoveStory', {
|
|
method: "post", body: {
|
|
love_story_title: formData.love_story_title,
|
|
love_story_author: formData.love_story_author,
|
|
love_story_place: formData.love_story_place,
|
|
love_story_date: formData.love_story_date,
|
|
love_story_cover: love_story_cover.value.value,
|
|
love_story_music: love_story_music.value.value,
|
|
love_story_content: formData.love_story_content,
|
|
}
|
|
}).then(res => {
|
|
let resvalue = res.data.value
|
|
if (resvalue.code == 0) {
|
|
ElMessage({
|
|
message: "提交成功",
|
|
type: 'success',
|
|
})
|
|
formData.value = {}
|
|
setTimeout(() => {
|
|
router.push("/love-story/1")
|
|
}, 2000);
|
|
} else {
|
|
ElMessage({
|
|
message: resvalue.msg,
|
|
type: 'error',
|
|
})
|
|
};
|
|
})
|
|
});
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.btn-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.btn-box button:nth-child(1) {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.liuguang-btn {
|
|
width: 200px;
|
|
height: 70px;
|
|
background: linear-gradient(to left top, pink 50%, rgb(247, 189, 201) 50%);
|
|
border-style: none;
|
|
color: #fff;
|
|
font-size: 23px;
|
|
letter-spacing: 3px;
|
|
font-family: 'Lato';
|
|
font-weight: 600;
|
|
outline: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding: 0px;
|
|
overflow: hidden;
|
|
transition: all .5s;
|
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.liuguang-btn span {
|
|
position: absolute;
|
|
display: block;
|
|
}
|
|
|
|
.liuguang-btn span:nth-child(1) {
|
|
height: 3px;
|
|
width: 200px;
|
|
top: 0px;
|
|
left: -200px;
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f6e58d);
|
|
border-top-right-radius: 1px;
|
|
border-bottom-right-radius: 1px;
|
|
animation: span1 2s linear infinite;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes span1 {
|
|
0% {
|
|
left: -200px
|
|
}
|
|
|
|
100% {
|
|
left: 200px;
|
|
}
|
|
}
|
|
|
|
.liuguang-btn span:nth-child(2) {
|
|
height: 70px;
|
|
width: 3px;
|
|
top: -70px;
|
|
right: 0px;
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #f6e58d);
|
|
border-bottom-left-radius: 1px;
|
|
border-bottom-right-radius: 1px;
|
|
animation: span2 2s linear infinite;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
@keyframes span2 {
|
|
0% {
|
|
top: -70px;
|
|
}
|
|
|
|
100% {
|
|
top: 70px;
|
|
}
|
|
}
|
|
|
|
.liuguang-btn span:nth-child(3) {
|
|
height: 3px;
|
|
width: 200px;
|
|
right: -200px;
|
|
bottom: 0px;
|
|
background: linear-gradient(to left, rgba(0, 0, 0, 0), #f6e58d);
|
|
border-top-left-radius: 1px;
|
|
border-bottom-left-radius: 1px;
|
|
animation: span3 2s linear infinite;
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
@keyframes span3 {
|
|
0% {
|
|
right: -200px;
|
|
}
|
|
|
|
100% {
|
|
right: 200px;
|
|
}
|
|
}
|
|
|
|
.liuguang-btn span:nth-child(4) {
|
|
height: 70px;
|
|
width: 3px;
|
|
bottom: -70px;
|
|
left: 0px;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0), #f6e58d);
|
|
border-top-right-radius: 1px;
|
|
border-top-left-radius: 1px;
|
|
animation: span4 2s linear infinite;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
@keyframes span4 {
|
|
0% {
|
|
bottom: -70px;
|
|
}
|
|
|
|
100% {
|
|
bottom: 70px;
|
|
}
|
|
}
|
|
|
|
.liuguang-btn:hover {
|
|
transition: all .5s;
|
|
transform: rotate(-3deg) scale(1.1);
|
|
box-shadow: 0px 3px 5px rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.liuguang-btn:hover span {
|
|
animation-play-state: paused;
|
|
}
|
|
</style>
|
|
|