k94314517
2025-07-18 f93f455134ff234be9d257c0f432c8052f1c32cd
small-program/pages/employment-certification/employment-certification.vue
@@ -2,7 +2,7 @@
   <view class="box">
      <view class="box-head" :style="{ backgroundImage: 'url(' + bgImg + ')' }">
         <view class="box-head-info">
            <text>用工认证</text>
            <text>{{title}}</text>
            <text>请按要求填写认证信息</text>
         </view>
         <view class="box-head-content">
@@ -12,8 +12,8 @@
                  <text>*</text>
               </view>
               <view class="item-cate">
                  <view class="item-cate-row active">个人</view>
                  <view class="item-cate-row">企业</view>
                  <view :class="'item-cate-row '+ (!isCompany?'active':'')" @click="changeIsCompany">个人</view>
                  <view :class="'item-cate-row '+(isCompany?'active':'')" @click="changeIsCompany">企业</view>
               </view>
            </view>
            <view class="item">
@@ -22,16 +22,16 @@
                  <text>*</text>
               </view>
               <view class="item-val">
                  <input type="text" placeholder="请输入真实姓名" />
                  <input type="text" v-model="form.linkName" placeholder="请输入真实姓名" />
               </view>
            </view>
            <view class="item">
            <view class="item" v-if="isCompany">
               <view class="item-label">
                  <text>单位名称</text>
                  <text>*</text>
               </view>
               <view class="item-val">
                  <input type="text" placeholder="请输入单位名称" />
                  <input type="text" v-model="form.companyName" placeholder="请输入单位名称" />
               </view>
            </view>
            <view class="item">
@@ -40,74 +40,526 @@
                  <text>*</text>
               </view>
               <view class="item-val">
                  <text>点击获取</text>
                  <button open-type="getPhoneNumber">获取手机号</button>
                  <input type="text" v-model="form.telephone" placeholder="请输入单位名称" />
               </view>
            </view>
            <view class="item">
            <view class="item" @click="chooseMPLoaction">
               <view class="item-label">
                  <text>接单位置</text>
                  <text>*</text>
               </view>
               <view class="item-val">
                  <text>请选择</text>
                  <text>{{form.location || '去选择'}}</text>
                  <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               </view>
            </view>
            <view class="item">
            <view class="item" v-if="!isCompany">
               <view class="item-label">
                  <text>身份证信息</text>
                  <text>*</text>
               </view>
               <view class="item-upload">
                  <view class="item-upload-item">
                     <image src="/static/image/btn_renxiang@2x.png" mode="widthFix"></image>
                  <view class="item-upload-item" @click="uploadImg(11)">
                     <image v-if="form.img11Full && form.img11Full !=''" :src="form.img11Full" mode="widthFix">
                     </image>
                     <image v-else src="/static/image/btn_renxiang@2x.png" mode="widthFix"></image>
                  </view>
                  <view class="item-upload-item">
                     <image src="/static/image/btn_guohui@2x.png" mode="widthFix"></image>
                  <view class="item-upload-item" @click="uploadImg(21)">
                     <image v-if="form.img21Full && form.img21Full !=''" :src="form.img21Full" mode="widthFix">
                     </image>
                     <image v-else src="/static/image/btn_guohui@2x.png" mode="widthFix"></image>
                  </view>
               </view>
            </view>
            <view class="item">
            <view class="item" v-if="isCompany">
               <view class="item-label">
                  <text>认证资料</text>
                  <text>*</text>
               </view>
               <view class="item-upload">
                  <view class="item-upload-item1">
               <view class="item-upload" v-if="flag==0">
                  <view class="item-upload-item1" @click="uploadImg(1)">
                     <view class="image">
                        <image src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>营业执照</text>
                        <text>1.营业执照</text>
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1">
                  <view class="item-upload-item1" @click="uploadImg(2)">
                     <view class="image">
                        <image src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>其它认证资料</text>
                        <text>2.其它认证资料</text>
                     </view>
                  </view>
               </view>
               <view class="item-upload" v-if="flag==1">
                  <view class="item-upload-item1" @click="uploadImg(1)">
                     <view class="image">
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>1.营业执照</text>
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1" @click="uploadImg(2)">
                     <view class="image">
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>2.道路运输经营许可证</text>
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1" @click="uploadImg(3)">
                     <view class="image">
                        <image v-if="form.img3Full && form.img3Full !=''" :src=" form.img3Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>3.其它认证资料</text>
                     </view>
                  </view>
               </view>
               <view class="item-upload" v-if="flag==2">
                  <view class="item-upload-item1" @click="uploadImg(1)">
                     <view class="image">
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>1.营业执照</text>
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1" @click="uploadImg(2)">
                     <view class="image">
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>2.食品经营许可证</text>
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1" @click="uploadImg(3)">
                     <view class="image">
                        <image v-if="form.img3Full && form.img3Full !=''" :src=" form.img3Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>3.从业人员健康证</text>
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1" @click="uploadImg(4)">
                     <view class="image">
                        <image v-if="form.img4Full && form.img4Full !=''" :src=" form.img4Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
                     <view class="info">
                        <text>4.其它认证资料</text>
                     </view>
                  </view>
               </view>
            </view>
         </view>
         <view class="box-head-botton">提交认证</view>
         <view class="box-head-botton" @click="applySubmit">提交认证</view>
         <view style="width: 100%; height: calc(30rpx + env(safe-area-inset-bottom));"></view>
      </view>
   </view>
