dashboard.wxml
18.4 KB
<view class="page data-v-14f44c29"><view class="warpbox data-v-14f44c29"><view class="header-section data-v-14f44c29"><view class="page-title data-v-14f44c29"></view><view class="filter-box data-v-14f44c29"><picker mode="date" fields="month" value="{{selectedMonth}}" data-event-opts="{{[['change',[['onMonthChange',['$event']]]]]}}" bindchange="__e" class="data-v-14f44c29"><view class="date-picker-trigger data-v-14f44c29"><text class="date-text data-v-14f44c29">{{selectedMonthText}}</text><u-icon vue-id="469bc196-1" name="arrow-down" size="14" color="#666" class="data-v-14f44c29" bind:__l="__l"></u-icon></view></picker><block wx:if="{{showScreenshotBtn}}"><view data-event-opts="{{[['tap',[['saveScreenshot',['$event']]]]]}}" class="{{['screenshot-btn','data-v-14f44c29',(screenshotLoading)?'loading':'']}}" bindtap="__e"><u-icon vue-id="469bc196-2" name="photo" size="18" color="#409EFF" class="data-v-14f44c29" bind:__l="__l"></u-icon><text class="screenshot-text data-v-14f44c29">截图</text></view></block></view></view><view class="kpi-section data-v-14f44c29"><view class="glass-card billing-card data-v-14f44c29"><block wx:for="{{$root.l0}}" wx:for-item="kpi" wx:for-index="index" wx:key="index"><view class="billing-main data-v-14f44c29"><view class="stat-content data-v-14f44c29"><view class="label-row data-v-14f44c29"><view class="{{['stat-icon-small','data-v-14f44c29',kpi.$orig.type]}}"><u-icon vue-id="{{'469bc196-3-'+index}}" name="{{kpi.m0}}" size="{{20}}" color="#fff" class="data-v-14f44c29" bind:__l="__l"></u-icon></view><view class="card-label data-v-14f44c29">{{kpi.$orig.label}}</view></view><view class="billing-value data-v-14f44c29"><block wx:if="{{kpi.$orig.isMoney}}"><text class="currency data-v-14f44c29">￥</text></block><text class="value data-v-14f44c29">{{kpi.$orig.isMoney?kpi.g0:kpi.$orig.isPercent?kpi.$orig.value:kpi.$orig.value}}</text><block wx:if="{{kpi.$orig.isPercent}}"><text class="unit data-v-14f44c29">%</text></block><block wx:if="{{!kpi.$orig.isMoney&&!kpi.$orig.isPercent&&kpi.$orig.unit}}"><text class="unit data-v-14f44c29">{{kpi.$orig.unit}}</text></block></view></view></view></block><view class="billing-footer data-v-14f44c29"><block wx:for="{{$root.l1}}" wx:for-item="kpi" wx:for-index="index" wx:key="index"><view class="count-item data-v-14f44c29"><view class="{{['count-icon','data-v-14f44c29',kpi.$orig.type]}}"><u-icon vue-id="{{'469bc196-4-'+index}}" name="{{kpi.m1}}" size="{{20}}" color="#fff" class="data-v-14f44c29" bind:__l="__l"></u-icon></view><text class="count-text data-v-14f44c29"><text class="count-value data-v-14f44c29">{{kpi.$orig.value}}</text><text class="count-unit data-v-14f44c29">{{kpi.$orig.unit}}</text></text></view></block></view></view><view class="kpi-grid-bottom data-v-14f44c29"><block wx:for="{{$root.l2}}" wx:for-item="kpi" wx:for-index="index" wx:key="index"><view class="kpi-card data-v-14f44c29"><view class="kpi-header data-v-14f44c29"><view class="{{['kpi-icon-square','data-v-14f44c29',kpi.$orig.type]}}"><u-icon vue-id="{{'469bc196-5-'+index}}" name="{{kpi.m2}}" size="{{16}}" color="#fff" class="data-v-14f44c29" bind:__l="__l"></u-icon></view><text class="kpi-label data-v-14f44c29">{{kpi.$orig.label}}</text></view><view class="kpi-value-group data-v-14f44c29"><text class="value data-v-14f44c29"><block wx:if="{{kpi.$orig.isMoney}}"><text class="currency data-v-14f44c29">￥</text></block>{{kpi.$orig.isMoney?kpi.g1:kpi.$orig.isPercent?kpi.$orig.value:kpi.$orig.value}}</text><block wx:if="{{kpi.$orig.isPercent}}"><text class="unit data-v-14f44c29">%</text></block><block wx:if="{{!kpi.$orig.isMoney&&!kpi.$orig.isPercent&&kpi.$orig.unit}}"><text class="unit data-v-14f44c29">{{kpi.$orig.unit}}</text></block></view></view></block></view></view><block wx:if="{{memberStatistics.totalMembers>0}}"><view class="warpboxss member-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>会员资产全景</view></view><view class="member-grid data-v-14f44c29"><view data-event-opts="{{[['tap',[['openMemberDetailModal',['total']]]]]}}" class="member-stat-card blue-theme data-v-14f44c29" bindtap="__e"><view class="icon-circle data-v-14f44c29"><u-icon vue-id="469bc196-6" name="account" size="24" color="#409EFF" class="data-v-14f44c29" bind:__l="__l"></u-icon></view><view class="stat-info data-v-14f44c29"><view class="stat-label data-v-14f44c29">总会员数</view><view class="stat-value data-v-14f44c29">{{$root.m3}}</view></view></view><view data-event-opts="{{[['tap',[['openMemberDetailModal',['active']]]]]}}" class="member-stat-card green-theme data-v-14f44c29" bindtap="__e"><view class="icon-circle data-v-14f44c29"><u-icon vue-id="469bc196-7" name="checkmark-circle" size="24" color="#67C23A" class="data-v-14f44c29" bind:__l="__l"></u-icon></view><view class="stat-info data-v-14f44c29"><view class="stat-label data-v-14f44c29">活跃会员</view><view class="stat-value data-v-14f44c29">{{$root.m4}}</view></view></view><view data-event-opts="{{[['tap',[['openMemberDetailModal',['remaining']]]]]}}" class="member-stat-card orange-theme data-v-14f44c29" bindtap="__e"><view class="icon-circle data-v-14f44c29"><u-icon vue-id="469bc196-8" name="shopping-cart" size="24" color="#E6A23C" class="data-v-14f44c29" bind:__l="__l"></u-icon></view><view class="stat-info data-v-14f44c29"><view class="stat-label data-v-14f44c29">剩余权益</view><view class="stat-value mini data-v-14f44c29">{{"￥"+$root.m5}}</view></view></view><view data-event-opts="{{[['tap',[['openMemberDetailModal',['sleep']]]]]}}" class="member-stat-card red-theme data-v-14f44c29" bindtap="__e"><view class="icon-circle data-v-14f44c29"><u-icon vue-id="469bc196-9" name="info-circle" size="24" color="#F56C6C" class="data-v-14f44c29" bind:__l="__l"></u-icon></view><view class="stat-info data-v-14f44c29"><view class="stat-label data-v-14f44c29">沉睡会员</view><view class="stat-value data-v-14f44c29">{{$root.m6}}</view></view></view></view></view></block><block wx:if="{{$root.g2>0}}"><view class="warpboxss member-chart-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>会员结构洞察</view></view><view class="member-chart-container data-v-14f44c29"><view class="member-type-chart-wrapper data-v-14f44c29"><qiun-data-charts vue-id="469bc196-10" type="pie" opts="{{memberTypeChartOpts}}" chartData="{{memberTypeChartData}}" ontouch="{{true}}" inScrollView="{{true}}" pageScrollTop="{{pageScrollTop}}" class="data-v-14f44c29" bind:__l="__l"></qiun-data-charts></view><view class="member-type-legend data-v-14f44c29"><block wx:for="{{$root.l3}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="legend-item data-v-14f44c29"><view class="legend-dot data-v-14f44c29" style="{{'background-color:'+(item.m7)+';'}}"></view><text class="legend-name data-v-14f44c29">{{item.$orig.MemberType||'未知'}}</text><text class="legend-value data-v-14f44c29">{{item.m8+"人"}}</text></view></block></view></view></view></block><block wx:if="{{memberStatistics.beautyMembers>0||memberStatistics.medicalMembers>0||memberStatistics.techMembers>0}}"><view class="warpboxss member-category-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>会员价值分层</view></view><view class="member-category-container data-v-14f44c29"><view class="member-category-chart-wrapper data-v-14f44c29"><qiun-data-charts vue-id="469bc196-11" type="radar" opts="{{memberCategoryChartOpts}}" chartData="{{memberCategoryChartData}}" ontouch="{{true}}" inScrollView="{{true}}" pageScrollTop="{{pageScrollTop}}" class="data-v-14f44c29" bind:__l="__l"></qiun-data-charts></view><view class="member-category-legend data-v-14f44c29"><view class="legend-item data-v-14f44c29"><view class="legend-color data-v-14f44c29" style="background:#409EFF;"></view><view class="legend-text data-v-14f44c29"><view class="legend-name data-v-14f44c29">生美会员</view><view class="legend-value data-v-14f44c29">{{$root.m9+"人"}}</view></view></view><view class="legend-item data-v-14f44c29"><view class="legend-color data-v-14f44c29" style="background:#F56C6C;"></view><view class="legend-text data-v-14f44c29"><view class="legend-name data-v-14f44c29">医美会员</view><view class="legend-value data-v-14f44c29">{{$root.m10+"人"}}</view></view></view><view class="legend-item data-v-14f44c29"><view class="legend-color data-v-14f44c29" style="background:#67C23A;"></view><view class="legend-text data-v-14f44c29"><view class="legend-name data-v-14f44c29">科技部会员</view><view class="legend-value data-v-14f44c29">{{$root.m11+"人"}}</view></view></view></view></view></view></block><block wx:if="{{$root.g3>0}}"><view class="warpboxss trend-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>经营效能趋势</view><view class="trend-controls data-v-14f44c29"><view class="pill-switch data-v-14f44c29"><view data-event-opts="{{[['tap',[['switchTrendType',['month']]]]]}}" class="{{['pill-item','data-v-14f44c29',trendType==='month'?'active':'']}}" bindtap="__e">月</view><view data-event-opts="{{[['tap',[['switchTrendType',['day']]]]]}}" class="{{['pill-item','data-v-14f44c29',trendType==='day'?'active':'']}}" bindtap="__e">日</view><view data-event-opts="{{[['tap',[['switchTrendType',['week']]]]]}}" class="{{['pill-item','data-v-14f44c29',trendType==='week'?'active':'']}}" bindtap="__e">周</view></view></view></view><view class="chart-wrapper data-v-14f44c29"><qiun-data-charts vue-id="469bc196-12" type="line" opts="{{trendChartOpts}}" chartData="{{trendChartData}}" ontouch="{{true}}" inScrollView="{{true}}" pageScrollTop="{{pageScrollTop}}" background="rgba(255, 255, 255, 0.8)" class="data-v-14f44c29" bind:__l="__l"></qiun-data-charts></view><view class="trend-legend-modern data-v-14f44c29"><view class="legend-item data-v-14f44c29"><view class="dot revenue data-v-14f44c29"></view><text class="data-v-14f44c29">营收(成交额)</text></view><view class="legend-item data-v-14f44c29"><view class="dot consume data-v-14f44c29"></view><text class="data-v-14f44c29">消耗(服务产出)</text></view></view></view></block><block wx:if="{{$root.g4>0}}"><view class="warpboxss ranking-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>门店卓越榜</view></view><view class="rank-list-modern data-v-14f44c29"><block wx:for="{{$root.l4}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['tap',[['e0',['$event']]]]]}}" data-event-params="{{({item:item.$orig})}}" class="rank-item data-v-14f44c29" bindtap="__e"><view class="{{['rank-idx','data-v-14f44c29',index<3?'top-3':'']}}"><block wx:if="{{index===0}}"><image class="medal-icon data-v-14f44c29" src="/static/rank/no1.png"></image></block><block wx:else><block wx:if="{{index===1}}"><image class="medal-icon data-v-14f44c29" src="/static/rank/no2.png"></image></block><block wx:else><block wx:if="{{index===2}}"><image class="medal-icon data-v-14f44c29" src="/static/rank/no3.png"></image></block><block wx:else><text class="data-v-14f44c29">{{index+1}}</text></block></block></block></view><view class="rank-info data-v-14f44c29"><view class="info-main data-v-14f44c29"><text class="name data-v-14f44c29">{{item.$orig.StoreName||'未知门店'}}</text><text class="value data-v-14f44c29">{{"￥"+item.m12}}</text></view><view class="progress-bg data-v-14f44c29"><view class="progress-bar data-v-14f44c29" style="{{'width:'+(item.$orig.TotalPerformance/(storeRanking[0].TotalPerformance||1)*100+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g5>0}}"><view class="warpboxss coach-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>核心员效贡献矩阵</view><view class="type-tags data-v-14f44c29"><view data-event-opts="{{[['tap',[['switchCoachRankType',['billing']]]]]}}" class="{{['tag-item','data-v-14f44c29',coachRankType==='billing'?'active':'']}}" bindtap="__e">开单</view><view data-event-opts="{{[['tap',[['switchCoachRankType',['consume']]]]]}}" class="{{['tag-item','data-v-14f44c29',coachRankType==='consume'?'active':'']}}" bindtap="__e">消耗</view><view data-event-opts="{{[['tap',[['switchCoachRankType',['refund']]]]]}}" class="{{['tag-item','data-v-14f44c29',coachRankType==='refund'?'active':'']}}" bindtap="__e">退卡</view></view></view><view class="rank-list-modern data-v-14f44c29"><block wx:for="{{$root.l5}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="rank-item data-v-14f44c29"><view class="{{['rank-idx','data-v-14f44c29',index===0?'rank-1':index===1?'rank-2':index===2?'rank-3':'']}}"><text class="data-v-14f44c29">{{index+1}}</text></view><view class="rank-avatar data-v-14f44c29"><text class="data-v-14f44c29">{{item.$orig.HealthCoachName?item.g6:'无'}}</text></view><view class="rank-info data-v-14f44c29"><view class="info-main data-v-14f44c29"><text class="name data-v-14f44c29">{{item.$orig.HealthCoachName||'未知'}}</text><text class="value data-v-14f44c29">{{"￥"+item.m13}}</text></view><view class="progress-bg data-v-14f44c29"><view class="progress-bar green data-v-14f44c29" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g7>0}}"><view class="warpboxss gold-triangle-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>协同作战榜</view></view><view class="rank-list-modern data-v-14f44c29"><block wx:for="{{$root.l6}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="rank-item data-v-14f44c29"><view class="{{['rank-idx','data-v-14f44c29',index===0?'rank-1':index===1?'rank-2':index===2?'rank-3':'']}}"><text class="data-v-14f44c29">{{index+1}}</text></view><view class="rank-info data-v-14f44c29"><view class="info-main data-v-14f44c29"><text class="name data-v-14f44c29">{{item.$orig.GoldTriangleName||'未知'}}</text><text class="value orange-value data-v-14f44c29">{{"￥"+item.m14}}</text></view><view class="progress-bg data-v-14f44c29"><view class="progress-bar orange data-v-14f44c29" style="{{'width:'+(item.$orig.TotalPerformance/(goldTriangleRankingTop10[0].TotalPerformance||1)*100+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g8>0}}"><view class="warpboxss visit-frequency-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>客户活跃度分析</view></view><view class="chart-wrapper data-v-14f44c29"><qiun-data-charts vue-id="469bc196-13" type="column" opts="{{visitFrequencyChartOpts}}" chartData="{{visitFrequencyChartData}}" ontouch="{{true}}" inScrollView="{{true}}" pageScrollTop="{{pageScrollTop}}" class="data-v-14f44c29" bind:__l="__l"></qiun-data-charts></view></view></block><block wx:if="{{$root.g9>0}}"><view class="warpboxss item-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>热门服务品项</view></view><view class="item-grid data-v-14f44c29"><block wx:for="{{$root.l7}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="item-card data-v-14f44c29"><view class="{{['item-rank-badge','data-v-14f44c29','rank-'+(index+1)]}}">{{index+1}}</view><view class="item-name data-v-14f44c29">{{item.$orig.ItemName||'未知品项'}}</view><view class="item-val data-v-14f44c29">{{"￥"+item.m15}}</view><view class="item-process data-v-14f44c29"><view class="bar data-v-14f44c29" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></block></view></view></block><block wx:if="{{$root.g10>0}}"><view class="warpboxss item-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>热销产品品项</view></view><view class="item-grid data-v-14f44c29"><block wx:for="{{$root.l8}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="item-card data-v-14f44c29"><view class="{{['item-rank-badge','data-v-14f44c29','rank-'+(index+1)]}}">{{index+1}}</view><view class="item-name data-v-14f44c29">{{item.$orig.ItemName||'未知品项'}}</view><view class="item-val data-v-14f44c29">{{"￥"+item.m16}}</view><view class="item-process data-v-14f44c29"><view class="bar blue data-v-14f44c29" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></block></view></view></block><block wx:if="{{tkStatisticsData}}"><view class="warpboxss funnel-section data-v-14f44c29"><view class="warpboxs-small-title data-v-14f44c29"><view class="data-v-14f44c29"><text class="warpboxs-small-title-line data-v-14f44c29"></text>客户获取转化链</view></view><view class="chart-wrapper data-v-14f44c29"><qiun-data-charts vue-id="469bc196-14" type="funnel" opts="{{funnelChartOpts}}" chartData="{{funnelChartData}}" ontouch="{{true}}" inScrollView="{{true}}" pageScrollTop="{{pageScrollTop}}" class="data-v-14f44c29" bind:__l="__l"></qiun-data-charts></view><view class="funnel-stats data-v-14f44c29"><view class="stat-mini data-v-14f44c29">邀约率: <text class="stat-value data-v-14f44c29">{{$root.m17+"%"}}</text></view><view class="stat-mini data-v-14f44c29">到店率: <text class="stat-value data-v-14f44c29">{{$root.m18+"%"}}</text></view></view></view></block><view style="height:150rpx;" class="data-v-14f44c29"></view></view><u-popup vue-id="469bc196-15" show="{{showMemberDetailModal}}" mode="center" border-radius="20" closeable="{{true}}" data-event-opts="{{[['^close',[['closeMemberDetailModal']]]]}}" bind:close="__e" class="data-v-14f44c29" bind:__l="__l" vue-slots="{{['default']}}"><view class="member-detail-modal data-v-14f44c29"><view class="modal-title data-v-14f44c29">{{detailModalTitle}}</view><view class="modal-content data-v-14f44c29"><block wx:for="{{detailModalData}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="detail-item data-v-14f44c29"><view class="detail-label data-v-14f44c29">{{item.label}}</view><view class="detail-value data-v-14f44c29">{{item.value}}</view></view></block></view></view></u-popup></view>