YingXingAI/pages/home/home/components/recommend/moreFriends.vue

<template>
  <view class="more-friends-page">
    <u-navbar title="更多推荐好友" :border-bottom="false"></u-navbar>

    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <u-icon name="search" size="40rpx" color="#999"></u-icon>
        <input type="text" placeholder="搜索校友" v-model="searchKeyword" />
      </view>
    </view>

    <!-- 推荐好友列表 -->
    <view class="friends-list">
      <view
        class="friend-item"
        v-for="(friend, index) in filteredFriends"
        :key="index"
      >
        <!-- 头像 -->
        <image class="avatar" :src="friend.avatar" mode="aspectFill"></image>

        <!-- 用户信息 -->
        <view class="user-info">
          <text class="username">{{ friend.name }}</text>
          <text class="school">{{ friend.school }}</text>
        </view>

        <!-- 关注按钮 -->
        <view
          class="follow-btn"
          :class="{ followed: friend.isFollowed }"
          @click="toggleFollow(index)"
        >
          {{ friend.isFollowed ? "已关注" : "关注" }}
        </view>

        <!-- 移除按钮 -->
        <view class="remove-btn" @click="removeUser(index)">
          <u-icon name="close" size="32rpx" color="#666"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MoreFriends",
  data() {
    return {
      searchKeyword: "",
      recommendFriends: [
        {
          name: "小年轻",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar.png",
          isFollowed: true,
        },
        {
          name: "小年轻",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar2.png",
          isFollowed: true,
        },
        {
          name: "Alice_琛璃",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar3.png",
          isFollowed: true,
        },
        {
          name: "Alice_琛璃",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar.png",
          isFollowed: true,
        },
        {
          name: "Alice_琛璃",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar3.png",
          isFollowed: false,
        },
        {
          name: "别墨暝",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar2.png",
          isFollowed: false,
        },
        {
          name: "小六",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar.png",
          isFollowed: false,
        },
        {
          name: "小年轻",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar3.png",
          isFollowed: false,
        },
        {
          name: "别墨暝",
          school: "浙江大学",
          avatar: "/static/common/img/homepage/avatar2.png",
          isFollowed: false,
        },
      ],
    };
  },
  computed: {
    // 过滤后的好友列表，根据搜索关键词过滤
    filteredFriends() {
      if (!this.searchKeyword) {
        return this.recommendFriends;
      }

      return this.recommendFriends.filter(
        (friend) =>
          friend.name
            .toLowerCase()
            .includes(this.searchKeyword.toLowerCase()) ||
          friend.school.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
    },
  },
  methods: {
    // 切换关注状态
    toggleFollow(index) {
      this.recommendFriends[index].isFollowed =
        !this.recommendFriends[index].isFollowed;

      // 这里可以添加调用关注/取消关注API的逻辑
      const friend = this.recommendFriends[index];
      const action = friend.isFollowed ? "关注" : "取消关注";

      uni.showToast({
        title: `${action}成功`,
        icon: "none",
      });
    },

    // 移除用户
    removeUser(index) {
      uni.showModal({
        // title: "提示",
        content: "确定不再推荐此用户吗？",
        success: (res) => {
          if (res.confirm) {
            this.recommendFriends.splice(index, 1);
            uni.showToast({
              title: "已移除此推荐",
              icon: "none",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.more-friends-page {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 30rpx;

  // 搜索框样式
  .search-container {
    padding: 20rpx 30rpx;

    .search-box {
      background-color: #f5f5f5;
      border-radius: 36rpx;
      padding: 16rpx 30rpx;
      display: flex;
      align-items: center;

      input {
        flex: 1;
        margin-left: 16rpx;
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  // 好友列表样式
  .friends-list {
    .friend-item {
      display: flex;
      align-items: center;
      padding: 24rpx 30rpx;
      // border-bottom: 1px solid #f5f5f5;

      // 头像样式
      .avatar {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }

      // 用户信息样式
      .user-info {
        display: flex;
        align-items: center;
        flex: 1;

        .username {
          font-size: 28rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          display: block;
          margin-bottom: 8rpx;
          margin-right: 24rpx;
        }

        .school {
          font-size: 24rpx;
          color: #3cb5fb;
          background-color: rgba(41, 151, 255, 0.1);
          padding: 4rpx 12rpx;
          border-radius: 200rpx;
        }
      }

      // 关注按钮样式
      .follow-btn {
        width: 120rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        font-size: 28rpx;
        border-radius: 36rpx;
        margin-right: 24rpx;
        color: #3cb5fb;
        border: 1rpx solid #3cb5fb;

        &.followed {
          color: rgba(0, 0, 0, 0.2);
          border: 1rpx solid rgba(0, 0, 0, 0.2);
        }
      }

      // 移除按钮样式
      .remove-btn {
        padding: 10rpx;
      }
    }
  }
}
</style>