tnbapp/src/components/register-form.vue

<template>
  <div>
    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="userRegistry.username"
          placeholder="请输入用户名"
          label="用户名"
          :rules="[() => userRegistry.username != null || '用户名不能为空']"
          clearable
          @input="checkUsername"
          @blur="selectUsername"
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="userRegistry.email"
          placeholder="请输入邮箱"
          label="邮箱"
          :rules="[() => userRegistry.email != null || '邮箱不能为空']"
          type="email"
          clearable
          @blur="checkEmail"
        />
      </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="userRegistry.regVerifyCode"
              placeholder="请输入邮件验证码"
              label="邮件验证码"
              :rules="[() => userRegistry.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-row>
    <v-row justify="center">
      <v-col cols="10">
        <v-text-field
          v-model="userRegistry.password"
          placeholder="请输入密码"
          label="密码"
          :rules="[() => userRegistry.password != null || '密码不能为空']"
          clearable
          type="password"
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="5">
        <img :src="captchaCode" alt="图形验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">
      </v-col>
      <v-col cols="5">
        <v-text-field
          v-model="userRegistry.captchaCode"
          placeholder="图形验证码"
          label="图形验证码"
          :rules="[() => userRegistry.captchaCode != null || '图形验证码不能为空']"
          clearable
        />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-btn color="primary" @click="submitRegister">注册</v-btn>
    </v-row>
  </div>
</template>

<script>
import { getVerifyCode, isUsernameExist, selectUsername, isEmailExist, getCaptchaCode } from '@/api/user/account'

export default {
  name: 'Register',
  data() {
    return {
      captchaCode: '',
      userRegistry: {
        regType: 1,
        email: '',
        password: '',
        regVerifyCode: '',
        captchaCode: '',
        r: ''
      }
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    checkUsername() {
      isUsernameExist(this.userRegistry.username)
        .then(res => {
          if (res.code === 0) {
            this.showMessage = true
            this.message = res.msg
          } else {
            this.showMessage = true
            this.message = res.data
          }
        })
        .catch(error => {
          this.showMessage = true
          this.message = error.message
        })
    },
    selectUsername() {
      selectUsername(this.userRegistry.username).then(res => {
        if (res.code === 0) {
          console.log(res.msg)
        } else {
          alert(res.data)
        }
      })
        .catch(error => {
          console.error(error.message)
        })
    },
    checkEmail() {
      const email = this.userRegistry.email
      if (email === null || email === '') {
        return
      }

      isEmailExist(this.userRegistry.email)
        .then(res => {
          if (res.code === 0) {
            console.log(res.msg)
          } else {
            alert(res.data)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    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.userRegistry.email)) {
        console.log('email 字段不符合要求')
        return
      } else if (this.userRegistry.password === '' || this.userRegistry.password.length < 6) {
        console.log('password 字段不符合要求')
        return
      } else if (this.userRegistry.captchaCode === '') {
        alert('captchaCode 或 username 字段不符合要求')
        return
      }

      if (this.$store.state.webInfo.openInvitationRegister === 1 && this.userRegistry.invitationCode === '') {
        console.log('openInvitationRegister 或 invitationCode 字段不符合要求')
        return
      }
      // 返回到父组件
      this.$emit('register', this.userRegistry)
    },
    getCaptcha() {
      getCaptchaCode().then(res => {
        if (res.code === 0) {
          this.captchaCode = 'data:image/jpeg;base64,' + res.data
        } else {
          this.showMessage = true
          this.message = '获取图形验证码失败, 请重新刷新页面'
        }
      })
    },
    getVerifyCode() {
      const email = this.userRegistry.email
      if (email == null || email === '') {
        alert('请输入邮箱地址')
        return
      }

      const verifyCodeReq = {}
      verifyCodeReq.receiver = email
      verifyCodeReq.notifyType = 1
      getVerifyCode(verifyCodeReq).then(res => {
        if (res.code === 0) {
          alert(res.msg)
        } else {
          console.error(res.msg)
        }
      }).catch(error => {
        console.error(error.message)
      })
    }
  }
}
</script>

<style>
</style>