页面权限

src/views/home/components/changeBase.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="changeBase">
-    <div class="base-item" @click="handleClick(index)" v-for="(item, index) in buttonList" :key="item"
-      :style="{ zIndex: activeButton === index ? 10 : 1 }">
-      <img :src="activeButton === index ? imgMap.bgBase[item] : imgMap.base[item]" :alt="`${item}基地`" :title="item">
+    <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>
@@ -33,80 +33,69 @@ export default {
   props: {
     factory: {
       type: [String, Number],
-      default: 5, // 新映射中“宜兴”对应序号7
-      validator: (val) => [5, 2, 7, 3, 8, 9, 10].includes(val) // 校验序号范围（匹配新的baseNameToIndexMap）
+      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: 5, // 初始化默认选中索引2（对应buttonList中的“宜兴”）
-      buttonList: ['合肥', '桐城', '宜兴', '自贡', '漳州', '洛阳', '秦皇岛', '宿迁'], // 匹配截图顺序
-      imgMap: {
-        base: {
-          合肥: baseHefei,
-          桐城: baseTongcheng,
-          宜兴: baseYixing,
-          自贡: baseZigong,
-          漳州: baseZhangzhou,
-          洛阳: baseLuoyang,
-          秦皇岛: baseQinhuangdao,
-          宿迁: baseSuqian
-        },
-        bgBase: {
-          合肥: bgBaseHefei,
-          桐城: bgBaseTongcheng,
-          宜兴: bgBaseYixing,
-          自贡: bgBaseZigong,
-          漳州: bgBaseZhangzhou,
-          洛阳: bgBaseLuoyang,
-          秦皇岛: bgBaseQinhuangdao,
-          宿迁: bgBaseSuqian
-        }
-      },
-      baseNameToIndexMap: { // 新的名称→序号映射
-        宜兴: 7,
-        漳州: 8,
-        自贡: 3,
-        桐城: 2,
-        洛阳: 9,
-        合肥: 5,
-        秦皇岛: 10, // 补充
-        宿迁: 6  // 补充
-      }
+      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) {
-        // 根据新的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);
+        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 // 初始化立即执行
-    },
-    // 监听本地选中索引变化，向父组件发送事件
-    activeButton(newVal) {
-      const selectedName = this.buttonList[newVal];
-      const selectedIndex = this.baseNameToIndexMap[selectedName] || 5; // 默认返回宜兴的序号7
-      this.$emit('baseChange', selectedIndex);
+      // immediate: true // 初始化立即执行
     }
   },
   methods: {
-    handleClick(index) {
-      this.activeButton = index;
-    },
-    getIndexByName(name) {
-      return this.baseNameToIndexMap[name] || 5;
+    handleClick(id) {
+      this.activeButton = id;
+      this.$emit('baseChange', id);
     }
   },
   mounted() {
     // 初始化时触发事件，传递默认选中的宜兴序号（7）
-    this.$emit('baseChange', 5);
+    // this.$emit('baseChange', 5);
   }
 };
 </script>