ll

liukangdong

2024-09-11 de0e3ab6247895cb9a375fb3c37e659b2297151c

 h5/pages/userinfo/userinfo.vue

@@ -2,45 +2,46 @@
   <view class="container">
      <view class="visitor-form">
         <view class="cell">
            <view class="title">姓名<b>*</b></view>
            <view class="title"><b>*</b>姓名</view>
            <view class="content">
               <input class="input" placeholder-style="color: #999999;" maxlength="30" v-model="visitorData.name" placeholder="请输入您的真实姓名" />
            </view>
         </view>
         <view class="cell">
            <view class="title">手机号<b>*</b></view>
            <view class="title"><b>*</b>手机号</view>
            <view class="content">
               <input class="input" maxlength="11" placeholder-style="color: #999999;" v-model="visitorData.phone" placeholder="请输入您的手机号" />
               <input type="number" class="input" maxlength="11" placeholder-style="color: #999999;" v-model="visitorData.phone" placeholder="请输入您的手机号" />
            </view>
         </view>
         <view class="cell">
            <view class="title">证件类型<b>*</b></view>
            <view class="title"><b>*</b>证件类型</view>
            <view class="content" @click="show = true">
               <text :style="{color: visitorData.idcardTypeName ? '#000000' : ''}">{{visitorData.idcardTypeName ? visitorData.idcardTypeName : '请选择'}}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
               <u-icon name="arrow-right" color="#CCCCCC" size="16" class="ml6"></u-icon>
            </view>
         </view>
         <view class="cell">
            <view class="title">证件号码<b>*</b></view>
            <view class="title"><b>*</b>证件号码</view>
            <view class="content">
               <input class="input" maxlength="18" placeholder-style="color: #999999;" v-model="visitorData.idcardNo" placeholder="请输入您的证件号码" />
            </view>
         </view>
         <view class="empty"></view>
         <view class="cell">
            <view class="title">公司</view>
            <view class="title"><b>*</b>公司名称</view>
            <view class="content">
               <input class="input" maxlength="50" placeholder-style="color: #999999;" v-model="visitorData.companyName" placeholder="请输入您的公司名称" />
            </view>
         </view>
         <view class="cell">
            <view class="title1">
               <text class="title1_a">人脸照片<b>*</b></text>
               <text class="title1_a"><b>*</b>人脸照片</text>
               <text class="title1_b">1、请提供五官清晰，人脸居中的正面人脸免冠照片；</text>
               <text class="title1_b">2、照片无逆光、无PS、无过度美颜处理</text>
            </view>
            <view class="content">
               <view class="content_uplaod" @click="upload('faceImg')" v-if="!visitorData.faceImgUrl">
                  <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
                  <u-icon name="plus" color="rgb(153, 153, 153)" size="20"></u-icon>
               </view>
               <view class="content_uplaod" @click="upload('faceImg')" v-else>
                  <image :src="visitorData.faceImgUrl" mode="widthFix"></image>
@@ -48,7 +49,7 @@
            </view>
         </view>
         <view style="height: 20rpx; background-color: #F7F7F7;"></view>
         <view class="cell">
         <!-- <view class="cell">
            <view class="title">健康证<b v-if="visit === '1'">*</b></view>
            <view class="content">
               <view class="content_uplaod" @click="upload('imgurl')" v-if="!visitorData.imgurlUrl">
