Dining_Hall/pages/weeklyMenu/menuList.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view>
		<Navbar title="周菜谱" :showRightText="true" :isBack="false" :text="'历史菜谱'" @clickIcon="handleRightText" />
		<scroll-view class="date-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" v-show="tabList.length>0">
			<Tabs ref="Tabs" :tabList="tabList" @changeTab="changeTab" />
		</view>
		<view class="menuContent" v-if="menuData.length>0">
			<scroll-view class="content-left" scroll-y="true">
				<view class="scroll-view-item" v-for="(item,index) in typeList" :key="index" :class="tIndex == index ? 'active2' : ''" @click="changeModel(item,index)">
					<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
						<view>{{item.typeName}}</view> 
					</view>
				</view>
			</scroll-view> 
			<scroll-view class="content-right" scroll-y="true" :scroll-top="scrollLeftTop" scroll-with-animation="true">
				<view v-for="(typeitem,typeindex) in typeList" :key="typeindex">
					<view :id="'scroll'+typeitem.typeId" style="margin: 20rpx 10rpx;font-weight: bold;font-size: 28rpx;">{{typeitem.typeName}}</view>
					<view class="scroll-right-item" v-for="(item,index) in typeitem.dishesList" :key="index" @click="goMenuList(item)">
						<view style="width: 100%;display: flex;align-items: center;">
							<view style="width: 26%;height: 100%;">
								<image class="image" :src="item.dishesImgUrl"></image>
							</view>
							<view style="width: 70%;height: 100%;padding-left: 20px;">
								<view>{{item.dishesDetailList[0].dishesName}}</view>
								<view>食堂：{{item.canteenName}}</view>
								<view>档口：{{item.stallName}}</view> 
								<view style="color: #DD7D3C;">￥{{(item.dishesDetailList[0].prefPrice/100).toFixed(2)}}</view> 
							</view>
						</view>
					</view>
				</view>
			</scroll-view>  
		</view>
	  
		<view v-if="menuData.length==0" class="flex justify-center align-center" style="height: 50vh" >
			<u-empty icon="../../static/images/not_order.png" text="暂无数据" textColor="#000" />
		</view>
	</view>
</template>

<script>
import { getWeekDetailListAPI } from '../../api/week-menu/index'
import Tabs from '@/pages/components/Tabs.vue'

export default {
	components: { Tabs },
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			daysList:[],//日期列表
			hIndex:0,//日期选中index 
			recipeId:"",//菜谱ID
			menuData:[],//菜谱列表数据
			tabList: [],//菜品类型名称
			typeList:[],//菜品类型数据
			typeNameList:[],
			tIndex:0, 
			scrollLeftTop:0,//滚动位置
		}
	},
	onLoad(options) {
		console.log(options)
		options = JSON.parse(options.params) 
		this.recipeId=options.recipeId;
		this.daysList = this.getRecentWeekDates() 
		this.getMenuListData()
	},
	methods: {
		//跳转历史记录
		handleRightText() {
		  console.log('?? ~ handleRightText ~ ')
		  let item = {
			  recipeId:this.recipeId
		  }
		  uni.navigateTo({
		    url: `/pages/weeklyMenu/menuHistory?params=${JSON.stringify(item)}`
		  })
		},
		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
			}
			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.$refs.Tabs.handleTab(0)
					// this.changeTab(0)  
				}else{
					this.menuData = [];
					this.tabList=[];
					this.typeList=[]
					this.typeNameList=[]
					this.tIndex=0 
				}
			}else{
				uni.$u.toast(res.msg)
				this.menuData = [];
				this.tabList=[];
				this.typeList=[]
				this.typeNameList=[]
				this.tIndex=0 
			}
		},
		//改变时间
		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; 
		},
		//菜品类型（面点，粗粮，精品菜，卤菜...）
		changeModel(item,index){
			this.tIndex=index
			var len = 0
			if(index==0){
				len=0
			}else{
				this.typeList.forEach((ite,i)=>{
					console.log(i)
					console.log(index)
					if(i<index){
						len = len+ite.dishesList.length
					}
				})
			} 
			setTimeout(()=>{
				uni.createSelectorQuery().in(this).select('#scroll'+item.typeId).boundingClientRect(res => {
						console.log(res)
						this.scrollLeftTop = 80 * len; // 设置滚动条距离左侧的距离    				        
					}).exec()
			},100)
			// 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;
  height: 90vh;
}
.date-view {
	white-space: nowrap;
	width: 100%;
	
}
.scroll-view-item {
	display: inline-block;
	width: 160rpx;
	height: 100rpx;
	// line-height: 100rpx;
	text-align: center;
	color: #959FA4;
	font-size: 24rpx;

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

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

.menuContent{
	width: 100%;
	display: flex;
	height: 80vh;
	// background-color: #ff6816;
}
.content-left{
	width: 20%;
	height: 80vh;
} 
.active2 {
	color: #DD7D3C;
	font-weight: bolder;
	font-size: 26rpx;
}

.content-right{
	width: 80%;
	height: 80vh;
}
.scroll-right-item{
	width: 100%;
	height: auto;
	font-size: 28rpx;
	// background-color: #959FA4;
}
.image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}

 
</style>