yuanqu_ui/work/pages/yyorder/menu.vue

<template>
  <view class="pr">
	  <image :src="bgimg" class="bgimg"></image>
	  <view class="cookbox">
		  <view class="cboxs">
			  <view class="ctopimg">
			  		<image :src="ctopimg"></image>  
			  		<view class="tit">{{startDate}} - {{endDate}}</view>
			  </view>
			  <image :src="cbgimg" class="cbgimg"></image>
			  <view class="cline">
				  <image :src="cline"></image>
			  </view>
			  <view class="clists" v-for="(ite,idx) in list" :key="idx">
			  	<image :src="cooka" class="cookimg hea" v-if="kaType(ite.menuFoodTime,weeklist)=='1'"></image>
			  	<image :src="cookb" class="cookimg heb" v-if="kaType(ite.menuFoodTime,weeklist)=='2'"></image>
			  	<image :src="cookc" class="cookimg hec" v-if="kaType(ite.menuFoodTime,weeklist)=='3'"></image>
			  	<image :src="cookd" class="cookimg hed" v-if="kaType(ite.menuFoodTime,weeklist)=='4'"></image>
			  	<image :src="cooke" class="cookimg heb" v-if="kaType(ite.menuFoodTime,weeklist)=='5'"></image>
			  	<image :src="cookf" class="cookimg heb" v-if="kaType(ite.menuFoodTime,weeklist)=='6'"></image>
			  	<image :src="cookg" class="cookimg hed" v-if="kaType(ite.menuFoodTime,weeklist)=='7'"></image>
			  	<view class="clist">
					<!-- <view class="list">
						<view class="tit bgb">早餐</view>
						<view class="txt">{{ite.menuFoodDetailBk||"无"}}</view>
					</view> -->
			  		<view class="list">
			  			<view class="tit bga">午餐</view>
			  			<view class="txt">{{ite.menuFoodDetailLu||"无"}}</view>
			  		</view>
					<view class="list">
						<view class="tit bgb">晚餐</view>
						<view class="txt">{{ite.menuFoodDetailDi||"无"}}</view>
					</view>
					<!-- 图片 -->
					<view v-if="ite.imgs&&ite.imgs.length" class="ckimgs">
						<block v-for="(pite,pidx) in ite.imgs" :key="pidx">
							<image class="cimg" v-if="pidx<3" :src="baseUrl+pite"  @click="getPreview(pidx,ite.imgs)"></image>
						</block>
						<image class="cright" :src="mright" @click="getPreview(3,ite.imgs)" v-if="ite.imgs.length>3"></image>
					</view>
			  	</view>
			  </view>
			  <image :src="cfotimg" class="cfotimg"></image> 
		  </view>
	  </view>
  </view>
</template>