@@ -58,45 +59,86 @@
                  <image :src="visitorData.imgurlUrl" mode="widthFix"></image>
               </view>
            </view>
         </view>
         </view> -->
      </view>
      <view class="footer-box">
         <view class="submit-button" @click="submit">下一步</view>
      </view>
      <u-picker keyName="name" :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
      <!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->
      <u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker>
      <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 QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
   import { mapState } from 'vuex'
   import { uploadAvatar } from "@/utils/config"
   import { getSystemDictData, visitorSub } from '@/api'
   export default {
      data() {
         return {
            photoSrc: "",
            show: false,
            visit: '',
            type: '',
            columns: [[{name: '身份证', id: 0}, {name: '港澳证件', id: 1},{name: '护照', id: 2}]],
            fileList: [],
            visitorData: {
               userAnswerId: '',
               name: '',
               phone: '',
               idcardType: '',
               idcardTypeName: '',
               idcardType: 0,
               idcardTypeName: '身份证',
               idcardNo: '',
               faceImg: '',
               faceImgUrl: '',
               imgurl: '',
               imgurlUrl: ''
               imgurlUrl: '',
               companyName: ''
            }
         }
      },
      components: { tlyPictureCut, QfImageCropper },
      
      onLoad(option) {
         this.visitorData.userAnswerId = option.userAnswerId
         this.getVisit()
         const visitorData = uni.getStorageSync('visitorData')
         if(visitorData && visitorData.name){
            this.visitorData = visitorData
         }
         // if (this.member ) {
         //    this.visitorData.name = this.member.name
         //    this.visitorData.phone = this.member.phone
         //    this.visitorData.idcardNo = this.member.idcardDecode
         //    this.visitorData.companyName = this.member.visitCompanyName
         //    this.visitorData.faceImg = this.member.faceImg
         //    if (this.member.faceImg) {
         //       this.visitorData.faceImgUrl = this.member.prefixUrl + this.member.faceImg
         //    }
         //    this.visitorData.imgurl = this.member.imgurl
         //    if (this.member.imgurl) {
         //       this.visitorData.imgurlUrl = this.member.prefixUrl + this.member.imgurl
         //    }
         //    this.visitorData.idcardType = this.member.idcardType
         //    if (this.member.idcardType === 0) {
         //       this.visitorData.idcardTypeName = '身份证'
         //    } else if (this.member.idcardType === 1) {
         //       this.visitorData.idcardTypeName = '港澳证件'
         //    } else if (this.member.idcardType === 2) {
         //       this.visitorData.idcardTypeName = '护照'
         //    }
         // }
         this.visitorData.userAnswerId = option.answerId || ''
         // this.getVisit()
         // uni.$on('update', (data) => {
         //    this.uploadImg(data.tempFilePath)
         // })
      },

      methods: {
         submit() {
            const { visitorData } = this
            if (!this.visitorData.name) return uni.showToast({
               title: '姓名不能为空',
               icon: 'none'
@@ -125,23 +167,28 @@
                  icon: 'none'
               })
            }
            if (!this.visitorData.companyName) return uni.showToast({
               title: '公司不能为空',
               icon: 'none'
            })
            if (!this.visitorData.faceImg) return uni.showToast({
               title: '人脸照片不能为空',
               icon: 'none'
            })
            if (this.visit === '1') {
               if (!this.visitorData.imgurl) return uni.showToast({
                  title: '健康证不能为空',
                  icon: 'none'
               })
            }
            // if (this.visit === '1') {
            //    if (!this.visitorData.imgurl) return uni.showToast({
            //       title: '健康证不能为空',
            //       icon: 'none'
            //    })
            // }
            uni.setStorageSync('visitorData', this.visitorData)
            uni.navigateTo({
               url: `/pages/visitorApplication/visitorApplication?data=${JSON.stringify(this.visitorData)}`
            });
         },
         getVisit() {
            // 是否需要答题
            this.$u.api.getSystemDictData({
            // 是否需要 健康证
            getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'HEALTH_CARD'
            }).then(res => {
@@ -150,40 +197,67 @@
               }
            })
         },
         uploadImg(file) {
            var that = this
            that.$refs.cropper.close()
            uni.showLoading({ title: '上传中', mask: true });
            uni.uploadFile({
               url: uploadAvatar,
               filePath: file.tempFilePath,
               name: 'file',
               formData: {
                  folderCode: 'MEMBER_IMG'
               },
               success: (uploadFileRes) => {
                  let res = JSON.parse(uploadFileRes.data)
                  this.visitorData.faceImg = res.data.halfPath
                  this.visitorData.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
               },
               fail(err) {
                  alert('失败')
               },
               complete() {
                  uni.hideLoading();
               }
            });
         },
         upload(type) {
            var that = this
            that.type = type
            if (type === 'faceImg') {
               that.$refs.cropper.chooseImage()
               return
            }
            uni.chooseImage({
               count: 1,
               success: (chooseImageRes) => {
                  // console.log(chooseImageRes.tempFilePaths[0])
                  uni.navigateTo({
                     url: `/pages/cropping/cropping?item=${JSON.stringify({ tempFilePath: chooseImageRes.tempFilePaths[0] })}`
                  })
                  return
                  uni.showLoading({ title: '上传中', mask: true });
                  for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
                  // if (type === 'faceImg') {
                  //    that.photoSrc = chooseImageRes.tempFilePaths[0];
                  //    that.$refs.tlyPictureCut.showPop();
                  // }
                  if (type === 'imgurl') {
                     uni.showLoading({ title: '上传中', mask: true });
                     uni.uploadFile({
                        url: `${this.$baseUrl}public/api/uploadFtp.do`,
                        filePath: chooseImageRes.tempFilePaths[i],
                        url: uploadAvatar,
                        filePath: chooseImageRes.tempFilePaths[0],
                        name: 'file',
                        formData: {
                           folderCode: 'MEMBER_IMG'
                        },
                        timeout: 60000,
                        success: (uploadFileRes) => {
                           let res = JSON.parse(uploadFileRes.data)
                           if (type === 'faceImg') {
                              this.visitorData.faceImg = res.data.halfPath
                              this.visitorData.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                           } else {
                              this.visitorData.imgurl = res.data.halfPath
                              this.visitorData.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                           }
                           that.visitorData.imgurl = res.data.halfPath
                           that.visitorData.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                        },
                        complete() {
                           if (i === chooseImageRes.tempFilePaths.length - 1) {
                              uni.hideLoading();
                           }
                           uni.hideLoading();
                        }
                     });
                  }
               },
               fail(err) {
                  alert('api报错')
               }
            });
         },
