feat: 核销预约码

pages.json

@@ -107,6 +107,12 @@
           "style": {
             "navigationBarTitleText": "预约状态"
           }
+        },
+        {
+          "path": "sign/index",
+          "style": {
+            "navigationBarTitleText": "签到"
+          }
         }
       ]
     }

reservation/record/detail.vue

 <template>
   <view class="record record-detail">
-    <view class="record-bg" :style="{ backgroundImage: `url(${baseUrl}/farqbxzczytcami/images/bg-6.png)` }"></view>
+    <view
+      class="record-bg"
+      :style="{
+        backgroundImage: `url(${baseUrl}/farqbxzczytcami/images/bg-6.png)`,
+      }"
+    ></view>
     <view class="record-content">
       <view class="tips">请凭下方预约二维码现场签到进场</view>
       <view class="card detail">
         <view class="title">{{ detail.title }}</view>
         <view class="date">
-          {{ detail.reservation_date }} {{ detail.week }}{{ detail.reservation_start_time }} -
+          {{ detail.reservation_date }} {{ detail.week
+          }}{{ detail.reservation_start_time }} -
           {{ detail.reservation_end_time }}
         </view>
         <view class="line"></view>
-        <view class="info">
-          预约人：{{ detail.realname }}
-        </view>
-        <view class="info">
-          手机：{{ detail.telephone }}
-        </view>
-        <view class="info">
-          访客人数：{{ detail.visitor_number }}人
-        </view>
+        <view class="info"> 预约人：{{ detail.realname }} </view>
+        <view class="info"> 手机：{{ detail.telephone }} </view>
+        <view class="info"> 访客人数：{{ detail.visitor_number }}人 </view>
         <view class="qrcode">
           <image :src="detail.qrcode" mode="widthFix" />
         </view>
       </view>
-      <view v-if="detail.is_check == 0" class="buttons" @click="cancelReservation">
+      <view
+        v-if="detail.is_check == 0"
+        class="buttons"
+        @click="cancelReservation"
+      >
         <fh-button type="plain" @click="cancelReservation">
           取消预约
         </fh-button>
@@ -33,27 +37,17 @@
 </template>
 
 <script setup>
-  import {
-    baseUrl
-  } from '@/reservation/config'
-  import {
-    onLoad,
-	onUnload
-  } from "@dcloudio/uni-app";
-  import fhButton from "../components/fh-button.vue";
-  import {
-    ref
-  } from 'vue'
-  import {
-    reservationDetail,
-    reservationCancel
-  } from '@/api/reservation'
-  defineOptions({
+import { baseUrl } from '@/reservation/config'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import fhButton from '../components/fh-button.vue'
+import { ref } from 'vue'
+import { reservationDetail, reservationCancel } from '@/api/reservation'
+defineOptions({
   name: 'record-detail',
-  })
-  // 获取参数
-  const id = ref(0)
-  const detail = ref({
+})
+// 获取参数
+const id = ref(0)
+const detail = ref({
   title: '', // 预约标题
   reservation_date: '', // 预约日期
   reservation_start_time: '', // 预约开始时间
@@ -63,48 +57,56 @@
   realname: '', // 预约人姓名
   telephone: '', // 预约人手机号
   visitor_number: '', // 访客人数
-
-  })
-  let yi = null;
-  onLoad((options) => {
+})
+let yi = null
+onLoad((options) => {
   id.value = options.id
   console.log(id.value)
   options.id && getDetail()
-  })
-  onUnload(() => {
-	  clearInterval(yi);
-    
-  })
-  const getDetail = () => {
+})
+onUnload(() => {
+  clearInterval(yi)
+})
+const getDetail = () => {
   reservationDetail({
     id: id.value,
   }).then((res) => {
     detail.value = res.data
     // 翻译星期
-      detail.value.week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][Number(detail.value.week)]
-	  if(detail.value.is_check == 0){
-		  lunxunGetDetail();
-	  }else{
-		  
+    detail.value.week = [
+      '周日',
+      '周一',
+      '周二',
+      '周三',
+      '周四',
+      '周五',
+      '周六',
+    ][Number(detail.value.week)]
+    if (detail.value.is_check == 0) {
+      lunxunGetDetail()
+    } else {
     }
   })
-  }
-  const lunxunGetDetail = () => {
-	  yi = setInterval(function(){
+}
+const lunxunGetDetail = () => {
+  yi = setInterval(function () {
     reservationDetail({
       id: id.value,
     }).then((res) => {
-		  if(res.data.is_check == 1){
-			  detail.value.is_check = 1;
-			  clearInterval(yi);
-		  }
+      if (res.data.is_check == 1) {
+        detail.value.is_check = 1
+        clearInterval(yi)
+        yi = null
+        // 跳转到成功页面
+        uni.navigateTo({
+          url: '/reservation/sign/index',
         })
-		  
-	  }, 1000);
-    
       }
+    })
+  }, 1000)
+}
 
-  const cancelReservation = () => {
+const cancelReservation = () => {
   console.log('取消预约')
   reservationCancel({
     id: id.value,
@@ -123,9 +125,9 @@
       })
     }
   })
