deepChartVueApp/pages/start/login/login.vue

<template>
  <view
    class="login-registration-container"
   
  >
    <!-- 自定义导航栏 -->
    <view class="custom-navbar"  :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <view class="nav-left">
        <text class="back-btn" @click="goToIndex">＜</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">登录</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" v-model="agreed" />
      <text class="agreement-text"
        >接受 <text class="link">用户协议</text> 和
        <text class="link">隐私政策</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="goToRegistration">注册</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 goToIndex() {
  // 返回上一页
  uni.navigateTo({ url: '/pages/start/index/index' });
}

function switchEmail() {
  // 切换到邮箱注册
  switchType.value = "Email";
}

function switchPhone() {
  // 切换到手机注册
  switchType.value = "Phone";
}

function register() {
  // 注册逻辑
  if (!email.value) {
    uni.showToast({
      title: "请输入邮箱地址",
      icon: "none",
    });
    return;
  }
  if (!agreed.value) {
    uni.showToast({
      title: "请同意用户协议和隐私政策",
      icon: "none",
    });
    return;
  }
  // 发送注册请求
  console.log("注册:", email.value);
}

function loginWithApple() {
  // Apple登录逻辑
  console.log("通过Apple登录");
}

function loginWithGoogle() {
  // Google登录逻辑
  console.log("通过Google登录");
}

function goToRegistration() {
  // 跳转到登录页
  uni.navigateTo({
    url: "/pages/start/Registration/Registration",
  });
}
</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 #e5e5e5;
  border-radius: 40rpx;
  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>