nsgk_mobile/src/views/register.vue

<template>
    <div class="app-container">
        <div class="focus-logo">
            <img src="@/assets/images/login-logo.png" />
            <p class="describe">注册页</p>
        </div>
         <div class="login-main">
             <van-form @submit="handleRegister">
                 <van-field
                    v-model="formData.memberName"
                    name="memberName"
                    label="真实姓名"
                    placeholder="真实姓名"
                />
                <van-field
                    v-model="formData.idcard"
                    name="idcard"
                    label="身份证号"
                    placeholder="身份证号"
                />
                <van-field
                    v-model="formData.mobile"
                    name="mobile"
                    label="手机号"
                    placeholder="手机号"
                />
                <van-field
                    v-model="formData.smsCode"
                    center
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码"
                    >
                    <template #button>
                        <van-button
                        size="small"
                        type="primary"
                        @click.native.prevent="getSmsCode"
                        >{{
                            computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码"
                        }}</van-button
                        >
                    </template>
                </van-field>
                <div class="form-submit">
                    <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    :loading="loading"
                    >立即注册</van-button
                    >
                </div>
             </van-form>
         </div>

          <div class="reveal-modal-con">
            <div class="dd_txt">
                <router-link to="/login">跳转登录页</router-link>
            </div>

          </div>

    </div>
</template>

<script>
import { registerCheck,registerOn } from "@/api/register";
export default {
    name: "register",
    data() {
        return {
            formData: {
                memberName: '张月旺', //姓名
                idcard: '14022619700803051X', //身份证号码
                // uuid: null, //识别uuid
                mobile: '15254587248', //手机号
                // smsCode: null, //短信验证码
            },
            loading: false,
            computeTime: 0,
        };
    },
    methods: {
        handleRegister(){
            if(this.checkFun()){
                let oData = this.formData;
                  if(oData.smsCode==''){
                    this.$dialog.alert({
                        message: '请输入短信验证码',
                    });
                    return false;
                }
                
                registerOn(this.formData).then((res) => {
                    console.log(res)
                })


            }
        },
        getSmsCode() {
            if (!this.computeTime) {
                if(this.checkFun()){
                   registerCheck(this.formData).then((res) => {
                    if (res.code === 200) {
                        this.$dialog.alert({
                            message: '验证码已发送',
                        });
                        this.loginForm.uuid = res.uuid;
                        this.computeTime = 60;
                        this.timer = setInterval(() => {
                        this.computeTime--;
                        if (this.computeTime <= 0) {
                            clearInterval(this.timer);
                        }
                        }, 1000);
                    }
                    });
                }
            }
        },
        checkFun(){
            let oData = this.formData;
            let memberName_Regexp=/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/; //校验姓名
            let idcard_Regexp = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/; //身份证
            let mobile_Regexp=/^1[3|4|5|7|8]\d{9}$/;
            console.log(oData.mobile)
            if (!memberName_Regexp.test(oData.memberName)) {
                this.$dialog.alert({
                    message: '姓名格式不正确',
                });
                return false;
            }else if(!idcard_Regexp.test(oData.idcard)){
                this.$dialog.alert({
                    message: '身份证号码格式不正确',
                });
                return false;
            }else if(!mobile_Regexp.test(oData.mobile)){
                this.$dialog.alert({
                    message: '手机号码格式不正确',
                });
                return false;
            }
            return true;
        }
    },
}
</script>

<style scoped lang="scss">
.app-container {
  .focus-logo {
    width: 310px;
    margin: 0 auto 40px;
    padding-top: 60px;
    img {
      width: 100%;
    }
    .describe{
      text-align: center;
      font-size: 34px;
      padding:10px 0 0;
      color: #666;
    }
  }
  .login-main{
    width: 95%;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #ddd;
    padding-bottom:40px;
    .form-submit {
      margin: 40px 40px 0;
    }
  }
  .reveal-modal-con {
    margin: 30px 40px 0;
    .dd_txt {
      text-align: center;
      font-size: 28px;
      a {
        color: #666;
      }
    }
  }
}
</style>