搜索结果增加高亮

src/pages/search/components/courseList.vue

 <template>
   <div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
-    <ul v-if="list.length">
-      <li v-for="item in list" :key="item.course_id">
-        <router-link :to="{ name: 'courseLearnItem', params: { id: item.id } }">{{ item.course_name }}</router-link>
+    <ul v-if="currentList.length">
+      <li v-for="item in currentList" :key="item.course_id">
+        <router-link :to="{ name: 'courseLearnItem', params: { id: item.id } }">
+          <div v-html="item.html"></div>
+        </router-link>
       </li>
     </ul>
     <template v-else>
@@ -40,6 +42,15 @@ export default {
       }
     }
   },
+  computed: {
+    currentList() {
+      return this.list.map(item => {
+        const keywords = this.requestParams.keywords
+        item.html = item.course_name.replaceAll(keywords, `<span class="highlight">${keywords}</span>`)
+        return item
+      })
+    }
+  },
   methods: {
     getList() {
       this.loaded = false
@@ -72,4 +83,7 @@ export default {
     text-decoration: underline;
   }
 }
+::v-deep .highlight {
+  color: #c01540;
+}
 </style>

src/pages/search/components/tagList.vue

 <template>
   <div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
-    <ul v-if="list.length">
-      <li v-for="item in list" :key="item.id">
+    <ul v-if="currentList.length">
+      <li v-for="item in currentList" :key="item.id">
         <router-link :to="{ name: 'courseTagItem', params: { courseId: item.course_id, id: item.id } }">
-          {{ item.title }}
+          <div v-html="item.html"></div>
         </router-link>
       </li>
     </ul>
@@ -43,8 +43,12 @@ export default {
     }
   },
   computed: {
-    isWeapp() {
-      return this.$store.state.isWeapp
+    currentList() {
+      return this.list.map(item => {
+        const keywords = this.requestParams.keywords
+        item.html = item.title.replaceAll(keywords, `<span class="highlight">${keywords}</span>`)
+        return item
+      })
     }
   },
   methods: {
@@ -79,4 +83,7 @@ export default {
     text-decoration: underline;
   }
 }
+::v-deep .highlight {
+  color: #c01540;
+}
 </style>

src/pages/search/components/videoList.vue

 <template>
   <div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
-    <template v-if="dataList.length">
+    <template v-if="currentList.length">
       <ul>
-        <li v-for="item in dataList" :key="item.id" @click="onClick(item)">
+        <li v-for="item in currentList" :key="item.id" @click="onClick(item)">
           <div class="pic">
             <img :src="item.url" />
             <div class="cover"></div>
           </div>
-          <div class="text">{{ item.chapter_name }}</div>
+          <div class="text" v-html="item.html"></div>
         </li>
       </ul>
     </template>
@@ -47,12 +47,12 @@ export default {
     }
   },
   computed: {
-    isWeapp() {
-      return this.$store.state.isWeapp
-    },
-    // 过滤空视频
-    dataList() {
-      return this.list.filter(item => item.resource_id !== '6684350363920760832')
+    currentList() {
+      return this.list.map(item => {
+        const keywords = this.requestParams.keywords
+        item.html = item.chapter_name.replaceAll(keywords, `<span class="highlight">${keywords}</span>`)
+        return item
+      })
     }
   },
   methods: {
@@ -114,4 +114,7 @@ export default {
     overflow: hidden;
   }
 }
+::v-deep .highlight {
+  color: #c01540;
+}
 </style>