tnbapp/src/assets/js/mixin.js

/**
 * 混入对象，抽取Vue中公共的部分
 */
import { getPubkey, getCaptchaCode, getVerifyCode, login, logout, register, forgot } from '@/api/account'
import { setUserToken, removeAll } from '@/utils/auth'
import { JSEncrypt } from 'jsencrypt'
import Vue from 'vue'
import store from '@/store'

export const userMixin = {
  data() {
    return {
      pubkey: '',
      pubkeyR: '',
      captchaCode: '',
      userLogin: {
        principal: null,
        credential: null,
        captchaCode: null,
        loginType: 2,
        plat: 2
      },
      userRegistry: {
        principal: null,
        verifyCode: null,
        credential: null,
        captchaCode: null,
        plat: 2
      },
      verifyCodeForm: {
        principal: null,
        channel: 2
      },
      userForgot: {
        principal: null,
        verifyCode: null,
        newCredential: null,
        captchaCode: null
      },
      loginDialog: false,
      registerDialog: false,
      dialogVisible: false,
      dialogVisible2: false,
      nickname: '', // 用户昵称
      phone: '', // 电话
      mobile: '', // 电话
      username: '', // 电话
      password: '', // 用户密码
      repassword: '', // 确认密码
      avatarurl: '', // 用户头像路径
      rcode: '', // 注册验证码
      isLoading: false, // 登入加载效果
      user: this.$user, // 登入用户对象
      code: '获取验证码',
      isBtn: false,
      imageUrl: require('assets/img/avatar.png')
    }
  },
  methods: {
    fetchPubkey(channel) {
      getPubkey(channel).then(resp => {
        if (resp.code === 0) {
          this.pubkey = resp.data.pubkey
          this.pubkeyR = resp.data.r

          this.getCaptcha()
        } else {
          this.message = resp.msg
          this.showMessage = true
        }
      }).catch(error => {
        this.message = error.message
        this.showMessage = true
      })
    },
    getCaptcha() {
      getCaptchaCode().then(resp => {
        if (resp.code === 0) {
          this.captchaCode = resp.data
          this.dialogVisible = true
        } else {
          this.message = '获取图形验证码失败, 请重新刷新页面'
          this.showMessage = true
        }
      })
    },
    encryptPassword(password, pubkey, pubkeyR) {
      var encryptor = new JSEncrypt()
      encryptor.setPublicKey(pubkey)
      return encryptor.encrypt(pubkeyR + password)
    },
    registerVerifyCode() {
      if (this.userRegistry.principal === null || this.userRegistry.principal === '') {
        this.$message.success('请填写邮箱或手机号')
        return
      }

      this.verifyCodeForm.channel = 1
      this.verifyCodeForm.receiver = this.userRegistry.principal
      this.getVerifyCodeWrapper(this.verifyCodeForm)
    },
    loginVerifyCode() {
      if (this.userLogin.principal === null || this.userLogin.principal === '') {
        this.$message.success('请填写邮箱或手机号')
        return
      }

      this.verifyCodeForm.channel = 2
      this.verifyCodeForm.receiver = this.userLogin.principal
      this.getVerifyCodeWrapper(this.verifyCodeForm)
    },
    forgotVerifyCode() {
      if (this.userForgot.principal === null || this.userForgot.principal === '') {
        this.$message.success('请填写邮箱或手机号')
        return
      }

      this.verifyCodeForm.channel = 3
      this.verifyCodeForm.receiver = this.userRegistry.principal
      this.getVerifyCodeWrapper(this.verifyCodeForm)
    },
    getVerifyCodeWrapper(verifyCodeForm) {
      this.isBtn = true
      let time = 60
      const timeout = setInterval(() => {
        if (time !== 0) {
          time--
          this.code = time + 's后重新获取'
        } else {
          this.isBtn = false
          this.code = '重新获取验证码'
          clearTimeout(timeout)
        }
      }, 1000)
      getVerifyCode(verifyCodeForm).then(resp => {
        if (resp.code === 0) {
          this.$message.success('验证码已发送, 请注意查收')
        } else {
          this.$message.warning(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    // 昵称校验
    nickNameBlur() {
      if (this.nickname.length <= 0) {
        this.$message.warning('昵称不能为空')
      }
    },
    // 电话校验
    phoneBlur() {
      if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
        this.$message.warning('电话号码格式有误')
      }
    },
    loginByVerifyCode() {
      this.userLogin.loginType = 1
      this.loginBtn()
    },
    loginBtn() {
      if (this.userLogin.principal === '' || this.userLogin.principal === null) {
        this.$message.warning('帐号不能为空')
        return
      }
      if (this.userLogin.credential === '' || this.userLogin.credential === null) {
        this.$message.warning('密码不能为空')
        return
      }

      const devops = process.env.VUE_APP_DEVOPS
      if (!devops) {
        if (this.userLogin.captchaCode === '' || this.userLogin.captchaCode === null) {
          this.$message.warning('图形验证码不能为空')
          return
        }
      }

      const credential = this.userLogin.credential
      this.userLogin.credential = this.encryptPassword(credential, this.pubkey, this.pubkeyR)
      // 显示加载效果
      this.isLoading = true
      login(this.userLogin).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          const userInfo = respData.accountInfo
          const userToken = respData.accountToken
          // 保存授权信息到本地缓存
          setUserToken(userToken)
          store.commit('SET_USER_INFO', userInfo)

          // 刷新当前页面
          // this.$router.go(0)
          // 返回上个页面
          this.$router.go(-1)
          // 返回上上个页面
          // this.$router.go(-2)
          this.userLogin = {
            principal: null,
            credential: null,
            captchaCode: null,
            loginType: 2,
            plat: 1
          }
        } else {
          // 登入失败
          this.$message.warning(resp.msg)
          this.userLogin.credential = credential
        }
      }).catch(error => {
        // 登入请求错误
        this.$message.error(error.message)
      }).finally(() => {
        this.isLoading = false
      })
    },
    registerBtn() {
      if (this.userRegistry.principal === '' || this.userRegistry.principal === null) {
        this.$message.warning('手机号不能为空')
        return
      }
      if (this.userRegistry.credential === '' || this.userRegistry.credential === null) {
        this.$message.warning('密码不能为空')
        return
      }
      if (this.userRegistry.verifyCode === '' || this.userRegistry.verifyCode === null) {
        this.$message.warning('短信验证码不能为空')
        return
      }
      if (this.userRegistry.captchaCode === '' || this.userRegistry.captchaCode === null) {
        this.$message.warning('图形验证码不能为空')
        return
      }

      this.userRegistry.credential = this.encryptPassword(this.userRegistry.credential, this.pubkey, this.pubkeyR)
      // 显示加载效果
      this.isLoading = true
      register(this.userRegistry).then(resp => {
        if (resp.code === 0) {
          // 关闭弹窗并刷新页面
          this.dialogVisible = false
          this.$message.info('帐号已注册, 稍后会转到登入页面')
          setInterval(() => {
            this.$router.push('/login')
          }, 3000)
        } else {
          this.$message.warning(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.isLoading = false
      })
    },
    forgotBtn() {
      if (this.userForgot.principal === '' || this.userForgot.principal === null) {
        this.$message.warning('手机号不能为空')
        return
      }
      if (this.userForgot.newCredential === '' || this.userForgot.newCredential === null) {
        this.$message.warning('密码不能为空')
        return
      }
      if (this.userForgot.verifyCode === '' || this.userForgot.verifyCode === null) {
        this.$message.warning('短信验证码不能为空')
        return
      }
      if (this.userForgot.captchaCode === '' || this.userForgot.captchaCode === null) {
        this.$message.warning('图形验证码不能为空')
        return
      }

      this.userForgot.newCredential = this.encryptPassword(this.userForgot.newCredential, this.pubkey, this.pubkeyR)
      // 显示加载效果
      this.isLoading = true
      forgot(this.userForgot).then(resp => {
        if (resp.code === 0) {
          // 关闭弹窗并刷新页面
          this.dialogVisible = false
          this.$message.info('密码已重置, 请返回登入页面登入帐号')
        } else {
          this.$message.warning(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.isLoading = false
        this.userForgot = {
          principal: null,
          verifyCode: null,
          newCredential: null,
          captchaCode: null
        }
      })
    },
    goToHome() {
      this.$router.push('/')
    },
    goToLogout() {
      this.$confirm('退出登入, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        logout().then(resp => {
          if (resp.code === 0) {
            Vue.$cookies.remove('token')
            store.commit('USER_LOGOUT')
            removeAll()
          } else {
            this.$notify.error({
              title: '提示',
              message: resp.msg
            })
          }
        }).catch((e) => {
          console.log(e)
          this.$notify({
            message: '网络错误,请稍后再试...'
          })
        }).finally(() => {
          // 刷新当前页面
          this.$router.go(0)
          // this.$router.push('/')
          this.isLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}