修改搜索页面

src/components/AppSearchBar.vue

 <template>
   <div class="search-bar">
-    <form action @submit.prevent="onSearch">
-      <div class="inner">
-        <input
-          type="search"
-          class="search-input"
-          :placeholder="placeholder"
-          v-model="currentValue"
-          v-bind="$attrs"
-          @input="onChange"
-          ref="formInput"
-        />
-        <input type="button" value="搜索" class="search-button" @click="onSearch" />
-      </div>
-    </form>
+    <el-input
+      prefix-icon="el-icon-search"
+      size="medium"
+      clearable
+      v-model="currentValue"
+      @change="onChange"
+      @keyup.enter.native="onSearch"
+      ref="formInput"
+    ></el-input>
+    <el-button type="text" size="medium" @click="onSearch">搜索</el-button>
   </div>
 </template>
 
@@ -21,8 +17,7 @@
 export default {
   props: {
     value: String,
-    focus: { type: Boolean, default: false },
-    placeholder: { type: String, default: '全国道路运输安全生产管理培训' }
+    focus: { type: Boolean, default: false }
   },
   data() {
     return {
@@ -45,7 +40,6 @@ export default {
       this.focus && this.formInput.focus()
     },
     onChange() {
-      this.$emit('input', this.currentValue)
       this.$emit('change', this.currentValue)
     },
     onSearch() {
@@ -60,30 +54,16 @@ export default {
 
 <style lang="scss">
 .search-bar {
-  padding: 0.4rem 0;
-}
-.search-input {
-  display: block;
-  width: 100%;
-  padding: 0.2rem 0.2rem 0.2rem 0.9rem;
-  height: 0.66rem;
-  font-size: 0.26rem;
-  line-height: 0.26rem;
-  background: #f7f7f7 url('~@/assets/images/icon_search.png') no-repeat 0.4rem
-    center;
-  background-size: 0.31rem;
-  border: 0;
-  border-radius: 0.1rem;
-  outline: none;
-}
-.search-button {
-  margin-left: 0.2rem;
-  color: #222;
-  font-size: 0.3rem;
-  appearance: none;
-  background-color: transparent;
-}
-.inner {
   display: flex;
+
+  .el-input {
+    width: 240px;
+  }
+  .el-button {
+    margin-left: 10px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #333;
+  }
 }
 </style>

src/components/CourseList.vue

@@ -5,7 +5,7 @@
     </template>
     <template v-else>
       <slot name="empty">
-        <p class="empty-tips">暂无内容</p>
+        <p class="empty">暂无内容</p>
       </slot>
     </template>
   </div>

src/components/layout/header.vue

 <template>
   <div class="app-header">
-    <div class="title">{{ title }}</div>
+    <div class="title">
+      <router-link to="/">{{ title }}</router-link>
+    </div>
     <div class="tool">
+      <app-search-bar @search="handleSearch" />
       <nav class="nav">
         <router-link to="/">首页</router-link>
         <router-link to="/my">我的</router-link>
@@ -12,12 +15,19 @@
 </template>
 
 <script>
+import AppSearchBar from '@/components/AppSearchBar'
 export default {
   name: 'AppHeader',
+  components: { AppSearchBar },
   data() {
     return {
       title: '金融数字化营销职业技能培训'
     }
+  },
+  methods: {
+    handleSearch(value) {
+      this.$router.replace({ path: '/search', query: { keywords: value } })
+    }
   }
 }
 </script>
@@ -31,6 +41,11 @@ export default {
   padding: 0 30px;
   background-color: #fff;
 
+  .tool {
+    display: flex;
+    align-items: center;
+  }
+
   .title {
     font-size: 24px;
     font-weight: 600;
@@ -38,6 +53,7 @@ export default {
   }
 
   .nav {
+    margin-left: 20px;
     font-size: 18px;
     color: #333;
     a {

src/pages/search/components/courseList.vue

 <template>
-  <div class="main-list" v-show="loaded">
+  <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" @click="onClick(item)">{{item.course_name}}</li>
+      <li v-for="item in list" :key="item.course_id">
+        <router-link :to="{ name: 'courseLearnItem', params: { id: item.id } }">{{ item.course_name }}</router-link>
+      </li>
     </ul>
     <template v-else>
       <slot name="empty">
@@ -38,11 +40,6 @@ export default {
       }
     }
   },
-  computed: {
-    isWeapp() {
-      return this.$store.state.isWeapp
-    }
-  },
   methods: {
     getList() {
       this.loaded = false
@@ -54,16 +51,6 @@ export default {
     // 刷新
     refresh() {
       this.getList()
-    },
-    onClick(data) {
-      if (this.isWeapp) {
-        // const url = data.free
-        //   ? `/pages/course/free?id=${data.id}`
-        //   : `/pages/web/index?src=${window.location.origin}/course/learn/${data.id}`
-        wx.miniProgram.navigateTo({ url: `/pages/web/index?src=${window.location.origin}/course/learn/${data.id}` })
-      } else {
-        this.$router.push({ name: 'courseLearnItem', params: { id: data.id } })
-      }
     }
   },
   beforeMount() {
@@ -73,13 +60,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.main-list ul {
+  display: flex;
+  flex-wrap: wrap;
+}
 .main-list li {
-  padding: 0.3rem 0;
-  font-size: 0.3rem;
-  color: #222;
-  border-bottom: 1px solid #f1f1f1;
-  &:last-child {
-    border-bottom: 0;
+  width: 33%;
+  padding: 10px 0;
+  &:hover {
+    color: #c01540;
+    text-decoration: underline;
   }
 }
 </style>

src/pages/search/components/tagList.vue

 <template>
-  <div class="main-list" v-show="loaded">
+  <div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
     <ul v-if="list.length">
-      <li
-        v-for="item in list"
-        :key="item.id"
-        @click="onClick(item)"
-      >{{item.title}}{{item.free ? '（免费）': ''}}</li>
+      <li v-for="item in list" :key="item.id">
+        <router-link :to="{ name: 'courseTagItem', params: { id: item.id } }">{{ item.title }}</router-link>
+      </li>
     </ul>
     <template v-else>
       <slot name="empty">
@@ -58,14 +56,6 @@ export default {
     // 刷新
     refresh() {
       this.getList()
-    },
-    onClick(data) {
-      if (this.isWeapp) {
-        const url = `/pages/web/index?src=${window.location.origin}/course/tag/${data.id}`
-        wx.miniProgram.navigateTo({ url })
-      } else {
-        this.$router.push({ name: 'courseTagItem', params: { id: data.id } })
-      }
     }
   },
   beforeMount() {
@@ -75,13 +65,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.main-list ul {
+  display: flex;
+  flex-wrap: wrap;
+}
 .main-list li {
-  padding: 0.3rem 0;
-  font-size: 0.3rem;
-  color: #222;
-  border-bottom: 1px solid #f1f1f1;
-  &:last-child {
-    border-bottom: 0;
+  width: 33%;
+  padding: 10px 0;
+  &:hover {
+    color: #c01540;
+    text-decoration: underline;
   }
 }
 </style>

src/pages/search/components/videoList.vue

 <template>
-  <div class="main-list" v-show="loaded">
+  <div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
     <template v-if="dataList.length">
       <ul>
         <li v-for="item in dataList" :key="item.id" @click="onClick(item)">
@@ -7,7 +7,7 @@
             <img :src="item.url" />
             <div class="cover"></div>
           </div>
-          <div class="text">{{item.chapter_name}}{{item.free ? '（免费）': ''}}</div>
+          <div class="text">{{ item.chapter_name }}</div>
         </li>
       </ul>
     </template>
@@ -67,16 +67,7 @@ export default {
     refresh() {
       this.getList()
     },
-    onClick(data) {
-      if (this.isWeapp) {
-        // const url = data.free
-        //   ? `/pages/course/free?id=${data.course_id}&chapter_id=${data.id}`
-        //   : `/pages/course/item?id=${data.course_id}&chapter_id=${data.id}`
-        wx.miniProgram.navigateTo({ url: `/pages/course/item?id=${data.course_id}&chapter_id=${data.id}` })
-      } else {
-        window.alert('请在微信小程序中打开')
-      }
-    }
+    onClick(data) {}
   },
   beforeMount() {
     this.getList()
@@ -86,18 +77,16 @@ export default {
 
 <style lang="scss" scoped>
 .main-list ul {
-  margin-top: 0.58rem;
   display: flex;
-  justify-content: space-between;
   flex-wrap: wrap;
 }
 .main-list li {
-  width: 3rem;
-  margin-bottom: 0.4rem;
+  width: 33%;
+  margin-bottom: 40px;
   .pic {
     position: relative;
-    width: 3rem;
-    height: 1.7rem;
+    width: 160px;
+    height: 90px;
     border-radius: 6px;
     img {
       width: 100%;
@@ -112,14 +101,11 @@ export default {
     right: 0;
     bottom: 0;
     background: rgba(1, 1, 1, 0.2) url(../../../assets/images/icon_play.png) no-repeat center center;
-    background-size: 0.56rem 0.7rem;
+    background-size: 38px 50px;
     z-index: 10;
   }
   .text {
-    margin: 0.1rem 0;
-    font-size: 0.3rem;
-    color: #222;
-    line-height: 0.4rem;
+    margin: 5px 0;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;

src/pages/search/index.vue

 <template>
   <div class="main-container">
-    <app-search-bar v-model="searchValue" @search="onSearch" />
     <div class="search-tips" v-if="!searchValue">
       <div class="search-tips-item" v-if="historyList.length && isLogin">
         <h3 class="search-tips__title">搜索历史</h3>
         <ul class="search-tips__list">
-          <li
-            v-for="(item, index) in historyList"
-            :key="index"
-            @click="changeSearchValue(item)"
-          >{{item}}</li>
+          <li v-for="(item, index) in historyList" :key="index" @click="changeSearchValue(item)">{{ item }}</li>
         </ul>
       </div>
       <div class="search-tips-item" v-if="featureList.length">
         <h3 class="search-tips__title">搜索发现</h3>
         <ul class="search-tips__list">
-          <li
-            v-for="(item, index) in featureList"
-            :key="index"
-            @click="changeSearchValue(item)"
-          >{{item}}</li>
+          <li v-for="(item, index) in featureList" :key="index" @click="changeSearchValue(item)">{{ item }}</li>
         </ul>
       </div>
     </div>
     <div class="search-main" v-if="searchValue">
-      <van-tabs
-        class="main-tabs"
-        v-model="tabActive"
-        color="#C62245"
-        :line-height="2"
-        :animated="true"
-        :swipeable="true"
-        @click="onTabClick"
-      >
-        <van-tab title="考点" name="0">
+      <el-tabs v-model="tabActive" @tab-click="onTabClick">
+        <el-tab-pane label="考点" name="0">
           <tag-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '0'"></tag-list>
-        </van-tab>
-        <van-tab title="视频课程" name="1">
+        </el-tab-pane>
+        <el-tab-pane label="视频课程" name="1">
           <video-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '1'"></video-list>
-        </van-tab>
-        <van-tab title="课程" name="2">
+        </el-tab-pane>
+        <el-tab-pane label="课程" name="2">
           <course-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '2'"></course-list>
-        </van-tab>
-      </van-tabs>
+        </el-tab-pane>
+      </el-tabs>
     </div>
   </div>
 </template>
@@ -105,9 +88,10 @@ export default {
     },
     changeSearchValue(value) {
       this.searchValue = value
+      this.$router.push({ query: { tab: this.tabActive, keywords: this.searchValue } })
     },
-    onTabClick(name) {
-      this.$router.replace({ query: { tab: name, keywords: this.searchValue } })
+    onTabClick() {
+      this.$router.replace({ query: { tab: this.tabActive, keywords: this.searchValue } })
     },
     onSearch() {
       if (!this.searchValue.trim()) {
@@ -125,14 +109,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.main-container {
+  height: 100%;
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
 .search-tips-item {
   clear: both;
   overflow: hidden;
 }
 .search-tips__title {
-  font-size: 0.3rem;
+  font-size: 18px;
   font-weight: 400;
   color: #222;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ccc;
 }
 .search-tips__list {
   padding-top: 0.37rem;
@@ -140,12 +133,13 @@ export default {
 .search-tips__list li {
   display: inline-block;
   max-width: 100%;
-  font-size: 0.26rem;
-  color: #999;
-  margin-right: 0.4rem;
-  margin-bottom: 0.4rem;
+  font-size: 14px;
+  color: #222;
+  margin-right: 20px;
+  margin-bottom: 20px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  cursor: pointer;
 }
 </style>

src/style.scss

@@ -90,7 +90,7 @@ body {
   background-color: #f9f9f9;
 }
 
-.empty-tips {
+.empty {
   padding: 120px;
   text-align: center;
   font-size: 18px;