community-front/subPages/login/login.vue

<template>
  <view class="login-container">
    <!-- 背景图 -->
    <image class="bg-image" src="/subPages/static/登录_背景图.png" mode="aspectFill"></image>
    
    <!-- 内容区域 -->
    <view class="content">
      <!-- 标题图片 -->
      <view class="title-section">
        <image class="title-image" src="/subPages/static/登录_标题.png" mode="widthFix"></image>
      </view>
      
      <!-- 按钮区域 -->
      <view class="button-section">
        <!-- 授权手机号登录按钮 -->
        <view class="login-btn primary" @click="phoneLogin">
          <text class="btn-text">授权手机号登录</text>
        </view>
        
        <!-- 取消登录按钮 -->
        <view class="login-btn secondary" @click="cancelLogin">
          <text class="btn-text">取消登录</text>
        </view>
        
        <!-- 协议文字 -->
        <view class="agreement-text-container">
          <view class="agreement-checkbox-row">
            <view class="custom-checkbox" @click="toggleAgreement">
              <uv-icon 
                v-if="!isAgreed" 
                name="checkmark-circle" 
                size="20" 
                color="#cccccc">
              </uv-icon>
              <uv-icon 
                v-else 
                name="checkmark-circle-fill" 
                size="20" 
                color="#1488DB">
              </uv-icon>
            </view>
            <view class="agreement-text-content">
              <text class="agreement-text">阅读并同意我们的 </text>
              <text class="agreement-link" @click="showAgreement">《服务协议与隐私条款》</text>
              <text class="agreement-text"> 以及 </text>
              <text class="agreement-link" @click="showPrivacy">《个人信息保护指引》</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      isAgreed: false
    }
  },
  methods: {
    // 切换协议同意状态
    toggleAgreement() {
      this.isAgreed = !this.isAgreed;
      console.log('协议同意状态:', this.isAgreed);
    },
    
    // 手机号授权登录
    phoneLogin() {
      if (!this.isAgreed) {
        uni.showToast({
          title: '请先同意协议条款',
          icon: 'none'
        });
        return;
      }
      
      uni.login({
        provider: 'weixin',
        success: async (loginRes) => {
          const res = await this.$api.login.login({
            code: loginRes.code
          })
          uni.setStorageSync('token', res.result.token)
          const userInfo = res.result.userInfo
          if (!userInfo.headImage || !userInfo.nickName || !userInfo.phone) {
            uni.showToast({
              title: '请先完善个人信息',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateTo({
                url: '/subPages/login/userInfo'
              })

            }, 500)
          }else {
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              })
            }, 500)
          }
          
        },
        fail: (error) => {
          uni.showToast({
            title: `${error.errMsg}`,
            icon: 'none'
          })
        }
      })
    },
    
    // 取消登录
    cancelLogin() {
      console.log('取消登录');
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    
    // 显示服务协议
    showAgreement() {
      uni.showModal({
        title: '服务协议',
        content: '用户服务协议\n\n为使用小程序名称的服务，您应当阅读并遵守《用户服务协议》(以下简称"本协议")。请您务必审慎阅读、充分理解各条款内容，特别是免责或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。限制、免责条款或者其他涉及您重大权益的条款可能以加粗、加下划线等形式提示您重点注意。\n\n除非您已阅读并接受本协议所有条款，否则您无权下载、安装或使用本软件及其相关服务。您的下载、安装、使用、获取账号、登录等行为即视为您已阅读并同意上述协议的约束。\n\n【协议的范围】\n本协议及《隐私政策》是您与小程序名称经营者之间关于用户使用小程序名称下',
        showCancel: true,
        cancelText: '拒绝',
        confirmText: '同意',
        success: function (res) {
          if (res.confirm) {
            console.log('用户同意服务协议');
          } else if (res.cancel) {
            console.log('用户拒绝服务协议');
          }
        }
      });
    },
    
    // 显示隐私条款
    showPrivacy() {
      uni.showModal({
        title: '隐私政策',
        content: '【小程序名称】(以下称"我们")深知个人信息安全的重要性，我们将按照法律法规的规定，保护您的个人信息及隐私安全。我们制定本"隐私政策"并特别提示：希望您在使用【小程序名称】及相关服务前仔细阅读并理解本隐私政策，以便您出当的选择。\n\n本隐私政策将帮助您了解：\n• 我们会遵循隐私政策收集、使用您的信息，但不会仅因为您同意本隐私政策而采用强制捆绑的方式一揽子收集个人信息。\n• 当您使用或开启相关功能或使用服务时，为实现功能、服务所必需，我们会收集、使用相关信息。除非是为实现基本业务功能或根据法律法规要求所必需的必要信息，您均可以拒绝提供且不影响其他功能或服务。我们将在隐私政策',
        showCancel: true,
        cancelText: '拒绝',
        confirmText: '同意',
        success: function (res) {
          if (res.confirm) {
            console.log('用户同意隐私政策');
          } else if (res.cancel) {
            console.log('用户拒绝隐私政策');
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 40rpx;
}

.title-section {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 300rpx;
  
  .title-image {
    width: 80%;
    max-width: 500rpx;
  }
}

.welcome-section {
  display: flex;
  justify-content: center;
  margin-bottom: 100rpx;
  
  .welcome-box {
    border: 2rpx dashed #1488DB;
    border-radius: 10rpx;
    padding: 20rpx 40rpx;
    background: rgba(255, 255, 255, 0.9);
    
    .welcome-text {
      font-size: 28rpx;
      color: #1488DB;
      font-weight: 500;
    }
  }
}

.button-section {
  flex: 1;
  margin-bottom: 60rpx;
  align-items: flex-start;
  
  .login-btn {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
    
    &.primary {
      background: #1488DB;
      
      .btn-text {
        color: #ffffff;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
    
    &.secondary {
      background: rgba(255, 255, 255, 0.9);
      border: 2rpx solid #cccccc;
      
      .btn-text {
        color: #666666;
        font-size: 32rpx;
      }
    }
  }
  
  .agreement-text-container {
    margin-top: 40rpx;
    
    .agreement-checkbox-row {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .custom-checkbox {
        margin-right: 10rpx;
        display: flex;
        align-items: center;
      }
      
      .agreement-text-content {
        flex: 1;
        text-align: left;
        
        .agreement-text {
          font-size: 24rpx;
          color: #666666;
        }
        
        .agreement-link {
          font-size: 24rpx;
          color: #1488DB;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>