福建设计招聘网站,不关站备案wordpress 2019,威海外贸建站,新闻类网站开发特点完整源码可以私聊我#xff0c;需要一点点费用~
页面展示
方案一 方案二 代码解释
方案一#xff1a;使用v-show
这种方案只适合有两种页面
现在form表单中设置好要展现的页面名#xff08;此处的url没有作用不用管#xff09; 通过一个两个for循环分别将form表单填入…完整源码可以私聊我需要一点点费用~
页面展示
方案一 方案二 代码解释
方案一使用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 langen
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge!-- 上述3个meta标签*必须*放在最前面任何其他内容都*必须*跟随其后 --meta nameviewportcontentwidthdevice-width, initial-scale1.0, maximum-scale1.0,user-scalableno,minimal-uititlek1饱了吗/titlelink relicon hrefimages/favico.ico!--不同屏幕尺寸根字体设置--script src./js/base.js/script!--element-ui的样式--link relstylesheet href../backend/plugins/element-ui/index.css/!--引入vant样式--link relstylesheet hrefstyles/vant.min.css/!-- 引入样式 --link relstylesheet hrefstyles/index.css/!--本页面内容的样式--link relstylesheet hrefstyles/main.css/link relstylesheet hrefstyles/icon/iconfont.css/
/head
body
div idmain classappdiv classdivHeadimg src./images/user.png clicktoUserPage//div!-- 头部标签区--div classdivTitlediv classdivStaticimg src./images/logo.png classlogo/div classdivDescdiv classdivName饱了吗餐厅/divdiv classdivSendspanimg src./images/time.png/ 距离1.5km/spanspanimg src./images/money.png/ 配送费6元/spanspanimg src./images/location.png/ 预计时长12min/span/div/div/divdiv classdivDesc简介: 饱了吗餐厅是对抗饿了么的独立的品牌定位“大众化的美食外送餐饮”和美了么内卷竞争。/div/div!-- 菜品和评论选择区--div classdivSelectdiv v-foritem in menuList :keyitem.iddiv :indexitem.id v-ifitem.children item.children.length0template slottitlespan{{item.name}}/span/templatedivv-forsub in item.children:indexsub.id:keysub.idclickmenuHandle(sub,false)span slottitle :classsub.name{{sub.name}}/span/div/divdiv v-else :indexitem.id clickmenuHandle(item,false)span slottitle{{item.name}}/span/div/div/div!-- 内容展现区--div classdivBody!--展示菜单--div classdish v-ifshow styledisplay: flex;div classdivTypeulli v-for(item,index) in categoryList :keyindex clickcategoryClick(index,item.id,item.type):class{active:activeType index}{{item.name}}/li/ul/divdiv classdivMenudivdiv classdivItem v-for(item,index) in dishList :keyindex clickdishDetails(item)el-image :srcimgPathConvert(item.image)div sloterror classimage-slotimg src./images/noImg.png//div/el-imagedivdiv classdivName{{item.name}}/divdiv classdivDesc{{item.description}}/divdiv classdivDesc{{月销 (item.saleNum ? item.saleNum : 0) }}/divdiv classdivBottomspan/spanspan{{item.price/100}}/span/divdiv classdivNumdiv classdivSubtract v-ifitem.number 0img src./images/subtract.png click.prevent.stopsubtractCart(item)//divdiv classdivDishNum{{item.number}}/divdiv classdivTypes v-ifitem.flavors item.flavors.length 0 !item.number click.prevent.stopchooseFlavorClick(item)选择规格/divdiv classdivAdd v-elseimg src./images/add.png click.prevent.stopaddCart(item)//div/div/div/div/div/div/div!--展示评论--div classcomment v-if!showdivdiv classdivItem v-for(item,index) in commentList :keyindexdiv classdivInfodiv classdivName{{item.name}}/divdiv classdivTime{{item.createTime}}/div/divdiv classdivCommentdiv v-ifitem.description classdivDesc{{item.description}}/div/divel-image v-ifitem.image :srcimgPathConvert(item.image) /el-image/div/div/div!-- 菜品选择区--!-- div classapp-main v-loadingloading--!-- div classdivTmp v-showloading/div--!-- iframe--!-- idcIframe--!-- classc_iframe--!-- namecIframe--!-- :srciframeUrl--!-- width100%--!-- heightauto--!-- frameborder0--!-- v-show!loading--!-- /iframe--!-- /div--/divdiv classdivLayerdiv classdivLayerLeft/divdiv classdivLayerRight/div/divdiv classdivCart v-ifcategoryList.length 0div :class{imgCartActive: cartData cartData.length 0, imgCart:!cartData || cartData.length1}clickopenCart/divdiv :class{divGoodsNum:11, moreGoods:cartData cartData.length 99}v-ifcartData cartData.length 0{{ goodsNum }}/divdiv classdivNumspan/spanspan{{goodsPrice}}/span/divdiv classdivPrice/divdiv :class{btnSubmitActive: cartData cartData.length 0, btnSubmit:!cartData || cartData.length1}clicktoAddOrderPage去结算/div/divvan-dialog v-modeldialogFlavor.show :show-confirm-buttonfalse classdialogFlavor refflavorDialogdiv classdialogTitle{{dialogFlavor.name}}/divdiv classdivContentdiv v-forflavor in dialogFlavor.flavors :keyflavor.iddiv classdivFlavorTitle{{flavor.name}}/divspan v-foritem in JSON.parse(flavor.value):keyitemclickflavorClick(flavor,item):class{spanActive:flavor.dishFlavor item}{{item}}/span/div/divdiv classdivBottomdivspan classspanMoney/span{{dialogFlavor.price/100}}/divdiv clickdialogFlavorAddCart加入购物车/div/divdiv classdivFlavorClose clickdialogFlavor.show falseimg src./images/close.png//div/van-dialogvan-popup v-modelcartDialogShow positionbottom :style{ height: 50% } classdialogCartdiv classdivCartTitlediv classtitle购物车/divdiv classclear clickclearCarti classel-icon-delete/i 清空/div/divdiv classdivCartContentdiv v-foritem in cartData :keyitem.id classdivCartItemel-image :srcimgPathConvert(item.image)div sloterror classimage-slotimg src./images/noImg.png//div/el-imagediv classdivDescdiv classname{{item.name}}/divdiv classpricespan classspanMoney/span{{item.amount}}/div/divdiv classdivNumdiv classdivSubtractimg src./images/subtract.png clickcartNumberSubtract(item)//divdiv classdivDishNum{{item.number}}/divdiv classdivAddimg src./images/add.png clickcartNumAdd(item)//div/divdiv classdivSplit/div/div/div/van-popupvan-dialog v-modeldetailsDialog.show:show-confirm-buttonfalseclassdetailsDialogrefdetailsDialogv-ifdetailsDialog.showdiv classdivContainerel-image :srcimgPathConvert(detailsDialog.item.image)div sloterror classimage-slotimg src./images/noImg.png//div/el-imagediv classtitle{{detailsDialog.item.name}}/divdiv classcontent{{detailsDialog.item.description}}/div/divdiv classdivNumdiv classleftspan/spanspan{{detailsDialog.item.price/100}}/span/divdiv classrightdiv classdivSubtract v-ifdetailsDialog.item.number 0img src./images/subtract.png clicksubtractCart(detailsDialog.item)//divdiv classdivDishNum{{detailsDialog.item.number}}/divdiv classdivTypesv-ifdetailsDialog.item.flavors detailsDialog.item.flavors.length 0 !detailsDialog.item.number clickchooseFlavorClick(detailsDialog.item)选择规格/divdiv classdivAdd v-elseimg src./images/add.png clickaddCart(detailsDialog.item)//div/div/divdiv classdetailsDialogClose clickdetailsDialog.show falseimg src./images/close.png//div/van-dialogvan-dialog v-modelsetMealDialog.show:show-confirm-buttonfalseclasssetMealDetailsDialogrefsetMealDetailsDialogdv-ifsetMealDialog.showdiv classdivContainerdiv classtitle{{setMealDialog.item.name}}/divdiv classitem v-for(item,index) in setMealDialog.item.list :keyindexel-image :srcimgPathConvert(item.image)div sloterror classimage-slotimg src./images/noImg.png//div/el-imagediv classdivSubTitle{{item.name ( item.copies 份) }}div classdivPricespan/spanspan{{item.price/100}}/span/div/divdiv classcontent{{item.description}}/div/div/divdiv classdivNumdiv classleftspan/spanspan{{setMealDialog.item.price/100}}/span/divdiv classrightdiv classdivSubtract v-ifsetMealDialog.item.number 0img src./images/subtract.png clicksubtractCart(setMealDialog.item)//divdiv classdivDishNum{{setMealDialog.item.number}}/divdiv classdivAdd v-ifsetMealDialog.item.numberimg src./images/add.png clickaddCart(setMealDialog.item)//divdiv classaddCart clickaddCart(setMealDialog.item) v-if!setMealDialog.item.number加入购物车/div/div/divdiv classdetailsDialogClose clicksetMealDialog.show falseimg 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
scriptnew Vue({el: #main,data() {return {//左边菜品类别indexactiveType: 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 0this.cartData.forEach(item {num item.number})if (num 99) {return num} else {return 99}},goodsPrice() {let price 0this.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].dataif (Array.isArray(res[0].data) res[0].data.length 0) {this.categoryId res[0].data[0].idif (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 indexthis.categoryId idif (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.dataconst cartData this.cartDataif (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});}},//获取套餐数据setmealIdasync getSetmealData() {if (!this.categoryId) {return}const res await setmealListApi({categoryId: this.categoryId, status: 1})if (res.code 1) {let dishList res.dataconst cartData this.cartDataif (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,//口味 如果没有传undefineddishId: undefined,//菜品idsetmealId: undefined,//套餐idname: 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,//口味 如果没有传undefineddishId: item.dishId,//菜品idsetmealId: item.setmealId,//套餐idname: 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});}},//修改商品列表中的数据numberchangeDishList(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的domthis.dialogFlavor.show falsethis.dialogFlavor.show true},//选择规格加入购物车dialogFlavorAddCart() {const dialogFlavor this.dialogFlavorlet flag truelet dishFlavor []dialogFlavor.flavors.forEach(item {if (item.dishFlavor) {dishFlavor.push(item.dishFlavor)} else {flag falseNotify({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-ifthis.detailsDialog.item {}this.setMealDialog.item {}if (Array.isArray(item.flavors)) {this.detailsDialog.item itemthis.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 truethis.menuActived item.idthis.iframeUrl item.urlthis.headTitle item.namethis.goBackFlag goBackFlagthis.show !this.showthis.closeLoading()},closeLoading() {this.timer nullthis.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 langen
headmeta charsetUTF-8/meta http-equivX-UA-Compatible contentIEedge/meta nameviewport contentwidthdevice-width, initial-scale1.0/title11外卖管理端/titlelink relshortcut icon hreffavicon.ico!-- 引入样式 --!-- link relstylesheet hrefplugins/element-ui/index.css/ --link relstylesheet hrefstyles/common.css/link relstylesheet hrefstyles/index.css/link relstylesheet hrefstyles/icon/iconfont.css/style.body {min-width: 1366px;}.app-main {height: calc(100% - 64px);}.app-main .divTmp {width: 100%;height: 100%;}/style
/headbody
div classapp idappdiv classapp-wrapper openSidebar clearfix!-- sidebar --div classsidebar-containerel-scrollbar wrap-classscrollbar-wrapperel-menudiv v-foritem in menuList :keyitem.idel-submenu :indexitem.id v-ifitem.children item.children.length0template slottitlei classiconfont :classitem.icon/ispan{{item.name}}/span/templateel-menu-itemv-forsub in item.children:indexsub.id:keysub.idclickmenuHandle(sub,false)i :classiconfont :classsub.icon/ispan slottitle{{sub.name}}/span/el-menu-item/el-submenuel-menu-item v-else :indexitem.id clickmenuHandle(item,false)i classiconfont :classitem.icon/ispan slottitle{{item.name}}/span/el-menu-item/div/el-menu/el-scrollbar/divdiv classmain-container!-- navbar / --div classnavbardiv classhead-lablespan v-ifgoBackFlag classgoBack clickgoBack()img srcimages/icons/btn_back2x.png alt/ 返回/spanspan{{headTitle}}/span/divdiv classright-menudiv classavatar-wrapper{{ userInfo.name }}/div!-- div classlogout clicklogout退出/div --img srcimages/icons/btn_close2x.png classoutLogin alt退出 clicklogout//div/divdiv classapp-main v-loadingloadingdiv classdivTmp v-showloading/diviframeidcIframeclassc_iframenamecIframe:srciframeUrlwidth100%heightautoframeborder0v-show!loading/iframe/div/div/div
/div
!-- 开发环境版本包含了有帮助的命令行警告 --
script srcplugins/vue/vue.js/script
!-- 引入组件库 --
script srcplugins/element-ui/index.js/script
!-- 引入axios --
script srcplugins/axios/axios.min.js/script
script srcjs/request.js/script
script src./api/login.js/script
scriptnew 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 nullclearTimeout(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.namethis.menuHandle(menu, false)},menuHandle(item, goBackFlag) {this.loading truethis.menuActived item.idthis.iframeUrl item.urlthis.headTitle item.namethis.goBackFlag goBackFlagthis.closeLoading()},closeLoading() {this.timer nullthis.timer setTimeout(() {this.loading false}, 1000)}}})
/script
/body
/html
