HTML+VUE+element-ui通过点击不同按钮展现不同页面

简介: HTML+VUE+element-ui通过点击不同按钮展现不同页面

完整源码可以私聊我,需要一点点费用~

页面展示

方案一

方案二

代码解释

方案一:使用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>
目录
相关文章
|
18小时前
|
JavaScript
Vue中嵌入原生HTML页面的方法
Vue中嵌入原生HTML页面的方法
6 0
|
1天前
|
定位技术 容器
vue3高德地图+搜索+点击获取经纬度
vue3高德地图+搜索+点击获取经纬度
|
22天前
|
缓存 自然语言处理 JavaScript
Vue 3 渲染机制解密:从模板到页面的魔法
Vue 3 渲染机制解密:从模板到页面的魔法
9 0
|
25天前
HTML用户充值页面充值中心模板
HTML用户充值页面充值中心模板
23 0
|
26天前
|
应用服务中间件
Tomcat8.5访问HTML页面出现乱码
Tomcat8.5访问HTML页面出现乱码
17 0
Tomcat8.5访问HTML页面出现乱码
|
26天前
|
前端开发
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
19 0
|
27天前
|
JavaScript
用什么代码可以在页面添加html元素呢?
用什么代码可以在页面添加html元素呢?
|
27天前
|
安全 JavaScript Go
Vue中的v-html指令有什么潜在的安全风险?如何防范?
Vue中的v-html指令有什么潜在的安全风险?如何防范?
33 1
QGS
|
28天前
|
JavaScript 安全 前端开发
手摸手vue2+Element-ui整合Axios
手摸手vue2+Element-ui整合Axios
QGS
20 0