我的收藏和店铺列表页面，加载后台数据

components/mobile/Home.vue

@@ -11,86 +11,119 @@
       </div>
       <div class="home-search">
         <ul>
-          <li class="active"><a href="#">型号</a></li>
-          <li><a href="#">品牌</a></li>
-          <li><a href="#">商家</a></li>
+          <li :class="activeType=='model'?'active':''" @click="activeType='model'"><span>型号</span></li>
+          <li :class="activeType=='brand'?'active':''" @click="activeType='brand'"><span>品牌</span></li>
+          <li :class="activeType=='shops'?'active':''" @click="activeType='shops'"><span>商家</span></li>
         </ul>
         <div class="home-input">
-          <input type="text" placeholder="请输入您要查找的型号或品牌">
-          <a href="#"><i class="fa fa-camera-retro"></i></a>
+          <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="keyword"
+                 @focus.stop.prevent="onFocus()"/>
+          <span @click="onSearch()"><i class="fa fa-camera-retro"></i></span>
         </div>
       </div>
     </div>
     <div class="home-main">
       <nuxt-link to="/mobile/brand" class="home-main-content">
         <div>
-          <img src="/images/qrcode/uas.png" alt="1">
+          <img src="/imgs/home/brand@2x.png" alt="1">
         </div>
         <h2>4036万</h2>
         <p>品牌</p>
       </nuxt-link>
       <nuxt-link to="/mobile/brand" class="home-main-content">
         <div>
-          <img src="/images/qrcode/uas.png" alt="1">
+          <img src="/imgs/home/modelbrand@2x.png" alt="1">
         </div>
         <h2>3250万</h2>
         <p>型号</p>
       </nuxt-link>
       <nuxt-link to="/brand" class="home-main-content">
         <div>
-          <img src="/images/qrcode/uas.png" alt="1">
+          <img src="/imgs/home/bookbrand@2x.png" alt="1">
         </div>
         <h2>926万</h2>
         <p>规格书</p>
       </nuxt-link>
       <nuxt-link to="/mobile/shop" class="home-main-content">
         <div>
-          <img src="/images/qrcode/uas.png" alt="1">
+          <img src="/imgs/home/shopbrand@2x.png" alt="1">
         </div>
         <p>店铺列表</p>
       </nuxt-link>
       <nuxt-link to="/mobile/user" class="home-main-content">
         <div>
-          <img src="/images/qrcode/uas.png" alt="1">
+          <img src="/imgs/home/storebrand@2x.png" alt="1">
         </div>
         <p>我的收藏</p>
       </nuxt-link>
       <nuxt-link to="/brand" class="home-main-content">
         <div>
-          <img src="/images/qrcode/uas.png" alt="1">
+          <img src="/imgs/home/phonebrand@2x.png" alt="1">
         </div>
         <p>联系我们</p>
       </nuxt-link>
     </div>
-    <div class="home-search-list">
-      <div class="search-list-top">
-        <h5>历史搜索：<i class="fa fa-camera-retro"></i></h5>
-        <div class="search-list-item">
-          <a href="#">smk212121288</a>
-          <a href="#">CPU</a>
-          <a href="#">CPU</a>
-          <a href="#">CPU</a>
-          <a href="#">CPU</a>
-          <a href="#">CPU</a>
+    <div class="home-search-list" v-if="associate && keyword">
+      <div>
+        <div class="search-list-top">
+          <h5>历史搜索：<i class="fa fa-camera-retro"></i></h5>
+          <div class="search-list-item">
+            <a href="#">smk212121288</a>
+            <a href="#">CPU</a>
+            <a href="#">CPU</a>
+            <a href="#">CPU</a>
+            <a href="#">CPU</a>
+            <a href="#">CPU</a>
+          </div>
+        </div>
+        <div class="search-list-bottom">
+          <h5><i class="fa fa-camera-retro"></i>热搜器件</h5>
+          <span v-for="item in hotwords">
+          <nuxt-link to="item.url" >{{item.name}}</nuxt-link>
+        </span>
         </div>
