forked from angelo/web-retail-h5
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>
|