xiongmao/pages/my/real-name-certification/real-name-certification.vue

<!-- 实名认证 -->
<template>
	<view class="wrap">
		<view class="label">请上传身份证正反面</view>
		<view class="module-wrap">
			<view class="module">
				<view class="left-sidebar">
					<text>头像面</text>
					<text>上传您的身份证头像面</text>
				</view>
				<view class="right-sidebar" @tap="uploadImg('card_front')">
					<image v-if="params.card_front.length === 0" src="../../../static/add-2.png" class="add-img" mode=""></image>
					<image v-else :src="params.card_front" mode="" class="add-img"></image>
				</view>
			</view>
			<view class="module">
				<view class="left-sidebar">
					<text>国徽面</text>
					<text>上传您的身份证国徽面</text> 
				</view>
				<view class="right-sidebar" @tap="uploadImg('card_back')">
					<image v-if="params.card_back.length === 0" src="../../../static/add-1.png" class="add-img" mode=""></image>
					<image v-else :src="params.card_back" mode="" class="add-img"></image>
				</view>
			</view>
		</view>
		<view class="label">请完善您的个人信息</view>
		<view class="column">
			<view class="row">
				<text class="row-name">真实姓名</text>
				<input type="text" v-model="params.true_name" class="input" placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="row">
				<text class="row-name">身份证号</text>
				<input type="text" v-model="params.id_card" class="input" placeholder="请输入身份证号" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="btn-box">
			<button v-if="info.is_auth == 1" type="default" class="active" disabled>已认证</button>
			<button v-else type="default" class="active" @tap="userCertification()">认证</button>
		</view>
	</view>
</template>

<script>
	import { uploadFiles } from '../../../common/request';
	import { validatorFun } from '../../../common/utils/util';
	import { userCenterUserCertification } from '../../../common/service.js';
	export default {
		data() {
			return {
				info: {},
				params: {
					card_front: '',
					card_back: '',
					true_name: '',
					id_card: '',
				},
			}
		},
		onLoad() {
			this.info = uni.getStorageSync('USER_INFO') || {};
			this.params.card_front = this.info.card_front || '';
			this.params.card_back = this.info.card_back || '';
			this.params.true_name = this.info.true_name || '';
			this.params.id_card = this.info.id_card || '';
			this.info.showPhone = this.info.phone.split('').map((n, i) => i > 2 && i < 7 ? '*' : n).join('');
		},
		methods: {
			userCertification() {
				const params = this.params;
				const errList = validatorFun(params, [
					['card_front', ['notNull', '请上传您的身份证头像面']],
					['card_back', ['notNull', '请上传您的身份证国徽面']],
					['true_name', ['notNull', '请输入姓名']],
					['id_card', ['notNull', '请输入身份证号']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				userCenterUserCertification({
					data: params,
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.info.phone = params.phone;
							uni.setStorageSync('USER_INFO', info);
							this.params = {
								phone: '',
								code: '',
							};
							uni.showModal({
								title: '提示',
								content: '修改成功，请重新登录',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.removeStorageSync('session_key');
										uni.removeStorageSync('USER_INFO');
										uni.reLaunch({
											url: '/pages/index/index',
										});
									}
								}
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					},
				});
			},
			//上传图片
			uploadImg(key){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: res => {
						uploadFiles({
							filePath: res.tempFilePaths[0],
							success: res => {
								const data = JSON.parse(res.data);
								console.log(data);
								if (res.statusCode === 200 && data.code == 1) {
									this.params[key]= data.data;
								} else {
									uni.showToast({
										icon: 'none',
										title: data.msg || res.msg,
									});
								}
							}
						});
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./real-name-certification.css";
</style>