heart_cabin/pages/todo-list/add-wish/index.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="wish_list_name">
                        <el-input v-model='formData.wish_list_name' type="text" placeholder='请输入心愿名称'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label-width="labelWidth" label="作者" prop="wish_list_author">
                        <el-input v-model='formData.wish_list_author' type="text" placeholder='请输入作者'></el-input>
                    </el-form-item>
                </el-col>

            </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 isBtnLod = ref(false);
const formRef = ref();
const labelWidth = 90;
const formData = reactive({});



const rules = reactive({
    wish_list_name: [
        {
            required: true,
            message: '心愿名称不能为空'
        }
    ],
});


// --基础方法

// 打开弹窗时执行

const handleAddClick = async (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (!valid) {
            return;
        }

        useFetch('/api/wishList/addWishList', {
            method: "post", body: {
                wish_list_name: formData.wish_list_name,
                wish_list_author: formData.wish_list_author,
            }
        }).then(res => {
            let resvalue = res.data.value
            if (resvalue.code == 0) {
                ElMessage({
                    message: "提交成功",
                    type: 'success',
                })
                formData.value = {}
                setTimeout(() => {
                    router.push("/todo-list")
                }, 2000);
            } else {
                ElMessage({
                    message: resvalue.msg,
                    type: 'error',
                })
            };
        })
        // const { code } = await addWishList(formData);
        // if (code == 0) {
        //   closeDialog();
        //   props.done();
        // }
    });
};

</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>