kly_uniapp/pages/personal/authentication_merchant.vue

<!-- 商家实名认证 -->

<!-- 说明
 商家分为个人认证和企业认证
 商家个人认证：需要上传双面身份证人像面照片或手输姓名/身份账号，状态变为认证中，需要后台审核，变成已认证-个人认证。
 商家企业认证：需要上传双面身份证照片和营业执照，状态为认证中，需要后台审核，变成已认证-企业认证。
 商家个人认证通过后，可以申请升级为企业认证，状态为认证中且不允许申请升级，申请升级为企业认证，需要补传营业执照，状态为认证中，后台审核。
 -->

<template>
	<view class="loading_text" v-if="loading">加载中...</view>
	<view v-else style="padding-bottom: 100upx;" class="main_width">
		<view style="">
			<view class="mem_text">
				*认证通过后不可修改，请谨慎操作
			</view>
			<view>
				<!-- 只在允许编辑状态显示 -->
				<view v-if="allow_edit==1&&!is_upgrade" class="form_item">
					<view class="rht">选择类型</view>
					<radio-group style="margin-right: 30upx;" @change="radio_change">
						<label>
							<radio color="#2bcfb4" value="0" :checked="type==0" />
							<text>个人认证</text>
						</label>
						<label style="margin-left: 50upx;">
							<radio color="#2bcfb4" value="1" :checked="type==1" />
							<text>企业认证</text>
						</label>
					</radio-group>
				</view>

				<view v-if="!is_upgrade&&sub_data.catalog==0&&sub_data.certif_confirmed==1&&!sub_data.bizlicense_pic"
					@click="upgrade" class="confirm" style="width: 300upx;margin: 30upx auto 0;">升级为企业认证
				</view>
			</view>

			<!-- 都显示 -->
			<view class="img_box">
				<!-- 营业执照照片 -->
				<view v-if="type==1" style="padding: 30upx 0;" class="img_box_in">
					<image @click="upload_img_cards('license')" style="width: 100upx;height: 100upx;"
						:src="serverUrlImg5">
					</image>
					<view style="color: #000000;font-size: 30upx;margin-top: 10upx;">请上传营业执照</view>
					<view v-if="sub_data.company_name" style="margin-top: 20upx;">公司名称：{{sub_data.company_name}}</view>
					<view v-if="sub_data.company_idcard">识别码：{{sub_data.company_idcard}}</view>
				</view>

				<!-- 身份证照片 -->
				<view v-if="!is_upgrade" style="padding: 30upx 0;margin-top: 30upx;" class="img_box_in">
					<view style="margin-bottom: 30upx;" v-if="allow_edit==1">
						<image @click="upload_img_cards('idcard')" style="width: 100upx;height: 100upx;"
							:src="serverUrlImg4">
						</image>
						<view style="color: #000000;font-size: 30upx;margin-top: 10upx;">请上传身份证人像面</view>
					</view>

					<view @click="change_show_ipt" v-if="!show_ipt"
						style="color: #01c6b5;display: flex;align-items: center;margin-top: 40upx;">
						<image style="width: 35upx;height: 20upx;margin-right: 20upx;" :src="serverUrlImg6"></image>
						没带身份证？切换至手动输入
					</view>

					<view v-else style="margin-top: 40upx;">
						<view class="ipt_box">
							<view class="ipt_item">姓名</view>
							<input :disabled="allow_edit==0" class="auth_ipt" v-model="sub_data.lawer_name"
								@input="ipt_name" placeholder="身份证姓名" />
						</view>
						<view style="margin-top: 30upx;" class="ipt_box">
							<view class="ipt_item">身份证号</view>
							<input :disabled="allow_edit==0" class="auth_ipt" v-model="sub_data.lawer_idcard"
								@input="ipt_num" placeholder="身份证号" />
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 只在编辑状态显示 -->
		<view v-if="allow_edit==1">
			<view class="read main_width2">
				<checkbox-group @change="checkboxChange">
					<checkbox color="#48ccae" value="1" />
				</checkbox-group>
				<view style="margin-left: 10upx;">我们将严格按照<navigator url="../login/web?index=6"
						style="color: rgb(0, 199, 178);display: inline-block;">《用户协议》</navigator>和<navigator
						url="../login/web?index=7" style="color: rgb(0, 199, 178);display: inline-block;">《隐私政策》
					</navigator>
					<view>
						保障您的信息安全
					</view>
				</view>
			</view>
			<view @click="sub" style="margin-top: 60upx;" class="main_btn_m">确定</view>
		</view>
	</view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'

	export default {
		data() {
			return {
				serverUrlImg4: this.serverUrl + 'show/camera.png',
				serverUrlImg5: this.serverUrl + 'show/camera_lis.png',
				serverUrlImg6: this.serverUrl + 'show/auth_change.png',
				allow_edit: 0, //是否允许编辑
				is_agree: [], //是否同意协议
				sub_data: {}, //提交信息
				type: 0, //认证类型：0-个人商家；1-企业商家
				loading: true,
				is_upgrade: false, //是否正在升级为企业认证操作
				show_ipt: false,
			}
		},
		onLoad(e) {
			this.get_info()
		},
		onPullDownRefresh() {
			this.get_info()
		},
		methods: {
			change_show_ipt() {
				this.show_ipt = true
			},
			// 升级为企业认证
			upgrade() {
				this.type = 1
				this.allow_edit = 1
				this.is_upgrade = true
			},
			// 获取个人信息
			get_info() {
				this.loading = true
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				commonFun.get_user_info(res => {
					let title = '' //设置当前页面标题
					if (res.status) {
						uni.hideLoading()
						this.sub_data = res.data.Result
						console.log(this.sub_data)
						//sub_data参数说明：catalog未认证类型，0个人商家，1企业商家
						// certif_confirmed代表是否处于认证审核中，0是审核中，1是个人认证审核通过，2是企业认证审核通过
						// 如果个人认证审核通过，升级为企业认证的审核中，则catalog为0，certif_confirmed为1，bizlicense_pic不为空

						this.type = this.sub_data.catalog || 0
						if (!this.sub_data.lawer_idcard) {
							title = '未认证'
							this.allow_edit = 1
						} else if (this.sub_data.certif_confirmed == 0) {
							title = this.sub_data.catalog == 0 ? '个人商家认证中' : '企业商家认证中'
							this.sub_data = commonFun.formate_name_card(res.data.Result)
							this.show_ipt = true
						} else if (this.sub_data.certif_confirmed == 1 && this.sub_data.catalog == 0) {
							if (this.sub_data.bizlicense_pic) {
								title = '升级为企业认证中'
								this.type = 1
								this.sub_data = commonFun.formate_name_card(res.data.Result)
							} else {
								title = '个人商家已认证'
								this.sub_data = commonFun.formate_name_card(res.data.Result)
							}
							this.show_ipt = true
						} else if (this.sub_data.certif_confirmed == 2 && this.sub_data.catalog == 1) {
							title = '企业商家已认证'
							this.sub_data = commonFun.formate_name_card(res.data.Result)
							this.show_ipt = true
						}

						uni.setNavigationBarTitle({
							title
						})
						console.log('实名认证页面获取个人信息')
						console.log(this.sub_data)
					}
					uni.stopPullDownRefresh()
					this.loading = false
				})
			},
			// 选中同意协议
			checkboxChange(e) {
				this.is_agree = e.detail.value
			},
			// 选择认证类型
			radio_change(e) {
				this.type = e.target.value
			},
			// 输入姓名
			ipt_name(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data['lawer_name'] = e.target.value
				this.sub_data = sub_data
			},
			// 输入身份证号
			ipt_num(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data['lawer_idcard'] = e.target.value
				this.sub_data = sub_data
			},
			// 上传身份证人像面或营业执照
			upload_img_cards(type) {
				let is_idcard = type == 'idcard'
				if (!this.allow_edit) {
					return
				}
				commonFun.uploadFileApiOSS(res => {
					if (res.status) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						let ImageUrl = res.data
						let params = {
							ocrParams: {
								ImageUrl,
								CardSide: 'FRONT'
							},
							bizCatalog: 'TXCLOUD_OCR',
							handleMode: is_idcard ? 'IDCardOCR' : 'BizLicenseOCR',
						}
						// console.log('上传身份证人像面或营业执照请求参数')
						// console.log(params)
						commonFun.requestUrl('&WsAjaxBiz=Trader&WsAjaxAction=entityDataHandle', params, res => {
							// console.log('上传身份证人像面或营业执照返回数据')
							// console.log(res)
							if (res.status) {
								uni.hideLoading()
								let sub_data = {
									...this.sub_data
								}
								if (is_idcard) {
									sub_data.lawer_idcard_npic = ImageUrl
									sub_data.lawer_name = res.data.Result.Name
									sub_data.lawer_idcard = res.data.Result.IdNum
									this.show_ipt = true
								} else {
									sub_data.bizlicense_pic = ImageUrl
									sub_data.company_name = res.data.Result.Name
									sub_data.company_idcard = res.data.Result.RegNum
								}
								this.sub_data = sub_data
								uni.showModal({
									title: '上传成功',
									showCancel: false
								})
							}
						})
					}
				}, 'image', false)
			},
			// 点击确定提交
			sub() {
				if (this.is_agree.length == 0) {
					uni.showModal({
						content: '请勾选隐私政策',
						showCancel: false,
						success: function(res) {}
					});
					return
				}
				let sub_data = {
					...this.sub_data
				}
				console.log('实名认证提交的数据')
				console.log(sub_data)

				if (!sub_data.lawer_name || !sub_data.lawer_idcard) {
					uni.showModal({
						title: '请上传身份证人像面，或手输姓名和身份证号!',
						showCancel: false
					})
					return
				}
				if (this.type == 1 && !sub_data.bizlicense_pic) {
					uni.showModal({
						title: '请上传营业执照照片!',
						showCancel: false
					})
					return
				}

				uni.showModal({
					content: '确认提交后不可修改，请谨慎操作',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...',
								mask: true
							})
							// 校验身份证号和姓名的真实性
							commonFun.requestUrl('&WsAjaxBiz=Trader&WsAjaxAction=entityDataHandle', {
									bizCatalog: 'TraderEntity',
									handleMode: 'idCardCheck',
									trueName: sub_data.lawer_name,
									idCard: sub_data.lawer_idcard,
								},
								res => {
									if (res.status) {
										let params = {
											...sub_data,
											catalog: this.is_upgrade ? 0 : this.type,
											biz_catalog: 0,
										}
										console.log('实名认证提交请求')
										console.log(params)
										commonFun.requestUrl('&WsAjaxBiz=Trader&WsAjaxAction=registerInfo',
											params,
											res => {
												console.log(res)
												if (res.status) {
													uni.hideLoading()
													uni.showModal({
														content: '提交成功，待审核',
														showCancel: false,
														success: res => {
															if (res.confirm) {
																uni.navigateBack({
																	delta: 1
																});
															}
														}
													})
												}
											})
									}
								})

						}
					}
				});
			},
		}
	}
</script>

<style>
	.ipt_box {
		display: flex;
		width: 100%;
		align-items: center;
	}

	.ipt_item {
		width: 130upx;
		text-align: right;
		margin-right: 40upx;

	}

	.auth_ipt {
		background-color: #f5f5f5;
		height: 70upx;
		width: 450upx;
	}

	.mem_text {
		margin-top: 15upx;
		color: #FF0000;
		text-align: center;
	}

	.main_width2 {
		width: 96%;
		margin-left: 2%;
	}

	.read {
		color: #8E97AE;
		margin-top: 200upx;
		font-size: 28upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.up_img {
		width: 100%;
	}

	.img_box {
		width: 643upx;
		/* height: 350upx; */
		margin: 30upx auto 0;
	}

	.img_box_in {
		width: 100%;
		height: 100%;
		text-align: center;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		border: 2upx dotted #E8E8E8;
		border-radius: 10upx;
	}
</style>