cxb-minapp-vue3/src/pages/user/login/other-phone.vue

<template>
  <div>
    <CXBBanner/>

    <nut-input
        v-model="state.phone"
        placeholder="请输入手机号"
    >
      <template #right>
        <nut-button type='primary' size="small" @click="handleGetCode" :loading="state.isAuthVerify">
        {{ state.buttonText }}
      </nut-button>
      </template>
    </nut-input>
    <nut-input
        v-model="state.code"
        placeholder="请输入验证码"
        clearable
    >
    </nut-input>

    <div class="flex w-full">
      <div class="p-3 w-full">
        <nut-button type="primary" @click="handleLogin" block :disabled="!isFormVerify">登录</nut-button>
<!--        <div class="text-xs text-gray flex flex-col justify-center items-center p-3">-->
<!--          <div>-->
<!--            我已阅读并同意<span class="text-red text-xs" @click="handleViewXieyi(2)">《注册协议》</span>和<span-->
<!--              class="text-red text-xs" @click="handleViewXieyi(1)">《隐私协议》</span>-->
<!--          </div>-->
<!--        </div>-->

      </div>

    </div>

  </div>
</template>
<script setup lang="ts">
import CXBBasePage from "~/components/CXBBasePage/CXBBasePage.vue";
import CXBBanner from "~/components/CXBBanner/CXBBanner.vue";
import {authSmsLogin, authVerify} from "~/apis/auth.api";
import Cache from "~/utils/cache";
const userStore = useUserStore()

const state = reactive({
  phone: '',
  code: '',

  isAuthVerify: false,
  buttonText: '获取验证码',
})

function sendCode() {
  if (state.isAuthVerify) return
  // if (this.disabled) return;
  // this.disabled = true;
  state.isAuthVerify = true
  let n = 60;
  state.buttonText = "剩余 " + n + "s";
  const run = setInterval(() => {
    n = n - 1;
    if (n < 0) {
      clearInterval(run);
      n = 0
    }
    state.buttonText = "剩余 " + n + "s";
    if (state.buttonText === "剩余 " + 0 + "s") {
      state.isAuthVerify = false;
      state.buttonText = "重新获取";
    }
  }, 1000);
}

const isFormVerify = computed(() => {
  if (state.phone !== '' && state.code !== '') {
    return true
  }
})
function handleGetCode() {
  if (!state.phone) {
    return uni.showToast({
      title: '请填写手机号码',
      icon: 'none'
    })
  }
  if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(state.phone)) {
    return uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    })
  }

  state.isAuthVerify = true
  authVerify(state.phone).then(res => {
    state.isAuthVerify = false
    sendCode()
  }).catch(res => {
  })
}
function handleViewXieyi(type: number) {
  uni.navigateTo({
    url: `/pages/user/login/user-agreement?type=${type}`
  })
}

function handleLogin() {
  const shareId = Cache.get('SHARE_ID')

  let params = {
    phone: state.phone,
    sms_code: state.code,
    // share_id:
  }
  if (shareId && shareId !== '') {
    params.share_id = shareId
  }
  authSmsLogin({
    ...params
  }).then(authRes => {
    console.log(authRes)
    userStore.login(authRes.token, authRes.exp)
    userStore.setUID(authRes.user.uid)
    userStore.setUserInfo(authRes.user)
    uni.showToast({
      title: '登录成功',
      icon: 'none'
    })
    Cache.clear('SHARE_ID')
    state.isAuthVerify = false
    let redirectPageObj: {page: string, type: 'page' | 'tab'}
    if (Cache.get('SHARE_REDIRECT_PAGE')) {
      redirectPageObj = JSON.parse(Cache.get('SHARE_REDIRECT_PAGE'))
    }
    setTimeout(() => {
      if (redirectPageObj) {
        if (redirectPageObj.type === 'page') {
          return uni.redirectTo({
            url: redirectPageObj.page
          })
        }
        if (redirectPageObj.type === 'tab') {
          return uni.switchTab({
            url: redirectPageObj.page
          })
        }
      } else {
        uni.switchTab({
          url: '/pages/home/index'
        })
      }
    }, 200)


  }).catch((errorMsg) => {
    console.log(errorMsg)
    uni.showToast({
      title: errorMsg,
      icon: 'none'
    })
  })
}
</script>

<route lang="yaml">
style:
  navigationBarTitleText: 手机登录
</route>

<style>
page {
  background: #f8f8f8;
}
</style>