138 lines
4.0 KiB
Vue
138 lines
4.0 KiB
Vue
<template>
|
|
<div class="ecommerce-left-menu-warp">
|
|
<div class="left-menu">
|
|
<div>
|
|
<img :src="getAssetsFile('images/logo.png')?.href" style="width: 90%; height: 80px" />
|
|
</div>
|
|
<view
|
|
v-for="(n, index) in leftMenu"
|
|
:key="index"
|
|
class="left-menu-item"
|
|
:class="currentIndex == index ? 'active' : ''"
|
|
@click="toLink(n, index)"
|
|
>
|
|
<div class="item-img">
|
|
<img :src="getAssetsFile('images/userCenter/' + n.icon)?.href ?? ''" />
|
|
</div>
|
|
<p class="item-title">{{ n.title }}</p>
|
|
</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: 'menu1.png', path: '/sub-operation-service/userCenter' },
|
|
{ name: 'supplier', title: '我的订单', icon: 'menu2-1.png', path: '/sub-operation-service/userOrders' },
|
|
// { name: 'purchaser', title: '我的土地', icon: 'menu3-1.png', path: '/sub-operation-service/userLands' },
|
|
{ name: 'mySource', title: '我的溯源', icon: 'menu4-1.png', path: '/sub-operation-service/mySource' },
|
|
// { name: 'myFinance', title: '我的金融', icon: 'menu5-1.png', path: '/sub-operation-service/myFinance' },
|
|
{ name: 'myBrand', title: '我的品牌', icon: 'menu6-1.png', path: '/sub-operation-service/myBrand' },
|
|
{ name: 'addressList', title: '我的地址', icon: 'menu7-1.png', path: '/sub-operation-service/addressList' },
|
|
]);
|
|
|
|
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 }
|
|
);
|
|
|
|
//监听currentIndex变化
|
|
watch(
|
|
() => currentIndex.value,
|
|
() => {
|
|
console.info('currentIndex', currentIndex.value);
|
|
leftMenu.forEach((item, index) => {
|
|
// 处理图标数据，如果没有有 -1 后缀，则添加
|
|
if (!item.icon.includes('-1')) {
|
|
// 仅处理不包含 -1 的项
|
|
const [name, ext] = item.icon.split('.');
|
|
item.icon = `${name}-1.${ext}`; // 添加 -1
|
|
}
|
|
if (index == currentIndex.value) {
|
|
// // 如果是当前项，则去掉 -1 后缀
|
|
item.icon = item.icon.replace('-1', '');
|
|
}
|
|
});
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
|
|
const toLink = (n, index) => {
|
|
// console.log('leftMenu', leftMenu);
|
|
|
|
currentIndex.value = index;
|
|
|
|
// leftMenu.forEach((item, i) => {
|
|
// // 处理图标数据，如果没有有 -1 后缀，则添加
|
|
// if (!item.icon.includes('-1')) {
|
|
// // 仅处理不包含 -1 的项
|
|
// const [name, ext] = item.icon.split('.');
|
|
// item.icon = `${name}-1.${ext}`; // 添加 -1
|
|
// }
|
|
// // 如果是当前项，则去掉 -1 后缀
|
|
// if (i == index) {
|
|
// item.icon = item.icon.replace('-1', '');
|
|
// }
|
|
// });
|
|
console.log('currentIndex.value', currentIndex.value);
|
|
|
|
router.push(n.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 16px 16px;
|
|
cursor: pointer;
|
|
&.active {
|
|
color: $color-main;
|
|
}
|
|
.item-img,
|
|
.item-title {
|
|
vertical-align: middle;
|
|
}
|
|
.item-img {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
}
|
|
.item-title {
|
|
display: -webkit-inline-box;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|