1

pages/login/login.vue

@@ -0,0 +1,190 @@
+<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: '',
+  password: '',
+  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 || '验证码验证失败'
+  })
+}
+</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>