lanan-app/pages/my/StatisticsInfo.vue

<template>
	<view class="centenr">
		<v-navigation-bar-vue title="数据统计"></v-navigation-bar-vue>
		<view class="queryDate">
			<text>日期</text>
			<view class="dateForm" @click="() => dateModalVisible = true">
				<text v-if="!startDate" class="placeholder">开始日期</text>
				<text v-else>{{ startDate }}</text>
				<image class="dateFormIcon" src="../../static/icons/statisticsinfo/rili@2x.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="ail">
			<view class="san_" v-for="(item,index) in dataList " :key="index">
				<view class="s_box">
					<view class="title_">姓名</view>
					<view class="nums">{{item.driverName}}</view>
				</view>
				<view class="s_box">
					<view class="title_">金额</view>
					<view class="nums">{{item.money}}</view>
				</view>
				<view class="s_box">
					<view class="title_">数量</view>
					<view class="nums">{{item.rescueNum}}</view>
				</view>
			</view>
		</view>
		<tab-bar msg="1"></tab-bar>

		<view>
			<u-calendar show-confirm  @close="dateClose" @confirm="dateChange" :show="dateModalVisible" mode="single"></u-calendar>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '../../components/tabBar/tabBar.vue'
	import VNavigationBarVue from '../../components/VNavigationBar.vue';
	export default {
		components: {
			tabBar,
			VNavigationBarVue
		},
		data() {
			return {
				dataList: [],
				tapindex: 0,
				typeList: [{
						name: '日',
						type: 'day'
					},
					{
						name: '周',
						type: 'week'
					},
					{
						name: '月',
						type: 'month'
					},

				],
				type: 'day',
				dateModalVisible: false,
				startDate: ''
			}
		},
		onShow() {
			this.getDataList()
		},
		methods: {
			dateChange(e) {
				if (e && e.length > 0) {
					this.startDate = e[0]
				}
				console.log('e: ',e);
				this.dateModalVisible = false
			},
			dateClose() {
				this.dateModalVisible = false
			},
			getback() {
				uni.navigateBack()
			},
			gettapindex(index, type) {
				this.tapindex = index
				this.type = type
				this.getDataList()
			},
			async getDataList() {
				request({
					url: "/app/rescueInfo/statisticsInfo",
					method: 'get',
					params: {
						type: this.type
					}

				}).then(res => {
					this.dataList = res.data
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.centenr {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.queryDate {
		padding: 26rpx 32rpx;
		background-color: #317DFA;
		color: #fff;
		display: flex;
		align-items: center;
		column-gap: 30rpx;
		.dateForm {
			flex: 1;
			width: 0;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 14rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #000;
			.placeholder {
				color: #C0C4CD;
				font-size: 24rpx;
			}
			
			.dateFormIcon {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.ail {
		flex: 1;
		height: 0;
		overflow: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 34rpx 120rpx;
		background-color: #f7f7f7;
	}

	.san_ {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 10px 0px;
		background: #F7F8FC;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.05);
		border-radius: 16rpx;
		border: 2rpx solid rgba(50,125,251,0.05);
		backdrop-filter: blur(20px);
	}

	.s_box {
		width: 33%;
	}

	.title_ {
		padding: 16rpx;
		text-align: center;
		background: #fff;
		color: #333;
	}

	.nums {
		padding: 26rpx;
		font-size: 16px;
		text-align: center;
		// font-weight: bold;
		color: #327DFB;
	}

	.distap {
		display: flex;
		align-items: center;
		margin: 10px;
	}

	.tapbox {
		width: 38px;
		height: 38px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.act {
		background: #003bbc !important;
		color: #fff !important;
	}
</style>