englishread-front/subPages/user/team.vue

<template>
  <view class="team-page">
    <!-- 固定顶部搜索框 -->
    <view class="fixed-header">
      <view class="search-container">
        <uv-search 
          v-model="searchKeyword" 
          placeholder="请输入" 
          :show-action="true"
          action-text="搜索"
          :animation="true"
          bg-color="#f5f5f5"
          @search="handleSearch"
          @custom="handleSearch"
          @clear="handleCancel"
          :action-style="{color: '#fff', backgroundColor: '#06DADC', borderRadius:'8rpx', width:'100rpx', height: '64rpx', lineHeight: '64rpx', borderRadius: '198rpx', text:'white', fontSize:'26rpx'}"
          action
        ></uv-search>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 成员列表 -->
      <view class="member-list">
        <view 
          class="member-item" 
          v-for="(member, index) in list" 
          :key="index"
          @click="handleMemberClick(member)"
        >
          <image 
            class="member-avatar" 
            :src="member.avatar || '/static/default-avatar.png'"
            mode="aspectFill"
          ></image>
          <text class="member-name">{{ member.name }}</text>
        </view>
      </view>
      <uv-loading-icon text="加载中" textSize="30rpx" v-if="isLoading"></uv-loading-icon>
      <uv-empty v-else-if="list.length === 0 " text="暂无数据"></uv-empty>
    </view>
  </view>
</template>

<script>
import MixinList from '@/mixins/list'
export default {
  mixins: [MixinList],
  data() {
    return {
      mixinListApi: 'promotion.team',
      searchKeyword: '',
      members: [
        {
          id: 1,
          name: '李世海',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 2,
          name: '周静',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 3,
          name: '周海',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 4,
          name: '冯启彬',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 5,
          name: '李嫣',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 6,
          name: '李书萍',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 7,
          name: '赵吾光',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 8,
          name: '冯云',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 9,
          name: '周静',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 10,
          name: '周海',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 11,
          name: '冯启彬',
          avatar: '/static/default-avatar.png'
        },
        {
          id: 12,
          name: '李嫣',
          avatar: '/static/default-avatar.png'
        }
      ]
    }
  },
  computed: {
    filteredMembers() {
      if (!this.searchKeyword) {
        return this.members
      }
      return this.members.filter(member => 
        member.name.includes(this.searchKeyword)
      )
    }
  },
  methods: {
    mixinSetParams(){
      return {
        name: this.searchKeyword
      }
    },
    handleCancel(){
      this.initPage()
      this.getList(true)
    },
    handleSearch() {
      // 搜索逻辑已通过computed实现
      console.log('搜索关键词:', this.searchKeyword)
      this.initPage()
      this.getList(true)
    },
    handleMemberClick(member) {
      console.log('点击成员:', member)
      // 可以在这里添加跳转到成员详情页的逻辑
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '@/uni.scss';

.team-page {
  min-height: 100vh;
  background-color: #f2f2f2;
  
  // 固定顶部搜索框
  .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;
    
    .search-container {
      padding: 20rpx 30rpx;
      background-color: #fff;
    }
  }
  
  // 内容区域
  .content-area {
    padding-top: 140rpx; // 为固定头部留出空间
    
    .member-list {
      background-color: #fff;
      margin: 0 40rpx;
      border-radius: 32rpx;
      .member-item {
        display: flex;
        align-items: center;
        padding: 16rpx 32rpx;
        height: 104rpx;
        border-bottom: 2rpx solid #F1F1F1;
        transition: background-color 0.3s;
        
        &:active {
          background-color: #f5f5f5;
        }
        
        &:last-child {
          border-bottom: none;
        }
        
        .member-avatar {
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          margin-right: 24rpx;
          background-color: #f0f0f0;
        }
        
        .member-name {
          font-size: 32rpx;
          color: #333;
          font-weight: 400;
        }
      }
    }
  }
}
</style>