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="blue-tooth">
				<blue-tooth :weightType="'2'" :btnType="'1'"></blue-tooth>
			</view>
			<!-- 每日摄入 -->
			<view class="box" v-if="user.aud_id!=''">
				<!-- 日期选择 -->
				<view class="data">
					<picker mode="date" :end="endDate" @change="changeClickDate"
						:value="foodInfo.date?foodInfo.date:endDate">
						<view>
							{{foodInfo.date?foodInfo.date:"请选择"}}
							<image src="/static/qie.png"></image>
						</view>
					</picker>
				</view>
				<!-- 能量摄入 -->
				<view class="everyDay">
					<view class="title">
						<view>热量摄入</view>
						<view class="icon" @click="handleSet">
							<icon class="iconfont icon-shezhi1"></icon>
						</view>
					</view>
					<view class="jishiqi">
						<view class="left">
							<view class="chart-wrap">
								<qiun-data-charts type="arcbar" :chartData="chartData" :cHeight="280" :cWidth="280"
									:canvas2d="true" canvasId="count1" />
								<view class="center">
									摄入
									<text>{{foodInfo.nutrients_four[0].today_intake}}</text>
									<view class="unit">Kcal</view>
								</view>
							</view>
							<view class="mubiao">
								目标：<text>{{foodInfo.nutrients_four[0].suggestion}}</text>kcal
							</view>
						</view>
						<view class="right">
							<view class="item" v-for="(ite,ind) in foodInfo.nutrients_four.slice(1)">
								<view class="left-icon">
									<image :src="ite.icon"></image>
									<view class="val" :style="{color:ite.color}">{{ite.proportion_fp||0}}%</view>
								</view>
								<view class="right-info">
									<view class="right-info-top">
										<text class="name">{{ite.name}}</text>
										<text class="">
											{{ite.today_intake||0}}/{{ite.suggestion||0}}g
										</text>
									</view>
									<view class="right-info-bottom">
										<view class="val" :style="{ width: ite.proportion + '%',background:ite.color}">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 早午晚餐 -->
				<view class="foodtools">
					<view class="type" v-for="(item,index) in foodInfo.list">
						<view class="title" @click="handledetail(index)">
							<view class="text">
								<image :src="item.icon"></image>
								<view>{{item.name}}</view>
								<text>{{item.val}}{{item.unit}}</text>
							</view>
							<view class="detail">
								餐食详情
								<uni-icons type="forward" size="20" color="#999"></uni-icons>
							</view>
						</view>
						<view class="list">
							<uni-swipe-action>
								<uni-swipe-action-item v-for="(ite,ind) in item.list" :key="ind"
									:right-options="actionOptions" @click="delAcitionItem(ite)">
									<view class="item" @click="showFoodDetail(ite)">
										<image :src="ite.pic_url" mode="aspectFill"></image>
										<view class="weight">
											<view>{{ite.name}}</view>
											<view class="size12 c999">{{ite.weight}}<text>|</text>{{ite.val}}kcal</view>
										</view>
									</view>
								</uni-swipe-action-item>
							</uni-swipe-action>
							<view class="add" @click="handleAddFood(item.name)">
								<text>+</text>添加食物
							</view>
						</view>
					</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 class="fenxi" @click="navTo('/pageTwo/count/everyDay?page=count')">
				<image src="/static/fenxi.png"></image>
				营养分析
			</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" :chartData="chartData2" :cHeight="280"
									:cWidth="280" :canvas2d="true" canvasId="count2"/>
							</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";
	import blueTooth from "../../components/bluetooth_food.vue"
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
	export default {
		data() {
			return {
				token: "",
				index: 0,
				opts: {
					background: "transparent",
					title: {
						name: "",
					},
				},
				chartData: {
					series: [{
						data: 0,
						color: "#3CB383"
					}]
				},
				isBle: true,
				// countWeight: 0,
				chartData2: {},
				activeFoodDetail: {},
				actionOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						borderRadius: '10rpx'
					}
				}]
			}
		},
		components: {
			blueTooth,
			qiunDataCharts
		},
		computed: {
			...mapState(["user", "countFoodInfo"]),
			foodInfo() {
				let that = this
				that.chartData.series[0].data = that.countFoodInfo.nutrients_four[0].proportion / 100
				return that.countFoodInfo
			},
			endDate() {
				return this.$tools.getDate("start")
			},
		},
		onShow() {
			let that = this
			that.token = uni.getStorageSync('token')
		},
		methods: {
			// 详情
			showFoodDetail(item) {
				console.log("item", item)
				let that = this
				let chart_data = []
				this.$refs.showRight.open();
				that.opts.color = []
				that.activeFoodDetail = item
				for (let i = 1; i < item.nutrients_four.length; ++i) {
					that.opts.color.push(item.nutrients_four[i].color)
					chart_data.push({
						name: item.nutrients_four[i].name,
						value: Number(item.nutrients_four[i].proportion),
					})
				}
				that.opts.title.name = that.activeFoodDetail.val
				that.chartData2 = JSON.parse(JSON.stringify({
					series: [{
						data: chart_data
					}]
				}));
			},
			changeClickDate(e) {
				this.$store.dispatch("getCountFoodInfo", {
					aud_id: this.user.aud_id,
					time: e.detail.value
				})
			},
			// 餐食详情
			handledetail(index) {
				uni.navigateTo({
					url: "/pageTwo/count/everyMeal?page=count&index=" + index
				})
			},
			// 设置
			handleSet() {
				uni.navigateTo({
					url: "/pageTwo/count/setting"
				})
			},
			// 完善资料
			handleEditUser() {
				uni.navigateTo({
					url: "/pageTwo/me/userEdit?type=add"
				})
			},
			// 添加食物
			handleAddFood(name) {
				this.isShow = false
				uni.navigateTo({
					url: "/pageTwo/count/search?name=" + name + "&time=" + this.foodInfo.date
				})
			},
			// 去登录
			handleLogin() {
				uni.reLaunch({
					url: "/pageTwo/login/login"
				})
			},
			// 功能页面跳转
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 删除食材
			delAcitionItem(item) {
				let that = this
				uni.showModal({
					content: `是否删除[${item.name}]？`,
					success: (res) => {
						if (res.confirm) {
							this.$model.delCEatAction({
								aud_id: that.user.aud_id,
								eat_log_id: item.id
							}).then(res => {
								that.$store.dispatch("getCountFoodInfo", {
									aud_id: that.user.aud_id,
									time: that.foodInfo.date
								})
								// 删除最新一天食物
								if (that.foodInfo.date == that.user.food_count.date) {
									that.$store.dispatch("getUserInfo")
								}
							})
						}
					}
				})
			}
		}
	}