-  }
+}
 </script>
 
 <style lang="less" scoped>
-  @import './index.less';
+@import './index.less';
 </style>

reservation/sign/index.less

+// 声明字体
+@font-face {
+  font-family: 'fz';
+  src: url('https://factory-walk-uat.feihe.com/farqbxzczytcami/images/fz.ttf')
+    format('truetype');
+}
+@font-face {
+  font-family: 'fz-bold';
+  src: url('https://factory-walk-uat.feihe.com/farqbxzczytcami/images/fz-bold.ttf')
+    format('truetype');
+}
+
+.record {
+  background: #eee;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  &-bg {
+    width: 100%;
+    height: 600rpx;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: top center;
+  }
+  &-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    padding: 52rpx;
+    box-sizing: border-box;
+    .card {
+      height: 682rpx;
+      margin-top: 120rpx;
+      overflow-y: auto;
+      background: #fff;
+      box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 0, 0, 0.04);
+      border-radius: 26rpx;
+      padding: 37rpx 86rpx;
+      box-sizing: border-box;
+      font-family: 'fz';
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      .title {
+        font-size: 52rpx;
+        color: #d3a358;
+        line-height: 67rpx;
+        text-align: left;
+        position: absolute;
+        z-index: 1;
+        top: 50rpx;
+        left: calc(50% - 102rpx);
+      }
+      .image {
+        width: 484rpx;
+        height: 484rpx;
+        margin: -40rpx auto 0 -20rpx;
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .desc {
+        font-size: 30rpx;
+        color: #000000;
+        line-height: 45rpx;
+        text-align: center;
+        font-style: normal;
+        position: absolute;
+        bottom: 50rpx;
+      }
+    }
+  }
+
+  .buttons {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    padding: 0 52rpx;
+    box-sizing: border-box;
+    bottom: 100rpx;
+  }
+}

reservation/sign/index.vue

+<template>
+  <view class="record">
+    <view
+      class="record-bg"
+      :style="{
+        backgroundImage: `url(${baseUrl}/farqbxzczytcami/images/bg-6.png)`,
+      }"
+    ></view>
+    <view class="record-content">
+      <view class="card">
+        <view class="title">签到成功！</view>
+        <view class="image">
+          <image src="@/assets/reservation-images/sign.png" mode="widthFix" />
+        </view>
+        <view class="desc"
+          >您已签到成功 <br />
+          请尽情体验您的飞鹤之旅吧~</view
+        >
+      </view>
+      <view class="buttons">
+        <!-- <view style="margin-bottom: 37rpx" @click.stop="handleDetail">
+          <fh-button>查看预约详情</fh-button>
+        </view> -->
+        <view @click.stop="handleHome">
+          <fh-button>返回首页</fh-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { baseUrl } from '@/reservation/config'
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import fhButton from '../components/fh-button.vue'
+defineOptions({
+  name: 'record',
+})
+
+const id = ref(0)
+
+onLoad((options) => {
+  id.value = options.id
+  console.log(id.value)
+})
+
+const handleDetail = () => {
+  uni.redirectTo({
+    url: '/reservation/record/detail?id=' + id.value,
+  })
+}
+const handleHome = () => {
+  uni.reLaunch({ url: '/reservation/home/index' })
+}
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>