hz-zhhq-app/pages/weekmenu/weekcarte.vue

<template>
	<view class="container box box-column box-between">

		<view class="box box-column" style="padding:0px 20upx;border-radius:20upx ;">
			<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" 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>
				<view v-if="list.length>0&&menuTypeIndex==0" 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>
					<!-- <text v-if="list[0].breakfast">{{list[0].breakfast}}</text> -->
					<image mode="widthFix" v-else style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image>
				</view>
				<view v-if="list.length==0"
					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>
</template>

<script>
	import {
		getWeekMenuList
	} from '@/common/api.js';
	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: '午、晚餐'
				}],
				menuTypeIndex: 0,
				containerHeight: '',
				contentHeight: '',
				imgWidth: '',

				list: [],
				showDetailItem: {},
				showAlert: false
			};
		},
		components: {
			contentNone
		},
		onLoad() {
			var nowHours = new Date().getHours();
			if (nowHours >= 11 && nowHours <= 14) {
				this.menuTypeIndex = 1;
			}
			this.setHeight();
			this.initData();
		},
		methods: {
			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: 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)
					}
				});
			},
			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">
	.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 90upx;
		font-size: 28upx;
		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>