siyu_app/pages_watch/components/sports/sports.vue

<template>
	<view class="sportsbox y-f" style="padding-top: 0" @click="handleDetail('/pages_watch/healthMonitoring/sports')">
		<view class="sportsbox-echart">
			<myArcbar ref='myArcbar'></myArcbar>
		</view>
		<view class="sportsbox-list x-bc">
			<view class="sportsbox-item es-pl-52 es-pr-20">
				<view class="x-f">
					<image class="icon" src="@/static/images/pages_watch/icons/kaluli_icon.png" mode="aspectFill">
					</image>
					<text>活动热量</text>
				</view>
				<view class="value">
					<text class="num">{{Number(info.calorie || 0)}}</text>
					<text>/{{info.targetCalorie}} 千卡</text>
				</view>
			</view>
			<view class="sportsbox-item es-pl-40 es-pr-20">
				<view class="x-f">
					<image class="icon" src="@/static/images/pages_watch/icons/time_icon.png" mode="aspectFill"></image>
					<text>锻炼时长</text>
				</view>
				<view class="value">
					<text class="num">{{Number(info.sport || 0)}}</text>
					<text>/{{info.targetSport}} 分钟</text>
				</view>
			</view>
			<view class="sportsbox-item es-pl-52 es-pr-20">
				<view class="x-f">
					<image class="icon" src="@/static/images/pages_watch/icons/bushu_icon.png" mode="aspectFill">
					</image>
					<text>今日步数</text>
				</view>
				<view class="value">
					<text class="num">{{Number(info.step || 0)}}</text>
					<text>/{{info.targetStep}} 步</text>
				</view>
			</view>
			<view class="sportsbox-item es-pl-40 es-pr-20">
				<view class="x-f">
					<image class="icon" src="@/static/images/pages_watch/icons/min_icon.png" mode="aspectFill"></image>
					<text>活动小时数</text>
				</view>
				<view class="value">
					<text class="num">{{Number(info.activity || 0)}}</text>
					<text>/{{info.targetActivity}} 小时</text>
				</view>
			</view>
		</view>
	</view>
	<view class="sportsbox" style="padding: 30rpx 0">
		<view class="x-bc sportstitle" style="padding: 0 30rpx">
			<view class="x-f">
				<image class="sportsicon" src="@/static/images/pages_watch/icons/sports_record_icon.png"
					mode="aspectFill"></image>运动记录
			</view>
			<view>{{list[activeIndex].name}}<text style="font-weight: 600;font-size: 44rpx;margin: 0 2rpx;">{{calcKilometers}}</text>
				<text style="font-weight: 500;font-size: 24rpx;color: #757575;">公里</text>
			</view>
		</view>
		<view class="frequency" style="padding: 0 30rpx">{{list[activeIndex].count}} 次</view>
		<view class="sports">
			<z-swiper ref="zSwiper" v-model="list" :options="{slidesPerView: 7,centeredSlides: true}" @init="init" @slideChange="onChange">
				<z-swiper-item v-for="(item,index) in list" :key="index">
					<view class="sportsitem" @click="slideTo(index)">
						<image 
						:class="activeIndex == index ? 'active': activeIndex == index+1 ||  activeIndex == index-1 ?'next': activeIndex == index+2 ||  activeIndex == index-2 ?'next2':'sportsitem-img'" 
						:src="item.icon" 
						mode="aspectFill"></image>
					</view>
				</z-swiper-item>
			</z-swiper>
		</view>
	</view>
</template>

