update
This commit is contained in:
ylj20011123
parent
42f254afb9
commit
f82ab7bb6a
@ -65,7 +65,7 @@ import request from '@/util/index.js'
|
||||
// }
|
||||
|
||||
const netChange = () => {
|
||||
uni.onNetworkStatusChange(function(res) {
|
||||
uni.onNetworkStatusChange(function (res) {
|
||||
// console.log(res.isConnected)
|
||||
store.mutations.isConnect(res.isConnected)
|
||||
if (!res.isConnected) {
|
||||
@ -187,25 +187,25 @@ function addUserBehaviorNew(obj) {
|
||||
}
|
||||
obj.visitChannels = store.state.visitChannels
|
||||
let userDate = store.state.userData
|
||||
console.log('userDate123',userDate)
|
||||
console.log('userDate123', userDate)
|
||||
|
||||
let baseInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
let req = {
|
||||
userName:userDate.UserName,
|
||||
phoneNumber:userDate.Membership_Phone,
|
||||
userId:userDate.UserId ? userDate.UserId:'',
|
||||
wechatAppId:'wxa99ef047735c031e',
|
||||
intoRoute:obj.intoRoute,
|
||||
outtoRoute:obj.outtoRoute,
|
||||
visitChannels:obj.visitChannels,
|
||||
behaviorRecordDesc:'',
|
||||
userName: userDate.UserName,
|
||||
phoneNumber: userDate.Membership_Phone,
|
||||
userId: userDate.UserId ? userDate.UserId : '',
|
||||
wechatAppId: 'wxa99ef047735c031e',
|
||||
intoRoute: obj.intoRoute,
|
||||
outtoRoute: obj.outtoRoute,
|
||||
visitChannels: obj.visitChannels,
|
||||
behaviorRecordDesc: '',
|
||||
LoginIP: baseInfo.ip || '',
|
||||
LoginPlace: (baseInfo.prov ? baseInfo.prov : '' ) + (baseInfo.prov && baseInfo.city ? '-' : '') + (baseInfo.city ? baseInfo.city : ''),
|
||||
LoginPlace: (baseInfo.prov ? baseInfo.prov : '') + (baseInfo.prov && baseInfo.city ? '-' : '') + (baseInfo.city ? baseInfo.city : ''),
|
||||
SOURCE_PLATFORM: '驿行畅旅'
|
||||
}
|
||||
console.log('req',req)
|
||||
request.$webGet('CommercialApi/UserBehavior/AddUserBehavior',req).then(() => {
|
||||
console.log('req', req)
|
||||
request.$webGet('CommercialApi/UserBehavior/AddUserBehavior', req).then(() => {
|
||||
|
||||
})
|
||||
}
|
||||
@ -232,7 +232,7 @@ async function getFieldEnumByField(params) {
|
||||
}
|
||||
|
||||
// 不四舍五入 保留两位小数的金额化方法
|
||||
function getMoney(money){
|
||||
function getMoney(money) {
|
||||
if (!money || isNaN(money)) return "0.00";
|
||||
let num = parseFloat(money + '') + '';
|
||||
num = parseInt(money * 100 + '') / 100 + ''
|
||||
@ -255,32 +255,32 @@ function getMoney(money){
|
||||
|
||||
return num;
|
||||
}
|
||||
function getMoneyTest(money){
|
||||
console.log('money',money)
|
||||
function getMoneyTest(money) {
|
||||
console.log('money', money)
|
||||
if (!money || isNaN(money)) return "0.00";
|
||||
let realMoney = 0
|
||||
if(money.toString().indexOf('.')>0){
|
||||
if (money.toString().indexOf('.') > 0) {
|
||||
let num_per = money.toString().substring(0, money.toString().indexOf('.'))
|
||||
let num_next = money.toString().substring(money.toString().indexOf('.') + 1).padEnd(2, '0')
|
||||
console.log('num_per',num_per)
|
||||
console.log('num_next',num_next)
|
||||
console.log('num_per', num_per)
|
||||
console.log('num_next', num_next)
|
||||
realMoney = Number(num_per + '.' + num_next).toFixed(2)
|
||||
}else{
|
||||
} else {
|
||||
realMoney = money
|
||||
}
|
||||
|
||||
console.log('realMoney',realMoney)
|
||||
console.log('realMoney', realMoney)
|
||||
let num = realMoney
|
||||
// let num = parseFloat(realMoney + '') + '';
|
||||
// num = (parseInt(realMoney * 100 + '') / 100).toFixed(2) + ''
|
||||
console.log('num',num)
|
||||
console.log('num', num)
|
||||
let reg = /(-?\d+)(\d{3})/;
|
||||
while (reg.test(num)) {
|
||||
num = num.replace(reg, "$1,$2");
|
||||
}
|
||||
|
||||
let idx = num.indexOf('.')
|
||||
console.log('idx',idx)
|
||||
console.log('idx', idx)
|
||||
if (idx === -1) {
|
||||
num = num + '.00'
|
||||
}
|
||||
@ -289,8 +289,8 @@ function getMoneyTest(money){
|
||||
let num_per = num.substring(0, idx) + '.'
|
||||
let num_next = num.substring(idx + 1).padEnd(2, '0')
|
||||
|
||||
console.log('num_per',num_per)
|
||||
console.log('num_next',num_next)
|
||||
console.log('num_per', num_per)
|
||||
console.log('num_next', num_next)
|
||||
|
||||
num = num_per + num_next
|
||||
}
|
||||
@ -305,6 +305,45 @@ function playVideo(opt) {
|
||||
|
||||
return new EZUIPlayer(opt)
|
||||
}
|
||||
|
||||
// 得到这个月有多少天
|
||||
function getThisMonthDay(value) {
|
||||
let date = new Date(value)
|
||||
let y = date.getFullYear()
|
||||
let m = date.getMonth() + 1
|
||||
let howDay;
|
||||
let flag = false
|
||||
if (y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) {
|
||||
flag = true
|
||||
}
|
||||
switch (m) {
|
||||
case 1:
|
||||
case 3:
|
||||
case 5:
|
||||
case 7:
|
||||
case 8:
|
||||
case 10:
|
||||
case 12:
|
||||
howDay = 31
|
||||
break
|
||||
case 4:
|
||||
case 6:
|
||||
case 9:
|
||||
case 11:
|
||||
howDay = 30
|
||||
break
|
||||
case 2:
|
||||
if (flag) {
|
||||
howDay = 29
|
||||
} else {
|
||||
howDay = 28
|
||||
}
|
||||
break
|
||||
}
|
||||
return howDay
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
netChange,
|
||||
cutDate,
|
||||
@ -318,5 +357,6 @@ export default {
|
||||
getFieldEnumByField, // 获取枚举参数
|
||||
// calculateDistance,
|
||||
// bMapToQQMap,
|
||||
playVideo
|
||||
playVideo,
|
||||
getThisMonthDay
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-body" v-if="showPage">
|
||||
<view class="page-body page-fade-in" v-if="showPage">
|
||||
<AnhHead :today="today" :headMsg="headMsg" :lastDay="lastDay" :groupType="theRequest && theRequest.GroupType"
|
||||
:provinceCode="theRequest && theRequest.ProvinceCode" @bindDateChange="bindDateChange" :isup="isup"
|
||||
:nowDay="nowDay" :selectDate="theRequest && theRequest.time" @toggle="toggleCard" :currentMoney="currentMoney">
|
||||
@ -56,8 +56,8 @@
|
||||
<view class="content-wrapper">
|
||||
<view class="chart-section" v-show="nowTab == 1"
|
||||
v-if="modelProgress.length > 0 && theRequest.ProvinceCode == 340000">
|
||||
<view class="chart-container">
|
||||
<canvas canvas-id="modelCont" id="modelCont" class="modern-chart"
|
||||
<view class="chart-container chart-optimized">
|
||||
<canvas canvas-id="modelCont" id="modelCont" class="modern-chart performance-chart"
|
||||
@touchstart="touchPie($event, 'modelCont')"></canvas>
|
||||
</view>
|
||||
<view class="data-cards">
|
||||
@ -68,14 +68,15 @@
|
||||
</view>
|
||||
<view class="amount">￥{{ item.data }}</view>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view>
|
||||
<view class="progress-fill progress-animated" :class="'progress-delay-' + o"
|
||||
:style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-section" v-show="nowTab == 2" v-if="regionProgress.length > 0">
|
||||
<view class="chart-container">
|
||||
<canvas canvas-id="businessCont" id="businessCont" class="modern-chart"
|
||||
<view class="chart-container chart-optimized">
|
||||
<canvas canvas-id="businessCont" id="businessCont" class="modern-chart performance-chart"
|
||||
@touchstart="touchPie($event, 'businessCont')"></canvas>
|
||||
</view>
|
||||
<view class="data-cards">
|
||||
@ -86,14 +87,15 @@
|
||||
</view>
|
||||
<view class="amount">￥{{ item.data }}</view>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view>
|
||||
<view class="progress-fill progress-animated" :class="'progress-delay-' + o"
|
||||
:style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-section" v-show="nowTab == 3" v-if="areaProgress.length > 0">
|
||||
<view class="chart-container">
|
||||
<canvas canvas-id="areaCont" id="areaCont" class="modern-chart"
|
||||
<view class="chart-container chart-optimized">
|
||||
<canvas canvas-id="areaCont" id="areaCont" class="modern-chart performance-chart"
|
||||
@touchstart="touchPie($event, 'areaCont')"></canvas>
|
||||
</view>
|
||||
<view class="data-cards">
|
||||
@ -104,12 +106,15 @@
|
||||
</view>
|
||||
<view class="amount">￥{{ item.data }}</view>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view>
|
||||
<view class="progress-fill progress-animated" :class="'progress-delay-' + o"
|
||||
:style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="traffic-analysis" v-show="nowTab == 4" v-if="bayonetProgress && bayonetProgress.length > 0">
|
||||
<!-- 车流分析区域 - 修复显示问题 -->
|
||||
<view v-if="theRequest.ProvinceCode == 340000 && theRequest.GroupType == 1000" v-show="nowTab == 4">
|
||||
<view class="traffic-analysis" v-if="bayonetProgress && bayonetProgress.length > 0">
|
||||
<view class="traffic-header">
|
||||
<view class="traffic-title">
|
||||
<view class="traffic-icon">🚗</view>
|
||||
@ -126,7 +131,6 @@
|
||||
<!-- 区域标题 -->
|
||||
<view class="region-header" @click="toggleRegionCollapse(item)">
|
||||
<view class="region-badge">
|
||||
<view class="region-icon">🗺️</view>
|
||||
<view class="region-title">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="region-actions">
|
||||
@ -136,23 +140,27 @@
|
||||
</view>
|
||||
|
||||
<!-- 服务区列表 -->
|
||||
<view class="service-areas" v-if="!item.collapsed">
|
||||
<view class="service-area-item" v-for="(child, idx) in item.list" :key="idx">
|
||||
<view class="service-header" @click="toggleServiceArea(item, idx)">
|
||||
<view class="service-areas service-areas-expand" v-if="!item.collapsed">
|
||||
<view class="service-area-item service-item-slide" v-for="(child, idx) in item.list"
|
||||
:key="idx" :style="'animation-delay: ' + (idx * 0.1) + 's'">
|
||||
<view class="service-header service-header-interactive"
|
||||
@click="toggleServiceArea(item, idx)">
|
||||
<view class="service-info">
|
||||
<view class="service-name">{{ child.name }}</view>
|
||||
<view class="service-ratio">占比 {{ child.bili }}%</view>
|
||||
</view>
|
||||
<view class="service-actions">
|
||||
<view class="flow-stats">
|
||||
<view class="flow-item">
|
||||
<view class="flow-item flow-item-counter">
|
||||
<text class="flow-label">入区</text>
|
||||
<text class="flow-value">{{ child.data }}</text>
|
||||
<text class="flow-value" :class="'counter-animate-' + o + '-' + idx">{{ child.data
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="flow-divider">|</view>
|
||||
<view class="flow-item">
|
||||
<view class="flow-item flow-item-counter">
|
||||
<text class="flow-label">断面</text>
|
||||
<text class="flow-value">{{ child.flow }}</text>
|
||||
<text class="flow-value" :class="'counter-animate-' + o + '-' + idx">{{ child.flow
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="expand-arrow" :class="{ 'expanded': child.expanded }">▼</view>
|
||||
@ -160,26 +168,35 @@
|
||||
</view>
|
||||
|
||||
<!-- 方向车流数据 -->
|
||||
<view class="direction-list" v-if="child.expanded && child.list && child.list.length > 0">
|
||||
<view class="direction-item" v-for="(direction, didx) in child.list" :key="didx">
|
||||
<view class="direction-list direction-expand-animation"
|
||||
v-if="child.expanded && child.list && child.list.length > 0">
|
||||
<view class="direction-item direction-item-slide" v-for="(direction, didx) in child.list"
|
||||
:key="didx" :style="'animation-delay: ' + (didx * 0.1) + 's'">
|
||||
<view class="direction-header">
|
||||
<view class="direction-info">
|
||||
<text class="direction-name">{{ direction.name }}区</text>
|
||||
<text class="direction-percent">{{ direction.bili }}%</text>
|
||||
<text class="direction-percent direction-percent-highlight">{{ direction.bili
|
||||
}}%</text>
|
||||
</view>
|
||||
<view class="vehicle-stats">
|
||||
<view class="vehicle-type-group">
|
||||
<view class="vehicle-type-item">
|
||||
<view class="vehicle-type-item vehicle-item-bounce"
|
||||
:style="'animation-delay: ' + (didx * 0.1 + 0.2) + 's'">
|
||||
<text class="vehicle-type-label">大型车</text>
|
||||
<text class="vehicle-count-value">{{ direction.LargeVehicle_Count }}</text>
|
||||
<text class="vehicle-count-value vehicle-count-pulse">{{
|
||||
direction.LargeVehicle_Count }}</text>
|
||||
</view>
|
||||
<view class="vehicle-type-item">
|
||||
<view class="vehicle-type-item vehicle-item-bounce"
|
||||
:style="'animation-delay: ' + (didx * 0.1 + 0.3) + 's'">
|
||||
<text class="vehicle-type-label">中型车</text>
|
||||
<text class="vehicle-count-value">{{ direction.MediumVehicle_Count }}</text>
|
||||
<text class="vehicle-count-value vehicle-count-pulse">{{
|
||||
direction.MediumVehicle_Count }}</text>
|
||||
</view>
|
||||
<view class="vehicle-type-item">
|
||||
<view class="vehicle-type-item vehicle-item-bounce"
|
||||
:style="'animation-delay: ' + (didx * 0.1 + 0.4) + 's'">
|
||||
<text class="vehicle-type-label">小型车</text>
|
||||
<text class="vehicle-count-value">{{ direction.MinVehicle_Count }}</text>
|
||||
<text class="vehicle-count-value vehicle-count-pulse">{{
|
||||
direction.MinVehicle_Count }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -192,6 +209,12 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 无数据提示 -->
|
||||
<view class="no-traffic-data" v-if="!bayonetProgress || bayonetProgress.length === 0">
|
||||
<view class="no-data-icon">🚗</view>
|
||||
<text class="no-data-text">暂无车流分析数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -237,9 +260,10 @@
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="theRequest && theRequest.GroupType == 1000">
|
||||
<view class="region-list" v-show="regionShow1">
|
||||
<view class="region-list list-fade-in" v-show="regionShow1">
|
||||
<block v-for="(item, i) in regionList" :key="i">
|
||||
<view class="region-card" @click="toggleRegion(item)">
|
||||
<view class="region-card region-card-slide" @click="toggleRegion(item)"
|
||||
:style="'animation-delay: ' + (i * 0.1) + 's'">
|
||||
<view class="region-main">
|
||||
<view class="region-info">
|
||||
<view class="region-name">{{ item.name }}</view>
|
||||
@ -266,9 +290,10 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-sublist" v-show="item.show">
|
||||
<view class="subservice-card" v-for="(child, index) in item.child"
|
||||
:class="{ 'visited': child.visited }" :key="index" @click.stop="toDetail(child)">
|
||||
<view class="service-sublist expand-collapse" v-show="item.show">
|
||||
<view class="subservice-card subservice-slide" v-for="(child, index) in item.child"
|
||||
:class="{ 'visited': child.visited }" :key="index" @click.stop="toDetail(child)"
|
||||
:style="'animation-delay: ' + (index * 0.05) + 's'">
|
||||
<view class="subservice-info">
|
||||
<view class="subservice-name">{{ child.serverpart_Name }}</view>
|
||||
<view class="subservice-revenue">￥{{ $util.fmoney(child.cashpay, 2) }}
|
||||
@ -337,7 +362,7 @@ export default {
|
||||
regionProgress: null,
|
||||
tradeType: null,
|
||||
areaProgress: null,
|
||||
bayonetProgress: null,
|
||||
bayonetProgress: [], // 初始化为空数组
|
||||
modelProgress: null,
|
||||
isup: true,
|
||||
wechatPushSalesList: null, // 甘肃单品排行数据
|
||||
@ -619,6 +644,20 @@ export default {
|
||||
},
|
||||
selectTab(name, index) {
|
||||
this[name] = index
|
||||
// 当切换到车流分析标签时，强制触发响应式更新
|
||||
if (name === 'nowTab' && index === 4) {
|
||||
console.log('切换到车流分析标签')
|
||||
console.log('当前bayonetProgress:', this.bayonetProgress)
|
||||
console.log('bayonetProgress类型:', typeof this.bayonetProgress)
|
||||
console.log('bayonetProgress长度:', this.bayonetProgress ? this.bayonetProgress.length : 'null/undefined')
|
||||
console.log('条件判断结果:')
|
||||
console.log('- 有数据条件:', !!(this.bayonetProgress && this.bayonetProgress.length > 0))
|
||||
console.log('- 无数据条件:', !!(!this.bayonetProgress || this.bayonetProgress.length === 0))
|
||||
// 使用$nextTick确保DOM更新
|
||||
this.$nextTick(() => {
|
||||
console.log('车流分析DOM更新完成')
|
||||
})
|
||||
}
|
||||
},
|
||||
toggleRegion(item) {
|
||||
// 使用Vue.set确保响应式更新
|
||||
@ -668,10 +707,9 @@ export default {
|
||||
}
|
||||
const ctx = uni.createCanvasContext(obj.id, this);
|
||||
data.series = data.series.concat(obj.data)
|
||||
|
||||
// 微信小程序专用优化配置 - 完全去除动画和过渡效果
|
||||
rincanvas[obj.id] = new uCharts({
|
||||
// 小程序图表工具
|
||||
// $this: this,
|
||||
// canvasId: obj.id,
|
||||
context: ctx,
|
||||
color: obj.colors,
|
||||
type: 'ring',
|
||||
@ -684,23 +722,47 @@ export default {
|
||||
margin: 0,
|
||||
},
|
||||
background: '#FFFFFF',
|
||||
pixelRatio: 1,
|
||||
pixelRatio: 1, // 使用较低的像素比率减少渲染负担
|
||||
series: data.series,
|
||||
animation: false,
|
||||
width: uni.upx2px(686),
|
||||
height: uni.upx2px(510),
|
||||
dataLabel: true,
|
||||
|
||||
// 核心性能优化 - 完全禁用所有动画和交互
|
||||
animation: false, // 禁用所有动画
|
||||
animationDuration: 0, // 动画时长为0
|
||||
animationEasing: 'linear', // 使用最简单的缓动函数
|
||||
enableScroll: false, // 禁用滚动
|
||||
enableMarkLine: false, // 禁用标记线
|
||||
enableDataLabel: true, // 仅启用数据标签
|
||||
disableTouch: true, // 禁用触摸交互以提高性能
|
||||
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 40,
|
||||
labelWidth: 16,
|
||||
border: true,
|
||||
borderWidth: 1,
|
||||
|
||||
borderColor: '#fff'
|
||||
borderColor: '#fff',
|
||||
// 完全禁用交互效果
|
||||
activeOpacity: 1, // 禁用透明度变化
|
||||
activeRadius: 0, // 禁用半径变化
|
||||
// 微信小程序特殊优化
|
||||
linearGradient: false, // 禁用渐变以提高渲染性能
|
||||
disableAnimation: true // uCharts自定义禁用动画参数
|
||||
}
|
||||
},
|
||||
|
||||
// 微信小程序Canvas优化
|
||||
onRenderComplete: function () {
|
||||
// 渲染完成后立即绘制，避免视觉延迟
|
||||
ctx.draw(false);
|
||||
}
|
||||
});
|
||||
|
||||
// 立即绘制，不使用回调以避免异步延迟
|
||||
ctx.draw(false);
|
||||
console.log('图表立即渲染完成:', obj.id);
|
||||
},
|
||||
getDetail(obj) {
|
||||
console.log('obj', obj)
|
||||
@ -832,9 +894,11 @@ export default {
|
||||
// 饼图分析及数据条形分析
|
||||
const [progressList, pieList] = this.getProgressData(busniessTypePie, totalData.cashPay)
|
||||
this.modelProgress = progressList
|
||||
// 延迟渲染图表，优化首屏加载
|
||||
// 优化图表渲染，减少卡顿
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// 使用requestAnimationFrame优化渲染时机
|
||||
const renderCharts = () => {
|
||||
try {
|
||||
// 经营类型分析
|
||||
var colors1 = ['#FFAC37', '#6B75B8'];
|
||||
if (pieList.length > 0) {
|
||||
@ -845,7 +909,8 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
// 饼图分析及数据条形分析
|
||||
// 由于已优化单个图表性能，现在可以立即渲染所有图表
|
||||
// 第二个图表 - 饼图分析及数据条形分析
|
||||
const [tprogressList, tpieList] = this.getProgressData(busniessTradePie, totalData.cashPay)
|
||||
this.regionProgress = tprogressList
|
||||
|
||||
@ -859,7 +924,7 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
// 饼图分析及数据条形分析
|
||||
// 第三个图表 - 区域营收分析（立即渲染）
|
||||
const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay)
|
||||
this.areaProgress = aprogressList
|
||||
|
||||
@ -872,14 +937,39 @@ export default {
|
||||
colors: colors3,
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('图表渲染出错:', error);
|
||||
uni.hideLoading();
|
||||
}
|
||||
};
|
||||
|
||||
// 立即执行图表渲染，无需延时
|
||||
renderCharts();
|
||||
});
|
||||
|
||||
// 安徽省本级显示的内容
|
||||
if (this.theRequest.GroupType == 1000 && this.theRequest.ProvinceCode == 340000) {
|
||||
// 显示片区车流量数据分析
|
||||
console.log('处理车流分析数据:', bayonetPie)
|
||||
console.log('bayonetPie类型和长度:', typeof bayonetPie, bayonetPie ? bayonetPie.length : 'null/undefined')
|
||||
if (bayonetPie && bayonetPie.length > 0) {
|
||||
console.log('开始处理车流数据...')
|
||||
const [bayonetList] = this.getBayonetData(bayonetPie)
|
||||
this.bayonetProgress = bayonetList
|
||||
console.log('getBayonetData返回结果:', bayonetList)
|
||||
console.log('bayonetList长度:', bayonetList ? bayonetList.length : 'null/undefined')
|
||||
// 使用Vue.set确保响应式更新
|
||||
this.$set(this, 'bayonetProgress', bayonetList || [])
|
||||
console.log('最终设置bayonetProgress:', this.bayonetProgress)
|
||||
console.log('bayonetProgress.length:', this.bayonetProgress.length)
|
||||
} else {
|
||||
// 没有数据时设置为空数组
|
||||
this.$set(this, 'bayonetProgress', [])
|
||||
console.log('无车流分析数据，设置为空数组，bayonetPie:', bayonetPie)
|
||||
}
|
||||
} else {
|
||||
// 不是安徽本级的情况，确保数据为空
|
||||
console.log('不是安徽本级，清空车流数据')
|
||||
this.$set(this, 'bayonetProgress', [])
|
||||
}
|
||||
|
||||
// 数据加载完成后显示页面并隐藏loading
|
||||
@ -1431,6 +1521,64 @@ text.fs12 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 图表性能优化样式 */
|
||||
|
||||
/* 性能优化的图表容器 */
|
||||
.chart-optimized {
|
||||
/* 减少重绘和回流 */
|
||||
transform: translateZ(0);
|
||||
will-change: auto;
|
||||
backface-visibility: hidden;
|
||||
|
||||
/* 避免子元素的布局计算影响 */
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
/* 性能优化的Canvas */
|
||||
.performance-chart {
|
||||
/* 硬件加速 */
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
/* 减少触摸延迟 */
|
||||
touch-action: manipulation;
|
||||
|
||||
/* 优化渲染性能 */
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
|
||||
/* 固定尺寸避免重新计算 */
|
||||
width: 686rpx !important;
|
||||
height: 510rpx !important;
|
||||
|
||||
/* 避免内容重排 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 减少动画对图表的影响 */
|
||||
.chart-container.chart-scale-in {
|
||||
/* 简化入场动画，减少性能消耗 */
|
||||
animation-duration: 0.3s;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
/* 图表加载态优化 */
|
||||
.chart-section {
|
||||
/* 预留空间避免布局跳动 */
|
||||
min-height: 510rpx;
|
||||
|
||||
/* 减少layout thrashing */
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
/* 禁用不必要的交互效果 */
|
||||
.performance-chart:active,
|
||||
.performance-chart:hover,
|
||||
.performance-chart:focus {
|
||||
/* 移除默认的交互反馈 */
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.heade-text {
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
@ -1494,9 +1642,9 @@ text.fs12 {
|
||||
|
||||
.modle-title {
|
||||
padding: 0 32rpx 24rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 32rpx 20rpx 0 20rpx;
|
||||
@ -1600,9 +1748,9 @@ text.fs12 {
|
||||
text-align: right;
|
||||
|
||||
.strong-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
|
||||
}
|
||||
}
|
||||
@ -2356,7 +2504,7 @@ canvas.operation-content {
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
@ -2369,7 +2517,7 @@ canvas.operation-content {
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 32rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #27B25F;
|
||||
font-family: 'DIN Alternate', 'Bahnschrift', monospace;
|
||||
@ -2477,8 +2625,8 @@ canvas.operation-content {
|
||||
}
|
||||
|
||||
.region-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
@ -2715,8 +2863,8 @@ canvas.operation-content {
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
@ -2892,13 +3040,13 @@ canvas.operation-content {
|
||||
}
|
||||
|
||||
.region-name {
|
||||
font-size: 30rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.region-revenue {
|
||||
font-size: 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #27B25F;
|
||||
font-family: 'DIN Alternate', 'Bahnschrift', monospace;
|
||||
@ -3065,4 +3213,479 @@ canvas.operation-content {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面入场动画 */
|
||||
.page-fade-in {
|
||||
animation: pageSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
@keyframes pageSlideUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 分析容器滑入动画 */
|
||||
.slide-up-animation {
|
||||
animation: slideUpFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
@keyframes slideUpFade {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tab淡入动画 */
|
||||
.tab-fade-in {
|
||||
animation: tabFadeIn 0.5s ease-out 0.4s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes tabFadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tab切换动画 */
|
||||
.tab-item {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.tab-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 图表容器动画 */
|
||||
.chart-fade-in {
|
||||
animation: chartFadeIn 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes chartFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.chart-scale-in {
|
||||
animation: chartScaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
@keyframes chartScaleIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 数据卡片动画 */
|
||||
.card-slide-up {
|
||||
animation: cardSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
@keyframes cardSlideUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.data-card {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.data-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 进度条动画 */
|
||||
.progress-fill {
|
||||
transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.progress-delay-0 {
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
|
||||
.progress-delay-1 {
|
||||
transition-delay: 0.9s;
|
||||
}
|
||||
|
||||
.progress-delay-2 {
|
||||
transition-delay: 1.0s;
|
||||
}
|
||||
|
||||
.progress-delay-3 {
|
||||
transition-delay: 1.1s;
|
||||
}
|
||||
|
||||
.progress-delay-4 {
|
||||
transition-delay: 1.2s;
|
||||
}
|
||||
|
||||
/* 卡片交错动画 */
|
||||
.cards-stagger .data-card:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.cards-stagger .data-card:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.cards-stagger .data-card:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.cards-stagger .data-card:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.cards-stagger .data-card:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
/* 区域列表动画 */
|
||||
.list-fade-in {
|
||||
animation: listFadeIn 0.6s ease-out 0.6s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes listFadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.region-card-slide {
|
||||
animation: regionSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
@keyframes regionSlideUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 展开收起动画 */
|
||||
.expand-indicator {
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.expand-indicator.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.service-sublist {
|
||||
overflow: hidden;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.subservice-slide {
|
||||
animation: subserviceSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
@keyframes subserviceSlideIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片悬浮效果优化 */
|
||||
.region-card {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.region-card:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.subservice-card {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.subservice-card:active {
|
||||
transform: translateX(5px);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 车流分析动画效果 */
|
||||
.traffic-fade-in {
|
||||
animation: trafficFadeIn 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes trafficFadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-header-slide {
|
||||
animation: trafficHeaderSlide 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
@keyframes trafficHeaderSlide {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-icon-bounce {
|
||||
animation: trafficIconBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s forwards;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
@keyframes trafficIconBounce {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-summary-fade {
|
||||
animation: summaryFadeIn 0.5s ease-out 0.8s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes summaryFadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-region-slide {
|
||||
animation: regionSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
@keyframes regionSlideIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 区域卡片交互动画 */
|
||||
.region-header {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.region-header:active {
|
||||
transform: scale(0.98);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.region-arrow {
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.region-arrow.collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* 服务区展开动画 */
|
||||
.service-areas-expand {
|
||||
animation: serviceAreasExpand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
@keyframes serviceAreasExpand {
|
||||
to {
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
.service-item-slide {
|
||||
animation: serviceItemSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
@keyframes serviceItemSlide {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.service-header-interactive {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.service-header-interactive:active {
|
||||
transform: scale(0.98);
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
/* 数值动画效果 */
|
||||
.flow-item-counter .flow-value {
|
||||
animation: counterPulse 0.8s ease-out 1.5s forwards;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* 无车流数据提示样式 */
|
||||
.no-traffic-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 40rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.no-data-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 16rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.no-data-text {
|
||||
font-size: 26rpx;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes counterPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.expand-arrow {
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.expand-arrow.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 方向数据展开动画 */
|
||||
.direction-expand-animation {
|
||||
animation: directionExpand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
@keyframes directionExpand {
|
||||
to {
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.direction-item-slide {
|
||||
animation: directionItemSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
@keyframes directionItemSlide {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.direction-percent-highlight {
|
||||
animation: percentHighlight 1s ease-in-out 1s forwards;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes percentHighlight {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: #52c41a;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* 车型数据弹跳动画 */
|
||||
.vehicle-item-bounce {
|
||||
animation: vehicleItemBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(10px);
|
||||
}
|
||||
|
||||
@keyframes vehicleItemBounce {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.vehicle-count-pulse {
|
||||
animation: vehicleCountPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes vehicleCountPulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view :class="'province-theme-' + currentProvinceCode" scroll-with-animation v-if="showPage">
|
||||
<view class="page-body">
|
||||
<div class="box-card" :style="'opacity:' + (1 - opacity) + ';'">
|
||||
<view class="page-body page-enter">
|
||||
<div class="box-card card-enter" :style="'opacity:' + (1 - opacity) + ';'">
|
||||
<div class="box-top-title">
|
||||
<span class="box-center-title">{{ sMsg.serverpartname }}</span>
|
||||
<picker mode="date" @change="bindDateChange" :value="theRequest && theRequest.time" :start="startTime"
|
||||
@ -10,7 +10,7 @@
|
||||
</picker>
|
||||
|
||||
</div>
|
||||
<view class="top-card">
|
||||
<view class="top-card data-card-enter">
|
||||
<div class="box-center-box">
|
||||
<div class="uni-flex ai-center jc-between" style="margin-bottom: 8rpx;">
|
||||
<div class="main-amount-title">对客营收(元)</div>
|
||||
@ -36,37 +36,37 @@
|
||||
</div>
|
||||
<div class="uni-flex jc-between box-center-box">
|
||||
|
||||
<div class="check-unit">
|
||||
<div class="check-unit metric-enter">
|
||||
<text>长款金额</text>
|
||||
<div class="check-price-color">{{ $util.fmoney(sMsg.diffMorePrice, 2) }} <text>元</text></div>
|
||||
</div>
|
||||
<div class="check-unit">
|
||||
<div class="check-unit metric-enter">
|
||||
<text>短款金额</text>
|
||||
<div class="check-price-color">{{ $util.fmoney(sMsg.diffLessPrice, 2) }} <text>元</text></div>
|
||||
</div>
|
||||
<div class="check-unit">
|
||||
<div class="check-unit metric-enter">
|
||||
<text>客单交易</text>
|
||||
<div class="check-price-color">{{ $util.fmoney(sMsg.ticketCount, 0) }} <text>笔</text></div>
|
||||
</div>
|
||||
<div class="check-unit">
|
||||
<div class="check-unit metric-enter">
|
||||
<text>客单均价</text>
|
||||
<div class="check-price-color">{{ $util.fmoney(sMsg.tickave, 2) }} <text>元</text></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uni-flex jc-between box-center-box mt8">
|
||||
<div class="check-unit">
|
||||
<div class="check-unit metric-enter">
|
||||
<text>优惠金额</text>
|
||||
<div class="check-price-color">{{ $util.fmoney(sMsg.totalOffAmount, 2) }} <text>元</text></div>
|
||||
</div>
|
||||
<div class="check-unit">
|
||||
<div class="check-unit metric-enter">
|
||||
<text>移动支付</text>
|
||||
<div class="check-price-color">{{ $util.fmoney(sMsg.mobilePayment, 2) }} <text>元</text></div>
|
||||
</div>
|
||||
<div class="check-unit">
|
||||
<div class="check-unit metric-enter">
|
||||
<text>商品出售</text>
|
||||
<div class="check-price-color">{{ $util.fmoney(sMsg.totalCount, 0) }} <text>件</text></div>
|
||||
</div>
|
||||
<div class="check-unit">
|
||||
<div class="check-unit metric-enter">
|
||||
<text>商品均价</text>
|
||||
<div class="check-price-color">{{ $util.fmoney(sMsg.countave, 2) }} <text>元</text></div>
|
||||
</div>
|
||||
@ -82,11 +82,11 @@
|
||||
|
||||
<template v-if="cateBrandList.length">
|
||||
<template v-if="theRequest.ProvinceCode == '340000'">
|
||||
<view class="uni-flex ai-center analysis-tabs">
|
||||
<view class="uni-flex ai-center analysis-tabs tabs-enter">
|
||||
<!-- <view @tap="changeTab(3)" class="tab" :class="{'active': nowTab==3}">经营模式</view> -->
|
||||
<view @tap="changeTab(4)" class="tab" :class="{ 'active': nowTab == 4 }">车流分析</view>
|
||||
<view @tap="changeTab(1)" class="tab" :class="{ 'active': nowTab == 1 }">经营分析</view>
|
||||
<view @tap="changeTab(2)" class="tab" :class="{ 'active': nowTab == 2 }">客群分析</view>
|
||||
<view @tap="changeTab(4)" class="tab tab-slide" :class="{ 'active': nowTab == 4 }">车流分析</view>
|
||||
<view @tap="changeTab(1)" class="tab tab-slide" :class="{ 'active': nowTab == 1 }">经营分析</view>
|
||||
<view @tap="changeTab(2)" class="tab tab-slide" :class="{ 'active': nowTab == 2 }">客群分析</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="pie-content" v-show="nowTab==3">
|
||||
@ -98,36 +98,33 @@
|
||||
</view> -->
|
||||
</template>
|
||||
|
||||
<!-- 经营分析内容 -->
|
||||
<view v-show="nowTab == 1">
|
||||
<!-- 安徽省 -->
|
||||
<div class="pie-content">
|
||||
<div class="model-busniess">经营业态占比</div>
|
||||
<ServiceRevenuePie ref="serviceRevenuePie" v-if="ServiceRevenueData.length == 2 && nowTab == 1"
|
||||
<ServiceRevenuePie ref="serviceRevenuePie" v-show="ServiceRevenueData && ServiceRevenueData.length >= 2"
|
||||
:data="ServiceRevenueData" @selectCate="selectCate" />
|
||||
<!-- 其余省份 -->
|
||||
<!-- <canvas v-else-if="sellData.length>0" canvas-id="sellCate" id="sellCate" class="operation-cate-content" @click="touchPie($event,'sellCate')"></canvas> -->
|
||||
<div class="model-busniess">
|
||||
<div class="model-busniess progress-section-enter">
|
||||
<div>经营模式占比</div>
|
||||
<div class="progress-content">
|
||||
<div class="progress-left" :style="'width: ' + operationModel[0].bili + '%;'"></div>
|
||||
<div class="progress-right" :style="'width: ' + operationModel[1].bili + '%;'"></div>
|
||||
</div>
|
||||
<div class="uni-flex jc-between">
|
||||
<div style="color: #667ED5;font-size: 26rpx;">{{ operationModel[0].name }}: <span
|
||||
style="font-size: 26rpx;">{{
|
||||
<div style="color: #667ED5;">{{ operationModel[0].name }}: <span style="font-size: 32rpx;">{{
|
||||
operationModel[0].bili }}</span>%</div>
|
||||
<div style="color: #F3AF50;font-size: 26rpx;" v-if="operationModel[1].name">{{ operationModel[1].name
|
||||
}}:
|
||||
<span style="font-size: 26rpx;">{{ operationModel[1].bili }}</span>%
|
||||
<div style="color: #F3AF50;" v-if="operationModel[1].name">{{ operationModel[1].name }}:
|
||||
<span style="font-size: 32rpx;">{{ operationModel[1].bili }}</span>%
|
||||
</div>
|
||||
</div>
|
||||
<div class="uni-flex jc-between">
|
||||
<div style="margin-bottom: 0;font-size: 24rpx;"><span style="font-size: 26rpx;">{{
|
||||
operationModel[0].data
|
||||
<div style="margin-bottom: 0;"><span style="font-size: 32rpx;">{{ operationModel[0].data
|
||||
}}</span>元
|
||||
</div>
|
||||
<div style="margin-bottom: 0;font-size: 24rpx;" v-if="operationModel[1].data"><span
|
||||
style="font-size: 26rpx;">{{
|
||||
<div style="margin-bottom: 0;" v-if="operationModel[1].data"><span style="font-size: 32rpx;">{{
|
||||
operationModel[1].data
|
||||
}}</span>元
|
||||
</div>
|
||||
@ -135,17 +132,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 品牌列表 -->
|
||||
<div class="shop-box">
|
||||
<scroll-view scroll-x class="tab-shop" scroll-with-animation :scroll-left="scrollLeft">
|
||||
<div v-for="(n, i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name"
|
||||
:class="{ 'active': nowShop == i }" @click="selectCate(i)">{{ n.Bussiness_Name }}</div>
|
||||
<div class="shop-box brand-list-enter">
|
||||
<scroll-view scroll-x class="tab-shop tab-shop-slide" scroll-with-animation :scroll-left="scrollLeft">
|
||||
<div v-for="(n, i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name brand-tab-stagger"
|
||||
:class="{ 'active': nowShop == i }" @click="selectCate(i)"
|
||||
:style="'animation-delay: ' + (i * 0.05) + 's'">{{
|
||||
n.Bussiness_Name }}</div>
|
||||
</scroll-view>
|
||||
<div class="tab-content" v-if="cateBrandList.length">
|
||||
<div class="shop-card" v-for="(m, i) in cateBrandList[nowShop].listBrandModel" :key="i"
|
||||
@click="toBrandPage(m, i)">
|
||||
<div>
|
||||
<image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit"></image>
|
||||
<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
|
||||
<div class="tab-content brand-cards-container" v-if="cateBrandList.length">
|
||||
<div class="shop-card brand-card-stagger" v-for="(m, i) in cateBrandList[nowShop].listBrandModel" :key="i"
|
||||
@click="toBrandPage(m, i)" :style="'animation-delay: ' + (i * 0.08) + 's'">
|
||||
<div class="brand-icon-wrapper">
|
||||
<image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit" class="brand-icon"></image>
|
||||
<image v-else src="/static/images/revenue/home.png" mode="aspectFit" class="brand-icon"></image>
|
||||
</div>
|
||||
<div class="shop-name">{{ m.Brand_Name }}</div>
|
||||
<div class="price-num">¥ {{ m.Revenue_Amount ? $util.fmoney(m.Revenue_Amount, 2) : '0.00' }}
|
||||
@ -155,10 +154,10 @@
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<view class="" v-show="nowTab == 2">
|
||||
<view class="tab-content-fade" v-show="nowTab == 2">
|
||||
<CustomerAnalysis ref="customerAna" :show="nowTab == 2" />
|
||||
</view>
|
||||
<view class="" v-show="nowTab == 4">
|
||||
<view class="tab-content-fade" v-show="nowTab == 4">
|
||||
<CarAnalysis ref="carAna" :show="nowTab == 4" />
|
||||
</view>
|
||||
|
||||
@ -320,8 +319,7 @@ export default {
|
||||
let d = date.getDate() - 1
|
||||
if (d - 8 < 0) {
|
||||
let num = 8 - d
|
||||
m = m - 1
|
||||
let changeMonth = m
|
||||
let changeMonth = m - 1
|
||||
if (changeMonth < 10) {
|
||||
changeMonth = '0' + changeMonth
|
||||
}
|
||||
@ -338,8 +336,13 @@ export default {
|
||||
day = d - 8
|
||||
startTime = `${y}-${m}-${day}`
|
||||
}
|
||||
console.log('mmm', m);
|
||||
|
||||
this.startTime = startTime
|
||||
this.endTime = `${y}-${m}-${d}`
|
||||
console.log('this.startTimethis.startTime', this.startTime);
|
||||
console.log('this.startTimethis.endTime', this.endTime);
|
||||
|
||||
|
||||
|
||||
},
|
||||
@ -368,7 +371,6 @@ export default {
|
||||
changeTab(value) {
|
||||
this.nowTab = value
|
||||
if (value == 2) {
|
||||
|
||||
let opt = this.theRequest
|
||||
const params = {
|
||||
serverpartId: opt.ServerpartIds,
|
||||
@ -480,8 +482,15 @@ export default {
|
||||
let colors1 = ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'];
|
||||
let list = []
|
||||
let list2 = []
|
||||
|
||||
// 检查数据有效性
|
||||
if (!_this.pageData || !_this.pageData.listBusinessModel) {
|
||||
console.warn('pageData 或 listBusinessModel 无效')
|
||||
return
|
||||
}
|
||||
|
||||
_this.pageData.listBusinessModel.map((m, i) => {
|
||||
if (m.Revenue_Amount != 0) {
|
||||
if (m.Revenue_Amount && m.Revenue_Amount != 0) {
|
||||
let n = {
|
||||
name: m.Bussiness_Name,
|
||||
data: m.Revenue_Amount
|
||||
@ -506,24 +515,43 @@ export default {
|
||||
}
|
||||
|
||||
})
|
||||
if (list2.length > 0) {
|
||||
_this.ServiceRevenueData.push(list2)
|
||||
_this.sellData = list
|
||||
|
||||
// 构建完整的数据数组
|
||||
let fullServiceRevenueData = []
|
||||
|
||||
// 添加第一层数据
|
||||
if (list2.length > 0) {
|
||||
fullServiceRevenueData.push(list2)
|
||||
_this.sellData = list
|
||||
console.log('第一层数据准备:', list2)
|
||||
}
|
||||
|
||||
// 添加第二层数据
|
||||
if (_this.pageData.listCurBusinessModel && _this.pageData.listCurBusinessModel.length > 0) {
|
||||
let list = []
|
||||
let list3 = []
|
||||
_this.pageData.listCurBusinessModel.map(m => {
|
||||
if (m.Revenue_Amount != 0) {
|
||||
if (m.Revenue_Amount && m.Revenue_Amount != 0) {
|
||||
let n = {
|
||||
name: m.Bussiness_Name,
|
||||
value: m.Revenue_Amount
|
||||
}
|
||||
list.push(n)
|
||||
list3.push(n)
|
||||
}
|
||||
})
|
||||
_this.ServiceRevenueData.push(list)
|
||||
if (list3.length > 0) {
|
||||
fullServiceRevenueData.push(list3)
|
||||
console.log('第二层数据准备:', list3)
|
||||
}
|
||||
}
|
||||
|
||||
// 一次性设置完整数据，确保响应式更新
|
||||
if (fullServiceRevenueData.length > 0) {
|
||||
_this.$set(_this, 'ServiceRevenueData', fullServiceRevenueData)
|
||||
console.log('operationFn设置完整数据:', fullServiceRevenueData)
|
||||
}
|
||||
|
||||
console.log('最终 ServiceRevenueData:', _this.ServiceRevenueData)
|
||||
|
||||
if (list.length > 0) {
|
||||
_this.showPie({
|
||||
id: 'sellCate',
|
||||
@ -670,7 +698,7 @@ export default {
|
||||
_this.pageData = res.Result_Data
|
||||
if (res.Result_Data.listBusinessModel) {
|
||||
let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel))
|
||||
console.log('list', list)
|
||||
console.log('获取到业务数据:', list)
|
||||
if (list.length > 0) {
|
||||
let all = {
|
||||
Bussiness_Name: '全部',
|
||||
@ -687,12 +715,18 @@ export default {
|
||||
}
|
||||
})
|
||||
_this.cateBrandList = [all, ...list]
|
||||
|
||||
// 确保在数据设置后调用 operationFn
|
||||
_this.$nextTick(() => {
|
||||
_this.operationFn()
|
||||
})
|
||||
return
|
||||
}
|
||||
return
|
||||
}
|
||||
// 没有数据时清空相关数据
|
||||
_this.cateBrandList = []
|
||||
_this.$set(_this, 'ServiceRevenueData', [])
|
||||
})
|
||||
},
|
||||
// 获取头部卡片 展示信息
|
||||
@ -727,8 +761,11 @@ export default {
|
||||
colors: colors1,
|
||||
});
|
||||
// 经营业态
|
||||
// this.ServiceRevenueData = []
|
||||
this.ServiceRevenueData = [busniessTradeFathPie, busniessTradePie]
|
||||
if (busniessTradeFathPie && busniessTradeFathPie.length > 0 && busniessTradePie && busniessTradePie.length > 0) {
|
||||
this.$set(this, 'ServiceRevenueData', [busniessTradeFathPie, busniessTradePie])
|
||||
} else {
|
||||
this.$set(this, 'ServiceRevenueData', [])
|
||||
}
|
||||
if (totalData.uploadCount !== totalData.totalUploadCount) {
|
||||
this.getUnUpLoadShops(theRequest)
|
||||
|
||||
@ -1476,7 +1513,6 @@ cover-view.page-title {
|
||||
padding: 8rpx 24rpx;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
@ -1507,4 +1543,370 @@ cover-view.page-title {
|
||||
background: linear-gradient(90deg, #ff9f43, #ffb84d);
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
}
|
||||
|
||||
/* 动画效果 - UniApp微信小程序兼容版本 */
|
||||
|
||||
/* 页面入场动画 */
|
||||
@keyframes pageEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(50rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.page-enter {
|
||||
animation: pageEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
/* 卡片入场动画 */
|
||||
@keyframes cardEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx) scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-enter {
|
||||
animation: cardEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 数据卡片动画 */
|
||||
@keyframes dataCardEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.data-card-enter {
|
||||
animation: dataCardEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 指标动画 */
|
||||
@keyframes metricEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(15rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.metric-enter:nth-child(1) {
|
||||
animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.metric-enter:nth-child(2) {
|
||||
animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.metric-enter:nth-child(3) {
|
||||
animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.metric-enter:nth-child(4) {
|
||||
animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Tab标签页动画 */
|
||||
@keyframes tabsEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-enter {
|
||||
animation: tabsEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes tabSlide {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-slide:nth-child(1) {
|
||||
animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tab-slide:nth-child(2) {
|
||||
animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tab-slide:nth-child(3) {
|
||||
animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Tab内容淡入动画 */
|
||||
@keyframes tabContentFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content-fade {
|
||||
animation: tabContentFade 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
/* 图表容器动画 */
|
||||
@keyframes chartContainerEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx) scale(0.98);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container-enter {
|
||||
animation: chartContainerEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 标题滑入动画 */
|
||||
@keyframes titleSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-30rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.title-slide-in {
|
||||
animation: titleSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 进度条区域动画 */
|
||||
@keyframes progressSectionEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-section-enter {
|
||||
animation: progressSectionEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 品牌列表动画 */
|
||||
@keyframes brandListEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(25rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-list-enter {
|
||||
animation: brandListEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 品牌卡片错列动画 */
|
||||
@keyframes brandCardStagger {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx) scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-card-stagger {
|
||||
animation: brandCardStagger 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 交互反馈动画 */
|
||||
.tab-slide:active,
|
||||
.brand-card-stagger:active {
|
||||
transform: scale(0.98);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* 图表加载状态 */
|
||||
.chart-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 300rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 品牌标签页动画 */
|
||||
@keyframes tabShopSlide {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(15rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-shop-slide {
|
||||
animation: tabShopSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 品牌标签错列动画 */
|
||||
@keyframes brandTabStagger {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-15rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-tab-stagger {
|
||||
animation: brandTabStagger 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 品牌卡片容器动画 */
|
||||
@keyframes brandCardsContainer {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-cards-container {
|
||||
animation: brandCardsContainer 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.3s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 品牌图标包装器动画 */
|
||||
@keyframes brandIconWrapper {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) rotate(-5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-icon-wrapper {
|
||||
animation: brandIconWrapper 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
animation-delay: inherit;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* 品牌卡片悬浮效果增强 */
|
||||
.brand-card-stagger:active .brand-icon-wrapper {
|
||||
transform: scale(0.9) rotate(2deg);
|
||||
}
|
||||
|
||||
.brand-card-stagger:active .shop-name {
|
||||
transform: translateY(2rpx);
|
||||
}
|
||||
|
||||
.brand-card-stagger:active .price-num {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 品牌标签活跃状态动画 */
|
||||
.brand-tab-stagger.active {
|
||||
animation: brandTabStagger 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
|
||||
tabActivePulse 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes tabActivePulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
<view class="tab-icon">🏪</view>
|
||||
<text class="tab-text">商超</text>
|
||||
</view>
|
||||
<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
|
||||
<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
|
||||
<view class="tab-icon">🍽️</view>
|
||||
<text class="tab-text">餐饮</text>
|
||||
</view>
|
||||
<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
|
||||
<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
|
||||
<view class="tab-icon">🍿</view>
|
||||
<text class="tab-text">小吃</text>
|
||||
</view>
|
||||
@ -85,7 +85,7 @@ export default {
|
||||
/* 现代化选项卡 */
|
||||
.ranking-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 6rpx;
|
||||
margin: 0 20rpx 24rpx;
|
||||
@ -105,12 +105,12 @@ export default {
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, #27B25F, #4CCC7F);
|
||||
box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3);
|
||||
background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
|
||||
transform: translateY(-2rpx);
|
||||
|
||||
.tab-text {
|
||||
color: #fff;
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -260,7 +260,7 @@ export default {
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12rpx;
|
||||
@ -338,7 +338,8 @@ export default {
|
||||
|
||||
/* 主题色支持 - 通过全局主题类控制 */
|
||||
:global(.province-theme-330200) .tab-item.active {
|
||||
background: linear-gradient(135deg, #1890FF, #69C0FF);
|
||||
background: linear-gradient(135deg, #1890FF, #69C0FF) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3) !important;
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #1890FF;
|
||||
@ -346,7 +347,8 @@ export default {
|
||||
}
|
||||
|
||||
:global(.province-theme-340000) .tab-item.active {
|
||||
background: linear-gradient(135deg, #748ED6, #91A7E3);
|
||||
background: linear-gradient(135deg, #748ED6, #91A7E3) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(116, 142, 214, 0.3) !important;
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #748ED6;
|
||||
@ -354,7 +356,8 @@ export default {
|
||||
}
|
||||
|
||||
:global(.province-theme-500000) .tab-item.active {
|
||||
background: linear-gradient(135deg, #FA541C, #FF7A45);
|
||||
background: linear-gradient(135deg, #FA541C, #FF7A45) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(250, 84, 28, 0.3) !important;
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #FA541C;
|
||||
@ -362,7 +365,8 @@ export default {
|
||||
}
|
||||
|
||||
:global(.province-theme-510000) .tab-item.active {
|
||||
background: linear-gradient(135deg, #FA8C16, #FFA940);
|
||||
background: linear-gradient(135deg, #FA8C16, #FFA940) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3) !important;
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #FA8C16;
|
||||
@ -370,7 +374,8 @@ export default {
|
||||
}
|
||||
|
||||
:global(.province-theme-520000) .tab-item.active {
|
||||
background: linear-gradient(135deg, #52C41A, #73D13D);
|
||||
background: linear-gradient(135deg, #52C41A, #73D13D) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3) !important;
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #52C41A;
|
||||
@ -378,7 +383,8 @@ export default {
|
||||
}
|
||||
|
||||
:global(.province-theme-530000) .tab-item.active {
|
||||
background: linear-gradient(135deg, #27B25F, #4CCC7F);
|
||||
background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #27B25F;
|
||||
@ -386,7 +392,8 @@ export default {
|
||||
}
|
||||
|
||||
:global(.province-theme-630000) .tab-item.active {
|
||||
background: linear-gradient(135deg, #13C2C2, #36CFC9);
|
||||
background: linear-gradient(135deg, #13C2C2, #36CFC9) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(19, 194, 194, 0.3) !important;
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #13C2C2;
|
||||
@ -394,7 +401,8 @@ export default {
|
||||
}
|
||||
|
||||
:global(.province-theme-734100) .tab-item.active {
|
||||
background: linear-gradient(135deg, #E91E63, #F06292);
|
||||
background: linear-gradient(135deg, #E91E63, #F06292) !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3) !important;
|
||||
|
||||
.stat-value.sales-amount {
|
||||
color: #E91E63;
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="analysis-cell" @tap="toggleShow" :class="{ 'active': item.show }" :style="activeCellStyleStr">
|
||||
<div class="shop-title" :class="'theme-' + provinceCode">
|
||||
<div class="analysis-cell cell-enter" @tap="toggleShow" :class="{ 'active': item.show }"
|
||||
:style="activeCellStyleStr">
|
||||
<div class="shop-title title-slide" :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">{{
|
||||
<span class="cell-price price-highlight" :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'>
|
||||
@ -14,11 +15,11 @@
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<p v-if="item.detail.length > 0" style="line-height: 1.2;">
|
||||
<p v-if="item.detail.length > 0" style="line-height: 1.2;" class="tags-container">
|
||||
<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="analysis-detail" v-if="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>
|
||||
@ -31,24 +32,23 @@
|
||||
</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;">{{
|
||||
<div class="detail-title" style="font-size: 24rpx;">日结校验：{{ unit.DESCRIPTION_DATE }}</div>
|
||||
<p><span class="detail-title" style="font-size: 24rpx;">{{ 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" style="font-size: 24rpx;">{{ unit.APPROVE_STAFF }}：</span><span
|
||||
style="font-size: 24rpx;">{{
|
||||
<div><span class="detail-title" style="font-size: 24rpx;">日结审核：{{ unit.APPROVE_DATE }}</span></div>
|
||||
<p><span class="detail-title" style="font-size: 24rpx;">{{ 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>
|
||||
<p class="detail-short-info" v-show="unit.FACTAMOUNT_SALE" style="font-size: 24rpx;"> 单品报表：<text
|
||||
class="uni-icon uni-icon-checkmarkempty" style="font-size: 24rpx;"></text></p>
|
||||
<p class="detail-short-info" v-show="unit.FACTAMOUNT_CIGARETTE" style="font-size: 24rpx;">香烟数据：<span
|
||||
class="uni-icon uni-icon-checkmarkempty" style="font-size: 24rpx;"></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;">长短款额：{{
|
||||
@ -128,7 +128,7 @@ export default {
|
||||
|
||||
// 动态样式字符串（小程序兼容）
|
||||
activeCellStyleStr() {
|
||||
if (!this.item.show) return ''
|
||||
if (!this.item || !this.item.show) return ''
|
||||
return `border: 2rpx solid ${this.themeColors.primary}; box-shadow: 0 4px 20px rgba(${this.hexToRgb(this.themeColors.primary)}, 0.15);`
|
||||
},
|
||||
|
||||
@ -376,4 +376,159 @@ export default {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 - listUnit组件 */
|
||||
|
||||
/* 单元格入场动画 */
|
||||
@keyframes cellEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx) scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-enter {
|
||||
animation: cellEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 标题滑入动画 */
|
||||
@keyframes titleSlide {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-15rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.title-slide {
|
||||
animation: titleSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 价格高亮动画 */
|
||||
@keyframes priceHighlight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.price-highlight {
|
||||
animation: priceHighlight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 标签容器动画 */
|
||||
@keyframes tagsContainer {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
animation: tagsContainer 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 标签弹跳动画 */
|
||||
@keyframes tagBounce {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10rpx) scale(0.8);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(2rpx) scale(1.05);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-bounce {
|
||||
animation: tagBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 详情展开动画 */
|
||||
@keyframes detailExpand {
|
||||
0% {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
transform: translateY(-20rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
max-height: 2000rpx;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.detail-expand {
|
||||
animation: detailExpand 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 详情单元淡入动画 */
|
||||
@keyframes unitFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(15rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.unit-fade-in {
|
||||
animation: unitFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 交互反馈动画 */
|
||||
.cell-enter:active {
|
||||
transform: scale(0.98);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
.tag-bounce:hover {
|
||||
transform: translateY(-2rpx) scale(1.02);
|
||||
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* 单元格活跃状态增强 */
|
||||
.analysis-cell.active {
|
||||
transform: translateY(-2rpx);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,25 +1,21 @@
|
||||
<template>
|
||||
<div :class="'province-theme-' + currentProvinceCode" v-if="showPage">
|
||||
<div class="page-body">
|
||||
<div class="page-body page-enter">
|
||||
|
||||
<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 ?
|
||||
<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">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount, 2) : '0.00' }}
|
||||
</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">
|
||||
<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'></shopCell>
|
||||
:i='i' :provinceCode='currentProvinceCode' class="shop-item-stagger"
|
||||
:style="'animation-delay: ' + (i * 0.1 + 0.8) + 's'" v-if="item"></shopCell>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -33,7 +29,9 @@ export default {
|
||||
return {
|
||||
showPage: false,
|
||||
|
||||
pageMsg: {},
|
||||
pageMsg: {
|
||||
ShopEndaccountList: [] // 初始化为空数组，确保响应式
|
||||
},
|
||||
currentProvinceCode: '', // 当前省份代码
|
||||
keyJson: {
|
||||
SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款
|
||||
@ -120,10 +118,18 @@ export default {
|
||||
return this.provinceTheme
|
||||
},
|
||||
toggleShow(i) {
|
||||
if (!this.pageMsg.ShopEndaccountList || !this.pageMsg.ShopEndaccountList[i]) {
|
||||
return
|
||||
}
|
||||
|
||||
let item = this.pageMsg.ShopEndaccountList[i]
|
||||
item.show = !item.show
|
||||
this.$forceUpdate()
|
||||
let currentItem = this.pageMsg.ShopEndaccountList[i]
|
||||
let newShowState = !currentItem.show
|
||||
|
||||
// 使用Vue.set确保响应式更新
|
||||
this.$set(this.pageMsg.ShopEndaccountList, i, {
|
||||
...currentItem,
|
||||
show: newShowState
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -148,12 +154,16 @@ export default {
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.Result_Code != 100) return
|
||||
res.Result_Data.ShopEndaccountList.map(n => {
|
||||
n.show = true
|
||||
n.detail = this.getDetail(n)
|
||||
|
||||
// 处理数据，确保响应式属性正确设置
|
||||
res.Result_Data.ShopEndaccountList.forEach((n, index) => {
|
||||
// 使用Vue.set确保响应式
|
||||
_this.$set(n, 'show', false)
|
||||
_this.$set(n, 'detail', _this.getDetail(n))
|
||||
})
|
||||
_this.pageMsg = res.Result_Data
|
||||
console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
|
||||
|
||||
// 设置页面数据
|
||||
_this.$set(_this, 'pageMsg', res.Result_Data)
|
||||
|
||||
_this.showPage = true
|
||||
})
|
||||
@ -169,13 +179,20 @@ export default {
|
||||
}).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.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.pageMsg = res.Result_Data
|
||||
console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
|
||||
|
||||
// 设置页面数据
|
||||
_this.$set(_this, 'pageMsg', res.Result_Data)
|
||||
|
||||
_this.showPage = true
|
||||
})
|
||||
},
|
||||
@ -318,11 +335,171 @@ export default {
|
||||
|
||||
.price-num {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user