jje_uniapp/myPages/realNameAuth/index.vue

<template>
  <view class="keep-on-record-wrap">
    <!-- 提示内容 -->
    <u-toast ref="uToast" />

    <view class="keep-on-record-content">
      <view class="container">
        <view class="login-wrap">
          <view class="login-form">
            <u--form
                labelPosition="left"
                :model="userRealNameAuth"
                :rules="rules"
                ref="form1"
            >
              <u-form-item
                  label="真实姓名"
                  prop="name"
                  labelWidth="auto"
                  labelAlign="right"
              >
                <u--input
                    v-model="userRealNameAuth.name"
                    placeholder="请输入真实姓名"
                    border="bottom"
                    type="text"
                    maxlength="11"
                ></u--input>
              </u-form-item>
              <u-form-item
                  labelWidth="auto"
                  labelAlign="right"
                  label="身份证号"
                  prop="idCard"
                  width="120"
              >
                <u--input
                    v-model="userRealNameAuth.idCard"
                    disabledColor="#ffffff"
                    placeholder="请输入身份证号"
                    border="bottom"
                    maxlength="20"
                ></u--input>
              </u-form-item>
            </u--form>
          </view>
        </view>

        <!-- 保存备案信息 -->
        <view class="uploadBox">
          <view  v-if="userRealNameAuth.isAudit != 1" @click="saveUserRealNameAuth" class="leftBtn text-white text-lg text-center">下一步</view>
          <view  v-else  class="leftBtn text-white text-lg text-center">审核中不允许修改</view>
        </view>

      </view>
    </view>

    <view class="footer"></view>

  </view>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      reqParm: {
        auth: true,
        ossId: null,
      },
      userRealNameAuth: {
        auth: true,
        idCard: '',
        idCardBack: '',
        idCardFront: '',
        idCardBackUrl: '',
        idCardFrontUrl: '',
        name: ''
      },
      userInfo: {

      },
      list1: [
        '隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'
      ],
      imgUrl1: '',
      imgUrl2: '',
      show: false,
      list: [
      ],
      rules: {
        name:  [
          {
            required: true,
            min: 1,
            max: 12,
            message: '请输入姓名',
            trigger: ['blur', 'change'],
          },
          {
            // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            validator: (rule, value, callback) => {
              // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
              return !this.$isDataEmpty(value);
            },
            message: "请认真填写姓名",
            trigger: ['blur', 'change'],
          }
        ],
        idCard: [
          {
            required: true,
            message: '请输入身份证号',
            trigger: ['blur', 'change'],
          },
          {
            // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            validator: (rule, value, callback) => {
              // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
              return this.$u.test.idCard(value);
            },
            message: "请认真填写身份证号",
            trigger: ['blur', 'change'],
          }
        ],
      },
    }
  },
  onReady() {
    // 初始化静音验证
    this.$refs.form1.setRules(this.rules)

    // 用户信息
    let user = uni.getStorageSync('userInfo');
    console.log(user,'22222222222222')
    this.userRealNameAuth.name = user.name;
    this.userRealNameAuth.idCard = user.idCard;
  },
  onLoad(option) {

  },
  methods: {
    // 保存实名信息
    saveUserRealNameAuth(){
      let that = this;
      that.$refs.form1.validate().then(res => {
        // 保存数据
        this.$api.userRealNameAuth(this.userRealNameAuth).then((res)=>{
          console.log(res)
          // 刷新用户信息
          uni.setStorageSync('userInfo',res.data.data)

          uni.showToast({
            title: "操作成功"
          })

          setTimeout(()=>{
            uni.navigateBack({
              data:1,
            })
          },1000)


        }).catch((err) =>{
          uni.showToast({
            icon:'error',
            title: err
          })
        });
      }).catch(errors => {
        uni.$u.toast('校验失败,请认真填写')
      })
    },

  }
}
</script>

<style scoped lang="scss">
page,body{
  background: #fff;
}
.login-wrap {
  display: flex;
  justify-content: center;
  .login-form{
    width: 90%;
  }
  .account{
    display: flex;
  }
  .identifying-code{
  }
}

.h-input-wrap{
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  align-items: center;
  height: 40px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 14px;
  .h-name{
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    margin-right: 6px;
  }
  .input-style{
    border-radius: 4px;
    font-weight: 400;
    color: #999999;
    line-height: 22px;
    font-size: 14px;
  }
}

page{
  background: #F8F8F8;
}

.keep-on-record-wrap{
  width: 96%;
  margin: 0 auto;
  color: #676767;
}
.keep-on-record-content{
  margin-top: 12px;
}

.container {
  height: 100%;
}

// 图片上传
.uploadBox {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
  margin-top: 12px;
  .leftBtn {
    height: 42px;
    background: #FFE05C;
    border-radius: 27px;
    color: #333333;
    line-height: 42px;
    margin-top: 12px;
    width: 680rpx;
  }

  .uploadItem {
    width: 100%;
    height: 198px;
    border-width: 1px;
    border-style: dashed;
    border-color: #999;
    .imgUrl {
      width: 100%;
      height: 100%;
    }
  }
  .h-desc{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 50px;
    text-align: center;
  }

  .bg-img1{
    background-image: url('https://jje.admin.xinyuekj.com.cn/static/me/u11.png');
    background-size: cover;
    background-repeat: repeat;
  }
  .bg-img2{
    background-image: url("https://jje.admin.xinyuekj.com.cn/static/me/u12.png");
    background-size: cover;
    background-repeat: repeat;
  }
}

/* 底部 */
.footer{
  margin-top: 30px;
  height: 160px;
  font-size: 12px;
  text-align: center;
  color: #666;
}
</style>