You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
399 lines
7.6 KiB
399 lines
7.6 KiB
<template>
|
|
<view class="login-registration-container">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="custom-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
|
|
<view class="nav-left">
|
|
<text class="back-btn" @click="goToLogin">＜</text>
|
|
</view>
|
|
<view class="nav-right">
|
|
<text class="headphone-btn">🎧</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Logo -->
|
|
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
|
|
|
<!-- 欢迎语 -->
|
|
<text class="welcome-text">欢迎来到 DeepChart</text>
|
|
|
|
<!-- 邮箱/手机号切换 -->
|
|
<view class="switch-container">
|
|
<text
|
|
class="switch-item"
|
|
:class="{ active: switchType === 'Email' }"
|
|
@click="switchEmail">邮箱</text>
|
|
<text
|
|
class="switch-item"
|
|
:class="{ active: switchType === 'Phone' }"
|
|
@click="switchPhone">手机号</text>
|
|
</view>
|
|
|
|
<!-- 输入框 -->
|
|
<view class="input-container">
|
|
<input
|
|
v-if="switchType === 'Email'"
|
|
class="input-field"
|
|
type="text"
|
|
placeholder="输入邮箱地址"
|
|
v-model="email"
|
|
/>
|
|
<input
|
|
v-else
|
|
class="input-field"
|
|
type="text"
|
|
placeholder="输入手机号"
|
|
v-model="phone"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 用户协议 -->
|
|
<view class="agreement-container">
|
|
<checkbox class="checkbox" @click="checkboxClick"/>
|
|
<text class="agreement-text"
|
|
>接受 <text class="link" @click="openAgreement">用户协议</text> 和
|
|
<text class="link" @click="openPrivacy">隐私政策</text></text
|
|
>
|
|
</view>
|
|
|
|
<!-- 注册按钮 -->
|
|
<button class="register-btn" @click="register">注册</button>
|
|
|
|
<!-- 或者 -->
|
|
<text class="or-text">或者</text>
|
|
|
|
<!-- 第三方登录 -->
|
|
<view class="third-party-login">
|
|
<view class="third-party-btn" @click="loginWithApple">
|
|
<image
|
|
class="apple-icon"
|
|
src="/static/apple-icon.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
<text class="third-party-text">通过 Apple 继续</text>
|
|
</view>
|
|
|
|
<view class="third-party-btn" @click="loginWithGoogle">
|
|
<image
|
|
class="google-icon"
|
|
src="/static/google-icon.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
<text class="third-party-text">通过 Google 继续</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 已有账号 -->
|
|
<view class="existing-account">
|
|
<text class="account-text">已有账号？</text>
|
|
<text class="login-link" @click="goToLogin">登录</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const email = ref("");
|
|
const phone = ref("");
|
|
const agreed = ref(false);
|
|
const switchType = ref("Email"); // 默认是邮箱注册
|
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
|
|
|
function goBack() {
|
|
// 返回上一页
|
|
uni.navigateBack(-1);
|
|
}
|
|
|
|
function switchEmail() {
|
|
// 切换到邮箱注册
|
|
switchType.value = "Email";
|
|
}
|
|
|
|
function switchPhone() {
|
|
// 切换到手机注册
|
|
switchType.value = "Phone";
|
|
}
|
|
|
|
function checkboxClick() {
|
|
agreed.value = !agreed.value;
|
|
}
|
|
|
|
function openAgreement() {
|
|
// 打开用户协议
|
|
console.log("打开用户协议");
|
|
uni.navigateTo({
|
|
url: "/pages/start/agreement/agreement",
|
|
});
|
|
}
|
|
|
|
function openPrivacy() {
|
|
// 打开隐私政策
|
|
console.log("打开隐私政策");
|
|
uni.navigateTo({
|
|
url: "/pages/start/privacy/privacy",
|
|
});
|
|
}
|
|
function register() {
|
|
// 注册逻辑
|
|
if (switchType.value === "Email" && !email.value) {
|
|
uni.showToast({
|
|
title: "请输入邮箱地址",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (switchType.value === "Phone" && !phone.value) {
|
|
uni.showToast({
|
|
title: "请输入手机号",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!agreed.value) {
|
|
uni.showToast({
|
|
title: "请同意用户协议和隐私政策",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 发送注册请求
|
|
if (switchType.value === "Email") {
|
|
console.log("邮箱注册:", email.value);
|
|
} else {
|
|
console.log("手机号注册:", phone.value);
|
|
}
|
|
}
|
|
|
|
function loginWithApple() {
|
|
// Apple登录逻辑
|
|
console.log("通过Apple登录");
|
|
}
|
|
|
|
function loginWithGoogle() {
|
|
// Google登录逻辑
|
|
console.log("通过Google登录");
|
|
}
|
|
|
|
function goToLogin() {
|
|
// 跳转到登录页
|
|
uni.navigateTo({
|
|
url: "/pages/start/login/login",
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-registration-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 40rpx;
|
|
height: 100vh;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* 自定义导航栏样式 */
|
|
.custom-navbar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
/* z-index: 999; */
|
|
width: 90%;
|
|
height: 80rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10rpx 40rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.nav-left,
|
|
.nav-right {
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.back-btn,
|
|
.headphone-btn {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.logo {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-bottom: 60rpx;
|
|
border-radius: 20%;
|
|
}
|
|
|
|
.welcome-text {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 60rpx;
|
|
text-align: left;
|
|
align-self: flex-start;
|
|
}
|
|
.switch-container {
|
|
display: flex;
|
|
margin-bottom: 40rpx;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.switch-item {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
padding: 10rpx 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.switch-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60%; /* 控制边框宽度 */
|
|
height: 2rpx;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.switch-item.active {
|
|
color: #333333;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.switch-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 60rpx;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 30%; /* 控制边框宽度 */
|
|
height: 7rpx;
|
|
background-color: #333333;
|
|
}
|
|
|
|
.input-container {
|
|
width: 100%;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.input-field {
|
|
width: 90%;
|
|
height: 80rpx;
|
|
border-radius: 20rpx;
|
|
border: 2rpx solid #e5e5e5;
|
|
padding: 0 30rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.agreement-container {
|
|
/* display: flex; */
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
margin-right: 30rpx;
|
|
/* flex: content; */
|
|
}
|
|
|
|
.agreement-text {
|
|
margin-left: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.link {
|
|
color: #333333;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.register-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: #333333;
|
|
color: white;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border-radius: 40rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.or-text {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.third-party-login {
|
|
width: 100%;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
.third-party-text {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.third-party-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: white;
|
|
border: 2rpx solid rgb(249, 249, 249);
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.apple-icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.google-icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.existing-account {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.account-text {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.login-link {
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-left: 10rpx;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|