examTeamApp/pages/skip/skip.vue

<template>
	<view class="content skipping">
		<!--  -->
		<view class="skiptop">
			<view class="status" @click="$tools.handleBluetoothClick()"><text>设备连接</text></view>
			<view class="item">
				<view class="item-ite">今日个数<text>{{info?info.today_jump_num:'--'}}</text></view>
				<view class="item-ite">今日时长<text>{{info?info.today_jump_time:'--'}}</text></view>
				<view class="item-ite">卡路里/kcal<text>{{info?info.today_jump_kcal:'--'}}</text></view>
			</view>
		</view>
		<!--  -->
		<view class="tabbar">
			<view @click="active=1" :class="[active==1?'active':'']">自由训练</view>
			<view @click="active=2" :class="[active==2?'active':'']">定时训练</view>
			<view @click="active=3" :class="[active==3?'active':'']">定数训练</view>
		</view>
		<!--自由训练  -->
		<view class="box1 box" v-if="active==1">
			<view class="time">{{info?info.last_record_time:'--'}}</view>
			<view class="item">
				<text class="item-ite">个数</text>
				<text class="bold">{{info?info.last_jump_num:'--'}}</text>
			</view>
			<view class="item">
				<text class="item-ite">本次时长</text>
				<text class="bold">{{info?info.last_jump_time:'--'}}</text>
			</view>
			<view class="item">
				<text class="item-ite">消耗卡路里</text>
				<text class="bold">{{info?info.last_jump_kcal:'--'}}</text>
			</view>
		</view>
		<!--定时训练  -->
		<view class="box1 box" v-if="active==2">
			<view class="time">2024/03/25</view>
			<view class="item">
				<view class="item-set">
					<picker mode="multiSelector" :range="timeList" :value="timesTndex" @change="bindTimeChange">
						<view class="size26">{{timeList[0][timesTndex[0]]}}{{timeList[1][timesTndex[1]]}}</view>
					</picker>
					<uni-icons class="iconfont icon-bianji" color="#FEC407" size="20"></uni-icons>
				</view>
				<text class="tips">调整目标</text>
			</view>
			<view class="item">
				<text class="item-ite">本次个数</text>
				<text>--</text>
			</view>
			<view class="item">
				<text class="item-ite">消耗卡路里</text>
				<text>--</text>
			</view>
		</view>
		<!--定数训练  -->
		<view class="box1 box" v-if="active==3">
			<view class="time">2024/03/25</view>
			<view class="item">
				<view class="item-set">
					<input type="digit" v-model='weight' confirm-type="done" @blur="handleBlur" />
					<uni-icons class="iconfont icon-bianji" color="#FEC407" size="20"></uni-icons>
				</view>
				<text class="tips">调整目标</text>
			</view>
			<view class="item">
				<text class="item-ite">本次时长</text>
				<text>--</text>
			</view>
			<view class="item">
				<text class="item-ite">消耗卡路里</text>
				<text>--</text>
			</view>
		</view>
		<!--  -->
		<view class="gridList">
			<view class="data">
				<view class="item" @click="navTo('/pages/skip/charts')">
					<view class="image">
						<image src="../../static/charts.png"></image>
					</view>
					<view class="name">运动曲线</view>
				</view>
				<view class="item" @click="navTo('/pages/history/history?acd_id='+acd_id)">
					<view class="image">
						<image src="../../static/add.png"></image>
					</view>
					<view class="name">历史记录</view>
				</view>
				<view class="item" @click="navTo('/pages/compk/contrast?acd_id='+acd_id)">
					<view class="image">
						<image src="../../static/pk.png"></image>
					</view>
					<view class="name">数据对比</view>
				</view>
				<view class="item" @click="$store.commit('changeRecord',true)">
					<view class="image">
						<image src="../../static/history.png"></image>
					</view>
					<view class="name">添加记录</view>
				</view>
			</view>
		</view>
		<!-- 手动记录 -->
		<record :rtype="acd_id"></record>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import record from '@/components/manuallyAdd/record.vue';
	export default {
		data() {
			return {
				active: 1,
				acd_id: 6,
				isEdit: false,
				weight: 500,
				timeList: [],
				timesTndex: [0, 0]
			}
		},
		components: {
			record
		},
		computed: {
			...mapState(["MeasureSkip"]),
			info() {
				return this.MeasureSkip
			}
		},
		onLoad(options) {
			let that = this
			that.acd_id = options.acd_id
		},
		onShow() {
			let that = this
			that.$store.dispatch("getSkipResult", {
				aud_id: uni.getStorageSync('userid')
			})
		},
		mounted() {
			this.timeList = this.$tools.gethms()
		},
		methods: {
			bindTimeChange(e) {
				console.log("picker携带值", e.target.vaule)
				this.timesTndex = e.target.vaule
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F6FA;
	}

	.tabbar {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: space-around;

		view {
			position: relative;
		}

		.active:after {
			content: "";
			height: 3px;
			width: 100%;
			position: absolute;
			bottom: -8px;
			left: 0;
			border-radius: 5px;
			background: $maincolor;
		}
	}

	.box1 {
		background-color: #fff;
		padding: 10px !important;
		color: #999;
		margin: 15px;
		border-radius: 10px;
		width: calc(100%- 30px);

		.time {
			width: 100%;
			font-size: 14px;
			margin-bottom: 20px;
		}

		.item {
			width: 100%;
			color: #333;
			font-size: 22px;
			text-align: center;
			margin-bottom: 30px;

			text {
				display: block;
			}

			.item-ite {
				font-size: 16px;
				margin-bottom: 5px;
				width: 100%;

			}

			.item-set {
				width: 50%;
				display: flex;
				align-items: center;
				height: 45px;
				line-height: 45px;
				font-size: 30px;
				margin-bottom: 5px;
				background-color: #f7f7f7;
				justify-content: center;
				margin: auto;
				position: relative;

				/deep/input {
					font-size: 30px;
					height: 45px;
					line-height: 45px;
				}

				.uni-icons {
					position: absolute;
					right: 5px;
					bottom: -5px;
				}
			}

			.tips {
				font-size: 12px;
				color: #999;
				margin-top: 10px;
			}
		}
	}
</style>