bocai_supplyChain_uni/root/person/idcardForm.vue

<template>
	<view class="p-root-person-idform g_bg_f_5" style="min-height: 100vh">
		<view class="g_h_10"></view>
		<!-- 图片区 -->
		<view class="g_bg_f g_pl_10 g_pr_10 g_flex_column_center" style="width: calc(100% - 20px); margin: 0px auto; border-radius: 8px; height: 366px">
			<view class="g_flex_row_center g_position_rela" @click="uploadImage('face')">
				<image :src="submitInfo.idcardImgFront || 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/face.png'" class="g_w_240 g_h_150 g_radius_8"></image>
				<view v-if="!submitInfo.idcardImgFront" class="cardText c6" hover-class="none" hover-stop-propagation="false">
					<view class="iconfont icon-tianjia g_c_9 g_fw_600 g_h_41" style="line-height: 41px; font-size: 26px"></view>
					<text selectable="false" space="false" decode="false" class="g_fs_16 g_c_6">人像面照片</text>
				</view>
			</view>
			<view class="g_mt_16 g_flex_row_center g_position_rela" @click="uploadImage('back')">
				<image :src="submitInfo.idcardImgBack || 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/back.png'" class="g_w_240 g_h_150 g_radius_8"></image>
				<view v-if="!submitInfo.idcardImgBack" class="cardText c6" hover-class="none" hover-stop-propagation="false">
					<view class="iconfont icon-tianjia g_c_9 g_fw_600 g_h_41" style="line-height: 41px; font-size: 26px"></view>
					<text selectable="false" space="false" decode="false" class="g_fs_16 g_c_6">国徽面照片</text>
				</view>
			</view>
		</view>
		<view class="g_h_10"></view>
		<!-- 表单区 -->
		<view class="g_bg_f g_pl_10 g_pr_10 g_fs_16" v-if="!idauth" style="width: calc(100% - 20px); margin: 0px auto; border-radius: 8px">
			<view class="g_flex_row_between" style="height: 52px; border-bottom: 1px solid #eee">
				<view class="g_flex_column_center g_flex_none">姓名</view>
				<view class="g_flex_1 g_flex_row_end g_flex_column_center">
					<input type="text" v-model="submitInfo.realName" placeholder="输入姓名" style="text-align: right" />
				</view>
			</view>
			<view class="g_flex_row_between flex_center" style="height: 52px; border-bottom: 1px solid #eee">
				<view class="g_flex_column_center g_flex_none">性别</view>
				<view class="g_flex_1 g_text_r">
					<picker mode="selector" :value="submitInfo.sex" @change="changeDateTime" @columnchange="changeDateTimeColumn" :range="sexArr" range-key="text" style>
						<view :class="submitInfo.sexStr ? 'g_c_3' : 'g_c_9'" hover-class="none" hover-stop-propagation="false">{{ !!submitInfo.sexStr ? submitInfo.sexStr : "选择性别" }}</view>
					</picker>
				</view>
			</view>
			<view class="g_flex_row_between" style="height: 52px">
				<view class="g_flex_column_center g_flex_none">身份证号</view>
				<view class="g_flex_1 g_flex_row_end g_flex_column_center">
					<input type="text" v-model="submitInfo.IDCard" placeholder="输入身份证号" style="text-align: right" />
				</view>
			</view>
		</view>
		<!-- 提交区 -->
		<!--  -->
		<view v-if="!idauth">
			<view class="g_flex_row_center g_mt_32 m-submit">
				<g-button btnText="确定" :type="submitInfo.idcardImgFront && submitInfo.idcardImgBack && submitInfo.IDCard ? 'primary' : 'infro'" @clickBtn="subNameInfo" />
			</view>
			<view class="g_fs_12 c045 g_flex_row_center" style="align-items: center; margin-top: 16px">
				<radio-group class="dib">
					<radio :checked="switchChecked" @click="switchChange" value="0" class="dib" color="#f40" style="transform: scale(0.7)" />
				</radio-group>
				我已阅读并同意
				<navigator url="/root/person/agreeUser" class="aLink">《用户服务协议》</navigator>
				及
				<navigator url="/root/person/agreePrive" class="aLink">《隐私政策》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onShareAppMessage() {
		return this.G.shareFun();
	},
	onLoad(options) {
		if (options.from && options.from == "idauth") {
			let user = uni.getStorageSync("apply-userinfo").user;
			this.submitInfo = {
				idcardImgFront: user.idcardImgFront,
				idcardImgBack: user.idcardImgBack,
			};
			this.idauth = true;
		}
	},
	data() {
		return {
			submitInfo: {
				realName: "",
				idCard: "",
				sex: "",
				idcardImgBack: "",
				idcardImgFront: "",
			},
			sexArr: [
				{
					text: "男",
					id: 1,
				},
				{
					text: "女",
					id: 2,
				},
			],
			idauth: false,
			switchChecked: false,
		};
	},
	methods: {
		subNameInfo(e) {
			let that = this;
			console.log(e);
			console.log(this.submitInfo);
			if (!this.switchChecked) {
				uni.showToast({
					title: "请阅读并同意用户协议",
					icon: "none",
				});
				return false;
			}
			var username = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
			if (that.submitInfo.IDCard.length == 18 && username.test(that.submitInfo.realName)) {
				that.G.Post(that.api.person_realName, { name: that.submitInfo.realName, cardno: that.submitInfo.IDCard }, (res) => {
					var state = res.state;
					if (state == 101) {
						uni.hideLoading();
						that.dialog("已被占用", "你输入的身份证号已经被其他人占用了", "知道了");
					} else if (state == 102) {
						uni.hideLoading();
						that.dialog("次数超限", "你今天已经认证失败3次，明天再认证吧", "知道了");
					} else if (state == 5 || state == 14 || state == 96) {
						uni.hideLoading();
						that.dialog("认证失败", "姓名或身份证号错误，认证失败", "知道了");
					} else if (state == 0) {
						that.saveIDCard(realName, IDCard);
					} else {
						uni.hideLoading();
						that.dialog("认证失败", res.data.msg, "知道了");
					}
				});
			} else {
			}
		},
		dialog(title, content, btxt) {
			uni.showModal({
				title: title,
				content: content,
				showCancel: false,
				confirmColor: "#1677ff",
				confirmText: btxt,
				success: function (res) {
					if (res.confirm) {
						console.log("用户点击确定");
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
		switchChange() {
			console.log(this.switchChecked);
			this.switchChecked = !this.switchChecked;
		},
		changeDateTime(e) {
			console.log(e);
			if (e.detail.value == 0) {
				this.submitInfo.sexStr = "男";
			} else {
				this.submitInfo.sexStr = "女";
			}
			this.submitInfo.sex = e.detail.value;
			console.log(this.submitInfo);
		},
		uploadImage(_type) {
			console.log(_type);
			let that = this;
			if (this.idauth) {
				return false;
			}
			this.G.uploadImg(
				(res) => {
					console.log(res);
					if (_type == "face") {
						this.submitInfo.idcardImgFront = res.image;
						that.submitInfo["IDCard"] = res.info.num;
						that.submitInfo["realName"] = res.info.name;
						if (res.info.num) {
							if (res.info.num.slice(16, 17) % 2 == 0) {
								that.submitInfo.sex = 1;
								that.submitInfo.sexStr = "女";
							} else {
								that.submitInfo.sex = 0;
								that.submitInfo.sexStr = "男";
							}
						}
					} else {
						this.submitInfo.idcardImgBack = res.image;
					}
					console.log(this.submitInfo);
				},
				_type == "face" ? "idcard" : ""
			);
		},
	},
};
</script>

<style lang="less">
.p-root-person-idform {
	.m-submit {
		.bocai_btn_type_infro {
			background: #ccc !important;
			color: #fff !important;
			font-weight: 600 !important;
			font-size: 18px !important;
		}
	}
	.cardText {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
}
</style>