sooka_consult_uniapp/pages/me/officialAuthentication/officialAuthentication.vue

<template>
    <uni-section title="官方认证" type="line">
        <view class="example">
            <!-- 自定义表单校验 -->
            <uni-forms ref="customForm" :rules="customRules" :modelValue="form" class="form">
                <uni-forms-item label="企业名称" required name="enterpriseName">
                    <uni-easyinput v-model="form.enterpriseName" placeholder="请输入企业名称" maxlength="20" style="width: 40%;"/>
                </uni-forms-item>
                <uni-forms-item label="法人姓名" required name="legalName">
                    <uni-easyinput v-model="form.legalName" 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 class="onePic" v-if="form.id != null">
					<image :src="loadImgSrcLocalhost(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"
					style="position: relative;left: -5%;top: -10%;"
                            @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/officialAuthentication.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: {
                    enterpriseName: {
                        rules: [{
                            required: true,
                            errorMessage: '企业名称不能为空'
                        }]
                    },
                    legalName: {
                        rules: [{
                            required: true,
                            errorMessage: '法人姓名不能为空'
                        }]
                    },
                    phone: {
                        rules: [{
                            required: true,
                            errorMessage: '联系电话不能为空'
                        },
						{
						  pattern:'^1[3456789]\\d{9}$',
						  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 scoped>
	.form{
		width: 100%;
		padding-left: 3%;
	}
	::v-deep .item--uni-forms-item__label{
		width: 19% !important;
	}
	::v-deep .uni-section-content{
		padding: 0 2%;
	}
</style>