Small_goose_Vue3/pages/login/index.vue

<template>
  <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,
      showServiceAgreement: false,
      showPrivacyPolicy: false
    }
  },
  methods: {
    // 处理协议勾选
    handleAgreementChange(e) {
      this.isAgreed = e.detail.value.length > 0
    },

    // 微信登录
    async handleWechatLogin() {
      if (!this.isAgreed) {
        uni.showToast({ title: '请先同意用户协议和隐私政策', icon: 'none' })
        return
      }
      
      try {
        // 获取微信登录凭证
        const loginResult = await new Promise((resolve, reject) => {
          uni.login({
            provider: 'weixin',
            success: (res) => resolve(res),
            fail: (err) => reject(err)
          });
        });
        
        if (!loginResult.code) {
          uni.showToast({ title: '获取登录凭证失败', icon: 'none' });
          return;
        }

        // 立即使用code，避免过期
        console.log('获取到的code:', loginResult.code);
        
        // 获取用户信息
        const userInfoResult = await new Promise((resolve, reject) => {
          uni.getUserInfo({
            provider: 'weixin',
            withCredentials: true,
            success: (res) => resolve(res),
            fail: (err) => reject(err)
          });
        });
        
        if (!userInfoResult.userInfo) {
          uni.showToast({ title: '获取用户信息失败', icon: 'none' });
          return;
        }
        
        // 调用后端登录接口
        const loginRes = await uni.request({
          url: 'http://localhost:9527/api/wx-login',
          method: 'POST',
          data: {
            code: loginResult.code,
            nickName: userInfoResult.userInfo.nickName,
            avatarUrl: userInfoResult.userInfo.avatarUrl,
            gender: userInfoResult.userInfo.gender.toString(),
            country: userInfoResult.userInfo.country,
            province: userInfoResult.userInfo.province,
            city: userInfoResult.userInfo.city,
            language: userInfoResult.userInfo.language,
            rawData: userInfoResult.rawData,
            signature: userInfoResult.signature,
            encryptedData: userInfoResult.encryptedData,
            iv: userInfoResult.iv
          },
          header: {
            'content-type': 'application/json'
          }
        });

        // 处理微信登录错误
        if (loginRes.data.errcode === 40029) {
          console.error('微信登录code无效，尝试重新获取');
          // 重新获取code并重试
          const newLoginResult = await new Promise((resolve, reject) => {
            uni.login({
              provider: 'weixin',
              success: (res) => resolve(res),
              fail: (err) => reject(err)
            });
          });

          if (!newLoginResult.code) {
            throw new Error('重新获取登录凭证失败');
          }

          // 使用新的code重试登录
          const retryRes = await uni.request({
            url: 'http://localhost:9527/api/wx-login',
            method: 'POST',
            data: {
              code: newLoginResult.code,
              nickName: userInfoResult.userInfo.nickName,
              avatarUrl: userInfoResult.userInfo.avatarUrl,
              gender: userInfoResult.userInfo.gender.toString(),
              country: userInfoResult.userInfo.country,
              province: userInfoResult.userInfo.province,
              city: userInfoResult.userInfo.city,
              language: userInfoResult.userInfo.language,
              rawData: userInfoResult.rawData,
              signature: userInfoResult.signature,
              encryptedData: userInfoResult.encryptedData,
              iv: userInfoResult.iv
            },
            header: {
              'content-type': 'application/json'
            }
          });

          if (retryRes.statusCode === 200 && !retryRes.data.errcode) {
            // 登录成功，保存token
            uni.setStorageSync('token', retryRes.data.data.token);
            uni.setStorageSync('userInfo', retryRes.data.data.userInfo);
            
            // 跳转到发现页
            uni.switchTab({
              url: '/pages/discover/index'
            });
          } else {
            throw new Error(retryRes.data.errmsg || '登录失败');
          }
        } else if (loginRes.statusCode === 200 && !loginRes.data.errcode) {
          // 登录成功，保存token
          uni.setStorageSync('token', loginRes.data.data.token);
          uni.setStorageSync('userInfo', loginRes.data.data.userInfo);
          
          // 跳转到发现页
          uni.switchTab({
            url: '/pages/discover/index'
          });
        } else {
          throw new Error(loginRes.data.errmsg || '登录失败');
        }
      } catch (error) {
        console.error('登录过程出错:', error);
        uni.showToast({ 
          title: error.message || '登录失败，请重试', 
          icon: 'none' 
        });
      }
    },

    // 跳转到验证码登录页面
    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>