409 lines
7.8 KiB
Vue
409 lines
7.8 KiB
Vue
<template>
|
||
<view class="ranking-container" :class="'theme-' + themeType">
|
||
<!-- 现代化选项卡 -->
|
||
<view class="ranking-tabs">
|
||
<view class="tab-item" @tap="selectTab(1000)" :class="{ 'active': nowRank == 1000 }">
|
||
<view class="tab-icon">🏪</view>
|
||
<text class="tab-text">商超</text>
|
||
</view>
|
||
<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
|
||
<view class="tab-icon">🍽️</view>
|
||
<text class="tab-text">餐饮</text>
|
||
</view>
|
||
<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
|
||
<view class="tab-icon">🍿</view>
|
||
<text class="tab-text">小吃</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 排行榜内容 -->
|
||
<view class="ranking-content" v-if="wechatPushSalesList && wechatPushSalesList[nowRank]">
|
||
<view class="ranking-item" v-for="(item, index) in wechatPushSalesList[nowRank]" :key="index"
|
||
:class="'rank-' + (index + 1)">
|
||
|
||
<!-- 排名徽章 -->
|
||
<view class="rank-badge" :class="'rank-' + (index + 1)">
|
||
<view v-if="index < 3" class="medal-icon">
|
||
{{ index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉' }}
|
||
</view>
|
||
<text v-else class="rank-number">{{ index + 1 }}</text>
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="item-content">
|
||
<view class="item-name">{{ item.COMMODITY_NAME || item.Commodity_Name }}</view>
|
||
<view class="item-stats">
|
||
<view class="stat-item">
|
||
<text class="stat-label">销售额</text>
|
||
<text class="stat-value sales-amount">¥{{ $util.fmoney(item.TOTALPRICE || item.TotalPrice)
|
||
}}</text>
|
||
</view>
|
||
<view class="stat-divider">|</view>
|
||
<view class="stat-item">
|
||
<text class="stat-label">销量</text>
|
||
<text class="stat-value sales-count">{{ item.SELLCOUNT || item.SellCount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view v-else class="empty-state">
|
||
<view class="empty-icon">📊</view>
|
||
<text class="empty-text">暂无排行数据</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: ['wechatPushSalesList', 'provinceCode'],
|
||
data: () => {
|
||
return {
|
||
nowRank: 1000
|
||
}
|
||
},
|
||
computed: {
|
||
// 根据省份代码映射主题类型
|
||
themeType() {
|
||
const themeMap = {
|
||
'330200': 'ningbo', // 宁波
|
||
'340000': 'anhui', // 安徽
|
||
'500000': 'chongqing', // 重庆
|
||
'510000': 'sichuan', // 四川
|
||
'520000': 'guizhou', // 贵州
|
||
'530000': 'yunnan', // 云南
|
||
'630000': 'qinghai', // 青海
|
||
'734100': 'hainan' // 海南
|
||
}
|
||
return themeMap[this.provinceCode] || 'yunnan'
|
||
}
|
||
},
|
||
methods: {
|
||
selectTab(index) {
|
||
this.nowRank = index
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 主题色 mixin
|
||
@mixin theme-colors($primary, $secondary) {
|
||
.tab-item.active {
|
||
background: linear-gradient(135deg, $primary, $secondary) !important;
|
||
box-shadow: 0 4rpx 12rpx rgba($primary, 0.3) !important;
|
||
}
|
||
|
||
.tab-item:hover {
|
||
background: rgba($primary, 0.1);
|
||
}
|
||
|
||
.stat-value.sales-amount {
|
||
color: $primary;
|
||
}
|
||
|
||
.ranking-item::before {
|
||
background: linear-gradient(180deg, $primary, $secondary);
|
||
}
|
||
|
||
.ranking-item:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
|
||
background: linear-gradient(135deg, $primary, $secondary);
|
||
}
|
||
}
|
||
|
||
.ranking-container {
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
/* 现代化选项卡 */
|
||
.ranking-tabs {
|
||
display: flex;
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
padding: 6rpx;
|
||
margin: 0 20rpx 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||
border: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16rpx 8rpx;
|
||
border-radius: 8rpx;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
transform: translateY(-2rpx);
|
||
|
||
.tab-text {
|
||
color: #fff !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tab-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-icon {
|
||
font-size: 32rpx;
|
||
margin-bottom: 8rpx;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
transition: all 0.3s ease;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 排行榜内容 */
|
||
.ranking-content {
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.ranking-item {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx 24rpx;
|
||
margin-bottom: 16rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||
border: 1rpx solid #f5f5f5;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4rpx;
|
||
background: linear-gradient(180deg, #27B25F, #4CCC7F);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
&:hover {
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-2rpx);
|
||
|
||
&::before {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
// 前三名特殊样式
|
||
&.rank-1 {
|
||
background: linear-gradient(135deg, #fffbf0, #fff);
|
||
|
||
&::before {
|
||
background: linear-gradient(180deg, #ffb300, #ffd700);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&.rank-2 {
|
||
background: linear-gradient(135deg, #f0f0f0, #fff);
|
||
|
||
&::before {
|
||
background: linear-gradient(180deg, #c0c0c0, #e8e8e8);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&.rank-3 {
|
||
background: linear-gradient(135deg, #f5f1eb, #fff);
|
||
|
||
&::before {
|
||
background: linear-gradient(180deg, #a0714d, #cd853f);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 排名徽章 */
|
||
.rank-badge {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 24rpx;
|
||
font-weight: 700;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||
|
||
&.rank-1,
|
||
&.rank-2,
|
||
&.rank-3 {
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.medal-icon {
|
||
font-size: 36rpx;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
.rank-number {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
|
||
background: linear-gradient(135deg, #8c9eff, #a5b4fc);
|
||
}
|
||
|
||
@keyframes pulse {
|
||
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
/* 商品信息 */
|
||
.item-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
margin-bottom: 12rpx;
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.item-stats {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #6c757d;
|
||
margin-right: 8rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
line-height: 40rpx;
|
||
// font-family: 'DIN Alternate', 'Bahnschrift', monospace;
|
||
white-space: nowrap;
|
||
|
||
&.sales-amount {
|
||
color: #27B25F; // 默认云南主题色，会被主题色覆盖
|
||
}
|
||
|
||
&.sales-count {
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.stat-divider {
|
||
margin: 0 16rpx;
|
||
color: #e0e0e0;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 80rpx 20rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 80rpx;
|
||
margin-bottom: 20rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 主题色应用 - 根据传入的省份代码动态应用主题 */
|
||
.ranking-container.theme-ningbo {
|
||
@include theme-colors(#1890FF, #69C0FF);
|
||
}
|
||
|
||
.ranking-container.theme-anhui {
|
||
@include theme-colors(#748ED6, #91A7E3);
|
||
}
|
||
|
||
.ranking-container.theme-chongqing {
|
||
@include theme-colors(#FA541C, #FF7A45);
|
||
}
|
||
|
||
.ranking-container.theme-sichuan {
|
||
@include theme-colors(#FA8C16, #FFA940);
|
||
}
|
||
|
||
.ranking-container.theme-guizhou {
|
||
@include theme-colors(#52C41A, #73D13D);
|
||
}
|
||
|
||
.ranking-container.theme-yunnan {
|
||
@include theme-colors(#27B25F, #4CCC7F);
|
||
}
|
||
|
||
.ranking-container.theme-qinghai {
|
||
@include theme-colors(#13C2C2, #36CFC9);
|
||
}
|
||
|
||
.ranking-container.theme-hainan {
|
||
@include theme-colors(#E91E63, #F06292);
|
||
}
|
||
</style>
|