Zlpt_Portal/src/views/user/index.vue

<script setup lang="ts">
import Header from 'components/header/index.vue'
import { useRouter } from 'vue-router'
import { useStore } from '../../store/user'
import { mainStore } from '../../store/main'
import { useRoute } from 'vue-router'

const spaceTop = ref('')
const store = useStore()
const router = useRouter()
const route = useRoute()

const userInfo: any = computed(() => {
    return mainStore().userInfo
})

import imgSrc from '@/assets/img/logo.png'

// 求租按钮
// const seekingRentClick = () => {
//     store.editcurrentMenuItem('baseInfo')
//     store.editCurrentMenuType(true)
//     store.editcurrentMenuList([
//         { title: '基础信息', name: 'baseInfo' },
//         { title: '订单管理', name: 'orderManagement' },
//         { title: '子账号管理', name: 'subAccount' },
//         { title: '业务开通', name: 'business' },
//         { title: '寻源需求', name: 'sourcingNeed' },
//     ])
//     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' },
//         { title: '寻源竞价', name: 'sourcingBidding' },
//         { title: '专区管理', name: 'zoneManag' },
//     ])
//     router.push({ name: 'orderManagementCz' })
// }

const handleSelect = (name: any, path: any) => {
    // store.editcurrentMenuItem(name)

    store.editcurrentMenuItem(name)
    router.push({
        name,
    })
}

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

const isType: any = computed(() => {
    return localStorage.getItem('rolesType')
})

const allList = [
    { title: '装备管理', name: 'goodsManagement', permission: ['1'] },
    { title: '订单管理', name: 'orderManagementCz', permission: ['1'] },
    { title: '接单管理', name: 'accept-orders', permission: ['1'] },
    { title: '退租管理', name: 'rent-termination', permission: ['1'] },
    { title: '结算管理', name: 'settlement-manage', permission: ['1'] },
    { title: '需求管理', name: 'sourcingNeed', permission: ['2'] },
    { title: '订单管理', name: 'orderManagement', permission: ['2'] },
    { title: '合同管理', name: 'contract-manage', permission: ['1'] },
]
const menuList: any = computed(() => {
    return allList.filter((e) => e.permission.includes(isType.value))
})

const activeItem = computed(() => {
    return store.currentMenuItem
})
router.push({
    name: activeItem.value,
})

onMounted(() => {
    console.log(route, '**********************')
})

// const activeMenuItem = computed(() => {
//     return store.leaseAndLesseeUserList[0].name
// })

// 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' },
//             // { title: '业务开通', name: 'business' },
//         ])
//     }
// })

// onMounted(() => {
//     let divElement: any = document.getElementById('user-container')
//     let rect = divElement.getBoundingClientRect()
//     let top = rect.top + 20 + 'px'
//     spaceTop.value = top
// })
</script>

<template>
    <!-- 个人中心页面 -->
    <Header />
    <div class="app-container" id="user-container">
        <div class="left-menu">
            <div class="logo-title" @click="$router.push({ name: 'home' })">
                <el-image
                    style="width: 100%; height: 60px; cursor: pointer"
                    :src="imgSrc"
                    fit="contain"
                />
            </div>
            <!-- <div class="pic-box">
                <img v-if="userInfo.logoUrl" :src="userInfo.logoUrl" alt="" />

                <img
                    v-else
                    src="https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/2023/12/09/815629f192564db98ac55a643b46f853gouwu.png"
                    alt=""
                />
                <span>{{ userInfo.phonenumber || '' }}</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
                class="el-menu-vertical-demo"
                @select="handleSelect"
                :default-active="route.name"
            >
                <template v-for="(item, index) in menuList" :key="index">
                    <el-menu-item :index="item.name">
                        {{ item.title }}
                    </el-menu-item>
                </template>
            </el-menu>
        </div>
        <div class="right-content">
            <router-view />
        </div>
    </div>
</template>

<style lang="scss">
.app-container {
    // background-color: #fff;
    display: flex;
    height: calc((100vh - 37px));
    width: 100%;

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

        .logo-title {
            // background-color: #1ea193;
            cursor: pointer;
            text-align: center;
            padding: 15px;
            color: #fff;
        }

        .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 {
        flex: 1;
        padding: 15px;
        background-color: #eeeff6;
        overflow-y: auto;
    }

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