smqjh-refuel/src/pages/login/index.vue

<script setup lang="ts">
import type { MemberVO } from '@/api/globals'
import router from '@/router'

definePage({
  name: 'login',
  islogin: false,
  style: {
    navigationBarTitleText: '登录',
    navigationStyle: 'custom',
  },
})
const StaticUrl = import.meta.env.VITE_STATIC_BASE_URL
// 表单数据
const phone = ref('')
const code = ref('')
// 验证码倒计时
const countdown = ref(0)
const isSending = ref(false)
const { token, redirectName, userInfo } = storeToRefs(useUserStore())
const tabList = ['/pages/order/index', '/pages/voucher/index', '/pages/index/index']
// 发送验证码
async function handleSendCode() {
  if (!phone.value) {
    useGlobalToast().show('请输入手机号')

    return
  }
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    useGlobalToast().show('请输入正确的手机号')
    return
  }
  if (isSending.value)
    return

  isSending.value = true
  countdown.value = 60

  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isSending.value = false
    }
  }, 1000)

  // TODO: 调用发送验证码接口
  await Apis.general.post_smqjh_auth_api_v1_auth_sms_code({ params: { mobile: phone.value } })
  useGlobalToast().show('验证码已发送')
}

// 登录
async function handleLogin() {
  if (!phone.value) {
    useGlobalToast().show('请输入手机号')
    return
  }
  if (!code.value) {
    useGlobalToast().show('请输入验证码')
    return
  }
  uni.showLoading({ mask: true })
  try {
    const res = await Apis.general.post_smqjh_auth_oauth2_token({ params: { grant_type: 'sms_code', mobile: phone.value, code: code.value } })
    uni.hideLoading()
    token.value = `Bearer ${res.data.access_token}`
    useGlobalToast().show('登录成功')
    const user = await Apis.general.get_smqjh_system_app_api_v1_members_me()
    userInfo.value = user.data as MemberVO
    setTimeout(() => {
      if (tabList.includes(redirectName.value)) {
        router.pushTab({ path: redirectName.value })
      }
      else {
        router.replace({ path: redirectName.value })
      }
    }, 1000)
  }
  catch {
    uni.hideLoading()
  }
}
</script>

<template>
  <view class="login-page min-h-100vh px48rpx">
    <view class="w-full flex items-center justify-center pt40rpx">
      <image
        :src="`${StaticUrl}/smqjh-logo.png`"
        class="h120rpx w120rpx"
      />
    </view>
    <!-- 表单区域 -->
    <view class="pt242rpx">
      <!-- 手机号 -->
      <view class="mb48rpx">
        <view class="mb24rpx text-32rpx text-#333 font-medium">
          手机号
        </view>
        <view class="h96rpx flex items-center rounded-48rpx bg-#E5E8D8 px32rpx">
          <input
            v-model="phone"
            type="number"
            :maxlength="11"
            placeholder="请输入手机号"
            placeholder-class="text-#999"
            class="flex-1 text-32rpx"
          >
        </view>
      </view>

      <!-- 验证码 -->
      <view class="mb64rpx">
        <view class="mb24rpx text-32rpx text-#333 font-medium">
          验证码
        </view>
        <view class="h96rpx flex items-center rounded-48rpx bg-#E5E8D8 px32rpx">
          <input
            v-model="code"
            type="tel"
            :maxlength="4"
            placeholder="请输入验证码"
            placeholder-class="text-#999"
            class="flex-1 text-32rpx"
          >
          <view
            class="ml20rpx flex-shrink-0 text-28rpx"
            :class="[isSending ? 'text-#999' : 'text-#7CB305']"
            @click="handleSendCode"
          >
            {{ isSending ? `${countdown}秒后重新发送` : '获取验证码' }}
          </view>
        </view>
      </view>

      <!-- 登录按钮 -->
      <wd-button block size="large" @click="handleLogin">
        登录
      </wd-button>
      <view class="mt20rpx text-center text-#999">
        请使用市民请集合小程序账号进行登录
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-page {
background: linear-gradient( 180deg, #F3FFD1 0%, #FFFFFF 37.42%, #F3FFD1 100%);
}
</style>