forked from angelo/web-retail-h5
712 lines
17 KiB
Vue
712 lines
17 KiB
Vue
<template>
|
||
<view>
|
||
<view class="date-selector-container">
|
||
<view class="date-selector-full">
|
||
<view class="date-picker-full">
|
||
<picker
|
||
:range="selYearList"
|
||
:value="index"
|
||
range-key="label"
|
||
@change="changeYear"
|
||
>
|
||
<view class="date-picker-item-full">
|
||
<text class="date-value-full">{{ whatYear }}年</text>
|
||
<u-icon name="arrow-down" color="#005BAC" size="20"></u-icon>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="date-picker-full">
|
||
<picker
|
||
:range="mounthList"
|
||
:value="index"
|
||
range-key="label"
|
||
@change="bindPickerChange"
|
||
>
|
||
<view class="date-picker-item-full">
|
||
<text class="date-value-full">{{ whatMounth }}月</text>
|
||
<u-icon name="arrow-down" color="#005BAC" size="20"></u-icon>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 业绩分布列表 -->
|
||
<view class="performance-list-container">
|
||
<!-- 特殊数据展示（第一页第一条） -->
|
||
<view v-if="specialData" class="special-item">
|
||
<view class="special-content">
|
||
<view class="special-main-info">
|
||
<view class="special-user-info">
|
||
<view class="special-name">{{ specialData.memberName }}</view>
|
||
<view class="special-level">{{ specialData.memberLevel }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="special-performance-compact">
|
||
<view class="special-performance-row">
|
||
<view class="special-performance-item-compact">
|
||
<text class="special-performance-label-compact">销售业绩</text>
|
||
<text class="special-performance-value-compact">{{
|
||
specialData.currentMonthPv
|
||
}}</text>
|
||
</view>
|
||
<view class="special-performance-item-compact">
|
||
<text class="special-performance-label-compact">销售盒数</text>
|
||
<text class="special-performance-value-compact"
|
||
>{{ specialData.currentMonthBoxNum }}盒</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="special-performance-row">
|
||
<view class="special-performance-item-compact">
|
||
<text class="special-performance-label-compact">复购业绩</text>
|
||
<text class="special-performance-value-compact">{{
|
||
specialData.repurchasePv
|
||
}}</text>
|
||
</view>
|
||
<view class="special-performance-item-compact">
|
||
<text class="special-performance-label-compact">复购盒数</text>
|
||
<text class="special-performance-value-compact"
|
||
>{{ specialData.repurchaseBox }}盒</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 普通列表数据 -->
|
||
<view v-if="normalList.length > 0" class="normal-list">
|
||
<view class="list-content">
|
||
<view
|
||
v-for="(item, index) in normalList"
|
||
:key="item.id"
|
||
class="list-item"
|
||
>
|
||
<!-- <view class="item-index" :class="getRankClass(index + 1)">{{
|
||
index + 1
|
||
}}</view> -->
|
||
<view class="item-content">
|
||
<view class="item-header">
|
||
<view class="item-name">{{ item.memberName }}</view>
|
||
<view class="item-level">{{ item.memberLevel }}</view>
|
||
</view>
|
||
<view class="item-performance">
|
||
<view class="performance-row">
|
||
<view class="performance-group">
|
||
<text class="performance-label">销售业绩</text>
|
||
<text class="performance-value">{{
|
||
item.currentMonthPv
|
||
}}</text>
|
||
</view>
|
||
<view class="performance-group">
|
||
<text class="performance-label">销售盒数</text>
|
||
<text class="performance-value"
|
||
>{{ item.currentMonthBoxNum }}盒</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="performance-row">
|
||
<view class="performance-group">
|
||
<text class="performance-label">复购业绩</text>
|
||
<text class="performance-value">{{
|
||
item.repurchasePv
|
||
}}</text>
|
||
</view>
|
||
<view class="performance-group">
|
||
<text class="performance-label">复购盒数</text>
|
||
<text class="performance-value"
|
||
>{{ item.repurchaseBox }}盒</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<u-loading-icon
|
||
mode="spinner"
|
||
color="#005bac"
|
||
size="28"
|
||
></u-loading-icon>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view
|
||
v-if="!loading && normalList.length === 0 && !specialData"
|
||
class="empty-state"
|
||
>
|
||
<view class="empty-icon">📊</view>
|
||
<text class="empty-text">暂无业绩数据</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 无更多数据 -->
|
||
<view v-if="!hasMore && normalList.length > 0" class="no-more">
|
||
<text class="no-more-text">— 没有更多数据了 —</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getMonthAchieve } from '@/config/distribute.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
index: 0,
|
||
show: false,
|
||
achieveData: {},
|
||
|
||
whatMounth: '',
|
||
yjType: 1,
|
||
showType: false,
|
||
selMounthList: [],
|
||
yjTypeList: [],
|
||
yearShow: false,
|
||
whatYear: '',
|
||
selYearList: [
|
||
{
|
||
value: 0,
|
||
label: new Date().getFullYear() - 1,
|
||
},
|
||
{
|
||
value: 1,
|
||
label: new Date().getFullYear(),
|
||
},
|
||
],
|
||
mounthList: [
|
||
{
|
||
value: '01',
|
||
label: 1 + '月',
|
||
},
|
||
{
|
||
value: '02',
|
||
label: 2 + '月',
|
||
},
|
||
{
|
||
value: '03',
|
||
label: 3 + '月',
|
||
},
|
||
{
|
||
value: '04',
|
||
label: 4 + '月',
|
||
},
|
||
{
|
||
value: '05',
|
||
label: 5 + '月',
|
||
},
|
||
{
|
||
value: '06',
|
||
label: 6 + '月',
|
||
},
|
||
{
|
||
value: '07',
|
||
label: 7 + '月',
|
||
},
|
||
{
|
||
value: '08',
|
||
label: 8 + '月',
|
||
},
|
||
{
|
||
value: '09',
|
||
label: 9 + '月',
|
||
},
|
||
{
|
||
value: '10',
|
||
label: 10 + '月',
|
||
},
|
||
{
|
||
value: '11',
|
||
label: 11 + '月',
|
||
},
|
||
{
|
||
value: '12',
|
||
label: 12 + '月',
|
||
},
|
||
],
|
||
|
||
// 列表数据相关
|
||
specialData: null, // 特殊数据（第一页第一条）
|
||
normalList: [], // 普通列表数据
|
||
total: 0, // 总条数
|
||
currentPage: 1, // 当前页码
|
||
pageSize: 10, // 每页条数
|
||
loading: false, // 加载状态
|
||
hasMore: true, // 是否还有更多数据
|
||
}
|
||
},
|
||
created() {
|
||
this.initDate()
|
||
this.getMonthAchieve()
|
||
},
|
||
methods: {
|
||
changeYear(e) {
|
||
this.whatYear = this.selYearList[e.detail.value].label
|
||
this.refresh()
|
||
},
|
||
bindPickerChange(e) {
|
||
this.whatMounth = e.detail.value
|
||
this.refresh()
|
||
},
|
||
|
||
// 获取当前年/月
|
||
initDate() {
|
||
const month = new Date().getMonth() + 1
|
||
this.whatMounth = month.toString().padStart(2, '0')
|
||
this.whatYear = new Date().getFullYear()
|
||
},
|
||
|
||
// 获取月度业绩数据
|
||
async getMonthAchieve(isLoadMore = false) {
|
||
if (this.loading) return
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
const params = {
|
||
year: this.whatYear,
|
||
month: this.whatMounth,
|
||
pageNum: this.currentPage,
|
||
pageSize: this.pageSize,
|
||
}
|
||
|
||
const res = await getMonthAchieve(params)
|
||
if (res.code === 200) {
|
||
const { total, rows } = res
|
||
this.total = total
|
||
|
||
if (isLoadMore) {
|
||
// 加载更多：追加到现有列表
|
||
this.normalList = [...this.normalList, ...rows]
|
||
} else {
|
||
// 首次加载或刷新：处理特殊数据和普通数据
|
||
if (this.currentPage === 1 && rows.length > 0) {
|
||
// 第一页第一条数据作为特殊数据
|
||
this.specialData = rows[0]
|
||
this.normalList = rows.slice(1) // 剩余数据作为普通列表
|
||
} else {
|
||
this.specialData = null
|
||
this.normalList = rows
|
||
}
|
||
}
|
||
|
||
// 判断是否还有更多数据
|
||
this.hasMore = this.currentPage * this.pageSize < total
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '获取数据失败',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('获取月度业绩数据失败:', error)
|
||
uni.showToast({
|
||
title: '网络错误，请重试',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
// 刷新数据（供父组件调用）
|
||
refresh() {
|
||
this.currentPage = 1
|
||
this.hasMore = true
|
||
this.specialData = null
|
||
this.normalList = []
|
||
this.getMonthAchieve()
|
||
},
|
||
|
||
// 加载下一页（供父组件调用）
|
||
nextPage() {
|
||
if (!this.hasMore || this.loading) return
|
||
|
||
this.currentPage++
|
||
this.getMonthAchieve(true)
|
||
},
|
||
// 获取排名样式类
|
||
getRankClass(rank) {
|
||
if (rank === 1) return 'rank-first'
|
||
if (rank === 2) return 'rank-second'
|
||
if (rank === 3) return 'rank-third'
|
||
return ''
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .uni-picker {
|
||
width: 100%;
|
||
}
|
||
|
||
// 全宽日期选择器样式
|
||
.date-selector-container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.date-selector-full {
|
||
display: flex;
|
||
width: 100%;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.date-picker-full {
|
||
flex: 1;
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
border: 1rpx solid #f0f0f0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.date-picker-item-full {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16rpx 20rpx;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.date-picker-item-full:active {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.date-value-full {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #005bac;
|
||
}
|
||
|
||
.title {
|
||
padding: 10rpx 0;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.width-auto {
|
||
background-color: #fff;
|
||
padding: 0 22rpx;
|
||
width: 690rpx;
|
||
margin: 0 auto;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.listrefor {
|
||
color: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 32rpx 21rpx;
|
||
margin-top: 25rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.flex_item:nth-child(1) {
|
||
width: 40%;
|
||
}
|
||
|
||
.flex_item:nth-child(2) {
|
||
width: 35%;
|
||
}
|
||
|
||
.flex_item:nth-child(3) {
|
||
width: 25%;
|
||
}
|
||
|
||
.text1 {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.text2 {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
|
||
.bg1 {
|
||
background: linear-gradient(180deg, #fc7c7c 0%, #f65757 100%);
|
||
}
|
||
|
||
.bg2 {
|
||
background: linear-gradient(180deg, #ff9354 0%, #ff7f36 100%);
|
||
}
|
||
|
||
.bg3 {
|
||
background: linear-gradient(180deg, #677af9 0%, #697bf2 100%);
|
||
}
|
||
|
||
/* 业绩分布列表样式 */
|
||
.performance-list-container {
|
||
padding: 20rpx;
|
||
padding-bottom: 60rpx;
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 特殊数据样式 */
|
||
.special-item {
|
||
background: linear-gradient(135deg, #005bac 0%, #0074d9 100%);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 6rpx 24rpx rgba(0, 91, 172, 0.2);
|
||
}
|
||
|
||
.special-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="30" r="2" fill="rgba(255,255,255,0.08)"/><circle cx="60" cy="80" r="2.5" fill="rgba(255,255,255,0.06)"/><circle cx="40" cy="60" r="1.5" fill="rgba(255,255,255,0.05)"/></svg>')
|
||
no-repeat;
|
||
background-size: cover;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.special-user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16rpx 20rpx;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 12rpx;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
|
||
.special-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.special-main-info {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.special-name {
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
flex: 1;
|
||
}
|
||
|
||
.special-level {
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
padding: 6rpx 12rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 16rpx;
|
||
backdrop-filter: blur(10rpx);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.special-performance-compact {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.special-performance-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.special-performance-item-compact {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border-radius: 12rpx;
|
||
padding: 12rpx 16rpx;
|
||
text-align: center;
|
||
backdrop-filter: blur(10rpx);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.special-performance-label-compact {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 20rpx;
|
||
margin-bottom: 4rpx;
|
||
display: block;
|
||
}
|
||
|
||
.special-performance-value-compact {
|
||
color: #ffffff;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
||
display: block;
|
||
}
|
||
|
||
/* 普通列表样式 */
|
||
.normal-list {
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.list-content {
|
||
padding: 0 0 16rpx 0;
|
||
}
|
||
|
||
.list-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 16rpx 24rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
position: relative;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.list-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.list-item:active {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.item-index {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: linear-gradient(135deg, #005bac 0%, #0074d9 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
margin-right: 16rpx;
|
||
margin-top: 2rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.2);
|
||
}
|
||
|
||
.item-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.item-name {
|
||
color: #333333;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.item-level {
|
||
color: #005bac;
|
||
font-size: 18rpx;
|
||
padding: 2rpx 8rpx;
|
||
background: rgba(0, 91, 172, 0.1);
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid rgba(0, 91, 172, 0.2);
|
||
}
|
||
|
||
.item-performance {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.performance-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.performance-group {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.performance-label {
|
||
color: #666666;
|
||
font-size: 18rpx;
|
||
margin-bottom: 2rpx;
|
||
}
|
||
|
||
.performance-value {
|
||
color: #333333;
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 状态样式 */
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 40rpx;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.loading-text {
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.no-more {
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.no-more-text {
|
||
color: #999999;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 80rpx 40rpx;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 80rpx;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.empty-text {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* 排名特殊颜色 */
|
||
.item-index.rank-first {
|
||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
||
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
|
||
}
|
||
|
||
.item-index.rank-second {
|
||
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
||
box-shadow: 0 2rpx 8rpx rgba(78, 205, 196, 0.3);
|
||
}
|
||
|
||
.item-index.rank-third {
|
||
background: linear-gradient(135deg, #45b7d1 0%, #96c93d 100%);
|
||
box-shadow: 0 2rpx 8rpx rgba(69, 183, 209, 0.3);
|
||
}
|
||
</style>
|