MrShi
2025-05-21 6ed771467abc47b2d5e1174480a3302f6ab5ed96
h5/pages/appointmentDetails/appointmentDetails.vue
@@ -1,12 +1,12 @@
<template>
  <view class="box">
    <view class="head_wrap head_success" v-if="info.status == 2">
      <view class="h1">访客预约审核通过</view>
    <view class="head_wrap head_success" v-if="info.status == 2 || info.status == 5">
      <view class="h1">访客预约{{ info.status == 2 ? '审核通过' : '下发成功' }}</view>
      <view class="h2"
        >您的来访申请已审核通过,请在访客机签到入厂。如遇特殊情况,可联系被访人或安保人员</view
        >您的来访申请已{{ info.status == 2 ? '审核通过' : '下发成功' }},请在访客机签到入园。如遇特殊情况,可联系被访人或安保人员</view
      >
    </view>
    <view class="qr_wrap" v-if="info.status == 2">
    <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>
@@ -14,15 +14,39 @@
      <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="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 == 4">
        <view class="h1">访客预约审核已取消</view>
        <view class="h2">您的来访申请已取消,请重新申请</view>
      </view>
      <view class="head_wrap head_success" v-if="info.status == 7">
        <view class="h1">访客预约拜访中</view>
        <view class="h2">你的访申请正在进行,如有疑问,可联系被访人</view>
      </view>
      <view class="head_wrap head_success" v-if="info.status == 8">
        <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 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"
@@ -48,37 +72,69 @@
      </view>
      <view class="box_list_item">
        <view class="box_list_item_label">施工人员:</view>
        <view class="box_list_item_val">{{ info.type == 0 ? '否' : '是'}}</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" v-if="info.type == '1'">
        <view class="box_list_item_label">施工内容:</view>
        <view class="box_list_item_val">{{ info.constructionReason}}</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>
   <view class="padding_wrap">
      <view class="btn" v-if="[0,1,2,5].includes(info.status)" @click="cancelShow = true">取消预约</view>
   </view>
    <u-popup :show="show" mode="center" @close="close">
      <view class="qrocde">
        <canvas class="qrcode_img" canvas-id="img1"></canvas>
      </view>
    </u-popup>
   <!-- 取消预约弹窗 -->
   <u-modal
      :show="cancelShow"
      :showCancelButton="true"
      title="系统提示"
      content='确定取消当前预约吗?'
      @cancel="cancelShow = false"
      @confirm="cancel" />
  </view>
</template>
<script>
import wxcode from 'uniapp-qrcode'
import { getVisitedDetail } from '@/api'
import { getVisitedDetail, visitsSelfCancel } from '@/api'
export default {
  data() {
    return {
      id: null,
      info: {},
      show: false
      show: false,
      detail: '',
     cancelShow: false
    }
  },
  onBackPress(options) {
    if (this.detail == 1) {
      uni.redirectTo({
        url: '/pages/applicationRecord/applicationRecord'
      })
    } else {
      uni.redirectTo({
        url: '/pages/index/index'
      })
    }
    return true
  },
  onLoad(option) {
      uni.setStorageSync('ywinfo',{})
    this.detail = option.detail || ''
   this.id = option.id
    this.getDetail(option.id)
    // visitorSubDetail({ id: option.id })
    //    .then(res => {
@@ -94,6 +150,14 @@
  },
  methods: {
   // 取消预约
   cancel() {
      const member = uni.getStorageSync('member');
      visitsSelfCancel(this.id, this.$store.state.openId).then(res => {
         this.cancelShow = false
         this.getDetail(this.id)
      })
   },
    close() {
      this.show = false
    },
@@ -128,6 +192,28 @@
<style lang="scss" scoped>
.box {
  width: 100%;
  .padding_wrap {
     position: fixed;
     z-index: 999;
     padding: 0 30rpx 64rpx;
     bottom: 0;
     left: 0;
     width: 100%;
     display: flex;
     justify-content: space-between;
     .btn {
        height: 96rpx;
        line-height: 96rpx;
        text-align: center;
        width: 100%;
        font-size: 36rpx;
        color: #333333;
        background: #ffffff;
        border-radius: 48rpx;
        border: 1rpx solid #999999;
     }
  }
  .qrocde {
    width: 300rpx;
    height: 300rpx;
@@ -145,7 +231,7 @@
    .box_head_qrcode {
      width: 320rpx;
      height: 320rpx;
         margin: 20rpx auto;
      margin: 20rpx auto;
    }
    .text {
      font-size: 30rpx;
@@ -175,6 +261,10 @@
      color: #ffffff;
    }
  }
   .head_gray{
      background-color: #666666;
      color: #fff;
   }
  .head_error {
    background: #fdeded;
    .h1 {
@@ -214,7 +304,7 @@
    }
    .box_list_label {
      font-size: 32rpx;
      font-weight: 500;
      font-weight: 600;
      color: #222222;
    }
    .box_list_item {