285 lines
9.0 KiB
Vue
285 lines
9.0 KiB
Vue
<template>
|
||
<view class="margin-bottom-lg">
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">实名认证</block>
|
||
</cu-custom>
|
||
<!-- 表单 -->
|
||
<view class="margin-lr-sm margin-top-sm">
|
||
<form @submit="submit">
|
||
<view class="cu-form-group">
|
||
<view class="title">姓名</view>
|
||
<input name="name" placeholder="请输入姓名"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">身份证号</view>
|
||
<input name="idCard" placeholder="请输入身份证号码"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">联系电话</view>
|
||
<input name="phone" placeholder="请输入联系人电话"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">公司名称</view>
|
||
<input name="companyName" placeholder="请输入公司名称"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">执照地址</view>
|
||
<input name="licenseAddress" placeholder="请输入执照地址"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">执照号码</view>
|
||
<input name="licenseIdNum" placeholder="请输入执照号码"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">运营意向</view>
|
||
<view class="flex-sub">
|
||
<picker mode="region" @change="regionChange" name="area" :value="formData.area">
|
||
<view class="picker">
|
||
{{formData.area[0]}}，{{formData.area[1]}}，{{formData.area[2]}}
|
||
</view>
|
||
</picker>
|
||
<radio-group @change="changeOperaLevel" class="margin-bottom-sm">
|
||
<label class="radio">
|
||
<radio style="transform:scale(0.7)" class="main-color" value="community"
|
||
:checked="formData.operaLevel=='community'" />
|
||
<text class="margin-left-xs">社区运营</text>
|
||
</label>
|
||
<label class="radio">
|
||
<radio style="transform:scale(0.7)" class="main-color" value="cityArea"
|
||
:checked="formData.operaLevel=='cityArea'" />
|
||
<text class="margin-left-xs">县区运营</text>
|
||
</label>
|
||
<label class="radio">
|
||
<radio style="transform:scale(0.7)" class="main-color" value="city"
|
||
:checked="formData.operaLevel=='city'" />
|
||
<text class="margin-left-xs">城市运营</text>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">质保金</view>
|
||
<view class="flex flex-sub justify-start">
|
||
<view>{{formData.deposit}}元</view>
|
||
<radio-group @change="changeDepositPayNow" class="margin-left">
|
||
<label class="radio">
|
||
<radio style="transform:scale(0.7)" class="main-color" value=1
|
||
:checked="payNow==1" />
|
||
<text class="margin-left-xs">立即缴纳</text>
|
||
</label>
|
||
<label class="radio">
|
||
<radio style="transform:scale(0.7)" class="main-color" value=0
|
||
:checked="payNow==0" />
|
||
<text class="margin-left-xs">以后缴纳</text>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="cu-bar bg-white margin-top-sm">
|
||
<view class="action">
|
||
身份证上传（正反面）
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="grid col-4 grid-square flex-sub">
|
||
<view class="bg-img" v-for="(item,index) in formData.idCardImgList" :key="index" @tap="viewImage($event, formData.idCardImgList)"
|
||
:data-url="item">
|
||
<image :src="item" mode="aspectFill"></image>
|
||
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.idCardImgList)" :data-index="index">
|
||
<text class='cuIcon-close'></text>
|
||
</view>
|
||
</view>
|
||
<view class="solids" @tap="chooseIdCardImage" v-if="formData.idCardImgList.length<4">
|
||
<text class='cuIcon-cameraadd'></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cu-bar bg-white margin-top-sm">
|
||
<view class="action">
|
||
公司营业执照、公司账户
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="grid col-4 grid-square flex-sub">
|
||
<view class="bg-img" v-for="(item,index) in formData.licenseImgList" :key="index" @tap="viewImage($event, formData.licenseImgList)"
|
||
:data-url="item">
|
||
<image :src="item" mode="aspectFill"></image>
|
||
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.licenseImgList)" :data-index="index">
|
||
<text class='cuIcon-close'></text>
|
||
</view>
|
||
</view>
|
||
<view class="solids" @tap="chooseLicenseImage" v-if="formData.licenseImgList.length<4">
|
||
<text class='cuIcon-cameraadd'></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="margin-lr-sm margin-top">
|
||
<button class="bg-main-color long-btn" form-type="submit">提交</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
formData: {}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
this.formData = await this.$api.data('certificationInfo');
|
||
},
|
||
regionChange(e) {
|
||
this.formData.area = e.detail.value;
|
||
},
|
||
changeOperaLevel(e) {
|
||
this.formData.operaLevel = e.detail.value;
|
||
},
|
||
changeDepositPayNow(e) {
|
||
this.formData.payNow = e.detail.value;
|
||
},
|
||
viewImage(e, imgList) {
|
||
uni.previewImage({
|
||
urls: imgList,
|
||
current: e.currentTarget.dataset.url
|
||
});
|
||
},
|
||
delImg(e, imgList) {
|
||
uni.showModal({
|
||
title: '',
|
||
content: '确定要删除这张图片吗？',
|
||
cancelText: '取消',
|
||
confirmText: '确定',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
imgList.splice(e.currentTarget.dataset.index, 1)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
chooseLicenseImage(e) {
|
||
uni.chooseImage({
|
||
count: 4, //默认9
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album'], //从相册选择
|
||
success: (res) => {
|
||
if (this.formData.licenseImgList.length != 0) {
|
||
this.formData.licenseImgList = this.formData.licenseImgList.concat(res.tempFilePaths)
|
||
} else {
|
||
this.formData.licenseImgList = res.tempFilePaths
|
||
}
|
||
}
|
||
});
|
||
},
|
||
chooseIdCardImage(e) {
|
||
uni.chooseImage({
|
||
count: 4, //默认9
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album'], //从相册选择
|
||
success: (res) => {
|
||
if (this.formData.idCardImgList.length != 0) {
|
||
this.formData.idCardImgList = this.formData.idCardImgList.concat(res.tempFilePaths)
|
||
} else {
|
||
this.formData.idCardImgList = res.tempFilePaths
|
||
}
|
||
}
|
||
});
|
||
},
|
||
validateForm(confirmFormData) {
|
||
let formInfoValid = Boolean(confirmFormData.name) &&
|
||
Boolean(confirmFormData.idCard) &&
|
||
Boolean(confirmFormData.phone) &&
|
||
Boolean(confirmFormData.companyName) &&
|
||
Boolean(confirmFormData.licenseAddress) &&
|
||
Boolean(confirmFormData.licenseIdNum) &&
|
||
Boolean(confirmFormData.operaLevel) &&
|
||
Boolean(confirmFormData.payNow);
|
||
if (!formInfoValid) {
|
||
uni.showToast({
|
||
title: '请填写完整信息',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
formInfoValid = false;
|
||
} else if (!this.$validate.validIdCard(confirmFormData.idCard)) {
|
||
uni.showToast({
|
||
title: '身份证号格式错误',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
formInfoValid = false;
|
||
} else if (!this.$validate.validContactNum(confirmFormData.phone)) {
|
||
uni.showToast({
|
||
title: '联系方式格式错误',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
formInfoValid = false;
|
||
} else if (!this.$validate.validLicenseIdNum(confirmFormData.licenseIdNum)) {
|
||
uni.showToast({
|
||
title: '执照号码格式错误',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
formInfoValid = false;
|
||
} else if (confirmFormData.idCardImgList.length === 0) {
|
||
uni.showToast({
|
||
title: '请上传身份证正反面',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
formInfoValid = false;
|
||
} else if (confirmFormData.licenseImgList.length === 0) {
|
||
uni.showToast({
|
||
title: '请上传公司营业执照',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
formInfoValid = false;
|
||
}
|
||
return formInfoValid;
|
||
},
|
||
uploadImg(imgList) {
|
||
uni.uploadFile({
|
||
|
||
})
|
||
return new Promise(resolve => {
|
||
resolve();
|
||
})
|
||
},
|
||
async submit(e) {
|
||
let formData = e.detail.value;
|
||
formData.operaLevel = this.formData.operaLevel;
|
||
formData.area = this.formData.area;
|
||
formData.payNow = this.formData.payNow;
|
||
formData.idCardImgList = this.formData.idCardImgList;
|
||
formData.licenseImgList = this.formData.licenseImgList;
|
||
let formValid = this.validateForm(formData);
|
||
console.log(formData);
|
||
if (formValid) {
|
||
let picUploadResult = await this.uploadImg(formData.idCardImgList.concat(formData.licenseImgList));
|
||
if (picUploadResult) {
|
||
}
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success',
|
||
mask: true
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|