yiyi-h5/src/pages/reservation/index.vue

<template>
  <div class="container">
    <div class="page">
      <div style="margin-top: 350px;">

        <van-field v-model="userName" clearable placeholder="请输入姓名">
          <template #label>
            <div style="color: #E5E5E5;">
              预约人姓名
            </div>
          </template>
        </van-field>

        <van-field style="margin-top: 20px;" 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 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>