yangdaxia/pages/set/approve.vue

<template>
	<view class="content">
		<view class="bgimg"><image class="img" src="../../static/img/bgRz.png" mode="widthFix"></image></view>
		<u-form class="user" :model="form" ref="uForm">
			<u-form-item label="姓名"><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">
			<view class="title">上传人脸正面照片</view>
			<view class="imgUp" @click.stop="upImg"><image class="img" :src="form.img || '../../static/img/upImgbg.png'" mode="scaleToFill"></image></view>
		</view>
		<button class="add-btn" @click="pushData('add')">提交</button>
	</view>
</template>

<script>
import { realName } from '@/api/set.js';
export default {
	data() {
		return {
			loding: false, //判断是否在点击中
			form: {
				name: '',
				card: '',
				img: ''
			}
		};
	},
	onLoad(option) {},
	methods: {
		upImg(e) {
			console.log('上传图片');
			const that = this;
			uni.navigateTo({
				url: '/pages/set/cropper',
				events: {
					imgCropped(event) {
						// 监听裁剪完成
						// 返回的 event 中包含了已经裁剪好图片的base64编码字符串
						// 你可以使用 <image :src="imgDataUrl" mode="aspectFit"></image> 组件来展示裁剪后的图片
						// 或者你可以将该字符串通过接口上传给服务器用来保存
						that.$nextTick(function() {
							that.form.img = event.data;
							console.log(that.form.img, '图片');
						});
					}
				},
				fail(e) {
					console.log(e, '错误');
				}
			});
		},
		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 da = this.form;
			if (this.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 = {
				face_image: da.img.replace(/^data:image\/[a-z,A-Z]*;base64,/, ''),
				real_name: da.name,
				id_card: da.card
			};
			uni.showLoading({
				title: '审核中',
				mask: true
			});
			this.loding = true;
			// 上传
			realName(data)
				.then(e => {
					uni.showModal({
						title: '提示',
						content: '实名成功过',
						showCancel: false,
						success: res => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
					});
					uni.hideLoading();
					this.loding = false;
					console.log(e);
				})
				.catch(e => {
					this.loding = false;
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
.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: $bg-green-gradual;
	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: linear-gradient(#4cb1ff, #3081df);
	border-bottom-right-radius: 999999rpx;
	border-bottom-left-radius: 999999rpx;
	.img {
		width: 400rpx;
		margin-top: 50rpx;
	}
}
.user {
	margin-top: -50rpx;
	border-radius: 10rpx;
}
.userBox,
.user {
	box-shadow: 0px 2px 16px 1px rgba(89, 89, 89, 0.24);
	padding: 0 $page-row-spacing;
	background-color: white;
}
.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>