329 lines
8.7 KiB
Vue
329 lines
8.7 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="page">
|
|
<div style="margin-top: 200px;">
|
|
|
|
<van-field v-model="userName" clearable placeholder="请输入姓名">
|
|
<template #label>
|
|
<div style="color: #E5E5E5;">
|
|
预约人姓名
|
|
</div>
|
|
</template>
|
|
</van-field>
|
|
|
|
<van-field style="margin-top: 20px;" readonly type="number" clearable placeholder="">
|
|
<template #label>
|
|
<div style="color: #E5E5E5; width: 200px;display: flex;align-items: center;">
|
|
<div>
|
|
用餐人数
|
|
</div>
|
|
<van-stepper style="margin-left: 30px;z-index: 999;" v-model="num" :min="10" theme="round"
|
|
button-size="22" disable-input />
|
|
</div>
|
|
</template>
|
|
</van-field>
|
|
<van-field class="ts" @click="showPc" style="margin-top: 20px;" readonly v-model="standard" clearable placeholder="">
|
|
<template #label>
|
|
<div style="color: #E5E5E5;width: 200px;" @click="showPc">
|
|
<div>
|
|
用餐标准(元/人)
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<template #button>
|
|
<div style="color: #777777;" @click="showPc">
|
|
>
|
|
</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-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
|
|
@confirm="onConfirm" @cancel="onCancel" />
|
|
</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>
|
|
<div style="color: #959595; font-size: 14px; margin-bottom: 10px;">
|
|
餐券余额：{{ balance || 0 }}元
|
|
<!-- .toLocaleString() -->
|
|
</div>
|
|
<van-button v-if="userName && appointDate && num" @click="confirmYuyue" style="width: 92%;min-height: 40px;"
|
|
color="#1936C9">确认预约</van-button>
|
|
<van-button v-else color="#464646" style="width: 92%;min-height: 40px;">确认预约</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="true">
|
|
<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>
|
|
<van-popup v-model:show="showYc" destroy-on-close position="bottom">
|
|
<van-picker title="用餐标准" :columns="columns" @confirm="onYSConfirm" @cancel="onYSCancel" />
|
|
</van-popup>
|
|
</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(new Date().setDate(new Date().getDate() + 1)))
|
|
const maxDate = ref(new Date(2026, 11, 31))
|
|
const showsuccess = ref(false)
|
|
const showfail = ref(false)
|
|
const appointDate = ref('')
|
|
const num = ref(10)
|
|
const remark = ref('')
|
|
const userName = ref('')
|
|
const standard = ref(400)
|
|
const dateTxt = ref('')
|
|
const mealPer = ref('')
|
|
const showYc = ref(false)
|
|
const columns = ref([
|
|
{
|
|
text: '400',
|
|
value: 400
|
|
},
|
|
{
|
|
text: '500',
|
|
value: 500
|
|
},
|
|
{
|
|
text: '600',
|
|
value: 600
|
|
}
|
|
])
|
|
let userInfo = JSON.parse(localStorage.getItem('accountInfo'))
|
|
const balance = userInfo.balance;
|
|
|
|
const onYSConfirm = (value) => {
|
|
console.log(value)
|
|
standard.value = value.selectedValues[0]
|
|
showYc.value = false
|
|
}
|
|
const onYSCancel = () => {
|
|
showYc.value = false
|
|
}
|
|
const showPc = () => {
|
|
showYc.value = true
|
|
}
|
|
const onConfirm = () => {
|
|
|
|
// showPicker.value = false
|
|
appointDate.value = currentDate.value.join('-') + ' 18:00'
|
|
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.trim(),
|
|
standard: standard.value
|
|
})
|
|
|
|
if (res.status === 0) {
|
|
// showsuccess.value = true
|
|
await geYYtUserInfo()
|
|
router.push('/success')
|
|
} else {
|
|
showToast({
|
|
message: res.msg,
|
|
position: 'top'
|
|
})
|
|
showfail.value = true
|
|
}
|
|
} catch (error) {
|
|
showfail.value = true
|
|
}
|
|
}
|
|
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
// 获取预约信息
|
|
const geYYtUserInfo = async () => {
|
|
const res = await getUserInfo({})
|
|
if (res.status === 0) {
|
|
if (res.data.isExist) {
|
|
// showsuccess.value = true
|
|
router.push('/success')
|
|
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
|
|
standard.value = res.data.standard
|
|
|
|
} 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%;
|
|
height: 100%;
|
|
background-image: url('@/assets/bg2.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.page {
|
|
min-height: 100%;
|
|
padding: 0 31px 0 31px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.ts {
|
|
/deep/ .van-cell__title{
|
|
margin-right: 80px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
/deep/ .van-stepper__input{
|
|
color: #E5E5E5;
|
|
}
|
|
|
|
</style> |