@@ -196,7 +270,7 @@
   }
</script>

<style>
<style lang="scss">
   page {
      background-color: #F7F7F7 !important;
   }
@@ -206,7 +280,9 @@
   .content_uplaod {
      width: 120rpx;
      height: 120rpx;
      background-color: #ececec;
      background: #F7F7F7;
      border-radius: 8rpx;
      border: 2rpx solid #E5E5E5;
      display: flex;
      align-items: center;
      justify-content: center;
@@ -215,6 +291,12 @@
   .content_uplaod image {
      width: 100%;
      height: 100%;
   }
   .empty{
      width: 750rpx;
      height: 20rpx;
      margin: 0 -30rpx;
      background-color: #f7f7f7;;
   }
   .title {
      font-size: 30rpx;
@@ -225,35 +307,36 @@
   }

   .title b {
      color: red;
      font-weight: bold;
      color: #E42D2D;
      margin-right: 4rpx;
   }
   
   .title1 {
      display: flex;
      flex-direction: column;
      .title1_a {
         font-size: 30rpx;
         font-size: 30rpx !important;
         font-weight: 400;
         color: #222222;
         display: flex;
         align-items: center;
         margin-bottom: 20rpx;
         b {
            color: red;
            font-weight: bold;
            color: #E42D2D;
            margin-right: 4rpx;

         }
      }
      .title1_b {
         font-size: 24rpx;
         font-size: 24rpx !important;
         font-weight: 400;
         color: #999999;
      }
   }

   .add-other {
      border: 1rpx solid #025eef;
      color: #025eef;
      border: 1rpx solid #4d99a8;
      color: #4d99a8;
      font-size: 11rpx;
      padding: 0 12rpx;
      height: 32rpx;
@@ -278,7 +361,7 @@
      width: calc(100% - 60rpx);
      height: 88rpx;
      line-height: 88rpx;
      background: #025eef;
      background: #4d99a8;
      border-radius: 4rpx;
      color: #fff;
      border-radius: 44rpx;