EpicSoul/pages/index/components/FollowTab.vue

<template>
  <view class="follow-tab-container">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
		  <image  class="search-icon" :src="showImg('/uploads/20250826/a4d605e82622223c270df0af4e378ab3.png')"></image>
        <input
          class="search-input"
          placeholder="搜索已关注的人"
          v-model="searchText"
          @input="handleSearch"
        />
      </view>
    </view>

    <!-- 我的关注标题和排序 -->
    <view class="follows-header">
      <text class="follows-title">我的关注 ({{ followsList.length }})</text>
      <view class="sort-option" @click="toggleSort">
        <text class="sort-text">综合排序</text>
		<image class="sort-arrow" :src="showImg('/uploads/20250826/8e40deaa0bc67da3a9b104ff0e6b3e7c.png')"></image>
      </view>
    </view>

    <!-- 分类导航 -->
    <view class="category-tabs">
      <view
        class="tab-item"
        :class="{ active: activeCategory === 'all' }"
        @click="switchCategory('all')"
      >
      全部
      </view>
      <view
        class="tab-item"
        :class="{ active: activeCategory === 'merchant' }"
        @click="switchCategory('merchant')"
      >
     商家
      </view>
    </view>

    <!-- 关注用户列表 -->
    <view class="follows-list">
      <view
        class="follow-item"
        v-for="(item, index) in filteredFollowsList"
        :key="item.id"
      >
        <image class="user-avatar" src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" mode="aspectFill"></image>
        <view class="user-info">
          <text class="user-name">{{ item.name }}</text>
          <view class="update-tag" v-if="item.newItems > 0">
            {{ item.newItems }}件商品上新
          </view>
        </view>
        <view class="action-buttons">
          <view class="follow-status-btn">
            已关注
          </view>
          <view class="more-options" @click="showOptions(item)">
            <text class="more-dots">•••</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐用户分隔线 -->
    <view class="divider-line"></view>

    <!-- 推荐用户区域 -->
    <view class="recommend-section">
      <view class="recommend-header">
        <view class="recommend-title" style="display: flex;align-items: center;">
        	你可能感兴趣的人
        	<image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;" :src="showImg('/uploads/20250826/f1422cbef4c33e8c21d9e7e805c8bad9.png')"></image>
        </view>
        <view class="close-btn" @click="closeRecommend">
          <text class="close-text">关闭</text>
        </view>
      </view>

      <view class="recommend-list">
        <view
          class="recommend-item"
          v-for="(item, index) in recommendList"
          :key="item.id"
        >
          <image
            class="user-avatar"
           src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
            mode="aspectFill"
          ></image>
          <view class="user-info">
            <text class="user-name">{{ item.name }}</text>
            <text class="user-desc">{{ item.description }}</text>
          </view>
          <view class="action-buttons">
            <view class="follow-btn" @click="followUser(item)">
              关注
            </view>
            <view class="dismiss-btn" @click="dismissUser(item)">
              <text class="dismiss-text">×</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "FollowTab",
  data() {
    return {
      searchText: "",
      activeCategory: "all",
      followsList: [
        {
          id: 1,
          name: "主理人—颜真卿",
          avatar: "/uploads/20250826/avatar1.png",
          newItems: 1,
          category: "merchant",
        },
        {
          id: 2,
          name: "主理人—颜真卿",
          avatar: "/uploads/20250826/avatar1.png",
          newItems: 0,
          category: "merchant",
        },
        {
          id: 3,
          name: "主理人—颜真卿",
          avatar: "/uploads/20250826/avatar1.png",
          newItems: 2,
          category: "user",
        },
      ],
      recommendList: [
        {
          id: 101,
          name: "颜真卿",
          avatar: "/uploads/20250826/avatar1.png",
          description: "介绍介绍介绍",
        },
        {
          id: 102,
          name: "颜真卿",
          avatar: "/uploads/20250826/avatar1.png",
          description: "介绍介绍介绍",
        },
      ],
    };
  },
  computed: {
    filteredFollowsList() {
      let filtered = this.followsList;

      // 按分类过滤
      if (this.activeCategory !== "all") {
        filtered = filtered.filter(
          (item) => item.category === this.activeCategory
        );
      }

      // 按搜索文本过滤
      if (this.searchText.trim()) {
        filtered = filtered.filter((item) =>
          item.name.toLowerCase().includes(this.searchText.toLowerCase())
        );
      }

      return filtered;
    },
  },
  methods: {
    handleSearch() {
      // 搜索逻辑已在computed中处理
    },

    toggleSort() {
      // 切换排序方式
      uni.showToast({
        title: "排序功能开发中",
        icon: "none",
      });
    },

    switchCategory(category) {
      this.activeCategory = category;
    },

    showOptions(item) {
      uni.showActionSheet({
        itemList: ["取消关注", "举报", "拉黑"],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.unfollowUser(item);
              break;
            case 1:
              this.reportUser(item);
              break;
            case 2:
              this.blockUser(item);
              break;
          }
        },
      });
    },

    unfollowUser(item) {
      const index = this.followsList.findIndex((user) => user.id === item.id);
      if (index > -1) {
        this.followsList.splice(index, 1);
        uni.showToast({
          title: "已取消关注",
          icon: "success",
        });
      }
    },

    reportUser(item) {
      uni.showToast({
        title: "举报功能开发中",
        icon: "none",
      });
    },

    blockUser(item) {
      uni.showToast({
        title: "拉黑功能开发中",
        icon: "none",
      });
    },

    followUser(item) {
      // 添加到关注列表
      this.followsList.unshift({
        id: item.id,
        name: item.name,
        avatar: item.avatar,
        newItems: 0,
        category: "user",
      });

      // 从推荐列表移除
      const index = this.recommendList.findIndex((user) => user.id === item.id);
      if (index > -1) {
        this.recommendList.splice(index, 1);
      }

      uni.showToast({
        title: "关注成功",
        icon: "success",
      });
    },

    dismissUser(item) {
      const index = this.recommendList.findIndex((user) => user.id === item.id);
      if (index > -1) {
        this.recommendList.splice(index, 1);
        uni.showToast({
          title: "已移除推荐",
          icon: "success",
        });
      }
    },

    closeRecommend() {
      this.recommendList = [];
      uni.showToast({
        title: "已关闭推荐",
        icon: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.follow-tab-container {
  background: #fff;
  min-height: 100vh;
}

/* 搜索栏 */
.search-section {
  padding: 32rpx;
  background: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 40rpx;
  padding: 0 32rpx;
  height: 80rpx;

  .search-icon {
    width:32rpx ;
	height:32rpx ;
    margin-right: 16rpx;
    color: #999;
  }

  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;

    &::placeholder {
      color: #999;
    }
  }
}

/* 关注标题和排序 */
.follows-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding: 0 32rpx 24rpx;
  margin-bottom: 20rpx;

  .follows-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .sort-option {
    display: flex;
    align-items: center;

    .sort-text {
      font-size: 28rpx;
      color: #000000;
      margin-right: 8rpx;
    }

    .sort-arrow {
      width:9rpx;
	  height: 24rpx;
    }
  }
}

/* 分类导航 */
.category-tabs {
  display: flex;
  padding: 0 32rpx 32rpx;
  gap: 16rpx;

  .tab-item {
    border-radius: 32rpx;
    transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15rpx 30rpx;
font-size: 28rpx;
      color: #000000;
      font-weight: bold;
    

    &.active {
      background: #00FFFF;
        color: #000000;
     
    }
  }
}

/* 关注用户列表 */
.follows-list {
  padding: 0 32rpx;

  .follow-item {
    display: flex;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .user-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }

    .user-info {
      flex: 1;

      .user-name {
        display: block;
        font-size: 30rpx;
        font-weight: 500;
        color: #000000;
        margin-bottom: 8rpx;
      }

      .update-tag {
        display: inline-block;
        background: #f8f9fa;
        border-radius: 16rpx;
        padding: 10rpx 12rpx;
font-size: 24rpx;
          color: #666;
        
      }
    }

    .action-buttons {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .follow-status-btn {
        border-radius: 24rpx;
        padding: 12rpx 24rpx;
		border: 2rpx solid #e5e5e5;
 font-size: 26rpx;
          color: #666;
        
      }

      .more-options {
        padding: 8rpx;

        .more-dots {
          font-size: 24rpx;
          color: #000;
          letter-spacing: 2rpx;
        }
      }
    }
  }
}

/* 分隔线 */
.divider-line {
  height: 1rpx;
  background: #f0f0f0;
  margin: 32rpx 0;
}

/* 推荐用户区域 */
.recommend-section {
  padding: 0 32rpx;

  .recommend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .recommend-title {
      font-size: 28rpx;
      font-weight: 500;
      color: #666666;
	  margin-right: 10rpx;
    }

    .close-btn {
      padding: 8rpx 16rpx;

      .close-text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  .recommend-list {
    .recommend-item {
      display: flex;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .user-avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }

      .user-info {
        flex: 1;

        .user-name {
          display: block;
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 8rpx;
        }

        .user-desc {
          font-size: 26rpx;
          color: #999;
        }
      }

      .action-buttons {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .follow-btn {
          border: 2rpx solid #00FFFF;
          border-radius: 24rpx;
          padding: 12rpx 24rpx;
 font-size: 26rpx;
            color: #000;
            font-weight: bold;
         
        }

        .dismiss-btn {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background: #f8f9fa;
          display: flex;
          align-items: center;
          justify-content: center;

          .dismiss-text {
            font-size: 32rpx;
            color: #999;
            font-weight: 300;
          }
        }
      }
    }
  }
}
</style>