<script>
import {getMenuRecordList,getMenuList} from "@/api/mine/order.js"
import {getDictionaryFn} from "@/api/mine/register.js"
import { selectDictLabel } from '@/utils/common.js';
import config from '@/config.js';
	const baseUrl = config.baseUrl;
  export default {
	data(){
		return{
			bgimg:require("@/work/static/yuy/bg.png"), 
			cbgimg:require("@/work/static/yuy/cbg.png"), 
			ctopimg:require("@/work/static/yuy/ctop.png"), 
			cfotimg:require("@/work/static/yuy/cfot.png"), 
			cline:require("@/work/static/yuy/cline.png"), 
			cooka:require("@/work/static/yuy/menua.png"), 
			cookb:require("@/work/static/yuy/menub.png"), 
			cookc:require("@/work/static/yuy/menuc.png"), 
			cookd:require("@/work/static/yuy/menud.png"), 
			cooke:require("@/work/static/yuy/menue.png"), 
			cookf:require("@/work/static/yuy/menuf.png"), 
			cookg:require("@/work/static/yuy/menug.png"), 
			mright:require("@/work/static/yuy/mright.png"), 
			baseUrl:"",
			list:[],
			startDate:'',
			endDate:'',
			weeklist:[],
		}
	},
	onLoad: function() {
		this.init()
		this.getWeeksDay()
	},
	created() {
		this.baseUrl=baseUrl;
	},
	methods:{
		kaType(data, list) {
			return selectDictLabel(list, data);
		},
		init(){
			// 食谱日期
			getDictionaryFn('week').then(res=>{
				if(res.code==200){
					this.weeklist = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue,
							
						}
					})
				}
				this.getDataFn()
			})
		},
		getWeeksDay(){
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth();
			var d = date.getDate();
			var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			var startDate,endDate
			if(week==0){
				startDate=new Date(y,m,d-week-6)
				endDate=new Date(y,m,d-week)
			}else{
				startDate=new Date(y,m,d-week+1)
				endDate=new Date(y,m,d-week+7)
			}
			this.startDate=this.formatDate(startDate)
			this.endDate=this.formatDate(endDate)
			// console.log(this.formatDate(startDate),this.formatDate(endDate))
		},
		formatDate(date){
			const year = date.getFullYear();
			const month = ('0' + (date.getMonth() + 1)).slice(-2);
			const day = ('0' + date.getDate()).slice(-2);
		 
			return month + '-' + day;
		},
		getPreview(idx,arr) {
			var newArr=[];
			arr.forEach(ite=>{
				var ds=this.baseUrl+ite
				newArr.push(ds)
			})
			uni.previewImage({
				urls: newArr,
				current:idx,
				success: function(data) {
					
				},
				fail: function(err) {
					
				}
			});
		},
		getDataFn() {
			var params = {
				// pageSize: this.pageSize,
				// pageNum: this.pageNum,
				isUse:'Y'
			}
			getMenuList(params).then(res => {
				if (res.code == 200) {
					// if (res.rows.length < this.pageSize) {
					// 	this.reachflag = false
					// 	this.wtdt = '到底了~';
					// } else {
					// 	var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -
					// 		1)
					// 	if (num < res.total) {
					// 		this.reachflag = true
					// 		this.wtdt = '上拉加载更多'
					// 	} else {
					// 		this.reachflag = false
					// 		this.wtdt = '到底了~';
					// 	}
					// }
					var data=JSON.parse(JSON.stringify(res.rows))
					var newArr=[];
					var weeklist=JSON.parse(JSON.stringify(this.weeklist))
					weeklist.forEach(ite=>{
						const matchingData = data.find(d => d.menuFoodTime == ite.dictLabel);
						if(matchingData){
							var obj=JSON.parse(JSON.stringify(matchingData));
							var a=matchingData.menuFoodDetailBkPhoto?matchingData.menuFoodDetailBkPhoto.split(','):[];
							var b=matchingData.menuFoodDetailLuPhoto?matchingData.menuFoodDetailLuPhoto.split(','):[];
							var c=matchingData.menuFoodDetailDiPhoto?matchingData.menuFoodDetailDiPhoto.split(','):[];
							obj.imgs=a.concat(b).concat(c);
							newArr.push(obj)
						}
					})
					if (this.pageNum == 1) {
						this.list = newArr;
					} else {
						this.list = this.list.concat(newArr)
					}
				} else {
					this.$toast(res.msg)
				}
			})
		
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.bgimg{width: 100%;min-height: 100vh;z-index: -2;position: absolute;left: 0;right: 0;top: 0;bottom: 0;height: auto;}
.cookbox{padding: 172rpx 36rpx 54rpx 64rpx;box-sizing: border-box;
	.cboxs{position: relative;width: 100%;min-height: calc(100vh - 226rpx);padding: 152rpx 50rpx 154rpx 66rpx;box-sizing: border-box;
		.ctopimg{width: 548rpx;height: 296rpx;position: absolute;left: 50%;top: -154rpx;z-index: 1;margin-left: -274rpx;
			image{width: 100%;height: 100%;}
			.tit{font-size: 30rpx;color: #FFFFFE;text-stroke: 2rpx #291313;-webkit-text-stroke: 2rpx #291313;font-weight: bold;
				position: absolute;bottom: 80rpx;font-family: FZZhengHeiS-EB-GB;left: 144rpx;right: 172rpx;text-align: center;line-height: 40rpx;
			}
		}
		.cfotimg{width: 582rpx;height: 264rpx;position: absolute;right: -12rpx;bottom: -42rpx;}
		.cbgimg{width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: -1;}
		.cline{width: 62rpx;height: auto;position: absolute;top: 252rpx;bottom: 270rpx;left:-24rpx;overflow: hidden;display: flex;align-items: center;
			//min-height: 370rpx;
			image{height: 1638rpx;width: 100%;}
		}
		// 主体
		.clists{padding-bottom: 12rpx;
			.cookimg{width: 532rpx;margin-bottom: 26rpx;
				&.hea{height: 56rpx;width: 534rpx;}
				&.heb{height: 60rpx;}
				&.hec{height: 64rpx;}
				&.hed{height: 66rpx;width: 534rpx;}
			}
			.list{padding-left: 6rpx;display: flex;align-items: flex-start;margin-bottom: 18rpx;
				.tit{font-size: 26rpx;min-width: 76rpx;padding: 0 8rpx;text-align: center;line-height: 34rpx;box-sizing: border-box;height: 34rpx;border-radius: 16rpx;flex: 0 0 auto;margin-right: 20rpx;color: #161616;
				&.bga{background: #FFE0AE;}
				&.bgb{background: #DCF1FF;}
				}
				.txt{font-size: 26rpx;font-family: FZKaTong-M19S;color: #382324;}
			}
		}
	}
}
.ckimgs{padding:8rpx 0 16rpx 14rpx;display: flex;align-items: center;}
.cimg{
	width: 136rpx;height: 88rpx;margin-right: 32rpx;
}
.cright{width: 16rpx;height: 16rpx;flex: 0 0 auto;}
</style>