ReedawFoodApp/components/bodyIndex/bodyHome.vue

<template>
	<view class="body">
		<view class="top">
			<view class="info box_shadow" v-for="(ite,ind) in  Measure.top_list"
				:style="{'backgroundColor':ite.bk_color}" @click="handelCurveDetailed">
				<view class="title">
					<view class="bold">{{ite.name}}</view>
					<view class="c999">
						{{ite.time}}
						<uni-icons type="right" class="ml-10" color="#999"></uni-icons>
					</view>
				</view>
				<view class="weight">
					<view class="left">
						<view class="number"><text class="size26 bold">{{ite.value}}</text>{{ite.unit}}</view>
						<view class="standard bold size16" :style="{'color':ite.standard_color}">{{ite.standard}}</view>
					</view>
					<view class="charts" v-if="handTrue&&ite.curve_list.line.categories.length">
						<qiun-data-charts type="area" :chartData="ite.curve_list.line" :Width="140" :Height="40"
							:canvas2d="true" :canvasId="ite.key_name+ind" :opts="opts" :tapLegend="false"
							:tooltipShow="false" />
					</view>
				</view>
				<view class="Ideal c999" v-if="ite.ideal_weight">
					<text>理想{{ite.name}}</text>
					<text>{{ite.ideal_weight}}</text>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="function mt-15">
			<view @click="handlerRecord">
				<image src="/static/shoudong.png" mode="widthFix"></image>
			</view>
			<view @click="handReport">
				<image src="/static/shendu.png" mode="widthFix"></image>
			</view>
		</view>
		<!--  -->
		<view class="tools">
			<view class="item box_shadow" v-for="(ite,ind) in  Measure.card_list" @click="handleTools(ite.key_name)">
				<view class="top">
					<image :src="ite.icon"></image>{{ite.name}}
				</view>
				<view class="number">
					<text class="bold"
						:class="[ite.key_name=='body_level'||ite.key_name=='body_type'?'size14':'size20']">{{ite.value}}</text>{{ite.unit}}
				</view>
				<view class="bold size14" :style="{'color':ite.standard_color}">{{ite.standard}}</view>
			</view>
		</view>
		<!-- 手动记录 -->
		<record></record>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import record from '@/components/bodyIndex/record.vue';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			record,
			qiunDataCharts,
		},
		data() {
			return {
				handTrue: false,
				Measure: {
					card_list: [],
					top_list: []
				},
				opts: {
					padding: [5, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true,
						itemCount: 5
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: true,
						axisLine: false,
						disableGrid: true,
					},
				}
			};
		},
		computed: {
			...mapState(["user", "MeasureResult"]),
			info() {
				return this.user
			},
			// Measure() {
			// 	let that = this
			// 	return this.MeasureResult
			// }
		},
		watch: {
			MeasureResult: {
				handler(newVal, oldVal) {
					let that = this
					that.handTrue = false
					this.$nextTick(() => {
						that.handTrue = true
						that.Measure = newVal
					})
				},
				deep: true,
				immediate: true

			}
		},
		methods: {
			// 详情
			handleTools(name) {
				uni.navigateTo({
					url: "/body/home/body?to=" + name
				})
			},
			// 深度
			handReport() {
				uni.navigateTo({
					url: "/body/report/report"
				})
			},
			// 趋势
			handelCurveDetailed() {
				let that = this
				setTimeout(function() {
					uni.navigateTo({
						url: "/body/curve/curve"
					})
				}, 200)
			},
			// 手动
			handlerRecord() {
				this.$store.commit('changeRecord', true)
			},
		}
	}
</script>

<style scoped lang="scss">
	.body {
		background: #f7f7f7;
	}

	.info {
		margin: 15px 10px;
		padding: 10px;
		height: auto;
		overflow: hidden;
		border-radius: 10px;
		display: flex;
		flex-wrap: wrap;

		.title {
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.weight {
			width: 100%;
			display: flex;
			margin-top: 10px;
			justify-content: space-between;

			.left {
				width: 40%;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.target {
			color: #999;
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
	}

	.charts {
		width: 50%;
		height: 60px;
	}

	.function {
		display: flex;
		margin: 0 5px;
		width: calc(100% - 10px);
		justify-content: space-between;

		view {
			width: 50%;
		}

		image {
			width: 100%;
		}
	}

	.tools {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0 10px;
		padding-left: 3%;
		width: 97%;
		background: #f7f7f7;
		box-shadow: none;
		justify-content: space-between;

		.item {
			width: 40%;
			background: #fff;
			margin-bottom: 15px;
			border-radius: 10px;
			padding: 10px 3%;
			margin-right: 3%;
		}

		.top {
			display: flex;
			align-items: center;

			image {
				width: 22px;
				height: 22px;
				margin-right: 5px;
			}
		}

		.number {
			margin: 5px 0;
		}
	}
</style>