feat(登录页): 添加用户协议组件并更新登录按钮文本

Bob新需求把登录全改成短信登录 - 新增UserAgreement组件用于展示用户协议 - 移除忘记密码和切换登录方式链接 - 将登录按钮文本改为"登录/注册BEHALO宇宙账号" - 默认使用验证码登录方式 - 在登录表单底部添加用户协议确认提示

feat(登录页): 添加用户协议组件并更新登录按钮文本
Bob新需求把登录全改成短信登录 - 新增UserAgreement组件用于展示用户协议 - 移除忘记密码和切换登录方式链接 - 将登录按钮文本改为"登录/注册BEHALO宇宙账号" - 默认使用验证码登录方式 - 在登录表单底部添加用户协议确认提示
hookehuyr
Commit 191724902f5a8f81e15cabde787909c0278f5bb9 19172490 1 parent bdca3e39
Showing 3 changed files with 109 additions and 5 deletions
src/components.d.ts
src/components/ui/UserAgreement.vue
src/views/auth/LoginPage.vue
--- a/src/components.d.ts
View file @1917249
+++ b/src/components.d.ts
View file @1917249
@@ -28,6 +28,7 @@ declare module 'vue' {
     SummerCampCard: typeof import('./components/ui/SummerCampCard.vue')['default']
     TermsPopup: typeof import('./components/ui/TermsPopup.vue')['default']
     UploadVideoPopup: typeof import('./components/ui/UploadVideoPopup.vue')['default']
+    UserAgreement: typeof import('./components/ui/UserAgreement.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanButton: typeof import('vant/es')['Button']
     VanCalendar: typeof import('vant/es')['Calendar']
--- a/src/components/ui/UserAgreement.vue 0 → 100644
View file @1917249
+++ b/src/components/ui/UserAgreement.vue 0 → 100644
View file @1917249
+<!--
+ * @Date: 2025-06-05 11:06:42
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-06-05 11:08:29
+ * @FilePath: /mlaj/src/components/ui/UserAgreement.vue
+ * @Description: 文件描述
+-->
+<!--
+ * @Description: 用户协议组件
+-->
+<template>
+  <van-popup
+    v-model:show="show"
+    round
+    position="bottom"
+    :style="{ height: '90%' }"
+    teleport="body"
+  >
+    <div class="p-4">
+      <div class="text-xl font-bold text-center mb-4">美乐爱觉宇宙用户协议</div>
+      <div class="agreement-content overflow-y-auto h-[calc(100vh*0.8-120px)] px-2">
+        <h2 class="text-lg font-semibold mb-3">1. 协议的范围</h2>
+        <p class="mb-4 text-gray-700">欢迎您使用美乐爱觉宇宙平台服务！为使用美乐爱觉宇宙平台服务，您应当阅读并遵守本《用户协议》。请您务必审慎阅读、充分理解各条款内容。</p>
+
+        <h2 class="text-lg font-semibold mb-3">2. 账号注册</h2>
+        <p class="mb-4 text-gray-700">您在使用本服务前需要注册一个美乐爱觉宇宙账号。美乐爱觉宇宙账号应当使用手机号码绑定注册，请您使用尚未与美乐爱觉宇宙账号绑定的手机号码，以及未被平台根据本协议封禁的手机号码注册。</p>
+
+        <h2 class="text-lg font-semibold mb-3">3. 用户个人信息保护</h2>
+        <p class="mb-4 text-gray-700">我们非常重视用户个人信息的保护，保护用户个人信息是我们的基本原则之一。我们将会采取合理的措施保护用户的个人信息。除法律法规规定的情形外，未经用户许可我们不会向第三方公开、透露用户个人信息。</p>
+
+        <h2 class="text-lg font-semibold mb-3">4. 内容规范</h2>
+        <p class="mb-4 text-gray-700">您在使用本服务时需要遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德风尚和信息真实性等七条底线。</p>
+
+        <h2 class="text-lg font-semibold mb-3">5. 知识产权</h2>
+        <p class="mb-4 text-gray-700">美乐爱觉宇宙平台所包含的全部智力成果，包括但不限于平台内容、平台设计、源代码等，均属于平台所有。未经平台许可，任何人不得擅自使用。</p>
+
+        <h2 class="text-lg font-semibold mb-3">6. 服务的变更、中断和终止</h2>
+        <p class="mb-4 text-gray-700">我们可能会对服务内容进行变更，也可能会中断、中止或终止服务。对于付费服务，我们会在变更前通知您，并向您提供退款等必要的补偿。</p>
+
+        <h2 class="text-lg font-semibold mb-3">7. 违约处理</h2>
+        <p class="mb-4 text-gray-700">如果您违反本协议约定，我们有权视情况采取预先警示、限制或禁止使用全部或部分服务功能、封禁账号等措施。</p>
+
+        <h2 class="text-lg font-semibold mb-3">8. 其他条款</h2>
+        <p class="mb-4 text-gray-700">本协议所有条款的标题仅为阅读方便，本身并无实际涵义，不能作为本协议涵义解释的依据。如果本协议中任何一条被视为废止、无效或不可执行，应视为可分的且并不影响任何其余条款的有效性和可执行性。</p>
+      </div>
+      <div class="flex justify-center mt-4">
+        <van-button round type="primary" color="#4CAF50" block @click="handleClose">我已阅读并同意</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import { ref, defineExpose } from 'vue';
+
+const show = ref(false);
+
+const handleClose = () => {
+  show.value = false;
+};
+
+const openAgreement = () => {
+  show.value = true;
+};
+
+defineExpose({
+  openAgreement
+});
+</script>
+
+<style lang="less" scoped>
+.agreement-content {
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+}
+</style>
--- a/src/views/auth/LoginPage.vue
View file @1917249
+++ b/src/views/auth/LoginPage.vue
View file @1917249
@@ -79,7 +79,7 @@
             </div>
           </div>
-          <div class="flex justify-end space-x-4">
+          <!-- <div class="flex justify-end space-x-4">
             <div class="text-sm">
               <router-link
                 to="/forgotPwd"
@@ -97,7 +97,7 @@
                 {{ isVerifyCodeLogin ? '密码登录' : '验证码登录' }}
               </button>
             </div>
-          </div>
+          </div> -->
           <div>
             <button
@@ -106,7 +106,7 @@
               class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
               :class="{ 'opacity-70 cursor-not-allowed': loading }"
             >
-              {{ loading ? "登录中..." : "登 录" }}
+              {{ loading ? "登录中..." : "登录/注册BEHALO宇宙账号" }}
             </button>
           </div>
         </form>
@@ -145,7 +145,7 @@
           </div>
         </div> -->
-        <div class="text-center mt-6">
+        <!-- <div class="text-center mt-6">
           <p class="text-sm text-gray-600">
             还没有账号?
             <router-link
@@ -155,6 +155,18 @@
               立即注册
             </router-link>
           </p>
+        </div> -->
+        <div class="text-center mt-6">
+          <p class="text-sm text-gray-600">
+            登录即表示同意
+            <span
+              class="font-medium text-green-600 hover:text-green-500 cursor-pointer"
+              @click="userAgreementRef.openAgreement()"
+            >
+              《美乐爱觉宇宙用户协议》
+            </span>
+            <UserAgreement ref="userAgreementRef" />
+          </p>
         </div>
       </FrostedGlass>
     </div>
@@ -170,6 +182,9 @@ import { loginAPI, getUserInfoAPI } from "@/api/users";
 import { useTitle } from "@vueuse/core";
 import { smsAPI } from "@/api/common";
 import { showToast } from "vant";
+import UserAgreement from "@/components/ui/UserAgreement.vue";
+
+const userAgreementRef = ref(null);
 const handleInputFocus = () => {
   setTimeout(() => {
@@ -192,7 +207,7 @@ const password = ref("");
 const verificationCode = ref("");
 const error = ref("");
 const loading = ref(false);
-const isVerifyCodeLogin = ref(false);
+const isVerifyCodeLogin = ref(true);
 const countdown = ref(0);
 const isPhoneValid = ref(false);