283 lines
7.6 KiB
Vue
283 lines
7.6 KiB
Vue
<template>
|
|
<view class="container box box-column box-between" :style="'height: ' + containerHeight +'px;'" style="background-image:url(../../static/imgs/weekbg.png);overflow: hidden;">
|
|
|
|
<view style="height: 120upx;">
|
|
<view class="box box-between" style="color: white;height: 120upx;line-height: 120upx;padding: 0px 40upx;">
|
|
<view :class="areasIndex==index?'chooseArea':''" v-for="(item, index) in areas" :key="index" class="areas" @click="changeAreas(index)">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="box box-column" style="padding:0px 20upx;border-radius:20upx ;">
|
|
<scroll-view scroll-x="true" class="scroll-view">
|
|
<view class="time-item-box" :class="dateIndex == index ? 'time-active' : ''" v-for="(item, index) in date" :key="index" @click="changeDate(index)">
|
|
<text class="week">{{ item.week }}</text>
|
|
<text class="time">{{ item.tiems.substr(5, 10) }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="box box-between" style="padding: 20upx 40upx 40upx 40upx;background-color: white;">
|
|
<view :class="menuTypeIndex==index?'chooseMenuType':''" v-for="(item, index) in menuType" :key="index" class="menuType" @click="changeMenuType(index)">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="box" style="padding:0px 20upx;flex-grow: 1;overflow: hidden; ">
|
|
<view style="background-color: white;overflow: auto;width: 100%;">
|
|
<view v-if="list.length>0&&menuTypeIndex!=0" v-for="(listItem, index) in list" :key="index" @click="showDetail(index)" class="box box-column" style="width: 50%;padding: 0upx 20upx;float: left;margin-bottom: 40upx;" :style="'height:'+(imgWidth+50)+'px;'">
|
|
<view :style="'height:'+imgWidth+'px;width:'+imgWidth+'px;'">
|
|
<image :src="listItem.picture" :style="'height:'+imgWidth+'px;width:'+imgWidth+'px;'" mode="scaleToFill"></image>
|
|
</view>
|
|
|
|
<view style="font-size: 32upx;padding: 8upx 0upx;">{{listItem.food_name}}</view>
|
|
<view style="font-size: 26upx;color: #666666;">{{listItem.features}}</view>
|
|
</view>
|
|
<view v-if="list.length>0&&menuTypeIndex==0" style="width: 100%;padding: 0upx 40upx;line-height: 1.6em;font-size: 32upx;" >
|
|
{{list[0].food_menu}}
|
|
</view>
|
|
<view v-if="list.length==0" style="text-align: center;font-size: 40upx;color: #666666;padding: 80upx 0upx;">
|
|
<image style="width: 534upx;" src="../../static/imgs/wu_weekmenu.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false">
|
|
<view class="popup-order" style="background: white;height: 840upx;width: 500upx;border-radius: 10upx;padding: 20upx;overflow: auto;">
|
|
<view style="overflow: scroll;height: 800upx;">
|
|
<image :src="showDetailItem.picture" style="width: 460upx;height: 460upx;"></image>
|
|
<view style="font-size: 32upx;margin-bottom: 10upx;">
|
|
<text style="color: #666666;">名 称：</text><text>{{showDetailItem.food_name}}</text>
|
|
</view>
|
|
<view style="font-size: 32upx;margin-bottom: 10upx;">
|
|
<text style="color: #666666;">特 性：</text><text>{{showDetailItem.features}}</text>
|
|
</view>
|
|
<view style="font-size: 32upx;margin-bottom: 10upx;">
|
|
<text style="color: #666666;">主 料：</text><text>{{showDetailItem.main_materials}}</text>
|
|
</view>
|
|
<view style="font-size: 32upx;margin-bottom: 10upx;">
|
|
<text style="color: #666666;">营养价值：</text><text>{{showDetailItem.nutritive_value}}</text>
|
|
</view>
|
|
<view style="font-size: 32upx;margin-bottom: 10upx;">
|
|
<text style="color: #666666;">饮食建议：</text><text>{{showDetailItem.diet_advice}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getWeekMenuList} from '@/common/api.js';
|
|
import { callbackRequest, getStorage, alertTip, formatDate, getNumDate,getWeek } from '@/common/util.js';
|
|
import contentNone from '@/components/contentNone.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
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:'',
|
|
|
|
list:[],
|
|
showDetailItem:{},
|
|
showAlert:false
|
|
};
|
|
},
|
|
components: {
|
|
contentNone
|
|
},
|
|
onLoad() {
|
|
var nowHours = new Date().getHours();
|
|
console.log(nowHours);
|
|
if(nowHours>=9&&nowHours<15){
|
|
this.menuTypeIndex = 1;
|
|
}else if(nowHours>=15){
|
|
this.menuTypeIndex = 2;
|
|
}
|
|
this.setHeight();
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
showDetail(v){
|
|
this.showDetailItem = this.list[v];
|
|
// this.circulation();
|
|
this.showAlert=true;
|
|
},
|
|
circulation(){
|
|
this.$refs.popup.open();
|
|
},
|
|
closeCirculation(){
|
|
this.$refs.popup.close()
|
|
},
|
|
changeDate(v){
|
|
this.dateIndex = v;
|
|
this.initData();
|
|
},
|
|
changeMenuType(v){
|
|
this.menuTypeIndex = v;
|
|
this.initData();
|
|
},
|
|
changeAreas(v){
|
|
this.areasIndex = 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: getWeekMenuList,
|
|
data: {
|
|
userId: this.userInfo.id,
|
|
date:this.date[this.dateIndex].tiems,
|
|
locationId:this.areas[this.areasIndex].id,
|
|
menuType:this.menuType[this.menuTypeIndex].id
|
|
}
|
|
};
|
|
callbackRequest(params).then(res => {
|
|
if (res.data.returnCode == 1) {
|
|
var result = res.data.returnData||[];
|
|
this.list = result;
|
|
console.log(result)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.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: 18upx 60upx;
|
|
font-size: 24upx;
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 50upx;
|
|
color: #666;
|
|
background-color: #E5E5E5;
|
|
}
|
|
.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>
|