MiniPrograms/components/todaydata-box/todaydata-box.vue

<template>
	<!-- 今日记录模块 -->
	<view class="module-container">
		<u-tabs :list="list" :current="current" @change="changeModule"
			:activeStyle="{color: '#5b7cff',fontWeight: 'bold',transform: 'scale(1.04)',}"
			:inactiveStyle="{fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#5b7cff" lineWidth="60"></u-tabs>

		<!-- 记录模块 -->
		<view class="module-box" v-if="current == 0">
			<view class="module-item" v-for="(item,index) in moduleData" :key="index" :style="item.color"
				@click="setTime(index)">
				<view class="module-item-box">
					<text class="module-item-text">{{item.text}}</text>
					<view class="num-box">
						<text class="module-item-num">{{item.numData}}</text>
					</view>
					<view :class="item.icon"></view>
				</view>
			</view>
		</view>

		<!-- 时间选择器 -->
		<u-picker :show="setTimePicker" :columns="pickerList" ref="uPicker" @confirm="pickerConfirm"
			@cancel="pickerCancel" :closeOnClickOverlay="true" @change="changeHandler" :immediateChange="true"></u-picker>

		<!-- 记录表 -->
		<view class="module-box" v-if="current == 1">
			<view class="card-item" style="width: 710rpx;">
				<view class="card-info">
					<view class="t-icon t-icon-jiaoshidaka"></view>
					<text class="info-text">近七天学习记录</text>
				</view>
				<view style=" width:100%; 500rpx; margin-top: -30rpx;">
					<qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4"
						:opts="{dataLabel:false}" tooltipFormat='tooltipHour' :canvas2d="true"
						canvasId="canvasId9839618" />
				</view>
			</view>

			<view class="card-item">
				<view class="card-info">
					<view class="t-icon t-icon-jiankangshangbao"></view>
					<text class="info-text">近七天运动</text>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4"
						tooltipFormat='pieMinute' :canvas2d="true" canvasId="canvasId91234111" />
				</view>
			</view>

			<view class="card-item">
				<view class="card-info">
					<view class="t-icon t-icon-jiankangshangbao"></view>
					<text class="info-text">近七天睡眠</text>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="ring" :chartData="todayData.sleepRing" :loadingType="4"
						tooltipFormat='tooltipHour' :canvas2d="true" canvasId="canvasId6312231" />
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "todaydata-box",
		computed: {
			...mapState('m_chart', ['todayData']),
		},
		data() {
			return {
				//模块名
				list: [{
					name: '今日记录'
				}, {
					name: '历史记录'
				}],
				//当前模块
				current: 0,
				//记录卡片
				moduleData: [{
						text: '自主学习记录',
						color: 'background-color: #5b7cff;',
						icon: 't-icon t-icon-bianjibi',
						numData: '记录一下',
					},
					{
						text: '娱乐放松记录',
						color: 'background-color: #00cca3;',
						icon: 't-icon t-icon-leimucuyule',
						numData: '记录一下',
					},
					{
						text: '运动锻炼记录',
						color: 'background-color: #ff9db2;',
						icon: 't-icon t-icon-yundong',
						numData: '记录一下',
					},
					{
						text: '每日睡眠记录',
						color: 'background-color: #f9c752;',
						icon: 't-icon t-icon-a-icon_wananyueliangshuimian',
						numData: '记录一下',
					}
				],
				//当前记录卡片
				cardCurrent: 5,
				//选择器
				setTimePicker: false,
				//时间表
				pickerList: [
					['0小时', '1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时', '9小时', '10小时'],
					['5分钟', '10分钟', '15分钟', '20分钟', '25分钟', '30分钟', '35分钟', '40分钟', '45分钟', '50分钟', '55分钟']
				],

			};
		},
		onLoad() {},
		methods: {
			//更改模块
			changeModule(index) {
				this.current = index.index
			},
			//点击卡片唤起picker
			setTime(index) {
				this.cardCurrent = index
				this.setTimePicker = true
			},
			//更改完成事件
			changeHandler(e) {
				if (e.value[0] === '0小时') {
					this.moduleData[this.cardCurrent].numData = e.value[1]
				} else {
					this.moduleData[this.cardCurrent].numData = e.value[0] + e.value[1]
				}
			},
			pickerConfirm(e) {
				// this.setTimePicker = false
				// 闭包的运用
				let that = this
				setTimeout(function () {
					uni.$showMsg('记录完成',1000)
				  that.setTimePicker = false
				}, 100)
			},
			pickerCancel() {
				uni.$showMsg('取消选择',1000)
				this.setTimePicker = false
			},

		}
	}
</script>

<style lang="scss">
	@import '@/pages/common/mainpage.scss';

	.module-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		.module-item {
			margin: 2% 0;
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: $card-border-radius;
			width: 48%;
			height: auto;
			overflow: hidden;

			.module-item-box {
				padding: 35rpx;
				width: 100%;
				display: flex;
				flex-direction: column;

				.t-icon {
					width: 250rpx;
					height: 250rpx;
					margin: -250rpx 0 0 150rpx;
					z-index: 1;
				}
			}
		}
	}

	.module-item-text {
		color: #FFF;
		font-size: 40rpx;
		font-weight: bold;
		z-index: 5;
	}

	.num-box {
		margin-top: 20rpx;
		z-index: 5;

		.module-item-num {
			color: #FFF;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
</style>