beelink/src/components/Menu.vue

<template>
    <div class="menu">
        <div class="user" style="overflow: hidden;">
            <div class="user" :class="{'seltop': selnum == 0}">
                <!-- <img :src="userinfo.img" alt="" class="head"> -->
                <a-avatar :size="85" shape="circle" class="head" :src="userinfo.img">
                    <template v-slot:icon><UserOutlined /></template>
                </a-avatar>
                <div class="name">{{userinfo.name}}</div>
            </div>
        </div>
        
        <div class="list">
            <div v-for="(i,j) in list" :key="j" style="overflow: hidden;" @click="routeto(j)">
                <div class="item" :class="{'selitem': j == selnum, 'seltop': j == selnum - 1, 'selbottom': j == selnum + 1}">
                    <div class="route">
                        <img :src="j == selnum ? i.sleicon : i.icon" alt="" class="icon">
                        <div class="title">{{lan.$t(i.name)}}</div>
                    </div>
                    <img alt="" :src="j == selnum ? jiantous : jiantou" class="right">
                </div>
            </div>
            <div style="overflow: hidden;">
                <div class="item" :class="{'selbottom': selnum == list.length - 1}"></div>
            </div>
            <div class="item loginout" @click="visible = true">
                <div class="route">
                    <img src="../static/images/tuichu.png" alt="" class="icon">
                    <div class="title">
                        {{lan.$t('tuichu')}}
                    </div>
                </div>
            </div>
        </div>
        <a-modal v-model:visible="visible" :title="lan.$t('tishi')" @ok="logout">
            <p>{{lan.$t('querentuichu')}}</p>
        </a-modal>
    </div>
</template>
<style lang="scss" scoped>
.menu{
    user-select: none;
    width: 171px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(0deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
    .user{
        width: 100%;
        height: 150px;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .head{
            width: 57px;
            height: 57px;
            margin-bottom: 15px;
            border-radius: 50%;
        }
        .name{
            font-size: 15rpx;
            line-height: 1;
            color: #fff;
        }

    }
    .list{
        position: relative;
        display: flex;
        height: 100%;
        padding-left: 6px;
        display: flex;
        flex-direction: column;
        .item{
            display: flex;
            align-items: center;
            height: 50px;
            padding: 0 18px;
            justify-content: space-between;
            cursor: pointer;
            &:hover{
                .route{
                
                    .title{
                        font-weight: bold;
                    }
                } 
            }
            .route{
                display: flex;
                .icon{
                    width: 15px;
                    height: 15px;
                }
                .title{
                    font-size: 13px;
                    color: #fff;
                    line-height: 1;
                    margin-left: 6px;
                }
            }
            .right{
                width: 5px;
                height: 10px;
            }
        }
        .loginout{
            position: absolute;
            bottom: 10px;
        }
    }
    .seltop{
        border-radius: 0 0 25px 0;
        box-shadow: 0 0 0 30px #f5f5f5 ;
    }
    .selbottom{
        border-radius: 0 25px 0 0;
        box-shadow: 0 0 0 30px #f5f5f5 ;
    }
    .selitem{
        border-radius: 25px 0 0 25px;
        background-color: #F5F5F5;
        .title{
            color: #08AE98 !important;    
            font-weight: bold;
        }
    }
}
</style>
<script lang="ts">
import { logoutapi } from '@/api';
import { setToken } from '@/api/base';
import router from '@/router';
import store from '@/store';
import { saveValue } from '@/utils/common';
import { useI18n } from '@/utils/i18n';
import { computed, defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
    setup(){
        const lan: any = useI18n();
        interface MenuItem {
            icon: string;
            sleicon: string;
            name: string;
            route: string;
        }
        // 左侧的列表数组
        const list: Array<MenuItem> = [
            {  
                icon: require("../static/images/wode1.png"),
                sleicon: require("../static/images/wodedangan1.png"),
                name: 'wodedangan',
                route: "/mine/archives"
            },
            {  
                icon: require("../static/images/xiayig.png"),
                sleicon:require("../static/images/shipin1.png"),
                name: 'fabuzhibo',
                route: "/mine/webcast"
            },
            {  
                icon: require("../static/images/shipin.png"),
                sleicon: require("../static/images/zhibo1.png"),
                name: 'shangchuanshipint',
                route: "/mine/video"
            },
            {  
                icon: require("../static/images/yinhangka.png"),
                sleicon: require("../static/images/qianbao1.png"),
                name: 'wodeqianbao',
                route: "/mine/wallet"
            },
            {  
                icon: require("../static/images/tongji.png"),
                sleicon: require("../static/images/liebiao1.png"),
                name: 'liebiaotongji',
                route: "/mine/liststatistic"
            },
            {  
                icon: require("../static/images/bangzhu.png"),
                sleicon: require("../static/images/guanyu1.png"),
                name: 'guanyu',
                route: "/mine/aboutus"
            }
        ]
        // 当前选中的index
        const selnum = ref(0);

        const userinfo = computed(() => store.state.userinfo)
        // 设置当前路由
        const routelist = [
            ["/mine/archives"],
            ['/mine/webcast'],
            ['/mine/video'],
            ['/mine/wallet', '/mine/cashout', '/mine/addaccount', '/mine/transaction', '/mine/transactionxq'],
            ['/mine/liststatistic'],
            ['/mine/aboutus']
        ]
        for(const i in routelist){
            for(const j in routelist[i]){
                console.log(routelist[i][j]==useRoute().path)
                if(routelist[i][j] == useRoute().path){
                    selnum.value = parseInt(i);
                }
            }
            
        }
        /**
         * 跳转路由与赋值对应的下标
         * @param index 选中的下标 方便赋值与跳转
         */
        function routeto(index: number): void {
            console.log(index)
            selnum.value = index;
            router.push({
                path: list[index].route
            })

        }

        function mouse(index: number): void {
            console.log(index)
            selnum.value = index;
        }

        const visible = ref(false);

        function logout(): void{
            console.log("退出")
            logoutapi()
            store.commit("login", false)
            saveValue("token", "");
            setToken();
            router.replace("/");
        }
  

        return{
            list,
            routeto,
            selnum,
            userinfo,
            logout,
            mouse,
            lan,
            visible,
            jiantou: require('../static/images/jiantou.png'),
            jiantous: require('../static/images/kuozhan1.png')
        }
    }
})
</script>