sooka_consult_uniapp/pages/me/nameAuthentication/nameAuthentication.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="name">
          <uni-easyinput v-model="form.name" placeholder="请输入姓名" maxlength="20" :disabled="disabled"/>
        </uni-forms-item>
        <uni-forms-item label="电话" required name="phone">
          <uni-easyinput v-model="form.phone" placeholder="请输入电话" maxlength="13" :disabled="disabled"/>
        </uni-forms-item>
        <uni-forms-item label="身份证号" required name="idCard">
          <uni-easyinput v-model="form.idCard" placeholder="请输入身份证号" maxlength="18" :disabled="disabled"/>
        </uni-forms-item>
        <uni-forms-item label="身份证正反面" required v-if="form.id != null" class="onePic">
          <image :src="loadImgSrcLocalhost(item)" v-for="(item, index1) in imageList" :key="index1" class="cardPic">
          </image>
        </uni-forms-item>
        <uni-forms-item label="身份证正反面" required name="path" v-if="form.id == null" label-width="320">
          <upload :imgArr="imageList" name="path" v-model="form.path" :fileSize="1" :limit="2"
                  style="position: relative;left: 3%;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/nameAuthentication.js'

export default {
  components: {
    upload
  },
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.customForm.setRules(this.customRules)
    this.userId = getApp().globalData.userId
    this.getUserInfoByUserId(this.userId)
  },
  data() {
    return {
      disabled: false,
      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.disabled = true;
          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 .item--uni-forms-item__label text{
	width: fit-content;
	white-space: nowrap;
}
	
::v-deep .uni-section-content {
  padding: 0 2%;
}

::v-deep .uni-forms .uni-forms-item__label:nth-child(4) {
  width: 26% !important;
}

/* ::v-deep .easyinput--uni-easyinput{
  margin-left: 10%;
} */
.cardPic{
	display: inline-block;
	width: 120px;
	height: 85px;
}
.cardPic:nth-child(1){
	margin-left: 10%;
}
</style>