frontend-app/pages/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="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"/>
		<view class="add_but" @click="addAuthentication">
			提交
		</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>
	</view>
</template>

<script>
	import CommonCard from '@/components/common_card.vue';
	import Header from '@/components/header.vue';
	import { realNameAuthentication } 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:"/static/common/ID_ok.png",
					},{
						id:2,
						title:"边框缺失",
						isOk:false,
						url:"/static/common/ID_error_1.png",
					},{
						id:3,
						title:"照片模糊",
						isOk:false,
						url:"/static/common/ID_error_2.png",
					},{
						id:4,
						title:"闪光强烈",
						isOk:false,
						url:"/static/common/ID_error_3.png",
					}
				],
				certShow:false,
				certOption:[],
				
			}
		},
		methods: {
			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(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_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: calc(100vh - 58rpx);
		background-color: $app-bj;
		padding: 30rpx;
	}
	.cert_{
		display: flex;
		justify-content: space-between;
		width: calc(100% - 170rpx);
		.cert_title{
			margin-left: 30rpx;
			color:#9e9e9ec7
		}
	}
</style>