tnbapp/src/components/register-from.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
          @input="checkEmail"
          @blur="selectEmail"
        />
      </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="captchaUrl" alt="验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">
        <!--<img :src="captchaBase64" alt="验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">-->
      </v-col>
      <v-col cols="5">
        <v-text-field
          v-model="userRegistry.captcha"
          placeholder="验证码"
          label="验证码"
          :rules="[() => userRegistry.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, isUsernameExist, selectUsername, isEmailRegistered, selectEmail } from '@/api/user/account'

export default {
  name: 'Register',
  data() {
    return {
      captchaUrl: '',
      captchaBase64: '',
      r: '',
      showMessage: false,
      userRegistry: {
        regType: 1,
        username: '',
        email: '',
        password: '',
        regVerifyCode: '',
        captcha: '',
        r: ''
      },
      verifyCode: {
        type: '',
        receiver: ''
      }
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    checkUsername() {
      isUsernameExist(this.userRegistry.username)
        .then(res => {
          if (res.code === 0) {
            console.log(res.msg)
          } else {
            alert(res.data)
          }
        })
        .catch(error => {
          console.error(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() {
      console.log('检查邮箱')
      isEmailRegistered(this.userRegistry.email)
        .then(res => {
          if (res.code === 0) {
            console.log(res.msg)
          } else {
            alert(res.data)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    selectEmail() {
      selectEmail(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.captcha === '' || this.userRegistry.username === '') {
        alert('captcha 或 username 字段不符合要求')
        return
      }

      if (this.$store.state.webInfo.openInvitationRegister === 1 && this.userRegistry.invitationCode === '') {
        console.log('openInvitationRegister 或 invitationCode 字段不符合要求')
        return
      }
      // 返回到父组件
      this.$emit('register', this.userRegistry)
    },
    getCaptcha() {
      this.r = randomString(10)
      // 图片上发送点击事件时，captchaUrl 的值发生变化，然后才去请求后端
      this.captchaUrl = getCaptchaUrl(this.r)
      /* getBase64Captcha(this.captchaUrl)
        .then(res => {
          if (res.code === 0) {
            this.captchaBase64 = 'data:image/jpg;base64,' + res.data
          } else {
            alert(res.data)
          }
        })
        .catch(error => {
          console.error(error.message)
        })*/
    },
    getVerifyCode() {
      const email = this.userRegistry.email
      if (email == null || email === '') {
        alert('请输入邮箱地址')
        return
      }

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

<style>
</style>