kitchendDevice/pages/count/count.vue

<template>
	<view class="content">
		<view v-if="!token" class="list2" @click="handleLogin()">
			<view class="nolist">
				<icon class="iconfont icon-zanwushuju"></icon>
				<text>登录后查看更多哦！</text>
			</view>
			<view class="btn">登录</view>
		</view>
		<view v-else class="content_box">
			<view class="set" @click="handleSet">
				<view class="date">{{foodInfo.date}}</view>
				<view class="icon">
					<icon class="iconfont icon-shezhi1"></icon>
				</view>
			</view>
			<view class="box" v-if="userinfo">
				<view class="kcal2">
					<view class="top">
						<view class="left ">
							<view class="center">
								可以吃
								<text>{{foodInfo.remaining_kcal}}</text>
								<view class="unit">Kcal</view>
							</view>
						</view>
						<view class="right">
							<view class="item border-bottom">
								<text class="name">已摄入</text>
								<text class="bold">
									{{foodInfo.today_intake.kcal}}千卡
								</text>
							</view>
							<view class="item">
								<text class="name">碳水</text>
								<text class="bold">
									{{foodInfo.today_intake.carbohydrate}}/{{foodInfo.suggestion.carbohydrate}}
								</text>
							</view>
							<view class="item">
								<text class="name">脂肪</text>
								<text class="bold">
									{{foodInfo.today_intake.fat}}/{{foodInfo.suggestion.fat}}
								</text>
							</view>
							<view class="item">
								<text class="name">蛋白</text>
								<text class="bold">
									{{foodInfo.today_intake.protein}}/{{foodInfo.suggestion.protein}}
								</text>
							</view>
						</view>
					</view>
				</view>

				<!--  -->
				<view class="tools">
					<view class="type" @click="handleAddFood(0,'早餐')">
						<image src="/static/zao.png"></image>
						<view class="text">
							<icon class="iconfont icon-add"></icon>早餐
						</view>
					</view>
					<view class="type" @click="handleAddFood(1,'午餐')">
						<image src="/static/wu.png"></image>
						<view class="text">
							<icon class="iconfont icon-add"></icon>午餐
						</view>
					</view>
					<view class="type" @click="handleAddFood(2,'晚餐')">
						<image src="/static/wan.png"></image>
						<view class="text">
							<icon class="iconfont icon-add"></icon>晚餐
						</view>
					</view>
					<view class="type" @click="isShow = true">
						<image src="/static/jia.png"></image>
						<view class="text">
							<icon class="iconfont icon-add"></icon>加餐
						</view>
					</view>
				</view>
				<!--  -->
				<view class="tabbar-box">
					<view class="tabbar">
						<view @click="index=0" :class="[index==0?'active':'']">饮食记录</view>
						<view @click="index=1" :class="[index==1?'active':'']">历史记录</view>
					</view>
					<view class="list" v-if="foodInfo.list.length">
						<view class="listbox" v-for="(ite,ind) in foodInfo.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">
								<uni-swipe-action>
									<uni-swipe-action-item v-for="(it,id) in ite.list" :key="id"
										:right-options="actionOptions" @click="delAcitionItem(it)">
										<view class="item" @click="showFoodDetail(it)">
											<image :src="it.pic_url" mode="aspectFill"></image>
											<text>{{it.name}}</text>
											<text>{{it.weight}}</text>
											<text>{{it.val}}千卡</text>
										</view>
									</uni-swipe-action-item>
								</uni-swipe-action>
							</view>
						</view>
					</view>
					<view v-else class="nolist list">
						<image src="/static/none.png"></image>
						<text>暂无打卡记录</text>
						<text>点击上方按钮打卡吧</text>
					</view>
				</view>
			</view>
			<view v-else class="list2" @click="handleEditUser()">
				<view class="nolist">
					<image src="/static/none.png"></image>
					<text>完善资料后，记录更准确哦！</text>
				</view>
				<view class="btn">完善资料</view>
			</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>
		<!-- 营养含量分析 -->
		<uni-drawer ref="showRight" mode="right" width="300">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="foodDetail">
					<view class="foodInfo">
						<image :src="activeFoodDetail.pic_url" mode="aspectFill"></image>
						<view class="info">
							<view class="name">{{activeFoodDetail.name}}</view>
							<view class="kcal">{{activeFoodDetail.val}}千卡</view>
						</view>
					</view>
					<view class="foodContent">
						<view class="title">热量和营养</view>
						<view class="progress">
							<div class="chart-wrap">
								<qiun-data-charts type="ring" :opts="opts" :canvas2d="true" canvasId="foodCharts"
									:chartData="chartData2" :cHeight="250" :cWidth="250" />
								<view class="uchart-kcal">{{activeFoodDetail.val}}</view>
							</div>
							<view class="info" v-if="activeFoodDetail.nutrients_four">
								<view class="info-item" v-for="(item,index) in activeFoodDetail.nutrients_four.slice(1)"
									:key="index">
									<view class="color" :style="{'background-color':`${item.color}`}"></view>
									<view>{{item.name}}：{{item.proportion}}%</view>
								</view>
							</view>
						</view>
						<view class="tips">
							<text>营养素</text>
							<text>{{activeFoodDetail.weight}}含量</text>
						</view>
						<view class="foodDetailList">
							<view class="foodDetailItem" v-for="(item,index) in activeFoodDetail.nutrients_list"
								:key="index">
								<view class="name">{{item.name_ch}}</view>
								<view class="value">{{item.value}}{{item.unit}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	let next = 0
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
	export default {
		data() {
			return {
				token: "",
				index: 0,
				opts: {
					dataLabel: false,
					color: ["#5180D8", "#ED7886", "#FFB169"],
					background: "transparent",
					canvas: {
						background: "transparent"
					},
					legend: {
						show: false // 这个设置将隐藏图例
					},
					title: {
						name: "",
						fontSize: 20,
						offsetY: -3,
						color: "#333333"
					},
					subtitle: {
						name: "千卡",
						fontSize: 14,
						offsetY: 12,
						color: "#888888"
					},
					extra: {
						ring: {
							ringWidth: 10,
							labelWidth: 0,
							border: false,
							// customRadius: 50
						}
					}
				},
				isShow: false,
				chartData2: {},
				addfoodList: [{
						name: "早加餐",
						id: 3,
					},
					{
						name: "午加餐",
						id: 4,
					}, {
						name: "晚加餐",
						id: 5,
					}
				],
				markDays: {
					warning: [],
					success: [],
					error: [],
				},
				startDay: "",
				activeFoodDetail: {},
				actionOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						borderRadius: '10rpx'
					}
				}]
			}
		},
		components: {
			qiunDataCharts
		},
		computed: {
			...mapState(["user", "countFoodInfo"]),
			userinfo() {
				return this.user.aud_id
			},
			foodInfo() {
				return this.countFoodInfo
			}
		},
		onLoad() {
			let that = this
			that.token = uni.getStorageSync('token')
			// 指定日期
			if (uni.getStorageSync("startDay")) {
				that.startDay = uni.getStorageSync("startDay");
				uni.removeStorageSync('startDay');
			} else {
				that.startDay = this.$tools.getDate("start")
			}
			that.$store.dispatch("getCountFoodInfo", {
				aud_id: that.user.aud_id,
				time: that.$tools.getDate("start")
			})
		},
		methods: {
			// 详情
			showFoodDetail(item) {
				console.log("item", item)
				let chart_data = []
				this.activeFoodDetail = item
				this.$refs.showRight.open();
				this.opts.color = []
				for (let i = 1; i < item.nutrients_four.length; ++i) {
					this.opts.color.push(item.nutrients_four[i].color)
					chart_data.push({
						name: item.nutrients_four[i].name,
						value: Number(item.nutrients_four[i].proportion),
					})
				}
				this.chartData2 = JSON.parse(JSON.stringify({
					series: [{
						data: chart_data
					}]
				}));
			},

			// 添加的食材
			getAddFood(list) {
				let that = this
				that.list.push(list)
				console.log("list", that.list, that.list.sort())
			},
			// 设置
			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/search?name=" + name + '&ind=' + ind
				})
			},
			// 去登录
			handleLogin() {
				uni.reLaunch({
					url: "/pageTwo/login/login"
				})
			},
			delAcitionItem(item) {
				uni.showModal({
					content: `是否删除[${item.name}]？`,
					success: (res) => {
						if (res.confirm) {
							this.$model.delCEatAction({
								aud_id: this.user.aud_id,
								eat_log_id: item.id
							}).then(res => {
								this.handleCountFoodInfo()
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 10px;
		background-color: #fff;
	}

	.content_box {
		width: 100%;
	}

	.box {
		width: 100%;
	}

	.set {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		font-size: 16px;
		font-weight: bold;

		.icon {
			background: #d1f2ed;
			border-radius: 50%;
			font-size: 28px;
			color: #66cccc;
			text-align: center;
			padding: 5px;
		}
	}

	.kcal2 {
		width: calc(100% - 20px);
		margin-bottom: 15px;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		position: relative;
		margin-top: 15px;
		background: #f3fffd;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		.left {
			width: 300rpx;
			height: 300rpx;
			position: relative;
			border-radius: 50%;
			background: #d1f2ed;
			border: 5px solid #66cccc;
			display: flex;
			justify-content: center;
			align-items: center;

			.center {
				position: absolute;
				text-align: center;
				width: 260rpx;
				height: 260rpx;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #fff;
				border-radius: 50%;

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

			}
		}

		.right {
			position: absolute;
			left: 50%;
			bottom: 0;
			top: 0px;
			right: 0;
			display: flex;
			flex-wrap: wrap;
			padding: 0 10px;
			border-radius: 0 10px 10px 0;
			justify-content: center;
			flex-direction: column;
			background: #d1f2ed;

			.item {
				display: flex;
				justify-content: space-between;
				height: 35px;
				line-height: 35px;
			}

			.border-bottom {
				border-bottom: 1px solid #dfdfdf;
			}
		}
	}

	.tools {
		width: 100%;
		background: #fff;
		border-radius: 10px;
		padding: 10px 0;
		display: flex;
		margin-bottom: 15px;
		justify-content: space-between;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

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

			image {
				width: 45px;
				height: 45px;
			}

			.text {
				width: 100%;
				text-align: center;
				display: flex;
				justify-content: center;
				font-weight: bold;

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

	.tabbar-box {
		background: #f3fffd;
		border-radius: 10px;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		.tabbar {
			height: 45px;
			width: 100%;
			display: flex;
			justify-content: space-between;

			view {
				width: 50%;
				line-height: 45px;
				text-align: center;
			}

			.active {
				border-radius: 10px;
				color: $maincolor;
				background: #fff;
			}
		}
	}

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

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

		.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: 40px;
				line-height: 40px;
				border-bottom: 1px solid #f7f7f7;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 12rpx;
					margin-right: 10rpx;
				}

				:nth-child(2) {
					width: 40%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

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

				:nth-child(4) {
					width: 26%;
					margin-right: 6rpx;
					text-align: right;
				}
			}
		}
	}

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

		image {
			width: 50px;
			height: 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;
			}
		}
	}

	.foodDetail {
		background-color: #F7F7F7;
		padding: 20rpx;
		box-sizing: border-box;

		.foodInfo {
			display: flex;
			width: 100%;
			padding: 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-sizing: 0 0 20rpx #f1f1f1;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 15rpx;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 30rpx;

				.name {
					font-size: 28rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
				}

				.kcal {
					width: 100% !important;
					font-size: 24rpx;
					color: #666;
					padding: 0 !important;
					margin: 0 !important;
				}
			}
		}

		.foodContent {
			width: 100%;
			padding: 30rpx;
			margin-top: 16rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-sizing: 0 0 20rpx #f1f1f1;

			.title {
				font-size: 28rpx;
				font-weight: 600;
			}

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

				.chart-wrap {
					position: relative;
					width: 250rpx;
					height: 250rpx;
					margin-top: -30rpx;

					.uchart-kcal {
						position: absolute;
						left: 60rpx;
						top: 120rpx;
						width: 130rpx;
						font-size: 40rpx;
						text-align: center;
						z-index: 9;
					}
				}

				.info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 24rpx;

					.info-item {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.color {
							width: 6rpx;
							height: 20rpx;
							margin-right: 10rpx;
							border-radius: 3rpx;
						}
					}
				}
			}

			.tips {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f1f1f1;
				padding: 16rpx 0;
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.foodDetailList {
				margin-top: 10rpx;

				.foodDetailItem {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					box-sizing: border-box;

					.name {
						font-size: 24rpx;
						color: #777;
					}

					.val {
						font-size: 24rpx;
						font-weight: 700;
						color: #333;
					}
				}
			}
		}
	}
</style>