瀏覽代碼

修复登录页面状态不一致问题

yuanmingze 2 月之前
父節點
當前提交
de94f02820
共有 1 個文件被更改,包括 84 次插入28 次删除
  1. 84 28
      src/pages/login/index.vue

+ 84 - 28
src/pages/login/index.vue

@@ -1,6 +1,14 @@
 <template>
   <view class="auth-content">
-    <wd-navbar fixed placeholder :title="title" left-arrow safeAreaInsetTop customClass="navbar" />
+    <wd-navbar
+      fixed
+      placeholder
+      :title="title"
+      left-arrow
+      safeAreaInsetTop
+      customClass="navbar"
+      @click-left="handleBack"
+    />
 
     <view class="auth-bg" />
 
@@ -31,7 +39,7 @@
           @clear="clearFieldError('password')"
         >
           <template #suffix>
-            <view class="forget-password" @click="forgetPassword"> 忘记密码? </view>
+            <view class="forget-password" @click="forgetPassword">忘记密码?</view>
           </template>
         </AuthInputItem>
 
@@ -52,28 +60,37 @@
             </button>
           </template>
         </AuthInputItem>
+
         <!-- 协议 -->
         <view class="agreement">
-          <label class="agreement-label">
-            <checkbox
-              :checked="agreementChecked"
-              class="agreement-checkbox"
-              @click.stop="toggleAgreement"
-            />
-            <view class="txt">
-              我已阅读并同意
-              <text @click.stop="agreementClick('platform-user-agreement')">
-                《要易云平台用户协议》 </text
-              >、 <text @click.stop="agreementClick('privacy-policy')"> 《隐私权政策》 </text>、
-              <text @click.stop="agreementClick('personal-info-authorization')">
-                《个人信息使用授权书》 </text
-              >、
-              <text @click.stop="handleOpenPrivacyContractClick"> 《用户隐私保护指引》 </text>
-            </view>
-          </label>
+          <checkbox-group class="agreement-checkbox-group" @change="handleAgreementChange">
+            <label class="agreement-label">
+              <checkbox
+                :value="AGREEMENT_VALUE"
+                :checked="agreementChecked"
+                class="agreement-checkbox"
+              />
+
+              <view class="txt">
+                我已阅读并同意
+                <text @click.stop="agreementClick('platform-user-agreement')">
+                  《要易云平台用户协议》
+                </text>
+                、
+                <text @click.stop="agreementClick('privacy-policy')"> 《隐私权政策》 </text>
+                、
+                <text @click.stop="agreementClick('personal-info-authorization')">
+                  《个人信息使用授权书》
+                </text>
+                、
+                <text @click.stop="handleOpenPrivacyContractClick"> 《用户隐私保护指引》 </text>
+              </view>
+            </label>
+          </checkbox-group>
 
           <view class="error-text" :class="{ visible: agreementError }"> 请阅读并勾选协议 </view>
         </view>
+
         <!-- 提交 -->
         <view class="submit">
           <button class="submit-btn" type="default" @click="submit">登录</button>
@@ -99,6 +116,16 @@ import { resetPasswordRules } from '@/validators/authFormRules'
 
 import AuthInputItem from '@/components/auth/AuthInputItem.vue'
 
+type CheckboxGroupChangeEvent = {
+  detail?: {
+    value?: string[]
+  }
+}
+
+const LOGIN_FALLBACK_URL = '/pages/index/index'
+const RESET_PASSWORD_URL = '/pages/reset-password/index'
+const AGREEMENT_VALUE = 'agreement'
+
 const userStore = useUserStore()
 const { title } = projectConfig
 
@@ -116,9 +143,28 @@ const { errors, validate, validateField, clearFieldError } = useFormValidator(
 const agreementChecked = ref(false)
 const agreementError = ref(false)
 
-const toggleAgreement = () => {
-  agreementChecked.value = !agreementChecked.value
-  if (agreementChecked.value) agreementError.value = false
+const handleBack = () => {
+  const pages = getCurrentPages()
+
+  if (pages.length > 1) {
+    uni.navigateBack({
+      delta: 1,
+    })
+    return
+  }
+
+  uni.reLaunch({
+    url: LOGIN_FALLBACK_URL,
+  })
+}
+
+const handleAgreementChange = (event: CheckboxGroupChangeEvent) => {
+  const checkedValues = event.detail?.value || []
+  agreementChecked.value = checkedValues.includes(AGREEMENT_VALUE)
+
+  if (agreementChecked.value) {
+    agreementError.value = false
+  }
 }
 
 const agreementClick = (type: string) => {
@@ -171,7 +217,13 @@ const handleOpenPrivacyContractClick = () => {
 
 const { countdown, disabled: codeDisabled, start: startCountdown } = useCodeCountdown()
 
-const toast = (title: string) => uni.showToast({ title, icon: 'none', duration: 800 })
+const toast = (title: string) => {
+  uni.showToast({
+    title,
+    icon: 'none',
+    duration: 800,
+  })
+}
 
 const sendCodeImpl = async () => {
   if (codeDisabled.value) return
@@ -182,12 +234,15 @@ const sendCodeImpl = async () => {
   ])
 
   if (!usernameOk || !passwordOk) return
+
   const res = await getAuthTokenApi({
     username: form.username,
     password: form.password,
   })
+
   if (res.access_token) {
     const codeRes = await getMobileCodeApi(form.username)
+
     if (codeRes.code === 0) {
       toast('验证码发送成功')
       startCountdown(60)
@@ -207,27 +262,28 @@ const submit = async () => {
     return
   }
 
-  const agreementOk = agreementChecked.value
-  agreementError.value = !agreementOk
+  agreementError.value = !agreementChecked.value
 
   const formOk = await validate()
-  if (!agreementOk || !formOk) return
+  if (!agreementChecked.value || !formOk) return
 
   const res = await userStore.login({
     username: form.username,
     code: form.code,
   })
+
   if (res.success) {
     uni.reLaunch({
-      url: '/pages/index/index',
+      url: LOGIN_FALLBACK_URL,
     })
   }
 }
+
 /* ---------------- 其他 ---------------- */
 
 const forgetPassword = () => {
   uni.navigateTo({
-    url: '/pages/reset-password/index',
+    url: RESET_PASSWORD_URL,
   })
 }
 </script>