shunfengche-sfd/my/jgOrder/revenue.vue

<template>
	<view class="revenue-statistics">
		<view><date-selector ref="dateSelector" @dateChange="handleDateChange"></date-selector></view>
		
		<u-card padding="32" full :showHead="false" borderRadius="30">
			<view slot="body" >
				<view style="font-size: 28rpx;line-height: 40rpx;color: #333333;">总收入</view>
				<view style="display: flex;color: #00C18A;justify-content: space-between;align-items: flex-end;margin-top: 8rpx;">
					<view style="font-size: 60rpx;line-height: 72rpx;font-weight: 700;text-indent: -10rpx;">￥{{ formatNumberWithCommas(top1Data.total) }}</view>
					<view style="font-size: 28rpx;line-height: 40rpx;font-weight: 500;">{{ top1Data.ratio }}%</view>
				</view>
				<view style="margin-top: 24rpx;color: #333333;font-size: 28rpx;display: flex;justify-content: space-between;">
					<view>
						<view>订单数量</view>
						<view style="margin-top: 8rpx;">{{ top1Data.orderCount }}单</view>
					</view>
					<view style="text-align: right;">
						<view>在线时长</view>
						<view style="margin-top: 8rpx;font-weight: 600;">{{ top1Data.online }}小时</view>
					</view>
				</view>
			</view>
		</u-card>
		
		<u-card padding="32" full :showHead="false" borderRadius="30">
			<view slot="body" >
				<view class="chart">
					<uni-ec-canvas id="revenue" canvas-id="revenue" :ec="ec" ref="canvas"></uni-ec-canvas>
				</view>
				<view class="chart-bottom">
					<view class="chart-bottom-item" v-for="(value, key) in revenueData" :key="key">
						<view style="display: flex;align-items: center;">
							<view :style="{ backgroundColor: colors[key] }" style="height: 24rpx;width: 24rpx;border-radius: 50%;"></view>
							<view style="margin-left: 16rpx;font-size: 28rpx;line-height: 40rpx;color: #333333;">{{ value.title }}</view>
						</view>
						<view style="display: flex;">
							<view style="font-weight: 700;font-size: 28rpx;line-height: 40rpx;">￥{{ formatNumberWithCommas(value.total) }}</view>
							<view style="margin-left: 8rpx;font-size: 24rpx;line-height: 40rpx;color: #666666;">{{ value.ratio }}%</view>
						</view>
					</view>
				</view>
			</view>
		</u-card>
		
		<u-card padding="32" full borderRadius="30" :bodyStyle="{ padding: '0 32rpx' }">
			<view slot="head" style="display: flex;justify-content: space-between;align-items: center;position: relative;">
				<view style="font-size: 28rpx;line-height: 48rpx;color: #333333;">每日明细</view>
				<view>
					<btn-group v-model="currentBtn" :defaultVal="1" :options="selectOption"></btn-group>
				</view>
			</view>
			<view slot="body" >
				<detail-item v-for="(item, index) in detailDataList" :key="index"></detail-item>
				<u-empty v-if="!(detailDataList.length) && loadmore =='nomore'" mode="list" height="280" marginTop="50"></u-empty>
				<u-loadmore :status="loadmore" v-if="detailDataList.length" line icon-color="#00C18A" marginTop="20"/>
			</view>
		</u-card>
	</view>
</template>
<!-- 收入统计 -->
<script>
	import DateSelector from './DateSelector.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 DetailItem from './DetailItem.vue'
	
	export default {
		name: 'Revenue',
		components: { DateSelector, BtnGroup, uniEcCanvas, DetailItem },
		data() {
			return {
				top1Data: {
					total: 2856.50,
					ratio: 12.5,
					orderCount: 87,
					online: 32.5,
				},
				colors: ['#00C18A', '#F56C6C', '#E6A23C'],
				ec: {
					option: {},
				},
				revenueData: {
					0: { title: '基础车费', total: 2156.50, ratio: 75.5 },
					1: { title: '高峰奖励', total: 420.00, ratio: 14.7 },
					2: { title: '活动奖励', total: 280.00, ratio: 9.8 }
				},
				currentBtn: null,
				selectOption: [
					{ label: '全 部', value: 1 },
					{ label: '已完成', value: 2 },
					{ label: '已取消', value: 3 },
				],
				current: 1, //当前页数
				pageSize: 10, //页数大小
				totalPage: 3, //总页数
				loadmore: 'loadmore',
				detailDataList: [1,2],
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.$refs.dateSelector.initDate(new Date())
			})
		},
		watch: {
			currentBtn: {
				handler(newVal) {
					this.fetchDetailData()
				},
			},
		},
		onReachBottom() {
			// 如果当前页数大于等于总页数，状态修改为没有更多了，不再继续往下执行代码
			if(this.current >= this.totalPage) {
				this.loadmore = 'nomore'
				return
			}
			this.loadmore = 'loading'//状态改为加载中
			this.current = ++ this.current//页面新增一页
			this.fetchDetailData()//修改页数后，重新获取数据
		},
		methods: {
			handleDateChange(dates) {
				console.log('发送请求, 获取数据 ... 参数 => ', dates)
				this.$nextTick(() => {
					this.$refs.canvas.init(this.initChart)
				})
				this.fetchDetailData()
			},
			initChart(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,
							fontWeight: 500,
					    },
					},
					grid: {
						top: '20%',
						left: '2%',
						right: '0%',
						bottom: '0%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: ['基础车费', '高峰奖励', '活动奖励'],
						boundaryGap: [50, 50],
						axisTick: {
							show: false,
						},
						splitLine: {
						    show: false,
						},
						axisLine: {
						    lineStyle: {
						        color: '#E4E7ED',
						    },
						},
						axisLabel: {
						    color: '#333333',
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: ['10%', '10%'],
						splitNumber: 4,
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						splitLine: {
						    lineStyle: {
								color: '#E4E7ED',
						    },
						},
					},
					series: [
						{
							data: [2500, 800, 600],
							type: 'bar',
							barWidth: 30,
							itemStyle: {
								borderRadius: [10, 10, 0, 0],
								color: param => this.colors[param.dataIndex]
							},
						},
					]
				}
				chart.setOption(option)
				return chart
			},
			formatNumberWithCommas(number) {
			  return new Intl.NumberFormat().format(number)
			},
			fetchDetailData() {
				console.log('获取每日明细数据', this.current, this.pageSize)
				// this.$api.getList(this.current, this.pageSize, res => {
				// 	let data = res.data;
				// 	this.detailDataList.push(...data.list);//在列表后面新增新获取的数据
				// 	this.totalPage = data.total;//获取数据总页数
				// })
				const timeout = setTimeout(() => {
					this.loadmore = 'loadmore'
					clearTimeout(timeout)
				}, 3000)
			},
		},
	}
</script>

<style lang="scss">
	.revenue-statistics {
		width: 100%;
		position: relative;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		
		.chart {
			width: 100%;
			height: 400rpx;
		}
		
		.chart-bottom {
			margin-top: 40rpx;
			
			.chart-bottom-item {
				margin: 16rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>