jiangping
2025-07-18 4c32c837290daa0a0ce8aac6a1472942e5876f29
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,444 @@
                  <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,
            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()
         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
           }
           console.log('提交参数:',param)
           this.$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
                        })
                     }
                  })
               }
            })
         },
         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>
@@ -223,18 +593,27 @@
                  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;