实名认证页面完善

pages/my/certification.vue

@@ -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">
+			<form v-if="curStep === 0">
-				<view @click="bindAccount">
+				<view class="margin-bottom-with-bar">
-					<view v-if="bindBankCard && bindBankCard.bankNum"
+					<view class="bg-white margin-top-sm">
-						class="bg-gray flex justify-between align-center text-xl padding">
+						<view class="cu-bar padding-lr solid-bottom">
-						<view>
+							<view class="text-lg">
-							<text class="cu-tag bg-main-color light margin-right-sm">已绑定</text>
+								<text class="text-main-color"><text class="cuIcon-titles"></text></text>
-							<text>{{bindBankCard.encodeBankNum}}</text>
+								<text>个人认证信息<text class="text-red">（必填）</text></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="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="cu-bar tabbar border shop fixed-bottom-bar bg-back">
-			<view class="margin-lr margin-bottom-lg">
+					<button class="bg-white long-btn margin-lr" @click="preStep">上一步</button>
-				<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交审核</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() {
+			preStep() {
-				let res = await this.$request.getBindBankCardByWorkerId({
+				this.curStep = this.curStep === 0 ? 0 : --this.curStep;
-					workerId: this.curUserInfo.workerId
-				});
-				this.bindBankCard = res.data;
-				this.bindBankCard.encodeBankNum = '****' + this.bindBankCard.bankNum.substring(this.bindBankCard
-					.bankNum.length - 4);
 			},
-			bindAccount() {
+			nextStep() {
-				uni.navigateTo({
+				this.curStep = this.curStep === this.stepList.length - 1 ? this.curStep : ++this.curStep;
-					url: '/pages/my/bank-account-bind'
-				})
 			},
+			/* 经营主体 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>

style/blue/blue-topic.css

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