sooka_consult_uniapp/pages/me/nameAuthentication.vue

<template>
    <uni-section title="实名认证" type="line">
        <view class="example">
            <!-- 自定义表单校验 -->
            <uni-forms ref="customForm" :rules="customRules" :modelValue="form">
                <uni-forms-item label="姓名" required name="name">
                    <uni-easyinput v-model="form.name" placeholder="请输入姓名" maxlength="20"/>
                </uni-forms-item>
                <uni-forms-item label="电话" required name="phone">
                    <uni-easyinput v-model="form.phone" placeholder="请输入电话" maxlength="13"/>
                </uni-forms-item>
                <uni-forms-item label="身份证号" required name="idCard">
                    <uni-easyinput v-model="form.idCard" placeholder="请输入身份证号" maxlength="18"/>
                </uni-forms-item>
				<uni-forms-item label="身份证正反面" required class="onePic" v-if="form.id != null">
					<image :src="loadImgSrc(item)" v-for="(item, index1) in imageList" :key="index1">
					</image>
				</uni-forms-item>
                <uni-forms-item label="身份证正反面" required name="path" v-if="form.id == null">
                    <upload :imgArr="imageList" name="path" v-model="form.path" :fileSize="1" :limit="2"
                            @updateImg="updateImg"></upload>
                </uni-forms-item>
            </uni-forms>
            <button type="primary" @click="submitForm('customForm')" v-if="form.id==null">提交</button>
        </view>
    </uni-section>
</template>

<script>
    import upload from '../../components/upload/index.vue'
    import {appletAdd,getUserInfo} from '@/api/me/nameAuthentication.js'

    export default {
        components: {
            upload
        },
        onReady() {
            // 设置自定义表单校验规则，必须在节点渲染完毕后执行
            this.$refs.customForm.setRules(this.customRules)
			this.userId = getApp().globalData.userId
			this.getUserInfoByUserId(this.userId)
        },
        data() {
            return {
                form: {},
                // 表单校验
                customRules: {
                    name: {
                        rules: [{
                            required: true,
                            errorMessage: '姓名不能为空'
                        }]
                    },
                    phone: {
                        rules: [{
                            required: true,
                            errorMessage: '电话不能为空'
                        },
						{
						  pattern:'^1[3456789]\\d{9}$',
						  errorMessage: '请填写正确的手机号'
						}]
                    },
                    idCard: {
                        rules: [{
                            required: true,
                            errorMessage: '身份证号不能为空'
                        },
						{
						  pattern: '/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/',
						  errorMessage: '请填写正确的身份号'
						}]
                    },
                    path: {
                        rules: [{
                            required: true,
                            errorMessage: '身份证正反面不能为空'
                        }]
                    },
                },
                imageList: []
            }
        },
        methods: {
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            /** 提交按钮 */
            submitForm(e) {
				this.$refs[e].validate().then(res => {
					if(this.imageList.length!=2){
						uni.showToast({
							title: "身份证正反面照片为两张！",
							icon: "none"
						})
					}else{
						appletAdd(this.form).then(res => {
							uni.navigateBack();
						});
					}
				})
            },

			//图片上传
            updateImg(imgList) {
                this.imageList = imgList;
                this.form.path = this.imageList.join(',');
            },
			
			//按userId查询实名认证信息
			getUserInfoByUserId(userId){
				getUserInfo(userId).then(res =>{
					if(res.data!=null){
						this.form = res.data;
						this.imageList = res.data.path.split(",")
					}
					
				})
			}
        }
    };
</script>

<style>
</style>