jiliangxiaochengxu/components/personRegistered/authorizer.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="color: #3c9cff" class="informationTitle">填写个人信息</view>

    <view class="informationContent">
      <view class="contentItems">
        <u-form ref="uForm" labelWidth="140" :model="form" labelPosition="top">
          <view class="content">
            <u-form-item
              :required="true"
              style="border-bottom: 1px solid rgb(242, 242, 242)"
              label="身份证号"
              prop="idNum"
            >
              <u-input
                @blur="handleUpadteSync('idNum')"
                v-model="form.idNum"
                placeholder="请输入身份证号"
              ></u-input>
            </u-form-item>
          </view>
          <view class="content">
            <u-form-item
              :required="true"
              style="border-bottom: 1px solid rgb(242, 242, 242)"
              label="真实姓名"
              prop="name"
            >
              <u-input
                @blur="handleUpadteSync('name')"
                v-model="form.name"
                placeholder="请输入名字"
              ></u-input>
            </u-form-item>
          </view>

          <view class="content">
            <u-form-item
              :required="true"
              style="border-bottom: 1px solid rgb(242, 242, 242)"
              label="用户名"
            >
              <!-- <view class="message">{{
                formdData.personCardOrcResult.idNum
              }}</view> -->
              <u-input
                disabled
                :value="formdData.personCardOrcResult.idNum"
              ></u-input>
            </u-form-item>
          </view>

          <view class="content">
            <u-form-item
              :required="true"
              style="border-bottom: 1px solid rgb(242, 242, 242)"
              label="密码"
              prop="pwd"
            >
              <u-input
                type="password"
                @blur="handleUpadteSync('pwd')"
                v-model="form.pwd"
                placeholder="请输入密码"
              ></u-input>
            </u-form-item>
          </view>

          <view class="content">
            <u-form-item
              :required="true"
              style="border-bottom: 1px solid rgb(242, 242, 242)"
              label="确认密码"
              prop="pwdReset"
            >
              <u-input
                type="password"
                @blur="handleUpadteSync('pwdReset')"
                v-model="form.pwdReset"
                placeholder="保持两次密码一致"
              ></u-input>
            </u-form-item>
          </view>

          <view class="content">
            <u-form-item
              :required="true"
              style="border-bottom: 1px solid rgb(242, 242, 242)"
              label="手机号"
              prop="phone"
            >
              <u-input
                @blur="handleUpadteSync('phone')"
                v-model="form.phone"
                placeholder="请输入联系人手机号"
              ></u-input>
            </u-form-item>
          </view>
        </u-form>
      </view>
    </view>
  </view>
</template>

<script>
import { idcardOCR } from "@/api/companiesRegistered";

export default {
  data() {
    return {
      form: {
        pwd: "",
        pwdReset: "",
        phone: "",
        idNum: "",
        name: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "名字不能为空",
            trigger: "blur",
          },
        ],
        idNum: [
          {
            required: true,
            message: "身份证号不能为空",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              return uni.$u.test.idCard(value);
            },
            message: "身份证号不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
        pwd: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value.trim().length < 8) {
                callback(new Error("密码长度不能低于8位"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        pwdReset: [
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value !== this.form.pwd) {
                callback(new Error("两次密码不一致"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              return uni.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  props: {
    formdData: {
      type: Object,
      default: () => ({}),
    },
    authorizerRef: {},
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
    this.$emit("update:authorizerRef", this.$refs.uForm);
  },
  created() {
    Object.keys(this.form).forEach((key) => {
      this.form[key] = this.formdData.personCardOrcResult[key];
    });
  },
  methods: {
    handleUpadteSync(key) {
      this.$emit("update:formdData", {
        ...this.formdData,
        personCardOrcResult: {
          ...this.formdData.personCardOrcResult,
          [key]: this.form[key],
        },
      });
    },
  },
};
</script>

<style lang="scss">
.topic {
  color: #909399;
  font-size: 24rpx;
  width: 400rpx;
  margin: 20rpx auto 0;
  font-family: "宋体";
}
.uploadTipcContent {
  width: 555rpx;
  height: 260rpx;
  padding: 30rpx;
  border: 1px dotted#909399;
}
.updateContent {
  display: flex;
  background: #fff;
  padding: 30rpx;
}
.informationTitle {
  margin-bottom: 30rpx;
  font-size: 30;
}

.contentItems {
  width: 100%;
  border-radius: 6px;
  background: #fff;
  margin: 0rpx auto 30rpx;
  padding: 20rpx 30rpx 20rpx;

  .content {
    border-bottom: 1px solid rgb(242, 242, 242);
    padding: 0rpx 0 10rpx;
  }

  .content:last-child {
    border-bottom: none;
  }

  .title {
    font-size: 30rpx;
    color: black;
    letter-spacing: 3rpx;
  }

  .message {
    margin-left: 14rpx;
    text-align: right;
    // width: 420rpx;
    font-size: 30rpx;
    color: rgb(146, 146, 146);
    // white-space: nowrap;
    // /* 禁止文本换行 */
    // overflow: hidden;
    // /* 隐藏超出容器的文本 */
    // text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
  }
}
</style>