update
This commit is contained in:
ylj20011123
parent
9e6071003f
commit
431d95645b
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,28 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
<block>
|
<view class="ranking-container">
|
||||||
<div class="uni-inline-item ranking-tab-box">
|
<!-- 现代化选项卡 -->
|
||||||
<div class="ranking-tab-unit" @tap="selectTab(1000)" :class="{'active':nowRank==1000}">商超
|
<view class="ranking-tabs">
|
||||||
</div>
|
<view class="tab-item" @tap="selectTab(1000)" :class="{ 'active': nowRank == 1000 }">
|
||||||
<div class="ranking-tab-unit" @tap="selectTab(2000)" :class="{'active':nowRank==2000}">餐饮
|
<view class="tab-icon">🏪</view>
|
||||||
</div>
|
<text class="tab-text">商超</text>
|
||||||
<div class="ranking-tab-unit" @tap="selectTab(3000)" :class="{'active':nowRank==3000}">小吃
|
</view>
|
||||||
</div>
|
<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
|
||||||
</div>
|
<view class="tab-icon">🍽️</view>
|
||||||
<div class="ranking-content" v-if="wechatPushSalesList">
|
<text class="tab-text">餐饮</text>
|
||||||
<div class="ranking-list" v-for="(item,index) in wechatPushSalesList[nowRank]" :key="index">
|
</view>
|
||||||
<div class="rank-index">{{item.RANK_ID||item.Rank_ID}}</div>
|
<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
|
||||||
<div class="ranking-list-unit">
|
<view class="tab-icon">🍿</view>
|
||||||
<div>{{item.COMMODITY_NAME || item.Commodity_Name}}</div>
|
<text class="tab-text">小吃</text>
|
||||||
<div class="ranking-unit-info">
|
</view>
|
||||||
<text>销售金额 </text>
|
</view>
|
||||||
<text>¥{{$util.fmoney(item.TOTALPRICE || item.TotalPrice)}}</text>
|
|
||||||
<text>销售数量 </text>
|
<!-- 排行榜内容 -->
|
||||||
<text>{{item.SELLCOUNT || item.SellCount}}</text>
|
<view class="ranking-content" v-if="wechatPushSalesList && wechatPushSalesList[nowRank]">
|
||||||
</div>
|
<view class="ranking-item" v-for="(item, index) in wechatPushSalesList[nowRank]" :key="index"
|
||||||
</div>
|
:class="'rank-' + (index + 1)">
|
||||||
</div>
|
|
||||||
</div>
|
<!-- 排名徽章 -->
|
||||||
</block>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -45,101 +77,327 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
/*排行*/
|
.ranking-container {
|
||||||
.ranking-tab-box {
|
margin: 20rpx 0;
|
||||||
margin: 20rpx 32rpx;
|
}
|
||||||
border: 2rpx solid #565656;
|
|
||||||
|
/* 现代化选项卡 */
|
||||||
|
.ranking-tabs {
|
||||||
|
display: flex;
|
||||||
|
background: #fff;
|
||||||
|
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;
|
border-radius: 8rpx;
|
||||||
display: flex;
|
transition: all 0.3s ease;
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: linear-gradient(135deg, #27B25F, #4CCC7F);
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3);
|
||||||
|
transform: translateY(-2rpx);
|
||||||
|
|
||||||
|
.tab-text {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-tab-box .ranking-tab-unit {
|
.tab-icon {
|
||||||
color: #565656;
|
transform: scale(1.1);
|
||||||
flex: 1;
|
}
|
||||||
height: 64rpx;
|
|
||||||
line-height: 60rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-tab-box .ranking-tab-unit.active {
|
&:hover {
|
||||||
background-color: #565656;
|
background: rgba(39, 178, 95, 0.1);
|
||||||
color: #fff
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-tab-box .ranking-tab-unit+.ranking-tab-unit {
|
.tab-icon {
|
||||||
border-left: 2rpx solid #565656;
|
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 {
|
.ranking-content {
|
||||||
/* display: none; */
|
padding: 0 20rpx;
|
||||||
min-height: 160rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-list {
|
.ranking-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #000;
|
background: #fff;
|
||||||
padding: 24rpx 32rpx;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .rank-index {
|
&:hover {
|
||||||
width: 72rpx;
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||||
height: 72rpx;
|
transform: translateY(-2rpx);
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
&::before {
|
||||||
font-size: 30rpx;
|
opacity: 1;
|
||||||
font-weight: bolder;
|
}
|
||||||
margin-right: 32rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-list:nth-child(1) .rank-index {
|
// 前三名特殊样式
|
||||||
background: url('/static/images/revenue/top1.png') no-repeat center;
|
&.rank-1 {
|
||||||
background-size: contain;
|
background: linear-gradient(135deg, #fffbf0, #fff);
|
||||||
font-size: 0;
|
|
||||||
|
&::before {
|
||||||
|
background: linear-gradient(180deg, #ffb300, #ffd700);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-list:nth-child(2) .rank-index {
|
&.rank-2 {
|
||||||
background: url(/static/images/revenue/top2.png) no-repeat center;
|
background: linear-gradient(135deg, #f0f0f0, #fff);
|
||||||
background-size: contain;
|
|
||||||
font-size: 0;
|
&::before {
|
||||||
|
background: linear-gradient(180deg, #c0c0c0, #e8e8e8);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-list:nth-child(3) .rank-index {
|
&.rank-3 {
|
||||||
background: url(/static/images/revenue/top3.png) no-repeat center;
|
background: linear-gradient(135deg, #f5f1eb, #fff);
|
||||||
background-size: contain;
|
|
||||||
font-size: 0;
|
&::before {
|
||||||
|
background: linear-gradient(180deg, #a0714d, #cd853f);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-list-unit {
|
/* 排名徽章 */
|
||||||
font-size: 28rpx;
|
.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: 24rpx;
|
||||||
|
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;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-unit-info {
|
.stat-label {
|
||||||
/* margin-top: 16rpx; */
|
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;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* font-size: .13rem; */
|
justify-content: center;
|
||||||
|
padding: 80rpx 20rpx;
|
||||||
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-unit-info text {
|
.empty-icon {
|
||||||
flex: 2;
|
font-size: 80rpx;
|
||||||
color: #929292;
|
margin-bottom: 20rpx;
|
||||||
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-unit-info text:nth-child(2) {
|
.empty-text {
|
||||||
flex: 3;
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-content .ranking-unit-info text:nth-child(2n) {
|
/* 主题色支持 - 通过全局主题类控制 */
|
||||||
color: #000
|
:global(.province-theme-330200) .tab-item.active {
|
||||||
|
background: linear-gradient(135deg, #1890FF, #69C0FF);
|
||||||
|
|
||||||
|
.stat-value.sales-amount {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-ico {
|
:global(.province-theme-340000) .tab-item.active {
|
||||||
width: 72rpx;
|
background: linear-gradient(135deg, #748ED6, #91A7E3);
|
||||||
height: 72rpx;
|
|
||||||
|
.stat-value.sales-amount {
|
||||||
|
color: #748ED6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.province-theme-500000) .tab-item.active {
|
||||||
|
background: linear-gradient(135deg, #FA541C, #FF7A45);
|
||||||
|
|
||||||
|
.stat-value.sales-amount {
|
||||||
|
color: #FA541C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.province-theme-510000) .tab-item.active {
|
||||||
|
background: linear-gradient(135deg, #FA8C16, #FFA940);
|
||||||
|
|
||||||
|
.stat-value.sales-amount {
|
||||||
|
color: #FA8C16;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.province-theme-520000) .tab-item.active {
|
||||||
|
background: linear-gradient(135deg, #52C41A, #73D13D);
|
||||||
|
|
||||||
|
.stat-value.sales-amount {
|
||||||
|
color: #52C41A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.province-theme-530000) .tab-item.active {
|
||||||
|
background: linear-gradient(135deg, #27B25F, #4CCC7F);
|
||||||
|
|
||||||
|
.stat-value.sales-amount {
|
||||||
|
color: #27B25F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.province-theme-630000) .tab-item.active {
|
||||||
|
background: linear-gradient(135deg, #13C2C2, #36CFC9);
|
||||||
|
|
||||||
|
.stat-value.sales-amount {
|
||||||
|
color: #13C2C2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.province-theme-734100) .tab-item.active {
|
||||||
|
background: linear-gradient(135deg, #E91E63, #F06292);
|
||||||
|
|
||||||
|
.stat-value.sales-amount {
|
||||||
|
color: #E91E63;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -202,7 +202,7 @@
|
|||||||
分润门店:
|
分润门店:
|
||||||
<span
|
<span
|
||||||
class="amount"
|
class="amount"
|
||||||
style="font-size: 28rpx; padding-left: 0.5em"
|
style="font-size: 24rpx; padding-left: 0.5em"
|
||||||
>
|
>
|
||||||
{{ headMsg.shareShopCount }}个
|
{{ headMsg.shareShopCount }}个
|
||||||
</span>
|
</span>
|
||||||
@ -213,7 +213,7 @@
|
|||||||
驿达分润:
|
驿达分润:
|
||||||
<span
|
<span
|
||||||
class="amount"
|
class="amount"
|
||||||
style="font-size: 28rpx; padding-left: 0.5em"
|
style="font-size: 24rpx; padding-left: 0.5em"
|
||||||
>
|
>
|
||||||
{{ $util.fmoney(headMsg.royaltyPrice) }}元
|
{{ $util.fmoney(headMsg.royaltyPrice) }}元
|
||||||
</span>
|
</span>
|
||||||
@ -237,7 +237,7 @@
|
|||||||
万佳配送订单:
|
万佳配送订单:
|
||||||
<span
|
<span
|
||||||
class="amount"
|
class="amount"
|
||||||
style="font-size: 28rpx; padding-left: 0.5em"
|
style="font-size: 24rpx; padding-left: 0.5em"
|
||||||
>
|
>
|
||||||
{{ headMsg.deliverBillCount }}单
|
{{ headMsg.deliverBillCount }}单
|
||||||
</span>
|
</span>
|
||||||
@ -248,7 +248,7 @@
|
|||||||
采购金额:
|
采购金额:
|
||||||
<span
|
<span
|
||||||
class="amount"
|
class="amount"
|
||||||
style="font-size: 28rpx; padding-left: 0.5em"
|
style="font-size: 24rpx; padding-left: 0.5em"
|
||||||
>
|
>
|
||||||
{{ $util.fmoney(headMsg.deliverPrice) }}元
|
{{ $util.fmoney(headMsg.deliverPrice) }}元
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -1,12 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="analysis-cell" @tap="toggleShow" :class="{'active':item.show}">
|
<div class="analysis-cell" @tap="toggleShow" :class="{ 'active': item.show }" :style="activeCellStyleStr">
|
||||||
<div class="shop-title">
|
<div class="shop-title" :class="'theme-' + provinceCode">
|
||||||
<span> {{ (i > 8 ? i + 1 : '0' + (i + 1)) + ' ' + item.SHOPNAME }}</span>
|
<span> {{ (i > 8 ? i + 1 : '0' + (i + 1)) + ' ' + item.SHOPNAME }}</span>
|
||||||
<p>
|
<p>
|
||||||
<span v-show="item.UNACCOUNT_SIGN">￥</span>
|
<span v-show="item.UNACCOUNT_SIGN">￥</span>
|
||||||
<span class="cell-price" :style="{'padding-right':!item.UNACCOUNT_SIGN ? '36rpx':'0','font-size':!item.UNACCOUNT_SIGN ? '24rpx':'36rpx'}">{{item.UNACCOUNT_SIGN ? $util.fmoney(item.CASHPAY_TOTAL,2): '无结账信息'}}</span>
|
<span class="cell-price" :style="priceStyleStr">{{
|
||||||
<image src="/static/images/effective/true.png" mode="aspectFit" class="" v-if='item.SHOWDEAL_SIGN'></image>
|
item.UNACCOUNT_SIGN
|
||||||
|
? $util.fmoney(item.CASHPAY_TOTAL, 2) : '无结账信息' }}</span>
|
||||||
|
<image src="/static/images/effective/true.png" mode="aspectFit" class="" v-if='item.SHOWDEAL_SIGN'>
|
||||||
|
</image>
|
||||||
<!-- <text class="uni-icon uni-icon-checkmarkempty" v-if='item.SHOWDEAL_SIGN'></text> -->
|
<!-- <text class="uni-icon uni-icon-checkmarkempty" v-if='item.SHOWDEAL_SIGN'></text> -->
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
@ -20,28 +23,41 @@
|
|||||||
<div class="uni-inline-flex">
|
<div class="uni-inline-flex">
|
||||||
<span class="detail-title">结账时间：</span>
|
<span class="detail-title">结账时间：</span>
|
||||||
<div style="flex: 1;text-align: left;">
|
<div style="flex: 1;text-align: left;">
|
||||||
<div>起 {{unit.ENDACCOUNT_STARTDATE}}</div>
|
<div style="font-size: 24rpx;">起 {{ unit.ENDACCOUNT_STARTDATE }}</div>
|
||||||
<div>止 {{unit.ENDACCOUNT_DATE}}</div>
|
<div style="font-size: 24rpx;">止 {{ unit.ENDACCOUNT_DATE }}</div>
|
||||||
</div>
|
</div>
|
||||||
<span style="color:#EE7941;margin-right:50rpx;padding-top: 42rpx;">{{getHour(unit.ENDACCOUNT_STARTDATE,unit.ENDACCOUNT_DATE)}}小时</span>
|
<span style="color:#EE7941;margin-right:50rpx;padding-top: 20rpx;font-size: 24rpx;">{{
|
||||||
|
getHour(unit.ENDACCOUNT_STARTDATE, unit.ENDACCOUNT_DATE) }}小时</span>
|
||||||
</div>
|
</div>
|
||||||
<block v-if="unit.DESCRIPTION_DATE">
|
<block v-if="unit.DESCRIPTION_DATE">
|
||||||
|
|
||||||
<div class="detail-title">日结校验：{{ unit.DESCRIPTION_DATE }}</div>
|
<div class="detail-title">日结校验：{{ unit.DESCRIPTION_DATE }}</div>
|
||||||
<p><span class="detail-title">{{unit.DESCRIPTION_STAFF}}：</span><span>{{unit.DIFFERENCE_REASON}}</span></p>
|
<p><span class="detail-title">{{ unit.DESCRIPTION_STAFF }}：</span><span style="font-size: 24rpx;">{{
|
||||||
|
unit.DIFFERENCE_REASON
|
||||||
|
}}</span>
|
||||||
|
</p>
|
||||||
</block>
|
</block>
|
||||||
<block v-if="unit.APPROVE_DATE">
|
<block v-if="unit.APPROVE_DATE">
|
||||||
<div><span class="detail-title">日结审核：{{ unit.APPROVE_DATE }}</span></div>
|
<div><span class="detail-title">日结审核：{{ unit.APPROVE_DATE }}</span></div>
|
||||||
<p><span class="detail-title">{{unit.APPROVE_STAFF}}：</span><span>{{unit.APPROVED_INFO}}</span></p>
|
<p><span class="detail-title" style="font-size: 24rpx;">{{ unit.APPROVE_STAFF }}：</span><span
|
||||||
|
style="font-size: 24rpx;">{{
|
||||||
|
unit.APPROVED_INFO }}</span>
|
||||||
|
</p>
|
||||||
</block>
|
</block>
|
||||||
<div>
|
<div>
|
||||||
<p class="detail-short-info" v-show="unit.FACTAMOUNT_SALE">单品报表：<text class="uni-icon uni-icon-checkmarkempty" ></text></p>
|
<p class="detail-short-info" v-show="unit.FACTAMOUNT_SALE">单品报表：<text
|
||||||
<p class="detail-short-info" v-show="unit.FACTAMOUNT_CIGARETTE">香烟数据：<span class="uni-icon uni-icon-checkmarkempty"></span></p>
|
class="uni-icon uni-icon-checkmarkempty"></text></p>
|
||||||
|
<p class="detail-short-info" v-show="unit.FACTAMOUNT_CIGARETTE">香烟数据：<span
|
||||||
|
class="uni-icon uni-icon-checkmarkempty"></span></p>
|
||||||
</div>
|
</div>
|
||||||
<div><span class="detail-title detail-short-info">稽核次数：{{unit.CHECK_COUNT}} 次</span><span class="detail-short-info">长短款额：{{$util.fmoney(unit.DIFFERENT_PRICE)}} 元</span></div>
|
<div><span class="detail-title detail-short-info" style="font-size: 24rpx;">稽核次数：{{ unit.CHECK_COUNT }}
|
||||||
|
次</span><span class="detail-short-info" style="font-size: 24rpx;">长短款额：{{
|
||||||
|
$util.fmoney(unit.DIFFERENT_PRICE) }} 元</span></div>
|
||||||
<div>
|
<div>
|
||||||
<span class="detail-title detail-short-info">现金缴款：{{$util.fmoney(unit.CASHPAY_DOWNLORD)}} 元</span>
|
<span class="detail-title detail-short-info" style="font-size: 24rpx;">现金缴款：{{
|
||||||
<span class="detail-short-info">移动支付：{{$util.fmoney(unit.MOBILEPAYMENT)}} 元</span>
|
$util.fmoney(unit.CASHPAY_DOWNLORD) }} 元</span>
|
||||||
|
<span class="detail-short-info" style="font-size: 24rpx;">移动支付：{{ $util.fmoney(unit.MOBILEPAYMENT)
|
||||||
|
}} 元</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -58,6 +74,10 @@
|
|||||||
i: {
|
i: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true
|
required: true
|
||||||
|
},
|
||||||
|
provinceCode: {
|
||||||
|
type: String,
|
||||||
|
default: '530000' // 默认使用云南的配色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -67,7 +87,57 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
// 根据省份代码获取主题色
|
||||||
|
themeColors() {
|
||||||
|
const themes = {
|
||||||
|
'330200': { // 宁波
|
||||||
|
primary: '#1890FF',
|
||||||
|
secondary: '#69C0FF'
|
||||||
|
},
|
||||||
|
'340000': { // 安徽
|
||||||
|
primary: '#748ED6',
|
||||||
|
secondary: '#91A7E3'
|
||||||
|
},
|
||||||
|
'500000': { // 重庆
|
||||||
|
primary: '#FA541C',
|
||||||
|
secondary: '#FF7A45'
|
||||||
|
},
|
||||||
|
'510000': { // 四川
|
||||||
|
primary: '#FA8C16',
|
||||||
|
secondary: '#FFA940'
|
||||||
|
},
|
||||||
|
'520000': { // 贵州
|
||||||
|
primary: '#52C41A',
|
||||||
|
secondary: '#73D13D'
|
||||||
|
},
|
||||||
|
'530000': { // 云南（默认色）
|
||||||
|
primary: '#27B25F',
|
||||||
|
secondary: '#4CCC7F'
|
||||||
|
},
|
||||||
|
'630000': { // 青海
|
||||||
|
primary: '#13C2C2',
|
||||||
|
secondary: '#36CFC9'
|
||||||
|
},
|
||||||
|
'734100': { // 海南
|
||||||
|
primary: '#E91E63',
|
||||||
|
secondary: '#F06292'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return themes[this.provinceCode] || themes['530000']
|
||||||
|
},
|
||||||
|
|
||||||
|
// 动态样式字符串（小程序兼容）
|
||||||
|
activeCellStyleStr() {
|
||||||
|
if (!this.item.show) return ''
|
||||||
|
return `border: 2rpx solid ${this.themeColors.primary}; box-shadow: 0 4px 20px rgba(${this.hexToRgb(this.themeColors.primary)}, 0.15);`
|
||||||
|
},
|
||||||
|
|
||||||
|
// 价格样式字符串
|
||||||
|
priceStyleStr() {
|
||||||
|
const paddingRight = !this.item.UNACCOUNT_SIGN ? '0' : '0'
|
||||||
|
const fontSize = !this.item.UNACCOUNT_SIGN ? '24rpx' : '24rpx'
|
||||||
|
return `padding-right: ${paddingRight}; font-size: ${fontSize}; color: ${this.themeColors.primary};`
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getHour(start, end) {
|
getHour(start, end) {
|
||||||
@ -76,117 +146,234 @@
|
|||||||
|
|
||||||
toggleShow() {
|
toggleShow() {
|
||||||
this.$emit('toggleShow', this.i)
|
this.$emit('toggleShow', this.i)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 将十六进制颜色转换为RGB
|
||||||
|
hexToRgb(hex) {
|
||||||
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||||
|
return result ?
|
||||||
|
`${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` :
|
||||||
|
'39, 178, 95'; // 默认绿色的RGB
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.analysis-cell {
|
.analysis-cell {
|
||||||
/* height: 1140rpx; */
|
background-color: #fff;
|
||||||
background-color: #ffffff;
|
border-radius: 16rpx;
|
||||||
border-bottom: 2rpx solid #F8F8F8;
|
margin-bottom: 16rpx;
|
||||||
padding: 24rpx 20rpx 18rpx 30rpx;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
padding: 16rpx 16rpx 8rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
// 边框和阴影由动态样式控制
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-cell .shop-title {
|
.analysis-cell .shop-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 20rpx;
|
font-size: 24rpx;
|
||||||
font-size: 26rpx;
|
font-weight: 600;
|
||||||
height: 100%;
|
align-items: flex-start;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-cell .shop-title:before {
|
.analysis-cell .shop-title:before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 20rpx;
|
width: 24rpx;
|
||||||
height: 20rpx;
|
height: 24rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 50%;
|
||||||
background: url(/static/images/revenue/select.png) no-repeat center;
|
left: -40rpx;
|
||||||
background-size: contain;
|
top: 4rpx;
|
||||||
left: -32rpx;
|
background: #e0e0e0;
|
||||||
|
border: 3rpx solid #fff;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-cell.active .shop-title:before {
|
// 主题色状态指示点样式
|
||||||
background: url(/static/images/revenue/select_active.png) no-repeat center;
|
.analysis-cell.active .shop-title.theme-330200:before {
|
||||||
background-size: contain;
|
background: #1890FF;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(24, 144, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.analysis-cell.active .shop-title.theme-340000:before {
|
||||||
|
background: #748ED6;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(116, 142, 214, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.analysis-cell.active .shop-title.theme-500000:before {
|
||||||
|
background: #FA541C;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(250, 84, 28, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.analysis-cell.active .shop-title.theme-510000:before {
|
||||||
|
background: #FA8C16;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(250, 140, 22, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.analysis-cell.active .shop-title.theme-520000:before {
|
||||||
|
background: #52C41A;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(82, 196, 26, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.analysis-cell.active .shop-title.theme-530000:before {
|
||||||
|
background: #27B25F;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(39, 178, 95, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.analysis-cell.active .shop-title.theme-630000:before {
|
||||||
|
background: #13C2C2;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(19, 194, 194, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.analysis-cell.active .shop-title.theme-734100:before {
|
||||||
|
background: #E91E63;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(233, 30, 99, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.shop-title image {
|
.shop-title image {
|
||||||
width: 40rpx;
|
width: 32rpx;
|
||||||
height: 40rpx;
|
height: 32rpx;
|
||||||
margin-left: 16rpx;
|
margin-left: 12rpx;
|
||||||
vertical-align: text-bottom;
|
border-radius: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-cell .cell-price {
|
.analysis-cell .cell-price {
|
||||||
color: #565656;
|
// 颜色由动态样式控制
|
||||||
font-family: Bahnschrift Regular;
|
font-family: 'PingFang SC', sans-serif;
|
||||||
font-size: 38rpx;
|
font-size: 24rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atribute-tag {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(135deg, #ff9f43, #ff8c42);
|
||||||
|
color: #fff;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
margin: 4rpx 8rpx 4rpx 0;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(255, 159, 67, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-detail {
|
.analysis-detail {
|
||||||
background-color: #fff;
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 12rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
// margin-top: 16rpx;
|
||||||
|
border: 1rpx solid #f0f0f0;
|
||||||
}
|
}
|
||||||
.analysis-detail span, .analysis-detail view{
|
|
||||||
|
.analysis-detail span,
|
||||||
|
.analysis-detail view {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 24rpx ;
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
.uni-icon-checkmarkempty, .analysis-detail span.uni-icon-checkmarkempty {
|
|
||||||
color: #4F8E24;
|
.uni-icon-checkmarkempty,
|
||||||
font-size: 36rpx;
|
.analysis-detail span.uni-icon-checkmarkempty {
|
||||||
|
color: #2ed573;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-detail::before {
|
.analysis-detail::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 24rpx;
|
width: 0;
|
||||||
height: 12rpx;
|
height: 0;
|
||||||
background: url(/static/images/revenue/bg-s.png) no-repeat center;
|
border-left: 12rpx solid transparent;
|
||||||
background-size: contain;
|
border-right: 12rpx solid transparent;
|
||||||
display: block;
|
border-bottom: 16rpx solid #f8f9fa;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -12rpx;
|
top: -16rpx;
|
||||||
left: 48rpx;
|
left: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-detail .detail-unit {
|
.analysis-detail .detail-unit {
|
||||||
background-color: #F8F8F8;
|
background-color: #fff;
|
||||||
line-height: 2;
|
padding: 24rpx;
|
||||||
padding: 20rpx 10rpx 20rpx 50rpx;
|
border-radius: 8rpx;
|
||||||
|
// margin: 16rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
// margin-top: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-detail .detail-unit>div {
|
.analysis-detail .detail-unit>div {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 12rpx;
|
align-items: flex-start;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-detail .detail-unit>p {
|
.analysis-detail .detail-unit>p {
|
||||||
margin-top: 12rpx;
|
margin-bottom: 16rpx;
|
||||||
}
|
|
||||||
.analysis-detail .detail-unit+.detail-unit {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysis-cell .atribute-tag {
|
&:last-child {
|
||||||
color: #EE7941;
|
margin-bottom: 0;
|
||||||
margin-left: 10rpx;
|
}
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-detail span {
|
.analysis-detail span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-detail .detail-title {
|
.analysis-detail .detail-title {
|
||||||
min-width: 120rpx;
|
min-width: 140rpx;
|
||||||
|
color: #666;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-detail .detail-short-info {
|
.analysis-detail .detail-short-info {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-right: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-inline-flex {
|
||||||
|
span:last-child {
|
||||||
|
color: #ff9f43;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-body" v-if="showPage">
|
<div :class="'province-theme-' + currentProvinceCode" v-if="showPage">
|
||||||
|
<div class="page-body">
|
||||||
|
|
||||||
<div class="service-brand-box">
|
<div class="service-brand-box">
|
||||||
<div class="uni-flex align-center">
|
<div class="uni-flex align-center">
|
||||||
@ -8,15 +9,19 @@
|
|||||||
<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
|
<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
|
||||||
|
|
||||||
|
|
||||||
<div class="band-name">{{pageMsg.Brand_Name}}</div>
|
<!-- <div class="band-name">{{ pageMsg.Brand_Name }}</div> -->
|
||||||
|
<div class="band-name">{{ pageMsg.ShopEndaccountList && pageMsg.ShopEndaccountList.length > 0 ?
|
||||||
|
pageMsg.ShopEndaccountList[0].SERVERPART_NAME : "" }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="price-num">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount, 2) : '0.00' }}
|
||||||
</div>
|
</div>
|
||||||
<div class="price-num">{{pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount,2) :'0.00'}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!--服务区门店分析-->
|
<!--服务区门店分析-->
|
||||||
|
<div style="margin-top: 0 20rpx;padding: 0 16rpx">
|
||||||
|
<shopCell v-for="(item, i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow"
|
||||||
|
:i='i' :provinceCode='currentProvinceCode'></shopCell>
|
||||||
|
|
||||||
<div style="margin-top: 0 20rpx;" >
|
</div>
|
||||||
<shopCell v-for="(item,i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow" :i='i'></shopCell>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -29,6 +34,7 @@
|
|||||||
showPage: false,
|
showPage: false,
|
||||||
|
|
||||||
pageMsg: {},
|
pageMsg: {},
|
||||||
|
currentProvinceCode: '', // 当前省份代码
|
||||||
keyJson: {
|
keyJson: {
|
||||||
SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款
|
SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款
|
||||||
SHOWLESS_SIGN: { 1: '【短款】', 2: '【异常短款】' }, // 短款
|
SHOWLESS_SIGN: { 1: '【短款】', 2: '【异常短款】' }, // 短款
|
||||||
@ -40,10 +46,79 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
// 省份主题配色
|
||||||
|
provinceTheme() {
|
||||||
|
const themes = {
|
||||||
|
'330200': { // 宁波
|
||||||
|
primary: '#1890FF',
|
||||||
|
secondary: '#69C0FF',
|
||||||
|
background: '#E6F7FF',
|
||||||
|
accent: '#40A9FF'
|
||||||
|
},
|
||||||
|
'340000': { // 安徽
|
||||||
|
primary: '#748ED6',
|
||||||
|
secondary: '#91A7E3',
|
||||||
|
background: '#F0F4FF',
|
||||||
|
accent: '#A3B8E8'
|
||||||
|
},
|
||||||
|
'500000': { // 重庆
|
||||||
|
primary: '#FA541C',
|
||||||
|
secondary: '#FF7A45',
|
||||||
|
background: '#FFF2E8',
|
||||||
|
accent: '#FF8C73'
|
||||||
|
},
|
||||||
|
'510000': { // 四川
|
||||||
|
primary: '#FA8C16',
|
||||||
|
secondary: '#FFA940',
|
||||||
|
background: '#FFF7E6',
|
||||||
|
accent: '#FFAB65'
|
||||||
|
},
|
||||||
|
'520000': { // 贵州
|
||||||
|
primary: '#52C41A',
|
||||||
|
secondary: '#73D13D',
|
||||||
|
background: '#F6FFED',
|
||||||
|
accent: '#7CB342'
|
||||||
|
},
|
||||||
|
'530000': { // 云南（保持原色）
|
||||||
|
primary: '#27B25F',
|
||||||
|
secondary: '#4CCC7F',
|
||||||
|
background: '#F6FFED',
|
||||||
|
accent: '#5CDB87'
|
||||||
|
},
|
||||||
|
'630000': { // 青海
|
||||||
|
primary: '#13C2C2',
|
||||||
|
secondary: '#36CFC9',
|
||||||
|
background: '#E6FFFB',
|
||||||
|
accent: '#5CDBD3'
|
||||||
|
},
|
||||||
|
'734100': { // 海南
|
||||||
|
primary: '#E91E63',
|
||||||
|
secondary: '#F06292',
|
||||||
|
background: '#FCE4EC',
|
||||||
|
accent: '#F48FB1'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return themes[this.currentProvinceCode] || themes['530000'] // 如果找不到对应省份，使用云南配色
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
shopCell
|
shopCell
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 初始化省份代码
|
||||||
|
initProvinceCode(provinceId) {
|
||||||
|
if (provinceId) {
|
||||||
|
this.currentProvinceCode = provinceId
|
||||||
|
console.log('设置省份主题:', provinceId)
|
||||||
|
// 强制更新以应用新主题
|
||||||
|
this.$forceUpdate()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取主题颜色（小程序兼容版本）
|
||||||
|
getThemeColors() {
|
||||||
|
return this.provinceTheme
|
||||||
|
},
|
||||||
toggleShow(i) {
|
toggleShow(i) {
|
||||||
|
|
||||||
let item = this.pageMsg.ShopEndaccountList[i]
|
let item = this.pageMsg.ShopEndaccountList[i]
|
||||||
@ -78,6 +153,8 @@
|
|||||||
n.detail = this.getDetail(n)
|
n.detail = this.getDetail(n)
|
||||||
})
|
})
|
||||||
_this.pageMsg = res.Result_Data
|
_this.pageMsg = res.Result_Data
|
||||||
|
console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
|
||||||
|
|
||||||
_this.showPage = true
|
_this.showPage = true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@ -98,17 +175,22 @@
|
|||||||
})
|
})
|
||||||
res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel
|
res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel
|
||||||
_this.pageMsg = res.Result_Data
|
_this.pageMsg = res.Result_Data
|
||||||
|
console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
|
||||||
_this.showPage = true
|
_this.showPage = true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onUnload() {
|
onUnload() {
|
||||||
this.$util.addUserBehaviorNew()
|
this.$util.addUserBehavior()
|
||||||
},
|
},
|
||||||
onLoad(option) {
|
onLoad(option) {
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '正在加载...'
|
title: '正在加载...'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 初始化省份主题
|
||||||
|
this.initProvinceCode(option.provinceId)
|
||||||
|
|
||||||
if (option.provinceId === '330000') {
|
if (option.provinceId === '330000') {
|
||||||
this.zgetBrandRevenue(option)
|
this.zgetBrandRevenue(option)
|
||||||
} else {
|
} else {
|
||||||
@ -119,40 +201,128 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.page-body {
|
// 省份主题定义 - 创建mixin以便复用
|
||||||
background-color: #fff;
|
@mixin theme-colors($primary, $secondary) {
|
||||||
padding-top: 40rpx;
|
|
||||||
height: 100%;
|
// 主要背景渐变元素 - 使用主题色
|
||||||
|
.service-brand-box {
|
||||||
|
background: linear-gradient(135deg, $primary 0%, $secondary 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 宁波 330200
|
||||||
|
.province-theme-330200 {
|
||||||
|
@include theme-colors(#1890FF, #69C0FF);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 安徽 340000
|
||||||
|
.province-theme-340000 {
|
||||||
|
@include theme-colors(#748ED6, #91A7E3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重庆 500000
|
||||||
|
.province-theme-500000 {
|
||||||
|
@include theme-colors(#FA541C, #FF7A45);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 四川 510000
|
||||||
|
.province-theme-510000 {
|
||||||
|
@include theme-colors(#FA8C16, #FFA940);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 贵州 520000
|
||||||
|
.province-theme-520000 {
|
||||||
|
@include theme-colors(#52C41A, #73D13D);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 云南 530000
|
||||||
|
.province-theme-530000 {
|
||||||
|
@include theme-colors(#27B25F, #4CCC7F);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 青海 630000
|
||||||
|
.province-theme-630000 {
|
||||||
|
@include theme-colors(#13C2C2, #36CFC9);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 海南 734100
|
||||||
|
.province-theme-734100 {
|
||||||
|
@include theme-colors(#E91E63, #F06292);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-body {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
/*服务区分析*/
|
|
||||||
|
|
||||||
/* 服务区品牌详情 */
|
/* 服务区品牌详情 */
|
||||||
.service-brand-box {
|
.service-brand-box {
|
||||||
|
width: 100%;
|
||||||
width: 693rpx;
|
box-sizing: border-box;
|
||||||
height: 103rpx;
|
padding: 24rpx;
|
||||||
color: #fff;
|
margin-bottom: 32rpx;
|
||||||
border-radius: 10rpx;
|
// 背景渐变由主题mixin控制
|
||||||
background: url(/static/images/revenue/brand-card.png) no-repeat 60rpx center,linear-gradient(#98a1c2 0%, #aab3d0 100%);
|
border-radius: 24rpx;
|
||||||
background-size: contain;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
padding: 0 25rpx;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
box-sizing: border-box;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
right: -20%;
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -30%;
|
||||||
|
left: -10%;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.service-brand-box image {
|
.service-brand-box image {
|
||||||
height: 60rpx;
|
width: 72rpx;
|
||||||
width: 60rpx;
|
height: 72rpx;
|
||||||
border: 2rpx solid #fff;
|
border: 3rpx solid rgba(255, 255, 255, 0.8);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 24rpx;
|
margin-right: 24rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.service-brand-box .price-num {
|
|
||||||
font-size: 40rpx;
|
.band-name {
|
||||||
font-family: Bahnschrift Regular;
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-num {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: 'PingFang SC', sans-serif;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user