<template>
|
<view class="box">
|
<view class="box-head" :style="{ backgroundImage: 'url(' + bgImg + ')' }">
|
<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">
|
<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>
|
</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" @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'),
|
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>
|
|
<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%;
|
.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>
|
