wx-starlock/pages/user/login.vue

<template>
  <view>
    <view class="mx-4 mt-10 text-base">
      <view class="font-bold text-2xl">欢迎使用星星锁</view>
      <view class="mt-4 flex items-center w-full" @click="toJump('countryList')">
        <view class="w-200">国家/地区</view>
        <view class="text-#63b8af">{{ country.name }} +{{ country.code }}</view>
      </view>
      <view class="mt-4">
        <up-input
          fontSize="32rpx"
          :placeholderStyle="{
            color: '#333333',
            fontSize: '32rpx'
          }"
          placeholder="请输入手机号或邮箱"
          :customStyle="{
            padding: '0',
            height: '80rpx'
          }"
          border="bottom"
          clearable
          v-model="username"
          :maxlength="50"
          @change="handleUsernameInput"
        ></up-input>
      </view>
      <view class="mt-4">
        <up-input
          fontSize="32rpx"
          :placeholderStyle="{
            color: '#333333',
            fontSize: '32rpx'
          }"
          :customStyle="{
            padding: '0',
            height: '80rpx'
          }"
          placeholder="请输入内容"
          type="password"
          border="bottom"
          clearable
          v-model="password"
          :maxlength="20"
          @change="handlePasswordInput"
        ></up-input>
      </view>
      <view class="mt-4 flex items-center text-sm" @click="agreeAgreement">
        <image
          class="w-35 h-35"
          v-if="select"
          src="https://oss-lock.xhjcn.ltd/mp/icon_select.png"
        ></image>
        <image
          v-else
          class="w-35 h-35"
          src="https://oss-lock.xhjcn.ltd/mp/icon_not_select.png"
        ></image>
        <view class="ml-2">
          我已阅读并同意
          <span class="text-#63b8af" @click="toWebview('userAgreement')">《用户协议》 </span>
          <span class="text-#63b8af" @click="toWebview('privacy')">《隐私协议》</span>
        </view>
      </view>
      <view
        class="mt-4 w-full rounded-full h-88 text-center leading-[88rpx] text-white"
        :class="[canLogin ? 'bg-#4777ee' : 'bg-#9d9da1']"
        @click="login"
      >
        登录
      </view>
      <view class="mt-4 mx-2 flex items-center justify-between">
        <view class="text-#63b8af" @click="toJump('forgotPassword')">忘记密码</view>
        <view class="text-#63b8af" @click="toJump('register')">注册</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useBasicStore } from '@/stores/basic'
  import { useUserStore } from '@/stores/user'
  import { PHONE_REG, EMAIL_REG, PASSWORD_REG } from '@/constant/reg'

  const $basic = useBasicStore()
  const $user = useUserStore()

  const country = ref({
    countryId: 0,
    name: '中国',
    code: '86',
    flag: 'https://lock.xhjcn.ltd/storage/country-flags/86.png',
    abbreviation: 'CN',
    group: 'Z'
  })
  const username = ref('')
  const password = ref('')

  const select = ref(false)

  const pending = ref(false)

  const isValidUsername = computed(() => {
    if (!username.value) return false
    return PHONE_REG.test(username.value) || EMAIL_REG.test(username.value)
  })

  const isValidPassword = computed(() => {
    if (!password.value) return false
    return PASSWORD_REG.test(password.value)
  })

  const canLogin = computed(() => {
    return isValidUsername.value && isValidPassword.value
  })

  const handleUsernameInput = text => {
    username.value = text
  }
  const handlePasswordInput = text => {
    password.value = text
  }

  const agreeAgreement = () => {
    select.value = !select.value
  }

  const toJump = path => {
    $basic.routeJump({
      name: path,
      events: {
        country(data) {
          country.value = data
        }
      }
    })
  }

  const toWebview = type => {
    $basic.routeJump({
      name: 'webview',
      params: {
        type
      }
    })
  }

  const login = async () => {
    if (!canLogin.value) {
      return
    }
    if (!select.value) {
      uni.showToast({
        title: '请先同意用户协议及隐私协议',
        icon: 'none'
      })
      return
    }
    if (pending.value) {
      return
    }
    pending.value = true
    const res = await $user.passwordLogin({
      username: username.value,
      password: password.value,
      countryCode: country.value.code
    })
    pending.value = false
    if (res) {
      $basic.routeJump({
        name: 'home',
        type: 'reLaunch'
      })
    }
  }
</script>