</script>

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

	.content_box {
		width: 100%;
		padding-top: 90rpx;
	}

	.blue-tooth {
		padding: 15px;
		background: #fff;
		border-radius: 10px;
		margin-top: 15px;
	}

	.data {
		width: 100%;
		background: #fff;
		height: 90rpx;
		position: fixed;
		top: 0;
		z-index: 999;
		right: 0;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		picker {
			display: flex;
			width: 100%;
			height: 90rpx;
			position: relative;
			align-items: center;
			justify-content: center;
			font-weight: bold;

			view {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				bottom: 0;
				align-items: center;
				justify-content: center;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10px;
			}
		}

	}

	.chart-wrap {
		position: relative;
		width: 250rpx;
		height: 250rpx;
		margin-top: -30rpx;
		margin-left: -5px;
		display: flex;
		flex-wrap: wrap;

		.center {
			border: none;
			width: 280rpx;
			height: 210rpx;
			position: absolute;
			top: 64rpx;
		}
	}

	.everyDay {
		background: #fff;
		padding: 20rpx 20rpx 30rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		height: auto;
		overflow: hidden;

		.title {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 30rpx;

			.quan {
				margin-right: 70rpx;
			}
		}
	}

	.foodtools {
		margin-top: 30rpx;

		.type {
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.text {
					width: 50%;
					display: flex;
					align-items: center;

					view {
						font-size: 32rpx;
						font-weight: bold;
						margin: 0 20rpx;
					}
				}

				.detail {
					color: #999;
					display: flex;
					font-size: 24rpx;
					align-items: center;
				}
			}

			.list {
				width: 100%;
				margin-top: 30rpx;

				.item {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1px solid #f7f7f7;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						border: 1px solid #f7f7f7;
					}

					.weight {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;

						text {
							margin: 0 20rpx;
							color: #dfdfdf;
						}
					}

				}
			}

			.add {
				width: 100%;
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}




	.set {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: bold;

		.icon {
			background: #d1f2ed;
			border-radius: 50%;
			font-size: 56rpx;
			color: #66cccc;
			text-align: center;
			padding: 10rpx;
		}
	}

	.tools {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;
		display: flex;
		margin-bottom: 30rpx;
		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: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				border: 1px solid #f7f7f7;
			}

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

				icon {
					font-size: 28rpx;
				}
			}
		}
	}

	.nolist {
		font-size: 24rpx;
		color: #999;
		padding: 60rpx 20rpx;
		text-align: center;
		width: auto;

		image {
			width: 100rpx;
			height: 100rpx;
			color: #999;
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;
		}
	}


	.list2 {
		margin-top: 45%;

		.btn {
			color: #fff;
			height: 64rpx;
			line-height: 64rpx;
		}
	}

	.fenxi {
		color: $maincolor;
		width: 100%;
		background: #fff;
		border-radius: 10px;
		margin-bottom: 30px;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 5px;
		}
	}
</style>