</template>
<script>
   import {
      mapState
   } from 'vuex'
   export default {
      computed: {
         ...mapState(['userInfo'])
      },
      data() {
         return {
            bgImg: require('@/static/image/bg_renzheng_yonggong@2x.png')
            bgImg: require('@/static/image/bg_renzheng_yonggong@2x.png'),
            title: '用户认证',
            flag: null,
            isCompany:false,
            loading:false,
            info: {},
            form: {
               "companyName": "",
               authType: 0,
               "img1": "",
               "img2": "",
               "img11": "",
               "img21": "",
               "img3": "",
               "img4": "",
               "img1Full": "",
               "img2Full": "",
               "img11Full": "",
               "img21Full": "",
               "img3Full": "",
               "img4Full": "",
               "location": "",
               "lat": null,
               "lgt": null,
               "linkName": "",
               "location": "",
               "telephone": "",
               "type": 1
            }
         };
      },
      onLoad(options) {
         console.log(options)
         var flag = options.flag
         this.flag = flag
         this.initFormData()
         this.getApplyData()
         switch(flag){
            case '1':
               this.title = '货运认证'
               this.bgImg = require('@/static/image/bg_renzheng_huoyun@2x.png')
               break;
            case '2':
               this.title = '供餐认证'
               this.bgImg = require('@/static/image/bg_renzheng_gongcan@2x.png')
               break;
            default:
               this.bgImg = require('@/static/image/bg_renzheng_yonggong@2x.png'),
                  this.title = '用工认证'
               break;
         }
         uni.setNavigationBarTitle({
            title: this.title
         })
      },
      methods: {
         changeIsCompany() {
            this.isCompany = !this.isCompany
            this.form.authType = this.isCompany ? 1 : 0
         },
         inNullParam(param) {
            if (!param) {
               return true
            }
            if (param == '') {
               return true
            }
            return false
         },
         applySubmit() {
            if (this.loading) {
               return
            }
            console.log('表单参数:', this.form)
            this.loading = true
            if (this.inNullParam(this.form.linkName) ||
               this.inNullParam(this.form.lat) ||
               this.inNullParam(this.form.lgt) ||
               this.inNullParam(this.form.location) ||
               this.inNullParam(this.form.telephone)) {
               uni.showToast({
                  title: '对不起,请按要求填写申请信息1!',
                  icon: "none",
                  duration: 2000
               });
               this.loading = false
               return
            }
            if (this.form.authType == 0) {
               if (this.inNullParam(this.form.img11) || this.inNullParam(this.form.img21)) {
                  uni.showToast({
                     title: '对不起,请按要求填写申请信息3!',
                     icon: "none",
                     duration: 2000
                  });
                  this.loading = false
                  return
               }
            } else {
               if (this.inNullParam(this.form.img1) || this.inNullParam(this.form.companyName)) {
                  uni.showToast({
                     title: '对不起,请按要求填写申请信息4!',
                     icon: "none",
                     duration: 2000
                  });
                  this.loading = false
                  return
               }
            }
            if (this.form.type != 0 && this.form.authType == 1 && this.inNullParam(this.form.img2)) {
               uni.showToast({
                  title: '对不起,请按要求填写申请信息!',
                  icon: "none",
                  duration: 2000
               });
               this.loading = false
               return
            }
            if (this.form.type == 1 && this.form.authType == 1 && this.inNullParam(this.form.img2)) {
               uni.showToast({
                  title: '对不起,请按要求填写申请信息5!',
                  icon: "none",
                  duration: 2000
               });
               this.loading = false
               return
            }
            var that = this
            var param = this.form;
            if (this.form.authType == 0) {
               param.img1 = this.form.img11,
               param.img2 = this.form.img21
            }
            uni.requestSubscribeMessage({
               tmplIds: ['4H9ztG4E9BxJLwMuYSZ6oiM7yb4KX7u7bYhkhYJP0-Y'],
               success(res) {
                  console.log('提交参数:', param)
                  that.$u.api.applyForIdentity(param).then(res => {
                     if (res.code === 200) {
                        uni.showToast({
                           title: res.message || '申请成功 ',
                           icon: "none",
                           duration: 2000
                        });
                        uni.navigateBack({
                           delta: 1
                        });
                     }
                  }).finally(() => {
                     that.loading = false
                  })
               }
            })
         },
         chooseMPLoaction() {
            var that = this
            uni.chooseLocation({
               success: (res) => {
                  console.log(res);
                  this.form.location = res.address
                  this.form.lat = res.latitude
                  this.form.lgt = res.longitude
               },
               fail: () => {
                  // 如果用uni.chooseLocation没有获取到地理位置,则需要获取当前的授权信息,判断是否有地理授权信息
                  uni.getSetting({
                     success: (res) => {
                        console.log(res);
                        var status = res.authSetting;
                        if (!status['scope.userLocation']) {
                           // 如果授权信息中没有地理位置的授权,则需要弹窗提示用户需要授权地理信息
                           uni.showModal({
                              title: "是否授权当前位置",
                              content: "需要获取您的地理位置,请确认授权,否则地图功能将无法使用",
                              success: (tip) => {
                                 if (tip.confirm) {
                                    // 如果用户同意授权地理信息,则打开授权设置页面,判断用户的操作
                                    uni.openSetting({
                                       success: (data) => {
                                          // 如果用户授权了地理信息在,则提示授权成功
                                          if (data
                                             .authSetting[
                                                'scope.userLocation'
                                                ] === true
                                             ) {
                                             uni.showToast({
                                                title: "授权成功",
                                                icon: "success",
                                                duration: 1000
                                             })
                                             // 授权成功后,然后再次chooseLocation获取信息
                                             uni.chooseLocation({
                                                success: (
                                                   res
                                                   ) => {
                                                   console
                                                      .log(
                                                         "详细地址",
                                                         res
                                                         );
                                                   // this.getRegionFn(res);
                                                }
                                             })
                                          } else {
                                             uni.showToast({
                                                title: "授权失败",
                                                icon: "none",
                                                duration: 1000
                                             })
                                          }
                                       }
                                    })
                                 }
                              }
                           })
                        }
                     },
                     fail: (res) => {
                        uni.showToast({
                           title: "调用授权窗口失败",
                           icon: "none",
                           duration: 1000
                        })
                     }
                  })
               }
            })
         },
         getApplyData(){
            var that = this
            var param ={ type:that.flag}
            this.$u.api.getIdentityInfo(param).then(res =>{
               if(res.code ===200){
                  if(res.data && res.data.id){
                     that.info = res.data
                     for (const key in that.form) {
                       that.form[key] = that.info[key]
                     }
                     if(that.info.authType == 1){
                        that.form.img1Full = that.info.imgList.length>0?that.info.imgList[0]:null
                        that.form.img2Full = that.info.imgList.length>1?that.info.imgList[1]:null
                        that.form.img3Full = that.info.imgList.length>2?that.info.imgList[2]:null
                        that.form.img4Full = that.info.imgList.length>3?that.info.imgList[3]:null
                     }else{
                        that.form.img1= null
                        that.form.img1 = null
                        that.form.img2 = null
                        that.form.img2Full = null
                        that.form.img11 = that.info.img1
                        that.form.img11Full = that.info.imgList.length>0?that.info.imgList[0]:null
                        that.form.img21 = that.info.img2
                        that.form.img21Full = that.info.imgList.length>1?that.info.imgList[1]:null
                     }
                  }
               }
             })
         },
         uploadImg(index){
            var that =this
            uni.chooseImage({
               count: 1, // 默认9
               sizeType: ['original', 'compressed'],
               sourceType: ['album', 'camera'], //['album','camera'],
               mediaType: ['image'], //['image', 'video'],
               success: function(res1) {
                  const tempFiles = res1.tempFiles //包含图片大小的数组
                  if (tempFiles[0].size > 20 * 1024 * 1024) {
                     uni.showToast({
                        title: '上传图片不能大于20M!',
                        duration: 2000,
                        icon: "none"
                     });
                     return
                  }
                  uni.uploadFile({
                     url: that.$baseUrl + 'web/public/upload',
                     filePath: res1.tempFilePaths[0],
                     name: 'file',
                     formData: {
                        'folder': 'identity',
                        'flag': index
                     },
                     success: (data) => {
                        uni.showToast({
                           title: '上传成功',
                           duration: 2000,
                           icon: "none"
                        });
                        const res = JSON.parse(data.data)
                        console.log(res)
                        if (res.data.flag == '11') {
                           that.form.img11 = res.data.imgaddr
                           that.form.img11Full = res.data.url
                        } else if (res.data.flag == '21') {
                           that.form.img21 = res.data.imgaddr
                           that.form.img21Full = res.data.url
                           console.log(21, that.form.img21Full)
                        } else if (res.data.flag == '1') {
                           that.form.img1 = res.data.imgaddr
                           that.form.img1Full = res.data.url
                        } else if (res.data.flag == '2') {
                           that.form.img2 = res.data.imgaddr
                           that.form.img2Full = res.data.url
                        } else if (res.data.flag == '3') {
                           that.form.img3 = res.data.imgaddr
                           that.form.img3Full = res.data.url
                        } else if (res.data.flag == '4') {
                           that.form.img4 = res.data.imgaddr
                           that.form.img4Full = res.data.url
                        }
                     },
                     fail: (e) => {
                        uni.showToast({
                           title: '上传失败',
                           duration: 2000,
                           icon: "none"
                        });
                     }
                  })
               },
               fail: function(err) {
                  hideLoading()
                  reject("选择文件失败", err)
               }
            })
         },
         initFormData() {
            this.form = {
               "companyName": "",
               authType: 0,
               "img1": "",
               "img2": "",
               "img11": "",
               "img21": "",
               "img3": "",
               "img4": "",
               "img1Full": "",
               "img2Full": "",
               "img11Full": "",
               "img21Full": "",
               "img3Full": "",
               "img4Full": "",
               "location": "",
               "lat": null,
               "lgt": null,
               "linkName": this.userInfo.name,
               "location": "",
               "telephone": this.userInfo.telephone,
               "type": this.flag
            }
         }
      }
   }
