2025-04-11 17:32:55 +08:00

120 lines
3.4 KiB
Vue

<template>
<div class="layout-user-centre-warp">
<div class="layout-user-centre">
<div class="layout-user-centre-top">
<div class="logo-warp">
<costomImg :url="'images/logo.png'" :is-view="false"></costomImg>
</div>
</div>
<div class="layout-user-centre-menu">
<el-menu ellipsis class="layout-user-centre-menu">
<app-link v-for="(item, index) in meuns" :key="index" :to="item.path">
<el-menu-item active-text-color="#25BF82">
<div class="iconfont" :class="'icon-' + item.icon" :style="{ 'font-size': item.iconSize }"></div>
<span class="txt-ellipsis clamp1">{{ item.label }}</span>
</el-menu-item>
</app-link>
</el-menu>
</div>
</div>
</div>
</template>
<script setup name="layout-user-centre">
import { computed, ref } from 'vue';
import { useSettingStore } from '@/store/modules/setting';
import { usePermissionStore } from '@/store/modules/permission';
import AppLink from '../Menu/Link.vue';
import { useRoute, useRouter } from 'vue-router';
import { isEmpty, getAssetsFile } from '@/utils';
import costomImg from '@/components/costomImg.vue';
const route = useRoute();
const router = useRouter();
const SettingStore = useSettingStore();
const PermissionStore = usePermissionStore();
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
const isReload = computed(() => SettingStore.isReload);
const isSubApp = computed(() => route.path.includes('sub'));
const keyword = ref('');
const meuns = ref([
{ label: '我的购物车', path: '/sub-operation-service/userCenter-shoppingCart', icon: 'shopcar', iconSize: '26px' },
{ label: '我的订单', path: '/sub-operation-service/userCenter-userOrders', icon: 'order', iconSize: '26px' },
{ label: '我的土地', path: '/sub-operation-service/userCenter-userLands', icon: 'land', iconSize: '26px' },
// { label: '我的溯源', path: '', icon: 'soucecode' },
// { label: '我的金融', path: '', icon: 'finance' },
// { label: '我的农机', path: '', icon: 'farmmachinery' },
// { label: '我的品牌', path: '', icon: 'brand' },
// { label: '我的劳务', path: '', icon: 'labor' },
// { label: '分拣/包装', path: '', icon: 'sorting' },
// { label: '仓储/物流', path: '', icon: 'logistics' },
// { label: '修改密码', path: '', icon: 'password' },
]);
function Search() {
console.log(keyword.value, 'search');
}
const toHome = () => {
console.info('toHome', router);
router.push('/sub-operation-service/home');
};
</script>
<style lang="scss" scoped>
div {
box-sizing: border-box;
}
.layout-user-centre-warp {
width: 320px;
text-align: center;
display: inline-block;
height: 100vh;
padding: 16px;
.layout-user-centre {
height: calc(100% - 0px);
background: $color-fff;
overflow: auto;
border-radius: 16px;
}
.layout-user-centre-top {
width: 100%;
padding: 8px;
.logo-warp {
height: 74px;
}
}
.el-menu {
border-right: 0 !important;
background: $color-fff;
.el-menu-item {
font-size: 20px;
font-weight: 400;
.iconfont {
display: inline-block;
vertical-align: middle;
padding-right: 8px;
color: $color-333;
}
}
li {
color: $color-333;
}
.router-link-active {
li {
color: $color-main !important;
.iconfont {
color: $color-main !important;
}
}
}
}
}
</style>