Small_goose_Vue3/pages/login/index.vue

<template>
  111
  <view class="login-container">
    <view class="login-box">
      <!-- Logo区域 -->
      <view class="logo-area">
        <image class="logo" src="/static/login.png" mode="aspectFit"></image>
        <text class="title">小鹅通</text>
        <text class="slogan">让知识分享更简单</text>
      </view>

      <!-- 登录方式区域 -->
      <view class="login-methods">

        <!-- 微信登录按钮 -->
        <button class="login-btn wechat" @click="handleWechatLogin">
          <text class="iconfont icon-wechat"></text>
          微信一键登录
        </button>

        <!-- 其他登录方式 -->
        <view class="other-login">
          <text class="divider">其他登录方式</text>
          <view class="login-options">
            <view class="option" @click="navigateToVerifyCodeLogin">
              <text class="iconfont icon-verify"></text>
              <text>手机号码登录</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 协议区域 -->
      <view class="agreement">
        <checkbox-group @change="handleAgreementChange">
          <label class="agreement-label">
            <checkbox :checked="isAgreed" color="#007AFF" />
            <text class="agreement-text">
              我已阅读并同意
              <text class="link" @click="openServiceAgreement">《服务协议》</text>
              和
              <text class="link" @click="openPrivacyPolicy">《隐私政策》</text>
            </text>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false
    }
  },
  methods: {
    // 处理协议勾选
    handleAgreementChange(e) {
      this.isAgreed = e.detail.value.length > 0
    },



    // 微信登录
    async handleWechatLogin() {
      if (!this.isAgreed) {
        uni.showToast({
          title: '请先同意服务协议和隐私政策',
          icon: 'none'
        })
        return
      }
      // 前端代码示例（微信小程序）
	wx.login({
	    success: function (res) {
	        if (res.code) {
	            console.log(res.code);
	            // 将 code 发送给后端
	            wx.request({
	                url: 'http://localhost:9527/api/wx-login',
	                method: 'POST',
	                // 设置请求头，指定请求体为 JSON 格式
	                header: {
	                    'content-type': 'application/json'
	                },
	                data: {
	                    code: res.code
	                },
	                success: function (response) {
	                    console.log(response.data);
	                },
	                fail: function (err) {
	                    console.error(err);
	                }
	            });
	        } else {
	            console.log('获取 code 失败！' + res.errMsg);
	        }
	    }
	});

    },

    // // 跳转到密码登录页面
    // navigateToPasswordLogin() {
    //   uni.navigateTo({
    //     url: '/pages/login/password'
    //   })
    // },

    // 跳转到验证码登录页面
    navigateToVerifyCodeLogin() {
      uni.navigateTo({
        url: '/pages/login/verify-code'
      })
    },

    // 打开服务协议
    openServiceAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/service'
      })
    },

    // 打开隐私政策
    openPrivacyPolicy() {
      uni.navigateTo({
        url: '/pages/agreement/privacy'
      })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-box {
  width: 100%;
  max-width: 750rpx;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 40rpx;
  padding: 80rpx 60rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform 0.3s ease;
  margin: 0 auto;

  &:hover {
    transform: translateY(-5rpx);
  }
}

.logo-area {
  text-align: center;
  margin-bottom: 60rpx;

  .logo {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 30rpx;
    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
  }

  .title {
    font-size: 48rpx;
    font-weight: 800;
    background: linear-gradient(45deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: 4rpx;
    margin-bottom: 20rpx;
    display: block;
  }

  .slogan {
    font-size: 32rpx;
    color: #666;
    font-weight: 500;
    letter-spacing: 2rpx;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(45deg, #34495e, #7f8c8d);
    -webkit-background-clip: text;
    color: transparent;
  }
}

.login-methods {
  margin-top: 80rpx;

  .login-btn {
    width: 100%;
    height: 100rpx;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
    font-size: 36rpx;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);

    .iconfont {
      margin-right: 16rpx;
      font-size: 44rpx;
    }

    &.primary {
      background: linear-gradient(45deg, #2c3e50, #3498db);
      color: #ffffff;

      &:active {
        transform: scale(0.98);
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.08);
      }
    }

    &.wechat {
      background: linear-gradient(45deg, #07C160, #0a9d4e);
      color: #ffffff;

      &:active {
        transform: scale(0.98);
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.08);
      }
    }
  }
}

.other-login {
  margin-top: 60rpx;

  .divider {
    display: block;
    text-align: center;
    color: #666666;
    font-size: 30rpx;
    margin-bottom: 50rpx;
    position: relative;
    font-weight: 500;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 140rpx;
      height: 1px;
      background: linear-gradient(90deg, transparent, #666666, transparent);
    }

    &::before {
      left: 50%;
      margin-left: -200rpx;
    }

    &::after {
      right: 50%;
      margin-right: -200rpx;
    }
  }

  .login-options {
    display: flex;
    justify-content: center;
    gap: 100rpx;

    .option {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #444444;
      font-size: 30rpx;
      transition: all 0.3s ease;
      padding: 24rpx;
      border-radius: 24rpx;

      &:active {
        background: rgba(0, 0, 0, 0.05);
      }

      .iconfont {
        font-size: 64rpx;
        margin-bottom: 16rpx;
        color: #2c3e50;
        transition: transform 0.3s ease;
      }

      &:hover .iconfont {
        transform: scale(1.1);
      }
    }
  }
}

.agreement {
  margin-top: 80rpx;
  text-align: center;

  .agreement-label {
    display: inline-flex;
    align-items: center;
    font-size: 26rpx;
    color: #666666;
  }

  .agreement-text {
    margin-left: 10rpx;
  }

  .link {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -2rpx;
      left: 0;
      width: 100%;
      height: 1px;
      background: #3498db;
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    &:active::after {
      transform: scaleX(1);
    }
  }
}
</style>