<template> <div class="container"> <div class="page"> <div style="margin-top: 350px;"> <van-field v-model="userName" clearable placeholder="请输入姓名" @input="preventSpace"> <template #label> <div style="color: #E5E5E5;"> 预约人姓名 </div> </template> </van-field> <van-field style="margin-top: 20px;" type="number" v-model="num" clearable placeholder="请输入用餐人数"> <template #label> <div style="color: #E5E5E5;"> 用餐人数 </div> </template> </van-field> <van-field @click="showPicker = true" readonly style="margin-top: 20px;" v-model="appointDate" clearable placeholder="请选择预约时间"> <template #label> <div style="color: #E5E5E5;"> 预约时间 </div> </template> <template #button> <div style="color: #777777;"> > </div> </template> </van-field> <van-popup v-model:show="showPicker" destroy-on-close position="bottom"> <van-picker-group next-step-text="下一步" title="预约日期" :tabs="['选择日期', '选择时间']" @confirm="onConfirm" @cancel="onCancel"> <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" /> <van-time-picker v-model="currentTime" /> </van-picker-group> </van-popup> <van-field rows="3" type="textarea" autosize style="margin-top: 20px;" v-model="remark" clearable placeholder="请填写备注"> <template #label> <div style="color: #E5E5E5;"> 备注 </div> </template> </van-field> </div> <van-button v-if="userName && appointDate && num" @click="confirmYuyue" style="width: 92%;margin-top: 30px;" color="#1936C9">确认预约</van-button> <van-button v-else color="#464646" style="width: 92%;margin-top: 30px;">确认预约</van-button> <div style="margin-top: 20px;color: #959595; font-size: 14px;"> 到预约时间未消费则餐券作废 </div> </div> <van-dialog v-model:show="showsuccess" :show-confirm-button="false"> <template #title> <img src="@/assets/success.png" style="position: absolute;width: 64px;height: 64px;left: 40%;top: 0;" /> </template> <div class="success-content"> <div style="font-weight: bold;">预约成功</div> <div style="color: rgba(0, 0, 0, 0.40);margin-top: 10px;">您已预约 {{ dateTxt }} 用餐</div> <div style="color: rgba(0, 0, 0, 0.40)">用餐人数 {{ mealPer }} 人</div> <div style="color: rgba(0, 0, 0, 0.40);font-size: 14px;position: absolute;bottom: 13px;">到预约时间未消费则餐券作废</div> </div> </van-dialog> <van-dialog v-model:show="showfail" :show-confirm-button="false"> <template #title> <img src="@/assets/fail.png" style="position: absolute;width: 64px;height: 64px;left: 40%;top: 0;" /> </template> <div class="success-content" style="height: 180px;"> <div style="font-weight: bold;">预约失败</div> <div style="color: rgba(0, 0, 0, 0.40);margin-top: 10px;">预约已满,不可预约</div> </div> </van-dialog> </div> </template> <script setup> import { ref, onMounted } from 'vue' import { useRoute, useRouter } from 'vue-router' import { getUserInfo, addMeal } from '@/api/login' const showPicker = ref(false) const currentDate = ref([]) const currentTime = ref([]) const minDate = ref(new Date(2025, 0, 1)) const maxDate = ref(new Date(2026, 11, 31)) const showsuccess = ref(false) const showfail = ref(false) const appointDate = ref('') const num = ref(null) const remark = ref('') const userName = ref('') const dateTxt = ref('') const mealPer = ref('') const onConfirm = () => { // showPicker.value = false appointDate.value = currentDate.value.join('-') + ' ' + currentTime.value.join(':') showPicker.value = false console.log(appointDate.value) } const onCancel = () => { showPicker.value = false } const confirmYuyue = async () => { await addYuyue() // showsuccess.value = true } // 新增预约 const addYuyue = async () => { if (!appointDate.value) { showToast('请选择预约时间') return } if (!num.value) { showToast('请输入用餐人数') return } if (!userName.value) { showToast('请输入预约人姓名') return } try { const res = await addMeal({ appointDate: appointDate.value, num: parseInt(num.value), remark: remark.value, userName: userName.value }) if (res.status === 0) { showsuccess.value = true await geYYtUserInfo() } else { showfail.value = true } } catch (error) { console.error('预约失败:', error) showfail.value = true } } const preventSpace = (e) => { e.target.value = e.target.value.replace(/\s/g, '') } const route = useRoute() const router = useRouter() // 获取预约信息 const geYYtUserInfo = async () => { const res = await getUserInfo({}) if (res.status === 0) { if (res.data.isExist) { showsuccess.value = true dateTxt.value = res.data.appointDate mealPer.value = res.data.num appointDate.value = res.data.appointDate num.value = res.data.num remark.value = res.data.remark userName.value = res.data.userName }else{ if(res.data.isOver){ showfail.value = true } } } else { showfail.value = true } } onMounted(async () => { // 如果没登陆退回到登录 if (!localStorage.getItem('token')) { router.push('/login') return } await geYYtUserInfo() }) </script> <style> .van-toast--text { background: rgba(0, 0, 0, 0.7) !important; } </style> <style lang="less" scoped> .container { width: 100%; background-image: url('@/assets/bg2.png'); background-size: 100% 100%; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; } .page { height: 100vh; padding: 31px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .van-field { width: 800px; background: none; } .van-cell-group { background: none; } .success-content { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; height: 500px; border-radius: 20px 20px 0 0; } /deep/ .van-cell__title { margin-right: 0; } /deep/ .van-field__control { color: #E5E5E5 !important; } /deep/ .van-dialog { background: none; } ::v-deep .van-field__control::-webkit-input-placeholder { color: #898989; } /deep/ .van-dialog__confirm { color: #46299D; } </style>