</script>
@@ -121,6 +573,7 @@
<style lang="scss" scoped>
   .box {
      width: 100%;
      .box-head {
         width: 100%;
         height: 300rpx;
@@ -128,6 +581,7 @@
         box-sizing: border-box;
         background-repeat: no-repeat;
         background-size: 100% 100%;
         .box-head-botton {
            width: 100%;
            height: 88rpx;
@@ -140,24 +594,28 @@
            border-radius: 44rpx;
            margin-top: 30rpx;
         }
         .box-head-info {
            width: 100%;
            display: flex;
            flex-direction: column;
            text {
               &:nth-child(1) {
                  font-weight: bold;
                  font-size: 48rpx;
                  color: #FFFFFF;
               }
               &:nth-child(2) {
                  font-weight: 400;
                  font-size: 26rpx;
                  color: rgba(255,255,255,0.8);
                  color: rgba(255, 255, 255, 0.8);
                  margin-top: 14rpx;
               }
            }
         }
         .box-head-content {
            width: 100%;
            padding: 40rpx 30rpx;
@@ -165,14 +623,17 @@
            background-color: #FFFFFF;
            border-radius: 20rpx;
            margin-top: 30rpx;
            .item {
               width: 100%;
               display: flex;
               flex-direction: column;
               margin-bottom: 30rpx;
               &:last-child {
                  margin: 0 !important;
               }
               .item-cate {
                  width: 100%;
                  display: flex;
@@ -180,10 +641,12 @@
                  padding: 30rpx 0;
                  box-sizing: border-box;
                  border-bottom: 1rpx solid #E5E5E5;
                  .active {
                     background: #00BC12 !important;
                     color: #FFFFFF !important;
                  }
                  .item-cate-row {
                     width: 208rpx;
                     height: 72rpx;
@@ -192,20 +655,24 @@
                     background: #EEEEEE;
                     border-radius: 36rpx;
                     margin-right: 20rpx;
                     &:last-child {
                        margin: 0 !important;
                     }
                  }
               }
               .item-label {
                  display: flex;
                  align-items: center;
                  text {
                     &:nth-child(1) {
                        font-weight: 500;
                        font-size: 32rpx;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-weight: 500;
                        font-size: 32rpx;
@@ -213,6 +680,7 @@
                     }
                  }
               }
               .item-upload {
                  width: 100%;
                  padding: 30rpx 0;
@@ -221,29 +689,44 @@
                  align-items: center;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  .item-upload-item {
                     width: 300rpx;
                     border-radius: 10px;
                     height: 196rpx;
                     display: flex;
                     align-items: center;
                     justify-content: content;
                     overflow: hidden;
                     border: 1px solid #c2c2c2;
                     image {
                        width: 100%;
                        height: 100%;
                     }
                  }
                  .item-upload-item1 {
                     width: 300rpx;
                     width: 45%;
                     padding-bottom: 40px;
                     border-radius: 10px;
                     .image {
                        width: 100%;
                        height: 196rpx;
                        background: #F7F7F7;
                        border: 1px solid #c2c2c2;
                        border-radius: 16rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        image {
                           width: 48rpx;
                           height: 48rpx;
                        }
                        text {
                           font-weight: 400;
                           font-size: 28rpx;
@@ -251,18 +734,21 @@
                           margin-top: 12rpx;
                        }
                     }
                     .info {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 16rpx;
                        text {
                           &:nth-child(1) {
                              font-weight: 400;
                              font-size: 26rpx;
                              color: #333333;
                           }
                           &:nth-child(2) {
                              font-weight: 400;
                              font-size: 26rpx;
@@ -272,6 +758,7 @@
                     }
                  }
               }
               .item-val {
                  width: 100%;
                  padding: 30rpx 0;
@@ -281,17 +768,20 @@
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 1rpx solid #E5E5E5;
                  input {
                     width: 100%;
                     font-weight: 400;
                     font-size: 30rpx;
                     color: #222222;
                  }
                  text {
                     font-weight: 400;
                     font-size: 30rpx;
                     color: #666666;
                  }
                  button {
                     width: 100%;
                     height: 100%;
@@ -305,4 +795,4 @@
         }
      }
   }
</style>
</style>