yicangzongtai_app_240321/pages/government/realAttestation.vue

<template>
	<view>
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="box" v-if="type==1">
			<view class="item">
				<view class="item_lab">真实姓名</view>
				<view class="item_inp">
					<u-input v-model="form.realName" type="text" placeholder="请输入真实姓名" maxlength="20" clearable />
				</view>
			</view>
			<view class="item">
				<view class="item_lab">身份证号码</view>
				<view class="item_inp">
					<u-input v-model="form.identityCard" type="text" placeholder="请输入身份证号码" maxlength="18" clearable />
				</view>
			</view>
			<view class="agree">
				<u-checkbox-group>
					<u-checkbox size="28rpx" active-color="#3EBCD0" shape="circle"
						v-model="form.checked">我已阅读并同意“宜格服务”<text
							@click="goAgreement('realname_auth_protocol')">实名认证协议</text></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="btnBox">
				<u-button type="primary" @click="submit">提交认证</u-button>
			</view>
		</view>
		<view class="box" v-if="type==2">
			<view class="item">
				<view class="item_lab">真实姓名</view>
				<view class="item_val">
					{{form.realName}}
				</view>
			</view>
			<view class="item">
				<view class="item_lab">证件号码</view>
				<view class="item_val">
					{{form.identityCard}}
				</view>
			</view>
			<view class="item">
				<view class="item_lab">认证时间</view>
				<view class="item_val">
					{{form.createTime}}
				</view>
			</view>
			<!-- <view class="item">
				<view class="item_l">真实姓名</view>
				<view class="item_r">
					<view class="item_r_text">{{form.realName}}</view>
				</view>
			</view>
			<view class="item">
				<view class="item_l">证件号码</view>
				<view class="item_r">
					<view class="item_r_text">{{form.identityCard}}</view>
				</view>
			</view>
			<view class="item">
				<view class="item_l">认证时间</view>
				<view class="item_r">
					<view class="item_r_text">{{form.createTime}}</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		certificationAdd,
		certificationInfo
	} from "@/api/government.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '实名认证',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					// backgroundColor: [0, '#2cba28'],
					rightSlot: true,
				},
				form: {
					checked: false,
					identityCard: "",
					realName: ""
				},
				param: {},
				type: 1
			}
		},
		onLoad(options) {
			if (options.type == 2) {
				this.type = options.type;
				this.getDeatils()
			}
		},
		methods: {
			submit() {
				if (!this.form.checked) {
					uni.showToast({
						icon: "none",
						title: '请同意认证同意协议！',
						duration: 1500
					});
					return
				}
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask:true
				// });
				// certificationAdd(this.form).then(res=>{
				// 	uni.hideLoading();
				// 	this.type=2;
				// 	this.getDeatils()
				// 	uni.showToast({
				// 		title: '提交成功！',
				// 		duration: 1500
				// 	});
				// })
				this.$yghttp.post('/user/certification/yige-info', this.form).then(res => {
					this.param = res.data
					this.goWX()
				})
			},
			goWX() {
				// plus.share.getServices(
				// 	res => {
				// 		let sweixin = '';
				// 		for (var i = 0; i < res.length; i++) {
				// 			let t = res[i];
				// 			if (t.id == 'weixin') {
				// 				sweixin = t;
				// 			}
				// 		}
				// 		if (sweixin) {
				// 			sweixin.launchMiniProgram({
				// 					// id: 'wx26516822b5ec1be8', // 要跳转小程序的原始ID
				// 					id: "gh_9b86ebba08b0",
				// 					type: 2, // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
				// 					path: `pages/identify/face_indentify?name=${this.param.realName}&idCardNumber=${this.param.identityCard}&channel=app`
				// 				},
				// 				// 目标小程序点击返回App后执行的回调，在此接收微信小程序传递的参数
				// 				res2 => {
				// 					console.log(typeof res2, res2)
				// 					// res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
				// 					let result = JSON.parse(res2)
				// 					console.log(result)
				// 					this.param.verifyResult = result.data;
				// 					this.authentication()
				// 					// 拿到参数后执行你需要的逻辑
				// 				},
				// 				err2 => {
				// 					console.log(err2)
				// 				}
				// 			);
				// 		} else {
				// 			// 没有获取到微信分享服务
				// 			uni.showToast({
				// 				icon: 'none',
				// 				title: '当前环境不支持微信操作!'
				// 			})
				// 		}
				// 	},
				// 	err => {
				// 		// 获取分享服务列表失败
				// 		console.log(err)
				// 	}
				// )
				this.$openWXminiprogram(this.param , 2,true).then(res => {
					console.log(res)
					this.param.verifyResult = res.data;
					console.log(this.param)
					this.authentication()
				})
			},
			// 宜格实名认证
			authentication() {
				this.$yghttp.post('/user/certification/yige-real-auth', this.param).then(res => {
					console.log(res)
					this.type = 2;
					this.getDeatils()
					uni.showToast({
						title: '认证成功！',
						icon: 'success',
						duration: 1000
					})
				})
			},
			getDeatils() {
				certificationInfo().then(res => {
					this.form = res.data
				})
			},
			goAgreement(val) {
				uni.navigateTo({
					url: "/pages/user/agreement?type=" + val
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
	.box {
		padding: 0rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
		min-height: 88vh;

		.item {
			padding: 30rpx 0rpx 10rpx 0rpx;
			border-bottom: 1rpx solid rgba(239, 239, 239, .6);

			.item_lab {
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}

			.item_val {
				font-weight: 700;
				padding: 10rpx 0;
			}

			.item_inp {
				margin-top: 10rpx;
			}
		}

		.agree {
			// padding: 0 30rpx;
			margin-top: 30rpx;

			text {
				color: #3EBCD0;
			}

			/deep/ .u-checkbox__label {
				font-size: 24rpx;
				color: #3EBCD0;
			}
		}
	}

	.btnBox {
		width: 100%;
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
	}

	.u-btn {
		width: 90%;
		border-radius: 10rpx;
		background: rgb(64, 149, 229);
	}

	.list {
		padding: 0rpx 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
		min-height: 85vh;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid rgba(239, 239, 239, .6);

			.item_l {
				font-weight: 700;
			}

			.item_r {
				display: flex;

				.item_r_text {
					margin-right: 10rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}

	.btnBox {
		width: 100%;
		// display: flex;
		// justify-content: center;
		margin-top: 150rpx;
	}

	.u-btn {
		width: 534rpx;
		border-radius: 10rpx;
		background: rgb(64, 149, 229);
		font-size: 30rpx;
		font-weight: 700;
		margin: auto;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}

	.hoverClass {
		background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}
</style>