组件更新

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,101 +1,75 @@
 <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="">
+            <li v-for="item in menuList" :key="item.path">
+                <div class="flex">
+                    <img :src="item.imgActive" 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>
+                <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 store from '../../store';
+
 export default {
    name: 'Sidebar',
-  props: {
-    // menuList: {
-    //   type: Array,
-    //   required: true
-    // },
-    // activeFloor:{
-    //   type:String
-    // },
-    // curIndex:{
-    //   type:Number
-    // }
-  },
+    props: {},
    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,73 +77,25 @@ 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() {
-      this.menuList.forEach(item => {
-        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(() => {
-        this.activeFloor = dom;
                this.setHighActive(dom)
            }, 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
            ele.classList.add('ceshi')
@ -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}
      },