305 lines
8.0 KiB
Vue
305 lines
8.0 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">{{ toInt(topMember.todayBox) }}</text>
|
|||
|
|
<text class="stat-label">今日盒数</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">{{ topMember.yesterdayBox }}</text>
|
|||
|
|
<text class="stat-label">昨日盒数</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">{{ topMember.monthBox }}</text>
|
|||
|
|
<text class="stat-label">本月盒数</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">{{ topMember.lastMonthBox }}</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">{{ toInt(item.todayBox) }}</text>
|
|||
|
|
<text class="stat-label">今日盒数</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">{{ item.yesterdayBox }}</text>
|
|||
|
|
<text class="stat-label">昨日盒数</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">{{ item.monthBox }}</text>
|
|||
|
|
<text class="stat-label">本月盒数</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">{{ item.lastMonthBox }}</text>
|
|||
|
|
<text class="stat-label">上月盒数</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-loadmore :status="loadStatus" />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 假设的API方法，您需要替换为真实实现
|
|||
|
|
// import { getMarketBoxTop, getMarketBoxList } from '@/config/mine.js';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
keyword: '',
|
|||
|
|
topMember: null, // 置顶的特殊会员
|
|||
|
|
memberList: [], // 成员列表
|
|||
|
|
page: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
loadStatus: 'loadmore', // loadmore, loading, nomore
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.fetchTopMember()
|
|||
|
|
this.fetchMemberList(true)
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.page++
|
|||
|
|
this.fetchMemberList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
toInt(value) {
|
|||
|
|
const intValue = parseInt(value, 10)
|
|||
|
|
return isNaN(intValue) ? value : intValue
|
|||
|
|
},
|
|||
|
|
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 from screenshot ---
|
|||
|
|
this.topMember = {
|
|||
|
|
memberId: 'HZS55197913',
|
|||
|
|
memberCode: 'HZS55197913',
|
|||
|
|
nickName: '未知', // Screenshot has no name, API might
|
|||
|
|
grade: 'V5',
|
|||
|
|
award: 'S2',
|
|||
|
|
todayBox: 3361.0,
|
|||
|
|
yesterdayBox: 114,
|
|||
|
|
monthBox: 3475,
|
|||
|
|
lastMonthBox: 3206,
|
|||
|
|
}
|
|||
|
|
// --- REAL API CALL ---
|
|||
|
|
// try {
|
|||
|
|
// const res = await getMarketBoxTop({ keyword: this.keyword });
|
|||
|
|
// if (res.code === 200) {
|
|||
|
|
// // Real data mapping from fields like realizedBox, upMonthBox
|
|||
|
|
// this.topMember = { ...res.data, todayBox: res.data.realizedBox, lastMonthBox: res.data.upMonthBox };
|
|||
|
|
// }
|
|||
|
|
// } catch (e) {
|
|||
|
|
// console.error(e);
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
// 获取会员列表数据
|
|||
|
|
async fetchMemberList(isRefresh = false) {
|
|||
|
|
if (isRefresh) {
|
|||
|
|
this.page = 1
|
|||
|
|
this.memberList = []
|
|||
|
|
}
|
|||
|
|
this.loadStatus = 'loading'
|
|||
|
|
|
|||
|
|
// --- MOCK DATA from screenshot ---
|
|||
|
|
const mockData = [
|
|||
|
|
{
|
|||
|
|
memberId: 'HZS931295626',
|
|||
|
|
memberCode: 'HZS931295626',
|
|||
|
|
nickName: '未知',
|
|||
|
|
grade: 'V5',
|
|||
|
|
award: 'S1',
|
|||
|
|
todayBox: 38.0,
|
|||
|
|
yesterdayBox: 0,
|
|||
|
|
monthBox: 38,
|
|||
|
|
lastMonthBox: 503,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
memberId: 'HZS938173516',
|
|||
|
|
memberCode: 'HZS938173516',
|
|||
|
|
nickName: '未知',
|
|||
|
|
grade: 'V3',
|
|||
|
|
award: 'S0',
|
|||
|
|
todayBox: 25.0,
|
|||
|
|
yesterdayBox: 0,
|
|||
|
|
monthBox: 25,
|
|||
|
|
lastMonthBox: 0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
memberId: 'HZS61632161',
|
|||
|
|
memberCode: 'HZS61632161',
|
|||
|
|
nickName: '未知',
|
|||
|
|
grade: 'V3',
|
|||
|
|
award: 'S0',
|
|||
|
|
todayBox: 16.0,
|
|||
|
|
yesterdayBox: 0,
|
|||
|
|
monthBox: 16,
|
|||
|
|
lastMonthBox: 0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
memberId: 'HZS978982363',
|
|||
|
|
memberCode: 'HZS978982363',
|
|||
|
|
nickName: '未知',
|
|||
|
|
grade: 'V3',
|
|||
|
|
award: 'S0',
|
|||
|
|
todayBox: 15.0,
|
|||
|
|
yesterdayBox: 0,
|
|||
|
|
monthBox: 15,
|
|||
|
|
lastMonthBox: 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 getMarketBoxList({ page: this.page, size: this.pageSize, keyword: this.keyword });
|
|||
|
|
// if (res.code === 200) {
|
|||
|
|
// const newList = res.data.records.map(item => ({ ...item, todayBox: item.realizedBox, lastMonthBox: item.upMonthBox }));
|
|||
|
|
// this.memberList = [...this.memberList, ...newList];
|
|||
|
|
// 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>
|