tnbapp/src/components/register-from.vue

<template>
  <div>
    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="registerUser.username"
          placeholder="请输入用户名"
          label="用户名"
          :rules="[() => registerUser.username != null || '用户名不能为空']"
          clearable
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="registerUser.email"
          placeholder="请输入邮箱"
          label="邮箱"
          :rules="[() => registerUser.email != null || '邮箱不能为空']"
          type="email"
          clearable
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="10">
        <v-row justify="center">
          <v-col cols="5">
            <v-text-field
              v-model="registerUser.regVerifyCode"
              placeholder="请输入验证码"
              label="验证码"
              :rules="[() => registerUser.regVerifyCode != null || '验证码不能为空']"
              type="email"
              clearable
            />
          </v-col>
          <v-col cols="5">
            <v-btn color="primary" @click="getVerifyCode">获取验证码</v-btn>
          </v-col>
        </v-row>
      </v-col>
      <!--<v-col cols="10">
        <v-text-field
          v-model="registerUser.email"
          placeholder="请输入验证码"
          label="验证码"
          :rules="[() => registerUser.email != null || '验证码不能为空']"
          type="email"
          clearable
        />
        <v-btn color="primary" @click="getVerifyCode">获取验证码</v-btn>
      </v-col>-->
    </v-row>
    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="registerUser.password"
          placeholder="请输入密码"
          label="密码"
          :rules="[() => registerUser.password != null || '密码不能为空']"
          clearable
          type="password"
        />
      </v-col>
    </v-row>
    <!--    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="registerUser.mobile"
          placeholder="请输入你的手机号（系统原因，此项选填）"
          label="手机号"

          clearable
        />
      </v-col>
    </v-row>-->
    <!--    <v-row v-if="this.$store.state.webInfo.openInvitationRegister == 1" justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="registerUser.invitationCode"
          placeholder="邀请码"
          label="邀请码"
          clearable
          :rules="[() => registerUser.invitationCode != null || '邀请码不能为空']"
        />
      </v-col>
    </v-row>-->
    <v-row justify="center">
      <v-col cols="5">
        <img :src="captchaUrl" alt="验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">
      </v-col>
      <v-col cols="5">
        <v-text-field
          v-model="registerUser.captcha"
          placeholder="验证码"
          label="验证码"
          :rules="[() => registerUser.captcha != null || '验证码不能为空']"
          clearable
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-btn color="primary" @click="submitRegister">注册</v-btn>
    </v-row>
  </div>
</template>

<script>
import { randomString, getCaptchaUrl } from '@/utils'
import { getRegVerifyCode } from '@/api/user/account'

export default {
  name: 'Register',
  data() {
    return {
      captchaUrl: '',
      r: '',
      showMessage: false,
      registerUser: {
        regType: 1,
        username: '',
        email: '',
        password: '',
        // mobile: '',
        regVerifyCode: '',
        captcha: '',
        r: ''
        // invitationCode: ''
      },
      verifyCode: {
        type: '',
        receiver: ''
      }
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    submitRegister() {
      var re = /^(([^()[\]\\.,;:\s@\"]+(\.[^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (!re.test(this.registerUser.email)) {
        console.log('email 字段不符合要求')
        return
      } else if (this.registerUser.password === '' || this.registerUser.password.length < 6) {
        console.log('password 字段不符合要求')
        return
      } else if (this.registerUser.captcha === '' || this.registerUser.username === '') {
        alert('captcha 或 username 字段不符合要求')
        return
      }

      if (this.$store.state.webInfo.openInvitationRegister === 1 && this.registerUser.invitationCode === '') {
        console.log('openInvitationRegister 或 invitationCode 字段不符合要求')
        return
      }

      /* if (this.registerUser.username !== 'admin') {
                  return
                }*/

      /* if (this.registerUser.mobile !== '') {
                  var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
                  if (!myreg.test((this.registerUser.phone))) {
                    return
                  }
                }*/
      // 返回到父组件
      this.$emit('register', this.registerUser)
    },
    getCaptcha() {
      this.r = randomString(10)
      // 图片上发送点击事件时，captchaUrl 的值发生变化，然后才去请求后端
      this.captchaUrl = getCaptchaUrl(this.r)
    },
    getVerifyCode() {
      var email = this.registerUser.email
      if (email == null || email === '') {
        alert('请输入邮箱地址')
        return
      }

      getRegVerifyCode(email)
        .then(res => {
          if (res.code === 0) {
            alert(res.msg)
          } else {
            this.$notify({
              title: res.code,
              message: res.msg,
              type: 'warning',
              duration: 500
            })
          }
        })
        .catch(error => {
          this.$message.error(error.message)
        })
    }
  }
}
</script>

<style>
</style>