302 lines
7.9 KiB
Vue
302 lines
7.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- <view class="search-bar">
|
||
<u-search
|
||
placeholder="请输入会员编号或姓名查询"
|
||
v-model="keyword"
|
||
@custom="search"
|
||
@search="search"
|
||
></u-search>
|
||
</view> -->
|
||
|
||
<!-- 特殊会员信息 -->
|
||
<view class="top-member-card" v-if="topMember">
|
||
<view class="member-info-header">
|
||
<text>会员信息：</text>
|
||
<text class="member-info-text">{{ formatMemberInfo(topMember) }}</text>
|
||
</view>
|
||
<view class="stats-grid">
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ topMember.todayAchievement }}</text>
|
||
<text class="stat-label">今日业绩</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ topMember.yesterdayAchievement }}</text>
|
||
<text class="stat-label">昨日业绩</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ topMember.monthAchievement }}</text>
|
||
<text class="stat-label">本月业绩</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ topMember.lastMonthAchievement }}</text>
|
||
<text class="stat-label">上月业绩</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 列表 -->
|
||
<view class="member-list">
|
||
<view class="member-item" v-for="item in memberList" :key="item.memberId">
|
||
<view class="member-info-header list-header">
|
||
<text>会员信息：</text>
|
||
<text>{{ formatMemberInfo(item) }}</text>
|
||
</view>
|
||
<view class="stats-grid list-grid">
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ item.todayAchievement }}</text>
|
||
<text class="stat-label">今日业绩</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ item.yesterdayAchievement }}</text>
|
||
<text class="stat-label">昨日业绩</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ item.monthAchievement }}</text>
|
||
<text class="stat-label">本月业绩</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ item.lastMonthAchievement }}</text>
|
||
<text class="stat-label">上月业绩</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-loadmore :status="loadStatus" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 假设的API方法，您需要替换为真实实现
|
||
// import { getMarketAchievementTop, getMarketAchievementList } from '@/config/mine.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
topMember: null, // 置顶的特殊会员
|
||
memberList: [], // 成员列表
|
||
page: 1,
|
||
pageSize: 10,
|
||
loadStatus: 'loadmore', // loadmore, loading, nomore
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.setNavigationBarTitle({
|
||
title: '市场动态-业绩',
|
||
})
|
||
this.fetchTopMember()
|
||
this.fetchMemberList(true)
|
||
},
|
||
onReachBottom() {
|
||
if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
|
||
return
|
||
}
|
||
this.page++
|
||
this.fetchMemberList()
|
||
},
|
||
methods: {
|
||
formatMemberInfo(member) {
|
||
if (!member) return ''
|
||
const { memberCode, nickName, grade, award } = member
|
||
return `${memberCode}/${nickName}/${grade}/${award}`
|
||
},
|
||
search() {
|
||
this.memberList = []
|
||
this.page = 1
|
||
this.fetchTopMember()
|
||
this.fetchMemberList(true)
|
||
},
|
||
// 获取置顶会员数据
|
||
async fetchTopMember() {
|
||
// --- MOCK DATA ---
|
||
this.topMember = {
|
||
memberId: 'HZS32223336', // Using memberId as key
|
||
memberCode: 'HZS32223336',
|
||
nickName: '小新哥',
|
||
grade: 'V5',
|
||
award: 'W1',
|
||
todayAchievement: 0.0,
|
||
yesterdayAchievement: 1.0978,
|
||
monthAchievement: 2.3395,
|
||
lastMonthAchievement: 10.7727,
|
||
}
|
||
// --- REAL API CALL ---
|
||
// try {
|
||
// const res = await getMarketAchievementTop({ keyword: this.keyword });
|
||
// if (res.code === 200) {
|
||
// this.topMember = res.data;
|
||
// }
|
||
// } catch (e) {
|
||
// console.error(e);
|
||
// }
|
||
},
|
||
// 获取会员列表数据
|
||
async fetchMemberList(isRefresh = false) {
|
||
if (isRefresh) {
|
||
this.page = 1
|
||
this.memberList = []
|
||
}
|
||
this.loadStatus = 'loading'
|
||
|
||
// --- MOCK DATA ---
|
||
const mockData = [
|
||
{
|
||
memberId: 'HZS81617255',
|
||
memberCode: 'HZS81617255',
|
||
nickName: '小星哥',
|
||
grade: 'V5',
|
||
award: 'W1',
|
||
todayAchievement: 0.0,
|
||
yesterdayAchievement: 0.0499,
|
||
monthAchievement: 1.2881,
|
||
lastMonthAchievement: 26.3515,
|
||
},
|
||
{
|
||
memberId: 'HZS93817578',
|
||
memberCode: 'HZS93817578',
|
||
nickName: '婉琳',
|
||
grade: 'V5',
|
||
award: 'W1',
|
||
todayAchievement: 0.0,
|
||
yesterdayAchievement: 0.0,
|
||
monthAchievement: 0.508,
|
||
lastMonthAchievement: 2.422,
|
||
},
|
||
{
|
||
memberId: 'HZS55865236',
|
||
memberCode: 'HZS55865236',
|
||
nickName: '谭谭',
|
||
grade: 'V5',
|
||
award: 'W1',
|
||
todayAchievement: 0.0,
|
||
yesterdayAchievement: 0.0,
|
||
monthAchievement: 0.4261,
|
||
lastMonthAchievement: 8.5454,
|
||
},
|
||
{
|
||
memberId: 'HZS67896897',
|
||
memberCode: 'HZS67896897',
|
||
nickName: '楠杉',
|
||
grade: 'V5',
|
||
award: 'W1',
|
||
todayAchievement: 0.0,
|
||
yesterdayAchievement: 0.0,
|
||
monthAchievement: 0.0,
|
||
lastMonthAchievement: 0.0,
|
||
},
|
||
]
|
||
|
||
// Simulate network delay and pagination
|
||
setTimeout(() => {
|
||
// Mock: stop after 2 pages
|
||
if (this.page > 2) {
|
||
this.loadStatus = 'nomore'
|
||
return
|
||
}
|
||
|
||
const moreData = mockData.map(item => ({
|
||
...item,
|
||
memberId: item.memberId + this.page, // unique key for v-for
|
||
}))
|
||
this.memberList = [...this.memberList, ...moreData]
|
||
|
||
// After adding data, check if we should be able to load more
|
||
this.loadStatus = this.page >= 2 ? 'nomore' : 'loadmore'
|
||
}, 500)
|
||
|
||
// --- REAL API CALL ---
|
||
// try {
|
||
// const res = await getMarketAchievementList({ page: this.page, size: this.pageSize, keyword: this.keyword });
|
||
// if (res.code === 200) {
|
||
// this.memberList = [...this.memberList, ...res.data.records];
|
||
// if (res.data.records.length < this.pageSize) {
|
||
// this.loadStatus = 'nomore';
|
||
// } else {
|
||
// this.loadStatus = 'loadmore';
|
||
// }
|
||
// }
|
||
// } catch(e) {
|
||
// this.loadStatus = 'loadmore';
|
||
// console.error(e);
|
||
// }
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
padding: 20rpx;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.search-bar {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.top-member-card {
|
||
background: linear-gradient(135deg, #005bac, #007bff);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
color: #ffffff;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 91, 172, 0.3);
|
||
}
|
||
|
||
.member-info-header {
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
.member-info-text {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.stats-grid {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.member-list {
|
||
.member-item {
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.list-header {
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
}
|
||
.list-grid {
|
||
.stat-value {
|
||
color: #333;
|
||
}
|
||
.stat-label {
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|