MOSE-Official-Website-20250712/subPages/shop/pointsDetail.vue

<template>
  <view class="points-detail">
    <!-- 顶部导航栏 -->
 
    
    <!-- Tab切换栏 -->
    <view class="tab-container">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'income' }"
        @click="switchTab('income')"
      >
        <text class="tab-text">收入明细</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'expense' }"
        @click="switchTab('expense')"
      >
        <text class="tab-text">支出明细</text>
      </view>
    </view>
    
    <!-- 列表内容 -->
    <view class="list-container">
      <!-- 收入明细列表 -->
      <view v-if="activeTab === 'income'" class="income-list">
        <view 
          v-for="(item, index) in incomeList" 
          :key="index" 
          class="list-item"
        >
          <view class="item-left">
            <image src="/subPages/static/商品_积分@2x.png" class="item-icon"></image>
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-time">{{ item.time }}</text>
            </view>
          </view>
          <view class="item-right">
            <text class="points-text income">+{{ item.points }}积分</text>
          </view>
        </view>
      </view>
      
      <!-- 支出明细列表 -->
      <view v-if="activeTab === 'expense'" class="expense-list">
        <view 
          v-for="(item, index) in expenseList" 
          :key="index" 
          class="list-item"
        >
          <view class="item-left">
            <image src="/subPages/static/商品_积分@2x.png" class="item-icon"></image>
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-time">{{ item.time }}</text>
            </view>
          </view>
          <view class="item-right">
            <text class="points-text expense">-{{ item.points }}积分</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PointsDetail',
  data() {
    return {
      activeTab: 'income', // 当前激活的tab
      incomeList: [
        {
          title: '野广告清理活动(公益活动)',
          time: '2020-12-29 12:54:54',
          points: '20'
        },
        {
          title: '关爱自闭症儿童活(公益活动)',
          time: '2020-12-29 12:54:54',
          points: '30'
        },
        {
          title: '美的公司活动(品牌项目)',
          time: '2020-12-29 12:54:54',
          points: '10'
        },
        {
          title: '关爱自闭症儿童活(公益活动)',
          time: '2020-12-29 12:54:54',
          points: '15'
        },
        {
          title: '关爱自闭症儿童培训(培训活动)',
          time: '2020-12-29 12:54:54',
          points: '10'
        }
      ],
      expenseList: [
        {
          title: '兑换商品',
          time: '2020-12-29 12:54:54',
          points: '20'
        },
        {
          title: '兑换商品',
          time: '2020-12-29 12:54:54',
          points: '30'
        },
        {
          title: '兑换商品',
          time: '2020-12-29 12:54:54',
          points: '10'
        },
        {
          title: '兑换商品',
          time: '2020-12-29 12:54:54',
          points: '15'
        },
        {
          title: '兑换商品',
          time: '2020-12-29 12:54:54',
          points: '10'
        }
      ]
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    }
  }
}
</script>

<style lang="scss" scoped>
.points-detail {
  background: #f8f8f8;
  min-height: 100vh;
}

.tab-container {
  display: flex;
  background: #ffffff;
  margin: 20rpx;
  border-radius: 50rpx;
  padding: 8rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .tab-item {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
    transition: all 0.3s ease;
    
    &.active {
      background: #1488DB;
      
      .tab-text {
        color: #ffffff;
        font-weight: bold;
      }
    }
    
    .tab-text {
      font-size: 28rpx;
      color: #666666;
      transition: all 0.3s ease;
    }
  }
}

.list-container {
  padding: 0 20rpx;
}

.list-item {
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .item-left {
    display: flex;
    align-items: center;
    flex: 1;
    
    .item-icon {
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }
    
    .item-info {
      flex: 1;
      
      .item-title {
        font-size: 28rpx;
        color: #333333;
        display: block;
        margin-bottom: 10rpx;
        line-height: 1.4;
      }
      
      .item-time {
        font-size: 24rpx;
        color: #999999;
        display: block;
      }
    }
  }
  
  .item-right {
    .points-text {
      font-size: 28rpx;
      font-weight: bold;
      
      &.income {
        color: #1488DB;
      }
      
      &.expense {
        color: #ff4757;
      }
    }
  }
}
</style>