fb/fb-app/pages/menu/index.vue

<import src="../common/prompt.wxml"></import>
<template>
	<view>
		<u-navbar :is-back="true" title="菜单" :border-bottom="false"></u-navbar>
		<view class="container">
			<view class="canteen-select" @tap="isShow=true">
				<u-input :border="border" type="select" :select-open="selectShow" v-model="canteen" placeholder="请选择食堂" @click="selectShow = true"></u-input>
				<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
			</view>
			<view class="weui-flex topbar">
				<view class="middle-left-rili">
					<image class="middle-left-rili-image" src="/static/ico_date.png"></image>
				</view>
				<view @tap="onTapTag(index)" class="weui-flex__item" v-for="(item, index) in mealTypeList" :key="index">
					<view :class="index==activeIndex?'topbar-item active':'topbar-item'">{{item.dictLabel}}</view>
				</view>
			</view>
			<view class="main_middle align-center">
				<view class="middle-left">
					<view @tap="onTapWeekTag(index)" :class="index == weekActiveIndex?'middle-left-item active':'middle-left-item'" v-for="(val, index) in weekStrArr" :key="weeks[index]">
						<text>{{weeks[index]}}</text>
					</view>
				</view>
				<!--列表-->
				<swiper class="swiper-box"  :current="swiperCurrent" @animationfinish="animationfinish">
					<swiper-item v-for="(v, index) in mealTypeList" :key="index">
						<prompt type="Object" :prompt="{hidden:checkMenu[v.dictValue].length}" v-if="checkMenu[v.dictValue]"></prompt>
						<scroll-view scroll-y style="height:100%;width: 100%;" v-if="checkMenu[v.dictValue]">
							<view class="u-card-wrap">
								<u-card padding="20" :title="'经营时间：'+canteenTime[v.dictValue].startTime+'~'+canteenTime[v.dictValue].stopTime" :sub-title="checkMenu.date">
									<view class="" slot="body"> 
										<view class="u-body-item u-flex u-row-between u-p-b-0" v-for="(item,index) in checkMenu[v.dictValue]">
											<image :src="item.menuImg" @click="openImg(item.menuImg)" mode="aspectFill"></image>
											<view class="u-body-item-title u-line-2">
												{{item.menuName}} <text class="">¥{{item.canteenPrice}}</text>
											</view>
										</view>
									</view>
								</u-card>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				weekActiveIndex: 0,
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				selectShow: false,
				//
				canteenTime: {},
				//食堂对象
				canteenObj: {},
				canteens: {},
				//选中食堂名称
				canteen: '',
				//选中食堂ID
				canteenId: '',
				//本周食堂菜单
				canteenWeekMenu: {},
				//食堂列表key,value
				selectList: [],
				//当前餐类型
				mealType: '',
				//餐类型
				mealTypeList: [],
				weeks: [ "一", "二", "三", "四", "五", "六", "日" ],
				weekStrArr: [ "mon", "tues", "wed", "thur", "fri", "sat", "sun" ],
				currentDate: '',
				checkMenu: {},
				
				
			}
		},
		onLoad() {
			
			//获取当前日期
			this.currentDate =  this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
			//获取食堂对象
			this.canteens = uni.getStorageSync("canteens");
			//食堂list《key,value》
			this.canteenObj=  uni.getStorageSync('canteenObj');
			for(var key in this.canteenObj){
				this.selectList.push({"value":key,"label":this.canteenObj[key]});
			}
			//默认选中第一个食堂
			this.selectConfirm([this.selectList[0]]);
			//餐类型
			this.mealTypeList = uni.getStorageSync("mealTypeList");
			//计算当前时间属于那个类型
			this.canteenTime = this.canteens[this.canteenId].canteenTime;
			let currentTime = this.$u.timeFormat(new Date(), 'hh');
			//判断当前餐类
			this.mealTypeList.map((v,index) => {
				if(currentTime > this.canteenTime[v.dictValue].stopTime.split(" ")[0]){
					this.mealType = v.dictValue
					this.activeIndex = index;
					return;
				}
			})
		},
		methods: {
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.activeIndex= current;
			},
			selectConfirm(e) {
				this.canteen = '';
				e.map((val, index) => {
					this.canteenId= val.value;
					this.canteen += this.canteen == '' ? val.label : '-' + val.label;
				})
				this.getMenuObj();
			},
			openImg(url) {
				uni.previewImage({urls:[url]});
			},
			//获取菜单
			getMenuObj() {
				this.$u.api.getMenuWeekData({"canteenId":this.canteenId}).then(({data}) => {
					this.canteenWeekMenu= data;
					console.log("菜单对象",this.canteenWeekMenu);
					//判断当前日期
					this.weekStrArr.map((v,index) => {
						if(this.currentDate == data[v].date){
							this.weekActiveIndex = index;
						}
					})
					this.getCheckMenu();
				})
			},
			getCheckMenu() {
				this.checkMenu= this.canteenWeekMenu[this.weekStrArr[this.weekActiveIndex]];
				console.log("选中的菜单",this.checkMenu);
			},
			//
			onTapTag(index) {
				this.activeIndex= index;
				this.swiperCurrent = index;
				this.mealType = this.mealTypeList[index].dictValue;
				this.getCheckMenu();
			},
			
			//
			onTapWeekTag(index) {
				this.activeIndex= 0;
				this.swiperCurrent = 0;
				this.weekActiveIndex =index;
				this.getCheckMenu();
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	display: inline-block;
	background-color: white;
	width: 750rpx;
	font-size: 30rpx;
	font-family: STHeiti;
	overflow: hidden;
	min-height: 99.5%;
}
.canteen-select u-input {
    width: 206rpx;
}

.middle-left-rili {
    width: 102rpx;
    height: 79rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F2f2f2;
    padding-bottom: 3px;
    border-bottom: 1px solid #ddd;
}


.middle-left-rili-image {
    width: 45rpx;
    height: 45rpx;
    background-size: 45rpx 45rpx;
}

.topbar-item {
    color: #333;
    height: 81rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-item.active {
    color: #F46837;
    border-bottom: 4rpx solid #F46837;
}

.main_middle {
    display: flex;
    flex-direction: row;
    border-bottom: 1rpx solid #F2f2f2;
}

.middle-left {
    flex-direction: column;
    display: flex;
    background-color: #F2f2f2;
}

.middle-left-item {
    width: 102rpx;
    height: 145rpx;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.middle-left-item.active {
    color: #F46837;
    height: 109rpx;
    background-color: #fff;
}

.swiper-box {
    height: 900rpx;
    width: 100%;
}

.u-card-wrap { 
/* 	background-color: $u-bg-color;
 */	padding: 1px;
}
	
.u-body-item {
	font-size: 32rpx;
	color: #333;
	padding: 20rpx 10rpx;
}
	
.u-body-item image {
	width: 120rpx;
	flex: 0 0 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-left: 12rpx;
}
</style>