jyy-smart-canteen-h5/pages/weeklyMenu/menuDetail.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view>
		<view class="image-box">
			<image style="width: 100%;height: 100%;" :src="dashesData.dishesImgUrl"></image>
			<!-- <image style="width: 100%;height: 100%;" src="../../static/images/code.png"></image> -->
		</view>
		<view class="menuContent">
			<view class="menuInfo">
				<view style="color:#DD7D3C;font-size: 36rpx;font-weight: 600;margin-bottom: 10px;margin-left: 20px;">￥{{(menuData.dishesDetailList[0].prefPrice/100).toFixed(2)}}</view>
				<view style="width: 100%;height: 30px;display: flex;align-items: center;justify-content: space-between;">
					<view style="font-size: 36rpx;font-weight: 600;margin-left: 20px;">{{dashesData.dishesName}}</view>
					<view class="star-icon" style="display: flex;" @click="addCollect" v-if="dashesData.isFavorites==2">
						<u-icon name="star" size="22" color="#ccc"></u-icon><text style="font-size: 30rpx;">收藏</text>
					</view>
					<view class="star-icon" style="display: flex;" @click="cancelCollect" v-if="dashesData.isFavorites==1">
						<u-icon name="star-fill" size="22" color="#ff9900"></u-icon><text style="font-size: 30rpx;">已收藏</text>
					</view>
				</view>
			</view>
			<view class="tab-navigation">
				<Tabs :tabList="tabList" @changeTab="changeTab" />
			</view>
			<view class="tab-content">
				<view class="info-box" v-if="hIndex==0">
					<view style="margin-bottom: 20px;word-break: break-all;">
						<text style="color: #959FA4;margin-right: 20px;">菜品简介</text>
						<text style="word-break: break-all;">{{dashesData.intro||'-'}}</text>
					</view>
					<view style="margin-bottom: 20px;word-break: break-all;">
						<text style="color: #959FA4;margin-right: 20px;">主料</text>
						<text>
							{{dashesData.mainMaterialStr||'-'}}
						</text>
					</view>
					<view style="margin-bottom: 20px;word-break: break-all;">
						<text style="color: #959FA4;margin-right: 20px;">辅料</text>
						<text>
							{{dashesData.subMaterialStr||'-'}}
						</text>
					</view>
					<!-- <view style="margin-bottom: 20px;">
						<text style="color: #959FA4;">口味</text>
						<text style="margin-left: 20px;word-break: break-all;">-</text>
					</view> -->
				</view>
				<view class="nutrition-box" v-if="hIndex==1">
					<view class="nutrition-box-item">
						<view>项目(份)</view> 
						<view>热量(份)</view>
						<view>蛋白质(份)</view>
						<view>脂肪(份)</view>
						<view>碳水化合物(份)</view>
						<view>膳食纤维(份)</view>
						<view>胆固醇(份)</view>
						<view>钙(份)</view>
						<view>钠(份)</view>
					</view>
					<view class="nutrition-box-item">
						<view>含量</view> 
						<view>{{dashesData.dishesDetailList[0].calories||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].protein||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].fat||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].carbohydrate||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].dietaryFiber||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].cholesterol||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].carotene||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].calcium||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].sodium||'-'}}</view>
					</view>
					<view class="nutrition-box-item">
						<view>NRV%</view>
						<view>{{dashesData.dishesDetailList[0].caloriesNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].proteinNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].fatNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].carbohydrateNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].dietaryFiberNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].cholesterolNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].caroteneNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].calciumNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].sodiumNrv||'-'}}</view>
					</view>
				</view>
				<view class="evaluate-box" v-if="hIndex==2">
					<view style="width: 100%;height: 30vh;display: flex;justify-content: center;align-items: center;" v-if="totalCount==0">
						暂无评论...
					</view>
					<view style="width: 92%;height: 30px;margin: 10rpx auto; display: flex;justify-content: space-between;align-items: center;" v-if="totalCount>0">
						<text style="font-size: 28rpx;font-weight: bold;margin-left: 20rpx;">评价</text>
						<text style="font-size: 24rpx;margin-left: 20rpx;" @click="goAllEvaluate">查看全部{{totalCount}}个></text>
					</view>
					<view style="width: 100%;height: 40vh;padding: 20rpx;" v-if="totalCount>0">
						<view v-for="(item,index) in evaluaList" :key="index" v-if="index<3" style="width: 100%;height: auto;border-bottom: 1px solid #ccc;">
							<view style="width: 94%;margin: 10rpx auto;display: flex;">
								<view style="width: 100rpx;height: 100rpx;margin: 10rpx;">
									<image :src="item.custPhotoUrl? item.custPhotoUrl:'../../static/images/user.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
								</view>
								<view style="width: 80%;height: 100rpx;">
									<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;padding-top: 10rpx;">
										<text>{{item.userName}}</text>
										<text>{{item.evaluaTime}}</text>
									</view>
									<view style="display: flex;margin-bottom: 10rpx;">
										<u-icon v-for="n in 5" :key="n" :name="n <= item.starLevel ? 'star-fill' : 'star-fill'"
											:color="n <= item.starLevel ? '#ff9933' : '#ccc'" size="20"></u-icon>
									</view>
								</view> 
							</view>
							<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;display: flex;align-items: center;" v-if="item.pictureList&&item.pictureList.length>0">
								<view v-for="(imgItem,imgIndex) in item.pictureList" :key="imgIndex" style="margin-bottom: 10rpx;">
									<image :src="imgItem" mode="" style="width: 100rpx;height: 100rpx;"></image>
								</view>
							</view> 
							<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;">
								{{item.description||"该用户没做评价"}}
							</view> 
						</view> 
					</view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import { getMenudishesDetailAPI,addCollectionDishesAPI,delCollectionDishesAPI,getMenuEvaluaorderAPI } from '../../api/week-menu/index'
