caimei-authentic-www/pages/auth/index.vue

<template>
  <div class="auth-page" v-if="showBind">
    <div class="form p-4">
      <div class="form-item mb-4">
        <input type="text" placeholder="手机号" v-model="formData.mobile" />
      </div>
      <div class="form-item mb-4 code">
        <input
          type="text"
          placeholder="验证码"
          class="code"
          v-model="formData.verifyCode"
        />
        <span class="send" @click="onSend">{{ sendCodeBtnText }}</span>
      </div>
      <div class="submit" @click="onSubmit">登录</div>
    </div>
  </div>
</template>

<script>
import { isMobile } from '@/utils/validator'
export default {
  data() {
    return {
      showBind: false,
      sendStatus: 0,
      formData: {
        authUserId: '',
        appId: '',
        openId: '',
        accessToken: '',
        mobile: '',
        verifyCode: '',
      },
      redirectPath: '',
      code: '',
    }
  },
  computed: {
    sendCodeBtnText() {
      return this.sendStatus === 0
        ? '发送验证码'
        : `再次发送${this.sendStatus}s`
    },
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      // 获取链接参数
      const { code, type, authUserId, appId } = this.$route.query
      this.code = code
      this.formData.appId = appId
      this.formData.authUserId = parseInt(authUserId)
      this.redirectPath = `/${authUserId}/${type}`
      // 尝试微信授权自动登录
      this.autoLogin()
    },

    // 绑定并登录
    async onSubmit() {
      try {
        const res = await this.$http.api.customLogin(this.formData)
        this.$store.dispatch('user/login', res.data)
        this.$setStorage(this.redirectPath, 'userInfo', res.data)
        this.$toast('登录成功')
        setTimeout(() => {
          this.$router.push(this.redirectPath)
        }, 500)
      } catch (error) {
        console.log(error)
      }
    },

    // 发送验证码
    async onSend() {
      if (this.sendStatus > 0) return
      // 验证手机号是否合法
      if (!isMobile(this.formData.mobile)) {
        this.$toast('请输入正确的手机号')
        return
      }
      try {
        // 发送验证码
        const res = await this.$http.api.sendVerifyCode({
          mobile: this.formData.mobile,
          authUserId: this.formData.authUserId,
          type: 1,
        })
        this.$toast('验证码已发送')
        // 开启倒计时
        this.countdown()
      } catch (error) {
        console.log(error)
      }
    },

    // 短信倒计时
    countdown() {
      this.sendStatus = 30
      this.timer = setInterval(() => {
        if (this.sendStatus === 0) {
          clearInterval(this.timer)
          return
        }
        this.sendStatus--
      }, 1000)
    },

    // 微信授权登录
    async autoLogin() {
      try {
        const res = await this.$http.api.wechatLogin({
          code: this.code,
          appId: this.formData.appId,
        })
        this.$store.dispatch('user/login', res.data)
        this.$router.push(this.path)
      } catch (error) {
        // 未绑定微信号
        if (error.code === -2) {
          this.$toast('未绑定手机号')
          this.showBind = true
          this.formData.openId = error.data.openId
          this.formData.accessToken = error.data.accessToken
        } else {
          // 其他错误跳转首页
          setTimeout(() => {
            this.$router.push(this.path)
          }, 1000)
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.auth-page {
  .form {
    .form-item {
      position: relative;
      border-bottom: 0.1vw solid #d8d8d8;
      input {
        display: block;
        width: 100%;
        font-size: 4.2vw;
        line-height: 10vw;
      }

      .send {
        position: absolute;
        right: 2.4vw;
        top: 50%;
        transform: translateY(-50%);
        font-size: 3.4vw;
      }
    }

    .submit {
      background: #bc1724;
      font-size: 3.2vw;
      color: #fff;
      text-align: center;
      line-height: 10vw;
    }
  }
}
</style>