-      </div>
-      <div class="search-list-bottom">
-        <h5><i class="fa fa-camera-retro"></i>热搜器件</h5>
-        <a href="#">smk212121288</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
+export default {
+  name: 'home',
+  data () {
+    return {
+      keyword: '',
+      activeType: 'model',
+      associate: ''
+    }
+  },
+  props: {
+    hotwords: {
+      type: Array,
+      default () {
+        return [
+          {name: 'SCT2080KEC', url: '/product/component/1100400300009990'},
+          {name: '电池组', url: '/product/kind/346'},
+          {name: 'Vishay', url: '/product/brand/30327265e42a871be050007f01003d96'},
+          {name: 'Panasonic', url: '/product/brand/30327265e47d871be050007f01003d96'}
+        ]
+      }
+    }
+  },
+  methods: {
+    onFocus () {
+      this.associate = true
+    },
+    onSearch () {
+      if (this.keyword) {
+        this.$router.push({path: '/mobile/search?w=' + encodeURIComponent(this.keyword)})
+      }
+    }
+  },
+  created () {
+    this.$store.dispatch('resetSearchKeywords')
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -120,37 +153,39 @@
       li{
         flex:1;
         text-align:center;
-      a{
+      span{
         display:inline-block;
         width:.72rem;
         line-height:.32rem;
+        height:.32rem;
         background: #fff;
         color:#000;
         border-radius: .05rem .05rem 0 0 ;
       }
-    }
-    li.active{
-      a{
-        background: #3c7cf5;
-        color:#fff;
-        cursor:pointer;
       }
-    }
+      li.active{
+        span{
+          background: #3c7cf5;
+          color:#fff;
+          cursor:pointer;
+        }
+      }
     }
     input{
       width:6rem;
-      padding: 0 1.2rem 0 .2rem;
+      padding: 0 1.2rem 0 .16rem;
       margin-right:-1rem;
-      font-size:.23rem;
+      font-size:.24rem;
       line-height: .61rem;
       border:.02rem solid #3c7cf5;
       border-radius:.05rem;
     }
-    a{
+    span{
       display:inline-block;
       text-align: center;
       width:1rem;
-      line-height: .61rem;
+      height:.63rem;
+      line-height: .63rem;
       font-size:.23rem;
       border-left:none;
       border-radius:   0 .05rem .05rem 0;
@@ -220,14 +255,20 @@
   margin:0;
   margin-top:.1rem;
 }
-.home-search-list{
-  /*display:none;*/
+
+/*  搜索记录  */
+.home-search-list {
+  position:absolute;
+  top:4.5rem;
+  width:100%;
+  min-height: 4rem;
+  background: #fff;
+}
+.home-search-list div{
   width:6.55rem;
   margin:0 auto;
   margin-top:.1rem;
-  .search-list-top{
-
-  }
+  padding-bottom:.2rem;
   .search-list-top{
     h5{
       font-size:.3rem;

components/mobile/MobileHeader.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mobile-header">
-  <nuxt-link class="fa fa-camera-retro fa-2x" to="/news">返回</nuxt-link>
+  <nuxt-link class="fa fa-camera-retro fa-2x" to="/">返回</nuxt-link>
   <p>优软商城</p>
   <nuxt-link class="fa fa-camera-retro fa-2x" to="/"></nuxt-link>
 </div>
@@ -13,6 +13,7 @@
   width:100%;
   position:fixed;
   top:0;
+  z-index:10000;
   height:44px;
   display:flex;
   justify-content:space-around;

components/mobile/common/intro.vue

@@ -1,21 +0,0 @@
-<template>
-<div class="intro">
-  <div class="intro-top">
-    <p><i></i><span>175</span>家店铺</p>
-  </div>
-  <shop-list></shop-list>
-</div>
-</template>
-
-<script>
-  import ShopList from '~components/mobile/common/shopList.vue'
-  export default {
-    components: {
-      ShopList
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>

components/mobile/common/shopList.vue

@@ -1,59 +0,0 @@
-<template>
-<div class="shop-list">
-    <h3>深圳华商龙商务互联科技有限公司</h3>
-    <div class="list-item">
-      <div class="item-img">
-        <i></i>
-        <img src="/images/component/default.png" alt="">
-      </div>
-      <div class="list-item-phone">
-        <p>电话：<span>0755-1234567</span></p>
-        <p>传真：<span>0755-1234567</span></p>
-        <p>商家介绍： <a href="#">点击查看</a></p>
-        <i></i>
-      </div>
-    </div>
-</div>
-</template>
-
-<script>
-    export default {}
-</script>
-
-<style scoped lang="scss">
-.shop-list{
-  background:#fff;
-  margin-top:.12rem;
-  padding-bottom:.28rem;
-  h3{
-    font-size:.32rem;
-    line-height: .8rem;
-    margin:0;
-    margin-left:.27rem;
-    margin-bottom:.14rem;
-  }
-  .list-item{
-    width:6.77rem;
-    margin-left:.39rem;
-    justify-content: space-around;
-    display:inline-flex;
-    .item-img{
-      width:2.42rem;
-      i{}
-      img{
-        width:2.4rem;
-        height:1.69rem;
-      }
-    }
-    .list-item-phone{
-      width:3.95rem;
-      padding-top:.18rem;
-      p{
-        font-size:.28rem;
-        line-height: .45rem;
-        margin:0;
-      }
-    }
-  }
-}
-</style>

components/mobile/search/goodList.vue

@@ -1,23 +1,33 @@
 <template>
-<div class="detail-brand">
-  <div class="brand-item">
-    <p>型号：<span>PSAHNSJLK-56289T</span></p>
-    <p>品牌：<span>松下</span></p>
-    <p>产品描述：<span>缓冲器、整券、芯片、缓冲器、整券、芯片缓冲器、整券、芯片缓冲器、</span></p>
-    <i></i>
+<div class="detail-brand" >
+  <div v-for="(item, index) in productList.components" v-if="productList.components">
+    <div class="brand-item">
+      <p>型号：<span>{{item.code}}</span></p>
+      <p>品牌：<span>{{item.brand.nameCn}}</span></p>
+      <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
+      <i></i>
+    </div>
   </div>
+
 </div>
 </template>
 
 <script>
-    export default {}
+    export default {
+      name: 'MobileGoodList',
+      computed: {
+        productList () {
+          return this.$store.state.searchData.searchList.lists.data
+        }
+      }
+    }
 </script>
 
 <style scoped lang="scss">
-  .detail-brand{
+  .detail-brand div{
     background: #f8fcff;
     width:100%;
-    min-height:2.5rem;
+    min-height:1.5rem;
     padding-top:.2rem;
     .brand-item{
       width:7rem;

pages/mobile/search/_keycode.vue

@@ -4,8 +4,8 @@
       <span :class="activeType=='store'?'active':''" @click="activeType='store'">仅看有货</span>
       <span :class="activeType=='support'?'active':''" @click="activeType='support'">店铺自营</span>
     </div>
-    <brand-list></brand-list>
-    <detail-brand></detail-brand>
+    <brand-list v-if="activeType=='support'"></brand-list>
+    <detail-brand v-if="activeType=='store'"></detail-brand>
     <good-list></good-list>
   </div>
 </template>
@@ -16,9 +16,18 @@
     layout: 'main',
     data () {
       return {
-        activeType: 'store'
+        activeType: 'store',
+        count: '',
+        filter: {},
+        page: '',
+        sorting: {}
       }
     },
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('searchData/searchForList', {count: 15, filter: {}, keyword: route.query.w, page: 1, sorting: {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}})
+      ])
+    },
     components: {
       BrandList,
       DetailBrand,

pages/mobile/shop/index.vue

@@ -1,21 +1,46 @@
 <template>
   <div class="shop">
     <div class="shop-top">
-      <p><i></i><span>175</span>家店铺</p>
+      <p><i></i><span>{{list.numberOfElements}}</span>家店铺</p>
       <a href="#">全部</a>
     </div>
-    <shop-list></shop-list>
-    <shop-list></shop-list>
-    <shop-list></shop-list>
+    <div class="shop-list" v-for="item in list.content">
+        <h3>{{item.storeName}}</h3>
+        <div class="list-item">
+          <div class="item-img">
+            <i></i>
+            <img :src="item.bannerUrl || '/images/component/default.png'" alt="">
+          </div>
+          <div class="list-item-phone">
+            <p>电话：<span>{{item.enterprise.enTel}}</span></p>
+            <p>传真：<span>{{item.enterprise.enFax}}</span></p>
+            <p>商家介绍： <a href="#">点击查看</a></p>
+            <i></i>
+          </div>
+        </div>
+    </div>
   </div>
 </template>
 
 <script>
-  import ShopList from '~components/mobile/common/shopList.vue'
   export default {
     layout: 'main',
-    components: {
-      ShopList
+    data () {
+      return {
+        page: '',
+        count: '',
+        types: ''
+      }
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('provider/findStoreList', { page: 1, count: 10, types: 'ORIGINAL_FACTORY' })
+      ])
+    },
+    computed: {
+      list () {
+        return this.$store.state.provider.stores.storeList.data
+      }
     }
   }
 </script>
@@ -46,6 +71,49 @@
         font-size:.28rem;
       }
     }
-  }
+  .shop-list {
+    background:#fff;
+    margin-top:.12rem;
+    padding-bottom:.28rem;
+    h3{
+      font-size:.32rem;
+      line-height: .8rem;
+      margin:0;
+      margin-left:.27rem;
+      margin-bottom:.14rem;
+    }
+    .list-item{
+      width:6.77rem;
+      margin-left:.39rem;
+      justify-content: space-around;
+      display:inline-flex;
+      .item-img{
+        position:relative;
+        width:2.42rem;
+        height:1.69rem;
+        i{
+          position:absolute;
+          top:0;
+          left:0;
+          background: url(/images/component/default.png);
+        }
+        img{
+          display:inline-block;
+          width:100%;
+          height:100%;
+        }
+      }
+      .list-item-phone{
+        width:3.95rem;
+        padding-top:.18rem;
+        p{
+          font-size:.28rem;
+          line-height: .45rem;
+          margin:0;
+        }
+      }
+    }
+   }
+}
 
 </style>

pages/mobile/user/index.vue

@@ -1,53 +0,0 @@
- <template>
-   <div class="user-content">
-     <div class="user-name">
-       <img src="/images/component/default.png"/>
-       <p>UU用户名</p>
-       <a href="#">全部收藏<i></i></a>
-     </div>
-     <shop-list></shop-list>
-     <shop-list></shop-list>
-     <shop-list></shop-list>
-   </div>
-</template>
-
-<script>
-  import ShopList from '~components/mobile/common/shopList.vue'
-  export default {
-    layout: 'main',
-    components: {
-      ShopList
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-.user-content{
-  margin-top:1rem;
-  min-height: 10rem;
-  background: #e2e4e6;
-  .user-name{
-    padding:.14rem .38rem .09rem .34rem;
-    background:#fff;
-    display:flex;
-    align-items: center;
-    width:100%;
-    img{
-      display: inline-block;
-      width:1.25rem;
-      height:1.25rem;
-      border:.04rem solid #c5dbfc;
-      border-radius: .05rem;
-    }
-    p{
-      font-size:.32rem;
-      margin:0;
-      margin-left:.25rem;
-      flex:1;
-    }
-    a{
-      font-size:.32rem;
-    }
-  }
-}
-</style>