|
|
@@ -1,9 +1,19 @@
|
|
|
<template>
|
|
|
<view class="nav-left">
|
|
|
<template v-if="showMenu">
|
|
|
- <view :class="['item-list',navType==s.flag ?'selected':'']" v-for="(s, idx) in nav" @tap="goTo(s)" :key="idx">
|
|
|
- <view class="name">{{s.name}}</view>
|
|
|
- </view>
|
|
|
+ <view :class="['item-list',navType==s.flag ?'selected':'']" v-for="(s, idx) in nav" @tap="goTo(s)" :key="idx">
|
|
|
+ <view class="name">{{s.name}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="more-menu-wrapper">
|
|
|
+ <view class="more-menu-popover" v-if="showMoreMenu" @tap.stop>
|
|
|
+ <view class="more-menu-item" v-for="(s, idx) in moreNav" @tap.stop="goTo(s)" :key="idx">
|
|
|
+ {{s.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="more-menu-btn" @tap.stop="toggleMoreMenu">
|
|
|
+ <zui-svg-icon icon="general-more-menu" :width="28" :height="28" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -31,11 +41,14 @@ export default {
|
|
|
{ name: "收银", page: "/pages/home/cash",flag:'casher'},
|
|
|
{ name: "订单", page: "/pages/home/order",flag:'order'},
|
|
|
{ name: "现金", page: "/pages/home/xj",flag:'xj'},
|
|
|
+ //{ name: "损耗", page: "/pages/home/waste",flag:'waste'},
|
|
|
+ ],
|
|
|
+ moreNav: [
|
|
|
{ name: "退出", page: "/pages/home/logout",flag:'logout'},
|
|
|
{ name: "关闭", page: "/pages/home/close",flag:'close'},
|
|
|
- //{ name: "损耗", page: "/pages/home/waste",flag:'waste'},
|
|
|
],
|
|
|
- device:''
|
|
|
+ device:'',
|
|
|
+ showMoreMenu: false
|
|
|
};
|
|
|
},
|
|
|
created(){
|
|
|
@@ -77,8 +90,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ toggleMoreMenu(){
|
|
|
+ this.$util.hitVoice()
|
|
|
+ this.showMoreMenu = !this.showMoreMenu
|
|
|
+ },
|
|
|
goTo(item) {
|
|
|
let that = this
|
|
|
+ this.showMoreMenu = false
|
|
|
this.$util.hitVoice();
|
|
|
if(item.flag == 'close'){
|
|
|
// #ifdef APP-PLUS
|
|
|
@@ -118,7 +136,12 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.nav-left {
|
|
|
flex: 5;
|
|
|
- view:first-child {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ & > .item-list:first-child {
|
|
|
margin-top: 23upx;
|
|
|
}
|
|
|
& .item-list {
|
|
|
@@ -132,6 +155,43 @@ export default {
|
|
|
width:28upx;
|
|
|
}
|
|
|
}
|
|
|
+ & .more-menu-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ & .more-menu-btn {
|
|
|
+ width: 32upx;
|
|
|
+ height: 32upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ & .more-menu-popover {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 30upx;
|
|
|
+ width: 100%;
|
|
|
+ height: 80upx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8upx;
|
|
|
+ box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.18);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ & .more-menu-item {
|
|
|
+ flex: 1;
|
|
|
+ color: #333;
|
|
|
+ font-size: 10upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
& .selected{
|
|
|
font-weight:bold;
|
|
|
color:white;
|
