415 lines
12 KiB
Vue
415 lines
12 KiB
Vue
<template>
|
|
<view class="foodIndex box box-column box-between">
|
|
<foodHeader title="本周菜单"></foodHeader>
|
|
<view class="hzContent" style="padding-top: 200upx;font-size: 26upx;">
|
|
|
|
<view class="box box-column" style="border-radius:20upx;position: relative;margin: 20upx;">
|
|
<view class="box box-between" style="padding:0px 40upx;background-color: white;border-radius: 20upx;height: 250upx;">
|
|
<!-- <view :class="menuTypeIndex==index?'chooseMenuType':''" v-for="(item, index) in menuType" :key="index" class="menuType" @click="changeMenuType(index)"> -->
|
|
<view class="menuType" @click="changeMenuType(0)">
|
|
<image src="/static/img/foodIcon1.png" style="width: 100%;height: 50%;"/>
|
|
<text style="margin:10upx">早餐</text>
|
|
<view class="activeLine" v-if="menuTypeIndex == 0"></view>
|
|
</view>
|
|
<view class="menuType" @click="changeMenuType(1)">
|
|
<image src="/static/img/foodIcon2.png" style="width: 100%;height: 50%;"/>
|
|
<text style="margin:10upx">午餐</text>
|
|
<view class="activeLine" v-if="menuTypeIndex == 1"></view>
|
|
</view>
|
|
<view class="menuType" @click="changeMenuType(2)">
|
|
<image src="/static/img/foodIcon3.png" style="width: 100%;height: 50%;"/>
|
|
<text style="margin:10upx">晚餐</text>
|
|
<view class="activeLine" v-if="menuTypeIndex == 2"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box" style="flex-grow: 1;overflow: hidden; ">
|
|
<view style="overflow: auto;width: 100%;">
|
|
<view style="text-align: center;color: #666666;">
|
|
<!-- <image v-if="list[0].lunch" mode="widthFix" style="width: 100%;" :src="formatImgUrl(list[0].lunch)" @click="vbPicture(new Array(formatImgUrl(list[0].lunch)))"></image>
|
|
<image mode="widthFix" v-else style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image> -->
|
|
<view class="weekBox" style="display: flex;background-color:#D9EEEC;" @click=detailOne(1)>
|
|
<view class="weekNum" style="background-color: #ECF9F4;"><text>周一</text></view>
|
|
<view class="foodList">
|
|
<view class="fooditem" v-for="(item, index) in listOne" :key="index">{{item.FOOD_NAME}}</view>
|
|
</view>
|
|
<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
|
|
</view>
|
|
<view class="weekBox" style="display: flex;background-color:#FDA08C;" @click=detailTwo(2)>
|
|
<view class="weekNum" style="background-color: #FEDAD3;"><text>周二</text></view>
|
|
<view class="foodList">
|
|
<view class="fooditem" v-for="(item, index) in listTwo" :key="index">{{item.FOOD_NAME}}</view>
|
|
</view>
|
|
<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
|
|
</view>
|
|
<view class="weekBox" style="display: flex;background-color:#CADAE7;" @click=detailThree(3)>
|
|
<view class="weekNum" style="background-color: #E9F3FC;"><text>周三</text></view>
|
|
<view class="foodList">
|
|
<view class="fooditem" v-for="(item, index) in listThree" :key="index">{{item.FOOD_NAME}}</view>
|
|
</view>
|
|
<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
|
|
</view>
|
|
<view class="weekBox" style="display: flex;background-color:#B3DCB8;" @click=detailFour(4)>
|
|
<view class="weekNum" style="background-color: #DBF6DE;"><text>周四</text></view>
|
|
<view class="foodList">
|
|
<view class="fooditem" v-for="(item, index) in listFour" :key="index">{{item.FOOD_NAME}}</view>
|
|
</view>
|
|
<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
|
|
</view>
|
|
<view class="weekBox" style="display: flex;background-color:#F8EFC1;" @click=detailFive(5)>
|
|
<view class="weekNum" style="background-color: #FCF9E8;"><text>周五</text></view>
|
|
<view class="foodList">
|
|
<view class="fooditem" v-for="(item, index) in listFive" :key="index">{{item.FOOD_NAME}}</view>
|
|
</view>
|
|
<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
|
|
</view>
|
|
</view>
|
|
<!-- <view v-if="list.length>0&&menuTypeIndex==1" style="width: 100%;" >
|
|
<image v-if="list[0].breakfast" mode="widthFix" style="width: 100%;" :src="formatImgUrl(list[0].breakfast)" @click="vbPicture(new Array(formatImgUrl(list[0].breakfast)))"></image>
|
|
<image mode="widthFix" v-else style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image>
|
|
</view>
|
|
<view v-if="list.length>0&&menuTypeIndex==2" style="width: 100%;" >
|
|
<image v-if="list[0].breakfast" mode="widthFix" style="width: 100%;" :src="formatImgUrl(list[0].breakfast)" @click="vbPicture(new Array(formatImgUrl(list[0].breakfast)))"></image>
|
|
<image mode="widthFix" v-else style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image>
|
|
</view> -->
|
|
|
|
|
|
<!-- <view style="text-align: center;font-size: 40upx;color: #666666;padding: 80upx 0upx;">
|
|
<image mode="widthFix" style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getWeeKCookBook,getDeptByParentId} from '@/common/api.js';
|
|
import foodHeader from '@/components/foodHeader.vue';
|
|
import { callbackRequest, getStorage, alertTip, formatDate, getNumDate,getWeek,vbPicture } from '@/common/util.js';
|
|
import contentNone from '@/components/contentNone.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
vbPicture:vbPicture,
|
|
userInfo: getStorage('userInfo'),
|
|
areas:[{id:'1',name:'科技楼食堂'},{id:'2',name:'梨园食堂'},{id:'3',name:'梨园食堂套餐'}],
|
|
areasIndex:0,
|
|
date:getWeek(),
|
|
dateIndex:new Date().getDay()-1,
|
|
//day:new Date().getDay(),
|
|
menuType:[{id:'0',name:'早餐'},{id:'1',name:'午餐'},{id:'2',name:'晚餐'}],
|
|
menuTypeIndex:0,
|
|
containerHeight:'',
|
|
contentHeight:'',
|
|
imgWidth:'',
|
|
listOne:[],
|
|
listTwo:[],
|
|
listThree:[],
|
|
listFour:[],
|
|
listFive:[],
|
|
showDetailItem:{},
|
|
showAlert:false,
|
|
};
|
|
},
|
|
components: {
|
|
contentNone,foodHeader
|
|
},
|
|
onLoad() {
|
|
var nowHours = new Date().getHours();
|
|
if(nowHours>=11&&nowHours<=14){
|
|
this.menuTypeIndex = 1;
|
|
}
|
|
this.getDeptByParentId(0,new Array());
|
|
this.setHeight();
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
getDeptByParentId(parentId,arr){
|
|
let params = {
|
|
method: getDeptByParentId,
|
|
data: {
|
|
parentId: parentId
|
|
}
|
|
};
|
|
callbackRequest(params).then(res => {
|
|
if (res.returnCode==1) {
|
|
|
|
}
|
|
});
|
|
},
|
|
changeMenuType(v){
|
|
this.menuTypeIndex = v;
|
|
this.initData();
|
|
},
|
|
setHeight() {
|
|
let windowHeight = uni.getSystemInfoSync().windowHeight;//页面可见区域
|
|
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
|
this.containerHeight = windowHeight;
|
|
this.contentHeight = windowHeight-60-46-50;
|
|
this.imgWidth = (windowWidth-50)*0.5;
|
|
|
|
},
|
|
initData() {
|
|
let params = {
|
|
method: getWeeKCookBook,
|
|
data: {
|
|
userId: this.userInfo.id,
|
|
foodType:this.menuTypeIndex+''//0 1 2 早中晚
|
|
}
|
|
};
|
|
callbackRequest(params).then(res => {
|
|
if (res.data.returnCode == 1) {
|
|
var result = res.data.returnData||[];
|
|
this.listOne = result.one.list;
|
|
this.listTwo = result.two.list;
|
|
this.listThree = result.three.list;
|
|
this.listFour = result.four.list;
|
|
this.listFive = result.five.list;
|
|
// this.list = result;
|
|
// console.log(this.list)
|
|
}
|
|
});
|
|
},
|
|
detailOne(weekNum){
|
|
if(this.listOne.length>0){
|
|
let year = this.listOne[0].YEAR;
|
|
let weeks = this.listOne[0].WEEKS;
|
|
uni.navigateTo({
|
|
url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
|
|
});
|
|
}else{
|
|
alertTip('菜单尚未上传');
|
|
}
|
|
},
|
|
detailTwo(weekNum){
|
|
if(this.listTwo.length>0){
|
|
let year = this.listTwo[0].YEAR;
|
|
let weeks = this.listTwo[0].WEEKS;
|
|
uni.navigateTo({
|
|
url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
|
|
});
|
|
}else{
|
|
alertTip('菜单尚未上传');
|
|
}
|
|
},
|
|
detailThree(weekNum){
|
|
if(this.listThree.length>0){
|
|
let year = this.listThree[0].YEAR;
|
|
let weeks = this.listThree[0].WEEKS;
|
|
uni.navigateTo({
|
|
url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
|
|
});
|
|
}else{
|
|
alertTip('菜单尚未上传');
|
|
}
|
|
},
|
|
detailFour(weekNum){
|
|
if(this.listFour.length>0){
|
|
let year = this.listFour[0].YEAR;
|
|
let weeks = this.listFour[0].WEEKS;
|
|
uni.navigateTo({
|
|
url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
|
|
});
|
|
}else{
|
|
alertTip('菜单尚未上传');
|
|
}
|
|
},
|
|
detailFive(weekNum){
|
|
if(this.listFive.length>0){
|
|
let year = this.listFive[0].YEAR;
|
|
let weeks = this.listFive[0].WEEKS;
|
|
uni.navigateTo({
|
|
url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
|
|
});
|
|
}else{
|
|
alertTip('菜单尚未上传');
|
|
}
|
|
},
|
|
formatImgUrl(url){
|
|
let oldUrl = url||"";
|
|
let imgName = oldUrl.split("webImageDir")[1];
|
|
let newUrl = 'http://127.0.0.1:'+uni.getStorageSync("ZHHQ_HZ_PORT")+'/webImageDir'+imgName;
|
|
console.log(newUrl,'newUrl');
|
|
return newUrl;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.weekBox{
|
|
width: 100%;
|
|
height: 200upx;
|
|
margin: 20upx 0;
|
|
padding:10upx 40upx;
|
|
// border: 2upx solid #AEAEAE;
|
|
border-radius: 20upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.weekNum{
|
|
width: 140upx;
|
|
height: 140upx;
|
|
border-radius: 50%;
|
|
color: #000;
|
|
text-align: center;
|
|
line-height: 140upx;
|
|
font-size: 32upx;
|
|
}
|
|
.foodList{
|
|
width: 60%;
|
|
height: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
font-size: 28upx;
|
|
overflow: hidden;
|
|
}
|
|
.fooditem{
|
|
width: 48%;
|
|
height: 46upx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #999;
|
|
// overflow: hidden;
|
|
// padding: 20upx 40upx;
|
|
}
|
|
.activeLine{
|
|
background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
|
|
border-radius: 10upx;
|
|
width: 60upx;
|
|
height: 10upx;
|
|
}
|
|
.common-shade{
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100vh;
|
|
background: rgba(0,0,0,0.7);
|
|
z-index:99;
|
|
}
|
|
.chooseArea{
|
|
font-size: 32upx!important;
|
|
color: #4db4ea!important;
|
|
font-weight: 600;
|
|
}
|
|
.areas{
|
|
padding: 0upx 20upx;
|
|
font-size: 26upx;
|
|
}
|
|
.menuType{
|
|
padding: 10upx 40upx;
|
|
font-size: 28upx;
|
|
color: #666;
|
|
width: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.chooseMenuType{
|
|
border: 1px solid #4db4ea;
|
|
background-color: white;
|
|
color: #4db4ea;
|
|
}
|
|
.bg{
|
|
height: 120upx;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 0;
|
|
}
|
|
.box {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
}
|
|
|
|
.box-row-reverse {
|
|
flex-direction: row;
|
|
}
|
|
|
|
/*上下排列*/
|
|
.box-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/*上下排列*/
|
|
.box-left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/*居右*/
|
|
.box-right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/*居左*/
|
|
.box-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
/*居中*/
|
|
.box-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/*两端对齐*/
|
|
.box-align-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.box-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
.scroll-view {
|
|
border-radius: 20upx 20upx 0upx 0upx;
|
|
padding: 30upx 0;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
background: #fff;
|
|
.time-item-box {
|
|
padding: 0 10upx;
|
|
margin: 0 16upx;
|
|
display: inline-block;
|
|
text-align: center;
|
|
.time {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 28upx;
|
|
color: #666;
|
|
}
|
|
.week {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 32upx;
|
|
color: #666;
|
|
}
|
|
}
|
|
.time-active {
|
|
.time {
|
|
color: #4db4ea;
|
|
}
|
|
.week {
|
|
color: #4db4ea;
|
|
}
|
|
}
|
|
}
|
|
.fixedView{
|
|
height: 50px;
|
|
line-height: 50px;
|
|
padding-left: 10px;
|
|
background-color: white;
|
|
width: 100%;
|
|
/* border-radius: 10px; */
|
|
/* margin-left: 5%; */
|
|
font-size: 14px;
|
|
/* border: 1px solid #cfcfcf; */
|
|
position: fixed;
|
|
bottom: 0px;
|
|
}
|
|
</style>
|