<template>
|
<view class="container">
|
<view class="header">
|
<text class="title">客户列表</text>
|
</view>
|
<!-- 搜索框 -->
|
<view class="search-box">
|
<u-search v-model="query.username" placeholder="搜索客户" :showAction="false" @change="searchMember"></u-search>
|
</view>
|
|
<!-- 内容区域 -->
|
<scroll-view scroll-y class="member-list" @scrolltolower="loadMore" :lower-threshold="100">
|
<view>
|
<view class="member-item" v-for="(member, index) in memberList" :key="member.id"
|
v-if="memberList.length > 0">
|
|
<view class="member-info">
|
<text class="mobile">{{ member.mobile }}</text>
|
<text class="region">{{ member.region }}</text>
|
</view>
|
<!-- 操作按钮区域 -->
|
<view class="action-buttons">
|
<u-button type="primary" size="mini" @click.stop="navigateToDetail(member.id)"
|
class="edit-btn">修改</u-button>
|
<u-button type="error" size="mini" @click.stop="joinBlack(member.id)"
|
class="delete-btn"></u-button>
|
</view>
|
|
</view>
|
</view>
|
|
<!-- 改进的加载更多提示 -->
|
<view>
|
<u-loadmore class="load-more" v-if="memberList.length > 0"
|
:status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
|
loadmore: '上拉加载更多',
|
loading: '正在加载',
|
nomore: '没有更多了'
|
}" />
|
</view>
|
<view style="height:150rpx">
|
|
</view>
|
</scroll-view>
|
|
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
getPage,
|
} from "@/api/customerManager.js"
|
import '@/components/uview-components/uview-ui';
|
export default {
|
data() {
|
return {
|
loading: false,
|
noMore: false,
|
|
query: {
|
username: '',
|
pageNumber: 1,
|
pageSize: 15,
|
},
|
memberList: [],
|
total:0,
|
}
|
},
|
onLoad(){
|
this.getPage()
|
},
|
methods: {
|
// 搜索用户
|
searchMember() {
|
this.query.pageNumber = 1
|
this.noMore = false
|
this.clerkList = []
|
this.getPage()
|
},
|
joinBlack(memberId){
|
|
},
|
async getPage(){
|
uni.showLoading({
|
title: '加载中'
|
});
|
getPage(this.query).then(res =>{
|
uni.hideLoading();
|
if (res.statusCode === 200) {
|
const newData = res.data.data;
|
// 更新总数据量
|
this.total = res.data.total || 0;
|
// 追加或替换数据
|
this.memberList = this.query.pageNumber === 1 ?
|
newData :
|
[...this.memberList, ...newData];
|
|
// 判断是否还有更多数据
|
this.noMore = newData.length < this.query.pageSize ||
|
this.memberList.length >= this.total;
|
|
}
|
})
|
},
|
// 加载更多
|
loadMore() {
|
if (!this.noMore) {
|
this.query.pageNumber++
|
this.getPage()
|
}
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.action-buttons {
|
display: flex;
|
margin-left: 20rpx;
|
}
|
.container {
|
padding: 20rpx;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
background-color: #f5f5f5;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 0;
|
margin-bottom: 20rpx;
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
|
}
|
|
.search-box {
|
margin-bottom: 20rpx;
|
}
|
|
.member-list {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
.member-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
background-color: #fff;
|
border-radius: 12rpx;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
.avatar {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
margin-right: 20rpx;
|
}
|
|
.member-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.mobile {
|
font-size: 32rpx;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.region {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
}
|
|
.load-more {
|
padding: 20rpx 0;
|
text-align: center;
|
color: #999;
|
font-size: 26rpx;
|
background-color: #f7f8fa;
|
}
|
</style>
|
