yicangzongtai_app_240321/pages/authentication/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="content">
			<view class="public-tip ql-editor-box">
				<rich-text :nodes="agreement"></rich-text>
			</view>
			<view class="title-box">
				<view class="line"></view>
				<view class="title">上传证件材料</view>
			</view>
			<view class="upload-tip">
				<view>
					① 证件必须是清晰彩色原件电子版，可以是扫描件或数码拍摄照片，仅支持jpg、png、jpeg的图片格式。
				</view>
				<view>
					② 如果受捐人是儿童，可由监护人代为提交，提供认证儿童的户口本页面及一些认证材料即可。
				</view>
				<view>
					③ 如果您在认证过程中有什么问题，可以添加绿马客服进行咨询。
				</view>
			</view>
			<view class="upload-box">
				<u-upload action="" max-count="1" :file-list="imgFiles1" :show-progress="false" upload-text="" height="350rpx" width="640rpx" custom-btn @on-remove="(index)=>delImg(index,1)" :deletable="form.status === '' || form.status === 2">
					<view slot="addBtn" class="card" @click.stop="upload(1)">
						<image class="icon" src="/static/authentication/card1.png"></image>
						<view class="tip">上传身份证正面</view>
					</view>
				</u-upload>
				<unloadimg ref="unloadimg1" imgCount="1" type="other" url=""  @result="(e)=>unloadRes(e,1)" style="display: none;"></unloadimg>
			</view>
			<view class="upload-box">
				<u-upload action=""max-count="1" :file-list="imgFiles2" :show-progress="false" upload-text="" height="350rpx" width="640rpx" custom-btn @on-remove="(index)=>delImg(index,2)" :deletable="form.status === '' || form.status === 2">
					<view slot="addBtn" class="card" @click.stop="upload(2)">
						<image class="icon" src="/static/authentication/card2.png"></image>
						<view class="tip">上传身份证反面</view>
					</view>
				</u-upload>
				<unloadimg ref="unloadimg2" imgCount="1" type="other" url=""  @result="(e)=>unloadRes(e,2)" style="display: none;"></unloadimg>
			</view>
			<view class="upload-box">
				<u-upload action=""max-count="1" :file-list="imgFiles3" :show-progress="false" upload-text="" height="350rpx" width="640rpx" custom-btn @on-remove="(index)=>delImg(index,3)" :deletable="form.status === '' || form.status === 2">
					<view slot="addBtn" class="card" @click.stop="upload(3)">
						<image class="icon" src="/static/authentication/card3.png"></image>
						<view class="tip">上传证明材料</view>
					</view>
				</u-upload>
				<unloadimg ref="unloadimg3" imgCount="1" type="other" url=""  @result="(e)=>unloadRes(e,3)" style="display: none;"></unloadimg>
			</view>
		</view>
		<view class="common-form">
			<view class="form-title required">真实姓名</view>
			<view class="form-item">
				<input v-model="form.real_name" maxlength="10" :disabled="form.status !== '' && form.status !== 2" placeholder="请输入真实姓名" />
			</view>
			<view class="form-title required">身份证号</view>
			<view class="form-item">
				<input v-model="form.id_card" :disabled="form.status !== '' && form.status !== 2" placeholder="请输入身份证号" />
			</view>
			<view class="form-title required">联系电话</view>
			<view class="form-item">
				<input v-model="form.mobile" type="number" maxlength="11" :disabled="form.status !== '' && form.status !== 2" placeholder="请输入联系电话" />
			</view>
			<view class="form-title required">认证标签</view>
			<view class="form-item">
				<text v-if="form.status !== '' && form.status !== 2">
					<text v-if="form.isccc_lable===''" style="font-size: 16px;color: grey;">请选择认证标签</text>
					<text v-else style="font-size: 16px;">{{isccc_lable_name}}</text>
				</text>
				<picker
					v-else
				  class="pickerList"
				  :range="lableList"
				  range-key="label"
				  @change="labelChange"
					style="flex: 1;"
				>
				<text v-if="form.isccc_lable===''" style="font-size: 16px;color: grey;">请选择认证标签</text>
				<text v-else style="font-size: 16px;">{{isccc_lable_name}}</text>
				</picker>
				<text v-if="form.status === '' || form.status === 2" class="iconfont2">&#xe65f;</text>
			</view>
			<view class="form-title required">认证地区</view>
			<view class="form-item">
				<text v-if="form.status !== '' && form.status !== 2">
					<text v-if="!checkdArea" style="font-size: 16px;color: grey;">请选择认证地区</text>
					<text v-else style="font-size: 16px;">{{form.province_name +' '+form.city_name+' '+form.area_name}}</text>
				</text>
				<picker
					v-else
				  class="pickerList"
				  mode="multiSelector"
				  :range="checkAreaList"
				  range-key="label"
				  :value="areaIndex"
				  @change="areaChange"
				  @columnchange="pickerColumnchange"
					style="flex: 1;"
				>
				<text v-if="!checkdArea" style="font-size: 16px;color: grey;">请选择认证地区</text>
				<text v-else style="font-size: 16px;">{{form.province_name +' '+form.city_name+' '+form.area_name}}</text>
				</picker>
				<text v-if="form.status === '' || form.status === 2" class="iconfont2">&#xe65f;</text>
			</view>
		</view>
		<view v-if="form.status === '' || form.status === 2" class="agreement">
			<u-checkbox
				v-model="agree" 
				name=""
				active-color="#0099FF"
			></u-checkbox>
			<text class="tip">勾选并<text class="link" @click="goAgreement()">同意隐私政策</text></text>
		</view>
		<view v-if="form.status !== ''" :class="`submit-status ${statusMap[form.status].color}`">{{statusMap[form.status].text}} <text v-if="form.status==2" style="margin-left: 20rpx;">{{form.update_time}}</text></view>
		<button v-if="form.status === '' || form.status === 2" class="submit-btn" @click="submit">立即提交</button>
		<uni-popup class="submit-popup" ref="submitPopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">提交完成</view>
				<view class="content">
					<image class="success-icon" src="/static/common/success-icon.png"></image>
					<view class="tip">
						认证资料已提交完成， 请您耐心等待审核！
					</view>
					<view class="btn-box">
						<button @click="closePopup();back()">返回</button>
						<button @click="closePopup();detail();">查看</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import unloadimg from "@/components/uploadImg/imgUpload.vue";
	export default {
		components: {
			unloadimg
		},
		data() {
			return {
				config: {
					back: true,
					title: '公益认证',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				agreement: '',
				form:{
					real_name: '',// 真实姓名	
					id_card: '',// 身份证号	
					mobile: '',// 手机号	
					isccc_lable: '',// 认证标签
					id_card_front: '',// 身份证正面
					id_card_back: '',// 身份证背面
					certificate: [],// 证明材料
					province_name: '',// 省名
					province_code: '',// 省编号
					city_name: '',// 市名
					city_code: '',// 市编号
					area_name: '',// 区名
					area_code: '',// 区编号
					status: '' //空值 未提交过 0 审核中 1审核通过，2审核不通过
				},
				imgFiles1: [],
				imgFiles2: [],
				imgFiles3: [],
				isccc_lable_name: '',//仅显示
				lableList: [{
					label: '智力残疾'
				},{
					label: '视力残疾'
				},{
					label: '听力残疾'
				},{
					label: '言语残疾'
				},{
					label: '肢体残疾'
				},{
					label: '精神残疾'
				}],
				agree: false,
				//提交状态
				//【提交状态】对应的颜色和文本
				statusMap:[{
					color: 'success',
					text: '审核中，请耐心等待!'
				},
				{
					color: 'success',
					text: '审核通过'
				},
				{
					color: 'error',
					text: '资料不清晰，请补充完善后提交'
				}],
				areaList: [],
				areaIndex: [0,0,0],
				checkAreaList: [],
				checkdArea:false
			}
		},
		async onLoad() {
			this.getPrivacyProtocol();
			await this.getArea();
			this.detail();
		},
		methods: {
			back(){
				uni.navigateBack({delta: 1});
			},
			valForm(){
				let error = '';
				if(this.imgFiles1.length <= 0){
					error = '请上传身份证正面';
					return error;
				}
				if(this.imgFiles2.length <= 0){
					error = '请上传身份证反面';
					return error;
				}
				if(this.imgFiles3.length <= 0){
					error = '请上传证明材料';
					return error;
				}
				if((this.form.real_name??'') == ''){
					error = '请输入真实姓名';
					return error;
				}
				if((this.form.id_card??'') == ''){
					error = '请输入身份证号';
					return error;
				}
				if(!/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(this.form.id_card)){
					error = '身份证号格式不正确';
					return error;
				}
				if((this.form.mobile??'') == ''){
					error = '请输入联系电话';
					return error;
				}
				if(!/^1\d{10}$/.test(this.form.mobile)){
					error = '手机号格式不正确';
					return error;
				}
				if((this.isccc_lable_name??'') == ''){
					error = '请选择认证标签';
					return error;
				}
				if(!this.checkdArea){
					error = '请选择认证地区';
					return error;
				}
				if(!this.agree){
					error = '请勾选并同意隐私政策';
					return error;
				}
				return error;
			},
			submit(){
				let that = this;
				let error = that.valForm();
				if(error==''){
					uni.showModal({
						title: '提示',
						content: '您确认要提交吗',
						success: function (res) {
							if (res.confirm) {
								uni.showLoading({
									title: '正在提交中...',
									mask: true
								});
								let isAdd = !that.form.id;
								that.$http[isAdd?'post':'put'](isAdd?'/disabilityauth/apply':'/disabilityauth/updateApply',{
									...that.form,
									id_card_front: that.imgFiles1[0].url,
									id_card_back: that.imgFiles2[0].url,
									certificate: [that.imgFiles3[0].url],
									status: undefined
								})
								.then(res => {
									if(res.code==200){
										that.$refs.submitPopup.open();
									}
								})
								.finally(()=>{
									uni.hideLoading();
								})
							}
						}
					});
				}else{
					uni.showToast({
						icon: 'none',
						title: error
					})
				}
			},
			detail(){
				uni.showLoading({
					title: '努力加载中...',
					mask: true
				});
				this.$http.get('/disabilityauth/my')
				.then(res => {
					if(res.code==200){
						//未提交审核过
						if(!res.data){
							return ;
						}
						this.form = res.data;
						this.imgFiles1 = [{
							url: res.data.id_card_front
						}];
						this.imgFiles2 = [{
							url: res.data.id_card_back
						}];
						this.imgFiles3 = [{
							url: res.data.certificate[0]
						}];
						this.isccc_lable_name = this.lableList[res.data.isccc_lable].label;
						this.checkdArea = true;
						this.agree = true;
						// 错误状态
						if(this.form.status == 2){
							this.statusMap[2].text = this.form.reason;
						}
					}
				})
				.finally(()=>{
					uni.hideLoading();
				})
			},
			closePopup(){
				this.$refs.submitPopup.close();
			},
			getArea(){
				return this.$http.get('/cnarea/tree-lbs')
				.then(res => {
					if(res.code==200){
						let areaList = res.tree.children;
						let checkAreaList = [
							areaList,
							areaList[0].children,
							areaList[0].children[0].children
						];
						this.areaList = areaList;
						this.checkAreaList = checkAreaList;
					}
				})
			},
			goAgreement(){
				uni.navigateTo({
					url:'/pages/protocol/index?code=privacy-agreement'
				})
			},
			upload(index){
				this.$refs['unloadimg'+index].upPhoto();
			},
			unloadRes(e,index){
				this['imgFiles'+index] = e.map(url=>{
					return {
						url
					}
				});
			},
			delImg(index,listIndex){
				this.$refs['unloadimg'+listIndex].imgArray.splice(index, 1);
				this['imgFiles'+listIndex].splice(index,1);
			},
			//认证协议
			getPrivacyProtocol(){
				return this.$http.get('/protocolConfig/info/certification-instructions')
				.then(res => {
					if(res.code==200){
						this.agreement = res.data.content
					}
				})
			},
			areaChange(e){
				this.areaIndex = e.detail.value;
				this.form = {
					...this.form,
					province_name: this.checkAreaList[0][this.areaIndex[0]].label,// 省名
					province_code: this.checkAreaList[0][this.areaIndex[0]].value,// 省编号
					city_name: this.checkAreaList[1][this.areaIndex[1]].label,// 市名
					city_code: this.checkAreaList[1][this.areaIndex[1]].value,// 市编号
					area_name: this.checkAreaList[2][this.areaIndex[2]].label,// 区名
					area_code: this.checkAreaList[2][this.areaIndex[2]].value,// 区编号
				}
				this.checkdArea = true;
			},
			pickerColumnchange(e){
				this.areaIndex[e.detail.column] = e.detail.value;
				this.checkAreaList = [
					this.areaList,
					this.areaList[this.areaIndex[0]].children,
					this.areaList[this.areaIndex[0]].children[this.areaIndex[1]].children
				]
			},
			labelChange(e){
				this.form.isccc_lable = e.detail.value;
				this.isccc_lable_name = this.lableList[this.form.isccc_lable].label;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main{
		padding: 1px;
		overflow-x: hidden;
		.content{
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		.public-tip{
			width: 100%;
			background: #fff9ef;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 25rpx 34rpx;
			// 重写全局的 富文本样式，减去左右内边距（padding）
			/deep/ .ql-indent-1 {
				margin-left: calc(96rpx - 68rpx);
			}
			/deep/ .ql-indent-2 {
				margin-left: calc(192rpx - 68rpx);
			}
			/deep/ .ql-indent-3 {
				margin-left: calc(288rpx - 68rpx);
			}
			/deep/ .ql-indent-4 {
				margin-left: calc(384rpx - 68rpx);
			}
			/deep/ .ql-indent-5 {
				margin-left: calc(480rpx - 68rpx);
			}
			/deep/ .ql-indent-6 {
				margin-left: calc(576rpx - 68rpx);
			}
			/deep/ .ql-indent-7 {
				margin-left: calc(672rpx - 68rpx);
			}
			/deep/ .ql-indent-8 {
				margin-left: calc(768rpx - 68rpx);
			}
			
			/deep/ .ql-indent-1 {
				margin-left: calc(60rpx - 68rpx);
			}
				
			/deep/ .ql-indent-2 {
				margin-left: calc(120rpx - 68rpx);
			}
				
			/deep/ .ql-indent-3 {
				margin-left: calc(180rpx - 68rpx);
			}
				
			/deep/ .ql-indent-4 {
				margin-left: calc(240rpx - 68rpx);
			}
				
			/deep/ .ql-indent-5 {
				margin-left: calc(300rpx - 68rpx);
			}
		}
		.title-box{
			margin: 40rpx 0 20rpx 0;
			.line{
				width: 4rpx;
				height: 26rpx;
				background: #20a634;
				border-radius: 2rpx;
				margin-right: 10rpx;
				display: inline-block;
				vertical-align: middle;
			}
			.title{
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				display: inline-block;
				vertical-align: middle;
			}
		}
		.upload-tip{
			ont-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #666666;
			line-height: 45rpx;
			margin-bottom: 10rpx;
		}
		.upload-box{
			width: 690rpx;
			height: 400rpx;
			margin: 30rpx auto;
			padding: 15rpx;
			box-sizing: border-box;
			border: 1px solid #d9d9d9;
			border-radius: 10rpx;
			.card{
				height: 370rpx;
				width: 660rpx;
				.icon{
					display: block;
					height: 187rpx;
					width: 275rpx;
					margin: 47rpx auto 37rpx auto;
				}
				.tip{
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					color: #666666;
				}
			}
		}
		.agreement{
			padding: 0 30rpx 17rpx 30rpx;
			.u-checkbox{
				vertical-align: middle;
			}
			::v-deep .u-checkbox__icon-wrap{
				border: 1px solid #0099FF;
			}
			.tip{
				vertical-align: middle;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				line-height: 60rpx;
				margin-left: -15rpx;
				.link{
					color: #0099FF;
				}
			}
		}
		.submit-status{
			width: 100%;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			margin: 0 0 30rpx 0;
			padding: 25rpx 30rpx;
			word-break: break-all;
			&.error{
				background: #fff2f2;
				color: #ff1010;
			}
			&.success{
				background: #d9f9dd;
				color: #139145;
			}
			.status{
				margin-right: 26rpx;
			}
		}
		.submit-btn{
			width: 690rpx;
			height: 90rpx;
			background: #0b844a;
			color: white;
			margin: 0 auto 30rpx auto;
			border-radius: 45rpx;
			border: 1px solid #0b844a;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #ffffff;
		}
		.picker-view {
			width: 750rpx;
			height: 600rpx;
			margin-top: 20rpx;
			background: white;
		
			.item {
				height: 50px;
				line-height: 50px;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
		}
	}
</style>