huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面

Browse Source
This commit is contained in:
huangzhenbao
2026-02-04 09:14:37 +08:00
parent 3476c006e6
commit df642813c3
16 changed files with 3376 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
pages/mall/admin/marketing/integral/statistic.uvue
View File

@@ -48,41 +48,11 @@
<view class="chart-header">
<text class="chart-title">积分使用趋势</text>
<view class="chart-legend">
<view class="legend-item">
<view class="l-dot bg-blue-line"></view>
<text class="l-txt">积分积累</text>
</view>
<view class="legend-item">
<view class="l-dot bg-green-line"></view>
<text class="l-txt">积分消耗</text>
</view>
<text class="down-ic">📥</text>
</view>
</view>
<!-- Mock 线图 -->
<view class="line-chart-box">
<view class="y-labels">
<text class="y-txt">3,500,000</text>
<text class="y-txt">3,000,000</text>
<text class="y-txt">2,500,000</text>
<text class="y-txt">2,000,000</text>
<text class="y-txt">1,500,000</text>
<text class="y-txt">1,000,000</text>
<text class="y-txt">500,000</text>
<text class="y-txt">0</text>
</view>
<view class="chart-area">
<view class="chart-grid">
<view v-for="i in 7" :key="i" class="grid-line"></view>
</view>
<!-- 线条绘制 (简单 Mock) -->
<view class="line-svg-mock">
<view class="trend-path"></view>
</view>
<view class="x-labels">
<text class="x-txt" v-for="date in dates" :key="date">{{ date }}</text>
</view>
</view>
<view class="chart-body">
<AnalyticsMultiLineChart :xLabels="dates" :series="trendSeries" :height="350" />
</view>
</view>
@@ -99,19 +69,8 @@
<view class="analysis-content">
<!-- 饼图样式 -->
<view v-if="sourceStyle === 'pie'" class="pie-layout anim-fade">
<view class="pie-chart-wrap">
<view class="pie-circle"></view>
<view class="pie-label-line">
<text class="pl-txt">后台赠送</text>
</view>
</view>
<view class="pie-legend-list">
<view v-for="item in sourceData" :key="item.label" class="p-leg-item">
<view class="p-dot" :style="{backgroundColor: item.color}"></view>
<text class="p-txt">{{ item.label }}</text>
</view>
</view>
<view v-if="sourceStyle === 'pie'" class="pie-layout-new anim-fade">
<AnalyticsPieChart :items="sourceData" :height="300" />
</view>
<!-- 列表样式 -->
@@ -149,19 +108,8 @@
<view class="analysis-content">
<!-- 饼图样式 -->
<view v-if="consumeStyle === 'pie'" class="pie-layout anim-fade">
<view class="pie-chart-wrap consume-pie">
<view class="pie-circle-c"></view>
<view class="pie-label-line-c">
<text class="pl-txt">订单抵扣</text>
</view>
</view>
<view class="pie-legend-list">
<view v-for="item in consumeData" :key="item.label" class="p-leg-item">
<view class="p-dot" :style="{backgroundColor: item.color}"></view>
<text class="p-txt">{{ item.label }}</text>
</view>
</view>
<view v-if="consumeStyle === 'pie'" class="pie-layout-new anim-fade">
<AnalyticsPieChart :items="consumeData" :height="300" />
</view>
<!-- 列表样式 -->
@@ -194,9 +142,24 @@
<script setup lang="uts">
import { ref } from 'vue'
import AnalyticsPieChart from '@/components/analytics/AnalyticsPieChart.uvue'
import AnalyticsMultiLineChart from '@/components/analytics/AnalyticsMultiLineChart.uvue'
const dates = ['01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02', '02-03']
const trendSeries = [
{
name: '积分积累',
data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191],
color: '#409eff'
},
{
name: '积分消耗',
data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132],
color: '#19be6b'
}
]
const sourceStyle = ref('pie')
const consumeStyle = ref('pie')
@@ -309,67 +272,12 @@ const toggleConsumeStyle = () => {
}
.chart-title { font-size: 16px; font-weight: bold; color: #333; }
.chart-legend { display: flex; flex-direction: row; align-items: center; gap: 20px; }
.legend-item { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.l-dot { width: 12px; height: 12px; border-radius: 6px; }
.bg-blue-line { background-color: #409eff; }
.bg-green-line { background-color: #19be6b; }
.l-txt { font-size: 12px; color: #666; }
.down-ic { font-size: 18px; color: #999; cursor: pointer; }
.line-chart-box {
display: flex;
flex-direction: row;
height: 400px;
}
.y-labels {
width: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 30px;
}
.y-txt { font-size: 12px; color: #999; text-align: right; padding-right: 10px; }
.chart-area {
flex: 1;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
position: relative;
}
.chart-grid {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.grid-line { height: 1px; background-color: #f5f5f5; width: 100%; }
.line-svg-mock {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden;
}
/* 趋势线条 Mock：用一个带有波浪背景的视图模拟，实际项目中应使用 Chart 库 */
.trend-path {
position: absolute;
.chart-body {
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 40%, transparent 10%, #409eff 10.5%, #409eff 11%, transparent 11.5%);
background-size: 40px 100%;
opacity: 0.1; /* 仅作为占位示意 */
}
.x-labels {
position: absolute;
bottom: -30px;
left: 0; right: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.x-txt { font-size: 10px; color: #999; transform: rotate(-45deg); white-space: nowrap; }
/* 底部两个分析 */
.bottom-analysis {
display: flex;
@@ -401,52 +309,12 @@ const toggleConsumeStyle = () => {
}
/* 饼图样式布局 */
.pie-layout {
.pie-layout-new {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-top: 20px;
}
.pie-chart-wrap {
width: 240px;
height: 240px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
}
.pie-circle {
width: 180px;
height: 180px;
border-radius: 90px;
background-color: #778899; /* 主体颜色 */
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
.pie-circle-c {
width: 180px;
height: 180px;
border-radius: 90px;
background: conic-gradient(#5AB1EF 0 95%, #2EC7C9 95% 100%);
}
.pie-label-line {
position: absolute;
right: 0;
top: 50%;
border-top: 1px solid #999;
width: 40px;
padding-top: 5px;
}
.pl-txt { font-size: 12px; color: #666; white-space: nowrap; }
.pie-legend-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.p-leg-item { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.p-dot { width: 10px; height: 10px; border-radius: 2px; }
.p-txt { font-size: 13px; color: #666; }
/* 列表样式布局 */
.list-layout { display: flex; flex-direction: column; }