kuailelunwen_new_houtai/src/components/super/RankingLeftMenu.vue

<template>
    <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>
import {mapState} from 'vuex';
import store from '../../store';

export default {
    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: '负毛利排行',
                            path: '/super/ranking/loss',
                        },
                    ]
                },
                {
                    name: '代理商',
                    imgActive: require('@/assets/super/ranking-menu.svg'),
                    list: [
                        {
                            name: '毛利润排行',
                            path: '/super/ranking/agentProfit',
                        },
                        {
                            name: '充值排行',
                            path: '/super/ranking/agentRecharge',
                        },
                        {
                            name: '新加盟',
                            path: '/super/ranking/agentNew',
                        },
                    ]
                },
                {
                    name: '设置',
                    imgActive: require('@/assets/super/ranking-menu.svg'),
                    list: [
                        {
                            name: '采购价',
                            path: '/super/ranking/purchase',
                        },
                        {
                            name: '阶段采购',
                            path: '/super/ranking/stagePurchase',
                        },
                        // {
                        //     name: '订单列表',
                        //     path: '/super/ranking/agentNew',
                        // },
                    ]
                },
            ]
        }
    },
    mounted() {
    },
    created() {
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    beforeDestroy() {
    },
    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>

<style scoped lang="scss">
.sidebar {
  width: 158px;
  padding: 21px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
}

ul {
  list-style: none;
  padding: 0;
}

.not-point {
  pointer-events: none;
  /* 阻止鼠标事件 */
  opacity: 0.5;
  /* 可选，降低透明度以视觉上表示不可用 */
  cursor: not-allowed;
  /* 改变鼠标光标样式，表示不可用 */
}

li {
  margin-bottom: 10px;

  div {
    letter-spacing: 0.08em;
    color: #1E2226;
    margin: 11px 0;
    cursor: pointer;

    img {
      margin-right: 6px;
    }
  }

  p {
    margin: 9px 0;
    letter-spacing: 0.08em;
    line-height: 18px;
    color: #8A9099;
    cursor: pointer;

    &:hover {
      color: #006AFF;
    }
  }

  .curActive {
    color: #006AFF;
  }
}

.active {
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #006AFF;
}

.item-active {
  color: #006AFF;
}
</style>