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,145 +1,403 @@
|
||||
<template>
|
||||
<block>
|
||||
<div class="uni-inline-item ranking-tab-box">
|
||||
<div class="ranking-tab-unit" @tap="selectTab(1000)" :class="{'active':nowRank==1000}">商超
|
||||
</div>
|
||||
<div class="ranking-tab-unit" @tap="selectTab(2000)" :class="{'active':nowRank==2000}">餐饮
|
||||
</div>
|
||||
<div class="ranking-tab-unit" @tap="selectTab(3000)" :class="{'active':nowRank==3000}">小吃
|
||||
</div>
|
||||
</div>
|
||||
<div class="ranking-content" v-if="wechatPushSalesList">
|
||||
<div class="ranking-list" v-for="(item,index) in wechatPushSalesList[nowRank]" :key="index">
|
||||
<div class="rank-index">{{item.RANK_ID||item.Rank_ID}}</div>
|
||||
<div class="ranking-list-unit">
|
||||
<div>{{item.COMMODITY_NAME || item.Commodity_Name}}</div>
|
||||
<div class="ranking-unit-info">
|
||||
<text>销售金额 </text>
|
||||
<text>¥{{$util.fmoney(item.TOTALPRICE || item.TotalPrice)}}</text>
|
||||
<text>销售数量 </text>
|
||||
<text>{{item.SELLCOUNT || item.SellCount}}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</block>
|
||||
<view class="ranking-container">
|
||||
<!-- 现代化选项卡 -->
|
||||
<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'],
|
||||
data: () => {
|
||||
return {
|
||||
nowRank: 1000
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
selectTab(index){
|
||||
|
||||
this.nowRank=index
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
export default {
|
||||
props: ['wechatPushSalesList'],
|
||||
data: () => {
|
||||
return {
|
||||
nowRank: 1000
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectTab(index) {
|
||||
|
||||
this.nowRank = index
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*排行*/
|
||||
.ranking-tab-box {
|
||||
margin: 20rpx 32rpx;
|
||||
border: 2rpx solid #565656;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ranking-container {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
/* 现代化选项卡 */
|
||||
.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;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-tab-box .ranking-tab-unit {
|
||||
color: #565656;
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
line-height: 60rpx;
|
||||
|
||||
&:hover {
|
||||
background: rgba(39, 178, 95, 0.1);
|
||||
}
|
||||
|
||||
.ranking-tab-box .ranking-tab-unit.active {
|
||||
background-color: #565656;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.ranking-tab-box .ranking-tab-unit+.ranking-tab-unit {
|
||||
border-left: 2rpx solid #565656;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2rpx);
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-content {
|
||||
/* display: none; */
|
||||
min-height: 160rpx;
|
||||
|
||||
// 前三名特殊样式
|
||||
&.rank-1 {
|
||||
background: linear-gradient(135deg, #fffbf0, #fff);
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(180deg, #ffb300, #ffd700);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-content .ranking-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
padding: 24rpx 32rpx;
|
||||
|
||||
&.rank-2 {
|
||||
background: linear-gradient(135deg, #f0f0f0, #fff);
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(180deg, #c0c0c0, #e8e8e8);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-content .rank-index {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bolder;
|
||||
margin-right: 32rpx;
|
||||
|
||||
&.rank-3 {
|
||||
background: linear-gradient(135deg, #f5f1eb, #fff);
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(180deg, #a0714d, #cd853f);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-content .ranking-list:nth-child(1) .rank-index {
|
||||
background: url('/static/images/revenue/top1.png') no-repeat center;
|
||||
background-size: contain;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* 排名徽章 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.ranking-content .ranking-list:nth-child(2) .rank-index {
|
||||
background: url(/static/images/revenue/top2.png) no-repeat center;
|
||||
background-size: contain;
|
||||
font-size: 0;
|
||||
|
||||
.medal-icon {
|
||||
font-size: 36rpx;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.ranking-content .ranking-list:nth-child(3) .rank-index {
|
||||
background: url(/static/images/revenue/top3.png) no-repeat center;
|
||||
background-size: contain;
|
||||
font-size: 0;
|
||||
|
||||
.rank-number {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ranking-content .ranking-list-unit {
|
||||
font-size: 28rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
|
||||
background: linear-gradient(135deg, #8c9eff, #a5b4fc);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.ranking-content .ranking-unit-info {
|
||||
/* margin-top: 16rpx; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* font-size: .13rem; */
|
||||
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.ranking-content .ranking-unit-info text {
|
||||
flex: 2;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.ranking-content .ranking-unit-info text:nth-child(2) {
|
||||
flex: 3;
|
||||
|
||||
&.sales-count {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ranking-content .ranking-unit-info text:nth-child(2n) {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 主题色支持 - 通过全局主题类控制 */
|
||||
:global(.province-theme-330200) .tab-item.active {
|
||||
background: linear-gradient(135deg, #1890FF, #69C0FF);
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #1890FF;
|
||||
}
|
||||
|
||||
.ranking-ico {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
:global(.province-theme-340000) .tab-item.active {
|
||||
background: linear-gradient(135deg, #748ED6, #91A7E3);
|
||||
|
||||
.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>
|
||||
|
||||
@ -202,7 +202,7 @@
|
||||
分润门店:
|
||||
<span
|
||||
class="amount"
|
||||
style="font-size: 28rpx; padding-left: 0.5em"
|
||||
style="font-size: 24rpx; padding-left: 0.5em"
|
||||
>
|
||||
{{ headMsg.shareShopCount }}个
|
||||
</span>
|
||||
@ -213,7 +213,7 @@
|
||||
驿达分润:
|
||||
<span
|
||||
class="amount"
|
||||
style="font-size: 28rpx; padding-left: 0.5em"
|
||||
style="font-size: 24rpx; padding-left: 0.5em"
|
||||
>
|
||||
{{ $util.fmoney(headMsg.royaltyPrice) }}元
|
||||
</span>
|
||||
@ -237,7 +237,7 @@
|
||||
万佳配送订单:
|
||||
<span
|
||||
class="amount"
|
||||
style="font-size: 28rpx; padding-left: 0.5em"
|
||||
style="font-size: 24rpx; padding-left: 0.5em"
|
||||
>
|
||||
{{ headMsg.deliverBillCount }}单
|
||||
</span>
|
||||
@ -248,7 +248,7 @@
|
||||
采购金额:
|
||||
<span
|
||||
class="amount"
|
||||
style="font-size: 28rpx; padding-left: 0.5em"
|
||||
style="font-size: 24rpx; padding-left: 0.5em"
|
||||
>
|
||||
{{ $util.fmoney(headMsg.deliverPrice) }}元
|
||||
</span>
|
||||
|
||||
@ -1,192 +1,379 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="analysis-cell" @tap="toggleShow" :class="{'active':item.show}">
|
||||
<div class="shop-title">
|
||||
<span> {{( i>8 ? i+1: '0'+(i+1) ) + ' '+item.SHOPNAME}}</span>
|
||||
<p>
|
||||
<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>
|
||||
<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> -->
|
||||
|
||||
<div class="analysis-cell" @tap="toggleShow" :class="{ 'active': item.show }" :style="activeCellStyleStr">
|
||||
<div class="shop-title" :class="'theme-' + provinceCode">
|
||||
<span> {{ (i > 8 ? i + 1 : '0' + (i + 1)) + ' ' + item.SHOPNAME }}</span>
|
||||
<p>
|
||||
<span v-show="item.UNACCOUNT_SIGN">￥</span>
|
||||
<span class="cell-price" :style="priceStyleStr">{{
|
||||
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> -->
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<p v-if="item.detail.length > 0" style="line-height: 1.2;">
|
||||
<span v-for="(child, index) in item.detail" :key="index" class="atribute-tag">{{ child }} </span>
|
||||
</p>
|
||||
</div>
|
||||
<p v-if=" item.detail.length>0" style="line-height: 1.2;">
|
||||
<span v-for="(child,index) in item.detail" :key="index" class="atribute-tag">{{child}} </span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="analysis-detail" v-show="item.show">
|
||||
<div class="detail-unit" v-for="(unit,o) in item.ShopEndAccountList" :key="o">
|
||||
<div class="uni-inline-flex">
|
||||
<span class="detail-title">结账时间：</span>
|
||||
<div style="flex: 1;text-align: left;">
|
||||
<div>起 {{unit.ENDACCOUNT_STARTDATE}}</div>
|
||||
<div>止 {{unit.ENDACCOUNT_DATE}}</div>
|
||||
</div>
|
||||
<span style="color:#EE7941;margin-right:50rpx;padding-top: 42rpx;">{{getHour(unit.ENDACCOUNT_STARTDATE,unit.ENDACCOUNT_DATE)}}小时</span>
|
||||
</div>
|
||||
<block v-if="unit.DESCRIPTION_DATE">
|
||||
|
||||
<div class="detail-title">日结校验：{{unit.DESCRIPTION_DATE}}</div>
|
||||
<p><span class="detail-title">{{unit.DESCRIPTION_STAFF}}：</span><span>{{unit.DIFFERENCE_REASON}}</span></p>
|
||||
</block>
|
||||
<block v-if="unit.APPROVE_DATE">
|
||||
<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>
|
||||
</block>
|
||||
<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_CIGARETTE">香烟数据：<span class="uni-icon uni-icon-checkmarkempty"></span></p>
|
||||
</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">现金缴款：{{$util.fmoney(unit.CASHPAY_DOWNLORD)}} 元</span>
|
||||
<span class="detail-short-info">移动支付：{{$util.fmoney(unit.MOBILEPAYMENT)}} 元</span>
|
||||
<div class="analysis-detail" v-show="item.show">
|
||||
<div class="detail-unit" v-for="(unit, o) in item.ShopEndAccountList" :key="o">
|
||||
<div class="uni-inline-flex">
|
||||
<span class="detail-title">结账时间：</span>
|
||||
<div style="flex: 1;text-align: left;">
|
||||
<div style="font-size: 24rpx;">起 {{ unit.ENDACCOUNT_STARTDATE }}</div>
|
||||
<div style="font-size: 24rpx;">止 {{ unit.ENDACCOUNT_DATE }}</div>
|
||||
</div>
|
||||
<span style="color:#EE7941;margin-right:50rpx;padding-top: 20rpx;font-size: 24rpx;">{{
|
||||
getHour(unit.ENDACCOUNT_STARTDATE, unit.ENDACCOUNT_DATE) }}小时</span>
|
||||
</div>
|
||||
<block v-if="unit.DESCRIPTION_DATE">
|
||||
|
||||
<div class="detail-title">日结校验：{{ unit.DESCRIPTION_DATE }}</div>
|
||||
<p><span class="detail-title">{{ unit.DESCRIPTION_STAFF }}：</span><span style="font-size: 24rpx;">{{
|
||||
unit.DIFFERENCE_REASON
|
||||
}}</span>
|
||||
</p>
|
||||
</block>
|
||||
<block v-if="unit.APPROVE_DATE">
|
||||
<div><span class="detail-title">日结审核：{{ unit.APPROVE_DATE }}</span></div>
|
||||
<p><span class="detail-title" style="font-size: 24rpx;">{{ unit.APPROVE_STAFF }}：</span><span
|
||||
style="font-size: 24rpx;">{{
|
||||
unit.APPROVED_INFO }}</span>
|
||||
</p>
|
||||
</block>
|
||||
<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_CIGARETTE">香烟数据：<span
|
||||
class="uni-icon uni-icon-checkmarkempty"></span></p>
|
||||
</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>
|
||||
<span class="detail-title detail-short-info" style="font-size: 24rpx;">现金缴款：{{
|
||||
$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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
i: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
|
||||
}
|
||||
i: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getHour(start,end){
|
||||
return parseInt((new Date(end) - new Date(start)) / (1000 * 3600))
|
||||
},
|
||||
|
||||
toggleShow () {
|
||||
this.$emit('toggleShow', this.i)
|
||||
provinceCode: {
|
||||
type: String,
|
||||
default: '530000' // 默认使用云南的配色
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
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: {
|
||||
getHour(start, end) {
|
||||
return parseInt((new Date(end) - new Date(start)) / (1000 * 3600))
|
||||
},
|
||||
|
||||
toggleShow() {
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.analysis-cell {
|
||||
/* height: 1140rpx; */
|
||||
background-color: #ffffff;
|
||||
border-bottom: 2rpx solid #F8F8F8;
|
||||
padding: 24rpx 20rpx 18rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
<style lang="scss" scoped>
|
||||
.analysis-cell {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 16rpx 16rpx 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
// 边框和阴影由动态样式控制
|
||||
}
|
||||
|
||||
.analysis-cell .shop-title {
|
||||
}
|
||||
|
||||
.analysis-cell .shop-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
align-items: flex-start;
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-left: 20rpx;
|
||||
font-size: 26rpx;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.analysis-cell .shop-title:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: url(/static/images/revenue/select.png) no-repeat center;
|
||||
background-size: contain;
|
||||
left: -32rpx;
|
||||
|
||||
}
|
||||
|
||||
.analysis-cell .shop-title:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
left: -40rpx;
|
||||
top: 4rpx;
|
||||
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.theme-330200:before {
|
||||
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 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.analysis-cell .cell-price {
|
||||
// 颜色由动态样式控制
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
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 {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// margin-top: 16rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.analysis-detail span,
|
||||
.analysis-detail view {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.uni-icon-checkmarkempty,
|
||||
.analysis-detail span.uni-icon-checkmarkempty {
|
||||
color: #2ed573;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.analysis-detail::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12rpx solid transparent;
|
||||
border-right: 12rpx solid transparent;
|
||||
border-bottom: 16rpx solid #f8f9fa;
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
left: 32rpx;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-unit {
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
// margin: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:first-child {
|
||||
// margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.analysis-cell.active .shop-title:before {
|
||||
background: url(/static/images/revenue/select_active.png) no-repeat center;
|
||||
background-size: contain;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.shop-title image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 16rpx;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-unit>div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.analysis-cell .cell-price {
|
||||
color: #565656;
|
||||
font-family: Bahnschrift Regular;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-unit>p {
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.analysis-detail {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.analysis-detail span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-title {
|
||||
min-width: 140rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-short-info {
|
||||
width: 50%;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
|
||||
&:first-child {
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
.analysis-detail span, .analysis-detail view{
|
||||
color: #333 ;
|
||||
font-size: 24rpx ;
|
||||
}
|
||||
.uni-icon-checkmarkempty, .analysis-detail span.uni-icon-checkmarkempty {
|
||||
color: #4F8E24;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.analysis-detail::before {
|
||||
content: '';
|
||||
width: 24rpx;
|
||||
height: 12rpx;
|
||||
background: url(/static/images/revenue/bg-s.png) no-repeat center;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -12rpx;
|
||||
left: 48rpx;
|
||||
}
|
||||
.analysis-detail .detail-unit {
|
||||
background-color: #F8F8F8;
|
||||
line-height: 2;
|
||||
padding: 20rpx 10rpx 20rpx 50rpx;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-unit>div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-unit>p {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.analysis-detail .detail-unit+.detail-unit {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.analysis-cell .atribute-tag {
|
||||
color: #EE7941;
|
||||
margin-left: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.analysis-detail span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-title {
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.analysis-detail .detail-short-info {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.uni-inline-flex {
|
||||
span:last-child {
|
||||
color: #ff9f43;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,158 +1,328 @@
|
||||
<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="uni-flex align-center">
|
||||
<div class="service-brand-box">
|
||||
<div class="uni-flex align-center">
|
||||
|
||||
<image v-if="pageMsg.Brand_ICO" :src="pageMsg.Brand_ICO" mode="aspectFit"></image>
|
||||
<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
|
||||
<image v-if="pageMsg.Brand_ICO" :src="pageMsg.Brand_ICO" 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 style="margin-top: 0 20rpx;" >
|
||||
<shopCell v-for="(item,i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow" :i='i'></shopCell>
|
||||
<!--服务区门店分析-->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shopCell from './components/listUnit.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPage:false,
|
||||
import shopCell from './components/listUnit.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPage: false,
|
||||
|
||||
pageMsg: {},
|
||||
keyJson : {
|
||||
SHOWMORE_SIGN: { 1: '【长款】',2:'【异常长款】' }, // 长款
|
||||
SHOWLESS_SIGN:{ 1: '【短款】',2:'【异常短款】' }, // 短款
|
||||
SHOWABNORMAL_SIGN: { 1: '【异常校验】'}, // 异常日结
|
||||
SHOWSCAN_SIGN : { 1: '【扫】'}, // 扫码上传
|
||||
SHOWSSUPPLY_SIGN : { 1: '【补】' }, // 账期补录
|
||||
SHOWCHECK_SIGN : { 1: '【稽核检查】' }, // 稽核检查
|
||||
INTERFACE_SIGN : { 1: '【接口传输】' }, // 接口传输
|
||||
}
|
||||
}
|
||||
},
|
||||
components:{
|
||||
shopCell
|
||||
},
|
||||
methods: {
|
||||
toggleShow(i){
|
||||
|
||||
let item = this.pageMsg.ShopEndaccountList[i]
|
||||
item.show = !item.show
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
|
||||
getDetail(data){
|
||||
let arr =[]
|
||||
let keyJson = this.keyJson
|
||||
var keyCode = ['SHOWABNORMAL_SIGN','SHOWCHECK_SIGN','SHOWMORE_SIGN','SHOWLESS_SIGN','SHOWSCAN_SIGN','SHOWSSUPPLY_SIGN','INTERFACE_SIGN']
|
||||
keyCode.map(n=>{
|
||||
|
||||
if( keyJson[n][data[n]] ) arr.push( keyJson[n][data[n]])
|
||||
|
||||
})
|
||||
return arr
|
||||
},
|
||||
getBrandRevenue(obj) {
|
||||
let _this = this
|
||||
this.$request.$webGet('CommercialApi/Revenue/GetShopEndAccountList', {
|
||||
Serverpart_Id: obj.id,
|
||||
pushProvinceCode: obj.provinceId,
|
||||
Statistics_Date: obj.time,
|
||||
ServerpartShop_Ids: obj.shopid,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.Result_Code != 100) return
|
||||
res.Result_Data.ShopEndaccountList.map(n=>{
|
||||
n.show = true
|
||||
n.detail = this.getDetail(n)
|
||||
})
|
||||
_this.pageMsg = res.Result_Data
|
||||
_this.showPage =true
|
||||
})
|
||||
},
|
||||
zgetBrandRevenue(obj) {
|
||||
let _this = this
|
||||
this.$request.$webGet('/WeChat/GetServerpartBrandShop', {
|
||||
Serverpart_Id: obj.id,
|
||||
business_Brand: obj.bid,
|
||||
pushProvinceCode: obj.provinceId,
|
||||
statictics_Time: obj.time,
|
||||
bussiness_Trade: obj.btid,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.Result_Code != 100) return
|
||||
res.Result_Data.listBrandShopModel.map(n=>{
|
||||
n.show = true
|
||||
n.detail = this.getDetail(n)
|
||||
})
|
||||
res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel
|
||||
_this.pageMsg = res.Result_Data
|
||||
_this.showPage =true
|
||||
})
|
||||
},
|
||||
},
|
||||
onUnload() {
|
||||
this.$util.addUserBehaviorNew()
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.showLoading({
|
||||
title:'正在加载...'
|
||||
})
|
||||
if(option.provinceId==='330000'){
|
||||
this.zgetBrandRevenue(option)
|
||||
}else{
|
||||
|
||||
this.getBrandRevenue(option)
|
||||
pageMsg: {},
|
||||
currentProvinceCode: '', // 当前省份代码
|
||||
keyJson: {
|
||||
SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款
|
||||
SHOWLESS_SIGN: { 1: '【短款】', 2: '【异常短款】' }, // 短款
|
||||
SHOWABNORMAL_SIGN: { 1: '【异常校验】' }, // 异常日结
|
||||
SHOWSCAN_SIGN: { 1: '【扫】' }, // 扫码上传
|
||||
SHOWSSUPPLY_SIGN: { 1: '【补】' }, // 账期补录
|
||||
SHOWCHECK_SIGN: { 1: '【稽核检查】' }, // 稽核检查
|
||||
INTERFACE_SIGN: { 1: '【接口传输】' }, // 接口传输
|
||||
}
|
||||
}
|
||||
},
|
||||
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: {
|
||||
shopCell
|
||||
},
|
||||
methods: {
|
||||
// 初始化省份代码
|
||||
initProvinceCode(provinceId) {
|
||||
if (provinceId) {
|
||||
this.currentProvinceCode = provinceId
|
||||
console.log('设置省份主题:', provinceId)
|
||||
// 强制更新以应用新主题
|
||||
this.$forceUpdate()
|
||||
}
|
||||
},
|
||||
// 获取主题颜色（小程序兼容版本）
|
||||
getThemeColors() {
|
||||
return this.provinceTheme
|
||||
},
|
||||
toggleShow(i) {
|
||||
|
||||
let item = this.pageMsg.ShopEndaccountList[i]
|
||||
item.show = !item.show
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
|
||||
getDetail(data) {
|
||||
let arr = []
|
||||
let keyJson = this.keyJson
|
||||
var keyCode = ['SHOWABNORMAL_SIGN', 'SHOWCHECK_SIGN', 'SHOWMORE_SIGN', 'SHOWLESS_SIGN', 'SHOWSCAN_SIGN', 'SHOWSSUPPLY_SIGN', 'INTERFACE_SIGN']
|
||||
keyCode.map(n => {
|
||||
|
||||
if (keyJson[n][data[n]]) arr.push(keyJson[n][data[n]])
|
||||
|
||||
})
|
||||
return arr
|
||||
},
|
||||
getBrandRevenue(obj) {
|
||||
let _this = this
|
||||
this.$request.$webGet('CommercialApi/Revenue/GetShopEndAccountList', {
|
||||
Serverpart_Id: obj.id,
|
||||
pushProvinceCode: obj.provinceId,
|
||||
Statistics_Date: obj.time,
|
||||
ServerpartShop_Ids: obj.shopid,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.Result_Code != 100) return
|
||||
res.Result_Data.ShopEndaccountList.map(n => {
|
||||
n.show = true
|
||||
n.detail = this.getDetail(n)
|
||||
})
|
||||
_this.pageMsg = res.Result_Data
|
||||
console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
|
||||
|
||||
_this.showPage = true
|
||||
})
|
||||
},
|
||||
zgetBrandRevenue(obj) {
|
||||
let _this = this
|
||||
this.$request.$webGet('/WeChat/GetServerpartBrandShop', {
|
||||
Serverpart_Id: obj.id,
|
||||
business_Brand: obj.bid,
|
||||
pushProvinceCode: obj.provinceId,
|
||||
statictics_Time: obj.time,
|
||||
bussiness_Trade: obj.btid,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.Result_Code != 100) return
|
||||
res.Result_Data.listBrandShopModel.map(n => {
|
||||
n.show = true
|
||||
n.detail = this.getDetail(n)
|
||||
})
|
||||
res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel
|
||||
_this.pageMsg = res.Result_Data
|
||||
console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
|
||||
_this.showPage = true
|
||||
})
|
||||
},
|
||||
},
|
||||
onUnload() {
|
||||
this.$util.addUserBehavior()
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.showLoading({
|
||||
title: '正在加载...'
|
||||
})
|
||||
|
||||
// 初始化省份主题
|
||||
this.initProvinceCode(option.provinceId)
|
||||
|
||||
if (option.provinceId === '330000') {
|
||||
this.zgetBrandRevenue(option)
|
||||
} else {
|
||||
|
||||
this.getBrandRevenue(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-body {
|
||||
background-color: #fff;
|
||||
padding-top: 40rpx;
|
||||
height: 100%;
|
||||
}
|
||||
/*服务区分析*/
|
||||
<style lang="scss" scoped>
|
||||
// 省份主题定义 - 创建mixin以便复用
|
||||
@mixin theme-colors($primary, $secondary) {
|
||||
|
||||
/* 服务区品牌详情 */
|
||||
// 主要背景渐变元素 - 使用主题色
|
||||
.service-brand-box {
|
||||
|
||||
width: 693rpx;
|
||||
height: 103rpx;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
background: url(/static/images/revenue/brand-card.png) no-repeat 60rpx center,linear-gradient(#98a1c2 0%, #aab3d0 100%);
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
|
||||
padding: 0 25rpx;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(135deg, $primary 0%, $secondary 100%);
|
||||
}
|
||||
.service-brand-box image {
|
||||
height: 60rpx;
|
||||
width: 60rpx;
|
||||
border: 2rpx solid #fff;
|
||||
|
||||
}
|
||||
|
||||
// 宁波 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 {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
// 背景渐变由主题mixin控制
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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%;
|
||||
margin-right: 24rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.service-brand-box .price-num {
|
||||
font-size: 40rpx;
|
||||
font-family: Bahnschrift Regular;
|
||||
|
||||
&::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 {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
margin-right: 24rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.band-name {
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user