This commit is contained in:
ylj20011123 2025-10-15 11:13:52 +08:00
parent ca9d4fd6ff
commit fcab7c2e8c
2 changed files with 78 additions and 80 deletions

View File

@ -313,12 +313,13 @@
<shopCell v-for="(item, i) in regionList" :key="i" :item='item' @toggleShow="toggleShow" :i='i' />
</template>
</view>
<template v-if="theRequest && theRequest.ProvinceCode == '620000' || theRequest.ProvinceCode == '530000'">
<template
v-if="theRequest && theRequest.ProvinceCode == '620000' || theRequest.ProvinceCode == '530000' || theRequest.ProvinceCode == '734100'">
<view class="uni-inline-item modle-title">
<image src="/static/images/revenue/product-ranking.png" mode="aspectFit"></image>
<text class="strong-text">商品销售排行</text>
</view>
<RankContent :wechatPushSalesList="wechatPushSalesList" v-if="!isLoading"></RankContent>
<RankContent :wechatPushSalesList="wechatPushSalesList" :provinceCode="currentProvinceCode" v-if="!isLoading"></RankContent>
</template>
</view>
<view v-if="!showPage && !isLoading">
@ -429,14 +430,14 @@ export default {
background: '#E6FFFB',
accent: '#5CDBD3'
},
'734100': { //
'734100': { //
primary: '#E91E63',
secondary: '#F06292',
background: '#FCE4EC',
accent: '#F48FB1'
}
}
return themes[this.currentProvinceCode] || themes['530000'] // 使
return themes[this.currentProvinceCode] || themes['340000'] // 使
}
},
components: {
@ -485,7 +486,7 @@ export default {
//
var finalParams = {
ProvinceCode: params.ProvinceCode || '530000', //
ProvinceCode: params.ProvinceCode || '340000', //
GroupType: params.GroupType || '1000',
time: params.time || this.lastDay,
ServerpartIds: params.ServerpartIds || ''
@ -565,7 +566,7 @@ export default {
// - uniapp
getDefaultParams: function () {
return {
ProvinceCode: '530000', //
ProvinceCode: '340000', //
GroupType: '1000',
time: this.lastDay,
ServerpartIds: ''
@ -1219,7 +1220,7 @@ export default {
this.showPage = false
this.opacity = 1
// 使
this.currentProvinceCode = '530000'
this.currentProvinceCode = '340000'
}
}
this.nowTab = this.theRequest && this.theRequest.ProvinceCode == 340000 ? 1 : 2
@ -1228,7 +1229,7 @@ export default {
this.getDetail(this.theRequest)
}
//
if (this.theRequest && (this.theRequest.ProvinceCode == "620000" || this.theRequest.ProvinceCode == "530000")) {
if (this.theRequest && (this.theRequest.ProvinceCode == "620000" || this.theRequest.ProvinceCode == "530000" || this.theRequest.ProvinceCode == "734100")) {
this.getRankContent()
}
},

View File

@ -1,16 +1,16 @@
<template>
<view class="ranking-container">
<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(3000)" :class="{ 'active': nowRank == 3000 }">
<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(2000)" :class="{ 'active': nowRank == 2000 }">
<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
<view class="tab-icon">🍿</view>
<text class="tab-text">小吃</text>
</view>
@ -59,15 +59,30 @@
<script>
export default {
props: ['wechatPushSalesList'],
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
}
},
@ -78,6 +93,34 @@ export default {
</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;
}
@ -105,8 +148,6 @@ export default {
cursor: pointer;
&.active {
background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
transform: translateY(-2rpx);
.tab-text {
@ -118,10 +159,6 @@ export default {
transform: scale(1.1);
}
}
&:hover {
background: rgba(39, 178, 95, 0.1);
}
}
.tab-icon {
@ -300,7 +337,7 @@ export default {
white-space: nowrap;
&.sales-amount {
color: #27B25F;
color: #27B25F; //
}
&.sales-count {
@ -336,76 +373,36 @@ export default {
color: #999;
}
/* 主题色支持 - 通过全局主题类控制 */
:global(.province-theme-330200) .tab-item.active {
background: linear-gradient(135deg, #1890FF, #69C0FF) !important;
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3) !important;
.stat-value.sales-amount {
color: #1890FF;
}
/* 主题色应用 - 根据传入的省份代码动态应用主题 */
.ranking-container.theme-ningbo {
@include theme-colors(#1890FF, #69C0FF);
}
:global(.province-theme-340000) .tab-item.active {
background: linear-gradient(135deg, #748ED6, #91A7E3) !important;
box-shadow: 0 4rpx 12rpx rgba(116, 142, 214, 0.3) !important;
.stat-value.sales-amount {
color: #748ED6;
}
.ranking-container.theme-anhui {
@include theme-colors(#748ED6, #91A7E3);
}
:global(.province-theme-500000) .tab-item.active {
background: linear-gradient(135deg, #FA541C, #FF7A45) !important;
box-shadow: 0 4rpx 12rpx rgba(250, 84, 28, 0.3) !important;
.stat-value.sales-amount {
color: #FA541C;
}
.ranking-container.theme-chongqing {
@include theme-colors(#FA541C, #FF7A45);
}
:global(.province-theme-510000) .tab-item.active {
background: linear-gradient(135deg, #FA8C16, #FFA940) !important;
box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3) !important;
.stat-value.sales-amount {
color: #FA8C16;
}
.ranking-container.theme-sichuan {
@include theme-colors(#FA8C16, #FFA940);
}
:global(.province-theme-520000) .tab-item.active {
background: linear-gradient(135deg, #52C41A, #73D13D) !important;
box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3) !important;
.stat-value.sales-amount {
color: #52C41A;
}
.ranking-container.theme-guizhou {
@include theme-colors(#52C41A, #73D13D);
}
:global(.province-theme-530000) .tab-item.active {
background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
.stat-value.sales-amount {
color: #27B25F;
}
.ranking-container.theme-yunnan {
@include theme-colors(#27B25F, #4CCC7F);
}
:global(.province-theme-630000) .tab-item.active {
background: linear-gradient(135deg, #13C2C2, #36CFC9) !important;
box-shadow: 0 4rpx 12rpx rgba(19, 194, 194, 0.3) !important;
.stat-value.sales-amount {
color: #13C2C2;
}
.ranking-container.theme-qinghai {
@include theme-colors(#13C2C2, #36CFC9);
}
:global(.province-theme-734100) .tab-item.active {
background: linear-gradient(135deg, #E91E63, #F06292) !important;
box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3) !important;
.stat-value.sales-amount {
color: #E91E63;
}
.ranking-container.theme-hainan {
@include theme-colors(#E91E63, #F06292);
}
</style>