city-gather/src/pages/login/index.vue

<script setup lang="ts">
import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
import router from '@/router'
import { StaticUrl } from '@/config'

definePage({
  name: 'smqjh-login',
  islogin: false,
  style: {
    navigationBarTitleText: '市民请集合',
  },
})
const { token, redirectName, userInfo } = storeToRefs(useUserStore())
const { data, send } = useRequest((code, phoneCode) => Apis.sys.auth({ params: {
  grant_type: 'wechat',
  code,
  phoneCode,
} }), { middleware: createGlobalLoadingMiddleware({ loadingText: '手机号授权登录中' }), immediate: false })
const tabList = ['/pages/my/index', '/pages/index/index', '/pages/cart/index', '/pages/classfiy/index']
// 表单数据
const phone = ref('')
const code = ref('')
// 验证码倒计时
const countdown = ref(0)
const isSending = ref(false)
// 发送验证码
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 Api.userInfo
    setTimeout(() => {
      if (tabList.includes(redirectName.value)) {
        router.pushTab({ path: redirectName.value })
      }
      else {
        router.replace({ path: redirectName.value })
      }
    }, 1000)
  }
  catch {
    uni.hideLoading()
  }
}
async function handleGetPhone(e: UniHelper.ButtonOnGetphonenumberDetail) {
  console.log(e, '手机号')
  uni.showLoading({ mask: true })
  uni.login({
    provider: 'weixin',
    success: async (res) => {
      uni.hideLoading()
      await send(res.code, e.code)
      token.value = `Bearer ${data.value.data.access_token}`
      useGlobalToast().show({ msg: '登录成功' })
      useUserStore().getUserInfo()

      setTimeout(() => {
        if (tabList.includes(redirectName.value)) {
          router.pushTab({ path: redirectName.value })
        }
        else {
          console.log(redirectName.value, 'JSON.parse(path[1])')

          router.replace({ path: redirectName.value })
        }
      }, 1000)
    },
  })
}
function goBack() {
  uni.switchTab({
    url: '/pages/index/index',
  })
  useTabbar().setTabbarItemActive('smqjh-home')
}
</script>

<template>
  <view>
    <!-- #ifdef MP-WEIXIN -->
    <view class="header px24rpx">
      <view class="pt150rpx">
        <view class="w-full flex items-center justify-center">
          <image
            :src="`${StaticUrl}/smqjh-logo.png`"
            class="h120rpx w120rpx"
          />
        </view>
        <view class="mt50rpx">
          <wd-button block size="large" open-type="getPhoneNumber" @getphonenumber="handleGetPhone">
            手机号快捷登录
          </wd-button>
          <view class="mt40rpx">
            <wd-button block size="large" type="info" @click="goBack">
              暂不登录
            </wd-button>
          </view>
        </view>
      </view>
    </view>

    <!-- #endif -->
    <!-- #ifdef H5 -->
    <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>
    <!-- #endif -->
  </view>
</template>

<style scoped>
.header{
  height: calc(100vh - var(--window-top));
}
.login-page {
background: linear-gradient( 180deg, #F3FFD1 0%, #FFFFFF 37.42%, #F3FFD1 100%);
}
</style>