快讯store文件放一起

components/main/Search.vue

@@ -9,7 +9,7 @@
              @keyup.38="onSelectChange(-1)"
              @keyup.13="onSearch()"/>
       <span class="input-group-btn" @click="onSearch()">
-        <button class="btn btn-primary search-btn" type="button">搜&nbsp;索</button>
+        <nuxt-link :to="'/search/'+keyword" class="btn btn-primary search-btn" >搜&nbsp;索</nuxt-link>
       </span>
     </div>
     <ul class="association" v-show="showAssociate"

components/news/Detail.vue

@@ -4,7 +4,7 @@
         <h1 >{{item.title}}</h1>
         <div class="hot-time">
           <span class="text-num">时间：<span >{{item.created | date}}</span></span>
-          <span class="pull-right text-num ng-binding" style="font-size: 12px;"><i class="fa fa-eye" style="margin-left: 15px;"></i>{{item.viewCount}}</span>
+          <span class="pull-right text-num" style="font-size: 12px;"><i class="fa fa-eye" style="margin-left: 15px;"></i>{{item.viewCount}}</span>
         </div>
         <div class="news-detail-content" v-html=item.content>
         </div>
@@ -15,11 +15,11 @@
   export default {
     name: 'Detail',
     computed: {
-      news () {
-        return this.$store.state.detailNews.detailNews
+      new () {
+        return this.$store.state.newsData.detailNews.detailNews
       },
       item () {
-        return this.news.data
+        return this.new.data
       }
     },
     filters: {

components/news/Left.vue

@@ -29,11 +29,11 @@
 <script>
   export default {
     computed: {
-      news () {
-        return this.$store.state.hotNews.hotNews
+      new () {
+        return this.$store.state.newsData.hotNews.hotNews
       },
       news_show () {
-        return this.news.data
+        return this.new.data
       }
     },
     filters: {
@@ -119,6 +119,10 @@
     color: #323232;
   }
 
+  .hot-news li h5 a:hover{
+    color: #5078cb;
+  }
+
   .hot-time{
     line-height: 30px;
   }

components/news/Right.vue

@@ -38,14 +38,14 @@
       Page
     },
     computed: {
-      news () {
-        return this.$store.state.newsPage.allNews
+      new () {
+        return this.$store.state.newsData.newsPage.allNews
       },
       news_show () {
-        return this.news.data.content
+        return this.new.data.content
       },
       totalCount () {
-        return this.news.data.count
+        return this.new.data.count
       }
     },
     filters: {
@@ -128,6 +128,9 @@
     color: #323232;
     font-weight: normal;
   }
+  .news .new h5 a:hover {
+   color: #5078cb;
+  }
   .news-list >p{
     line-height: 25px;
   }

components/search/GoodList.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="main">
+    <div class="proofList">
+      <div class="main-proof">
+        <div class="content-f pro-title">
+          <div class="content-f img"><a href=""></a></div>
+          <div class="content-f">
+            <div style="margin:10px 0 5px 0">
+              <a href="" class="f16 text-bold text-num">123-91-422-41-001000</a>
+              <a href="" class="text-num f10" style="margin-left: 10px">Mill-Max</a>
+            </div>
+            <p class="f10"><span title="产品分类"><i class="fa fa-th-large f14 " aria-hidden="true"></i>&nbsp;&nbsp;<a href="">插座及导线座</a></span></p>
+            <p class="f10"><span class="title">包装方式：</span> <span class="content">无</span></p>
+          </div>
+        </div>
+        <div class="content-r pro-r">
+          <div>
+            库存：<span class="text-num f12">0</span> &nbsp;<span class="text-num f12">PCS</span>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12">
+          <div class="toMore"><a href="">查看更多&gt;&gt;&nbsp;&nbsp;</a></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+</script>
+<style scoped>
+  .main {
+    margin: 20px auto;
+    width: 100%;
+    padding: 3px 3px;
+  }
+  .main .proofList {
+    width: 100%;
+    height: auto;
+    border: 1px solid #d2d2d2;
+    border-top: 2px solid #5078cb;
+    margin: 15px 0 15px 0;
+    padding-bottom: 20px;
+  }
+  .proofList .main-proof {
+    padding: 20px 20px;
+  }
+  .proofList .pro-title {
+    width: 720px;
+    padding: 10px 10px 10px 20px;
+    height: 115px;
+  }
+  .main .content-f {
+    float: left;
+  }
+  .proofList .img {
+    width: 80px;
+    height: 80px;
+    margin-right: 15px;
+  }
+  .text-bold {
+    font-weight: 700;
+  }
+  .content {
+    margin: 10px 0 20px 0;
+  }
+  .proofList .pro-r {
+    padding: 15px 10px 0 0;
+  }
+  .main .content-r {
+    float: right;
+  }
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+  .proofList .toMore {
+    text-align: right;
+    font-size: 14px;
+  }
+  .f16 {
+    font-size: 16px;
+  }
+  .f14 {
+    font-size: 14px;
+  }
+  a:hover{
+    text-decoration: none;
+    color: #f39801;
+  }
+  .text-num{
+    font-style: normal;
+    font-family: verdana;
+  }
+  .f10{
+    font-size: 10px;
+  }
+</style>

components/search/Kind.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="selector">
+    <div class="sl-wrap">
+      <div class="sl-key f14">按类目筛选：</div>
+      <div class="sl-value">
+        <ul class="list-inline">
+          <li>
+            <a href="" class="f14">射频连接器</a>
+          </li>
+        </ul>
+      </div>
+      <div class="sl-clear"></div>
+      <div class="sl-ext">
+        <a >
+          <span >更多</span>
+          <i class="fa fa-angle-down ng-scope"></i>
+        </a>
+      </div>
+    </div>
+    <div class="sl-wrap">
+      <div class="sl-key f14">按品牌筛选：</div>
+      <div class="sl-value">
+        <ul class="list-inline">
+          <li>
+            <a href="" class="f14">泰科电子</a>
+          </li>
+        </ul>
+      </div>
+      <div class="sl-clear"></div>
+      <div class="sl-ext">
+        <a >
+          <span >更多</span>
+          <i class="fa fa-angle-down ng-scope"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+
+</template>
+<style scoped>
+  #searchResult .selector .sl-wrap {
+    position: relative;
+    padding: 5px 5px;
+    font-size: 12px;
+    line-height: 30px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  #searchResult .selector .sl-wrap .sl-key {
+    float: left;
+    width: 100px;
+  }
+  .f14 {
+    font-size: 14px;
+  }
+  #searchResult .selector .sl-wrap .sl-value {
+    margin-left: 110px;
+    margin-right: 50px;
+  }
+  #searchResult .selector .sl-wrap .sl-clear {
+    clear: both;
+  }
+  #searchResult .selector .sl-wrap .sl-ext {
+    width: 40px;
+    top: 5px;
+    position: absolute;
+    right: 0;
+  }
+  #searchResult .selector .sl-wrap .sl-value ul {
+    height: 60px;
+    overflow: hidden;
+    margin-bottom: 0;
+  }
+  .list-inline {
+    padding-left: 0;
+    margin-left: -5px;
+    list-style: none;
+  }
+  .list-inline a:hover{
+    text-decoration: none;
+    color: #f50;
+  }
+  .sl-ext a{
+    color: black;
+  }
+  .sl-ext a:hover{
+    color: #5078cb;
+    text-decoration: none;
+  }
+</style>
+

