完整源码可以私聊我,需要一点点费用~
页面展示
方案一
方案二
代码解释
方案一:使用v-show
这种方案只适合有两种页面
现在form表单中设置好要展现的页面名(此处的url没有作用不用管)
通过一个两个for循环分别将form表单填入的数据回显到页面中,并通过menuHandle函数进行 点击后会发生的事件,:index和:key都是用来定位那一个单独的div
可以看到点击后触发函数里这个show变量的true和flase。
而具体内容中写了两个页面内容,再通过v-if函数展现dish和comment页面
方案二:使用<iframe>
同样的通过两个v-for循环将menuList中的内容页面展现出来,同时绑定一个menuHandle函数,点击的时候触发该函数
该函数被触发的时候,就会将当前元素的id、url等元素填入到展现的form表单中
内容展现区就是通过<iframe>框架进行展现
代码展示
方案一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
<title>k1饱了吗</title>
<link rel="icon" href="images/favico.ico">
<!--不同屏幕尺寸根字体设置-->
<script src="./js/base.js"></script>
<!--element-ui的样式-->
<link rel="stylesheet" href="../backend/plugins/element-ui/index.css"/>
<!--引入vant样式-->
<link rel="stylesheet" href="styles/vant.min.css"/>
<!-- 引入样式 -->
<link rel="stylesheet" href="styles/index.css"/>
<!--本页面内容的样式-->
<link rel="stylesheet" href="styles/main.css"/>
<link rel="stylesheet" href="styles/icon/iconfont.css"/>
</head>
<body>
<div id="main" class="app">
<div class="divHead">
<img src="./images/user.png" @click="toUserPage"/>
</div>
<!-- 头部标签区-->
<div class="divTitle">
<div class="divStatic">
<img src="./images/logo.png" class="logo"/>
<div class="divDesc">
<div class="divName">饱了吗餐厅</div>
<div class="divSend">
<span><img src="./images/time.png"/> 距离1.5km</span>
<span><img src="./images/money.png"/> 配送费6元</span>
<span><img src="./images/location.png"/> 预计时长12min</span>
</div>
</div>
</div>
<div class="divDesc">
简介: 饱了吗餐厅是对抗饿了么的独立的品牌,定位“大众化的美食外送餐饮”,和美了么内卷竞争。
</div>
</div>
<!-- 菜品和评论选择区-->
<div class="divSelect">
<div v-for="item in menuList" :key="item.id">
<div :index="item.id" v-if="item.children && item.children.length>0">
<template slot="title">
<span>{{item.name}}</span>
</template>
<div
v-for="sub in item.children"
:index="sub.id"
:key="sub.id"
@click="menuHandle(sub,false)"
>
<span slot="title" :class="sub.name">{{sub.name}}</span>
</div>
</div>
<div v-else :index="item.id" @click="menuHandle(item,false)">
<span slot="title">{{item.name}}</span>
</div>
</div>
</div>
<!-- 内容展现区-->
<div class="divBody">
<!--展示菜单-->
<div class="dish" v-if="show" style="display: flex;">
<div class="divType">
<ul>
<li v-for="(item,index) in categoryList" :key="index" @click="categoryClick(index,item.id,item.type)"
:class="{active:activeType === index}">{{item.name}}
</li>
</ul>
</div>
<div class="divMenu">
<div>
<div class="divItem" v-for="(item,index) in dishList" :key="index" @click="dishDetails(item)">
<el-image :src="imgPathConvert(item.image)">
<div slot="error" class="image-slot">
<img src="./images/noImg.png"/>
</div>
</el-image>
<div>
<div class="divName">{{item.name}}</div>
<div class="divDesc">{{item.description}}</div>
<div class="divDesc">{{'月销' + (item.saleNum ? item.saleNum : 0) }}</div>
<div class="divBottom"><span>¥</span><span>{{item.price/100}}</span></div>
<div class="divNum">
<div class="divSubtract" v-if="item.number > 0">
<img src="./images/subtract.png" @click.prevent.stop="subtractCart(item)"/>
</div>
<div class="divDishNum">{{item.number}}</div>
<div class="divTypes" v-if="item.flavors && item.flavors.length > 0 && !item.number "
@click.prevent.stop="chooseFlavorClick(item)">选择规格
</div>
<div class="divAdd" v-else>
<img src="./images/add.png" @click.prevent.stop="addCart(item)"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--展示评论-->
<div class="comment" v-if="!show">
<div>
<div class="divItem" v-for="(item,index) in commentList" :key="index">
<div class="divInfo">
<div class="divName">{{item.name}}</div>
<div class="divTime">{{item.createTime}}</div>
</div>
<div class="divComment">
<div v-if="item.description" class="divDesc">{{item.description}}</div>
</div>
<el-image v-if="item.image" :src="imgPathConvert(item.image)" >
</el-image>
</div>
</div>
</div>
<!-- 菜品选择区-->
<!-- <div class="app-main" v-loading="loading">-->
<!-- <div class="divTmp" v-show="loading"></div>-->
<!-- <iframe-->
<!-- id="cIframe"-->
<!-- class="c_iframe"-->
<!-- name="cIframe"-->
<!-- :src="iframeUrl"-->
<!-- width="100%"-->
<!-- height="auto"-->
<!-- frameborder="0"-->
<!-- v-show="!loading"-->
<!-- ></iframe>-->
<!-- </div>-->
</div>
<div class="divLayer">
<div class="divLayerLeft"></div>
<div class="divLayerRight"></div>
</div>
<div class="divCart" v-if="categoryList.length > 0">
<div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"
@click="openCart"></div>
<div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}"
v-if="cartData && cartData.length > 0">{{ goodsNum }}
</div>
<div class="divNum">
<span>¥</span>
<span>{{goodsPrice}}</span>
</div>
<div class="divPrice"></div>
<div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}"
@click="toAddOrderPage">去结算
</div>
</div>
<van-dialog v-model="dialogFlavor.show" :show-confirm-button="false" class="dialogFlavor" ref="flavorDialog">
<div class="dialogTitle">{{dialogFlavor.name}}</div>
<div class="divContent">
<div v-for="flavor in dialogFlavor.flavors" :key="flavor.id">
<div class="divFlavorTitle">{{flavor.name}}</div>
<span v-for="item in JSON.parse(flavor.value)"
:key="item"
@click="flavorClick(flavor,item)"
:class="{spanActive:flavor.dishFlavor === item}"
>{{item}}</span>
</div>
</div>
<div class="divBottom">
<div><span class="spanMoney">¥</span>{{dialogFlavor.price/100}}</div>
<div @click="dialogFlavorAddCart">加入购物车</div>
</div>
<div class="divFlavorClose" @click="dialogFlavor.show = false">
<img src="./images/close.png"/>
</div>
</van-dialog>
<van-popup v-model="cartDialogShow" position="bottom" :style="{ height: '50%' }" class="dialogCart">
<div class="divCartTitle">
<div class="title">购物车</div>
<div class="clear" @click="clearCart">
<i class="el-icon-delete"></i> 清空
</div>
</div>
<div class="divCartContent">
<div v-for="item in cartData" :key="item.id" class="divCartItem">
<el-image :src="imgPathConvert(item.image)">
<div slot="error" class="image-slot">
<img src="./images/noImg.png"/>
</div>
</el-image>
<div class="divDesc">
<div class="name">{{item.name}}</div>
<div class="price">
<span class="spanMoney">¥</span>{{item.amount}}
</div>
</div>
<div class="divNum">
<div class="divSubtract">
<img src="./images/subtract.png" @click="cartNumberSubtract(item)"/>
</div>
<div class="divDishNum">{{item.number}}</div>
<div class="divAdd">
<img src="./images/add.png" @click="cartNumAdd(item)"/>
</div>
</div>
<div class="divSplit"></div>
</div>
</div>
</van-popup>
<van-dialog v-model="detailsDialog.show"
:show-confirm-button="false"
class="detailsDialog"
ref="detailsDialog"
v-if="detailsDialog.show"
>
<div class="divContainer">
<el-image :src="imgPathConvert(detailsDialog.item.image)">
<div slot="error" class="image-slot">
<img src="./images/noImg.png"/>
</div>
</el-image>
<div class="title">{{detailsDialog.item.name}}</div>
<div class="content">{{detailsDialog.item.description}}</div>
</div>
<div class="divNum">
<div class="left">
<span>¥</span><span>{{detailsDialog.item.price/100}}</span>
</div>
<div class="right">
<div class="divSubtract" v-if="detailsDialog.item.number > 0">
<img src="./images/subtract.png" @click="subtractCart(detailsDialog.item)"/>
</div>
<div class="divDishNum">{{detailsDialog.item.number}}</div>
<div class="divTypes"
v-if="detailsDialog.item.flavors && detailsDialog.item.flavors.length > 0 && !detailsDialog.item.number "
@click="chooseFlavorClick(detailsDialog.item)">选择规格
</div>
<div class="divAdd" v-else>
<img src="./images/add.png" @click="addCart(detailsDialog.item)"/>
</div>
</div>
</div>
<div class="detailsDialogClose" @click="detailsDialog.show = false">
<img src="./images/close.png"/>
</div>
</van-dialog>
<van-dialog v-model="setMealDialog.show"
:show-confirm-button="false"
class="setMealDetailsDialog"
ref="setMealDetailsDialogd"
v-if="setMealDialog.show"
>
<div class="divContainer">
<div class="title">{{setMealDialog.item.name}}</div>
<div class="item" v-for="(item,index) in setMealDialog.item.list" :key="index">
<el-image :src="imgPathConvert(item.image)">
<div slot="error" class="image-slot">
<img src="./images/noImg.png"/>
</div>
</el-image>
<div class="divSubTitle">{{item.name + '(' + item.copies + '份)' }}
<div class="divPrice">
<span>¥</span><span>{{item.price/100}}</span>
</div>
</div>
<div class="content">{{item.description}}</div>
</div>
</div>
<div class="divNum">
<div class="left">
<span>¥</span><span>{{setMealDialog.item.price/100}}</span>
</div>
<div class="right">
<div class="divSubtract" v-if="setMealDialog.item.number > 0">
<img src="./images/subtract.png" @click="subtractCart(setMealDialog.item)"/>
</div>
<div class="divDishNum">{{setMealDialog.item.number}}</div>
<div class="divAdd" v-if="setMealDialog.item.number">
<img src="./images/add.png" @click="addCart(setMealDialog.item)"/>
</div>
<div class="addCart" @click="addCart(setMealDialog.item)" v-if="!setMealDialog.item.number">加入购物车</div>
</div>
</div>
<div class="detailsDialogClose" @click="setMealDialog.show = false">
<img src="./images/close.png"/>
</div>
</van-dialog>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../backend/plugins/axios/axios.min.js"></script>
<script src="./js/request.js"></script>
<script src="./js/common.js"></script>
<script src="./api/main.js"></script>
<script src="../api/comment.js"></script>
</body>
<script>
new Vue({
el: '#main',
data() {
return {
//左边菜品类别index
activeType: 0,
categoryList: [],
categoryId: undefined,
dishList: [],
cartData: [],
commentList: [],
dialogFlavor: {
name: '',
flavors: [],
dishId: undefined,
price: undefined,
show: false,
image: ''
},
cartDialogShow: false,
detailsDialog: {
show: false,
item: {image: ''}
},
setMealDialog: {
show: false,
item: {}
},
menuList: [
// {
// id: '1',
// name: '门店管理',
// children: [
{
id: '2',
name: '菜品',
url: '../front/page/showDish.html',
icon: 'icon-member'
},
{
id: '3',
name: '评论',
url: '../backend/page/member/list.html',
icon: 'icon-category'
}
],
iframeUrl: '../backend/page/member/list.html',
headTitle: '菜品',
goBackFlag: false,
loading: true,
timer: null,
show: true
}
},
computed: {
goodsNum() {
let num = 0
this.cartData.forEach(item => {
num += item.number
})
if (num < 99) {
return num
} else {
return '99+'
}
},
goodsPrice() {
let price = 0
this.cartData.forEach(item => {
price += (item.number * item.amount)
})
return price
}
},
created() {
const userInfo = window.localStorage.getItem('userInfo')
if (userInfo) {
this.userInfo = JSON.parse(userInfo)
}
this.closeLoading()
},
watch: {
'dialogFlavor.show'(flag) {
if (flag) {
document.querySelector('.divCart').style.zIndex = 1
} else {
document.querySelector('.divCart').style.zIndex = 3000
}
},
},
mounted() {
this.initData()
window.menuHandle = this.menuHandle
},
methods: {
//初始化数据
initData() {
Promise.all([categoryListApi(), cartListApi({})]).then(res => {
//获取分类数据
if (res[0].code === 1) {
this.categoryList = res[0].data
if (Array.isArray(res[0].data) && res[0].data.length > 0) {
this.categoryId = res[0].data[0].id
if (res[0].data[0].type === 1) {
this.getDishList()
this.getCommentList()
} else {
this.getSetmealData()
}
}
} else {
this.$notify({type: 'warning', message: res[0].msg});
}
//获取菜品数据
if (res[1].code === 1) {
this.cartData = res[1].data
} else {
this.$notify({type: 'warning', message: res[1].msg});
}
})
},
//分类点击
categoryClick(index, id, type) {
this.activeType = index
this.categoryId = id
if (type === 1) {//菜品
this.getDishList()
} else {
this.getSetmealData()
}
},
//获取菜品数据
async getDishList() {
if (!this.categoryId) {
return
}
const res = await dishListApi({categoryId: this.categoryId, status: 1})
if (res.code === 1) {
let dishList = res.data
const cartData = this.cartData
if (dishList.length > 0 && cartData.length > 0) {
dishList.forEach(dish => {
cartData.forEach(cart => {
if (dish.id === cart.dishId) {
dish.number = cart.number
}
})
})
}
this.dishList = dishList
} else {
this.$notify({type: 'warning', message: res.msg});
}
},
//获取套餐数据setmealId
async getSetmealData() {
if (!this.categoryId) {
return
}
const res = await setmealListApi({categoryId: this.categoryId, status: 1})
if (res.code === 1) {
let dishList = res.data
const cartData = this.cartData
if (dishList.length > 0 && cartData.length > 0) {
dishList.forEach(dish => {
cartData.forEach(cart => {
if (dish.id === cart.setmealId) {
dish.number = cart.number
}
})
})
}
this.dishList = dishList
} else {
this.$notify({type: 'warning', message: res.msg});
}
},
//获取购物车数据
async getCartData() {
const res = await cartListApi({})
if (res.code === 1) {
this.cartData = res.data
} else {
this.$notify({type: 'warning', message: res.msg});
}
},
//菜单中往购物车中添加商品
async addCart(item) {
let params = {
amount: item.price / 100,//金额
dishFlavor: item.dishFlavor,//口味 如果没有传undefined
dishId: undefined,//菜品id
setmealId: undefined,//套餐id
name: item.name,
image: item.image
}
if (Array.isArray(item.flavors)) {//表示是菜品
params.dishId = item.id
} else {//表示套餐 套餐没有口味
params.setmealId = item.id
}
const res = await addCartApi(params)
if (res.code === 1) {
this.dishList.forEach(dish => {
if (dish.id === item.id) {
dish.number = res.data.number
}
})
if (this.setMealDialog.show) {
item.number = res.data.number
}
this.getCartData()
} else {
this.$notify({type: 'warning', message: res.msg});
}
},
//菜单中减少选中的商品
async subtractCart(item) {
let params = {
dishId: item.id,
}
if (!Array.isArray(item.flavors)) {
params = {
setmealId: item.id,
}
}
const res = await updateCartApi(params)
if (res.code === 1) {
this.dishList.forEach(dish => {
if (dish.id === item.id) {
dish.number = (res.data.number === 0 ? undefined : res.data.number)
}
})
if (this.setMealDialog.show) {
item.number = (res.data.number === 0 ? undefined : res.data.number)
}
this.getCartData()
} else {
this.$notify({type: 'warning', message: res.msg});
}
},
//展开购物车
openCart() {
if (this.cartData.length > 0) {
this.cartDialogShow = true
}
},
//购物车中增加商品数量
async cartNumAdd(item) {
let params = {
amount: item.amount,//金额
dishFlavor: item.dishFlavor,//口味 如果没有传undefined
dishId: item.dishId,//菜品id
setmealId: item.setmealId,//套餐id
name: item.name,
image: item.image
}
const res = await addCartApi(params)
if (res.code === 1) {
this.dishList.forEach(dish => {
if (dish.id === (item.dishId || item.setmealId)) {
dish.number = res.data.number
}
})
console.log(this.dishList)
this.getCartData()
} else {
this.$notify({type: 'warning', message: res.msg});
}
},
//购物车中减少商品数量
async cartNumberSubtract(item) {
let params = {
dishId: item.dishId,
setmealId: item.setmealId,
}
const res = await updateCartApi(params)
if (res.code === 1) {
this.dishList.forEach(dish => {
if (dish.id === (item.dishId || item.setmealId)) {
dish.number = (res.data.number === 0 ? undefined : res.data.number)
}
})
this.getCartData()
} else {
this.$notify({type: 'warning', message: res.msg});
}
},
//修改商品列表中的数据number
changeDishList(item) {
for (let ele of this.dishList) {
if (ele.id === (item.setmealId || item.dishId)) {
ele.number = item.number
}
}
},
//清空购物车
async clearCart() {
const res = await clearCartApi()
if (res.code === 1) {
for (let ele of this.dishList) {
ele.number = undefined
}
this.cartData = []
this.cartDialogShow = false
} else {
this.$notify({type: 'warning', message: res.msg});
}
},
//点击选择规格
chooseFlavorClick(item) {
this.dialogFlavor = {
name: '',
flavors: [],
dishId: undefined,
price: undefined,
show: false
}
this.dialogFlavor = {
name: item.name,
flavors: item.flavors,
dishId: item.id,
price: item.price,
show: true,
image: item.image
}
},
flavorClick(flavor, item) {
flavor.dishFlavor = item
//强制刷新dialog的dom
this.dialogFlavor.show = false
this.dialogFlavor.show = true
},
//选择规格加入购物车
dialogFlavorAddCart() {
const dialogFlavor = this.dialogFlavor
let flag = true
let dishFlavor = []
dialogFlavor.flavors.forEach(item => {
if (item.dishFlavor) {
dishFlavor.push(item.dishFlavor)
} else {
flag = false
Notify({type: 'warning', message: '请选择' + item.name});
}
})
if (flag) {
this.addCart({
price: dialogFlavor.price,
dishFlavor: dishFlavor.join(","),
id: dialogFlavor.dishId,
flavors: [],
image: dialogFlavor.image,
name: dialogFlavor.name
})
this.dialogFlavor.show = false
}
},
//网络图片路径转换
imgPathConvert(path) {
return imgPath(path)
},
//跳转到去结算界面
toAddOrderPage() {
if (this.cartData.length > 0) {
window.requestAnimationFrame(() => {
window.location.href = '/front/page/add-order.html'
})
}
},
toUserPage() {
window.requestAnimationFrame(() => {
window.location.href = '/front/page/user.html'
})
},
async dishDetails(item) {
//先清除对象数据,如果不行的话dialog使用v-if
this.detailsDialog.item = {}
this.setMealDialog.item = {}
if (Array.isArray(item.flavors)) {
this.detailsDialog.item = item
this.detailsDialog.show = true
} else {
//显示套餐的数据
const res = await setMealDishDetailsApi(item.id)
if (res.code === 1) {
this.setMealDialog.item = {...item, list: res.data}
this.setMealDialog.show = true
} else {
this.$notify({type: 'warning', message: res.msg});
}
}
},
addComment() {
window.location.href = 'page/addComment.html'
},
menuHandle(item, goBackFlag) {
this.loading = true
this.menuActived = item.id
this.iframeUrl = item.url
this.headTitle = item.name
this.goBackFlag = goBackFlag
this.show = !this.show
this.closeLoading()
},
closeLoading() {
this.timer = null
this.timer = setTimeout(() => {
this.loading = false
}, 1000)
},
showContent(button){
if(button == 'showDishContent'){
this.showContent = true;
this.showComment = false;
}else if(button == 'showCommentContent'){
this.showContent = false;
this.showComment = true;
}
},
async getCommentList(){
const res = await commentListApi()
if(res.code === 1){
this.commentList = res.data
}else {
this.$notify({type: 'warning', message: res.msg})
}
}
}
})
</script>
</html>
方案二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>11外卖管理端</title>
<link rel="shortcut icon" href="favicon.ico">
<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="plugins/element-ui/index.css"/> -->
<link rel="stylesheet" href="styles/common.css"/>
<link rel="stylesheet" href="styles/index.css"/>
<link rel="stylesheet" href="styles/icon/iconfont.css"/>
<style>
.body {
min-width: 1366px;
}
.app-main {
height: calc(100% - 64px);
}
.app-main .divTmp {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="app" id="app">
<div class="app-wrapper openSidebar clearfix">
<!-- sidebar -->
<div class="sidebar-container">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu>
<div v-for="item in menuList" :key="item.id">
<el-submenu :index="item.id" v-if="item.children && item.children.length>0">
<template slot="title">
<i class="iconfont" :class="item.icon"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item
v-for="sub in item.children"
:index="sub.id"
:key="sub.id"
@click="menuHandle(sub,false)"
>
<i :class="iconfont" :class="sub.icon"></i>
<span slot="title">{{sub.name}}</span>
</el-menu-item
>
</el-submenu>
<el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
<i class="iconfont" :class="item.icon"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</div>
</el-menu>
</el-scrollbar>
</div>
<div class="main-container">
<!-- <navbar /> -->
<div class="navbar">
<div class="head-lable">
<span v-if="goBackFlag" class="goBack" @click="goBack()"
><img src="images/icons/btn_back@2x.png" alt=""/> 返回</span
>
<span>{{headTitle}}</span>
</div>
<div class="right-menu">
<div class="avatar-wrapper">{{ userInfo.name }}</div>
<!-- <div class="logout" @click="logout">退出</div> -->
<img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout"/>
</div>
</div>
<div class="app-main" v-loading="loading">
<div class="divTmp" v-show="loading"></div>
<iframe
id="cIframe"
class="c_iframe"
name="cIframe"
:src="iframeUrl"
width="100%"
height="auto"
frameborder="0"
v-show="!loading"
></iframe>
</div>
</div>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="./api/login.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
defAct: '2',
menuActived: '2',
userInfo: {},
menuList: [
// {
// id: '1',
// name: '门店管理',
// children: [
{
id: '2',
name: '员工管理',
url: 'page/member/list.html',
icon: 'icon-member'
},
{
id: '3',
name: '分类管理',
url: 'page/category/list.html',
icon: 'icon-category'
},
{
id: '4',
name: '菜品管理',
url: 'page/food/list.html',
icon: 'icon-food'
},
{
id: '5',
name: '套餐管理',
url: 'page/combo/list.html',
icon: 'icon-combo'
},
{
id: '6',
name: '订单明细',
url: 'page/order/list.html',
icon: 'icon-order'
}
// ],
// },
],
iframeUrl: 'page/member/list.html',
headTitle: '员工管理',
goBackFlag: false,
loading: true,
timer: null
}
},
computed: {},
created() {
const userInfo = window.localStorage.getItem('userInfo')
if (userInfo) {
this.userInfo = JSON.parse(userInfo)
}
this.closeLoading()
},
beforeDestroy() {
this.timer = null
clearTimeout(this.timer)
},
mounted() {
window.menuHandle = this.menuHandle
},
methods: {
logout() {
logoutApi().then((res) => {
if (res.code === 1) {
localStorage.removeItem('userInfo')
window.location.href = '/backend/page/login/login.html'
}
})
},
goBack() {
// window.location.href = 'javascript:history.go(-1)'
const menu = this.menuList.find(item => item.id === this.menuActived)
// this.goBackFlag = false
// this.headTitle = menu.name
this.menuHandle(menu, false)
},
menuHandle(item, goBackFlag) {
this.loading = true
this.menuActived = item.id
this.iframeUrl = item.url
this.headTitle = item.name
this.goBackFlag = goBackFlag
this.closeLoading()
},
closeLoading() {
this.timer = null
this.timer = setTimeout(() => {
this.loading = false
}, 1000)
}
}
})
</script>
</body>
</html>