You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
4.9 KiB
215 lines
4.9 KiB
<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>
|