272 lines
6.8 KiB
Vue
272 lines
6.8 KiB
Vue
|
<template>
|
|||
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|||
|
|
<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 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>￥{{(item.dishesDetailList[0].prefPrice/100).toFixed(2)}}</view>
|
|||
|
|
</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 {
|
|||
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|||
|
|
daysList:[],//日期列表
|
|||
|
|
hIndex:0,//日期选中index
|
|||
|
|
stallId:"",
|
|||
|
|
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.stallId=options.stallId;
|
|||
|
|
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,
|
|||
|
|
"applyDate":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.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)}&stallId=${this.stallId}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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;
|
|||
|
|
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: 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;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
// background-color: #959FA4;
|
|||
|
|
}
|
|||
|
|
.image {
|
|||
|
|
width: 150rpx;
|
|||
|
|
height: 150rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|