ll

liukangdong

2024-12-12 b6d0ad0e7e57a77d1983009494b09aa1da5fbfc4

 h5/pages/appointmentDetails/appointmentDetails.vue

@@ -1,192 +1,276 @@
<template>
   <view class="box">
      <view class="box_head">
         <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>
         <text class="box_head_b" v-if="info.status === 0">您的预约单已提交审核，请等待被访人审核</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="box">
    <view class="head_wrap head_success" v-if="info.status == 2 || info.status == 5">
      <view class="h1">访客预约{{ info.status == 2 ? '审核通过' : '下发成功' }}</view>
      <view class="h2"
        >您的来访申请已{{ info.status == 2 ? '审核通过' : '下发成功' }}，请在访客机签到入园。如遇特殊情况，可联系被访人或安保人员</view
      >
    </view>
    <view class="qr_wrap" v-if="info.status == 2 || info.status == 5">
      <canvas class="box_head_qrcode" canvas-id="img"></canvas>
      <view class="text">使用访客机扫码签到</view>
    </view>
    <view class="head_wrap head_padding" v-if="info.status == 0">
      <view class="h1">访客预约待审核</view>
      <view class="h2">您的预约单已提交审核，请等待被访人审核</view>
    </view>
      <view class="head_wrap head_padding" v-if="info.status == 1">
        <view class="h1">访客预约审批中</view>
        <view class="h2">您的来访申请正在审核</view>
      </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_val">{{info.visitUserName}}</view>
         </view>
         <!-- <view class="box_list_item">
    <view class="head_wrap head_error" v-if="info.status == 3">
      <view class="h1">访客预约审核不通过</view>
      <view class="h2">您的来访申请已被驳回，如有疑问，可联系被访人</view>
    </view>
      <view class="head_wrap head_error" v-if="info.status == 9">
        <view class="h1">访客预约已失效</view>
        <view class="h2">您的来访申请已失效，请重新申请</view>
      </view>
      <view class="head_wrap head_error" v-if="info.status == 6">
        <view class="h1">访客下发失败</view>
        <view class="h2">您的来访申请已失效，请重新申请</view>
      </view>
    <view class="box_list">
      <view class="box_list_label">拜访信息</view>
      <!-- <view class="box_list_tips" v-if="info.status == 6 || info.status == 3"
        >请注意查看出入门禁下发情况，如若下发失败需重新申请</view
      > -->
      <view class="box_list_item">
        <view class="box_list_item_label">被访人员：</view>
        <view class="box_list_item_val"
          >{{ info.visitUserCompany
          }}{{ info.visitUserName ? "-" + info.visitUserName : "" }}</view
        >
      </view>
      <!-- <view class="box_list_item">
            <view class="box_list_item_label">车牌号：</view>
            <view class="box_list_item_val">{{info.carNos}}</view>
         </view> -->
         <view class="box_list_item">
            <view class="box_list_item_label">拜访事由：</view>
            <view class="box_list_item_val">{{info.visitReason}}</view>
         </view>
         <view class="box_list_item">
            <view class="box_list_item_label">拜访时间：</view>
            <view class="box_list_item_val">{{info.visitTime}}</view>
         </view>
         <view class="box_list_item">
            <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 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>
      <view class="box_list_item">
        <view class="box_list_item_label">拜访事由：</view>
        <view class="box_list_item_val">{{ info.visitReason }}</view>
      </view>
      <view class="box_list_item">
        <view class="box_list_item_label">拜访时间：</view>
        <view class="box_list_item_val">{{ info.visitTime }}</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">
        <view class="box_list_item_label">施工人员：</view>
        <view class="box_list_item_val">{{
          info.type == 0 ? "否" : "是"
        }}</view>
      </view>
      <view class="box_list_item" v-if="info.type == '1'">
        <view class="box_list_item_label">施工内容：</view>
        <view class="box_list_item_val">{{ info.constructionReason }}</view>
      </view>
      <view class="box_list_item">
        <view class="box_list_item_label">随行车辆：</view>
        <view class="box_list_item_val">{{ info.carNos }}</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: {},
            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) {
                     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' })
            }
         }
      }
   }
