x-forend/src/pages/login/index.vue

<route lang="json5">
{
  style: {
    navigationBarTitleText: '登录',
    navigationStyle: 'custom',
  },
  notNeedLogin: false,
}
</route>
<template>
  <view class="login-container relative pt-44">
    <!-- <NavBar title-color="#333" /> -->
    <!-- <view class="text-28 pl-32 text-gradient" style="-webkit-background-clip: text">登录</view> -->
    <image
      class="w-100 mx-auto block h-100"
      src="@/static/images/login/logo.png"
      mode="aspectFit"
    />
    <view class="pt-45">
      <view class="mx-15 px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
        <view class="flex items-center py-15">
          <view class="text-gradient">手机号</view>
          <input
            type="text"
            v-model="formData.account"
            placeholder-class="text-#889BC6"
            class="text-right flex-1 text-14"
            placeholder="请输入手机号"
          />
        </view>
        <view class="flex items-center py-15">
          <view class="text-gradient">密码</view>

          <input
            placeholder-class="text-#889BC6"
            type="password"
            v-model="formData.password"
            class="text-right flex-1 text-14"
            placeholder="请输入密码"
          />
        </view>
        <view class="flex items-center py-15">
          <view class="text-gradient">验证码</view>
          <input
            v-model="formData.captcha"
            placeholder-class="text-#889BC6"
            type="text"
            class="text-right flex-1 text-14"
            placeholder="请输入验证码"
          />
          <img
            :src="codeUrl"
            class="w-100 h-30 ml-15 bg-gray-400"
            mode="widthFix"
            @click="refreshCode"
          />
        </view>
      </view>
      <!-- <view class="ml-auto mr-0 w-fit text-gradient text-14 p-15" @click="handleEditPassword">
        忘记密码
      </view> -->
      <view
        class="mt-30 text-center py-12 rounded-full mx-15 text-15 text-white btn-gradient"
        @click="handleLogin"
      >
        登录
      </view>
      <view class="mt-30 text-center text-14 text-#999">
        没有账号？
        <text class="text-gradient" @click="handleRegister">立即注册</text>
      </view>
    </view>
    <view class="absolute bottom-15 left-50% -translate-x-50% text-#999 text-14">V1.0.0</view>
  </view>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import { isLogged } from '@/interceptors/route'
import { loginUserAPI } from '@/service'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const formData = ref({
  account: '',
  password: '',
  captcha: '',
})

const { codeUrl, t: captchaT, refreshCode } = useCaptcha()

let redirect = '/'
onLoad((options) => {
  redirect = options.redirect ?? '/'
})
onShow(refreshCode)

const handleLogin = async () => {
  if (!formData.value.account || !formData.value.password) {
    return uni.showToast({
      title: '请输入用户名和密码',
      icon: 'none',
    })
  }
  if (!formData.value.captcha) {
    return uni.showToast({
      title: '请输入验证码',
      icon: 'none',
    })
  }
  try {
    const {
      data: {
        userinfo: { token },
      },
    } = await loginUserAPI({ ...formData.value, t: captchaT.value })
    userStore.setToken(token)
    uni.reLaunch({
      url: redirect,
    })
  } catch (error) {
    refreshCode()
  }
}

const handleRegister = () => {
  uni.navigateTo({
    url: '/pages/register/index',
  })
}

const handleEditPassword = () => {
  uni.navigateTo({
    url: '/pages/edit-password/index',
  })
}

onLoad(() => {
  if (isLogged()) {
    uni.reLaunch({
      url: redirect,
    })
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: 200rpx;
  background-image: url('@/static/images/login-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>