integral-shop/single_uniapp22miao/pages/sub-pages/my-fans/index.vue

<template>
  <view class="fans-page">
    <!-- 统计卡片 -->
    <view class="stats-card">
      <view class="stats-item">
        <view class="value">{{ stats.level1_count || 0 }}</view>
        <view class="label">一级粉丝</view>
      </view>
      <view class="stats-item">
        <view class="value">{{ stats.level2_count || 0 }}</view>
        <view class="label">二级粉丝</view>
      </view>
      <view class="stats-item">
        <view class="value">{{ stats.level3_count || 0 }}</view>
        <view class="label">三级粉丝</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="fans-list">
        <view 
          v-for="(fan, index) in fansList" 
          :key="index"
          class="fan-item"
        >
          <image :src="fan.avatar || '/static/images/default-avatar.png'" class="avatar"></image>
          <view class="fan-info">
            <view class="name">{{ fan.nickname || fan.mobile }}</view>
            <view class="time">{{ fan.created_at }}</view>
          </view>
          <view class="level-tag">
            {{ getLevelText(fan.level) }}
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more" v-if="fansList.length > 0">
          <text v-if="loading">加载中...</text>
          <text v-else-if="noMore">没有更多了</text>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="fansList.length === 0 && !loading">
          <text class="icon">👥</text>
          <text class="text">暂无粉丝</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stats: {},
      tabs: ['一级粉丝', '二级粉丝', '三级粉丝'],
      currentTab: 0,
      fansList: [],
      page: 1,
      limit: 20,
      loading: false,
      noMore: false
    }
  },
  
  onLoad() {
    this.loadStats();
    this.loadFansList();
  },
  
  methods: {
    // 加载统计数据
    async loadStats() {
      try {
        const res = await this.$http.get('/api/share/index');
        if (res.code === 0) {
          this.stats = res.data.stats || {};
        }
      } catch (error) {
        console.error('加载统计数据失败:', error);
      }
    },
    
    // 切换Tab
    switchTab(index) {
      if (this.currentTab === index) return;
      
      this.currentTab = index;
      this.page = 1;
      this.noMore = false;
      this.fansList = [];
      this.loadFansList();
    },
    
    // 加载粉丝列表
    async loadFansList() {
      if (this.loading || this.noMore) return;
      
      this.loading = true;
      
      try {
        const res = await this.$http.get('/api/share/select', {
          page: this.page,
          limit: this.limit,
          level: this.currentTab + 1 // 1,2,3
        });
        
        if (res.code === 0) {
          const list = res.data.list || [];
          
          if (list.length < this.limit) {
            this.noMore = true;
          }
          
          this.fansList = this.page === 1 ? list : [...this.fansList, ...list];
        }
      } catch (error) {
        console.error('加载粉丝列表失败:', error);
      } finally {
        this.loading = false;
      }
    },
    
    // 加载更多
    loadMore() {
      if (!this.loading && !this.noMore) {
        this.page++;
        this.loadFansList();
      }
    },
    
    // 获取等级文本
    getLevelText(level) {
      const levelMap = {
        1: '一级',
        2: '二级',
        3: '三级'
      };
      return levelMap[level] || '';
    }
  }
}
</script>

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

.stats-card {
  display: flex;
  margin: 30rpx;
  padding: 40rpx 0;
  background-color: #fff;
  border-radius: 20rpx;
  
  .stats-item {
    flex: 1;
    text-align: center;
    
    .value {
      font-size: 48rpx;
      font-weight: bold;
      color: #FF4757;
      margin-bottom: 10rpx;
    }
    
    .label {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.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;
}

.fans-list {
  padding: 20rpx 30rpx;
}

.fan-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  
  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .fan-info {
    flex: 1;
    
    .name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .time {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .level-tag {
    padding: 8rpx 20rpx;
    background-color: #FFF3E0;
    color: #FF6B00;
    font-size: 22rpx;
    border-radius: 20rpx;
  }
}

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