printer-miniapp/src/pages/login/index.vue

<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '登录',
  },
}
</route>
<template>
  <wd-toast></wd-toast>
  <view class="login">
    <view class="login-main">
      <text class="login-main-title">欢迎登录</text>
      <view class="login-main-subtitle">使用猫耳云打印小程序</view>
      <view class="login-main-body">
        <!-- <login-input key="username" v-model="username" clearable placeholder="用户名" :maxlength="20"></login-input>
        <view class="login-password">
          <login-input key="password" v-model="password" password clearable placeholder="密码" :maxlength="20"></login-input>
        </view> -->
        <wd-button v-if="isLogout && !token" size="large" block type="primary" @click="init()">快捷登录</wd-button>
        <wd-button v-if="token" size="large" block type="primary" open-type="getPhoneNumber" :phone-number-no-quota-toast="false" @getphonenumber="onGetPhoneNumber">手机号授权</wd-button>
      </view>
    </view>

    <view class="login-footer">
      <text>广东省中宝奥科技有限公司</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useToast } from 'wot-design-uni'
import { useUserStore } from '@/store'
import { loginByCode, bingPhoneByCode } from '@/service/api/index'
import { getLoginCode } from '@/utils'
// import LoginInput from './components/LoginInput.vue'
const toast = useToast()
const isLogout = ref(false)

const username = ref<string>('') // 用户名
const password = ref<string>('') // 密码
const token = ref<string>('') // 令牌
const qrToken = ref<string>('') // web端扫小程序码 登录带入的令牌

async function init() {
  token.value = ""
  const code = await getLoginCode()
  let params = {
    code,
    qrToken: qrToken.value
  }
  loginByCode(params).then((res) => {
    if (res.code == 0 ) {
      switch (res.body.res) {
        case "0":
          handleToken(res.body.token || "")
          break;
        case "1":
          token.value = res.body.token || ""
          toast.warning("请进行手机号授权")
          break;
        default:
          toast.error({ msg: '获取token异常', duration: 4000 })
          break;
      }
    } else {
      toast.error({ msg: '获取token异常', duration: 4000 })
    }
  }).catch((error) => {
    toast.close()
    toast.error({ msg: error!.data!.message || '获取token异常', duration: 4000 })
  })
}

function handleToken(token) {
  if (token) {
    useUserStore().setToken(token)
    // useUserStore().initUserInfo()
    uni.reLaunch({
      url: `/pages/index/index`,
    })
  } else {
    handleTokenError()
  }
}

function handleTokenError() {
  toast.error({ msg: '登录失败, 请重新登录', duration: 4000 })
  init()
}

/**
 * 手机号实时验证组件: 获取并验证手机号
 * e.detail.code -- 动态令牌;	e.detail.errMsg --- 回调信息（成功失败都会返回）; e.detail.errno -- 错误码（失败时返回）
 */
function onGetPhoneNumber(detail) {
  if(detail.errMsg == "getPhoneNumber:ok" && detail.code) {
    handlePhoneNumberLogin(detail.code)
  } else {
    let tips = ""
		if (detail.errno === 1400001) {
			tips = "验证失败，请使用验证码方式"
		} else if (detail.errMsg.includes('user deny') || detail.errMsg.includes('user cancel')) {
			tips = "验证取消，请重新选择手机号"
		} else if (detail.errMsg.includes('freq limit')) {
			tips = "频率受限，请稍后重试"
		} else {
			tips = "验证失败，请稍后重试"
		}
    uni.showToast({
      title: tips,
      icon: "none",
      duration: 2000
    })
  }
}

// 根据code换取手机号, 进行绑定 (必须绑定)
function handlePhoneNumberLogin(code) {
  let params = {
    code,
    token: token.value || '',
    qrToken: qrToken.value || '',
  }
  bingPhoneByCode(params).then((res) => {
    if (res.code == 0 && res.body.res == 0) {
      handleToken(res.body.token)
    } else {
      handleTokenError()
    }
  }).catch((error) => {
    toast.error({ msg: error!.data!.message || '登录失败, 请重新登录', duration: 4000 })
  })
}

onLoad((option: any) => {
  isLogout.value = option.isLogout == "1"
  qrToken.value = option.scene || ""
  if(!isLogout.value) init()
})
</script>

<style lang="scss" scoped>
.login {
  background-color: #ffffff;
  height: calc(100vh - var(--window-top));
  width: 100vw;
  box-sizing: border-box;
  &-main {
    padding: 112rpx 75rpx 0 75rpx;
    position: relative;
    &-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 64rpx;
      font-size: 48rpx;
      font-weight: 600;
      line-height: 64rpx;
      letter-spacing: 8rpx;
    }
    &-subtitle {
      font-size: 28rpx;
      line-height: 40rpx;
      letter-spacing: 12rpx;
      text-align: center;
      margin: 8rpx 0 104rpx;
    }
    &-body {
      position: relative;
      box-sizing: border-box;
      width: 600rpx;
      height: 70vh;
      // 仅用于 显示账号密码登录时
      // .login-password {
      //   position: relative;
      //   padding: 40rpx 0 104rpx;
      // }
      padding-top: 20vh;
    }
  }
  &-footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    line-height: 28rpx;
    font-size: 24rpx;
    font-weight: 500;
  }
}
</style>