327 lines
8.9 KiB
Vue
327 lines
8.9 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="flex flex-between cell" @click="uploadAvatar()">
|
||
<text class="name">本人头像</text>
|
||
<view class="flex flex-center img" v-if="!realHeadPortrait">
|
||
<text class="iconfont icon"></text>
|
||
</view>
|
||
<image :src="realHeadPortrait" mode="" class="img" v-else></image>
|
||
</view>
|
||
<view class="list">
|
||
<view class="list-item">
|
||
<text class="label">真实姓名：</text>
|
||
<input type="text" :maxlength="20" placeholder="请输入真实姓名" v-model="infor.realName" class="input"/>
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="label">身份证号：</text>
|
||
<input type="text" :maxlength="18" class="input flex-grow" v-model="infor.idNumber" placeholder="请输入身份证号" />
|
||
</view>
|
||
</view>
|
||
<view class="grid flex flex-between" @click="uplodingImg('idNumberJustImg')">
|
||
<text><text class="color-red">*</text>身份证正面：</text>
|
||
<view class="flex flex-center box">
|
||
<image :src="licenseImg" mode="" class="img" v-if="!idNumberJustImg"></image>
|
||
<image :src="idNumberJustImg" mode="" class="image" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="grid flex flex-between" @click="uplodingImg('idNumberBackImg')">
|
||
<text><text class="color-red">*</text>身份证反面：</text>
|
||
<view class="flex flex-center box">
|
||
<image :src="licenseImg" mode="" class="img" v-if="!idNumberBackImg"></image>
|
||
<image :src="idNumberBackImg" mode="" class="image" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="grid flex flex-between" @click="uplodingImg('healthCertificateImg')">
|
||
<text>健康证：</text>
|
||
<view class="flex flex-center box">
|
||
<image :src="licenseImg" mode="" class="img" v-if="!healthCertificateImg"></image>
|
||
<image :src="healthCertificateImg" mode="" class="image" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="grid flex flex-between" @click="uplodingImg('othreOneImg')">
|
||
<text>其他证照：</text>
|
||
<view class="flex flex-center box">
|
||
<image :src="licenseImg" mode="" class="img" v-if="!othreOneImg"></image>
|
||
<image :src="othreOneImg" mode="" class="image" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="grid flex flex-between" @click="uplodingImg('othreTwoImg')">
|
||
<text>其他证照：</text>
|
||
<view class="flex flex-center box">
|
||
<image :src="licenseImg" mode="" class="img" v-if="!othreTwoImg"></image>
|
||
<image :src="othreTwoImg" mode="" class="image" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="grid flex flex-between" @click="uplodingImg('othreThreeImg')">
|
||
<text>其他证照：</text>
|
||
<view class="flex flex-center box">
|
||
<image :src="licenseImg" mode="" class="img" v-if="!othreThreeImg"></image>
|
||
<image :src="othreThreeImg" mode="" class="image" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="flex flex-center" style="margin-top: 50rpx;">
|
||
<text class="font26 color-b9">
|
||
提交申请即表示同意中亿华商的<text class="color-purple" @click="jumpTo()">《配送员入驻条款》</text>
|
||
</text>
|
||
</view>
|
||
<!-- <view style="height: 80rpx;"></view> -->
|
||
<view class="flex flex-center fixed">
|
||
<button type="primary" class="bg-base btn" :loading="loading" :disabled="loading" @click="commit()">提交申请</button>
|
||
</view>
|
||
<avatar @upload="myUpload" ref="avatar"></avatar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import upload from "@/common/http/upload.js";
|
||
import url from '@/common/http/url.js';
|
||
import avatar from "@/components/yq-avatar/yq-avatar.vue";
|
||
export default{
|
||
components:{ avatar },
|
||
data(){
|
||
return {
|
||
licenseImg: this.$staticUrl + 'merchants/license.png',
|
||
loading: false,
|
||
infor: {},
|
||
isEdit: false,
|
||
callbackList: [],
|
||
realHeadPortrait: "",
|
||
idNumberJustImg: "",
|
||
idNumberBackImg: "",
|
||
healthCertificateImg: "",
|
||
othreOneImg: "",
|
||
othreTwoImg: "",
|
||
othreThreeImg: "",
|
||
noticeId: 0
|
||
}
|
||
},
|
||
onLoad(opt){
|
||
let examineData = uni.getStorageSync("examineData")
|
||
uni.removeStorageSync("examineData")
|
||
if (examineData) {
|
||
if (examineData.status === 3) this.isEdit = true
|
||
this.infor = examineData
|
||
delete this.infor.updateTime
|
||
delete this.infor.createTime
|
||
this.realHeadPortrait = examineData.realHeadPortrait
|
||
this.idNumberJustImg = examineData.idNumberJustImg
|
||
this.idNumberBackImg = examineData.idNumberBackImg
|
||
this.healthCertificateImg = examineData.healthCertificateImg
|
||
this.othreOneImg = examineData.othreOneImg
|
||
this.othreTwoImg = examineData.othreTwoImg
|
||
this.othreThreeImg = examineData.othreThreeImg
|
||
}
|
||
this.$http("GET", url.common.privacyAgreement).then(res =>{
|
||
if (res.data && res.data.length > 0) {
|
||
res.data.forEach(v => {
|
||
if (v.keyCode === "platform_privacy_agreement_distribution"){
|
||
this.noticeId = v.keyValue
|
||
return
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
methods:{
|
||
commit(){
|
||
let _this = this
|
||
if (this.regForm()) return this.$msg(this.regForm())
|
||
this.loading = true
|
||
let num = 0
|
||
uni.showLoading({
|
||
mask: true
|
||
});
|
||
this.callbackList.forEach(v =>{
|
||
upload.getOssSignature(v.path, 11, 1).then(data=>{
|
||
upload.uploadImageOss(data, false).then(list=>{
|
||
num++
|
||
_this.infor[v.name] = JSON.stringify({
|
||
resourceTemporaryUUID: list[0].resourceTemporaryUUID,
|
||
ossWidth: v.ossWidth,
|
||
ossHeight: v.ossHeight,
|
||
size: v.size || ""
|
||
})
|
||
if (num === _this.callbackList.length) {
|
||
let path = this.isEdit ? url.distributor.updateApply : url.distributor.submitApply
|
||
_this.$http('POST', path, _this.infor).then(res =>{
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
content: '申请提交成功,请耐心等待。',
|
||
showCancel: false,
|
||
success: e => {
|
||
if (this.isEdit) {
|
||
_this.$navigateBack(2)
|
||
} else {
|
||
_this.$navigateBack()
|
||
}
|
||
}
|
||
});
|
||
}).catch(()=>{
|
||
_this.loading = false
|
||
})
|
||
}
|
||
})
|
||
})
|
||
})
|
||
},
|
||
regForm(){
|
||
if (!this.realHeadPortrait) {
|
||
return "请上传本人真实头像"
|
||
} else if (!this.infor.realName) {
|
||
return "请输入真实姓名"
|
||
} else if (!this.infor.idNumber) {
|
||
return "请输入身份证号"
|
||
} else if (!this.idNumberJustImg) {
|
||
return "请上传身份证正面照"
|
||
} else if (!this.idNumberBackImg) {
|
||
return "请上传身份证反面照"
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
// 头像
|
||
uploadAvatar(){
|
||
upload.showAvatarModal(this, 400, 400)
|
||
},
|
||
myUpload(rsp){
|
||
this.uplodingImg('realHeadPortrait', rsp.path)
|
||
},
|
||
// 上传图片
|
||
uplodingImg (name, path) {
|
||
let _this = this
|
||
this.callbackList.forEach((v, i)=>{
|
||
if (v.name === name) {
|
||
this.callbackList.splice(i, 1)
|
||
return false
|
||
}
|
||
})
|
||
if (path) {
|
||
this[name] = path
|
||
uni.getImageInfo({
|
||
src: path,
|
||
success: function (image) {
|
||
_this.callbackList.push({
|
||
name: name,
|
||
path: path,
|
||
ossWidth: image.width,
|
||
ossHeight: image.height
|
||
})
|
||
}
|
||
});
|
||
} else {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
let tempFilePath = res.tempFilePaths[0]
|
||
_this[name] = tempFilePath
|
||
uni.getImageInfo({
|
||
src: tempFilePath,
|
||
success: function (image) {
|
||
_this.callbackList.push({
|
||
name: name,
|
||
path: tempFilePath,
|
||
ossWidth: image.width,
|
||
ossHeight: image.height,
|
||
size: res.tempFiles[0].size
|
||
})
|
||
}
|
||
});
|
||
|
||
}
|
||
})
|
||
}
|
||
},
|
||
jumpTo(){
|
||
this.$navigateTo("/pages/notice/agreement?id="+this.noticeId)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main{
|
||
padding: 20rpx;
|
||
.cell{
|
||
padding: 0 30rpx;
|
||
height: 130rpx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
background-color: white;
|
||
.name{
|
||
color: #555;
|
||
font-size: 36rpx;
|
||
}
|
||
.img{
|
||
border-radius: 10rpx;
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
background-color: #928add;
|
||
overflow: hidden;
|
||
.icon{
|
||
font-size: 60rpx;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
border-radius: 10rpx;
|
||
background-color: white;
|
||
padding: 0 30rpx;
|
||
margin-bottom: 10rpx;
|
||
&-item{
|
||
display: flex;
|
||
align-items: center;
|
||
height: 120rpx;
|
||
border-bottom: 2rpx solid #f5f3f7;
|
||
color: #555;
|
||
font-size: 36rpx;
|
||
.input{
|
||
font-size: 36rpx;
|
||
}
|
||
.icon{
|
||
font-size: 44rpx;
|
||
}
|
||
}
|
||
}
|
||
.grid{
|
||
padding: 20rpx 30rpx;
|
||
font-size: 36rpx;
|
||
color: #555;
|
||
background-color: white;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
.box{
|
||
width: 350rpx;
|
||
height: 250rpx;
|
||
border: 2rpx solid #EEEEEE;
|
||
border-radius: 14rpx;
|
||
position: relative;
|
||
.img{
|
||
width: 187rpx;
|
||
height: 111rpx;
|
||
}
|
||
.image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.del{
|
||
position: absolute;
|
||
top: -20rpx;
|
||
right: -20rpx;
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
.fixed{
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
left: 0rpx;
|
||
right: 0rpx;
|
||
.btn{
|
||
width: 710rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |