XXxiangmu/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>
		<!-- <image src="../../static/img/renzheng.png" mode=""></image> -->
		
		<u-form class="user" :model="form" ref="uForm">
			<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">
			<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 class="add-btn" @click="pushData('add')">提交</button>
	</view>
</template>

<script>
import { realName } from '@/api/set.js';
import { upload } from '@/api/order.js';
export default {
	data() {
		return {
			loding: false, //判断是否在点击中
			form: {
				name: '',
				card: '',
				img: ''
			},
			upFileLoding:false,
			
		};
	},
	onLoad(option) {},
	methods: {
		upImg(e) {
			const that = this;
			if(that.upFileLoding){
				return
			}
			that.upFileLoding = true;
			setTimeout(()=>{
				that.upFileLoding = false;
			},1000);
			upload({
				filename: ''
			}).then(data => {
				this.form.img = data[0].url;
			}).catch((err)=>{
				console.log(err);
			})
		},
		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 = {
				cidimg: da.img,
				rname: da.name,
				cid: 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);
					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;
	}
}
.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>