kly_uniapp/pages/personal/authentication.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 class="img_box">
				<view 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: #DBB78B;margin-top: 10upx;">请上传身份证人像面</view>
					</view>


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

					<view style="width: 100%;" v-else>
						<input style="" :disabled="allow_edit==0" class="auth_ipt" v-model="sub_data.true_name"
							@input="ipt_name" placeholder="身份证姓名" />
						<input style="margin-top: 15upx;" :disabled="allow_edit==0" class="auth_ipt"
							v-model="sub_data.idcard" @input="ipt_num" placeholder="身份证号" />
					</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',
				allow_edit: 0, //是否允许编辑
				is_agree: [], //是否同意协议
				sub_data: {}, //提交信息
				type: 0, //认证类型：0-个人商家；1-企业商家
				loading: true,
				show_ipt:false,//是否显示身份证号输入框
			}
		},
		onLoad(e) {
			this.get_info()
		},
		onPullDownRefresh() {
			this.get_info()
		},
		methods: {
			change_show_ipt() {
				this.show_ipt = 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
						this.type = this.sub_data.catalog || 0
						if (!this.sub_data.idcard) {
							title = '未认证'
							this.allow_edit = 1
						} else {
							title = '已认证'
							this.show_ipt = true
							console.log(res.data.Result)
							this.sub_data = commonFun.formate_name_card_mem(res.data.Result)
						}

						uni.setNavigationBarTitle({
							title
						})
						console.log('实名认证页面获取个人信息')
						console.log(this.sub_data)
					}
					uni.stopPullDownRefresh()
					this.loading = false
				})
			},
			// 选中同意协议
			checkboxChange(e) {
				this.is_agree = e.detail.value
			},
			// 输入姓名
			ipt_name(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data['true_name'] = e.target.value
				this.sub_data = sub_data
			},
			// 输入身份证号
			ipt_num(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data['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.idcard_npic = ImageUrl
									sub_data.true_name = res.data.Result.Name
									sub_data.idcard = res.data.Result.IdNum
								}
								this.sub_data = sub_data
								this.show_ipt = true
							}
						})
					}
				}, '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.true_name || !sub_data.idcard) {
					uni.showModal({
						title: '请上传身份证人像面，或手输姓名和身份证号!',
						showCancel: false
					})
					return
				}

				uni.showModal({
					content: '确认提交后不可修改，请谨慎操作',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...',
								mask: true
							})
							// 校验身份证号和姓名的真实性
							commonFun.requestUrl('&WsAjaxBiz=Worker&WsAjaxAction=entityDataHandle', {
									bizCatalog: 'WorkerEntity',
									handleMode: 'idCardCheck',
									trueName: sub_data.true_name,
									idCard: sub_data.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) {
													let params = {
														...sub_data,
														catalog: this.type,
														biz_catalog: 0,
													}
													console.log('实名认证提交请求')
													console.log(params)
													commonFun.requestUrl(
														'&WsAjaxBiz=Worker&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>
	.auth_ipt {
		background-color: #f5f5f5;
		width: 80%;
		margin: 0upx auto;
		height: 70upx;
	}

	.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>