import Tabs from '@/pages/components/Tabs.vue'
export default {
	components: { Tabs },
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			menuData:{},
			dashesData:{},
			tabList: ["菜品信息","营养信息","评价"],//tab列表
			hIndex:0,
			evaluaList:[],
			totalCount:0
		}
	},
	onLoad(options) {
		console.log(options) 
		this.menuData = JSON.parse(options.params) 
		this.getMenudishesDetail()
		console.log(this.menuData)
		this.getMenuEvaluaorderList() 
	},
	methods: {
		//获取菜品详情
		async getMenudishesDetail(){
			let param = {
				"userId": uni.getStorageSync('userId'),
				"dishesId": this.menuData.dishesDetailList[0].dishesId,
				"detailId": this.menuData.detailId,
				// "delFlag": 2
			}
			const res = await getMenudishesDetailAPI(param)
			if(res.code==200){
				this.dashesData = res.data; 
				if(this.dashesData.materialList&&this.dashesData.materialList.length>0){
					let arr1=[]
					let arr2=[]
					this.dashesData.materialList.forEach(item=>{
						if(item.materialType==1){ arr1.push(item.materialName) }
						if(item.materialType==2){ arr2.push(item.materialName) }
					})
					this.dashesData.mainMaterialStr = arr1.join("、")
					this.dashesData.subMaterialStr = arr2.join("、")
				}else{
					this.dashesData.mainMaterialStr = ""
					this.dashesData.subMaterialStr = ""
				}
				this.$forceUpdate()
				// this.$modal.msgError("收藏成功")
			}
			console.log(res) 
		}, 
		//获取菜品评价
		async getMenuEvaluaorderList(){
			console.log(this.menuData)
			let param = { 
				  "pageNum": 1,
				  "pageSize": 10,
				  "mealId": this.menuData.dishesDetailList[0].dishesId,  
			}
			const res = await getMenuEvaluaorderAPI(param)
			if(res.code==200){
				this.evaluaList = res.rows||[]
				this.totalCount = res.total
			}
			console.log(res) 
		},
		goAllEvaluate(){
			console.log(this.menuData)
			uni.navigateTo({
			  url: `/pages/weeklyMenu/evaluateCenter?params=${JSON.stringify(this.menuData)}`
			})
		},
		changeTab(index) { 
			this.hIndex=index
			console.log(this.hIndex)
		},
		//收藏
		async addCollect(){
			let param = {
				"dishesId":this.dashesData.dishesDetailList[0].dishesId,
				"userId":uni.getStorageSync('userId'),
				"stallId":this.menuData.stallId
			}
			const res = await addCollectionDishesAPI(param)
			console.log(res) 
			if(res.code==200){
				// this.$modal.msgError("收藏成功")
				uni.$u.toast('收藏成功')
				this.getMenudishesDetail()
			}
			
		},
		//取消收藏
		async cancelCollect(){
			let param = {
				"dishesIds":[this.dashesData.dishesDetailList[0].dishesId],
				// "userId":uni.getStorageSync('userId'),
			}
			const res = await delCollectionDishesAPI(param)
			console.log(res) 
			if(res.code==200){
				// this.$modal.msgError("收藏成功")
				uni.$u.toast('取消收藏成功')
				this.getMenudishesDetail()
			}
		}
		 
		// goMenuList(item){
		// 	uni.navigateTo({
		// 	  url: `/pages/weeklyMenu/menuList?params=${JSON.stringify(item)}`
		// 	})
		// }
  }
}
</script>

<style lang="scss" scoped>
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}
.image-box{
	width: 100%;
	height: 30vh;
	// background-color: #666;
}
.menuContent{
	width: 100%;
	height: 64vh;
	background-color: #fff;
	// border-top-right-radius: 20px;
	// border-top-left-radius: 20px;
	// background-color: #DD7D3C;
	// z-index: 999;
	// margin-top: -2.5vh;
}
.menuInfo{
	width: 94%;
	margin: 10rpx auto;
	height: auto;
}
.star-icon {
	padding: 8px;
}


.tab-navigation {
  display: flex;
  background-color: white;
  padding: 0px 16px 0 16px;
  margin-bottom: 10px;
}

.tab-content{
	width: 94%;
	margin: 10rpx auto;
	height: 50vh;
	.info-box{
		width: 94%;
		margin: 10rpx auto;
		height: 100%;
	}
	.nutrition-box{
		width: 94%;
		margin: 10rpx auto;
		height: 100%;
		color: #959FA4;
		// background-color: #DD7D3C;
		display: flex;
		justify-content: space-between;
		overflow-y: auto;
		
		.nutrition-box-item{
			width: 30%;
			margin: 0 2%;
			height: 100%;
			text-align: center;
			// background-color: #DD7D3C;
			view{
				margin-bottom: 10px;
				height: 20px;
			}
		}
		
	}
} 









.content-left{
	width: 20%;
	height: 82vh;
} 
.active2 {
	color: #DD7D3C;
	font-weight: bolder;
	font-size: 26rpx;
}

.content-right{
	width: 80%;
	height: 82vh;
}
.scroll-right-item{
	width: 100%;
	height: 300rpx;
	// background-color: #959FA4;
}
.image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}

 
</style>