components/search/ResultTitle.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="result-title text-muted">
+    搜索"<span class="text-inverse ng-binding">123</span>"，为您找到
+    <span class="text-num ng-binding" >1,472</span><!-- ngIf: !total --> 个相关产品：
+  </div>
+</template>
+<script>
+  export default{
+  }
+</script>
+<style scoped>
+  #searchResult .result-title {
+    margin-top: 5px;
+    padding: 0 5px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    background: #efefef;
+    border: 1px solid #e5e5e5;
+  }
+  .text-inverse {
+    color: #f40!important;
+  }
+  .text-num {
+    font-style: normal;
+    font-family: verdana;
+  }
+</style>

components/search/index.js

@@ -0,0 +1,5 @@
+import GoodList from './GoodList.vue'
+import Kind from './Kind.vue'
+import ResultTitle from './ResultTitle.vue'
+
+export { GoodList, Kind, ResultTitle }

pages/news/_id.vue

@@ -13,8 +13,8 @@
     layout: 'main',
     fetch ({store, route}) {
       return Promise.all([
-        store.dispatch('loadHotNews'),
-        store.dispatch('loadDetailNews', {id: route.params.id})
+        store.dispatch('newsData/loadHotNews'),
+        store.dispatch('newsData/loadDetailNews', {id: route.params.id})
       ])
     },
     components: {

pages/news/index.vue

@@ -18,8 +18,8 @@
     },
     fetch ({ store }) {
       return Promise.all([
-        store.dispatch('loadAllNews', { page: this.nowPage, pageSize: this.pageSize }),
-        store.dispatch('loadHotNews')
+        store.dispatch('newsData/loadAllNews', { page: this.nowPage, pageSize: this.pageSize }),
+        store.dispatch('newsData/loadHotNews')
       ])
     },
     components: {
@@ -29,7 +29,7 @@
     methods: {
       listenChild: function (nPage) {
         this.nowPage = nPage
-        this.$store.dispatch('loadAllNews', { page: this.nowPage, pageSize: this.pageSize })
+        this.$store.dispatch('newsData/loadAllNews', { page: this.nowPage, pageSize: this.pageSize })
       }
     }
 

pages/search/_keyword.vue

@@ -0,0 +1,25 @@
+<template>
+<div class="container" id="searchResult">
+  <result-title></result-title>
+    <kind></kind>
+  <good-list></good-list>
+</div>
+</template>
+<script>
+  import { GoodList, Kind, ResultTitle } from '~components/search'
+  import 'bootstrap/dist/css/bootstrap.min.css'
+  export default{
+    layout: 'main',
+    data () {
+      return {
+        key: this.$route.params.keyword
+      }
+    },
+    components: {
+      ResultTitle,
+      Kind,
+      GoodList
+    }
+  }
+</script>
+

store/index.js

@@ -82,38 +82,6 @@ export const actions = {
         commit('news/GET_SNAPSHOT_FAILURE', err)
       })
   },
