ReedawFoodApp/body/curve/curve.vue

<template>
	<view class="content">
		<!-- tabbar -->
		<!-- 曲线 -->
		<view class="charts">
			<view class="TrendPage">
				<!-- 时间选择 -->
				<view class="boxTime">
					<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 class="box" v-if="weightList.length">
					<view class="line" v-for="(item,index) in weightList">
						<view class="title">{{item.title}}</view>
						<view class="Charts" v-if="item.line.categories.length">
							<qiunDataCharts type="area" :chartData="item.line" :canvas2d="true"
								:canvasId="'canvasId02'+index" :tooltipShow="false" :ontouch="true"
								:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" />
						</view>
						<view class="line" v-else>
							<view class="nolist">
								<image src="../../static/none.png"></image>
								<text>暂无数据，请手动添加~</text>
							</view>
						</view>
					</view>
					<!-- <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&&lineData.categories.length">
							<qiun-data-charts type="area" :chartData="lineData" canvasId="canvasId02" :canvas2d="true" />
						</view>
						<view class="box" v-else>
							<view class="nolist">
								<image src="../../static/none.png"></image>
								<text>暂无数据</text>
							</view>
						</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">
							{{target_weight}}<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">
							{{Math.abs(calculate_val)}}<text>kg</text>
						</view>
						<view class="name" v-if="Number(calculate_val)>0">累计增重</view>
						<view class="name" v-else>累计减重</view>
					</view>
					<view class="item" @click="handleClick(2)">
						<view class="val">
							{{initial_weight}}<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">
							{{calculate_time}}<text>天</text>
						</view>
						<view class="name">减重天数</view>
					</view>
				</view>
			</view>
			<!-- 初始 -->
			<firstweight @handleLabelList="handleLabelList"></firstweight>
			<!-- 目标 -->
			<targetWeight @handleLabelList="handleLabelList"></targetWeight>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import firstweight from '@/components/bodyIndex/firstweight.vue';
	import targetWeight from '@/components/bodyIndex/targetWeight.vue'
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		data() {
			return {
				fields: "",
				active1: 0,
				startTime: "",
				endTime: "",
				lineData: {
					categories: [],
					series: [{
						color: "#54d87c",
						data: []
					}]
				},
				weightList: [],
				handTrue: false,
				target_weight: 0, //目标体重
				initial_weight: 0, //初始体重
				calculate_val: 0, //累计减重
				calculate_time: 0, //减重天数
			}
		},
		computed: {
			...mapState(['user']),
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		components: {
			firstweight,
			targetWeight,
			qiunDataCharts,
		},
		onLoad() {
			let that = this
			that.handleLabelList(that.endDate, that.startDate)
			// #ifdef APP-PLUS
			that.fields = "time"
			// #endif 
			// #ifndef APP-PLUS 
			that.fields = "day"
			// #endif
		},
		// 下拉刷新
		onPullDownRefresh() {
			let that = this
			that.handleLabelList(that.endDate, that.startDate)
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		methods: {
			handleLabelList(startTime, endDate) {
				let that = this
				that.$model.getTrendList({
					aud_id: that.user.aud_id,
					s_time: endDate,
					e_time: startTime
				}).then(res => {
					console.log("趋势", res)
					if (res.code == 0) {
						that.weightList = res.data.curve_list
						that.target_weight = res.data.target_weight
						that.calculate_val = res.data.calculate_val
						that.initial_weight = res.data.initial_weight
						that.calculate_time = res.data.calculate_time
						that.showbox(0)
					}
				})
			},

			showbox(index) {
				let that = this
				that.lineData = {}
				that.handTrue = false
				that.$nextTick(function() {
					that.handTrue = true
					that.lineData = that.weightList.length ? that.weightList[index].line : {
						categories: [],
						series: [{
							color: "#54d87c",
							data: []
						}]
					}
				})
				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.handleLabelList(endtime, that.startTime)
			},
			// 结束
			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.handleLabelList(that.endTime, startTime)
			},
			handleClick(ind) {
				if (ind == 1) {
					this.$store.commit("changeTarget", true);
				} else {
					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;
	}



	.box {
		margin: 0 !important;
		padding: 0 !important;
		background: inherit !important;

		.line {
			width: 100%;
			background: #fff;
			margin-top: 15px;
			border-radius: 10px;
			padding-bottom: 15px;
			// width: 100%;
			// height: 240px;
		}
	}

	.title {
		width: 100%;
		text-align: center;
		margin: 15px 0;
		font-weight: bold;
		font-size: 16px;
	}

	.Charts {
		width: 100%;
		height: 240px;
		overflow: auto;
	}

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