update
This commit is contained in:
parent
ca9d4fd6ff
commit
fcab7c2e8c
@ -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()
|
||||
}
|
||||
},
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user