yuanqu_ui/work/pages/yyorder/menulist.vue

<template>
	<view :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar color="#ffffff" left-icon="left" title="园区食谱" :background-color="backgroundColor"
				:border="false" statusBar='true' fixed="true" @clickLeft='getBack'>
			</uni-nav-bar>
			<view class="table" :style="'background:'+backgroundColor">
				<view class="tlist" :class="weekidx==ite.dictValue?'act':''" v-for="(ite,idx) in weekList" :key="ite.dictValue" @click="getTable(ite)">{{ite.dictLabel}}</view>
			</view>
		</view>
		<image :src="navbg" class="navbg"></image>
		<view class="zxmain" style="margin-top: 100rpx;">
			<!-- 列表 -->
			<y-list type='menulist' :datalist="list" :wtdt="wtdt" @getDetail='getDetail' @getPut="getPut"  @getDelFn="getDelFn"></y-list>
			<view class="yyfbtn flexcc">
				<view class="mfbtn btna" v-if="checkPermi(['system:foodRecord:list'])" @click="getRecordFn">食谱记录</view>
				<view class="mfbtn btnb" v-if="checkPermi(['system:menuFood:add'])" @click="getAddFn">新增食谱</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import yList from "@/work/components/yuyue/list.vue"
	import {getMenuList,getMenuPut,getMenuDel} from "@/api/mine/order.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	export default {
		components: {yList},
		data() {
			return {
				wupimg:require("@/work/static/record/wup.png"),
				serimg:require("@/work/static/record/search.png"),
				licoimg:require("@/work/static/record/lico.png"),
				navbg:require("@/static/images/navbg.png"),
				dayimg:require("@/work/static/yuy/day.png"),
				backgroundColor: "transparent",
				datainfo:{},
				nvaHeight: 44,
				marTop: 0, //距离顶部的距离
				stubarHeight: 0, //
				title:'',
				jclxlist:[],
				list:[],
				pageSize: 10,
				pageNum: 1,
				reachflag: false,
				wtdt:'',
				userId:this.$store.state.user.userId,
				weekList:[],
				weekidx:'',
				weektit:'',
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0491FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		onUnload() {
			uni.$off('refreshmenulist')
		},
		onLoad: function() {
			uni.$on('refreshmenulist',(e) => {
				this.getConfirm()
			})
			this.init()
			uni.getSystemInfo({
				success: (e) => {
					this.stubarHeight = Number(e.statusBarHeight);
					this.nvaHeight = Number(e.statusBarHeight) + 44;
				}
			})
		},
		onShow() {},
		mounted() {
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		methods: {
			checkPermi,
			checkRole,
			getConfirm(){
				this.pageNum=1;
				this.list=[];
				this.reachflag=true;
				this.getDataFn()
			},
			getTable(ite){
				this.weekidx=ite.dictValue;
				this.weektit=ite.dictLabel
				this.getConfirm()
			},
			getBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDetail(id){
				var obj={
					id:id,
					type:'edit'
				}
				this.$tab.navigateTo('/work/pages/yyorder/menuadd?data='+encodeURIComponent(JSON.stringify(obj)))
			},
			getPut(data){
				var that=this;
				var info=JSON.parse(JSON.stringify(data))
				var ite=info.ite;
				if(info.type=='use'){
					var isUse=ite.isUse;
					var str='启用';
					var params={
						menuFoodId:ite.menuFoodId,
						menuFoodTime:ite.menuFoodTime,
					}
					if(isUse=='Y'){
						params.isUse='N'
						str="禁用"
					}else{
						params.isUse='Y'
						str="启用"
					}
					this.$modal.confirm('确定'+str+'该食谱').then(() => {
					  getMenuPut(params).then(res=>{
						  if(res.code==200){
							  that.$toast(str+'成功')
							  setTimeout(function(){
							  	that.getConfirm();
							  },1200)
						  }
					  })
					})
				}else{
					var obj={
						id:ite.menuFoodId,
						type:'edit'
					}
					this.$tab.navigateTo('/work/pages/yyorder/menuput?data='+encodeURIComponent(JSON.stringify(obj)))
				}
			},
			getAddFn(){
				this.$tab.navigateTo('/work/pages/yyorder/menuadd')
			},
			getRecordFn(){
				this.$tab.navigateTo('/work/pages/yyorder/menuRecord')
			},
			init() {
				// 星期
				getDictionaryFn('week').then(res=>{
					if(res.code==200){
						this.weekList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
						if(res.data&&res.data.length){
							this.weekidx=res.data[0].dictValue
							this.weektit=res.data[0].dictLabel
							this.getDataFn()
						}
					}
				})
			},
			getDelFn(id){
				var that=this;
				getMenuDel(id).then(res=>{
					if(res.code==200){
						that.$toast('删除成功')
						setTimeout(function(){
							that.getConfirm()
						},1200)
					}
				})
			},
			getDataFn() {
				var params = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				// if(!checkRole(['administrators'])){
				// 	params.orderFoodUserId=this.userId
				// }
				if(this.weektit){
					params.menuFoodTime=this.weektit
				}
				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 = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
						var newArr=JSON.parse(JSON.stringify(res.rows))
						newArr.forEach(ite=>{
							ite.right=0;
						})
						// console.log(newArr,555)
						if (this.pageNum == 1) {
							this.list = newArr;
						} else {
							this.list = this.list.concat(newArr)
						}
					} else {
						this.$toast(res.msg)
					}
				})

			},
		},

	}
</script>
<style>
/* 	page {
		background: #ffffff;
	} */
</style>
<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 692rpx;position: absolute;left: 0;right: 0;top: 0;z-index: -1;}	
.zxmain{position: relative;padding: 8rpx 0rpx 100rpx;box-sizing: border-box;}
.table{
	display: flex;align-items: center;padding: 0 20rpx;overflow: auto;
	.tlist{font-weight: 500;font-size: 26rpx;color: #FFFFFF;height: 60rpx;position: relative;line-height: 60rpx;padding: 0 12rpx;flex: 0 0 auto;
		&.act{font-weight: bold;font-size: 30rpx;
			&::after{content: '';width: 54rpx;height: 6rpx;background: #FFFFFF;
border-radius: 4rpx;position: absolute;left: 50%;margin-left: -27rpx;bottom: 0;
			}
		}
	}
}
.yyfbtn{background:none;}
.mfbtn{
	display: flex;align-items: center;justify-content: center;flex: 1;font-weight: bold;font-size: 28rpx;height: 90rpx;
	&.btna{background: #FFFFFF;color: #0391FD;}
	&.btnb{background: #0391FD;color: #FFFFFF;}
}

</style>