135 lines
4.5 KiB
Vue
135 lines
4.5 KiB
Vue
<template>
|
||
<div class="changeBase">
|
||
<div class="base-item" @click="handleClick(item.id)" v-for="(item) in buttonLevelList" :key="item.id"
|
||
:style="{ zIndex: activeButton === item.id ? 10 : 1 }">
|
||
<img :src="activeButton === item.id ? item.bgImg : item.img" :alt="`${item.name}基地`" :title="item.name">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 导入基地图片（按统一命名规范）
|
||
import baseYixing from '@/assets/images/base/宜兴.png';
|
||
import baseZhangzhou from '@/assets/images/base/漳州.png';
|
||
import baseZigong from '@/assets/images/base/自贡.png';
|
||
import baseTongcheng from '@/assets/images/base/桐城.png';
|
||
import baseLuoyang from '@/assets/images/base/洛阳.png';
|
||
import baseHefei from '@/assets/images/base/合肥.png';
|
||
import baseSuqian from '@/assets/images/base/宿迁.png';
|
||
import baseQinhuangdao from '@/assets/images/base/秦皇岛.png';
|
||
|
||
// 导入选中态基地图片
|
||
import bgBaseYixing from '@/assets/images/bgBase/宜兴.png';
|
||
import bgBaseZhangzhou from '@/assets/images/bgBase/漳州.png';
|
||
import bgBaseZigong from '@/assets/images/bgBase/自贡.png';
|
||
import bgBaseTongcheng from '@/assets/images/bgBase/桐城.png';
|
||
import bgBaseLuoyang from '@/assets/images/bgBase/洛阳.png';
|
||
import bgBaseHefei from '@/assets/images/bgBase/合肥.png';
|
||
import bgBaseSuqian from '@/assets/images/bgBase/宿迁.png';
|
||
import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png';// 补充：江苏
|
||
|
||
export default {
|
||
name: "BaseSelector",
|
||
props: {
|
||
factory: {
|
||
type: [String, Number],
|
||
default: undefined,
|
||
validator: (val) => [5, 2, 7, 3, 8, 9, 10, 6].includes(val) // 校验序号范围（匹配新的baseNameToIndexMap）
|
||
}
|
||
},
|
||
// 计算属性（响应式，levelList变化时会自动更新）
|
||
computed: {
|
||
buttonLevelList() {
|
||
// 核心：通过$store.getters获取定义的getter
|
||
let arr = []
|
||
this.$store.getters.levelList.forEach(item => {
|
||
this.buttonList.forEach(item2 => {
|
||
if (item2.id === item.id) {
|
||
arr.push(item2)
|
||
}
|
||
})
|
||
})
|
||
this.activeButton = arr[0].id
|
||
return arr
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
activeButton: undefined,
|
||
buttonList:[
|
||
{id: 5, name: '合肥', img: baseHefei, bgImg: bgBaseHefei},
|
||
{id: 2, name: '桐城', img: baseTongcheng, bgImg: bgBaseTongcheng},
|
||
{id: 7, name: '宜兴', img: baseYixing, bgImg: bgBaseYixing},
|
||
{id: 3, name: '自贡', img: baseZigong, bgImg: bgBaseZigong},
|
||
{id: 8, name: '漳州', img: baseZhangzhou, bgImg: bgBaseZhangzhou},
|
||
{id: 9, name: '洛阳', img: baseLuoyang, bgImg: bgBaseLuoyang},
|
||
{id: 10, name: '秦皇岛', img: baseQinhuangdao, bgImg: bgBaseQinhuangdao},
|
||
{id: 6, name: '宿迁', img: baseSuqian, bgImg: bgBaseSuqian}
|
||
],
|
||
};
|
||
},
|
||
watch: {
|
||
// 监听父组件传递的factory变化，同步本地选中索引
|
||
factory: {
|
||
handler(newVal) {
|
||
console.log('watch factory=======================:', newVal);
|
||
if (newVal) {
|
||
this.activeButton = newVal;
|
||
}
|
||
// // 根据新的baseNameToIndexMap，找到对应的基地名称
|
||
// const targetName = Object.keys(this.baseNameToIndexMap).find(name => this.baseNameToIndexMap[name] === newVal);
|
||
// // 根据名称找到buttonList中的索引
|
||
// const targetIndex = this.buttonList.indexOf(targetName);
|
||
// // 合法索引则更新，否则默认选中宜兴
|
||
// this.activeButton = targetIndex > -1 ? targetIndex : 2;
|
||
// console.log('当前选中基地：', this.buttonList[this.activeButton], '序号：', newVal);
|
||
},
|
||
// immediate: true // 初始化立即执行
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick(id) {
|
||
this.activeButton = id;
|
||
this.$emit('baseChange', id);
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化时触发事件，传递默认选中的宜兴序号（7）
|
||
// this.$emit('baseChange', 5);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.changeBase {
|
||
display: flex;
|
||
width: fit-content;
|
||
align-items: center;
|
||
|
||
.base-item {
|
||
width: 234px;
|
||
height: 81px;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 38px;
|
||
line-height: 54px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
margin-right: -35px; // 重叠效果，可根据需求调整
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover,
|
||
&:active {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|