285 lines
7.1 KiB
Vue
285 lines
7.1 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.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;
|
||
},
|
||
// 处理recipeType
|
||
handleRecipeType(type) {
|
||
if (type === 1) {
|
||
return '早餐'
|
||
} else if (type === 2) {
|
||
return '午餐'
|
||
} else if (type === 3) {
|
||
return '下午茶'
|
||
} else if (type === 4) {
|
||
return '晚餐'
|
||
}else if (type === 5) {
|
||
return '夜宵'
|
||
}
|
||
},
|
||
// 获取菜谱
|
||
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(this.handleRecipeType(item.mealtimeType))
|
||
})
|
||
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;
|
||
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: 80vh;
|
||
// background-color: #DD7D3C;
|
||
}
|
||
.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>
|