html

liukangdong

2024-05-08 d0d3a33b400fd1cd6ee8122b349832120908a8ed

 h5/pages/appointmentDetails/appointmentDetails.vue

@@ -1,15 +1,20 @@
<template>
   <view class="box">
      <view class="box_head">
         <canvas class="box_head_qrcode" canvas-id="img" v-if="[2,5,7,8,9].includes(info.status)"></canvas>
         <image class="box_head_logo" src="../../static/logo@2x.png" mode="widthFix" v-else></image>
         <text class="box_head_a" v-if="[0, 1].includes(info.status)">访客预约待审核</text>
         <text class="box_head_a" style="color: #03AF76;" v-if="info.status === 2">访客预约审核通过</text>
         <text class="box_head_a" style="color: #ED4545;" v-if="info.status === 3">访客预约审核不通过</text>
         <text class="box_head_b" v-if="[0, 1].includes(info.status)">您的预约单已提交审核，请等待被访人审核</text>
         <text class="box_head_b" v-if="info.status === 2">您的来访申请已审核通过，请在门卫处进行登记入场
如遇特殊情况，可联系被访人或安保人员</text>
         <text class="box_head_b" v-if="info.status === 3">您的来访申请已被驳回，如有疑问，可联系被访人</text>
      <view class="head_wrap head_success" v-if="info.status == 1"> 
         <view class="h1">访客预约审核通过</view>
         <view class="h2">您的来访申请已审核通过，请在访客机签到入厂。如遇特殊情况，可联系被访人或安保人员</view>
      </view>
      <view class="qr_wrap" v-if="info.status == 1">
         <canvas class="box_head_qrcode" canvas-id="img"></canvas>
         <view class="text">使用访客机扫码签到</view>
      </view>
      <view class="head_wrap head_padding" v-if="info.status == 2"> 
         <view class="h1">访客预约待审核</view>
         <view class="h2">您的预约单已提交审核，请等待被访人审核</view>
      </view>
      <view class="head_wrap head_error" v-if="info.status == 3"> 
         <view class="h1">访客预约审核不通过</view>
         <view class="h2">您的来访申请已被驳回，如有疑问，可联系被访人</view>
      </view>
      <view class="box_list">
         <view class="box_list_label">拜访信息</view>
@@ -60,26 +65,30 @@

<script>
   import wxcode from 'uniapp-qrcode'
   import { visitorSubDetail } from '@/api'
   
   export default {
      data() {
         return {
            info: {},
            info: {
               status: 1
            },
            show: false
         };
      },
      onLoad(option) {
         this.$u.api.detail({ id: option.id })
            .then(res => {
               if (res.code === 200) {
                  this.info = res.data
                  if (res.data.qrcode) {
                     this.$nextTick(() => {
                        wxcode.qrcode('img', res.data.qrcode, 320, 320)
                     })
                  }
               }
            })
         // this.$u.api.detail({ id: option.id })
         // visitorSubDetail({ id: option.id })
         //    .then(res => {
         //       if (res.code === 200) {
         //          this.info = res.data
         //          if (res.data.qrcode) {
         //             this.$nextTick(() => {
         //                wxcode.qrcode('img', res.data.qrcode, 320, 320)
         //             })
         //          }
         //       }
         //    })
      },
      methods: {
         close() {
@@ -117,35 +126,57 @@
            height: 100%;
         }
      }
      .box_head {
         width: 100%;
         padding: 40rpx 0;
         box-sizing: border-box;
         background-color: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
      .qr_wrap{
         background-color: #fff;
         text-align: center;
         .box_head_qrcode {
            width: 320rpx;
            height: 320rpx;
         }
         .box_head_logo {
            width: 220rpx;
            height: 220rpx;
         .text{
            font-size: 30rpx;
            color: #279BAA;
            padding: 20rpx 0 30rpx;
         }
         .box_head_a {
            font-size: 36rpx;
      }
      .head_wrap{
         padding: 30px;
			
         .h1{
            margin-bottom: 16rpx;
            font-weight: 600;
            color: #025EEF;
            margin-top: 30rpx;
            font-size: 36rpx;
         }
         .box_head_b {
            font-size: 26rpx;
         .h2{
            font-weight: 400;
            color: #666666;
            margin-top: 24rpx;
            text-align: center;
            font-size: 26rpx;
         }
      }	
      .head_padding{
         background: #279BAA;
         .h1{
            color: #FFFFFF;
         }
         .h2{
            color: #FFFFFF;
         }
      }
      .head_error{
         background: #FDEDED;
         .h1{
            color: #ED4545;
         }
         .h2{
            color: #333333;
         }
      }
      .head_success{
         background: #E8F4F6;
         .h1{
            color: #279BAA;
         }
         .h2{
            color: #333333;
         }
      }
      .box_list {