kitchendDevice/pageTwo/count/setting.vue

<template>
	<view class="content">
		<!--  -->
		<view class="info" @click="handleEditUser">
			<view class="left">
				<image :src="userInfo.head_pic"></image>
				<view class="name overflow">{{userInfo.nickname}}</view>
				<view>{{userInfo.gender==1?'男':userInfo.gender==2?'女':'未知'}}</view>
				<view>{{userInfo.age}}岁</view>
			</view>
			<icon class="iconfont icon-bianji"></icon>
		</view>
		<!--  -->
		<view class="kcal" @click="handleEditKcal()">
			<view class="text">
				{{kcal.title}}
				<text>修改></text>
			</view>
			<view class="num">
				<text>{{kcal.suggestion_kcal_val}}</text>{{kcal.suggestion_kcal_unit}}
			</view>
			<view class="desc" v-for="(ite,ind) in kcal.describe">
				{{ite}}
			</view>
		</view>
		<!--  -->
		<view class="kcal">
			<view class="text">
				{{nutrition.title}}
			</view>
			<view class="num">
				<view class="item" v-for="(ite,ind) in nutrition.list">
					<icon class="iconfont" :class="ite.icon"></icon>
					<text>{{ite.name}}</text>
					<text>{{ite.proportion}}</text>
					<view class="val">{{ite.val}}{{ite.unit}}</view>
				</view>
				<!-- <view class="item">
					<icon class="iconfont icon-Sm-danbaizhi"></icon>
					<text>蛋白质</text>
					<text>17%</text>
					<view class="val">45g</view>
				</view>
				<view class="item">
					<icon class="iconfont icon-w_fat_normal"></icon>
					<text>脂肪</text>
					<text>30%</text>
					<view class="val">43g</view>
				</view> -->
			</view>
			<view class="desc" v-for="(ite,ind) in describe" v-if="describe.length">
				{{ite}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				kcal: {},
				nutrition: {},
				describe: [],
			}
		},
		computed: {
			...mapState(["user"]),
			userInfo() {
				return this.user
			}
		},
		onLoad() {
			this.handleList()
		},
		methods: {
			handleList() {
				let that = this
				that.$model.getCountSetKcal({
					aud_id: that.userInfo.aud_id
				}).then(res => {
					if (res.code == 0) {
						that.kcal = res.data.kcal
						that.nutrition = res.data.nutrition
						that.describe = res.data.describe ? res.data.describe : []
					}
				})
			},
			handleEditUser() {
				uni.navigateTo({
					url: "/pageTwo/me/userEdit?familayData=" + JSON.stringify(this.userInfo)
				})
			},
			handleEditKcal() {
				uni.navigateTo({
					url: "/pageTwo/count/KcalEdit?suggestion_kcal_range_val=" + this.kcal.suggestion_kcal_range_val
				})
			}
		}
	}
</script>

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

	.info {
		width: calc(100% - 20px);
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		align-items: center;
		margin: 15px 0;
		justify-content: space-between;

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

			.name {
				max-width: 50%;
				font-weight: bold;
			}

			view {
				margin-right: 15px;
			}

			image {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin-right: 10px;
				border: 1px solid #dfdfdf;
			}

		}

		icon {
			font-size: 20px;
		}
	}

	.kcal {
		width: 100%;
		background: #fff;
		border-radius: 10px;
		padding: 10px 0;
		margin-bottom: 15px;

		.text {
			padding: 5px 10px;
			display: flex;
			justify-content: space-between;
		}

		.num {
			width: 100%;
			text-align: center;
			margin: 15px 0;
			display: flex;
			justify-content: center;
			align-items: baseline;

			text {
				font-size: 25px;
				font-weight: bold;
				margin-right: 5px;
				color: $maincolor;
				border-bottom: 1px solid;
			}

			.item {
				display: flex;
				flex-wrap: wrap;
				width: 33.3%;
				justify-content: center;

				icon {
					font-size: 40px;
					color: $uni-color-warning;
					border-radius: 30%;
					padding: 5px;
					margin-bottom: 8px;
				}

				text {
					font-size: 14px;
					font-weight: 500;
					color: #666;
					display: inline-block;
					width: 100%;
					text-align: center;
					line-height: 20px;
					border-bottom: none;
				}

				.val {
					width: 100px;
					background: #f7f7f7;
					border-radius: 10px;
					margin: auto;
					margin-top: 8px;
					font-weight: bold;
					padding: 2px 0;
				}
			}
		}

		.desc {
			margin: 0 10px;
			font-size: 12px;
			color: #999;
			line-height: 20px;
		}
	}
</style>