siyu_app/pages_watch/healthMonitoring/sportsList.vue

<template>
	<view class="container">
		<view class="headcon">
			<view class="headcon-title">{{this.type}}总览</view>
			<view class="headcon-info x-bc">
				<view class="headcon-item y-f">
					<view class="headcon-num" style="font-size: 72rpx;">{{distanceTotal||0}}</view>
					<view>{{this.type}}(公里)</view>
				</view>
				<view class="headcon-item border y-f">
					<view class="headcon-num">{{timeTotal || 0}}</view>
					<view>时长(小时)</view>
				</view>
				<view class="headcon-item y-f">
					<view class="headcon-num">{{countTotal||0}}</view>
					<view>次数(次)</view>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="list">
				<view v-for="(item, key, index) in list" :key="index">
					<view class="list-title">
						<view>{{key.replace('-','年') + '月'}}</view>
						<view class="list-title-txt">{{this.type}}{{_mouthTotal('distance',item)}}公里  运动 {{_mouthTotal('time',item)}}小时  运动{{item.length}}次  消耗{{_mouthTotal('calorie',item)}}千卡</view>
					</view>
					<view class="list-box">
						<view class="list-item border-line x-bc"  v-for="(it,i) in item" :key="i">
							<image :src="typeoption[type]" mode="aspectFill"></image>
							<view class="list-item-r">
								<view class="x-bc">
									<text>{{type}}</text>
									<text>{{it.createTime.substring(5,16)}}</text>
								</view>
								<view class="right-info x-f">
									<view class="right-item"><text style="font-weight: 500;font-size: 40rpx;color: #222222;">{{it.distance}}</text>公里</view>
									<text class="right-item">{{_seconds(it.time || 0)}}</text>
									<text class="right-item">{{_seconds(it.speed || 0,1)}} /公里</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {sportDataByType} from "@/api/pages_watch/healthMonitoring.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				mescroll:null,
				downOption: {   //下拉刷新
				 	use:true,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					onScroll:false,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"已经到底了",
					empty: {
						icon:'https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
				dataList: [],
				type: '',
				typeoption: {
					'游泳': '/static/images/pages_watch/icons/swim_icon.png',
					'登山': '/static/images/pages_watch/icons/mountaineering_icon.png',
					'骑行': '/static/images/pages_watch/icons/ride_icon.png',
					'跑步': '/static/images/pages_watch/icons/run_icon.png',
					'健步走': '/static/images/pages_watch/icons/walk_icon.png',
					'球类': '/static/images/pages_watch/icons/ball_game_icon.png',
					'其他运动': '/static/images/pages_watch/icons/other_icon.png',
				},
				countTotal: 0,
				distanceTotal: 0,
				timeTotal: 0,
				list: []
			}
		},
		computed: {
			_seconds() {
				return (totalSeconds,type)=> {
					let hours = Math.floor(totalSeconds / 3600);
					let minutes = Math.floor((totalSeconds % 3600) / 60);
					let seconds = totalSeconds % 60;
					hours = hours.toString().padStart(2, '0');
					minutes = minutes.toString().padStart(2, '0');
					seconds = seconds.toString().padStart(2, '0');
					if(type == 1) {
						return hours+':'+minutes+'´'+seconds+'´´';
					} else {
						return hours+':'+minutes+':'+seconds;
					}
				}
			},
			_mouthTotal() {
				return (type,list)=> {
					if(type == 'distance') {
						return list.reduce((acc, obj) => { return acc + Number(obj.distance || 0)}, 0);
					} else if(type == 'time') {
						const s = list.reduce((acc, obj) => { return acc + Number(obj.time || 0)}, 0)
						return (s / 3600).toFixed(2)
					} else if(type == 'calorie') {
						return list.reduce((acc, obj) => { return acc + Number(obj.calorie || 0)}, 0);
					} else {
						return 0
					}
				}
			}
		},
		onLoad(option) {
			this.type = option.title || ''
			uni.setNavigationBarTitle({
				title: option.title || '运动',
			});
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data = {
					deviceId: uni.getStorageSync("deviceId") || '',
					type: this.type,
					pageNum: page.num,
					pageSize: page.size
				};
				sportDataByType(data).then(res => {
					this.countTotal = res.data.countTotal
					this.distanceTotal = res.data.distanceTotal
					this.timeTotal = res.data.timeTotal
					if(res.code==200){
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.data.list; 
						} else {
							that.dataList = that.dataList.concat(res.data.list); 
						}
						this.resetData(that.dataList)
						that.mescroll.endBySize(res.data.list.length, res.data.total);
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = null;
						this.list = []
						that.mescroll.endErr();
					}
				});
			},
			resetData(array) {
				this.list = array.reduce((acc, obj) => {
					const [year, month] = obj.createTime.split(' ')[0].split('-');
					const date = obj.createTime.split(' ')[0];
			
					if (!acc[`${year}-${month}`]) {
						acc[`${year}-${month}`] = [];
					}
			
					// if (!acc[`${year}-${month}`][date]) {
					// 	acc[`${year}-${month}`][date] = [];
					// }
					acc[`${year}-${month}`].push(obj);
			
					return acc;
				}, {});
				console.log(this.list)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;
		.headcon {
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			&-title {
				font-weight: 500;
				font-size: 36rpx;
				color: #222222;
			}
			&-info {
				align-items: flex-end !important; 
			}
			&-item {
				flex: 1;
			}
			&-num {
				padding: 10rpx 0;
				font-weight: 500;
				font-size: 48rpx;
				color: #333333;
			}
		}
		.border {
			position: relative;
			&::after {
				content: "";
				height: 88rpx;
				width: 0;
				border-left: 2rpx solid #ECECEC;
				position: absolute;
				left: 0;
				bottom: 0;
			}
			&::before {
				content: "";
				height: 88rpx;
				width: 0;
				border-right: 2rpx solid #ECECEC;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}
	.list {
		padding-bottom: calc(var(--window-bottom) + 24rpx);
		&-title {
			padding: 24rpx 0;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}
		&-title-txt {
			margin-top: 4rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
		}
		&-box{
			padding: 0 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
		}
		&-item {
			padding: 32rpx 0;
			image {
				width: 72rpx;
				height: 72rpx;
				flex-shrink: 0;
				margin-right: 18rpx;
			}
			&-r {
				flex: 1;
				overflow: hidden;
			}
		}
		.right-info {
			align-items: baseline !important; 
			margin: 0 -32rpx -20rpx 0;
			flex-wrap: wrap;
		}
		.right-item {
			margin: 0 32rpx 20rpx 0;
		}
	}
</style>