hh-szyl-face/pages/index/index.vue

<template>
	<view class="container">
		<view class="title-card">苏州园林刷脸极速入园</view>
		<view class="title"></view>	
		<view class="grid-layout">
			<view class="grid-item">
				<image src="/static/index-grid1.png" style="width: 47rpx;height: 47rpx;"></image>
				<text>1秒极速入园</text>
			</view>
			<view class="grid-item">
				<image src="/static/index-grid2.png" style="width: 47rpx;height: 47rpx;"></image>
				<text>无需扫码</text>
			</view>
			<view class="grid-item">
				<image src="/static/index-grid3.png"></image>
				<text>无需刷证</text>
			</view>
		</view>
		<view style="margin-top: 56rpx;" @click="openDaoLan">
			<image src="/static/img-daolan.png" style="width: 654rpx;height: 80rpx;"></image>
		</view>
		<view class="prompt-layout">
			<view class="prompt-title">注意事项：</view>
			<view class="prompt-item">
				* 根据景区要求，开通刷脸功能需要具备公安部人脸实名认证资质，如您<text style="color: rgba(241, 127, 82, 1);">开通失败</text>，请走<text style="color: rgba(22, 119, 255, 1);letter-spacing: 0;">刷码 / 刷证通道。</text>
			</view>
			<view class="prompt-item">
				* 如您的亲友没有支付宝，可以在下方点击<text style="color: rgba(22, 119, 255, 1);">代他人开通</text>，输入身份信息即可完成开通。14周岁以下儿童或者非大陆籍公民请走人工通道。
			</view>
		</view>
		<view style="flex: auto;"></view>
		<button class="btn blue" type="primary" @click="authClick">自己开通</button>
		<button class="btn blue" type="primary" style="margin-top: 50rpx;line-height: 1;" @click="openOther">代他人开通<view style="font-size: 20rpx; margin-top: 6rpx;letter-spacing: 0;">（亲友便捷开通）</view></button>
		<view style="flex: none;height: 80rpx;"></view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		request
	} from '@/utils/request'
	import {
		formatTime
	} from '@/utils/util.js'
	import {
		getZFBThree
	} from '@/utils/zfbThree.js'
	import {
		iotVspInit,
		iotVspUniqueId
	} from '@/utils/ioTVsp'
	export default {
		data() {
			return {
				// authTaskId: null
			}
		},
		onLoad() {
			// uni.onAppShow(this.onAppShowHandler)
			let launchOptions = uni.getLaunchOptionsSync()
			if(!launchOptions.query) {
			  launchOptions = uni.getEnterOptionsSync()
			}
			if(launchOptions.query && launchOptions.query.lotsmall) {
				const that = this
				setTimeout(() => {
				  that.openDaoLan()
				}, 300)
			}
		},
		// onUnload: function() {
		// 	my.offAppShow(this.onAppShowHandler)
		// },
		onReady() {
			iotVspInit((res) => {
				my.navigateBack()
				if (res.success) {
					setTimeout(() => {
						my.navigateBack()
						uni.showModal({
							title: '提示',
							content: '恭喜您,已成功开通快速刷脸通行!',
							showCancel: false
						})
					}, 1000)
				}
			})
		},
		methods: {
			openOther() {
				uni.navigateTo({
					url: '/pages/index/open'
				})
			},
			// 跳转到720导览网页
			openDaoLan() {
				my.ap.openURL({
					url: 'https://wap.lotsmall.cn/vue/custompage?id=37912&m_id=1939',
					success: (res) => {},
					fail: (err) => {}
				})
			},
			authClick: _.throttle(function() {
				// const taskId = `${parseInt((Math.random() * 9 + 1) * 10000)}${formatTime(Date.now(), "YYYYMMDDHHNNSS")}${parseInt((Math.random() * 9 + 1) * 10000)}`
				// this.authTaskId = taskId
				// my.navigateToMiniProgram({
				// 	appId: getApp().globalData.authAppId,
				// 	path: 'pages/authorize_three/authorize_three',
				// 	query: {
				// 		name: '苏州园林核验服务',
				// 		notify: null,
				// 		token: getApp().globalData.authAppToken,
				// 		taskId: this.authTaskId
				// 	}
				// })
				getZFBThree((res) => {
					if(res.code === 200) {
						iotVspUniqueId(res.data.idNumber, res.data.username, res.data.phone, res.data.avatar)
							.then((res) => {
								if (res) {
									uni.showModal({
										title: "提示",
										content: '您已开通快速刷脸通行!',
										showCancel: false
									})
								} else {
									// uni.showModal({
									// 	title: "提示",
									// 	content: '人脸已入库失败!',
									// 	showCancel: false
									// })
								}
							})
					} else {
						my.alert({
							title: '提示',
							content: '身份信息获取失败!'
						})
					}
				})
			}, 2000),
			// onAppShowHandler(options) {
			// 	if (options && options.referrerInfo) {
			// 		// 从三要素认证返回
			// 		if (options.referrerInfo.appId === getApp().globalData.authAppId && options.referrerInfo.extraData) {
			// 			const authStatus = options.referrerInfo.extraData.authStatus
			// 			const authTaskId = this.authTaskId
			// 			this.authTaskId = null
			// 			if (authStatus) {
			// 				this.zfbAuthCallback(authTaskId)
			// 			} else {
			// 				uni.showModal({
			// 					title: '提示',
			// 					content: '操作失败,请重试',
			// 					showCancel: false
			// 				})
			// 			}
			// 		}
			// 	}
			// },
			// async zfbAuthCallback(authTaskId) {
			// 	uni.showLoading({
			// 		content: "加载中..."
			// 	})
			// 	request({
			// 		url: 'https://tx.hz-hanghui.com:8088/hanghui-server-platform/api/v1/alipay/user/query',
			// 		method: 'POST',
			// 		data: {
			// 			taskId: authTaskId,
			// 			token: getApp().globalData.authAppToken
			// 		},
			// 		dataType: 'json',
			// 		header: {
			// 			'Content-type': 'application/json'
			// 		},
			// 		success: result => {
			// 			uni.hideLoading()
			// 			/**
			// 			 * certNo 身份证号
			// 			 * certName 姓名
			// 			 * phone  手机号
			// 			 */
			// 			if (result.errcode) {
			// 				uni.showModal({
			// 					title: "提示",
			// 					content: "未查询到认证结果,请重新认证!",
			// 					showCancel: false
			// 				})
			// 				return
			// 			}
			// 			if (!result.data || !result.data.token) {
			// 				uni.showModal({
			// 					title: "提示",
			// 					content: result.msg,
			// 					showCancel: false
			// 				})
			// 				return
			// 			}
			// 			iotVspUniqueId(result.data.certNo, result.data.certName, result.data.phone, null)
			// 				.then((res) => {
			// 					if (res) {
			// 						uni.showModal({
			// 							title: "提示",
			// 							content: '您已开通快速刷脸通行!',
			// 							showCancel: false
			// 						})
			// 					} else {
			// 						// uni.showModal({
			// 						// 	title: "提示",
			// 						// 	content: '人脸已入库失败!',
			// 						// 	showCancel: false
			// 						// })
			// 					}
			// 				})
			// 		},
			// 		fail: res => {
			// 			uni.hideLoading()
			// 		}
			// 	})
			// }
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index-head-bg.png'), url('/static/main-bg.jpg');
		background-position: left top, left top;
		background-repeat: no-repeat, no-repeat;
		background-size: 100% 440rpx, 100% 100%;
	}

	.container .title-card {
		letter-spacing: 0;
		width: 700rpx;
		height: calc(284rpx - 32rpx);
		text-align: center;
		padding-top: 32rpx;
		margin-top: 200rpx;
		font-size: 48rpx;
		color: rgba(22, 119, 255, 1);
		font-weight: 700;
		background-image: url('/static/index-title-card.png');
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.container .title {
		width: 654rpx;
		height: 370rpx;
		margin-top: -160rpx;
		font-size: 36rpx;
		background-image: url('/static/index-title.png');
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	
	.container .grid-layout {
		margin-top: 36rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.container .grid-layout .grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.container .grid-layout .grid-item image {
		width: 60rpx;
		height: 60rpx;
	}
	.container .grid-layout .grid-item text {
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-weight: 400;
		margin-top: 6rpx;
		letter-spacing: 0;
	}
	
	.container .prompt-layout {
		width: calc(670rpx - 32rpx);
		margin-top: 8rpx;
		border-radius: 6rpx;
		padding: 20rpx 16rpx 16rpx;
		background-color: rgba(216, 216, 216, 0.5);
	}
	.container .prompt-layout .prompt-title {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(93, 107, 106, 1);
		letter-spacing: 2rpx;
	}
	.container .prompt-layout .prompt-item {
		margin-top: 16rpx;
		font-weight: 400;
		font-size: 25rpx;
		color: rgba(93, 107, 106, 1);
		line-height: 1.5;
		letter-spacing: 1rpx;
	}

	.container .btn {
		width: 474rpx;
		height: 98rpx;
		border: none;
		border-radius: 16rpx;
		overflow: hidden;
		font-size: 40rpx;
		font-weight: 500;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		letter-spacing: 2rpx;
	}

	.container .blue {
		background-color: rgba(22, 119, 255, 1);
	}
</style>