jiangping
2024-06-07 73af3ed9fbcc616cdecc739fc4307163c19c5764
h5/pages/visitorApplication/visitorApplication.vue
@@ -26,27 +26,33 @@
               <text>*</text>
            </view>
            <view class="list_item_content" @click="showName = true">
               <text :style="{color: form1.receptMemberName ? '#000000' : ''}">{{form1.receptMemberName ? form1.receptMemberName : '请选择'}}</text>
          <text :style="{ color: form1.receptMemberName ? '#000000' : '' }">{{
            form1.receptMemberName ? form1.receptMemberName : "请选择"
          }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>入厂时间</text>
          <text>入园时间</text>
               <text>*</text>
            </view>
            <view class="list_item_content" @click="show4 = true">
               <text :style="{color: form1.starttime ? '#000000' : ''}">{{form1.starttime ? form1.starttime : '请选择'}}</text>
          <text :style="{ color: form1.starttime ? '#000000' : '' }">{{
            form1.starttime ? form1.starttime : "请选择"
          }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>离厂时间</text>
          <text>离园时间</text>
               <text>*</text>
            </view>
            <view class="list_item_content" @click="openLC">
               <text :style="{color: form1.endtime ? '#000000' : ''}">{{form1.endtime ? form1.endtime : '请选择'}}</text>
          <text :style="{ color: form1.endtime ? '#000000' : '' }">{{
            form1.endtime ? form1.endtime : "请选择"
          }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
@@ -67,7 +73,9 @@
               <text>*</text>
            </view>
            <view class="list_item_content" @click="showReason = true">
               <text :style="{color: form1.reason ? '#000000' : ''}">{{form1.reason ? form1.reason : '请选择拜访事由'}}</text>
          <text :style="{ color: form1.reason ? '#000000' : '' }">{{
            form1.reason ? form1.reason : "请选择拜访事由"
          }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
@@ -77,7 +85,11 @@
               <text>*</text>
            </view>
            <view class="list_item_content">
               <switch color="#4e99a9" style="transform:scale(0.8)" @change="constructionChange" />
          <switch
            color="#4e99a9"
            style="transform: scale(0.8)"
            @change="constructionChange"
          />
            </view>
         </view>
         <view v-if="form1.type == '1'" class="list_item">
@@ -86,7 +98,12 @@
               <!-- <text>*</text> -->
            </view>
            <view class="list_item_content">
               <input type="text" v-model="form1.constructionReason" placeholder="请输入施工内容" placeholder-style="color: #999999;" />
          <input
            type="text"
            v-model="form1.constructionReason"
            placeholder="请输入施工内容"
            placeholder-style="color: #999999;"
          />
            </view>
         </view>
         <view class="list_item">
@@ -95,7 +112,9 @@
               <text></text>
            </view>
            <view class="list_item_content" @click="openInput(1)">
               <text :style="{color: form1.carNos ? '#000000' : ''}">{{form1.carNos ? form1.carNos : '请输入车牌号码'}}</text>
          <text :style="{ color: form1.carNos ? '#000000' : '' }">{{
            form1.carNos ? form1.carNos : "请输入车牌号码"
          }}</text>
               <!-- <input type="text" placeholder="请输入车牌号" v-model="form1.carNos" maxlength="8" placeholder-style="color: #999999;" /> -->
            </view>
         </view>
@@ -104,7 +123,7 @@
      <view class="footer">
         <view class="footer_btn" @click="onSubmit">提交</view>
      </view>
      <!-- 入场时间 -->
    <!-- 入园时间 -->
      <u-datetime-picker
         :show="show4"
         :minDate="new Date().getTime()"
@@ -112,7 +131,7 @@
         @cancel="show4 = false"
         @confirm="setstarttime"
      ></u-datetime-picker>
      <!-- 离场时间 -->
    <!-- 离园时间 -->
      <u-datetime-picker
         v-if="form1.starttime"
         :show="show5"
@@ -122,16 +141,34 @@
         @confirm="setendtime"
      ></u-datetime-picker>
      <!-- 门禁 -->
      <u-popup :show="show" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="closeMJ">
    <u-popup
      :show="show"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="closeMJ"
    >
         <view class="menjin">
            <view class="respondent-title">
               选择门禁
            </view>
        <view class="respondent-title"> 选择门禁 </view>
            <scroll-view scroll-y class="list">
               <view class="list_item" v-for="(item, index) in columns" :key="index" @click="seleMJ(index)">
          <view
            class="list_item"
            v-for="(item, index) in columns"
            :key="index"
            @click="seleMJ(index)"
          >
                  <text>{{item.name}}</text>
                  <image src="@/static/checkbox@2x.png" mode="widthFix" v-show="!item.active"></image>
                  <image src="@/static/checkbo1x_sel@2x.png" mode="widthFix" v-show="item.active"></image>
            <image
              src="@/static/checkbox@2x.png"
              mode="widthFix"
              v-show="!item.active"
            ></image>
            <image
              src="@/static/checkbo1x_sel@2x.png"
              mode="widthFix"
              v-show="item.active"
            ></image>
               </view>
            </scroll-view>
            <view class="menjin_footer">
@@ -141,18 +178,29 @@
         </view>
      </u-popup>
      <!-- 选择随行人员 -->
      <u-popup :show="show1" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show1 = false">
    <u-popup
      :show="show1"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show1 = false"
    >
         <view class="popup-content">
            <view class="respondent-title">
               选择随行人员
            </view>
        <view class="respondent-title"> 选择随行人员 </view>
            <view class="search-box">
               <view class="search-box-top">
                  <view class="search-box-top-ipt">
                     <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
                     <input type="text" placeholder="搜索姓名/手机号" />
                  </view>
                  <text @click="show1 = false; show3 = true">新增</text>
            <text
              @click="
                show1 = false;
                show3 = true;
              "
              >新增</text
            >
               </view>
               <view class="search-box-total">共0条数据</view>
            </view>
@@ -181,7 +229,14 @@
         </view>
      </u-popup>
      <!-- 车辆 -->
      <u-popup :show="show2" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show2 = false">
    <u-popup
      :show="show2"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show2 = false"
    >
         <view class="addcar">
            <view class="addcar_head">添加车辆</view>
            <view class="addcar_ipt">
@@ -194,7 +249,14 @@
         </view>
      </u-popup>
      <!-- 添加随行人员 -->
      <u-popup :show="show3" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show3 = false">
    <u-popup
      :show="show3"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show3 = false"
    >
         <view class="adduser">
            <view class="adduser_head">随行人员</view>
            <view class="adduser_list">
@@ -204,7 +266,12 @@
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" v-model="withUserList.name" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入真实姓名" />
              <input
                type="text"
                v-model="withUserList.name"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入真实姓名"
              />
                  </view>
               </view>
               <view class="adduser_list_item">
@@ -213,7 +280,13 @@
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="number" v-model="withUserList.phone" maxlength="11" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入手机号" />
              <input
                type="number"
                v-model="withUserList.phone"
                maxlength="11"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入手机号"
              />
                  </view>
               </view>
               <view class="adduser_list_item">
@@ -222,7 +295,14 @@
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt" @click="show6 = true">
                     <text :style="{color: withUserList.idcardTypeName ? '#000000' : ''}">{{withUserList.idcardTypeName ? withUserList.idcardTypeName : '请选择'}}</text>
              <text
                :style="{ color: withUserList.idcardTypeName ? '#000000' : '' }"
                >{{
                  withUserList.idcardTypeName
                    ? withUserList.idcardTypeName
                    : "请选择"
                }}</text
              >
                     <u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
                  </view>
               </view>
@@ -232,7 +312,13 @@
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" v-model="withUserList.idcardNo" maxlength="18" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入证件号码" />
              <input
                type="text"
                v-model="withUserList.idcardNo"
                maxlength="18"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入证件号码"
              />
                  </view>
               </view>
               <view class="adduser_list_item">
@@ -241,7 +327,12 @@
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" v-model="withUserList.companyName" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入公司名称" />
              <input
                type="text"
                v-model="withUserList.companyName"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入公司名称"
              />
                  </view>
               </view>
               <view class="adduser_list_item">
@@ -250,21 +341,37 @@
                     <text></text>
                  </view>
                  <view class="adduser_list_item_ipt" @click="openInput(2)">
                     <text :style="{color: withUserList.carNos ? '#000000' : ''}">{{withUserList.carNos ? withUserList.carNos : '请输入车牌号码'}}</text>
              <text :style="{ color: withUserList.carNos ? '#000000' : '' }">{{
                withUserList.carNos ? withUserList.carNos : "请输入车牌号码"
              }}</text>
                     <!-- <input type="text" v-model="withUserList.carNos" disabled placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入车牌号" /> -->
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label1">
                     <text class="cc">人脸照片<b>*</b></text>
                     <text class="aa">1、请提供五官清晰,人脸居中的正面人脸免冠照片;</text>
              <text class="aa"
                >1、请提供五官清晰,人脸居中的正面人脸免冠照片;</text
              >
                     <text class="aa">2、照片无逆光、无PS、无过度美颜处理;</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <view class="adduser_list_item_ipt1_upload" @click="upload('faceImg')" v-if="!withUserList.faceImgUrl">
                        <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
              <view
                class="adduser_list_item_ipt1_upload"
                @click="upload('faceImg')"
                v-if="!withUserList.faceImgUrl"
              >
                <u-icon
                  name="plus"
                  color="rgb(153, 153, 153)"
                  size="28"
                ></u-icon>
                     </view>
                     <view class="adduser_list_item_ipt1_upload" @click="upload('faceImg')" v-else>
              <view
                class="adduser_list_item_ipt1_upload"
                @click="upload('faceImg')"
                v-else
              >
                        <image :src="withUserList.faceImgUrl" mode="widthFix"></image>
                     </view>
                  </view>
@@ -275,10 +382,22 @@
                     <text v-if="visit === '1'">*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <view class="adduser_list_item_ipt1_upload" @click="upload('imgurl')" v-if="!withUserList.imgurlUrl">
                        <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
              <view
                class="adduser_list_item_ipt1_upload"
                @click="upload('imgurl')"
                v-if="!withUserList.imgurlUrl"
              >
                <u-icon
                  name="plus"
                  color="rgb(153, 153, 153)"
                  size="28"
                ></u-icon>
                     </view>
                     <view class="adduser_list_item_ipt1_upload" @click="upload('imgurl')" v-else>
              <view
                class="adduser_list_item_ipt1_upload"
                @click="upload('imgurl')"
                v-else
              >
                        <image :src="withUserList.imgurlUrl" mode="widthFix"></image>
                     </view>
                  </view>
@@ -290,19 +409,43 @@
            </view>
         </view>
      </u-popup>
      <u-picker keyName="name" :show="show6" :columns="columns1" @confirm="seleIdcard" @cancel="show6 = false"></u-picker>
      <u-picker keyName="name" :show="showName" :columns="VisitPoeple" @confirm="selectedName" @cancel="showName = false"></u-picker>
      <u-picker keyName="title" :show="showReason" :columns="VisitReason" @confirm="selectedReason" @cancel="showReason = false"></u-picker>
    <u-picker
      keyName="name"
      :show="show6"
      :columns="columns1"
      @confirm="seleIdcard"
      @cancel="show6 = false"
    ></u-picker>
    <u-picker
      keyName="name"
      :show="showName"
      :columns="VisitPoeple"
      @confirm="selectedName"
      @cancel="showName = false"
    ></u-picker>
    <u-picker
      keyName="title"
      :show="showReason"
      :columns="VisitReason"
      @confirm="selectedReason"
      @cancel="showReason = false"
    ></u-picker>
      <!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->
      <keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
      <qf-image-cropper ref="cropper" :width="280" :height="280" :radius="30" @crop="uploadImg"></qf-image-cropper>
    <qf-image-cropper
      ref="cropper"
      :width="280"
      :height="280"
      :radius="30"
      @crop="uploadImg"
    ></qf-image-cropper>
   </view>
</template>
<script>
   import tlyPictureCut from "@/components/tly-picture-cut/tlyPictureCut.vue";
   import keyboardInput from "@/components/keyboard-input/keyboard-input.vue";
   import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
import tlyPictureCut from "@/components/tly-picture-cut/tlyPictureCut.vue"
import keyboardInput from "@/components/keyboard-input/keyboard-input.vue"
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue'
   import { getDaysAfterDate } from '@/utils/utils.js'
   import {
      getVisitedMember,
@@ -367,7 +510,7 @@
            form: {},
            accessControl: '',
            verify: ''
         };
    }
      },
      components: { tlyPictureCut, keyboardInput, QfImageCropper },
      onLoad(options) {
@@ -397,13 +540,13 @@
            this.$refs.keyboard.close()
         },
         constructionChange(e) {
            console.log(e.detail.value);
      console.log(e.detail.value)
            this.form1.type = Number(e.detail.value)
            console.log(this.form1.type);
      console.log(this.form1.type)
         },
         uploadImg(file) {
            this.$refs.cropper.close()
            uni.showLoading({ title: '上传中', mask: true });
      uni.showLoading({ title: '上传中', mask: true })
            uni.uploadFile({
               url: `${this.$baseUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`,
               filePath: file.tempFilePath,
@@ -417,9 +560,9 @@
                  this.withUserList.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
               },
               complete() {
                  uni.hideLoading();
          uni.hideLoading()
               }
            });
      })
         },
         closeMJ() {
            this.show = false
@@ -433,11 +576,11 @@
               icon: 'none'
            })
            if (!this.form1.starttime) return uni.showToast({
               title: '入场时间不能为空',
        title: '入园时间不能为空',
               icon: 'none'
            })
            if (!this.form1.endtime) return uni.showToast({
               title: '离场时间不能为空',
        title: '离园时间不能为空',
               icon: 'none'
            })
            if (!this.form1.doorSelectName && this.accessControl == 1) return uni.showToast({
@@ -499,7 +642,7 @@
               title: '手机号不能为空',
               icon: 'none'
            })
            const regExp = /^1[3456789]\d{9}$/;
      const regExp = /^1[3456789]\d{9}$/
            if (!regExp.test(this.withUserList.phone)) return uni.showToast({
               title: '手机号格式错误',
               icon: 'none'
@@ -513,7 +656,7 @@
               icon: 'none'
            })
            if (this.withUserList.idcardType === 0) {
               const regex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dxX]$/;
        const regex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dxX]$/
               if (!regex.test(this.withUserList.idcardNo)) return uni.showToast({
                  title: '证件号码格式错误',
                  icon: 'none'
@@ -555,7 +698,7 @@
            }
            uni.chooseImage({
               success: (chooseImageRes) => {
                  uni.showLoading({ title: '上传中', mask: true });
          uni.showLoading({ title: '上传中', mask: true })
                  for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
                     uni.uploadFile({
                        url: `${this.$baseUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`,
@@ -576,13 +719,13 @@
                        },
                        complete() {
                           if (i === chooseImageRes.tempFilePaths.length - 1) {
                              uni.hideLoading();
                  uni.hideLoading()
                           }
                        }
                     });
            })
                  }
               }
            });
      })
         },
         seleIdcard(e) {
            this.withUserList.idcardType = e.value[0].id
@@ -597,7 +740,7 @@
         },
         selectedReason(e) {
            this.form1.reason = e.value[0].title
            console.log(e.value[0].title);
      console.log(e.value[0].title)
            this.showReason = false
         },
         submitCart() {
@@ -640,20 +783,20 @@
         },
         openLC() {
            if (!this.form1.starttime) return uni.showToast({
               title: '请先选择入厂时间',
        title: '请先选择入园时间',
               icon: 'none'
            })
            this.show5 = true
         },
         setstarttime(e) {
            this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
      this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
            // this.maxTime = getDaysAfterDate(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM'), this.day)
            this.maxTime = this.form1.starttime
            console.log(this.form1.starttime);
      console.log(this.form1.starttime)
            this.show4 = false
         },
         setendtime(e) {
            this.form1.endtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
      this.form1.endtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
            this.show5 = false
         },
         formatTimeStamp(date) {
@@ -711,7 +854,7 @@
</script>
<style>
   page {
      background-color: #F7F7F7 !important;
  background-color: #f7f7f7 !important;
   }
   .u-upload__button {
      margin: 0 !important;
@@ -765,7 +908,7 @@
               align-items: center;
               justify-content: center;
               border-radius: 10rpx;
               background-color: #025EEF;
        background-color: #025eef;
               color: #ffffff;
               font-size: 26rpx;
               margin-left: 30rpx;
@@ -794,7 +937,7 @@
               width: 100%;
               padding: 24rpx 0;
               box-sizing: border-box;
               border-bottom: 1rpx solid #E5E5E5;
        border-bottom: 1rpx solid #e5e5e5;
               display: flex;
               align-items: center;
               justify-content: space-between;
@@ -812,7 +955,7 @@
                        font-size: 30rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #E0312A;
              color: #e0312a;
                     }
                  }
                  .aa {
@@ -836,7 +979,7 @@
                        font-size: 30rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #E0312A;
              color: #e0312a;
                     }
                  }
               }