import wxcode from 'uniapp-qrcode'
import { getVisitedDetail } from '@/api'

export default {
  data() {
    return {
      info: {},
      show: false,
      detail: ''
    }
  },
  onBackPress(options) {
    if (this.detail == 1) {
      uni.redirectTo({
        url: '/pages/applicationRecord/applicationRecord'
      })
    } else {
      uni.redirectTo({
        url: '/pages/index/index'
      })
    }

    return true
  },
  onLoad(option) {
    this.detail = option.detail || ''
    this.getDetail(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() {
      this.show = false
    },
    getDetail(id) {
      getVisitedDetail({ id }).then(res => {
        this.info = res.data
        if (res.data.qrcode) {
          this.$nextTick(() => {
            wxcode.qrcode('img', res.data.qrcode, 320, 320)
          })
        }
      })
    },
    seeQrCode(code) {
      if (code.qrcode) {
        this.show = true
        this.$nextTick(() => {
          wxcode.qrcode('img1', code.qrcode, 300, 300)
        })
      } else {
        uni.showToast({ title: '暂无二维码', icon: 'none' })
      }
    }
  }
}
</script>
<style>
   page {
      background-color: #f7f7f7;
   }
page {
  background-color: #f7f7f7;
}
</style>
<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;
         box-sizing: border-box;
         background-color: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         .box_head_qrcode {
            width: 320rpx;
            height: 320rpx;
         }
         .box_head_a {
            font-size: 36rpx;
            font-weight: 600;
            color: #025EEF;
            margin-top: 30rpx;
         }
         .box_head_b {
            font-size: 26rpx;
            font-weight: 400;
            color: #666666;
            margin-top: 24rpx;
         }
      }
      .box_list {
         width: 100%;
         margin-top: 20rpx;
         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;
            color: #222222;
         }
         .box_list_item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 30rpx;
            .box_list_item_label {
               font-size: 28rpx;
               font-family: PingFangSC, PingFang SC;
               font-weight: 400;
               color: #666666;
            }
            .box_list_item_val {
               font-size: 28rpx;
               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;
               }
            }
         }
      }
   }
.box {
  width: 100%;
  .qrocde {
    width: 300rpx;
    height: 300rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .qrcode_img {
      width: 100%;
      height: 100%;
    }
  }
  .qr_wrap {
    background-color: #fff;
    text-align: center;
    .box_head_qrcode {
      width: 320rpx;
      height: 320rpx;
      margin: 20rpx auto;
    }
    .text {
      font-size: 30rpx;
      color: $uni-color-primary;
      padding: 20rpx 0 30rpx;
    }
  }
  .head_wrap {
    padding: 30px;

    .h1 {
      margin-bottom: 16rpx;
      font-weight: 600;
      font-size: 36rpx;
    }
    .h2 {
      font-weight: 400;
      font-size: 26rpx;
    }
  }
  .head_padding {
    background: $uni-color-primary;
    .h1 {
      color: #ffffff;
    }
    .h2 {
      color: #ffffff;
    }
  }
  .head_error {
    background: #fdeded;
    .h1 {
      color: #ed4545;
    }
    .h2 {
      color: #333333;
    }
  }
  .head_success {
    background: #e8f4f6;
    .h1 {
      color: $uni-color-primary;
    }
    .h2 {
      color: #333333;
    }
  }
  .box_list {
    width: 100%;
    margin-top: 20rpx;
    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: 600;
      color: #222222;
    }
    .box_list_item {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      .box_list_item_label {
        flex-shrink: 0;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      .box_list_item_val {
        font-size: 28rpx;
        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;
        }
      }
    }
  }
}
</style>