订单统计

my/jgOrder/BtnGroup.vue

@@ -0,0 +1,72 @@
+<template>
+	<view class="btn-group">
+		<button class="btn" :class="currentVal === item.value ? 'active' : ''" v-for="item in options" :key="item.value" @click="handleClick(item.value)">{{ item.label }}</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'BtnGroup',
+		props: {
+			value: {
+				type: Number,
+				default: 1,
+			},
+			defaultVal: {
+				type: Number,
+				default: 1,
+			},
+			options: {
+				type: Array,
+				default: () =>  [
+					{ label: '日', value: 1 },
+					{ label: '周', value: 2 },
+					{ label: '月', value: 3 },
+				]
+			},
+		},
+		data() {
+			return {
+				currentVal: 1,
+			}
+		},
+		watch: {
+			defaultVal: {
+				handler(newVal) {
+					this.currentVal = newVal
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			handleClick(val) {
+				this.currentVal = val
+				this.$emit('input', val)
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.btn-group {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 999999;
+		display: flex;
+	}
+	 
+	.btn {
+	  padding: 8rpx 16rpx;
+	  gap: 0rpx 16rpx;
+	  font-size: 24rpx;
+	  line-height: 32rpx;
+	  background-color: #F5F5F5;
+	  color: #333333;
+	  margin-left: 16rpx;
+	}
+	.btn.active {
+		background-color: #00C18A;
+		color: white;
+	}
+</style>

my/jgOrder/DataItem.vue

@@ -0,0 +1,60 @@
+<template>
+	<view class="data-item" :style="{ backgroundColor: dataItem.bg, border: '1rpx solid ' + dataItem.bg }">
+		<view class="data-item-title">{{ dataItem.title }}</view>
+		<view class="data-item-value" :style="{ color: dataItem.valueColor }">{{ dataItem.value }}</view>
+		<view class="data-item-desc">
+			<image v-if="globalImages" :src="globalImages + 'imgs/' + dataItem.status === 'up' ? 'haoyou' : 'shuangyue' + '.png'" style="width: 21rpx;height: 25rpx;"></image>
+			<text style="margin: 0 8rpx;">{{ dataItem.fluctuate }}</text>
+			<text>较昨日</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			dataItem: {
+				type: Object,
+				default: () => {
+					return { title: '订单总量', value: '1248', status: 'up', fluctuate: '12.5%', bg: '#E8FBF6', valueColor: '#00C18A' }
+				}
+			},
+			globalImages: {
+				type: String,
+				require: true
+			},
+		},
+		data() {
+			return {}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.data-item {
+		width: 100%;
+		height: 100%;
+		padding: 32rpx;
+		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
+		border-radius: 16rpx;
+		box-sizing: border-box;
+		
+		.data-item-title {
+			font-size: 28rpx;
+			line-height: 40rpx;
+			color: #333333;
+			font-weight: 500;
+		}
+		.data-item-value {
+			margin: 8rpx 0;
+			font-weight: 700;
+			font-size: 48rpx;
+			line-height: 64rpx;
+		}
+		.data-item-desc {
+			font-size: 24rpx;
+			line-height: 32rpx;
+			color: #333333;
+		}
+	}
+</style>

my/jgOrder/statistics.vue

@@ -0,0 +1,374 @@
+<template>
+	<view class="order-statistics">
+		<view class="select-date">
+			<u-input
+				style="flex: 1;"
+				v-model="timeRange"
+				type="select"
+				:selectOpen="show"
+				border
+				placeholder="选择时间范围"
+				@click="show = true"
+				height="76rpx"
+			/>
+			<view style="margin-left: 16rpx;"><u-icon name="download" size="48"></u-icon></view>
+			<u-calendar
+				v-model="show"
+				mode="range"
+				@change="bindDateChange"
+				startText="开始日期"
+				endText="结束日期"
+				active-bg-color="#00C18A"
+				active-color="#FFFFFF"
+				range-bg-color="#00C18A"
+				rangeColor="#FFFFFF"
+				zIndex="9999999"
+			>
+			</u-calendar>
+		</view>
+		<!-- 四个框框(统计数据) -->
+		<view class="overview-data-box">
+			<view class="data-item" v-for="(item, index) in overviewData" :key="index">
+				<data-item :dataItem="item" :globalImages="globalImages"/>
+			</view>
+		</view>
+		
+		<u-card v-show="!show" padding="32" full :showHead="false">
+			<view slot="body" style="width: 100%;height: 400rpx;position: relative;">
+				<BtnGroup v-model="orderSelect" :defaultVal="2" :options="orderOptions"></BtnGroup>
+				<uni-ec-canvas class="uni-ec-canvas" id="order-revenue" canvas-id="order-revenue-chart" :ec="ec1" ref="canvas1"></uni-ec-canvas>
+			</view>
+		</u-card>
+		<view></view>
+		<u-card v-show="!show" padding="32" full :showHead="false">
+			<view slot="body" style="width: 100%;height: 400rpx;position: relative;">
+				<BtnGroup v-model="compareSelect" :defaultVal="2" :options="compareOptions"></BtnGroup>
+				<uni-ec-canvas class="uni-ec-canvas" id="data-compare" canvas-id="data-compare-chart" :ec="ec2" ref="canvas2"></uni-ec-canvas>
+			</view>
+		</u-card>
+	</view>
+</template>
+
+<script>
+	import DataItem from './DataItem.vue'
+	import BtnGroup from './BtnGroup.vue'
+	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
+	import * as echarts from '@/components/uni-ec-canvas/echarts.js'
+	import { waitForGlobalImages } from '@/utils/globalImageLoader'
+	
+	export default {
+		components: { DataItem, BtnGroup, uniEcCanvas },
+		data() {
+			return {
+				globalImages: null,
+				// 表示选中的日期，格式为"YYYY-MM-DD"
+				timeRange: null,
+				show: false,
+				overviewData: [
+					{ title: '订单总量', value: '1248', status: 'up', fluctuate: '12.5%', bg: '#E8FBF6', valueColor: '#00C18A' },
+					{ title: '总收入', value: '￥8642', status: 'up', fluctuate: '8.3%', bg: '#FCF6EC', valueColor: '#E6A23C' },
+					{ title: '完成率', value: '98.7%', status: 'up', fluctuate: '1.2%', bg: '#ECF5FF', valueColor: '#409EFF' },
+					{ title: '平均评分', value: '4.9', status: 'down', fluctuate: '0.1', bg: '#FFE9E9', valueColor: '#F56C6C' },
+				],
+				ec1: {
+					option: {},
+				},
+				ec2: {
+					option: {},
+				},
+				a: '',
+				orderSelect: null,
+				orderOptions: [
+					{ label: '日', value: 1 },
+					{ label: '周', value: 2 },
+					{ label: '月', value: 3 },
+				],
+				compareSelect: null,
+				compareOptions: [
+					{ label: '环比', value: 1 },
+					{ label: '同比', value: 2 },
+				],
+			}
+		},
+		onLoad(e) {
+			waitForGlobalImages().then((path) => {
+				this.globalImages = path
+			})
+			setTimeout(() => {
+				this.$nextTick(() => {
+					this.$refs.canvas1.init(this.initChart1)
+					this.$refs.canvas2.init(this.initChart2)
+				})
+			}, 20)
+		},
+		watch: {
+			orderSelect(newVal) {
+				if(newVal) {
+					this.$refs.canvas1.init(this.initChart1)
+				}
+			},
+			compareSelect(newVal) {
+				if(newVal) {
+					this.$refs.canvas2.init(this.initChart2)
+				}
+			},
+		},
+		methods: {
+			// { startYear, startMonth, startDay, startDate, startWeek, endYear, endMonth, endDay, endDate, endWeek }
+			bindDateChange(event) {
+				this.timeRange = event.startDate + ' - ' + event.endDate
+			},
+			initChart1(canvas, width, height, canvasDpr) {
+				let chart = echarts.init(canvas, null, {
+					width: width,
+					height: height,
+					devicePixelRatio: canvasDpr
+				})
+				
+				canvas.setChart(chart)
+				let option = {
+					title: {
+					    text: '订单与收入趋势',
+					    left: 0,
+					    top: 0,
+					    textStyle: {
+							fontSize: 14
+					    },
+					},
+					grid: {
+						top: '36%',
+						left: '5%',
+						right: '0%',
+						bottom: '20%',
+						containLabel: true,
+					},
+					legend: {
+						bottom: 0,
+						itemGap: 20,
+						data: ['订单量', '收入'],
+					},
+					xAxis: {
+						type: 'category',
+						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+						boundaryGap: ['20%', '20%'],
+						axisTick: {
+							show: false,
+						},
+						splitLine: {
+						    show: false,
+						},
+						axisLine: {
+						    lineStyle: {
+						        color: '#E4E7ED',
+						    },
+						},
+						axisLabel: {
+						    color: '#333333',
+						}
+					},
+					yAxis: [
+						{
+							type: 'value',
+							name: '订单量',
+							nameGap: 24,
+							nameLocation: 'end',
+							nameTextStyle: {
+								align: 'right',
+								padding: [0, 10, 0, 0],
+								color: '#333333',
+							},
+							boundaryGap: ['10%', '10%'],
+							axisTick: {
+								show: false,
+							},
+							axisLine: {
+								show: false,
+							},
+							splitLine: {
+							    lineStyle: {
+									color: '#E4E7ED',
+							    },
+							},
+							axisLabel: {
+							    color: '#333333',
+							},
+							splitNumber: 3,
+						},
+						{
+							type: 'value',
+							name: '收入',
+							nameGap: 24,
+							nameLocation: 'end',
+							nameTextStyle: {
+								align: 'left',
+								padding: [0, 0, 0, 20],
+								color: '#333333',
+							},
+							axisLabel: {
+								formatter: '￥ {value}',
+								color: '#333333',
+							},
+							boundaryGap: ['10%', '10%'],
+							axisTick: {
+								show: false,
+							},
+							axisLine: {
+								show: false,
+							},
+							splitLine: {
+							    lineStyle: {
+									color: '#E4E7ED',
+							    },
+							},
+							splitNumber: 3,
+						},
+					],
+					series: [
+						{
+							name: '订单量',
+							data: [120, 200, 150, 80, 70, 110, 130],
+							type: 'bar',
+							yAxisIndex: 0,
+							itemStyle: {
+								color: '#E8FBF6',
+								borderRadius: [5, 5, 0, 0]
+							},
+							barWidth: 10,
+						},
+						{
+							name: '收入',
+							data: [120, 200, 150, 80, 70, 110, 130],
+							type: 'line',
+							yAxisIndex: 1,
+							itemStyle: {
+								color: '#00C18A',
+							},
+							// symbolSize: 8,
+						}
+					]
+				}
+				chart.setOption(option)
+				return chart
+			},
+			initChart2(canvas, width, height, canvasDpr) {
+				let chart = echarts.init(canvas, null, {
+					width: width,
+					height: height,
+					devicePixelRatio: canvasDpr
+				})
+				
+				canvas.setChart(chart)
+				let option = {
+					title: {
+					    text: '数据对比',
+					    left: 0,
+					    top: 0,
+					    textStyle: {
+							fontSize: 14
+					    },
+					},
+					grid: {
+						top: '36%',
+						left: '5%',
+						right: '0%',
+						bottom: '20%',
+						containLabel: true,
+					},
+					legend: {
+						bottom: 0,
+						itemGap: 20,
+						data: ['本周', '上周'],
+						icon: 'roundRect',
+					},
+					xAxis: {
+						type: 'category',
+						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+						boundaryGap: [50, 50],
+						axisTick: {
+							show: false,
+						},
+						splitLine: {
+						    show: false,
+						}
+					},
+					yAxis: {
+						type: 'value',
+						name: '订单量',
+						nameGap: 30,
+						nameLocation: 'end',
+						nameTextStyle: {
+							align: 'right',
+							padding: [0, 10, 0, 0]
+						},
+						boundaryGap: ['10%', '10%'],
+						splitNumber: 4,
+						axisTick: {
+							show: false,
+						},
+						axisLine: {
+							show: false,
+						},
+						splitLine: {
+						    lineStyle: {
+								color: '#E4E7ED',
+						    },
+						},
+					},
+					series: [
+						{
+							name: '本周',
+							data: [120, 200, 150, 80, 70, 110, 130],
+							type: 'bar',
+							itemStyle: {
+								color: '#F56C6C',
+								borderRadius: [5, 5, 0, 0]
+							},
+							barWidth: 10,
+						},
+						{
+							name: '上周',
+							data: [110, 190, 130, 60, 50, 90, 110],
+							type: 'bar',
+							itemStyle: {
+								color: '#00C18A',
+								borderRadius: [5, 5, 0, 0]
+							},
+							barWidth: 10,
+						}
+					]
+				}
+				chart.setOption(option)
+				return chart
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.order-statistics {
+		width: 100%;
+		position: relative;
+		padding: 16rpx 32rpx;
+		box-sizing: border-box;
+		
+		.select-date {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 16rpx;
+		}
+		
+		.overview-data-box {
+			margin-top: 24rpx;
+			display: flex;
+			flex-wrap: wrap;
+			gap: 24rpx; /* 控制间距 */
+			width: 100%;
+			
+			.data-item {
+			    flex: 1 1 calc(50% - 24rpx);
+				position: relative;
+			}
+		}
+	}
+</style>

pages.json

@@ -392,6 +392,12 @@
 				"style": {
 					"navigationBarTitleText": "会员开通协议"
 				}
+			},
+			{
+				"path": "jgOrder/statistics",
+				"style": {
+					"navigationBarTitleText": "订单统计"
+				}
 			}
 		]
 	}],

pages/riderMy/index.vue

@@ -90,8 +90,8 @@
 					<image v-if="globalImages" :src="globalImages + 'imgs/qianbao.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
 					<view class="text-sm">钱包</view>
 				</view>
-				<view class="text-center margin-tb-sm"  style="width: 20%;" @click="navgo('/pages/my/invitationUser')">
-					<image v-if="globalImages" :src="globalImages + 'imgs//tongji.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
+				<view class="text-center margin-tb-sm"  style="width: 20%;" @click="navgo('/my/jgOrder/statistics')">
+					<image v-if="globalImages" :src="globalImages + 'imgs/tongji.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
 					<view class="text-sm">订单统计</view>
 					<!-- <view class="weinumber" v-if="order&&order.jxzOrders">{{order.jxzOrders}}</view> -->
 				</view>