85 lines
2.3 KiB
Vue
85 lines
2.3 KiB
Vue
<template>
|
|
<div class="ecommerce-left-menu-warp">
|
|
<div class="left-menu">
|
|
<view v-for="(n, index) in leftMenu" :key="index" class="left-menu-item" :class="currentIndex == index ? 'active' : ''" @click="toLink(index)">
|
|
<div class="item-img">
|
|
<img :src="getAssetsFile('images/ecommerce/' + n.icon)" />
|
|
</div>
|
|
<span class="item-title">{{ n.title }}</span>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup name="home">
|
|
import { ref, reactive, onMounted, watch } from 'vue';
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const props = defineProps({
|
|
currentName: { type: String, default: 'agricultural' },
|
|
});
|
|
|
|
const leftMenu = reactive([
|
|
{ name: 'agricultural', title: '农资交易', icon: 'menu2.png', path: '/sub-operation-service/ecommerce-agricultural' },
|
|
{ name: 'supplier', title: '供应商服务', icon: 'menu1.png', path: '/sub-operation-service/ecommerce-supplier' },
|
|
{ name: 'purchaser', title: '采购商服务', icon: 'menu3.png', path: '/sub-operation-service/ecommerce-purchaser' },
|
|
{ name: 'land', title: '土地交易', icon: 'menu4.png', path: '/sub-operation-service/ecommerce-land' },
|
|
]);
|
|
|
|
let currentIndex = ref(0);
|
|
|
|
watch(
|
|
() => props.currentName,
|
|
() => {
|
|
console.info('currentName', props.currentName);
|
|
currentIndex.value = leftMenu.findIndex((m) => {
|
|
return m.name == props.currentName;
|
|
});
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
|
|
const toLink = (index) => {
|
|
currentIndex.value = index;
|
|
let path = index != undefined ? leftMenu[index].path : null;
|
|
if (path) {
|
|
router.push(path);
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ecommerce-left-menu-warp {
|
|
width: 100%;
|
|
height: 100%;
|
|
.left-menu {
|
|
.left-menu-item {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
padding: 16px 0;
|
|
cursor: pointer;
|
|
&.active {
|
|
color: $color-main;
|
|
}
|
|
.item-img,
|
|
.item-title {
|
|
vertical-align: middle;
|
|
}
|
|
.item-img {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.item-title {
|
|
display: -webkit-inline-box;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
padding-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|