kitchendDevice/pages/count/count.vue

<template>
	<view class="content">
		<view class="box" v-if="userinfo&&userinfo.weight!=''">
			<!-- 日期搜索 -->
			<view class="calendar">
				<ren-calendar ref='ren' :startDay="startDay" :markDays='markDays' @maskClick="maskClick"
					@onMonthClickPre='onMonthClickPre' @onMonthClickNext="onMonthClickNext">
				</ren-calendar>
			</view>
			<view class="kcal">
				<view class="set" @click="handleSet">
					<icon class="iconfont icon-shezhi1"></icon>
				</view>
				<view class="top">
					<!-- 进度 -->
					<view class="left ">
						<qiun-data-charts type="arcbar" :chartData="chartData" :canvas2d="true" canvasId="chartsId01"
							:cHeight="300" :cWidth="300" />
						<view class="center">
							还能吃
							<text>{{remaining_kcal}}</text>
						</view>
					</view>
					<view class="right">
						<text>建议摄入</text>
						<text class="num">{{suggestion.kcal}}</text>
					</view>
				</view>
				<view class="weight">
					<view class="item">
						<text>碳水化合物</text>
						<view class="bold">
							<view class="val" :style="{ width: carbohydratepercent + '%'}"></view>
							<text>{{today_intake.carbohydrate}}/{{suggestion.carbohydrate}}</text>
						</view>
					</view>
					<view class="item">
						<text>蛋白质</text>
						<view class="bold">
							<view class="val" :style="{ width: proteinpercent + '%'}"></view>
							<text>{{today_intake.protein}}/{{suggestion.protein}}</text>
						</view>
					</view>
					<view class="item">
						<text>脂肪</text>
						<view class="bold">
							<view class="val" :style="{ width: fatpercent + '%'}"></view>
							<text>{{today_intake.fat}}/{{suggestion.fat}}</text>
						</view>
					</view>
				</view>
			</view>

			<!--  -->
			<view class="tabbar">
				<view class="type" @click="handleAddFood(0,'早餐')">
					<icon class="t-icon t-icon-yingyangzaocan"></icon>
					<view class="text">
						<icon class="iconfont icon-add"></icon>早餐
					</view>
				</view>
				<view class="type" @click="handleAddFood(1,'午餐')">
					<icon class="t-icon t-icon-jiucan"></icon>
					<view class="text">
						<icon class="iconfont icon-add"></icon>午餐
					</view>
				</view>
				<view class="type" @click="handleAddFood(2,'晚餐')">
					<icon class="t-icon t-icon-wancan1"></icon>
					<view class="text">
						<icon class="iconfont icon-add"></icon>晚餐
					</view>
				</view>
				<view class="type" @click="isShow = true">
					<icon class="t-icon t-icon-jiacan"></icon>
					<view class="text">
						<icon class="iconfont icon-add"></icon>加餐
					</view>
				</view>
			</view>
			<!--  -->
			<view class="list" v-if="list.length">
				<view class="listbox" v-for="(ite,ind) in list" :key="ind">
					<view class="left">
						<view class="title">{{ite.name}}</view>
						<view class="kcalval">
							<text>{{ite.val}}</text>{{ite.unit}}
						</view>
					</view>
					<view class="right">
						<view class="item" v-for="(it,id) in ite.list" :key="id">
							<text>{{it.name}}</text>
							<text>{{it.weight}}</text>
							<text>{{it.val}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="nolist list">
				<icon class="iconfont icon-zanwushuju"></icon>
				<text>还没有记录，点击上方按钮添加</text>
			</view>
		</view>
		<view v-else class="list2" @click="handleEditUser()">
			<view class="nolist">
				<icon class="iconfont icon-zanwushuju"></icon>
				<text>完善资料后，记录更准确哦！</text>
			</view>
			<view class="btn">完善资料</view>
		</view>
		<!-- 加餐 -->
		<view class="wrapper activeList" v-if="isShow">
			<view class="bg" @click='isShow=false'>
				<view class="addfood" @click.stop>
					<icon class="iconfont icon-error" @click='isShow=false'></icon>
					<view class="list">
						<view class="item" v-for="(ite,ind) in addfoodList" :key="ind"
							@click="handleAddFood(ite.id,ite.name)">
							<text class="name">{{ite.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	let next = 0
	import RenCalendar from '@/uni_modules/ren-calendar/ren-calendar.vue';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
	export default {
		data() {
			return {
				remaining_kcal: 0, //还能吃
				suggestion: { //建议摄入
					fat: "",
					kcal: "",
					protein: "",
					carbohydrate: "",
				},
				today_intake: { //已经摄入
					fat: "",
					kcal: "",
					protein: "",
					carbohydrate: "",
				},
				fatpercent: 0,
				carbohydratepercent: 0,
				proteinpercent: 0,
				list: [],
				isShow: false,
				chartData: {
					"series": [{
						"data": 0.8,
						"color": "#ff4c4f"
					}]
				},
				addfoodList: [{
						name: "早加餐",
						id: 3,
					},
					{
						name: "午加餐",
						id: 4,
					}, {
						name: "晚加餐",
						id: 5,
					}
				],
				markDays: {
					warning: [],
					success: [],
					error: [],
				},
				startDay: "",
				startM: "",
				endM: ""
			}
		},
		components: {
			RenCalendar,
			qiunDataCharts
		},
		computed: {
			...mapState(["user"]),
			userinfo() {
				return this.user.weight
			}
		},
		onLoad(options) {
			let that = this
			that.startM = that.$tools.getMonth(that.$tools.getTime(), 0).substring(0, 10)
			that.endM = that.$tools.getMonth(that.$tools.getTime(), 0).substring(11, 21)
			that.handleList()
		},
		onShow() {
			let that = this
			// 指定日期
			if (uni.getStorageSync("startDay")) {
				that.startDay = uni.getStorageSync("startDay");
				uni.removeStorageSync('startDay');
				let star1 = that.$tools.getMonth(that.$tools.getTime(), 0).substring(0, 10)
				let star2 = that.$tools.getMonth(that.startDay, 0).substring(0, 10)
				if (star2 != star1) {
					that.startM = that.$tools.getMonth(that.startDay, 0).substring(0, 10)
					that.endM = that.$tools.getMonth(that.startDay, 0).substring(11, 21)
					that.handleList()
				}
			} else {
				that.startDay = this.$tools.getDate("start")
			}
			that.handleCountFoodInfo()
		},
		methods: {
			// 页面信息
			handleCountFoodInfo() {
				let that = this
				that.$model.getCountFoodInfo({
					aud_id: that.user.aud_id,
					time: that.startDay
				}).then(res => {
					if (res.code != 0) return
					that.list = res.data.list
					that.remaining_kcal = res.data.remaining_kcal
					that.suggestion = res.data.suggestion
					that.today_intake = res.data.today_intake
					that.fatpercent = Number(res.data.today_intake.fat) / Number(res.data.suggestion.fat)*100
					that.carbohydratepercent = Number(res.data.today_intake.carbohydrate) / Number(res.data
						.suggestion.carbohydrate)*100
					that.proteinpercent = Number(res.data.today_intake.protein) / Number(res.data.suggestion
						.protein)*100
					that.chartData.series[0].data = Number(res.data.today_intake.kcal) / Number(res.data.suggestion
						.kcal)
					console.log("111111", res)
				})
			},
			//日期列表信息
			handleList() {
				let that = this
				that.$model.getMyLogList({
					aud_id: that.user.aud_id,
					s_time: that.startM,
					e_time: that.endM
				}).then(res => {
					if (res) {
						for (var i = 0; i < res.pkList.list.length; i++) {
							if (Date.parse(that.endDate) == Date.parse(res.pkList.list[i].time)) {
								that.infoList.push(res.pkList.list[i]);
							}
							if (res.pkList.list[i].describe == "超标") {
								that.markDays.error.push(res.pkList.list[i].time);
							}
							if (res.pkList.list[i].describe == "达标") {
								that.markDays.success.push(res.pkList.list[i].time);
							}
							if (res.pkList.list[i].describe == "不达标") {
								that.markDays.warning.push(res.pkList.list[i].time);
							}
						}
					}
				})
			},
			// 添加的食材
			getAddFood(list) {
				let that = this
				that.list.push(list)
				console.log("list", that.list, that.list.sort())
			},
			// 日期选择
			maskClick(data) {
				let that = this
				that.list = []
				that.startDay = data.date
				that.handleCountFoodInfo()
				console.log('maskClick事件:', data);
			},
			// 上月
			onMonthClickPre(data) {
				let that = this
				that.markDays = {
					warning: [],
					success: [],
					error: [],
				}
				that.startM = data.substring(0, 10)
				that.endM = data.substring(11, 21)
				that.handleList()
			},
			onMonthClickNext(data) {
				console.log("下月", data)
			},
			// 设置
			handleSet() {
				uni.navigateTo({
					url: "/pageTwo/count/setting"
				})
			},
			// 完善资料
			handleEditUser() {
				uni.navigateTo({
					url: "/pageTwo/me/userEdit?type=add"
				})
			},
			// 添加食物
			handleAddFood(ind, name) {
				this.isShow = false
				uni.navigateTo({
					url: "/pageTwo/count/food?name=" + name + '&ind=' + ind
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 15px;
	}

	.box {
		width: 100%;
	}

	.calendar {
		text-align: center;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		height: 40px;
		line-height: 40px;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;
	}

	.kcal {
		width: calc(100% - 20px);
		margin-bottom: 15px;
		background: #fff;
		border-radius: 5px;
		padding: 10px;
		position: relative;
		margin-top: 60px;

		.set {
			position: absolute;
			right: 15px;
			width: 50px;
			height: 50px;
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			font-weight: bold;
			z-index: 18;

			icon {
				font-size: 22px;
			}
		}

		.top {
			margin-left: 5px;
			position: relative;

			.left {
				width: 300rpx;
				height: 300rpx;
				position: relative;

				.center {
					position: absolute;
					top: 0;
					text-align: center;
					width: 300rpx;
					height: 300rpx;
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					text {
						display: inline-block;
						font-size: 22px;
						font-weight: bold;
					}
				}
			}

			.right {
				position: absolute;
				left: 65%;
				height: 300rpx;
				top: 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				flex-direction: column;

				.num {
					font-size: 24px;
					font-weight: bold;
					width: 100%;
					display: inline-block;
					margin-top: 5px;
				}
			}
		}

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

			.item {
				width: 30%;

				.bold {
					width: 100%;
					background: #eaeaea;
					border-radius: 6px;
					margin-top: 5px;
					text-align: right;
					font-weight: 500;
					font-size: 12px;
					height: 15px;
					line-height: 15px;
					position: relative;

					text {
						position: absolute;
						z-index: 6;
						right: 8px;
					}
				}

				.val {
					position: absolute;
					left: 0;
					background: #f9ce27;
					height: 15px;
					border-radius: 10px;
					z-index: 2;
				}
			}
		}
	}

	.tabbar {
		width: 100%;
		background: #fff;
		border-radius: 10px;
		padding: 10px 0;
		display: flex;
		margin-bottom: 15px;
		justify-content: space-between;

		.type {
			width: 20%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;

			.t-icon {
				width: 35px;
				height: 35px;
				font-size: 28px;
			}

			.text {
				width: 100%;
				text-align: center;
				margin-top: 5px;
				display: flex;
				justify-content: center;

				icon {
					font-size: 14px;
				}
			}
		}
	}

	.list {
		width: 100%;
		padding-bottom: 50px;

		.listbox {
			width: calc(100% - 20px);
			padding: 10px;
			border-radius: 10px;
			background-color: #fff;
			margin-top: 15px;
		}

		.left {
			width: 100%;
			margin-bottom: 10px;
			display: flex;
			align-items: center;

			.title {
				font-size: 16px;
				font-weight: bold;
			}

			text {
				font-weight: bold;
				margin-right: 5px;
				margin-left: 15px;
			}

		}

		.right {
			width: 100%;

			.item {
				height: 35px;
				line-height: 35px;
				border-bottom: 1px solid #f7f7f7;
				display: flex;
				justify-content: space-between;

				:nth-child(1) {
					width: 45%;
				}

				:nth-child(2) {
					width: 25%;
					text-align: left;
				}

				:nth-child(3) {
					width: 30%;
					text-align: right;
				}
			}
		}
	}

	.nolist {
		font-size: 12px;
		color: #999;
		padding: 30px 10px;
		text-align: center;
		width: auto;

		icon {
			font-size: 50px;
			color: #999;
			display: flex;
			justify-content: center;
			margin-bottom: 10px;
		}
	}

	.list2 {
		margin-top: 45%;

		.btn {
			color: #fff;
			height: 32px;
			line-height: 32px;
		}
	}

	.addfood {
		background-color: #fff;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10px 10px 0 10px;
		border-radius: 10px 10px 0 0;

		.iconfont {
			position: absolute;
			right: 7px;
			top: -10px;
			background: #f7f7f7;
			border-radius: 50%;
			font-size: 30px;
		}

		.list {
			padding-bottom: 0px;

			.item {
				height: 40px;
				line-height: 40px;
				border-bottom: none;
			}

			.name {
				width: 100%;
				text-align: center;
			}

			:nth-child(2).item {
				border-bottom: 1px solid #dfdfdf;
				border-top: 1px solid #dfdfdf;
			}
		}
	}
</style>