dingdong-master/pages/my/certification.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">实名认证</block>
		</cu-custom>
		<!-- 未认证的展示认证填写页面 -->
		<view v-if="!curCertifyInfo || !curCertifyInfo.workerCertificationId">
			<!-- 步骤条 -->
			<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>
			<form v-if="curStep === 0">
				<view class="margin-bottom-with-bar margin-top-sm bg-white">
					<!-- <view class="bg-white margin-top-sm text-red padding">
						因涉及上门家政服务，需完成实名认证填写，并通过审核，以保证用户安全
					</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="brandName" v-model="realNameInfo.brandName" 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.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, 2)"
								v-if="realNameInfo.idCardImgList.length<2">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="flex solid-top solid-bottom">
						<view class="flex-sub form-opt">
							<view class="title">姓氏</view>
							<input name="surname" v-model="realNameInfo.surname" placeholder="请输入姓氏"></input>
						</view>
						<view class="flex-sub form-opt">
							<view class="title">名字</view>
							<input name="name" v-model="realNameInfo.name" placeholder="请输入名字"></input>
						</view>
					</view>
					<view class="cu-form-group">
						<view class="title">身份证号</view>
						<input name="idCardNum" type="idcard" v-model="realNameInfo.idCardNum"
							placeholder="请输入你的身份证号"></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, 4)"
								v-if="realNameInfo.licenseImgList.length<4">
								<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="legalPersionName" v-model="realNameInfo.legalPersionName"
							placeholder="请填姓名"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">法人/负责人联系电话</view>
						<input name="legalPersionPhoneNum" v-model="realNameInfo.legalPersionPhoneNum"
							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"
									:checked="checkIfInArray(item.id, realNameInfo.otherServ)" />
								<text class="margin-left-xs">{{item.name}}</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<!-- 下一步 -->
				<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
					<button class="margin-lr cu-btn bg-main-color shadow-blur long-btn" @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="text-main-color"><text class="cuIcon-titles"></text></text>
								<text>特殊技能{{index + 1}}(特殊工种如空调安装等请上传)</text>
							</view>
							<view @click="delSpecialSkill(index)">
								<text class="text-main-color">删除</text>
							</view>
						</view>
						<view class="padding">
							<view>
								<text>特殊技能：</text>
								<view>
									<view class="flex align-center margin-bottom-xs">
										<my-uni-combox class="flex-sub margin-right-xs" :candidates="specialTypeList"
											:showField="'goodsCategoryName'" placeholder="请选择"
											v-model="specialSkill[index].specialTypeObj"
											@input="chooseSpecialSkill($event, 0, index)">
										</my-uni-combox>
										<my-uni-combox class="flex-sub margin-right-xs"
											:candidates="specialSkill[index].specialSubTypeList"
											:showField="'goodsCategoryName'" placeholder="请选择"
											v-model="specialSkill[index].specialSubTypeObj"
											@input="chooseSpecialSkill($event, 1, index)" @tap="reloadTargetCategory(1, index)"></my-uni-combox>
										<!-- <my-uni-combox class="flex-sub"
											:candidates="specialSkill[index].specialSubSubTypeList"
											:showField="'goodsCategoryName'" placeholder="请选择"
											v-model="specialSkill[index].specialSubSubTypeObj"
											@input="chooseSpecialSkill($event, 2, index)"></my-uni-combox> -->
										<my-uni-combox class="flex-sub" :candidates="specialSkill[index].specialSkillList"
											:showField="'goodsCategoryName'" placeholder="请选择"
											v-model="specialSkill[index].specialSkillObj"
											@input="chooseSpecialSkill($event, 3, index)" @tap="reloadTargetCategory(2, index)"></my-uni-combox>
									</view>
								</view>
							</view>
							<view class="flex justify-start align-center margin-top-sm" v-if="specialSkill[index].specialSkillObj.isCert == 1">
								<view>技能证书：</view>
								<view class="grid col-1 upload-pic-grid grid-square flex-sub">
									<view class="bg-img" v-for="(url, index0) in specialSkill[index].skillCert"
										:key="index0" @tap="viewImage($event, specialSkill[index].skillCert)"
										:data-url="url">
										<image :src="url" mode="aspectFill"></image>
										<view class="cu-tag bg-red"
											@tap.stop="delImg($event, specialSkill[index].skillCert)"
											:data-index="index0">
											<text class='cuIcon-close'></text>
										</view>
									</view>
									<view class="solids" @tap="chooseImage($event, specialSkill[index].skillCert, 4)"
										v-if="specialSkill[index].skillCert.length < 4">
										<text class='cuIcon-cameraadd'></text>
									</view>
								</view>
							</view>
							<view class="flex justify-start align-center margin-top-sm" v-if="specialSkill[index].specialSkillObj.isSure == 1">
								<view>保险证明：</view>
								<view class="grid col-1 upload-pic-grid grid-square flex-sub">
									<view class="bg-img" v-for="(url, index0) in specialSkill[index].insurCert"
										:key="index0" @tap="viewImage($event, specialSkill[index].insurCert)"
										:data-url="url">
										<image :src="url" mode="aspectFill"></image>
										<view class="cu-tag bg-red"
											@tap.stop="delImg($event, specialSkill[index].insurCert)"
											:data-index="index0">
											<text class='cuIcon-close'></text>
										</view>
									</view>
									<view class="solids" @tap="chooseImage($event, specialSkill[index].insurCert)"
										v-if="specialSkill[index].insurCert.length < 1">
										<text class='cuIcon-cameraadd'></text>
									</view>
								</view>
							</view>
							<view class="flex justify-start align-center" v-if="specialSkill[index].specialSkillObj.isSure == 1">
								<view>保险日期：</view>
								<uni-datetime-picker style="width: 75%;"
									:value="[specialSkill[index].insurStartDate, specialSkill[index].insurEndDate]"
									type="datetimerange" rangeSeparator="~" @change="changeInsurDate($event, index)" />
							</view>
						</view>
					</view>
					<view class="text-center margin-top">
						<button class="cu-btn bg-main-color light" @click="addSpecialSkill">
							<text class="margin-right-xs"><text class="cuIcon-add"></text></text>
							<text>继续添加特殊技能</text>
						</button>
					</view>
				</view>
				<view class="bottom-site-bar"></view>
				<!-- 下一步 -->
				<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
					<button class="margin-lr-sm cu-btn bg-white shadow-blur long-btn" @click="preStep">上一步</button>
					<button class="margin-lr-sm cu-btn bg-main-color shadow-blur long-btn" @click="submit">提交</button>
				</view>
			</view>
		</view>
		<!-- 认证过的展示认证内容及结果 -->
		<view v-else>
			<!-- <view class="bg-white margin-top-sm text-red padding">
				因涉及上门家政服务，需完成实名认证填写，并通过审核，以保证用户安全
			</view> -->
			<view class="margin-lr-sm margin-top padding margin-bottom-lg bg-white">
				<view class="padding-bottom-sm">
					<text class="text-black text-bold">姓名：</text>
					<text>{{curCertifyInfo.surname + curCertifyInfo.name}}</text>
				</view>
				<view class="padding-bottom-sm">
					<text class="text-black text-bold">身份证号：</text>
					<text>{{curCertifyInfo.idCardNum}}</text>
				</view>
				<view class="text-black text-bold">身份证：</view>
				<view class="grid col-2 grid-square flex-sub padding-bottom-sm padding-top-xs">
					<view class="bg-img">
						<image :src="curCertifyInfo.idCardUrl1" :data-url="curCertifyInfo.idCardUrl1"
							@click="viewImage($event, [curCertifyInfo.idCardUrl1])" mode="aspectFill"></image>
					</view>
					<view class="bg-img" @click="viewImage($event, [item.credential])">
						<image :src="curCertifyInfo.idCardUrl2" :data-url="curCertifyInfo.idCardUrl2"
							@click="viewImage($event, [curCertifyInfo.idCardUrl2])" mode="aspectFill"></image>
					</view>
				</view>
				<view class="text-black text-bold">公司规模：</view>
				<radio-group class="flex justify-around padding-top-xs padding-bottom-sm">
					<view class="padding-sm option-card"
						:class="curCertifyInfo.companySize === 0 ? 'border-main-color' : ''">
						<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="curCertifyInfo.companySize === 0" disabled></radio>
					</view>
					<view class="padding-sm option-card"
						:class="curCertifyInfo.companySize === 1 ? 'border-main-color' : ''">
						<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="curCertifyInfo.companySize === 1" disabled></radio>
					</view>
					<view class="padding-sm option-card"
						:class="curCertifyInfo.companySize === 2 ? 'border-main-color' : ''">
						<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="curCertifyInfo.companySize === 2" disabled></radio>
					</view>
				</radio-group>
				<view class="padding-bottom-sm">
					<text class="text-black text-bold">品牌名称：</text>
					<text v-if="curCertifyInfo.brandName">{{curCertifyInfo.brandName}}</text>
				</view>
				<view class="padding-bottom-sm">
					<text class="text-black text-bold">公司名称：</text>
					<text v-if="curCertifyInfo.companyName">{{curCertifyInfo.companyName}}</text>
				</view>
				<view class="text-black text-bold">公司营业执照：</view>
				<view class="grid col-2 grid-square flex-sub padding-bottom-sm padding-top-xs"
					v-if="curCertifyInfo.businessLicenseUrl">
					<view class="bg-img">
						<image :src="curCertifyInfo.businessLicenseUrl" :data-url="curCertifyInfo.businessLicenseUrl"
							@click="viewImage($event, [curCertifyInfo.businessLicenseUrl])" mode="aspectFill"></image>
					</view>
				</view>
				<view class="padding-bottom-sm">
					<text class="text-black text-bold">公司营业执照号码：</text>
					<text v-if="curCertifyInfo.businessLicenseNum">{{curCertifyInfo.businessLicenseNum}}</text>
				</view>
				<view class="padding-bottom-sm">
					<text class="text-black text-bold">公司地址：</text>
					<view v-if="curCertifyInfo.mergerName">{{curCertifyInfo.mergerName}}</view>
					<view v-if="curCertifyInfo.companyAddress">{{curCertifyInfo.companyAddress}}</view>
				</view>
				<view class="padding-bottom-sm">
					<text class="text-black text-bold">法人：</text>
					<text v-if="curCertifyInfo.legalPersionName">{{curCertifyInfo.legalPersionName}}</text>
				</view>
				<view class="padding-bottom-sm">
					<text class="text-black text-bold">法人联系电话：</text>
					<text v-if="curCertifyInfo.legalPersionPhoneNum">{{curCertifyInfo.legalPersionPhoneNum}}</text>
				</view>
				<view class="text-black text-bold">其他服务</view>
				<checkbox-group class="padding-bottom-sm padding-top-xs">
					<label class="margin-right-sm" v-for="(item, index) in additionalServ">
						<checkbox disabled style="transform:scale(0.7)" class="round main-color"
							:checked="checkIfInArray(item.id, curCertifyInfo.otherServArr)" :value="item.id" />
						<text class="margin-left-xs">{{item.name}}</text>
					</label>
				</checkbox-group>
				<view v-if="servSpecialSkills && servSpecialSkills.length > 0">
					<view class="text-black text-bold">特殊技能：</view>
					<view class="solid margin-top-sm padding-sm" v-for="(item,index) in servSpecialSkills">
						<view class="margin-bottom-xs">类目：{{item.specialSkillName}}</view>
						<view class="margin-bottom-xs">是否危险技能：{{item.dangerous === 0 ? '否' : '是'}}</view>
						<view class="margin-bottom-xs">
							<view class="margin-bottom-xs">技能证书：</view>
							<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit"
								:src="item.credential" :data-url="item.credential"
								@click="viewImage($event, [item.credential])"></image>
						</view>
						<view v-if="item.insurance" class="margin-bottom-xs">
							<view class="margin-bottom-xs">保险证明：</view>
							<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit"
								:src="item.insurance" :data-url="item.insurance"
								@click="viewImage($event, [item.insurance])"></image>
						</view>
						<view>保险生效时期：{{item.insuranceStart}} ~ {{item.insuranceEnd}}</view>
					</view>
				</view>
				<view class="margin-top-sm">
					<text class="text-black text-bold">审核状态：</text>
					<text v-if="curCertifyInfo.status === 1" class="text-green">审核通过</text>
					<text v-else-if="curCertifyInfo.status === 0" class="text-yellow">审核中</text>
					<text v-else-if="curCertifyInfo.status === 2" class="text-red">审核未通过</text>
					<button class="cu-btn bg-main-color margin-left-sm shadow-blur"
						v-if="curCertifyInfo.status === 2 || curCertifyInfo.status === 1"
						@click="showForm">重新填写实名信息</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';

	export default {
		components: {
			myUniCombox
		},
		data() {
			return {
				curUserInfo: null,
				hasJoinedTeam: false,
				curCertifyInfo: null,
				servSpecialSkills: null,
				curStep: 0,
				stepList: ['经营主体', '特殊技能'],
				additionalServ: [{
					id: '0',
					name: '货拉拉/速运'
				}, {
					id: '1',
					name: '提供搬货'
				}, {
					id: '2',
					name: '本地跑腿'
				}],
				areaList: [],
				multiIndex: [0, 0, 0],
				realNameInfo: {
					companySize: null,
					idCardImgList: [],
					licenseImgList: [],
					otherServ: []
				},
				specialTypeList: [],
				specialSkill: [{
					specialSubTypeList: [],
					specialSubSubTypeList: [],
					specialTypeObj: {},
					specialSubTypeObj: {},
					specialSubSubTypeObj: {},
					specialSkillList: [],
					specialSkillObj: {},
					skillCert: [],
					insurCert: [],
					insurStartDate: '',
					insurEndDate: ''
				}]
			}
		},
		onLoad() {
			this.loadData();
		},
		onShow() {},
		methods: {
			async loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.checkedHasJoinedTeam();
				let res = await this.$request.getWorkerCertify();
				this.curCertifyInfo = res.data;
				if (this.curCertifyInfo && this.curCertifyInfo.workerCertificationId) {
					// 存在认证记录
					let servSpecialSkills = [];
					this.curCertifyInfo.specialSkills.forEach(item => {
						servSpecialSkills.push({
							...item,
							specialSkillName: item.threeDeptGoodsCategory.goodsCategoryName
						})
					})
					this.servSpecialSkills = servSpecialSkills;
					this.curCertifyInfo.otherServArr = this.curCertifyInfo.otherServ.split(",");
				} else {
					this.loadAreaList();
					this.loadSpecialSkillType();
				}
			},
			async checkedHasJoinedTeam() {
				let params = {
					hasRegistered: true
				}
				let res = await this.$request.getTeamPage(params);
				this.hasJoinedTeam = res.rows.length > 0 ? true : false;
			},
			async showForm() {
				this.loadAreaList();
				this.loadSpecialSkillType();
				if (this.curCertifyInfo) {
					let idCardImgList = [];
					if (this.curCertifyInfo.idCardUrl1) {
						idCardImgList.push(this.curCertifyInfo.idCardUrl1);
					}
					if (this.curCertifyInfo.idCardUrl2) {
						idCardImgList.push(this.curCertifyInfo.idCardUrl2);
					}
					// 查地址
					let companyArea = [];
					let areaList = await this.$request.areaListByStep({
						areaId: this.curCertifyInfo.companyProvinceId
					});
					areaList = areaList.data;
					let subAreaList = await this.$request.areaListByStep({
						parentCode: this.curCertifyInfo.companyProvinceId,
						areaId: this.curCertifyInfo.companyCityId
					});
					subAreaList = subAreaList.data;
					let subSubAreaList = await this.$request.areaListByStep({
						parentCode: this.curCertifyInfo.companyCityId,
						areaId: this.curCertifyInfo.companyCountryId
					});
					subSubAreaList = subSubAreaList.data;
					companyArea.push(areaList[0]);
					companyArea.push(subAreaList[0]);
					companyArea.push(subSubAreaList[0]);
					// 特殊技能
					let specialSkill = [];
					this.curCertifyInfo.specialSkills.forEach(item => {
						specialSkill.push({
							specialTypeObj: item.firstDeptGoodsCategory,
							specialTypeList: item.specialTypeList,
							specialSubTypeObj: item.twoDeptGoodsCategory,
							specialSubTypeList: [],
							specialSkillList: [],
							specialSkillObj: item.threeDeptGoodsCategory,
							skillCert: [item.credential],
							insurCert: [item.insurance],
							insurStartDate: item.insuranceStart,
							insurEndDate: item.insuranceEnd
						})
					});
					this.specialSkill = specialSkill;
					
					this.realNameInfo = {
						...this.curCertifyInfo,
						idCardImgList: idCardImgList,
						licenseImgList: this.curCertifyInfo.businessLicenseUrl ? [this.curCertifyInfo.businessLicenseUrl] : [],
						companyArea: companyArea,
						otherServ: this.curCertifyInfo.otherServ && this.curCertifyInfo.otherServ.length ? this.curCertifyInfo.otherServ.split(",") : []
					}
					
					this.curCertifyInfo = null;
				}
			},
			preStep() {
				this.curStep = this.curStep === 0 ? 0 : --this.curStep;
			},
			nextStep() {
				if (this.curStep === 0 && !this.validData()) {
					return;
				}
				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];
				}
			},
			checkIfInArray(item, targetArr) {
				if (targetArr.indexOf(item) !== -1) {
					return true;
				}
				return false;
			},
			/* 经营主体 end */
			/* 特殊技能 start */
			// async loadSpecialSkills() {
			// 	let res = await this.$request.getWorkerSpecialSkill({
			// 		workerId: this.curUserInfo.workerId
			// 	});
			// 	this.servSpecialSkills = res.data;
			// },
			async loadSpecialSkillType() {
				let res = await this.$request.listByStep({
					type: 1
				});
				res = res.data;
				let typeList = await this.$request.listByStep({
					type: 1,
					goodsCategoryId: res[0].goodsCategoryId
				});
				this.specialTypeList = typeList.data;
			},
			async reloadTargetCategory(colIndex, specialSkillIndex) {
				switch(colIndex) {
					case 1: {
						if (this.specialSkill[specialSkillIndex].specialTypeObj 
						&& (!this.specialSkill[specialSkillIndex].specialSubTypeList
							|| this.specialSkill[specialSkillIndex].specialSubTypeList.length === 0)) {
							let res = await this.$request.listByStep({
								goodsCategoryId: this.specialSkill[specialSkillIndex].specialTypeObj.goodsCategoryId,
								type: 1
							});
							this.specialSkill[specialSkillIndex].specialSubTypeList = res.data;
						}
					} break;
					case 2: {
						if (this.specialSkill[specialSkillIndex].specialSubTypeObj
						&& (!this.specialSkill[specialSkillIndex].specialSkillList 
							|| this.specialSkill[specialSkillIndex].specialSkillList.length === 0)) {
								let res = await this.$request.listByStep({
									goodsCategoryId: this.specialSkill[specialSkillIndex].specialSubTypeObj.goodsCategoryId,
									type: 1
								});
								this.specialSkill[specialSkillIndex].specialSkillList = res.data;
						}
					} break;
					default: break;
				}
			},
			async chooseSpecialSkill(e, type, index) {
				let funName = "listByStep";
				// if (type === 1) {
				// 	funName = "qrySpecialSkillList";
				// }
				let res = await this.$request[funName]({
					goodsCategoryId: e.goodsCategoryId,
					type: 1
				});
				if (res.code == 0) {
					switch (type) {
						// case 0: {
						// 	this.specialSkill[index].specialSubTypeList = res.data;
						// 	this.specialSkill[index].specialSubSubTypeList = [];
						// 	this.specialSkill[index].specialSubTypeObj = {};
						// 	this.specialSkill[index].specialSubSubTypeObj = {};
						// }
						// break;
						case 0: {
							this.specialSkill[index].specialSubTypeList = res.data;
							this.specialSkill[index].specialSubTypeObj = {};
						}
						case 1: {
							this.specialSkill[index].specialSkillList = res.data;
							this.specialSkill[index].specialSkillObj = {};
						}
						break;
						default:
							break;
						}
				}
			},
			addSpecialSkill() {
				this.specialSkill.push({
					specialSubTypeList: [],
					specialSubSubTypeList: [],
					specialTypeObj: {},
					specialSubTypeObj: {},
					specialSubSubTypeObj: {},
					skillCert: [],
					insurCert: [],
					insurStartDate: '',
					insurEndDate: ''
				});
			},
			delSpecialSkill(index) {
				this.specialSkill.splice(index, 1);
			},
			changeInsurDate(e, index) {
				this.specialSkill[index].insurStartDate = e[0];
				this.specialSkill[index].insurEndDate = e[1];
			},
			async chooseImage(e, imgList, count) {
				uni.chooseImage({
					count: count && count > 0 ? count : 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// 上传图片
						res.tempFilePaths.forEach((tmpPath) => {
							this.$request.uploadFile(tmpPath).then((url) => {
								// 存入缓存
								imgList.push(url);
							});
						})
					}
				});
			},
			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)
						}
					}
				})
			},
			/* 特殊技能 end */
			validData() {
				let teamParams = this.realNameInfo;
				let errMsg = null;
				if (!this.hasJoinedTeam) {
					if (!teamParams.licenseImgList || !teamParams.licenseImgList.length) {
						errMsg = "请上传公司营业执照";
					} else if (!teamParams.companyName) {
						errMsg = "请填写公司名称";
					} else if (!teamParams.businessLicenseNum) {
						errMsg = "请填写公司营业执照号码";
					} else if (!teamParams.companyArea || !teamParams.companyArea.length) {
						errMsg = "请选择公司地址所在省市区";
					} else if (!teamParams.companyAddress) {
						errMsg = "请输入营业执照地址/经营地址/服务网点";
					} else if (!teamParams.legalPersionName) {
						errMsg = "请填写法人姓名";
					} else if (!teamParams.legalPersionPhoneNum) {
						errMsg = "请填写法人联系电话";
					}
				}
				if (teamParams.companySize == null || teamParams.companySize == undefined) {
					errMsg = "请选择经营主体规模";
				} else if (!teamParams.brandName) {
					errMsg = "请填写品牌名称"
				} else if (!teamParams.idCardImgList || !teamParams.idCardImgList.length) {
					errMsg = "请上传身份证照片"
				} else if (!teamParams.surname) {
					errMsg = "请填写姓氏"
				} else if (!teamParams.name) {
					errMsg = "请填写名字"
				} else if (!teamParams.idCardNum) {
					errMsg = "请填写身份证号";
				}
				if (errMsg) {
					uni.showToast({
						icon: 'none',
						title: errMsg
					})
					return false;
				}
				return true;
			},
			async submit() {
				if (!this.validData()) {
					return;
				}

				let workerId = this.curUserInfo.workerId;
				let specialSkills = [];
				// 特殊技能参数
				this.specialSkill.forEach((item) => {
					if (item.specialSkillObj && item.specialSkillObj.goodsCategoryId) {
						specialSkills.push({
							workerId: workerId,
							specialSkillId: item.specialSkillObj.goodsCategoryId,
							credential: item.skillCert[0],
							insurance: item.insurCert[0],
							insuranceStart: item.insurStartDate,
							insuranceEnd: item.insurEndDate
						});
					}
				});
				// 加上经营主体参数
				let params = {
					...this.realNameInfo,
					otherServ: this.realNameInfo.otherServ && this.realNameInfo.otherServ.length ? this
						.realNameInfo.otherServ.join(",") : null,
					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
				}

				let res = await this.$request.addWorkerCertify(params);
				if (res.code === 0) {
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					})
					await this.loadData();
				}
			}
		},
	}
</script>

<style scoped>
	/deep/ .uni-combox__selector {
		z-index: 99 !important;
	}

	.grid.col-1.grid-square.upload-pic-grid>view {
		padding-bottom: 35%;
		height: 0;
		margin-right: 20rpx;
	}

	.grid.col-1.upload-pic-grid>view {
		width: 35%;
	}

	/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;
	}

	.form-opt .title {
		text-align: justify;
		padding-right: 10rpx;
		font-size: 30rpx;
		position: relative;
		height: 60rpx;
		line-height: 60rpx;
		flex-basis: 40%;
	}

	.form-opt {
		background-color: #ffffff;
		padding: 1rpx 30rpx;
		display: flex;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
	}
</style>