kitchendDevice/pageTwo/me/menudetail.vue

<template>
	<view class="content addFood">
		<!-- 封面 -->
		<view class="topimg">
			<image :src="info.FMimg" mode="aspectFill"></image>
		</view>
		<!-- 信息 -->
		<view class="title">
			<view class="table">{{info.title}}</view>
			<view class="user">
				<view class="left">
					<image :src="info.user.headimg"></image>
					<text>{{info.user.name}}</text>
				</view>
				<view class="right" v-if="type!='菜谱预览'">
					<icon class="t-icon" :class="[info.user.iszan?'t-icon-icon3':'t-icon-icon_collect']"></icon>
					<text>{{info.user.zan}}</text>
				</view>
			</view>
		</view>
		<!-- 食材 -->
		<view class="food">
			<view class="desc">
				{{info.content}}
			</view>
			<view class="h4">
				所需食材
				<view class="close" @click="handleWeight" v-if="type!='菜谱预览'">
					<image src="../../static/lianjie.png"></image>
					连接称重
				</view>
			</view>
			<view class="foodlist">
				<view class="item" v-for="(ite,ind) in info.list" :key="ind" v-if="info.list&&info.list.length">
					<view class="name">{{ite.name}}</view>
					<view class="weight">
						{{ite.weight}}{{ite.unit}}
					</view>
				</view>
			</view>
		</view>
		<!-- 步骤 -->
		<view class="step">
			<view class="stepList" v-for="(ite,ind) in info.stepList" :key="ind"
				v-if="info.stepList&&info.stepList.length">
				<view class="top">
					<text>步骤{{ind+1}}</text>
				</view>
				<view class="right">
					<view class="desc">
						{{ite.content}}
					</view>
					<view class="image">
						<image :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="foot" v-if="type!='菜谱预览'">
			<view class="item" @click="handleCang()">
				<icon class="t-icon" :class="[info.user.iszan?'t-icon-icon3':'t-icon-icon_collect']"></icon>
				<text>收藏</text>
			</view>
			<view class="item" @click="handleshare()">
				<icon class="iconfont icon-a-fenxiang2"></icon>
				<text>分享</text>
			</view>
			<view class="item" v-if="type=='我的菜谱'" @click="handleEdit()">
				<icon class="iconfont icon-bianji"></icon>
				<text>编辑</text>
			</view>
			<view class="item" v-if="type=='我的菜谱'" @click="handledel()">
				<icon class="iconfont icon-ashbin"></icon>
				<text>删除</text>
			</view>
		</view>
		<!--蓝牙连接区  -->
		<view class="wrapper" v-if="isBle">
			<view class="bg" @click="isBle = false">
				<view class="box weightBox" @click.stop>
					<view class="table">
						<text>备料</text>
						<icon class="iconfont icon-error" @click='isBle=false'></icon>
					</view>
					<view class="foodlist">
						<view class="text">
							<text>食材</text>
							<text>建议</text>
							<text>重量</text>
							<text>热量</text>
							<text>重秤</text>
						</view>
						<view class="item" v-for="(ite,ind) in info.list" :key="ind" v-if="info.list&&info.list.length">
							<view class="name">{{ite.name}}</view>
							<view class="num">
								{{ite.weight}}{{ite.unit}}
							</view>
							<view class="num" v-if="ite.newweight">
								{{ite.newweight}}{{ite.newunit}}
							</view>
							<view class="num" v-if="ite.newkcal">
								{{ite.newkcal}}
							</view>
							<view class="edit" @click="handlechongzhi(ite,ind)" v-if="ite.newweight">
								<icon class="iconfont icon-reset"></icon>
							</view>
							<view class="kcal" v-if="activeType.id ==ite.id&&!ite.newweight">
								正在称重...
							</view>
						</view>
					</view>
					<view class="groupbtn" v-if="isWeightType&&iSWeightSub">
						<view @click="handleWeightType(1)">累计称重</view>
						<view @click="handleWeightType(0)">分类称重</view>
					</view>
					<view class="title" v-if="!isWeightType&&iSWeightSub">
						<view class="name">{{activeType.name}}</view>
						<blue-tooth @handleDetailNext="handleDetailNext" @handleDetailSub="handleDetailSub"
							:weightType="weightType" :isLast="isLast" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import blueTooth from "../../components/bluetooth.vue"
	export default {
		data() {
			return {
				type: "",
				info: {},
				weightType: 2,
				activeType: {},
				isBle: false,
				isWeightType: true,
				iSWeightSub: true,
				listInd: 0,
				isLast: false,
			}
		},
		components: {
			blueTooth
		},
		onLoad(options) {
			let that = this
			let info = {}
			if (options && options.info) {
				info = JSON.parse(options.info)
				that.type = info.pageName
				that.info = info
			} else {
				that.type = options.title
				that.info = that.$json.menudetail
			}
			console.log("type", options, that.type)
		},
		methods: {
			//连接称重
			handleWeight() {
				let that = this
				that.isBle = true
				that.isLast = false
				that.activeType = {}
				that.iSWeightSub = true
				that.isWeightType = true
			},

			// 下一位
			handleDetailNext(weight, dw, kcal) {
				let that = this
				console.log("下一位id", that.activeType.id)
				let ind = that.info.list.findIndex(ite => ite.id == that.activeType.id)
				that.info.list[ind].newweight = weight
				that.info.list[ind].newunit = dw
				that.info.list[ind].newkcal = kcal
				that.listInd = that.listInd + 1
				that.activeType = that.info.list[ind + 1]
				if (that.listInd == that.info.list.length - 1 || that.listInd == that.info.list.length) {
					that.isLast = true
				}
				console.log("下一位序号", that.listInd)
			},
			// 结束称重
			handleDetailSub(weight, dw, kcal) {
				let that = this
				let ind = that.info.list.findIndex(ite => ite.id == that.activeType.id)
				that.info.list[ind].newweight = weight
				that.info.list[ind].newunit = dw
				that.info.list[ind].newkcal = kcal
				that.iSWeightSub = false
				console.log("称重完成", weight, dw, kcal)
			},
			//重置
			handlechongzhi(ite, ind) {
				let that = this
				that.listInd = ind
				that.isLast = false
				that.activeType = ite
				that.iSWeightSub = true
				that.isWeightType = false
				that.info.list[ind].newweight = ""
				that.info.list[ind].newunit = ""
				that.info.list[ind].newkcal = ""
				if (that.listInd == that.info.list.length - 1 || that.listInd == that.info.list.length) {
					that.isLast = true
				}
				console.log("重置", ind, that.info.list.length)
			},
			//称重类型选择
			handleWeightType(ind) {
				this.weightType = ind
				this.isLast = false
				this.isWeightType = false
				this.activeType = this.info.list[0]
			},
			handleCang() {
				this.$tools.msg("收藏")
			},
			handleshare() {
				this.$tools.msg("分享")
			},
			handleEdit() {
				this.$tools.msg("编辑")
			},
			handledel() {
				this.$tools.msg("删除")
			}
		}
	}
