<template>
|
<view class="box">
|
<view class="box-head">
|
<!-- 用工 -->
|
<image class="box-head-bg" src="@/static/image/bg_renzheng_yonggong@2x.png" mode="widthFix" v-if="title === '用工认证'"></image>
|
<!-- 货运 -->
|
<image class="box-head-bg" src="@/static/image/bg_renzheng_huoyun@2x.png" mode="widthFix" v-if="title === '货运认证'"></image>
|
<!-- 用餐 -->
|
<image class="box-head-bg" src="@/static/image/bg_renzheng_gongcan@2x.png" mode="widthFix" v-if="title === '供餐认证'"></image>
|
<view class="box-head-info">
|
<text>{{title}}</text>
|
<text>请按要求填写认证信息</text>
|
</view>
|
<view class="box-head-content">
|
<view class="item">
|
<view class="item-label">
|
<text>认证类型</text>
|
<text>*</text>
|
</view>
|
<view class="item-cate">
|
<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">
|
<view class="item-label">
|
<text>联系人</text>
|
<text>*</text>
|
</view>
|
<view class="item-val">
|
<input type="text" v-model="form.linkName" placeholder="请输入真实姓名" />
|
</view>
|
</view>
|
<view class="item" v-if="isCompany">
|
<view class="item-label">
|
<text>单位名称</text>
|
<text>*</text>
|
</view>
|
<view class="item-val">
|
<input type="text" v-model="form.companyName" placeholder="请输入单位名称" />
|
</view>
|
</view>
|
<view class="item">
|
<view class="item-label">
|
<text>手机号</text>
|
<text>*</text>
|
</view>
|
<view class="item-val">
|
<input type="text" v-model="form.telephone" placeholder="请输入单位名称" />
|
</view>
|
</view>
|
<view class="item" @click="chooseMPLoaction">
|
<view class="item-label">
|
<text>接单位置</text>
|
<text>*</text>
|
</view>
|
<view class="item-val">
|
<text>{{form.location || '去选择'}}</text>
|
<u-icon name="arrow-right" color="#111111" size="18"></u-icon>
|
</view>
|
</view>
|
<view class="item" v-if="!isCompany">
|
<view class="item-label">
|
<text>身份证信息</text>
|
<text>*</text>
|
</view>
|
<view class="item-upload">
|
<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" @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" v-if="isCompany">
|
<view class="item-label">
|
<text>认证资料</text>
|
<text>*</text>
|
</view>
|
<view class="item-upload" v-if="flag==0">
|
<view class="item-upload-item1" @click="uploadImg(1)">
|
<view class="image":style="form.img1Full?'background-image:url('+form.img1Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&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":style="form.img2Full?'background-image:url('+form.img2Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&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>
|
</view>
|
</view>
|
</view>
|
<view class="item-upload" v-if="flag==1">
|
<view class="item-upload-item1" @click="uploadImg(1)">
|
<view class="image" :style="form.img1Full?'background-image:url('+form.img1Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix">
|
</image>
|
<image 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" :style="form.img2Full?'background-image:url('+form.img2Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&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":style="form.img3Full?'background-image:url('+form.img3Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&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":style="form.img1Full?'background-image:url('+form.img1Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&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":style="form.img2Full?'background-image:url('+form.img2Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&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":style="form.img3Full?'background-image:url('+form.img3Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&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":style="form.img4Full?'background-image:url('+form.img4Full+') ;background-size: 100% 100%;':''">
|
<image v-if="1==2&&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" @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: null,
|
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() {
|
console.log(this.loading)
|
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: ['VJho7-lf-4_WZFfOzenDndgwNDIA0EvCiE6vqBnExpQ'],
|
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.switchTab({
|
url:'/pages/mine/mine'
|
});
|
}
|
}).finally(() => {
|
that.loading = false
|
})
|
},
|
fail(err) {
|
console.log(err)
|
}
|
})
|
},
|
chooseMPLoaction() {
|
var that = this
|
uni.chooseLocation({
|
success: (res) => {
|
console.log(res);
|
this.form.location = res.name || 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>
|
|
<style>
|
page {
|
background-color: #F7F7F7;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
|
.box-head {
|
width: 100%;
|
height: 300rpx;
|
padding: 34rpx 40rpx 0 40rpx;
|
box-sizing: border-box;
|
// background-repeat: no-repeat;
|
// background-size: 100% 100%;
|
position: relative;
|
|
.box-head-bg {
|
width: 100%;
|
height: 300rpx;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: -1;
|
}
|
|
.box-head-botton {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
background: #00BC12;
|
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);
|
margin-top: 14rpx;
|
}
|
}
|
}
|
|
.box-head-content {
|
width: 100%;
|
padding: 40rpx 30rpx;
|
box-sizing: border-box;
|
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;
|
align-items: center;
|
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;
|
line-height: 72rpx;
|
text-align: center;
|
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;
|
color: #FF0000;
|
}
|
}
|
}
|
|
.item-upload {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
display: flex;
|
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: 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;
|
color: #666666;
|
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;
|
color: #FF0000;
|
}
|
}
|
}
|
}
|
}
|
|
.item-val {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
position: relative;
|
display: flex;
|
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%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
opacity: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
