组件更新

1 month ago · bea80334ee
2 changed files with 101 additions and 198 deletions
--- a/src/components/super/RankingLeftMenu.vue
+++ b/src/components/super/RankingLeftMenu.vue
@ -1,184 +1,110 @@
 <template>
-  <aside class="sidebar">
-    <ul>
-      <li v-for="(item, index) in menuList" :key="item.path">
-        <div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']">
-          <img v-if="$route.path == item.path" :src="item.imgActive" alt="">
-          <img v-else :src="item.img" alt="">
-          {{ item.name }}
-        </div>
-        <p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']"
-          v-for="(item1) in item.list" @click="setActiveCur(item1.desc, item1)" :key="item1.name">{{ item1.name }}</p>
-      </li>
-    </ul>
-  </aside>
+    <aside class="sidebar">
+        <ul>
+            <li v-for="item in menuList" :key="item.path">
+                <div class="flex">
+                    <img :src="item.imgActive" alt="">
+                    {{ item.name }}
+                </div>
+                <p :class="['flex', $route.path == item1.path ? 'curActive' : '']" v-for="(item1) in item.list"
+                   @click="setActiveCur(item1.desc, item1)" :key="item1.name">{{ item1.name }}</p>
+            </li>
+        </ul>
+    </aside>
 </template>

 <script>
-// :class="[$route.path != item.path ? 'not-point' : '', 'flex', activeFloor == item1.desc ? 'curActive' : '']"
-import { mapState } from 'vuex';
+import {mapState} from 'vuex';
 import store from '../../store';