<script>
	import {querySportRecord,querySportData} from '@/api/pages_watch/index.js'
	import myArcbar from './myArcbar.vue'
	export default {
		components: {
			myArcbar
		},
		data() {
			return {
				deviceId: '',
				activeIndex: 3,
				info: {
					calorie: 0,
					targetCalorie: 200,
					sport: 0,
					targetSport: 30,
					step: 0,
					targetStep: 5000,
					activity: 0,
					targetActivity: 1,
				},
				// 游泳，登山，骑行，跑步，健走，球类，其他运动
				list: [
					{
						name: '游泳',
						icon: '/static/images/pages_watch/icons/swim_icon.png',
						distance: 0,
						count: 0
					},
					{
						name: '登山',
						icon: '/static/images/pages_watch/icons/mountaineering_icon.png',
						distance: 0,
						count: 0
					},
					{
						name: '骑行',
						icon: '/static/images/pages_watch/icons/ride_icon.png',
						distance: 0,
						count: 0
					},
					{
						name: '跑步',
						icon: '/static/images/pages_watch/icons/run_icon.png',
						distance: 0,
						count: 0
					},
					{
						name: '健步走',
						icon: '/static/images/pages_watch/icons/walk_icon.png',
						distance: 0,
						count: 0
					},
					{
						name: '球类',
						icon: '/static/images/pages_watch/icons/ball_game_icon.png',
						distance: 0,
						count: 0
					},
					{
						name: '其他运动',
						icon: '/static/images/pages_watch/icons/other_icon.png',
						distance: 0,
						count: 0
					}
				],
				chartData: {},
				opts: {
					color: ["#FD741D", "#FDC925", "#49B9FC", "#6DBF68"],
					title: {
						name: ''
					},
					subtitle: {
			          name: "",
			        },
					extra: {
						arcbar: {
							radius: 110,
							centerX: 0,
							centerY: 110,
							type: "default",
							width: 24, 
							startAngle: 1,
							endAngle: 0,
							gap: 2,
							direction: "cw",
							backgroundColor: "#f5f5f5"
						}
					}
				}
			}
		},
		computed: {
			calcKilometers() {
			  const kilometers = 1; // 1公里
			  const meters = this.list[this.activeIndex].distance / 1000; // 将公里转换为米
			  return meters.toFixed(2);
			}
		},
		methods: {
			init() {
				this.$refs.zSwiper.swiper.slideTo(this.activeIndex, 1000, false);
			},
			slideTo(index) {
				if(this.activeIndex == index) {
					// 跳转详情
					this.deviceId = uni.getStorageSync('deviceId') || ''
					if (this.$isLogin()) {
						if (!this.deviceId) {
							uni.showToast({
								title: "请先绑定设备",
								icon: "none"
							})
							return
						}
						const title = this.list[this.activeIndex].name
						uni.navigateTo({
							url: '/pages_watch/healthMonitoring/sportsList?title='+title
						})
					} else {
						this.$showLoginPage()
					}
				} else {
					this.$refs.zSwiper.swiper.slideTo(index, 1000, false);
				}
			},
			onChange(swiper) {
				this.activeIndex = swiper.activeIndex
			},
			getServerData(isFamily) {
				this.getData(isFamily)
				this.getSportRecord()
			},
			getData(isFamily) {
				querySportData({deviceId: uni.getStorageSync('deviceId') || '',isFamily:isFamily}).then((res) => {
					if(res.code == 200) {
						this.info = res.data
						this.$nextTick(()=>{
							this.$refs.myArcbar.initCircle(res.data)
						})
					} 
				}).catch((err) => {});
			},
			getSportRecord() {
				querySportRecord({deviceId: uni.getStorageSync('deviceId') || ''}).then((res) => {
					if(res.code == 200 &&res.data &&res.data.length > 0) {
						let mergedList = this.list.map(item1  => {
						    let item2 = res.data.find(item2 => item2.type == item1.name);
						    return item2 ? {...item1, ...item2} : item1;
						});
						this.list = mergedList
					} else {
						this.list = this.list.map(item=>({
							...item,
							distance: 0,
							count: 0
						}))
					}
				}).catch((err) => {});
			},
			handleDetail(url) {
				this.deviceId = uni.getStorageSync('deviceId') || ''
				if (this.$isLogin()) {
					if (!this.deviceId) {
						uni.showToast({
							title: "请先绑定设备",
							icon: "none"
						})
						return
					}
					if (url) {
						uni.navigateTo({
							url: url
						})
					} else {
						uni.showToast({
							title: '功能开发中...',
							icon: 'none',
							position: 'top',
							duration: 2000
						})
					}
				} else {
					this.$showLoginPage()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sportsitem {
		width: 98rpx;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		&-img {
			width: 66rpx;
			height: 66rpx;
			opacity: 0.5;
		}
	}
	.active {
		width: 88rpx;
		height: 88rpx;
		&-img {
			opacity: 1;
		}
	}
	.next {
		width: 80rpx;
		height: 80rpx;
		&-img {
			opacity: 0.8;
		}
	}
	.next2 {
		width: 72rpx;
		height: 72rpx;
		&-img {
			opacity: 0.7;
		}
	}
	.sportsbox {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 16rpx;
		padding: 32rpx 0;

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}

		.num {
			margin-right: 5rpx;
			font-weight: 600;
			font-size: 44rpx;
			color: #222222;
		}

		&-echart {
			min-height: 264rpx;
		}

		&-list {
			width: 100%;
			flex-wrap: wrap;
			margin-top: 46rpx;
			margin-bottom: -46rpx;
		}

		&-item {
			width: 50%;
			box-sizing: border-box;
			overflow: hidden;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #757575;
			// padding: 0 40rpx;
			margin-bottom: 46rpx;

			.value {
				margin-top: 10rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
		}

		.sportstitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}

		.sportsicon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}

		.frequency {
			text-align: right;
			margin-top: 6rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #757575;
		}

		.sports {
			padding-top: 24rpx;
		}
	}
</style>