组件更新

src/components/super/RankingLeftMenu.vue

@@ -1,101 +1,75 @@
 <template>
     <aside class="sidebar">
         <ul>
-      <li v-for="(item, index) in menuList" :key="item.path">
+            <li v-for="item in menuList" :key="item.path">
-        <div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']">
+                <div class="flex">
-          <img v-if="$route.path == item.path" :src="item.imgActive" alt="">
+                    <img :src="item.imgActive" alt="">
-          <img v-else :src="item.img" alt="">
                     {{ item.name }}
                 </div>
-        <p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']"
+                <p :class="['flex', $route.path == item1.path ? 'curActive' : '']" v-for="(item1) in item.list"
-          v-for="(item1) in item.list" @click="setActiveCur(item1.desc, item1)" :key="item1.name">{{ item1.name }}</p>
+                   @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: {
+    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'
                         },
                     ]
                 },
@@ -103,77 +77,29 @@ export default {
         }
     },
     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状态到组件的计算属性中
     },
     beforeDestroy() {
-    this.$parent.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
     },
     methods: {
-    calculateFloorOffsets() {
+        setActiveCur(dom, item) {
-      this.menuList.forEach(item => {
+            if (this.$route.path != item.path) {
-        item.list.forEach(every => {
-          const el = document.getElementById(every.desc);
-          if (el) {
-            every.offsetTop = el.offsetTop;
-          }
-        })
-      });
-    },
-    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; // 更新数据以触发视图更新
-    },
-    setActiveCur(dom,item) {
-      if(this.$route.path != item.path){
                 this.$router.push(item.path)
                 store.commit('SET_PAGETITLE', item.name);
             }
-      setTimeout(()=>{
+            setTimeout(() => {
-        this.activeFloor = dom;
                 this.setHighActive(dom)
-      },500)
+            }, 500)
-    },
-    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)
-      }
         },
         setHighActive(dom) {
-      this.scrollLock = true;
             const ele = document.getElementById(dom)
-      if(!ele)return
+            if (!ele) return
             ele.classList.add('ceshi')
-      ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
+            ele.scrollIntoView({behavior: 'smooth', block: 'start'})
             setTimeout(() => {
                 ele.classList.remove('ceshi')
             }, 1000)
@@ -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>

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}
       },