clunt
/
dingdong-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实名认证页面完善

This commit is contained in:
donqi 2022-07-06 18:06:05 +08:00
parent d1f5645d6c
commit 387b826dc2
2 changed files with 296 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

335
pages/my/certification.vue
View File

@ -5,27 +5,150 @@
<block slot="backText">返回</block>
<block slot="content">实名认证</block>
</cu-custom>
<!-- 步骤条 -->
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item" :class="index>curStep?'':'text-main-color'" v-for="(stepName, index) in stepList">
<text class='cuIcon-radioboxfill'></text> {{stepName}}
</view>
</view>
</view>
<!-- 未认证的展示认证填写页面 -->
<view v-if="curUserInfo && curUserInfo.status === 1">
<view class="margin-lr-sm margin-tb-lg">
<view @click="bindAccount">
<view v-if="bindBankCard && bindBankCard.bankNum"
class="bg-gray flex justify-between align-center text-xl padding">
<view>
<text class="cu-tag bg-main-color light margin-right-sm">已绑定</text>
<text>{{bindBankCard.encodeBankNum}}</text>
</view>
<view>到帐帐号另绑<text class="cuIcon-right"></text></view>
</view>
<view v-else class="bg-gray flex justify-between align-center text-xl padding">
<view>到帐帐号绑定</view>
<view><text class="cuIcon-right"></text></view>
<form v-if="curStep === 0">
<view class="margin-bottom-with-bar">
<view class="bg-white margin-top-sm">
<view class="cu-bar padding-lr solid-bottom">
<view class="text-lg">
<text class="text-main-color"><text class="cuIcon-titles"></text></text>
<text>个人认证信息<text class="text-red">（必填）</text></text>
</view>
</view>
<view class="margin-bottom">
<view class="cu-bar bg-white solid-top">
<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 realNameInfo.idCardImgList" :key="index"
@tap="viewImage($event, realNameInfo.idCardImgList)" :data-url="item">
<image :src="item" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="delImg($event, realNameInfo.idCardImgList)" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="chooseImage($event, realNameInfo.idCardImgList)" v-if="realNameInfo.idCardImgList.length<2">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-form-group">
<view class="title">姓名</view>
<input name="name" v-model="realNameInfo.name" placeholder="请输入真实姓名"></input>
</view>
<view class="cu-form-group">
<view class="title">身份证号</view>
<input name="idCardNum" type="idcard" v-model="realNameInfo.idCardNum" placeholder="请输入你的身份证号"></input>
</view>
</view>
<view class="bg-white margin-top-sm padding-bottom-sm">
<view class="cu-bar padding-lr solid-bottom">
<view class="text-lg">
<text class="text-main-color"><text class="cuIcon-titles"></text></text>
<text>公司认证信息（选填）</text>
</view>
</view>
<radio-group class="flex justify-around padding-tb-sm">
<view class="padding-sm option-card" :class="realNameInfo.companySize === 0 ? 'border-main-color' : ''" @click="chooseCompanySize(0)">
<view class="text-black text-lg margin-tb-xs">社区服务</view>
<view class="text-gray option-content margin-tb-xs">个体或公司经营执照认证，服务团队1-3人</view>
<radio style="transform:scale(1)" class="main-color flex justify-end" :checked="realNameInfo.companySize === 0"></radio>
</view>
<view class="padding-sm option-card" :class="realNameInfo.companySize === 1 ? 'border-main-color' : ''" @click="chooseCompanySize(1)">
<view class="text-black text-lg margin-tb-xs">区域服务</view>
<view class="text-gray option-content margin-tb-xs">个体或公司经营执照认证，服务团队3-10人</view>
<radio style="transform:scale(1)" class="main-color flex justify-end" :checked="realNameInfo.companySize === 1"></radio>
</view>
<view class="padding-sm option-card" :class="realNameInfo.companySize === 2 ? 'border-main-color' : ''" @click="chooseCompanySize(2)">
<view class="text-black text-lg margin-tb-xs">城市服务</view>
<view class="text-gray option-content margin-tb-xs">个体或公司经营执照认证，服务团队10-50人</view>
<radio style="transform:scale(1)" class="main-color flex justify-end" :checked="realNameInfo.companySize === 2"></radio>
</view>
</radio-group>
<view class="cu-form-group">
<view class="title">品牌名称</view>
<input name="bandName" v-model="realNameInfo.bandName" maxlength="7" placeholder="请填写你的品牌/主体名简称(限7字)"></input>
</view>
<view class="cu-bar bg-white solid-top">
<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 realNameInfo.licenseImgList" :key="index"
@tap="viewImage($event, realNameInfo.licenseImgList)" :data-url="item">
<image :src="item" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="delImg($event, realNameInfo.licenseImgList)" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="chooseImage($event, realNameInfo.licenseImgList)" v-if="realNameInfo.licenseImgList.length<1">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-form-group">
<view class="title">公司名称</view>
<input name="companyName" v-model="realNameInfo.companyName" placeholder="请输入公司名称"></input>
</view>
<view class="cu-form-group">
<view class="title">执照号码</view>
<input name="businessLicenseNum" v-model="realNameInfo.businessLicenseNum" placeholder="请输入公司执照号码"></input>
</view>
<view class="cu-form-group">
<view class="title">公司地址</view>
<view class="flex-column-between flex-view">
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange" :value="multiIndex" :range-key="'areaName'" :range="areaList">
<view class="picker">
{{realNameInfo.companyArea && realNameInfo.companyArea.length ? realNameInfo.companyArea[0].areaName + '-' + realNameInfo.companyArea[1].areaName + '-' + realNameInfo.companyArea[2].areaName : '请选择'}}
</view>
</picker>
<!-- <view><input name="companyAddress" v-model="realNameInfo.companyAddress" placeholder="请输入营业执照地址/经营地址/服务网点"></input></view> -->
<textarea name="companyAddress" class="solid padding-sm" maxlength="-1" v-model="realNameInfo.companyAddress" placeholder="请输入营业执照地址/经营地址/服务网点" />
</view>
</view>
<view class="cu-form-group">
<view class="title">法人/负责人</view>
<input name="legalPersonName" v-model="realNameInfo.legalPersonName" placeholder="请输入法人名称"></input>
</view>
<view class="cu-form-group">
<view class="title">联系电话</view>
<input name="legalPersonPhoneNum" v-model="realNameInfo.legalPersonPhoneNum" placeholder="请输入联系人电话"></input>
</view>
<view class="cu-form-group">
<view class="title">其他服务</view>
<checkbox-group class="radio-view" @change="changeAdditionalServId">
<label class="margin-right-sm" v-for="(item, index) in additionalServ">
<checkbox style="transform:scale(0.7)" class="round main-color" :value="item.id"/>
<text class="margin-left-xs">{{item.name}}</text>
</label>
</checkbox-group>
</view>
</view>
</view>
<!-- 下一步 -->
<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
<button class="bg-main-color long-btn margin-lr" @click="nextStep">下一步</button>
</view>
</form>
<view v-else-if="curStep === 1" class="margin-top-sm">
<view class="margin-bottom-with-bar">
<view class="bg-white margin-top-sm" v-for="(item, index) in specialSkill">
<view class="cu-bar padding-lr solid-bottom">
<view class="text-lg">
<text class="cuIcon-titles"></text>
<text class="text-main-color"><text class="cuIcon-titles"></text></text>
<text>特殊技能{{index + 1}}(特殊工种如空调安装等请上传)</text>
</view>
<view @click="delSpecialSkill(index)">
@ -101,38 +224,16 @@
</button>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="margin-lr margin-bottom-lg">
<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交审核</button>
<!-- 下一步 -->
<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
<button class="bg-white long-btn margin-lr" @click="preStep">上一步</button>
<button class="bg-main-color long-btn margin-lr" @click="submit">提交</button>
</view>
</view>
</view>
<!-- 认证过的展示认证内容及结果 -->
<view v-else>
<view class="margin-lr-sm margin-top shadow-warp">
<view @click="bindAccount">
<view v-if="bindBankCard && bindBankCard.bankNum"
class="bg-gray flex justify-between align-center text-xl padding">
<view>
<text class="cu-tag bg-main-color light margin-right-sm">已绑定</text>
<text>{{bindBankCard.encodeBankNum}}</text>
</view>
<view>到帐帐号另绑<text class="cuIcon-right"></text></view>
</view>
<view v-else class="bg-gray flex justify-between align-center text-xl padding">
<view>到帐帐号绑定</view>
<view><text class="cuIcon-right"></text></view>
</view>
</view>
<view class="padding bg-white">
<view class="padding-bottom-sm">
<text class="text-black text-bold">姓名：</text>
<text>{{bindBankCard.name}}</text>
</view>
<view class="padding-bottom-sm">
<text class="text-black text-bold">身份证号：</text>
<text>{{bindBankCard.certId}}</text>
</view>
</view>
<view class="padding bg-white" v-if="servSpecialSkills && servSpecialSkills.length">
<view class="text-black text-bold">特殊技能：</view>
<view class="solid margin-top-sm padding-sm" v-for="(item,index) in servSpecialSkills">
@ -167,14 +268,35 @@
</template>
<script>
import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
export default {
components: {
myUniCombox
},
data() {
return {
curUserInfo: null,
bindBankCard: null,
curStep: 0,
stepList: ['经营主体', '特殊技能'],
additionalServ: [{
id: 1,
name: '货拉拉/速运'
}, {
id: 2,
name: '提供搬货'
}, {
id: 3,
name: '本地跑腿'
}],
areaList: [],
multiIndex: [0, 0, 0],
realNameInfo: {
companySize: null,
idCardImgList: [],
licenseImgList: []
},
specialTypeList: [],
specialSkill: [{
specialSubTypeList: [],
specialSubSubTypeList: [],
@ -187,21 +309,19 @@
insurCert: [],
insurStartDate: '',
insurEndDate: ''
}],
specialTypeList: []
}]
}
},
onLoad() {
this.loadData();
},
onShow() {
this.loadBindBankCard();
},
methods: {
async loadData() {
this.curUserInfo = this.$request.getCurUserInfo();
this.loadBindBankCard();
if (this.curUserInfo.status === 1) {
this.loadAreaList();
this.loadSpecialSkillType();
} else {
this.loadSpecialSkills();
@ -209,26 +329,78 @@
},
async reloadData() {
this.curUserInfo = this.$request.getCurUserInfo();
this.loadBindBankCard();
if (this.curUserInfo.status === 1) {
this.loadAreaList();
this.loadSpecialSkillType();
} else {
this.loadSpecialSkills();
}
},
async loadBindBankCard() {
let res = await this.$request.getBindBankCardByWorkerId({
workerId: this.curUserInfo.workerId
});
this.bindBankCard = res.data;
this.bindBankCard.encodeBankNum = '****' + this.bindBankCard.bankNum.substring(this.bindBankCard
.bankNum.length - 4);
preStep() {
this.curStep = this.curStep === 0 ? 0 : --this.curStep;
},
bindAccount() {
uni.navigateTo({
url: '/pages/my/bank-account-bind'
})
nextStep() {
this.curStep = this.curStep === this.stepList.length - 1 ? this.curStep : ++this.curStep;
},
/* 经营主体 start */
chooseCompanySize(sizeType) {
if (sizeType === this.realNameInfo.companySize) {
// 重复点击同一个选项则清除选中状态
this.realNameInfo.companySize = null;
} else {
this.realNameInfo.companySize = sizeType;
}
},
changeAdditionalServId(e) {
this.realNameInfo.otherServ = e.detail.value;
},
async loadAreaList(idArr) {
let areaList = await this.$request.areaListByStep();
areaList = areaList.data;
let col1Code = idArr ? idArr[0] : areaList[0].areaCode;
let subAreaList = await this.$request.areaListByStep({ parentCode: col1Code });
subAreaList = subAreaList.data;
let col2Code = idArr ? idArr[1] : subAreaList[0].areaCode;
let subSubAreaList = await this.$request.areaListByStep({ parentCode: col2Code });
subSubAreaList = subSubAreaList.data;
this.areaList.push(areaList);
this.areaList.push(subAreaList);
this.areaList.push(subSubAreaList);
},
regionChange(e) {
this.multiIndex = e.detail.value;
let chosenArea = [];
for(let i = 0; i < this.areaList.length; i++) {
chosenArea.push(this.areaList[i][this.multiIndex[i]]);
}
this.realNameInfo.companyArea = chosenArea;
},
async regionColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
let subSubAreaList = [];
// 通过一级查询二级，通过二级查三级
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[0][colObj.value].areaCode});
subAreaList = subAreaList.data;
if (subAreaList && subAreaList.length) {
subSubAreaList = await this.$request.areaListByStep({parentCode: subAreaList[0].areaCode});
subSubAreaList = subSubAreaList.data;
}
this.areaList.pop();
this.areaList.pop();
this.areaList.push(subAreaList);
this.areaList.push(subSubAreaList);
this.multiIndex = [colObj.value, 0, 0];
} else if (colObj.column == 1) {
// 通过二级查三级
let subSubAreaList = await this.$request.areaListByStep({parentCode: this.areaList[1][colObj.value].areaCode});
subSubAreaList = subSubAreaList.data;
this.areaList.pop();
this.areaList.push(subSubAreaList);
this.multiIndex = [this.multiIndex[0], colObj.value, 0];
}
},
/* 经营主体 end */
/* 特殊技能 start */
async loadSpecialSkills() {
let res = await this.$request.getWorkerSpecialSkill({
@ -328,17 +500,19 @@
},
/* 特殊技能 end */
submit() {
if (!this.bindBankCard || !this.bindBankCard.certId) {
if (!this.realNameInfo.name || !this.realNameInfo.idCardNum || !this.realNameInfo.idCardImgList || !this.realNameInfo.idCardImgList.length) {
uni.showToast({
icon: 'none',
title: '请先完成银行账户绑定，否则接单收益将无法正常到帐'
title: '请完成必填项的填写',
icon: 'none'
})
return;
}
let workerId = this.curUserInfo.workerId;
let specialSkills = [];
// 特殊技能参数
this.specialSkill.forEach((item) => {
if (item.specialSkillObj && item.specialSkillObj.specialSkillId) {
specialSkills.push({
workerId: workerId,
specialSkillId: item.specialSkillObj.specialSkillId,
@ -347,9 +521,17 @@
insuranceStart: item.insurStartDate,
insuranceEnd: item.insurEndDate
});
}
});
// 加上经营主体参数
let params = {
...this.realNameInfo,
idCardUrl1: this.realNameInfo.idCardImgList && this.realNameInfo.idCardImgList.length > 0 ? this.realNameInfo.idCardImgList[0]: null,
idCardUrl2: this.realNameInfo.idCardImgList && this.realNameInfo.idCardImgList.length > 1 ? this.realNameInfo.idCardImgList[1]: null,
businessLicenseUrl: this.realNameInfo.licenseImgList && this.realNameInfo.licenseImgList.length > 0 ? this.realNameInfo.licenseImgList[0] : null,
companyProvinceId: this.realNameInfo.companyArea && this.realNameInfo.companyArea.length > 2 ? this.realNameInfo.companyArea[0].areaId : null,
companyCityId: this.realNameInfo.companyArea && this.realNameInfo.companyArea.length > 2 ? this.realNameInfo.companyArea[1].areaId : null,
companyCountryId: this.realNameInfo.companyArea && this.realNameInfo.companyArea.length > 2 ? this.realNameInfo.companyArea[2].areaId : null,
workerId: workerId,
specialSkills: specialSkills
}
@ -386,4 +568,27 @@
/deep/ .uni-date__x-input {
height: 36px;
}
.cu-form-group .title {
flex-basis: unset;
}
.cu-form-group .flex-view {
flex-basis: 78%;
height: 250rpx;
}
.cu-form-group .radio-view {
flex-basis: 78%;
}
.option-card {
border-radius: 50rpx;
width: 30%;
border: 1rpx solid rgba(0, 0, 0, 0.1);
}
.option-content {
min-height: 155rpx;
}
</style>

4
style/blue/blue-topic.css
View File

@ -56,3 +56,7 @@ radio.main-color.checked .uni-radio-input {
color: #0081ff;
background-color: #ffffff;
}
.border-main-color {
border-color: #0081ff !important;
}