frontend-app/pages/mine_package/mine_authentication/mine_authentication.vue

<template>
	<view class="authentication_warp">
		<Header :leftTitle="$t('authentication.title')" left-path-type="switchTab" left-path="/pages/mine/mine">
		</Header>
		<view class="content_warp">
			<view class="data_common_warp">
				<view class="data_msg">请填写用户本人得相关信息</view>
				<view class="'add_form_item add_form_item_but'" v-for="item in formList" :key="item.id">
					<view class="add_form_title">{{ item.title }}</view>
					<up-input :placeholder="item.placeholder" border="surround" v-model="form[item.formName]"
						:customStyle="inputCss" :type="item.type"></up-input>
				</view>
				<view class="add_form_item">
					<view class="add_form_title">证件类型</view>
					<view class="cert_" @click="certShowCheck(true)">
						<view class="cert_title">{{ form.certName || '请选择' }}</view>
						<up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
					</view>
				</view>
			</view>
			<!-- 证件照 -->
			<CommonCard @valueFunc="getValue" :Fimg="form.certFimg" :Bimg="form.certBimg" />
		</view>
		<view class="add_but" @click="addAuthentication">
			{{ userInfo && userInfo.certStatus ? '重新提交' : '提交' }}
		</view>
		<up-picker :show="certShow" :columns="[CERT_OPTION]" keyName="value" itemHeight="34" @confirm="certConfirm"
			@cancel="certShow = false" @close="certShow = false"></up-picker>
		<up-toast ref="uToastRef"></up-toast>
	    <qiaobao-assistant page-key="pages/mine_package/mine_authentication/mine_authentication" title="实名认证" />
</view>
</template>

<script>
import CommonCard from '@/components/common_card.vue';
import Header from '@/components/header.vue';
import { realNameAuthentication, getUserInfo } from '@/api/auth.js';
import { CERT_OPTION } from '@/utils/enumUtils.js';

export default {
	computed: {
		CERT_OPTION() {
			return CERT_OPTION;
		},
	},
	components: { CommonCard, Header },
	data() {
		return {
			inputCss: {
				"height": '80rpx',
				"border-radius": "30rpx",
				"border": "0rpx",
			},
			form: {
				name: null,
				certType: null,// 证状证件类型：1-居民身份证，2-护照
				certName: null,
				certNo: null,// 证件号码
				certFimg: null,// 证件正面照片
				certBimg: null,// 证件背面照片
			},
			formList: [
				{
					id: 1,
					title: "真实姓名",
					formName: "name",
					placeholder: "请输入您的真实姓名",
					type: "text",
				}, {
					id: 3,
					title: "证件号码",
					formName: "certNo",
					placeholder: "请输入证件号码",
					type: "text",
				}
			],
			uploadTemplList: [
				{
					id: 1,
					title: "标准",
					isOk: true,
					url: "https://static.tbmall.xin/static/ID_ok.png",
				}, {
					id: 2,
					title: "边框缺失",
					isOk: false,
					url: "https://static.tbmall.xin/static/ID_error_1.png",
				}, {
					id: 3,
					title: "照片模糊",
					isOk: false,
					url: "https://static.tbmall.xin/static/ID_error_2.png",
				}, {
					id: 4,
					title: "闪光强烈",
					isOk: false,
					url: "https://static.tbmall.xin/static/ID_error_3.png",
				}
			],
			certShow: false,
			certOption: [],
			userInfo: null

		}
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			this.getUserInfo();
		},
		async getUserInfo() {
			const result = await getUserInfo();
			if (result && result.bizcode === 100) {
				const data = result.data;
				this.userInfo = result.data || {};
				this.form = {
					name: this.userInfo.name,
					certNo: this.userInfo.certNo,
					certType: this.userInfo.certType != null ? this.userInfo.certType : 1,
					certName: this.userInfo.certType == 2 ? '护照' : '居民身份证',
					certFimg: this.userInfo.certFimg,
					certBimg: this.userInfo.certBimg,
				}

			}
		},
		async addAuthentication() {
			const params = {
				...this.form
			}
			if (!params.name) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入您的真实姓名",
				});
				return;
			}

			if (!params.certType) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请选择证件类型",
				});
				return;
			}
			if (!params.certNo) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入证件号码",
				});
				return;
			}
			if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(params.certNo)) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入正确的证件号码",
				});
				return;
			}
			if (params.certFimg.length === 0) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请上传证件正面照片",
				});
				return;
			}
			if (params.certBimg.length === 0) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请上传证件背面照片",
				});
				return;
			}
			console.log("params", params);
			const resp = await realNameAuthentication(params);
			if (resp && resp.bizcode === 100) {
				uni.navigateTo({
					url: '/pages/mine_package/mine_authentication_ok/mine_authentication_ok',
				})
			}
		},
		// 提交地址
		certConfirm(e) {
			const {
				columnIndex,
				value,
				values,
				index,
			} = e;
			const data = value[0];
			this.form.certType = data.key;
			this.form.certName = data.value;
			this.certShowCheck(false);
		},
		// 选择银行的弹框
		async certShowCheck(status) {
			this.certShow = status;
		},
		getValue(type, value) {
			if (type === "Z") {
				this.form.certFimg = value;
			} else if (type === "F") {
				this.form.certBimg = value;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.authentication_warp {
	height: 100%;
	// height: calc(100vh - 158rpx);
	background-color: $app-bj;
	padding: 0 30rpx;
	display: flex;
	flex-direction: column;

	.content_warp {
		flex: 1;
		overflow-y: scroll;
	}
}

.cert_ {
	display: flex;
	justify-content: space-between;
	width: calc(100% - 170rpx);

	.cert_title {
		margin-left: 30rpx;
		color: #9e9e9ec7
	}
}

.add_but {
	position: relative;
	width: 100%;
}
</style>