Zlpt_Portal/src/views/user/index.vue

<script setup lang="ts">
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from '../../store/user'
    import { useRoute } from 'vue-router'
    const store = useStore()
    const router = useRouter()
    const route = useRoute()

    // 求租按钮
    const seekingRentClick = () => {
        store.editcurrentMenuItem('baseInfo')
        store.editCurrentMenuType(true)
        store.editcurrentMenuList([
            { title: '基础信息', name: 'baseInfo' },
            { title: '订单管理', name: 'orderManagement' },
            { title: '子账号管理', name: 'subAccount' }
        ])
        router.push({ name: 'baseInfo' })
    }

    // 承租按钮
    const lesseeClick = () => {
        store.editcurrentMenuItem('orderManagementCz')
        store.editCurrentMenuType(false)
        store.editcurrentMenuList([
            { title: '订单管理', name: 'orderManagementCz' },
            { title: '商品管理', name: 'goodsManagement' },
            { title: '商品上下架', name: 'goodsUpdown' },
            { title: '机手管理', name: 'operatorManagement' }
        ])
        router.push({ name: 'orderManagementCz' })
    }

    const handleSelect = (name: any, path: any) => {
        store.editcurrentMenuItem(name)
    }
    const activeMenuItem = computed(() => {
        return store.currentMenuItem
    })

    const activeseekingRent = computed(() => {
        return store.currentMenuType
    })

    const menuList = computed(() => {
        return store.menuList
    })

    watch(route, (newVlaue) => {
        if (newVlaue.path.indexOf('myuser') === -1) {
            store.editcurrentMenuItem('baseInfo')
            store.editCurrentMenuType(true)
            store.editcurrentMenuList([
                { title: '基础信息', name: 'baseInfo' },
                { title: '订单管理', name: 'orderManagement' },
                { title: '子账号管理', name: 'subAccount' }
            ])
        }
    })
</script>

<template>
    <!-- 个人中心页面 -->
    <div class="app-container">
        <div class="left-menu">
            <!-- 头像 -->
            <div class="pic-box">
                <img src="../../assets/img/bns-logo.png" alt="" />
                <span>15336652321</span>
            </div>

            <!-- 按钮 -->
            <div class="btn-box">
                <span @click="seekingRentClick">
                    <a :class="activeseekingRent ? 'active' : ''">求租</a>
                </span>
                <span @click="lesseeClick">
                    <a :class="!activeseekingRent ? 'active' : ''">承租</a>
                </span>
            </div>

            <!-- 菜单 -->
            <el-menu
                :default-active="activeMenuItem"
                class="el-menu-vertical-demo"
                router
                @select="handleSelect">
                <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.name">
                    {{ item.title }}
                </el-menu-item>
            </el-menu>
        </div>
        <div class="right-content">
            <router-view />
        </div>
    </div>
</template>

<style lang="scss">
    .app-container {
        background-color: #fff;
        display: flex;
        justify-content: space-between;

        .left-menu {
            width: 260px;
            height: 100%;
            background-color: #f7f9fa;
            border-radius: 5px;
            margin-right: 15px;

            .pic-box {
                width: 260px;
                height: 180px;
                text-align: center;

                img {
                    margin: 30px 0 10px 0;
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                }

                span {
                    display: block;
                }
            }
        }

        .btn-box {
            height: 45px;
            display: flex;

            span {
                height: 100%;
                line-height: 45px;
                flex: 1;
                cursor: pointer;
                text-align: center;
                color: #82b8ff;
            }
        }

        .right-content {
            width: calc(100% - 260px);
            height: 100%;
        }

        .active {
            color: #2282ff;
            border-bottom: 2px solid #2282ff;
            font-weight: bold;
        }
    }
</style>