zgty-mas-m/pages/login/login.vue

<template>
  <view class="content">
    <view class="setting">
      <view></view>
      <view class="x-f" @click="handleUrlConfig"
        ><u-icon color="#0055A2" size="25" name="setting"></u-icon><text>请求地址设置</text></view
      >
    </view>
    <view class="header">
      <image src="/static/images/login/logo.png"></image>
    </view>

    <view class="list">
      <view class="list-call">
        <u-icon name="account" color="#0055a2" size="30"></u-icon>
        <input class="sl-input" v-model="loginInfo.username" placeholder="请输入账号" />
      </view>
      <view class="list-call">
        <u-icon name="lock" color="#0055a2" size="30"></u-icon>
        <input
          class="sl-input"
          v-model="loginInfo.password"
          type="text"
          maxlength="32"
          placeholder="请输入密码"
          password="true"
        />
      </view>
    </view>
    <view class="login-btn">
      <u-button
        style="width: 60%"
        size="large"
        color="linear-gradient(-90deg, rgb(0, 85, 162), rgb(31 127 247))"
        shape="circle"
        text="登录"
        loadingText="登录中..."
        :loading="loading"
        @click="bindLogin"
      ></u-button>
    </view>
    <!-- 验证码弹窗 -->
    <n-verify ref="verifyRef" @success="onCaptchaSuccess" @error="onCaptchaError" />
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import nx from '@/nx'
import callCheckUpdate from '@/nx/utils/check-update'
const loading = ref(false)
const captchaEnable = true
let loginInfo = reactive({
  username: 'admin',
  password: 'P@ssword25',
  captchaVerification: ''
})
onShow(() => {
  //检查APP更新
  // #ifdef APP-PLUS
  if (process.env.NODE_ENV !== 'development') {
    setTimeout(() => {
      callCheckUpdate()
    }, 1500)
  }
  // #endif
})
async function bindLogin() {
  if (!loginInfo.username || !loginInfo.password) {
    uni.showToast({
      icon: 'none',
      title: '请输入账号和密码'
    })
    return
  }
  loading.value = true
  // 如果启用验证码，先显示验证码
  if (captchaEnable) {
    showCaptcha()
  } else {
    // 直接登录
    performAccountLogin()
  }
}
const verifyRef = ref(null)
// 显示验证码弹窗
function showCaptcha() {
  if (verifyRef.value) {
    verifyRef.value.show()
  }
}

function handleUrlConfig() {
  nx.$router.go('/pages/setting/UrlConfig')
}

// 验证码验证成功回调
function onCaptchaSuccess(data) {
  loginInfo.captchaVerification = data.captchaVerification
  performAccountLogin()
}

// 执行账号登录
async function performAccountLogin() {
  await nx
    .$store('user')
    .login(loginInfo)
    .finally(() => {
      loading.value = false
      loginInfo.captchaVerification = ''
    })
}
// 验证码验证失败回调
function onCaptchaError(error) {
  uni.showToast({
    icon: 'none',
    title: error?.message || '验证码验证失败'
  })
  loading.value = false
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  .setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    padding: 20px;
    color: $uni-color-primary;
  }
}

.header {
  margin-left: auto;
  margin-right: auto;
}

.header image {
  width: 120px;
  height: 120px;
}

.list {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-left: 20%;
  padding-right: 20%;
}

.list-call {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  color: #333333;
  border-bottom: 0.5px solid #e2e2e2;
}

.list-call .sl-input {
  flex: 1;
  text-align: left;
  font-size: 16px;
  margin-left: 16px;
}

.button-login {
  color: #ffffff;
  font-size: 34px;
  width: 470px;
  height: 100px;
  background: linear-gradient(-90deg, rgb(0, 85, 162), rgb(21, 97, 192));
  border-radius: 50px;
  line-height: 100px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}

.login-btn {
  margin-top: 20px;
}
</style>