文物的筛选、搜索功能

src/views/RelicsAppr.vue

@@ -83,11 +83,12 @@
           </button>
           <input
             ref="search-input"
+            v-model="searchKeyword"
             type="text"
           >
           <button
             class="cancel"
-            @click="isShowInput = false"
+            @click="onClickCancelInput"
           >
             取消
           </button>
@@ -100,7 +101,7 @@
       class="relics-list-3d"
     >
       <RelicItem
-        v-for="(item, index) in list3d"
+        v-for="(item, index) in list"
         :key="index"
         :is-odd="!!(index % 2)"
         :is-first="index === 1"
@@ -117,7 +118,7 @@
       class="relics-list-2d"
     >
       <li
-        v-for="(item, index) in list2d"
+        v-for="(item, index) in list"
         :key="index"
         @click="onClick2dItem(item)"
       >
@@ -166,7 +167,7 @@ export default {
         },
         {
           name: '手稿',
-          id: 'script',
+          id: 'straw',
         },
         {
           name: '书刊',
@@ -178,23 +179,32 @@ export default {
         },
         {
           name: '服装',
-          id: 'clothes',
+          id: 'clothign',
         },
       ],
       currentTypeIdx: 0,
       isShowSelections: false,
       isShowInput: false,
+      searchKeyword: '',
     }
   },
   computed: {
-    list3d() {
-      return rawData['3D']
-    },
-    list2d() {
-      return rawData['2D']
+    list() {
+      let temp = null
+      if (this.currentDim === 3) {
+        temp = rawData['3D']
+      } else {
+        temp = rawData['2D']
+      }
+      temp = temp.filter((item) => {
+        return item.type === this.typeList[this.currentTypeIdx].id || this.typeList[this.currentTypeIdx].id === 'all'
+      }).filter((item) => {
+        return item.name.includes(this.searchKeyword)
+      })
+      return temp
     },
     hasData() {
-      return true
+      return this.list.length !== 0
     },
   },
   methods: {
@@ -204,6 +214,10 @@ export default {
         this.$refs['search-input'].focus()
       })
     },
+    onClickCancelInput() {
+      this.isShowInput = false
+      this.searchKeyword = ''
+    },
     onClickOutside() {
       this.isShowSelections = false
     },