改版

.env

@@ -1 +1 @@
-VITE_API_URL=https://mealticket.szjixun.cn
+VITE_API_URL=http://172.16.100.93:9033

src/pages/reservation/index.vue

@@ -3,7 +3,7 @@
     <div class="page">
       <div style="margin-top: 350px;">
 
-        <van-field v-model="userName" clearable placeholder="请输入姓名" >
+        <van-field v-model="userName" clearable placeholder="请输入姓名">
           <template #label>
             <div style="color: #E5E5E5;">
               预约人姓名
@@ -11,13 +11,33 @@
           </template>
         </van-field>
 
-        <van-field style="margin-top: 20px;" type="number" v-model="num" clearable placeholder="请输入用餐人数">
+        <van-field style="margin-top: 20px;" readonly type="number" clearable placeholder="">
           <template #label>
-            <div style="color: #E5E5E5;">
+            <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="请选择预约时间">
@@ -33,11 +53,13 @@
           </template>
         </van-field>
         <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
-          <van-picker-group next-step-text="下一步" title="预约日期" :tabs="['选择日期', '选择时间']" @confirm="onConfirm"
+          <!-- <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-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="请填写备注">
@@ -79,6 +101,9 @@
 
       </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>
 
@@ -89,20 +114,47 @@ import { getUserInfo, addMeal } from '@/api/login'
 const showPicker = ref(false)
 const currentDate = ref([])
 const currentTime = ref([])
-const minDate = ref(new Date(2025, 0, 24))
+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(null)
+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
+  }
+])
+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('-') + ' ' + currentTime.value.join(':')
+  appointDate.value = currentDate.value.join('-') + ' 18:00'
   showPicker.value = false
   console.log(appointDate.value)
 }
@@ -133,12 +185,14 @@ const addYuyue = async () => {
       appointDate: appointDate.value,
       num: parseInt(num.value),
       remark: remark.value,
-      userName: userName.value.trim()
+      userName: userName.value.trim(),
+      standard: standard.value
     })
 
     if (res.status === 0) {
-      showsuccess.value = true
+      // showsuccess.value = true
       await geYYtUserInfo()
+      router.push('/success')
     } else {
       showfail.value = true
     }
@@ -157,15 +211,17 @@ const geYYtUserInfo = async () => {
   const res = await getUserInfo({})
   if (res.status === 0) {
     if (res.data.isExist) {
-      showsuccess.value = true
+      // 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
-    }else{
+      standard.value = res.data.standard
-      if(res.data.isOver){
+    } else {
+      if (res.data.isOver) {
         showfail.value = true
       }
     }
@@ -201,6 +257,11 @@ onMounted(async () => {
   justify-content: center;
 
 }
+.ts {
+ /deep/ .van-cell__title{
+margin-right: 80px;
+ }
+}
 
 .page {
   height: 100vh;

src/pages/success/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="page">
+    <div class="image-container">
+      <img src="https://e-cdn.fontree.cn/fonchain-main/static/im/meal-ticket-v1.png" alt="">
+      <div class="text-overlay">
+        <div class="title">
+          您已预约 {{ dateTxt }} 用餐
+        </div>
+        <div class="content">
+          用餐人数 {{ mealPer }} 人
+        </div>
+        <div class="tips">
+          到预约时间未消费则餐券作废，餐券使用不包含酒水（软饮料、茶水、咖啡除外），需现金结算，餐券不找零
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getUserInfo, getCode } from '@/api/login'
+import { showToast } from 'vant';
+
+
+const route = useRoute()
+const router = useRouter()
+const dateTxt = ref('')
+const mealPer = ref('')
+// 获取预约信息
+const geYYtUserInfo = async () => {
+  const res = await getUserInfo({})
+  if (res.status === 0) {
+    if (res.data.isExist) {
+
+      dateTxt.value = res.data.appointDate
+      mealPer.value = res.data.num
+
+    } else {
+
+    }
+
+  } else {
+    showfail.value = true
+  }
+}
+onMounted(() => {
+  geYYtUserInfo()
+})
+</script>
+
+<style lang="less" scoped>
+.page {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: #fff;
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+
+.image-container {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+
+  img {
+    width: 100%;
+    display: block;
+    max-width: 100%;
+    object-fit: cover;
+  }
+}
+
+.text-overlay {
+  position: relative;
+  margin-top: -1026%;
+  text-align: center;
+  
+  .title {
+    font-size: 4.8vw;  // 约等于18px
+    font-weight: bold;
+    margin-top: 40px;
+  }
+  
+  .content {
+    font-size: 4.8vw;  // 约等于18px
+    font-weight: bold;
+    margin-top: 10px;
+  }
+  
+  .tips {
+    font-size: 3.4vw;  // 约等于14px
+    color: rgba(123, 123, 123, 0.90);
+    margin-top: 90px;
+    padding: 0 40px;
+    line-height: 1.5;
+  }
+}
+</style>

src/router/index.js

@@ -13,6 +13,10 @@ const routes = [
     path: '/login',
     component: () => import('../pages/login/index.vue')
   },
+  {
+    path: '/success',
+    component: () => import('../pages/success/index.vue')
+  }
 ]
 
 const router = createRouter({