commit message

buyer/src/components/drawer/Main.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div class="wrapper" :style="{right:handleDrawer ? '300px' : '0px'}">
+
+      <div class="barItem" @mouseenter="showCartNum(item)" @click="clickBar(item)" v-for="(item,index) in resetConfig.menuList" :key="index">
+        <Tooltip placement="left" :content="item.title">
+          <Icon size="20" :type="item.icon"/>
+          <p class="barTitle" v-if="item.titleShow"> {{item.title}}</p>
+          <div class="circle" v-if="item.title === '购物车'">
+            {{cartNum < 100 ? cartNum : 99}}
+          </div>
+        </Tooltip>
+      </div>
+
+    </div>
+    <Drawer width="300" class="popup" :title="drawerData.title" :mask="resetConfig.mask" :closable="resetConfig.closable"
+      v-model="handleDrawer">
+      <drawerPage :title="drawerData.title" />
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import Storage from '@/plugins/storage.js';
+import Configuration from './config';
+import drawerPage from './Drawer'
+import {cartCount} from '@/api/cart.js'
+export default {
+  name: 'Main',
+  data () {
+    return {
+      resetConfig: Configuration, // 菜单项
+      handleDrawer: false, // 是否可展开
+      drawerData: '' // 菜单基础数据
+    }
+  },
+  components: {drawerPage},
+  computed: {
+    userInfo () {
+      return Storage.getItem('userInfo');
+    },
+    cartNum () {
+      return this.$store.state.cartNum
+    }
+  },
+  methods: {
+    showCartNum (item) {
+      if (this.userInfo && item.title === '购物车') {
+        this.getCartList()
+      }
+    },
+    clickBar (val) {
+      if (!this.userInfo) {
+        this.$Modal.confirm({
+          title: '请登录',
+          content: '<p>请登录后执行此操作</p>',
+          okText: '立即登录',
+          cancelText: '继续浏览',
+          onOk: () => {
+            this.$router.push({
+              path: '/login',
+              query: {
+                rePath: this.$router.history.current.path,
+                query: JSON.stringify(this.$router.history.current.query)
+              }
+            });
+          }
+        });
+      } else {
+        if (val.display) {
+          this.handleDrawer = true
+          this.drawerData = val
+        } else {
+          this.handleDrawer = false
+          switch (val.title) {
+            case '会员中心':
+              this.openBlank('/home')
+              break;
+            case '我的资产':
+              this.openBlank('/home/MoneyManagement')
+              break;
+          }
+        }
+      }
+    },
+    openBlank (path) {
+      let routerUrl = this.$router.resolve({
+        path: path
+      })
+      window.open(routerUrl.href, '_blank')
+    },
+    getCartList () { // 获取购物车列表
+      cartCount().then(res => {
+        this.$store.commit('SET_CARTNUM', res.result)
+        this.Cookies.setItem('cartNum', res.result)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .wrapper {
+    background-color: #000!important;
+  }
+  .barItem {
+    text-align: center;
+    padding: 13px 0;
+
+    cursor: pointer;
+    color: #fff;
+    &:hover{
+      background-color: $theme_color;
+      .circle{
+        color: $theme_color;
+        background-color: #fff;
+      }
+    }
+  }
+
+  .barTitle {
+    writing-mode: vertical-lr;
+    letter-spacing: 2px;
+    padding: 4px 0;
+
+  }
+
+  .circle {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    color: #fff;
+    background: $theme_color;
+  }
+
+  .wrapper {
+    width: 40px;
+    position: fixed;
+    transition: .35s;
+    height: 100%;
+    z-index: 9999;
+    background: $dark_background_color;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+  /deep/.popup .ivu-drawer-body{
+    padding: 0!important;
+    background-color: #eee;
+  }
+  /deep/.popup .ivu-drawer-wrap{
+    z-index: 3001;
+  }
+</style>