+
 export default {
-  name: 'Sidebar',
-  props: {
-    // menuList: {
-    //   type: Array,
-    //   required: true
-    // },
-    // activeFloor:{
-    //   type:String
-    // },
-    // curIndex:{
-    //   type:Number
-    // }
-  },
-  data() {
-    return {
-      activeFloor: null,
-      curIndex: 0,
-      scrollLock: false,
-      menuList: [
-        {
-          name: '总利润',
-          img: require('@/assets/super/ranking-menu.svg'),
-          imgActive: require('@/assets/super/ranking-menu.svg'),
-          list: [
-            {
-              name: '年排行',
-              path: '/super/ranking/yearProfit',
-              desc: 'siteMessage1'
-            },
-            {
-              name: '月排行',
-              path: '/super/ranking/monthProfit',
-              desc: 'siteMessage2'
-            },
-          ]
-        },
-        {
-          name: '产品',
-          img: require('@/assets/super/ranking-menu.svg'),
-          imgActive: require('@/assets/super/ranking-menu.svg'),
-          list: [
-            {
-              name: '毛利润排行',
-              path: '/super/ranking/checkProfit',
-              desc: 'siteMessage4'
-            },
-            {
-              name: '订单数排行',
-              path: '/super/ranking/checkOrdernum',
-              desc: 'siteMessage5'
-            },
-            {
-              name: '退单数排行',
-              path: '/super/ranking/checkRefund',
-              desc: 'siteMessage6'
-            },
-          ]
-        },
-        {
-          name: '代理商',
-          img: require('@/assets/super/ranking-menu.svg'),
-          imgActive: require('@/assets/super/ranking-menu.svg'),
-          list: [
-            {
-              name: '毛利润排行',
-              path: '/super/ranking/agentProfit',
-              desc: 'siteMessage9'
-            },
-            {
-              name: '充值排行',
-              path: '/super/ranking/agentRecharge',
-              desc: 'siteMessage10'
-            },
-            {
-              name: '新加盟',
-              path: '/super/ranking/agentNew',
-              desc: 'siteMessage11'
-            },
-          ]
-        },
-      ]
-    }
-  },
-  mounted() {
-    // console.log(this.curIndex,'this.curIndex');
-    this.activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
-    this.calculateFloorOffsets();
-    this.$nextTick(() => {
-      // console.log(this.$parent.$refs.scrollContainer, 'this.$refs.scrollContainer--');
-    })
-    this.$parent.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
-  },
-  created() {
-    // console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--');
-  },
-  computed: {
-        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    name: 'Sidebar',
+    props: {},
+    data() {
+        return {
+            menuList: [
+                {
+                    name: '总利润',
+                    imgActive: require('@/assets/super/ranking-menu.svg'),
+                    list: [
+                        {
+                            name: '年排行',
+                            path: '/super/ranking/yearProfit',
+                        },
+                        {
+                            name: '月排行',
+                            path: '/super/ranking/monthProfit',
+                        },
+                    ]
+                },
+                {
+                    name: '产品',
+                    imgActive: require('@/assets/super/ranking-menu.svg'),
+                    list: [
+                        {
+                            name: '毛利润排行',
+                            path: '/super/ranking/checkProfit',
+                        },
+                        {
+                            name: '订单数排行',
+                            path: '/super/ranking/checkOrdernum',
+                        },
+                        {
+                            name: '退单数排行',
+                            path: '/super/ranking/checkRefund',
+                        },
+                    ]
+                },
+                {
+                    name: '代理商',
+                    imgActive: require('@/assets/super/ranking-menu.svg'),
+                    list: [
+                        {
+                            name: '毛利润排行',
+                            path: '/super/ranking/agentProfit',
+                        },
+                        {
+                            name: '充值排行',
+                            path: '/super/ranking/agentRecharge',
+                        },
+                        {
+                            name: '新加盟',
+                            path: '/super/ranking/agentNew',
+                        },
+                    ]
+                },
+            ]
+        }
    },
-  beforeDestroy() {
-    this.$parent.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
-  },
-  methods: {
-    calculateFloorOffsets() {
-      this.menuList.forEach(item => {
-        item.list.forEach(every => {
-          const el = document.getElementById(every.desc);
-          if (el) {
-            every.offsetTop = el.offsetTop;
-          }
-        })
-      });
+    mounted() {
    },
-    handleScroll() {
-      if (this.scrollLock) return
-      const scrollContainer = this.$parent.$refs.scrollContainer;
-      const scrollHeight = scrollContainer.scrollTop;
-      let activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
-      this.menuList[this.curIndex]['list'].forEach(item => {
-        if (scrollHeight + 72 >= item.offsetTop) {
-          activeFloor = item.desc; // 更新当前激活的楼层ID
-        } else {
-          return false; // 一旦找到第一个小于当前滚动位置的楼层，停止循环
-        }
-      });
-      this.activeFloor = activeFloor; // 更新数据以触发视图更新
+    created() {
    },
-    setActiveCur(dom,item) {
-      if(this.$route.path != item.path){
-        this.$router.push(item.path)
-        store.commit('SET_PAGETITLE', item.name);
-      }
-      setTimeout(()=>{
-        this.activeFloor = dom;
-        this.setHighActive(dom)
-      },500)
+    computed: {
+        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
-    gotoPath(path,index) {
-      if(this.$route.path != path){
-        this.curIndex = index
-        this.scrollLock = false;
-        this.handleScroll()
-        // 重置页面滚动高度
-        const dom = document.getElementById('main-content')
-        if (dom) {
-          dom.scrollTop = 0
-        }
-        this.$router.push(path)
-      }
+    beforeDestroy() {
    },
-    setHighActive(dom) {
-      this.scrollLock = true;
-      const ele = document.getElementById(dom)
-      if(!ele)return
-      ele.classList.add('ceshi')
-      ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
-      setTimeout(() => {
-        ele.classList.remove('ceshi')
-      }, 1000)
+    methods: {
+        setActiveCur(dom, item) {
+            if (this.$route.path != item.path) {
+                this.$router.push(item.path)
+                store.commit('SET_PAGETITLE', item.name);
+            }
+            setTimeout(() => {
+                this.setHighActive(dom)
+            }, 500)
+        },
+        setHighActive(dom) {
+            const ele = document.getElementById(dom)
+            if (!ele) return
+            ele.classList.add('ceshi')
+            ele.scrollIntoView({behavior: 'smooth', block: 'start'})
+            setTimeout(() => {
+                ele.classList.remove('ceshi')
+            }, 1000)
+        }
    }
-  }
 }
 </script>

@ -191,10 +117,6 @@ export default {
  box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
 }

-.ceshi {
-  // animation: fadeInOut 2s infinite;
-}
-
 ul {
  list-style: none;
  padding: 0;
@ -240,18 +162,6 @@ li {
  }
 }

-/* {
-  display: block;
-  padding: 8px 12px;
-  text-decoration: none;
-  color: #333;
-  border-radius: 4px;
-} */
-/* 
-:hover {
-  background: #e0e0e0;
-} */
-
 .active {
  font-weight: bold;
  letter-spacing: 0.08em;
@ -261,10 +171,4 @@ li {
 .item-active {
  color: #006AFF;
 }
-
-/* 
-.exact-active {
-  background: #1976d2;
-  color: white;
-} */
 </style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -121,7 +121,6 @@ const routes = [{

  {
    path: '/super/ranking',
-    name: '站点设置',
    component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/Ranking.vue'),
    children: [
      {
@ -143,37 +142,37 @@ const routes = [{
      },
      {
        path: 'checkProfit',
-        name: '毛利润排行',
+        name: '产品毛利润排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
        props: {pageTitle:'产品 - 毛利润排行', rank_type: 1, type: 'check_type'}
      },
      {
        path: 'checkOrdernum',
-        name: '订单数排行',
+        name: '产品订单数排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
        props: {pageTitle:'产品 - 订单数排行', rank_type: 2, type: 'check_type'}
      },
      {
        path: 'checkRefund',
-        name: '退单数排行',
+        name: '产品退单数排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankList.vue'),
        props: {pageTitle:'产品 - 退单数排行', rank_type: 3, type: 'check_type'}
      },
      {
        path: 'agentProfit',
-        name: '毛利润排行',
+        name: '代理商毛利润排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
        props: {pageTitle:'代理商 - 毛利润排行', rank_type: 1, type: 'agent'}
      },
      {
        path: 'agentRecharge',
-        name: '充值排行',
+        name: '代理商充值排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
        props: {pageTitle:'代理商 - 充值排行', rank_type: 4, type: 'agent'}
      },
      {
        path: 'agentNew',
-        name: '新加盟',
+        name: '代理商新加盟',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
        props: {pageTitle:'代理商 - 新加盟', type: 'agentnew', showDateSelect: false}
      },