integral-shop/single_uniapp22miao/pages/sub-pages/balance/index.vue

<template>
  <view class="balance-page">
    <!-- 余额卡片 -->
    <view class="balance-card">
      <view class="card-bg"></view>
      <view class="card-content">
        <view class="balance-label">分红余额（元）</view>
        <view class="balance-amount">{{ balanceInfo.balance || '0.00' }}</view>
        <view class="balance-actions">
          <button class="action-btn" @click="goToWithdraw">提现</button>
        </view>
      </view>
    </view>
    
    <!-- Tab切换 -->
    <view class="tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ 'active': currentTab === index }"
        @click="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>
    
    <!-- 明细列表 -->
    <scroll-view 
      scroll-y 
      class="scroll-view"
      @scrolltolower="loadMore"
    >
      <view class="record-list">
        <view 
          v-for="(item, index) in recordList" 
          :key="index"
          class="record-item"
        >
          <view class="item-left">
            <view class="item-title">{{ item.title }}</view>
            <view class="item-time">{{ item.created_at }}</view>
          </view>
          <view class="item-right">
            <view class="item-amount" :class="item.type == 1 ? 'income' : 'expense'">
              {{ item.type == 1 ? '+' : '-' }}{{ item.amount }}
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more" v-if="recordList.length > 0">
          <text v-if="loading">加载中...</text>
          <text v-else-if="noMore">没有更多了</text>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="recordList.length === 0 && !loading">
          <text class="icon">💰</text>
          <text class="text">暂无记录</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balanceInfo: {},
      tabs: ['全部', '收入', '支出'],
      currentTab: 0,
      recordList: [],
      page: 1,
      limit: 20,
      loading: false,
      noMore: false
    }
  },
  
  onLoad() {
    this.loadBalanceInfo();
    this.loadRecordList();
  },
  
  methods: {
    // 加载余额信息
    async loadBalanceInfo() {
      try {
        const res = await this.$http.post('/api/user/info');
        if (res.code === 0) {
          this.balanceInfo = res.data;
        }
      } catch (error) {
        console.error('加载余额失败:', error);
      }
    },
    
    // 切换Tab
    switchTab(index) {
      if (this.currentTab === index) return;
      
      this.currentTab = index;
      this.page = 1;
      this.noMore = false;
      this.recordList = [];
      this.loadRecordList();
    },
    
    // 加载记录列表
    async loadRecordList() {
      if (this.loading || this.noMore) return;
      
      this.loading = true;
      
      try {
        const res = await this.$http.get('/api/money/list', {
          page: this.page,
          limit: this.limit,
          cate: 1, // 1:分红 2:优惠券
          type: this.currentTab === 0 ? '' : this.currentTab // 0:全部 1:收入 2:支出
        });
        
        if (res.code === 0) {
          const list = res.data.list || [];
          
          if (list.length < this.limit) {
            this.noMore = true;
          }
          
          this.recordList = this.page === 1 ? list : [...this.recordList, ...list];
        }
      } catch (error) {
        console.error('加载记录失败:', error);
      } finally {
        this.loading = false;
      }
    },
    
    // 加载更多
    loadMore() {
      if (!this.loading && !this.noMore) {
        this.page++;
        this.loadRecordList();
      }
    },
    
    // 去提现页面
    goToWithdraw() {
      uni.navigateTo({
        url: '/pages/sub-pages/withdraw/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.balance-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.balance-card {
  position: relative;
  margin: 30rpx;
  height: 300rpx;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 40rpx rgba(255, 71, 87, 0.2);
  
  .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #FF6B6B, #FF4757);
  }
  
  .card-content {
    position: relative;
    z-index: 1;
    padding: 50rpx 40rpx;
    color: #fff;
    
    .balance-label {
      font-size: 26rpx;
      opacity: 0.9;
      margin-bottom: 20rpx;
    }
    
    .balance-amount {
      font-size: 72rpx;
      font-weight: bold;
      margin-bottom: 40rpx;
    }
    
    .balance-actions {
      .action-btn {
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10rpx);
        color: #fff;
        border-radius: 30rpx;
        font-size: 26rpx;
        border: 1px solid rgba(255, 255, 255, 0.3);
      }
    }
  }
}

.tabs {
  display: flex;
  background-color: #fff;
  
  .tab-item {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #FF4757;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background-color: #FF4757;
        border-radius: 2rpx;
      }
    }
  }
}

.scroll-view {
  flex: 1;
}

.record-list {
  padding: 0 30rpx 30rpx;
}

.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;
  
  .item-left {
    .item-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .item-time {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .item-right {
    .item-amount {
      font-size: 32rpx;
      font-weight: bold;
      
      &.income {
        color: #FF4757;
      }
      
      &.expense {
        color: #4CAF50;
      }
    }
  }
}

.load-more {
  padding: 30rpx;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
  
  .icon {
    font-size: 120rpx;
    margin-bottom: 20rpx;
  }
  
  .text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>