result

build/webpack.prod.conf.js

@@ -18,8 +18,8 @@ var webpackConfig = merge(baseWebpackConfig, {
     //devtool: config.build.productionSourceMap ? '#source-map' : false,
     output: {
         path: config.build.assetsRoot,
-        filename: utils.assetsPath('js/[name].js'),
-        chunkFilename: utils.assetsPath('js/[name].[chunkhash].min.js')
+        filename: utils.assetsPath('js/[name].js?chunkhash=[chunkhash]'),
+        chunkFilename: utils.assetsPath('js/[name].[chunkhash].min.js?chunkhash=[chunkhash]')
     },
     vue: {
         loaders: utils.cssLoaders({

src/components/business/group-title.vue

+<template>
+  <section>
+      <span>{{groupTitle}}({{groupNum}})</span>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+      return {
+        
+      }
+  },
+  props: {
+    groupTitle: {
+      type: String,
+      default: '课程'
+    },
+    groupNum: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../style/mixin.scss';
+// @import '../../style/global.scss';
+
+</style>

src/components/business/no-more-item.vue

+<template>
+  <section>
+      <span>-</span>
+      <span>{{noMoreText}}</span>
+      <span>-</span>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+      return {
+        noMoreText: '已经到底了'
+      }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../style/mixin.scss';
+// @import '../../style/global.scss';
+
+</style>

src/components/business/search-header.vue

 <template>
   <article class="search-wrapper">
     <section class="search-wrapper-input">
-      <img src='../../images/search-grey.png'>
-      <form action="" @submit="search">
+      <form action="" @submit.stop="search">
+        <img src='../../images/search-grey.png'>
         <input type="search" v-model="searchText"/>
       </form>
     </section>
@@ -19,9 +19,12 @@ export default {
     }
   },
   methods: {
+    // 取消
     cancel() {
+      console.log('in cancel')
       this.searchText = ''
     },
+    // 搜索
     search() {
       this.$emit('search', this.searchText)
     }
@@ -29,7 +32,6 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 @import '../../style/mixin.scss';
 // @import '../../style/global.scss';
@@ -65,6 +67,9 @@ export default {
       font-size: px2rem(13px);
       font-weight: 400;
       background: rgba(245, 246, 246, 1);
+      &[type="search"]::-webkit-search-cancel-button{
+        display: none;
+      }
     }
   }
   &-cancle {

src/components/business/search-label.vue

 <template>
-    <article v-if="allLabels&&allLabels.length>0" class="search-tag search-label">
+    <article v-if="allLabels && allLabels.length > 0" class="search-tag search-label">
         <!-- <section :style="{'text-align': direction}" class="search-tag-title">
             {{title}}
         </section> -->

src/components/business/show-all-item.vue

+<template>
+  <section >
+      <span></span>
+      <span @click="showAllItem">{{noMoreText}}</span>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+      return {
+        noMoreText: '查看全部'
+      }
+  },
+  props: {
+    showIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    showAllItem() {
+      this.$emit('showAllItem', this.showIndex)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../style/mixin.scss';
+// @import '../../style/global.scss';
+
+</style>

src/components/business/split-line.vue

 <template>
-  <section :style="{'line-width':lineWidth, 'border-color': borderColor, 'border-style': borderStyle, 'border-width': borderWidth}">
+  <section style="border-bottom: 0" :style="{'border-color': borderColor, 'border-style': borderStyle, 'border-width': borderWidth}">
 
   </section>
 </template>
 <script>
 export default {
   props: {
-    lineWidth: {
-      type: String,
-      default: 'px2rem(375px)'
-    },
     borderWidth: {
       type: String,
-      default: '1px'
+      default: '0.5px'
     },  
     borderStyle: {
       type: String,
@@ -26,7 +22,6 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 @import '../../style/mixin.scss';
 // @import '../../style/global.scss';

src/router/router.js

@@ -2,7 +2,7 @@ import App from '../App'
 
 const index = r => require.ensure([], () => r(require('../views/index')), 'index')
 const search = r => require.ensure([], () => r(require('../views/search-index')), 'search')
-const result = r => require.ensure([], () => r(require('../views/search-index')), 'result')
+const result = r => require.ensure([], () => r(require('../views/result')), 'result')
 
 export default [{
     path: '/',

src/views/result.vue

+<template>
+    <section>
+        <SearchHeader @search="search"/>
+        <SplitLine/>
+        <!-- 没有结果页面 -->
+        <section v-show="!hasResult">
+          <!-- <NoResultPage/>
+          <RecommendCourse/> -->
+        </section>
+        <!-- 有结果页面 -->
+        <section v-show="hasResult">
+          <mt-navbar v-model="selected" :fixed="false">
+            <mt-tab-item id="0">综合</mt-tab-item>
+            <mt-tab-item id="1">课程</mt-tab-item>
+            <mt-tab-item id="2">五分钟医学</mt-tab-item>
+            <mt-tab-item id="3">讲师</mt-tab-item>
+            <mt-tab-item id="4">健康漫画</mt-tab-item>
+          </mt-navbar>
+
+          <!-- tab-container -->
+          <mt-tab-container v-model="selected">
+            <mt-tab-container-item id="0">
+              <!-- 课程 -->
+              <SplitLine borderWidth="3px"/>
+              <!-- 五分钟医学 -->
+              <SplitLine borderWidth="3px"/>
+              <!-- 讲师 -->
+              <SplitLine borderWidth="3px"/>
+              <!-- 健康漫画 -->
+              <ShowAllItem/>
+              <NoMoreItem/>
+              <GroupTitle/>
+            </mt-tab-container-item>
+            <mt-tab-container-item id="1">
+              bbbb
+            </mt-tab-container-item>
+            <mt-tab-container-item id="2">
+              cccc
+            </mt-tab-container-item>
+            <mt-tab-container-item id="3">
+              dddd
+            </mt-tab-container-item>
+            <mt-tab-container-item id="4">
+              eee
+            </mt-tab-container-item>
+          </mt-tab-container>
+        </section>
+    </section>
+</template>
+
+<script>
+import SearchHeader from '../components/business/search-header';
+import SplitLine from '../components/business/split-line';
+import NoMoreItem from '../components/business/no-more-item';
+import ShowAllItem from '../components/business/show-all-item';
+import GroupTitle from '../components/business/group-title';
+import { Navbar, TabItem } from 'mint-ui';
+
+export default {
+  data() {
+    return {
+      hasResult: true,
+      searchText: '',
+      selected: '0'
+    }
+  },
+  components: {
+    SearchHeader,
+    SplitLine,
+    Navbar,
+    TabItem,
+    NoMoreItem,
+    ShowAllItem,
+    GroupTitle
+  },
+  watch: {
+    selected(val) {
+      this.showIndex(val)
+    }
+  },
+  created(){
+    this.searchText = this.$route.query.searchText || ''
+  },
+  mounted(){
+    this.search()
+  },
+  methods: {
+    // 搜索
+    search() {
+      console.log('in result search: ' + this.searchText)
+    },
+    showIndex(index) {
+      console.log(index)
+    }
+  },
+}
+</script>
+<style lang="scss">
+  @import '../style/mixin.scss';
+  .mint-tab-item-label {
+      color: inherit;
+      font-size: px2rem(14px);
+      line-height: 1;
+  }
+  .mint-navbar {
+    background-color: #fff;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    text-align: center;
+    border-bottom: px2rem(1px) solid #f0f0f0 !important;
+  }
+  .mint-navbar .mint-tab-item.is-selected {
+    border-bottom: px2rem(2px) solid #449284;
+    color: #449284;
+    margin-bottom: px2rem(-1px);
+  }
+  .mint-navbar .mint-tab-item {
+    padding: px2rem(19px) 0 px2rem(11px);
+    font-size: px2rem(14px);
+  }
+</style>
+<style lang="scss" scoped>
+@import '../style/mixin.scss';
+@import '../style/global.scss';
+
+</style>

src/views/search-index.vue

 <template>
     <div>
         <SearchHeader @search="search"/>
-        <SplitLine/>
-        <!-- <HistorySearch/> -->
+        <SplitLine />
         <HisttoryLabels :allLabels="allLabels" :hasResult="hasResult"/>
         <HotLabels title="热门搜索" :showDelete="false" :allLabels="allLabels" :hasResult="hasResult"/>
     </div>
@@ -29,15 +28,23 @@ export default {
     HotLabels
   },
   created(){
-
+    
   },
 
   mounted(){
     
   },
   methods: {
+    // 跳转到结果页面，并
     search(searchText) {
       console.log(searchText)
+      if(!searchText) return;
+      this.$router.push({
+        path: '/result',
+        query: {
+          searchText: searchText
+        }
+      })
     }
   },
 }