xc/pages/user/approve.vue

<template>
	<view class="content">
		<view class="bgimg">
			<image class="img" src="https://zhibo.liuniu946.com/img/bgRz.png" mode="widthFix"></image>
		</view>
		<u-form class="user" :model="form" ref="uForm" v-if="!upDataLoding">
			<u-form-item label="姓名" label-width="150"><u-input v-model="form.name"
					placeholder="请输入真实姓名" /></u-form-item>
			<u-form-item label="身份证号" label-width="150"><u-input placeholder="请输入身份证号"
					v-model="form.card" /></u-form-item>
		</u-form>
		<!-- <view class="userBox" v-if="!upDataLoding">
			<view class="title">上传身份证照片</view>
			<view class="imgUp" @click.stop="upImg()">
				<image class="img" :src="form.img || '../../static/img/sfz.png'" mode="scaleToFill"></image>
			</view>
		</view> -->
		<button v-if="!upDataLoding" class="add-btn" @click="pushData('add')">提交</button>
		<view v-else class="titleType">
			<text v-if="renus">
				已通过实名认证
			</text>
			<text v-else>
				已提交资料请等待审核结果
			</text>
		</view>
		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
		<uni-popup ref="popup" type="center">
			<view class="alertprogress">
			{{progress}}%
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		realName,
		checkUser
	} from '@/api/set.js';
	import {
		rate
	} from '@/api/user.js';
	import {
		upload
	} from '@/api/order.js';
	// #ifdef APP
	const aliyunVerify = uni.requireNativePlugin('AP-FaceDetectModule');
	// #endif
	// #ifdef H5
	import {
		mapState,
	} from 'vuex';
	// #endif
	export default {
		data() {
			return {
				loding: false, //判断是否在点击中
				form: {
					name: '',
					card: '',
					// img: ''
				},
				upFileLoding: false, //防止上传图片时多次重复点击
				upDataLoding: false, //判断是否上传过数据
				renus: false, //判断是否已经通过实名认证
				canvasStatus: false,
				canvasWidth:0,
				canvasHeight:0,
				progress:0,
			};
		},
		onLoad(option) {
			this.init();
		},
		// #ifdef H5
		computed: {
			...mapState(['baseURL', 'urlFile'])
		},
		// #endif
		methods: {
			init() {
				const that = this;
				uni.showLoading({
					title: '数据获取中',
					mask: true
				});
				// 获取数据判断是否已经验证过
				rate({})
					.then(e => {
						// 如果已经提交数据跳转验证页
						if (e.data.is_auth == 1) {
							that.upDataLoding = true;
							console.log(1);
							that.getYz();
						} else {
							uni.hideLoading()
						}
						if (e.data.is_auth == 2) {
							that.upDataLoding = true;
							that.renus = true;
							that.$api.msg('已通过实名认证');
						}
						if (e.data.is_auth == 3) {
							that.$api.msg(e.data.off);
						}
					})
					.catch(e => {
						uni.hideLoading()
					});

			},
			// 获取验证
			getYz() {
				const that = this;
				// #ifdef H5
				let metaInfo = JSON.stringify(window.getMetaInfo());
				let router = getApp().$router;
				// 判断是否真实路由模式
				const type = router.mode === "history" ? '' : '/#';
				// #endif
				// #ifdef APP
				let metaInfo = aliyunVerify.getMetaInfo();
				let p = uni.getSystemInfoSync().platform;
				if (p === "ios") {
					metaInfo = JSON.stringify(metaInfo);
				}
				// #endif
				checkUser({
					metaInfo: metaInfo,
					// #ifdef H5
					url: that.baseURL + that.urlFile + type + '/pages/user/approve'
					// #endif
				}).then(({
					data
				}) => {
					uni.hideLoading()
					// #ifdef H5
					window.location.href = data.url + ""
					// #endif
					// #ifdef APP
					that.aliyunVerify(data.id)
					// #endif
					console.log(data, 'data');
				}).catch((err) => {
					uni.hideLoading()
				})
			},
			// #ifdef APP
			// 调用刷脸认证
			aliyunVerify(id) {
				const that = this;
				aliyunVerify.verify({
						"certifyId": id, // 填写从服务端获取的certifyId
					},
					function(res) {
						if (res.code == 1000) {
							uni.showLoading({
								title: '刷脸成功，等待通过',
								mask: true
							});
							setTimeout(() => {
								that.init();
							}, 3000)
						} else {
							if (res.code == 1001) {
								uni.showModal({
									title: '提示',
									content: '系统错误请重启APP重新验证',
									showCancel: false,
								});
							}
							if (res.code == 1003) {
								uni.showModal({
									title: '提示',
									content: '验证取消是否重新验证？',
									success: re => {
										if (re.confirm) {
											that.aliyunVerify(id)
										}
									},
								});
							}
							if (res.code == 2002) {
								uni.showModal({
									title: '提示',
									content: '网络错误请检查是否开启网络连接',
									showCancel: false,
								});
							}
							if (res.code == 2003) {
								uni.showModal({
									title: '提示',
									content: '设备时间错误，请校验时候后重试',
									showCancel: false,
								});
							}
							if (res.code == 2006) {
								uni.showModal({
									title: '提示',
									content: '刷脸失败，是否重试？',
									success: re => {
										if (re.confirm) {
											that.aliyunVerify(id)
										}
									},
								});
							}
						}

					}
				);
			},
			// #endif
			upImg(e) {
				const that = this;
				if (that.upFileLoding) {
					return
				}
				that.upFileLoding = true;
				setTimeout(() => {
					that.upFileLoding = false;
				}, 1000);
				that.canvasStatus = true;
				upload({
					filename: ''
				}, (res) => {
					this.form.img = res[0].url;
					that.canvasStatus = false
				}, (res) => {
					that.canvasStatus = false
				}, (res) => {
					that.canvasWidth = res.w
					that.canvasHeight = res.h
				},(res)=>{
					// console.log(res,'res');
					if(res.progress==100){
						this.$refs.popup.close()
						uni.showToast({
							title: '上传成功'
						});
					}else if(res.progress==0){
						this.$refs.popup.open()
					}
					that.progress = res.progress;
					// console.log(res,'进度条');
				})
			},
			ToIndex() {
				let obj = this;
				let ur = uni.getStorageSync('present') || '/pages/index/index';
				// 用于处理缓存bug
				if (ur == 'pages/product/product') {
					ur = '/pages/index/index';
				}
				uni.switchTab({
					url: ur,
					fail(e) {
						uni.navigateTo({
							url: ur,
							fail(e) {
								uni.navigateTo({
									url: '/pages/index/index'
								});
							}
						});
					}
				});
			},
			pushData() {
				const that = this;
				const da = that.form;
				// 判断是否已经提交过数据
				if (that.upDataLoding) {
					that.init();
					return
				}
				if (that.loding) {
					return;
				}
				if (!da.name) {
					uni.showModal({
						title: '提示',
						content: '请填写真实姓名',
						showCancel: false
					});
					return;
				}
				if (!da.card) {
					uni.showModal({
						title: '提示',
						content: '请填写身份证',
						showCancel: false
					});
					return;
				}
				// if (!da.img) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请选择图片',
				// 		showCancel: false
				// 	});
				// 	return;
				// }
				const data = {
					// cidimg: da.img,
					rname: da.name,
					cid: da.card
				};
				uni.showLoading({
					title: '审核中',
					mask: true
				});
				that.loding = true;
				// 上传
				realName(data)
					.then(e => {
						// 判断是否已经上传过数据
						that.upDataLoding = true;
						that.getYz();
						that.loding = false;
						console.log(e);
					})
					.catch(e => {
						that.loding = false;
						console.log(e);
						uni.hideLoading();
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		padding: 0 $page-row-spacing;
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: $font-lg;
		color: #fff;
		background: #ff0000;
		border-radius: 10rpx;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.bgimg {
		text-align: center;
		width: 1200rpx;
		margin-left: -260rpx;
		height: 400rpx;
		background: #ff0000;
		border-bottom-right-radius: 999999rpx;
		border-bottom-left-radius: 999999rpx;

		.img {
			width: 400rpx;
			margin-top: 50rpx;
		}
	}

	.titleType {
		margin-top: -250rpx !important;
		text-align: center;
		color: #FFF;
		font-size: $font-lg;
		text-shadow: 4rpx 4rpx 6rpx #666;
		letter-spacing: 0.5em;
		font-weight: bold;

	}

	.user {
		margin-top: -100rpx !important;
		border-radius: 10rpx !important;
		padding: 0 30rpx;
	}

	.userBox,
	.user {
		box-shadow: 0px 2px 16px 1px rgba(89, 89, 89, 0.24) !important;
		background-color: white !important;
	}

	.userBox {
		margin-top: 20rpx;
		padding: 30rpx;

		.imgUp {
			min-height: 100rpx;
			text-align: center;
			margin-top: 30rpx;

			.img {
				width: 300rpx;
				height: 400rpx;
			}
		}
	}

	.imglist /deep/ * {
		margin-left: auto !important;
		margin-right: auto !important;
	}
</style>