506 lines
11 KiB
Vue
506 lines
11 KiB
Vue
<template>
|
|
<div :class="'province-theme-' + currentProvinceCode" v-if="showPage">
|
|
<div class="page-body page-enter">
|
|
|
|
<div class="service-brand-box brand-header-enter">
|
|
<div class="uni-flex align-center brand-info-slide">
|
|
<div class="band-name brand-name-slide">{{ pageMsg.ShopEndaccountList &&
|
|
pageMsg.ShopEndaccountList.length > 0 ?
|
|
pageMsg.ShopEndaccountList[0].SERVERPART_NAME : "" }}</div>
|
|
</div>
|
|
<div class="price-num price-count-up">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount,
|
|
2) : '0.00' }}</div>
|
|
</div>
|
|
<!--服务区门店分析-->
|
|
<div style="margin-top: 0 20rpx;padding: 0 16rpx" class="shop-list-container">
|
|
<shopCell v-for="(item, i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow"
|
|
:i='i' :provinceCode='currentProvinceCode' class="shop-item-stagger"
|
|
:style="'animation-delay: ' + (i * 0.1 + 0.8) + 's'" v-if="item"></shopCell>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import shopCell from './components/listUnit.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
showPage: false,
|
|
|
|
pageMsg: {
|
|
ShopEndaccountList: [] // 初始化为空数组，确保响应式
|
|
},
|
|
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) {
|
|
if (!this.pageMsg.ShopEndaccountList || !this.pageMsg.ShopEndaccountList[i]) {
|
|
return
|
|
}
|
|
|
|
let currentItem = this.pageMsg.ShopEndaccountList[i]
|
|
let newShowState = !currentItem.show
|
|
|
|
// 使用Vue.set确保响应式更新
|
|
this.$set(this.pageMsg.ShopEndaccountList, i, {
|
|
...currentItem,
|
|
show: newShowState
|
|
})
|
|
},
|
|
|
|
|
|
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.forEach((n, index) => {
|
|
// 使用Vue.set确保响应式
|
|
_this.$set(n, 'show', false)
|
|
_this.$set(n, 'detail', _this.getDetail(n))
|
|
})
|
|
|
|
// 设置页面数据
|
|
_this.$set(_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.forEach((n, index) => {
|
|
// 使用Vue.set确保响应式
|
|
_this.$set(n, 'show', false)
|
|
_this.$set(n, 'detail', _this.getDetail(n))
|
|
})
|
|
|
|
// 设置数据结构
|
|
res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel
|
|
|
|
// 设置页面数据
|
|
_this.$set(_this, 'pageMsg', res.Result_Data)
|
|
|
|
_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: 32rpx;
|
|
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);
|
|
}
|
|
|
|
/* 动画效果 - UniApp微信小程序兼容版本 */
|
|
|
|
/* 页面入场动画 */
|
|
@keyframes pageEnter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(30rpx);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.page-enter {
|
|
animation: pageEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
}
|
|
|
|
/* 品牌头部动画 */
|
|
@keyframes brandHeaderEnter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-30rpx) scale(0.95);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.brand-header-enter {
|
|
animation: brandHeaderEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 品牌信息滑入动画 */
|
|
@keyframes brandInfoSlide {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-20rpx);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.brand-info-slide {
|
|
animation: brandInfoSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 品牌图标弹跳动画 */
|
|
@keyframes brandIconBounce {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3) rotate(-10deg);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.brand-icon-bounce {
|
|
animation: brandIconBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 品牌名称滑入动画 */
|
|
@keyframes brandNameSlide {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-15rpx);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.brand-name-slide {
|
|
animation: brandNameSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 价格数字计数动画 */
|
|
@keyframes priceCountUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(10rpx) scale(0.8);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.price-count-up {
|
|
animation: priceCountUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 门店列表容器动画 */
|
|
@keyframes shopListContainer {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(30rpx);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.shop-list-container {
|
|
animation: shopListContainer 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 门店项目错列动画 */
|
|
@keyframes shopItemStagger {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-30rpx) scale(0.95);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.shop-item-stagger {
|
|
animation: shopItemStagger 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 交互反馈动画 */
|
|
.brand-header-enter:active {
|
|
transform: scale(0.98);
|
|
transition: transform 0.1s ease-out;
|
|
}
|
|
|
|
.brand-icon-bounce:active {
|
|
transform: scale(0.9) rotate(5deg);
|
|
transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
</style>
|