329 lines
7.5 KiB
Vue
329 lines
7.5 KiB
Vue
<template>
|
|
<div :class="'province-theme-' + currentProvinceCode" v-if="showPage">
|
|
<div class="page-body">
|
|
|
|
<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>
|
|
|
|
|
|
<!-- <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 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,
|
|
|
|
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 lang="scss" scoped>
|
|
// 省份主题定义 - 创建mixin以便复用
|
|
@mixin theme-colors($primary, $secondary) {
|
|
|
|
// 主要背景渐变元素 - 使用主题色
|
|
.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 {
|
|
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%;
|
|
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 {
|
|
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>
|