community-front/subPages/login/login.vue

<template>
  <view class="login-container">
    <!-- 背景图 -->
    <image class="bg-image" :src="appBg" mode="aspectFill"></image>
    
    <!-- 内容区域 -->
    <view class="content">
      <!-- 标题图片 -->
      <view class="title-section">
        <!-- <image class="title-image" src="/subPages/static/登录_标题.png" mode="widthFix"></image> -->
         <view class="login-title">{{ loginTitle }}</view>
      </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="showPolicy">《服务协议与隐私条款》</text>
              <text class="agreement-text"> 以及 </text>
              <text class="agreement-link" @click="showPrivacy">《个人信息保护指引》</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uv-modal ref="modalPolicy" title="服务协议与隐私条款">
			<view class="slot-content">
				<rich-text :nodes="loginPolicy"></rich-text>
			</view>
		</uv-modal>
    <uv-modal ref="modalPrivacy" title="个人信息保护指引">
			<view class="slot-content">
				<rich-text :nodes="loginPrivacy"></rich-text>
			</view>
		</uv-modal>
  </view>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      isAgreed: false
    }
  },
  computed:{
    appBg(){
      return this.$store.state.configList['config_login_bg'].paramImage
    },
    loginTitle(){
      return this.$store.state.configList['config_login_title'].paramText
    },
    loginPolicy(){
      return this.$store.state.configList['config_login_policy'].paramTextarea
    },
    loginPrivacy(){
      return this.$store.state.configList['config_login_privacy'].paramTextarea
    },
  },
  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'
      })
    },
    
    // 显示服务协议
    showPolicy() {
      this.$refs.modalPolicy.open()
    },
    
    // 显示隐私条款
    showPrivacy() {
      this.$refs.modalPrivacy.open()
    }
  }
}
</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: 120rpx;
  .login-title{
    color: #1488db;
    font-size: 48rpx;
    font-weight: bold;
    position: relative;
  }
  .login-title::after{
    content: '';
    position: absolute;
    left: 20rpx;
    bottom: -8rpx;
    width: 100%;
    height: 24rpx;
    border-radius: 50%;
    background: linear-gradient(to bottom, #0085e4, transparent);
  }
}

// .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>