mrshi

MrShi

2024-02-28 3a7cbae4f79e0043b9a75c9e419a841fc220c35a

 h5/pages/appointmentDetails/appointmentDetails.vue

@@ -1,7 +1,7 @@
<template>
   <view class="box">
      <view class="box_head">
         <image src="@/static/logo@2x.png" mode="widthFix"></image>
         <canvas class="box_head_qrcode" canvas-id="img"></canvas>
         <text class="box_head_a" v-if="info.status === 0">访客预约待审核</text>
         <text class="box_head_a" style="color: ;" v-if="info.status === 2">访客预约审核通过</text>
         <text class="box_head_a" v-if="info.status === 3">访客预约审核不通过</text>
@@ -11,14 +11,15 @@
      </view>
      <view class="box_list">
         <view class="box_list_label">拜访信息</view>
         <view class="box_list_tips">请注意查看出入门禁下发情况，如若下发失败需重新申请</view>
         <view class="box_list_item">
            <view class="box_list_item_label">拜访员工：</view>
            <view class="box_list_item_label">被访人员：</view>
            <view class="box_list_item_val">{{info.visitUserName}}</view>
         </view>
         <view class="box_list_item">
         <!-- <view class="box_list_item">
            <view class="box_list_item_label">车牌号：</view>
            <view class="box_list_item_val">{{info.carNos}}</view>
         </view>
         </view> -->
         <view class="box_list_item">
            <view class="box_list_item_label">拜访事由：</view>
            <view class="box_list_item_val">{{info.visitReason}}</view>
@@ -31,19 +32,38 @@
            <view class="box_list_item_label">访问门禁：</view>
            <view class="box_list_item_val" v-if="info.doorGroupName && info.doorGroupName.length > 0">{{info.doorGroupName.join('、')}}</view>
         </view>
         <view class="box_list_item">
            <view class="box_list_item_label">主访客：</view>
            <view class="box_list_item_val">
               {{info.name}} {{info.phone}}
            </view>
         </view>
         <view class="box_list_item" v-for="(item, index) in info.withVisitsList" :key="index">
            <view class="box_list_item_label">随访人员{{index + 1}}：</view>
            <view class="box_list_item_val">{{item.name}} {{item.phone}}</view>
            <view class="box_list_item_val">
               {{item.name}} {{item.phone}}
               <view class="box_list_item_val_btn" v-if="[2,5,7,8,9].includes(item.status)">
                  <u-button text="查看二维码" size="mini" @click="seeQrCode(item)" type="primary"></u-button>
               </view>
            </view>
         </view>
      </view>
      <u-popup :show="show" mode="center" @close="close">
         <view class="qrocde">
            <canvas class="qrcode_img" canvas-id="img1"></canvas>
         </view>
      </u-popup>
   </view>
</template>

<script>
   import wxcode from 'uniapp-qrcode'
	
   export default {
      data() {
         return {
            info: {}
            info: {},
            show: false
         };
      },
      onLoad(option) {
@@ -51,8 +71,26 @@
            .then(res => {
               if (res.code === 200) {
                  this.info = res.data
                  if (res.data.qrcode) {
                     wxcode.qrcode('img', res.data.qrcode, 320, 320)
                  }
               }
            })
      },
      methods: {
         close() {
            this.show = false
         },
         seeQrCode(code) {
            if (code.qrcode) {
               this.show = true
               this.$nextTick(() => {
                  wxcode.qrcode('img1', code.qrcode, 300, 300)
               })
            } else {
               uni.showToast({ title: '暂无二维码', icon: 'none' })
            }
         }
      }
   }
</script>
@@ -64,6 +102,17 @@
<style lang="scss" scoped>
   .box {
      width: 100%;
      .qrocde {
         width: 300rpx;
         height: 300rpx;
         display: flex;
         align-items: center;
         justify-content: center;
         .qrcode_img {
            width: 100%;
            height: 100%;
         }
      }
      .box_head {
         width: 100%;
         padding: 40rpx 0;
@@ -73,7 +122,7 @@
         align-items: center;
         justify-content: center;
         flex-direction: column;
         image {
         .box_head_qrcode {
            width: 320rpx;
            height: 320rpx;
         }
@@ -96,6 +145,19 @@
         background-color: #ffffff;
         padding: 40rpx 30rpx;
         box-sizing: border-box;
         .box_list_tips {
            width: 100%;
            height: 52rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
            line-height: 52rpx;
            background-color: rgba(224, 49, 42, 0.06);
            font-weight: 400;
            font-size: 24rpx;
            color: #E0312A;
            border-radius: 4rpx;
            margin: 30rpx 0;
         }
         .box_list_label {
            font-size: 32rpx;
            font-weight: 500;
@@ -117,6 +179,12 @@
               font-family: PingFangSC, PingFang SC;
               font-weight: 400;
               color: #333333;
               display: flex;
               align-items: center;
               .box_list_item_val_btn {
                  width: 140rpx;
                  margin-left: 15rpx;
               }
            }
         }
      }