qa-prevention-xgf-app/pages/login/register.vue

<template>
  <view class="content">
    <view class="card">
      <u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100px">
        <u-form-item label="姓名" prop="NAME" borderBottom required>
          <u--input v-model="form.NAME" border="none"></u--input>
        </u-form-item>
        <u-form-item label="身份证号" prop="CARD_ID" borderBottom required>
          <u--input v-model="form.CARD_ID" border="none" @blur="fnIDCardDeduplication"></u--input>
        </u-form-item>
        <u-form-item label="账号" prop="USERNAME" borderBottom required>
          <u--input v-model="form.USERNAME" border="none" @blur="fnUserDeduplication"></u--input>
        </u-form-item>
        <u-form-item label="密码" prop="PASSWORD" borderBottom required>
          <u--input v-model="form.PASSWORD" border="none" password></u--input>
        </u-form-item>
        <u-form-item label="确认密码" prop="CONFIRM_PASSWORD" borderBottom required>
          <u--input v-model="form.CONFIRM_PASSWORD" border="none" password></u--input>
        </u-form-item>
        <view class="tip">密码长度8~32位，须包含数字、字母、符号至少2种或以上元素</view>
      </u--form>
      <view class="mt-10">
        <u-button type="primary" text="注 册" @click="$u.debounce(fnRegister, 1000,true)"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {getIDCardDeduplication, getUserDeduplication, setRegister} from "../../api/index";

export default {
  data() {
    return {
      form: {
        NAME: '',
        CARD_ID: '',
        USERNAME: '',
        PASSWORD: '',
        CONFIRM_PASSWORD: '',
      },
      rules: {
        NAME: {
          required: true,
          message: '请填写姓名',
          trigger: ['blur']
        },
        CARD_ID: [
          {
            required: true,
            message: '请填写身份证号',
            trigger: ['blur']
          },
          {
            validator: (rule, value, callback) => {
              return uni.$u.test.idCard(value);
            },
            message: '身份证号格式不正确',
            trigger: ['blur'],
          },
        ],
        USERNAME: [
          {
            required: true,
            message: '请填写账号',
            trigger: ['blur']
          },
          {
            validator: (rule, value, callback) => {
              return uni.$u.test.mobile(value);
            },
            message: '账号格式不正确，请输入手机号',
            trigger: ['blur'],
          },
        ],
        PASSWORD: [
          {
            required: true,
            message: '请填写密码',
            trigger: ['blur']
          },
          {
            pattern: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,32}$/,
            message: '密码格式不正确',
            trigger: ['blur']
          },
        ],
        CONFIRM_PASSWORD: [
          {
            required: true,
            message: '请再次填写密码',
            trigger: ['blur']
          },
          {
            validator: (rule, value, callback) => {
              return value === this.form.PASSWORD;
            },
            message: '两次密码不一致',
            trigger: ['blur'],
          },
        ]
      }
    }
  },
  methods: {
    async fnIDCardDeduplication(CARD_ID = this.form.CARD_ID) {
      let resData = await getIDCardDeduplication({CARD_ID})
      if (resData.pd) {
        uni.$u.toast('身份证号重复')
        return true
      }
      return false
    },
    async fnUserDeduplication(USERNAME = this.form.USERNAME) {
      if (uni.$u.test.mobile(USERNAME)) {
        let resData = await getUserDeduplication({USERNAME})
        if (resData.pd) {
          uni.$u.toast('账号重复')
          return true
        }
        return false
      }
    },
    async fnRegister() {
      this.$refs.form.validate().then(async () => {
        if (await this.fnIDCardDeduplication()) return
        if (await this.fnUserDeduplication()) return
        await setRegister({...this.form})
        uni.$u.toast('注册成功')
        setTimeout(() => {
          uni.$u.route({
            url: '/pages/login/login',
            type: 'reLaunch'
          })
        }, 2000)
      }).catch(() => {
        uni.$u.toast('请补全必填项')
      })
    }
  },
}
</script>

<style scoped lang="scss">
.tip {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  font-size: 20rpx;
}
</style>