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.createTime }}</text>
            </view>
          </view>
          <view class="item-right">
            <text class="points-text income">+{{ item.score }}积分</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.createTime }}</text>
            </view>
          </view>
          <view class="item-right">
            <text class="points-text expense">-{{ item.score }}积分</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PointsDetail',
  data() {
    return {
      activeTab: 'income', // 当前激活的tab
      incomeList: [],
      expenseList: [],
      pageNo: 1
      // type: 0  // 0-收入 1-支出
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
      this.initData()
      this.queryScoreList()
    },
    initData() {
      this.pageNo = 1
      this.incomeList = []
      this.expenseList = []
    },
    async queryScoreList() {
      const res =  await this.$api.score.queryScoreList({
        pageNo: this.pageNo,
        pageSize: 10,
        type: this.activeTab === 'income' ? 0 : 1
      })
      if (res.result.records.length) {
        if (this.activeTab === 'income') {
          this.incomeList.push(...res.result.records)
        } else {  
          this.expenseList.push(...res.result.records)
        }
        this.pageNo++
      }else {
        uni.showToast({
          title: '没有更多数据了',
          icon: 'none'
        })
      }
    }
  },
  onLoad() {
    this.queryScoreList()
  },
  onReachBottom() {
    this.queryScoreList()
  },
  async onPullDownRefresh() {
    this.initData()
    await this.queryScoreList()
    uni.stopPullDownRefresh()
  }
}
</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>