-  // 获取快讯页新闻
-  loadAllNews ({ commit }, params = {}) {
-    commit('newsPage/REQUEST_ALLNEWS')
-    return axios.get('/api/news/created', {params})
-      .then(response => {
-        commit('newsPage/GET_ALLNEWS_SUCCESS', response.data)
-      }, err => {
-        commit('newsPage/GET_ALLNEWS_FAILURE', err)
-      })
-  },
-  // 获取详细新闻
-  loadDetailNews ({ commit }, params = {}) {
-    console.log(params.id)
-    let id = params.id
-    commit('detailNews/REQUEST_DETAILNEWS', params)
-    return axios.get(`/api/news/${id}`)
-      .then(response => {
-        commit('detailNews/GET_DETAILNEWS_SUCCESS', response.data)
-      }, err => {
-        commit('detailNews/GET_DETAILNEWS_FAILURE', err)
-      })
-  },
-  // 获取热点新闻
-  loadHotNews ({ commit }, params = {}) {
-    commit('hotNews/REQUEST_HOTNEWS')
-    return axios.get('/api/news/viewCount', {params})
-      .then(response => {
-        commit('hotNews/GET_HOTNEWS_SUCCESS', response.data)
-      }, err => {
-        commit('hotNews/GET_HOTNEWS_FAILURE', err)
-      })
-  },
   // 获取器件统计信息
   loadProductCounts ({ commit }, params = {}) {
     commit('product/common/REQUEST_COUNTS')

store/newsData.js

@@ -0,0 +1,37 @@
+import axios from '~plugins/axios'
+
+export const actions = {
+// 获取快讯页新闻
+  loadAllNews ({ commit }, params = {}) {
+    commit('newsPage/REQUEST_ALLNEWS')
+    return axios.get('/api/news/created', {params})
+      .then(response => {
+        commit('newsPage/GET_ALLNEWS_SUCCESS', response.data)
+      }, err => {
+        commit('newsPage/GET_ALLNEWS_FAILURE', err)
+      })
+  },
+  // 获取详细新闻
+  loadDetailNews ({ commit }, params = {}) {
+    console.log(params.id)
+    let id = params.id
+    commit('detailNews/REQUEST_DETAILNEWS', params)
+    return axios.get(`/api/news/${id}`)
+      .then(response => {
+        commit('detailNews/GET_DETAILNEWS_SUCCESS', response.data)
+      }, err => {
+        commit('detailNews/GET_DETAILNEWS_FAILURE', err)
+      })
+  },
+  // 获取热点新闻
+  loadHotNews ({ commit }, params = {}) {
+    commit('hotNews/REQUEST_HOTNEWS')
+    return axios.get('/api/news/viewCount', {params})
+      .then(response => {
+        commit('hotNews/GET_HOTNEWS_SUCCESS', response.data)
+      }, err => {
+        commit('hotNews/GET_HOTNEWS_FAILURE', err)
+      })
+  }
+}
+

store/hotNews.js → store/newsData/hotNews.js

@@ -2,10 +2,6 @@ export const state = () => ({
   hotNews: {
     fetching: false,
     data: []
-  },
-  hotNewsDetail: {
-    fetching: false,
-    data: []
   }
 })
 

store/newsPage.js → store/newsData/newsPage.js

@@ -2,10 +2,6 @@ export const state = () => ({
   allNews: {
     fetching: false,
     data: []
-  },
-  allNewsDetail: {
-    fetching: false,
-    data: []
   }
 })
 

store/searchData.js

@@ -0,0 +1,15 @@
+import axios from '~plugins/axios'
+
+export const actions = {
+  // 获取kind
+  searchForKinds ({ commit }, params = {}) {
+    commit('searchData/searchKinds/REQUEST_KINDS', params)
+    return axios.get(`/search/component/brands`, {params})
+      .then(response => {
+        commit('searchData/searchKinds/GET_KINDS_SUCCESS', response.data)
+      }, err => {
+        commit('searchData/searchKinds/GET_KINDS_FAILURE', err)
+      })
+  }
+}
+

store/searchData/searchKinds.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  kinds: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_KINDS (state) {
+    state.kinds.fetching = true
+  },
+  GET_KINDS_FAILURE (state) {
+    state.kinds.fetching = false
+  },
+  GET_KINDS_SUCCESS (state, result) {
+    state.kinds.fetching = false
+    state.kinds.data = result
+  }
+}