Dining_Hall/pages/weeklyMenu/menuList.vue

<template>
	<view>
		<scroll-view class="scroll-view" scroll-x="true">
			<view class="scroll-view-item" v-for="(item,index) in daysList" :key="index" :class="hIndex == index ? 'active' : ''" @click="changeDay(index)">
				<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
					<view>{{item.dateValue}}</view>
					<view>{{item.weekValue}}</view>
					<view class="activeLine" v-if="hIndex == index"></view>
				</view>
			</view>  
		</scroll-view>
		<view class="tab-navigation">
			<Tabs :tabList="tabList" @changeTab="changeTab" />
		</view>
		<view class="menuContent">
			<scroll-view class="content-left" scroll-y="true">
				<view class="scroll-view-item" v-for="(item,index) in typeNameList" :key="index" :class="tIndex == index ? 'active2' : ''" @click="changeModel(index)">
					<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
						<view>{{item}}</view> 
					</view>
				</view>
			</scroll-view> 
			<scroll-view class="content-right" scroll-y="true">
				<view class="scroll-right-item" v-for="(item,index) in dishesList" :key="index" @click="goMenuList(item)">
					<view style="width: 100%;display: flex;align-items: center;">
						<view style="width: 30%;height: 100%;">
							<image class="image" :src="item.dishesImgUrl"></image>
						</view>
						<view style="width: 70%;height: 100%;">
							<view>{{item.dishesName}}</view>
							<view>食堂：{{item.canteenName}}</view>
							<view>档口：{{item.stallName}}</view> 
							<view>￥{{(item.dishesDetailList[0].dishesPrice/100).toFixed(2)}}</view> 
						</view>
					</view>
				</view>
			</scroll-view> 
		  
		  
		  
		  
		  
		</view>
	  
     
	</view>
</template>

<script>
import { getWeekDetailListAPI } from '../../api/week-menu/index'
import Tabs from '@/pages/components/Tabs.vue'
export default {
	components: { Tabs },
	data() {
		return {
			daysList:[],//日期列表
			hIndex:0,//日期选中index 
			recipeId:"",//菜谱ID
			menuData:[],//菜谱列表数据
			tabList: [],//菜品类型名称
			typeList:[],//菜品类型数据
			typeNameList:[],
			tIndex:0, 
			dishesList:[],
		}
	},
	onLoad(options) {
		console.log(options)
		options = JSON.parse(options.params) 
		this.recipeId=options.recipeId;
		this.daysList = this.getRecentWeekDates() 
		this.getMenuListData()
	},
	methods: {
		getRecentWeekDates() {
			let currentDate = new Date(); // 获取当前日期
			let weekDates = []; 
			for (let i = 0; i < 7; i++) {
				let day = currentDate.getDate();
				let month = currentDate.getMonth() + 1; // 月份是从0开始计数的，所以要+1
				let year = currentDate.getFullYear();
				//日期
				let formattedDate = `${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
				let formattedDate2 = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
				//周几
				var days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				var dayOfWeek = currentDate.getDay();
				//对象
				let obj = {
					"data":formattedDate2,
					"dateValue":formattedDate,
					"weekValue":days[dayOfWeek]
				}
				weekDates.push(obj); 
				currentDate.setDate(currentDate.getDate() + 1); // 获取前一天的日期
			} 
			return weekDates;
		},
		// 获取菜谱
		async getMenuListData() {
			let param = {
				"recipeId":this.recipeId,
				"date":this.daysList[this.hIndex].data,
				// "date":"2024-11-11",
			}
			const res = await getWeekDetailListAPI(param)
			console.log(res, '周菜谱')
			if(res.code==200){
				if(res.rows&&res.rows.length>0){
					this.menuData = res.rows;
					this.tabList=[]
					//处理数据
					this.menuData.forEach(item=>{//渲染类型
						this.tabList.push(item.mealtimeName)
					})
					this.changeTab(0) 
				}else{
					this.menuData = [];
					this.tabList=[];
					this.typeList=[]
					this.typeNameList=[]
					this.tIndex=0
					this.dishesList=[]
				}
			}else{
				uni.$u.toast(res.msg)
				this.menuData = [];
				this.tabList=[];
				this.typeList=[]
				this.typeNameList=[]
				this.tIndex=0
				this.dishesList=[]
			}
		},
		//改变时间
		changeDay(index){
			this.hIndex=index;
			this.getMenuListData()
		},
		//菜品类型（1-早餐 2-午餐 3-下午茶 4-晚餐 5-夜宵）
		changeTab(index) { 
			this.typeList = this.menuData[index].typeList;
			//左侧类别列表
			this.typeNameList=[]
			this.typeList.forEach(item=>{
				this.typeNameList.push(item.typeName)
			})
			//右侧菜列表
			this.tIndex=0;
			this.dishesList = this.typeList[0].dishesList;
		},
		//菜品类型（面点，粗粮，精品菜，卤菜...）
		changeModel(index){
			this.tIndex=index
			this.dishesList = this.typeList[index].dishesList;
		},
		goMenuList(item){
			uni.navigateTo({
			  url: `/pages/weeklyMenu/menuDetail?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;
}
.scroll-view {
	white-space: nowrap;
	width: 100%;
}
.scroll-view-item {
	display: inline-block;
	width: 160rpx;
	height: 100rpx;
	// line-height: 100rpx;
	text-align: center;
	color: #959FA4;

	.activeLine{
		background:  #DD7D3C;
		border-radius: 10upx;
		width: 100rpx;
		height: 6upx;
	}
}
.active {
	color: #DD7D3C;
	font-weight: bolder;
	font-size: 32rpx;
}

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

.menuContent{
	width: 100%;
	display: flex;
	height: 83vh;
	// background-color: #DD7D3C;
}
.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: auto;
	// background-color: #959FA4;
}
.image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}

 
</style>