examTeamApp/pages/body/body.vue

<template>
	<view class="content">
		<!-- tabbar -->
		<!-- 曲线 -->
		<view class="charts">
			<view class="TrendPage">
				<!-- 时间选择 -->
				<view class="boxTime">
					<view class="one">
						<picker mode="date" :end="endDate" @change="handStartTimeH" :fields="fields"
							:value="startTime?startTime:startDate">
							<view class="uni-input mr-10">{{startTime?startTime:startDate}}
								<icon class="iconfont icon-arrow-down-bold"></icon>
							</view>
						</picker>
						<view class="center">~</view>
						<picker mode="date" :end="endDate" @change="handEndTimeH" :fields="fields"
							:value="endTime?endTime:endDate">
							<view class="uni-input mr-10">{{endTime?endTime:endDate}}
								<icon class="iconfont icon-arrow-down-bold"></icon>
							</view>

						</picker>
					</view>
				</view>
				<!-- 曲线图 -->
				<view class="box" v-if="weightList.length">
					<view class="listC">
						<view :class="{active2:index==active1}" class="name" v-for="(item,index) in weightList"
							:key="index" @click="showbox(index)">
							{{item.title}}
						</view>
					</view>
					<view class="blockC">
						<view v-if="handTrue">
							<qiunDataCharts type="area" :chartData="lineData" :canvas2d="true" canvasId="charts09"
								:animation="false" :Width="340" :Height="250"
								:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
						</view>
					</view>
				</view>
				<view class="box" v-else>
					<view class="nolist">
						<image src="../../static/none.png"></image>
						<text>暂无数据</text>
					</view>
				</view>
			</view>
			<!--  目标-->
			<view class="gridList">
				<view class="data">
					<view class="item" @click="handleClick(1)">
						<view class="val">
							{{userInfo.target_current?userInfo.target_current.target_weight:0}}<text>kg</text>
						</view>
						<view class="name">目标体重<uni-icons class="iconfont icon-bianji" color="#FEC407"></uni-icons>
						</view>
					</view>
					<view class="item">
						<view class="val">
							{{userInfo.target_current?Math.abs(userInfo.target_current.cumulative_weight):0}}<text>kg</text>
						</view>
						<view class="name" v-if="Number(userInfo.target_current.cumulative_weight)>0">累计增重</view>
						<view class="name" v-else>累计减重</view>
					</view>
					<view class="item" @click="handleClick(2)">
						<view class="val">
							{{userInfo.target_current?userInfo.target_current.initial_weight:0}}<text>kg</text>
						</view>
						<view class="name">初始体重<uni-icons class="iconfont icon-bianji" color="#FEC407"></uni-icons>
						</view>
					</view>
					<view class="item">
						<view class="val">
							{{userInfo.target_current?userInfo.target_current.cumulative_day:0}}<text>天</text>
						</view>
						<view class="name">减重天数</view>
					</view>
				</view>
			</view>
			<!-- 初始 -->
			<firstweight :type="ind"></firstweight>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import record from '@/element/manuallyAdd/record.vue';
	import firstweight from '@/element/target/firstweight.vue';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		data() {
			return {
				fields: "",
				active: 1,
				acd_id: 2,
				ind: 0,
				active1: 0,
				startTime: "",
				endTime: "",
				lineData: {},
				handTrue: true,
			}
		},
		computed: {
			...mapState(['user', "MeasureResult", "Trend"]),
			weightList() {
				let that = this
				that.showbox(0)
				return that.Trend
			},
			userInfo() {
				return this.MeasureResult
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		components: {
			record,
			firstweight,
			qiunDataCharts,
		},
		onLoad(options) {
			let that = this
			that.acd_id = options.acd_id
			that.$store.dispatch("GetBodyTrendList", {
				aud_id: uni.getStorageSync('userid'),
				s_time: that.startDate,
				e_time: that.endDate
			})
			// #ifdef APP-PLUS
			that.fields = "time"
			// #endif 
			// #ifndef APP-PLUS 
			that.fields = "day"
			// #endif
		},
		// 下拉刷新
		onPullDownRefresh() {
			let that = this
			that.$store.dispatch("GetBodyTrendList", {
				aud_id: uni.getStorageSync('userid'),
				s_time: that.startDate,
				e_time: that.endDate
			})
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		methods: {
			showbox(index) {
				let that = this
				that.handTrue = false
				that.$nextTick(function() {
					that.handTrue = true
					that.lineData = that.weightList.length ? that.weightList[index].line : {}
				})
				that.active1 = index
			},
			//开始
			handStartTimeH(e) {
				let that = this
				if (that.endTime) {
					if (Date.parse(e.detail.value) > Date.parse(that.endTime)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.detail.value) > Date.parse(that.endDate)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				}
				that.startTime = e.detail.value
				let endtime = that.endTime ? that.endTime : that.endDate
				that.$store.dispatch("GetBodyTrendList", {
					aud_id: that.user.id,
					s_time: that.startTime,
					e_time: that.endTime ? that.endTime : that.endDate
				})
				that.showbox(0)
			},
			// 结束
			handEndTimeH(e) {
				let that = this
				if (that.startTime) {
					if (Date.parse(e.detail.value) < Date.parse(that.startTime)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.detail.value) < Date.parse(that.startDate)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				}
				that.endTime = e.detail.value
				let startTime = that.startTime ? that.startTime : that.startDate
				that.$store.dispatch("GetBodyTrendList", {
					aud_id: uni.getStorageSync('userid'),
					s_time: startTime,
					e_time: that.endTime
				})
				that.showbox(0)
			},
			handleClick(ind) {
				this.ind = ind
				this.$store.commit("changeFirst", true);
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/scss/body.scss";

	.content {
		padding: 15px;
		font-size: 32rpx;
		width: calc(100% - 30px);
		background-color: #F5F6FA;
		min-height: 100vh;
	}

	.listC {
		margin: 0;
		width: 100%;
	}
</style>