公共服务平台-宣传物料

src/views/publicService/proMaterials/index.vue

@@ -11,6 +11,28 @@
       >
         {{ item.label }}
       </div>
+
+      <div class="category-section">
+        <div class="section-title">分类</div>
+        <div class="checkbox-item">
+          <el-checkbox
+            v-model="selectedTypes"
+            label="1"
+            @change="filterMaterials"
+          >
+          宣传手册</el-checkbox>
+        </div>
+        <div class="checkbox-item">
+          <el-checkbox
+            v-model="selectedTypes"
+            label="0"
+            @change="filterMaterials"
+          >
+            宣传视频
+          </el-checkbox>
+        </div>
+      </div>
+
     </div>
 
     <div class="content-area" ref="servicesGrid">
@@ -101,6 +123,7 @@ export default {
       },
       lookFile: 'http://192.168.0.14:8012/onlinePreview?url=',
       filePreviewPath: 'http://218.21.27.6:18013/onlinePreview?url=',
+      selectedTypes: [], // 存储用户勾选的类型（如 ['1', '2']）
     }
   },
   created() {
@@ -121,6 +144,19 @@ export default {
   },
 
   methods: {
+
+    // 多选筛选逻辑
+    filterMaterials() {
+      console.log(this.selectedTypes)
+      if (this.selectedTypes.length === 0) {
+        this.showProMaterialsDuctList = this.proMaterialsListAll;
+      } else {
+        this.showProMaterialsDuctList = this.proMaterialsListAll.filter(item => {
+          return this.selectedTypes.includes(item.fileType.toString());
+        });
+      }
+    },
+
     // 获取产品卡片宽度
     getItemWidth() {
       this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
@@ -397,4 +433,29 @@ export default {
   width: 100%;
   height: 79vh;
 }
+
+.category-section {
+  margin-top: 20px;
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+}
+
+.section-title {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+  padding-left: 16px;
+}
+
+.checkbox-item {
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+}
 </style>