fix: 移动端未勾选协议点击登录无效果

src/locales/langs/en.yaml

@@ -242,6 +242,9 @@ login_module:
   agreement_and: 'and'
   confirm_to_logout: 'Confirm to logout?'
   you_can_login_again_after_logout: 'You can login again after logout'
+  please_review_and_accept_the_agreement: 'Please review and accept agreement'
+  agree_and_continue: 'Agree & Continue'
+  disagree: 'Disagree'
 
 reset_password_module:
   reset_login_password: 'Reset login password'

src/locales/langs/zh-cn.yaml

@@ -242,6 +242,9 @@ login_module:
   agreement_and: '与'
   confirm_to_logout: '确认要退出登录吗？'
   you_can_login_again_after_logout: '退出登录仍可登录此账号'
+  please_review_and_accept_the_agreement: '请阅读并同意以下协议'
+  agree_and_continue: '同意并继续'
+  disagree: '不同意'
 
 reset_password_module:
    reset_login_password: '重置登录密码'

src/locales/langs/zh-hk.yaml

@@ -243,6 +243,9 @@ login_module:
   agreement_and: '與'
   confirm_to_logout: '確認要退出登錄嗎？'
   you_can_login_again_after_logout: '退出登錄仍可登錄此賬號'
+  please_review_and_accept_the_agreement: '請閲讀並同意以下協議'
+  agree_and_continue: '同意並繼續'
+  disagree: '不同意'
 
 reset_password_module:
   reset_login_password: '重置登录密码'

src/views/login/h5-login.vue

@@ -7,6 +7,7 @@ import SparkMD5 from 'spark-md5'
 import { Down, Mail, Lock, Phone } from '@icon-park/vue-next'
 import isEmail from 'validator/es/lib/isEmail'
 import { useRoute, useRouter } from 'vue-router'
+import 'vant/es/dialog/style'
 import { ss } from '@/utils/storage'
 import { fetchEmailCode, fetchLogin, fetchSMSCode } from '@/apis/user'
 import { useUserStore } from '@/store/modules/user'
@@ -66,6 +67,8 @@ const countdownActive = ref(true)
 const isShowCountdown = ref(false)
 const countdownDuration = ref<number>(60000)
 
+const showAgreeTermsDialog = ref(false)
+
 const userAgreementUrl = ref('https://tcn9nhw8kfwe.feishu.cn/wiki/Y1ELwRVESi9jw9kshc0chT2ZnSf?fromScene=spaceOverview')
 const privacyPolicyUrl = ref('https://tcn9nhw8kfwe.feishu.cn/wiki/OBzxwhGBviHP8lk9ca0chUh9nCc?fromScene=spaceOverview')
 
@@ -144,6 +147,14 @@ const isEnglishLanguage = computed(() => {
   return systemLanguageStore.currentLanguage === 'en'
 })
 
+const agreementPrefix = computed(() => {
+  return isEnglishLanguage.value ? '<' : '《'
+})
+
+const agreementSuffix = computed(() => {
+  return isEnglishLanguage.value ? '>' : '》'
+})
+
 watchEffect(() => {
   let timeStringDraft = ''
 
@@ -274,6 +285,11 @@ function handleLoginMethodChange(method: LoginMethod) {
 
 // 登录
 function handleLoginSubmit(method: LoginMethod) {
+  if (!isAgreeTerms.value) {
+    showAgreeTermsDialog.value = true
+    return
+  }
+
   let payload: LoginPayload = {
     loginChannel: 'MEMBER_PLATFOMR_PW',
     account: '',
@@ -359,6 +375,12 @@ function handleLoginSubmit(method: LoginMethod) {
   })
 }
 
+function handleAgreeAndContinue() {
+  showAgreeTermsDialog.value = false
+  isAgreeTerms.value = true
+  handleLoginSubmit(currentLoginMethod.value)
+}
+
 // 打开用户协议
 function handleOpenUserAgreement() {
   window.open(userAgreementUrl.value, '_blank')
@@ -453,7 +475,8 @@ function handleOpenPrivacyPolicy() {
             size="large"
             block
             :loading="loginBtnLoading"
-            :disabled="!smsLoginForm.phoneNumber || !smsLoginForm.code || !isAgreeTerms"
+            :disabled="!smsLoginForm.phoneNumber || !smsLoginForm.code"
+            :focusable="false"
             @click="handleLoginSubmit('sms')"
           >
             {{ t('common_module.login') }}
@@ -502,7 +525,8 @@ function handleOpenPrivacyPolicy() {
             size="large"
             block
             :loading="loginBtnLoading"
-            :disabled="!passwordLoginForm.account || !passwordLoginForm.password || !isAgreeTerms"
+            :disabled="!passwordLoginForm.account || !passwordLoginForm.password"
+            :focusable="false"
             @click="handleLoginSubmit('password')"
           >
             {{ t('common_module.login') }}
@@ -567,7 +591,8 @@ function handleOpenPrivacyPolicy() {
             size="large"
             block
             :loading="loginBtnLoading"
-            :disabled="!emailLoginForm.email || !emailLoginForm.code || !isAgreeTerms"
+            :disabled="!emailLoginForm.email || !emailLoginForm.code"
+            :focusable="false"
             @click="handleLoginSubmit('email')"
           >
             {{ t('common_module.login') }}
@@ -618,6 +643,33 @@ function handleOpenPrivacyPolicy() {
         </div>
       </div>
     </div>
+
+    <van-dialog v-model:show="showAgreeTermsDialog" :title="t('login_module.please_review_and_accept_the_agreement')">
+      <div class="my-[16px] flex justify-center gap-[6px] text-center">
+        <span class="text-[14px] text-[#518AFF]" @click="handleOpenUserAgreement">
+          {{ agreementPrefix }}{{ t('login_module.agreement_terms') }}{{ agreementSuffix }}
+        </span>
+
+        <span class="text-[14px] text-[#518AFF]" @click="handleOpenPrivacyPolicy">
+          {{ agreementPrefix }}{{ t('login_module.agreement_privacy') }}{{ agreementSuffix }}
+        </span>
+      </div>
+
+      <template #footer>
+        <div class="flex flex-col gap-[8px] px-[24px] pb-[8px] pt-[8px]">
+          <van-button type="primary" color="#000DFF" round class="h-[36px]" @click="handleAgreeAndContinue">
+            {{ t('login_module.agree_and_continue') }}
+          </van-button>
+
+          <span
+            class="text-gray-font-color h-[28px] text-center text-[14px] leading-7"
+            @click="showAgreeTermsDialog = false"
+          >
+            {{ t('login_module.disagree') }}
+          </span>
+        </div>
+      </template>
+    </van-dialog>
   </div>
 </template>
 

types/locales.d.ts

@@ -248,6 +248,9 @@ declare namespace I18n {
       agreement_and: string
       confirm_to_logout: string
       you_can_login_again_after_logout: string
+      please_review_and_accept_the_agreement: string
+      agree_and_continue: string
+      disagree: string
     }
 
     reset_password_module: {