Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
19172490 1 parent bdca3e39

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

Bob新需求把登录全改成短信登录

- 新增UserAgreement组件用于展示用户协议
- 移除忘记密码和切换登录方式链接
- 将登录按钮文本改为"登录/注册BEHALO宇宙账号"
- 默认使用验证码登录方式
- 在登录表单底部添加用户协议确认提示
Inline Side-by-side
Showing 3 changed files with 109 additions and 5 deletions
......@@ -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']
......
<!--
* @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>
......@@ -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);
......