@@ -918,7 +1061,7 @@
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            background: #F7F7F7;
      background: #f7f7f7;
            border-radius: 50rpx;
            margin-top: 60rpx;
            input {
@@ -946,10 +1089,10 @@
               line-height: 88rpx;
               font-size: 32rpx;
               font-weight: 400;
               color: #025EEF;
        color: #025eef;
               text-align: center;
               border-radius: 44rpx;
               border: 1rpx solid #025EEF;
        border: 1rpx solid #025eef;
               margin-right: 18rpx;
               &:last-child {
                  margin-right: 0 !important;
@@ -983,7 +1126,7 @@
                  height: 100%;
                  padding: 0 30rpx;
                  box-sizing: border-box;
                  background: #F7F7F7;
          background: #f7f7f7;
                  border-radius: 4rpx;
                  display: flex;
                  align-items: center;
@@ -998,7 +1141,7 @@
                     height: 100%;
                     font-size: 26rpx;
                     font-weight: 400;
                     color: #B2B2B2;
            color: #b2b2b2;
                  }
               }
               text {
@@ -1006,7 +1149,7 @@
                  margin-left: 30rpx;
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #025EEF;
          color: #025eef;
               }
            }
            .search-box-total {
@@ -1026,7 +1169,7 @@
               height: 102rpx;
               display: flex;
               align-items: center;
               border-bottom: 1rpx solid #E5E5E5;
        border-bottom: 1rpx solid #e5e5e5;
               .item_a {
                  flex-shrink: 0;
                  width: 36rpx;
@@ -1069,7 +1212,7 @@
                        color: #999999;
                        padding: 1rpx 4rpx;
                        box-sizing: border-box;
                        background-color: #EEEEEE;
              background-color: #eeeeee;
                        margin-left: 12rpx;
                     }
                  }
@@ -1107,15 +1250,14 @@
               height: 72rpx;
               line-height: 72rpx;
               text-align: center;
               background: #025EEF;
        background: #025eef;
               border-radius: 8rpx;
               font-size: 28rpx;
               font-weight: 500;
               color: #FFFFFF;
        color: #ffffff;
            }
         }
      }
      .head {
         width: 100%;
@@ -1145,7 +1287,7 @@
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #E5E5E5;
      border-bottom: 1rpx solid #e5e5e5;
            .list_item_label {
               flex-shrink: 0;
@@ -1162,7 +1304,7 @@
                  &:nth-child(2) {
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #E42D2D;
            color: #e42d2d;
                  }
               }
            }
@@ -1217,7 +1359,7 @@
               height: 64rpx;
               padding: 0 20rpx;
               box-sizing: border-box;
               background-color: #EEEEEE;
        background-color: #eeeeee;
               border-radius: 4rpx;
               margin-right: 20rpx;
               margin-bottom: 20rpx;
@@ -1279,7 +1421,7 @@
            border-radius: 44rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #FFFFFF;
      color: #ffffff;
         }
      }
   }