</script>

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

	.topimg {
		width: 100%;
		height: 320px;
		background: #fff;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		margin-bottom: 10px;
		overflow: hidden;
		position: relative;

		.iconfont {
			font-size: 30px;
			color: $mainColor;
		}

		text {
			display: inline-block;
			width: 100%;
			text-align: center;
			font-size: 12px;
			color: #999;
		}

		.text {
			font-size: 16px;
			color: #666;
			margin-bottom: 3px;
		}

		image {
			width: 100%;
			height: inherit;
		}
	}

	.step {
		.image {
			height: 320px;
			margin: auto;
			background: #f7f7f7;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;
			overflow: hidden;

			image {
				width: 100%;
				height: inherit;
				display: inline-table;
			}

			icon {
				font-size: 30px;
				color: #ff4c4f;
				margin-bottom: 5px;
			}
		}
	}

	.title {
		padding: 10px;

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

		.user {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 15px;

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

				image {
					width: 22px;
					height: 22px;
					margin-right: 5px;
				}
			}

			.right {
				display: flex;
			}
		}
	}

	.desc {
		width: 100%;
		line-height: 25px;
		margin-bottom: 10px;
	}

	.h4 {
		margin: 10px 0;
		padding-top: 10px;
		border-top: 1px solid #f7f7f7;

		.close {
			color: #fff;
			width: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10px;
			background-color: $mainColor;

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

	.step {
		margin-bottom: 60px;
	}

	.foodlist {
		border-radius: 10px;
		background: #fff;

		.item {
			margin-top: 0 !important;
			border-radius: 0px !important;
			border-bottom: 1px solid #f7f7f7;
		}

		.name {
			border-right: none !important;
		}
	}

	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 5px 0px;
		border-radius: 10px 10px 0 0;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

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

			icon {
				font-size: 21px;
			}

			text {
				display: inline-block;
				text-align: center;
				width: 100%;
			}
		}
	}

	// 
	.weightBox {
		top: 32px;
		height: auto;
		border-radius: 0;

		.table {
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 18px;
			font-weight: bold;
			border-bottom: 1px solid #fff;

			icon {
				font-size: 45px;
				margin-top: -30px;
				background: #fff;
				border-radius: 50%;
				width: 45px;
				height: 45px;
				position: absolute;
				right: 16px;
			}
		}

		.foodlist {
			border-radius: 0;
			height: 40%;
			overflow: scroll;
			margin-top: 15px;

			.text {
				width: 100%;
				font-weight: bold;
				font-size: 14px;
				display: flex;
				height: 40px;
				line-height: 40px;

				text {
					width: 20%;
				}

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

				:nth-child(5) {
					width: 15%;
					text-align: right;
				}


			}

			.item {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				height: 40px;
				line-height: 40px;
				font-size: 16px;

				view {
					width: 20%;
					text-align: left;
				}

				:nth-child(5) {
					width: 15%;
					text-align: right;
				}
			}

			.kcal {
				width: 60% !important;
				text-align: center !important;
			}

			.name {
				width: auto;
				float: left;
				font-size: 14px;
				font-weight: 500;
				width: 25% !important;
			}
		}

		.title {
			width: 100%;
			padding: 0;
			margin-top: 10px;
			overflow: hidden;
			position: absolute;
			bottom: 10px;
			top: 50%;
			left: 0;
			right: 0;
			/deep/.weightPages {
				top: 15px;
				display: block;
			}
		}

		.groupbtn {
			position: absolute;
			left: 15px;
			right: 15px;
			width: auto;
			bottom: 50px;
		}
	}
</style>