englishread-front/subPages/user/promote.vue

<template>
  <view class="promote-page">

    <uv-status-bar></uv-status-bar>
    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 推广官图片 -->
      <view class="promote-image-container">
        <uv-icon name="arrow-left" size="20" color="black"  @click="goBack"></uv-icon>
        <view :style="{flex: 1, justifyContent: 'center', display: 'flex'}">
          <image 
            class="promote-image" 
            src="/static/推广官.png" 
            mode="widthFix"
          ></image>
        </view>
      </view>

      <!-- 推广标语图片 -->
      <view class="slogan-container">
        <image 
          class="slogan-image" 
          src="/static/推广标语.png" 
          mode="widthFix"
        ></image>
      </view>


    </view>

    <!-- 外部大容器 -->
    <view class="main-container">
      <!-- 个人信息容器 -->
      <view class="profile-container">
        <image class="profile-avatar" src="/static/待上传头像.png" mode="aspectFill"></image>
        <view class="profile-info">
          <text class="profile-name">战斗世界</text>
          <text class="profile-id">ID: 5625354</text>
        </view>
        <view class="profile-stats">
          <view class="stat-item">
            <text class="stat-number">888</text>
            <text class="stat-label">推广人数</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">341</text>
            <text class="stat-label">总佣金</text>
          </view>
        </view>
      </view>
      
      <!-- 功能按钮区域 -->
      <view class="function-buttons">
        <view class="function-item" @click="goTeam">
          <image class="function-icon" src="/static/团队图标.png" mode="aspectFit"></image>
          <text class="function-text">我的团队</text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="/static/二维码图标.png" mode="aspectFit"></image>
          <text class="function-text">我的二维码</text>
        </view>
        <view class="function-item" @click="goCash">
          <image class="function-icon" src="/static/提现图标.png" mode="aspectFit"></image>
          <text class="function-text">提现</text>
        </view>
      </view>
      
      <!-- 余额显示 -->
      <view class="balance-section">
        <text class="balance-label">余额</text>
        <text class="balance-amount">¥88.32</text>
        <uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
      </view>
      
      <!-- 转账记录容器 -->
      <view class="record-container">
        <view class="record-list">
          <view class="record-item" v-for="(item, index) in recordList" :key="index">
            <view class="record-avatar">
              <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
              <text class="avatar-name">{{ item.avatarName }}</text>
            </view>
            <view class="record-info">
              <text class="record-title">{{ item.title }}</text>
              <text class="record-date">{{ item.date }}</text>
            </view>
            <view class="record-amount">
              <text class="amount">{{ item.amount }}</text>
              <text class="status" :class="item.statusClass">{{ item.status }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
     
     <!-- 底部固定按钮 -->
    <view class="bottom-button-container">
      <uv-button :custom-style="{
        height: '82rpx',
        borderRadius: '198rpx',
        background: '#06DADC',
        border: '2rpx solid #06DADC',
        lineHeight: '82rpx',
        fontSize: '36rpx'
        }" type="primary">分享</uv-button>
        <uv-safe-bottom></uv-safe-bottom>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recordList: [
        {
          avatar: '/static/待上传头像.png',
          title: '分享提成获得奖励',
          date: '2025-03-18',
          amount: '+5',
          status: '已领取，微信打款',
          statusClass: 'status-received',
          avatarName: '战斗世界'
        },
        {
          avatar: '/static/待上传头像.png',
          title: '分享提成获得奖励',
          date: '2025-03-18',
          amount: '+5',
          status: '领取',
          statusClass: 'status-available',
          avatarName: '战斗世界'
        },
        {
          avatar: '/static/待上传头像.png',
          title: '分享提成获得奖励',
          date: '2025-03-18',
          amount: '+5',
          status: '已领取，线下打款',
          statusClass: 'status-received',
          avatarName: '战斗世界'
        },
        {
          avatar: '/static/待上传头像.png',
          title: '分享提成获得奖励',
          date: '2025-03-18',
          amount: '+5',
          status: '领取',
          statusClass: 'status-available',
          avatarName: '战斗世界'
        },
        {
          avatar: '/static/待上传头像.png',
          title: '分享提成获得奖励',
          date: '2025-03-18',
          amount: '+5',
          status: '领取',
          statusClass: 'status-available',
          avatarName: '战斗世界'
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    goTeam() {
      uni.navigateTo({
        url: '/subPages/user/team'
      })
    },
    goCash() {
      uni.navigateTo({
        url: '/subPages/user/cash'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.promote-page {
  min-height: 100vh;
  background: linear-gradient(124deg, #22F2EB 0%, #24B0F6 30%);
  // background: linear-gradient(124deg, #22F2EB 0%, #24B0F6 100%);

}

.content {
  padding: 0rpx 40rpx 0;
  
  .promote-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
    align-items: center;
    
    .promote-image {
      margin: 0 auto;
      width: 168rpx;
    }
  }
  
  .slogan-container {
    display: flex;
    justify-content: center;
    margin-bottom: 80rpx;
    
    .slogan-image {
      width: 670rpx;
    }
  }
}

// 外部大容器
.main-container {
  width: 100%;
border-radius: 48rpx;
border: 2rpx solid #06DADC12;
box-sizing: border-box;
padding: 40rpx;
padding-bottom: 200rpx;
background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);

  // 个人信息容器
  .profile-container {
    background: #fff;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    

    border-radius: 48rpx;
    border-width: 2rpx;
    justify-content: space-between;
    background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
    // background: red;
    border: 2rpx solid #06DADC12;
    // padding-top: 32rpx;
    padding-right: 40rpx;
    // padding-bottom: 32rpx;
    padding-left: 40rpx;
    height: 200rpx;
    .profile-avatar {
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }
    
    .profile-info {
      flex: 1;
      
      .profile-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .profile-id {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .profile-stats {
      display: flex;
      
      .stat-item {
        text-align: center;
        margin-left: 60rpx;
        
        .stat-number {
          display: block;
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .stat-label {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
  
  // 功能按钮区域
  .function-buttons {
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 48rpx;
    
    .function-item {
      display: flex;
      // flex-direction: column;
      align-items: center;
      
      gap: 16rpx;
      border-right: 1px solid #06DADC;
      padding-right: 30rpx;
      &:nth-child(3) {
        border-right: none;
      }
      .function-icon {
        width: 46rpx;
        height: 46rpx;
        // margin-bottom: 16rpx;
      }
      
      .function-text {
        font-size: 24rpx;
        color: #181818;
      }
    }
  }
  
  // 余额显示
  .balance-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;
    
    .balance-label {
      font-size: 32rpx;
      color: #191919;
      font-weight: 500;
    }
    
    .balance-amount {
      font-size: 32rpx;
      font-weight: 500;
      color: #191919;
      flex: 1;
      margin-left: 20rpx;
    }
  }
  
  // 转账记录容器
  .record-container {
    .record-list {
      
      border: 1px solid #F0F0F0;
      border-radius: 24rpx;

      // background: red;
      .record-item {
        height: 116rpx;
        background: #fff;
        // border-radius: 16rpx;
        padding: 16rpx 32rpx;
        // margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid #F1F1F1 ;
        // margin-right: 24rpx;
        // box-sizing: border-box;
        
        .record-avatar{
          display: flex;
          align-items: center;
          flex-direction: column;
          gap: 12rpx;
          .avatar-name {
            font-size: 24rpx;
            color: #999;
          }
          .avatar {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            // margin-right: 24rpx;
          }
        }
        
        .record-info {
          flex: 3;
          text-align: center;
          .record-title {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .record-date {
            font-size: 26rpx;
            color: #A3A3A3;
          }
        }
        
        .record-amount {
          flex: 2;
          text-align: center;
          
          .amount {
            display: block;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .status {
            font-size: 26rpx;
            // padding: 8rpx 16rpx;
            border-radius: 20rpx;
            
            &.status-received {
              // background: #f0f0f0;
              color: #A3A3A3;
            }
            
            &.status-available {
              // background: #22F2EB;
                          padding: 3rpx 16rpx;

              color: $primary-color;
              border: 2rpx solid  $primary-color;
            }
          }
        }
      }
    }
  }
}

// 底部固定按钮
.bottom-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx 40rpx;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #F1F1F1;
  // height: 143rpx;
  // backdrop-filter: blur(10rpx);
  
}
</style>