增加搜索功能页面的主营产品和品牌墙切换

components/mobile/Home.vue

@@ -10,21 +10,22 @@
         </div>
       </div>
     </div>
-    <div class="home-header">
+    <div class="home-header" :style="'background:url(' + bgUrl + ')no-repeat center center/100% 6.14rem'">
       <div class="home-search">
-        <ul>
-          <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>
+        <!--<ul>-->
+          <!--<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="请输入您要查找的型号、品牌或商家" v-model="keyword"
                  @focus.stop.prevent="onFocus()"/>
           <span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
         </div>
+        <!--<p style="color:#e45803;line-height:.4rem;margin-top:.1rem;width:4.2rem;margin-left:1rem;">搜品牌、搜现货 、搜好店 、搜规格书 就上优软商城</p>-->
       </div>
     </div>
-    <div class="home-main">
+    <div class="home-main" v-if="!associate">
       <a class="home-main-content">
         <div>
           <img src="/images/mobile/@2x/home/brand@2x.png" alt="1">
@@ -71,27 +72,27 @@
         <p>联系我们</p>
       </a>
     </div>
-    <div class="home-search-list" v-if="associate && keyword">
-      <div>
-        <div class="search-list-top">
-          <h5>历史搜索：<i class="iconfont icon-delete"></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="iconfont icon-remensousuo"></i>热搜器件</h5>
-          <span v-for="item in hotwords">
-          <nuxt-link :to="item.url" >{{item.name}}</nuxt-link>
-        </span>
-        </div>
-      </div>
-    </div>
+    <!--<div class="home-search-list" v-if="associate && keyword">-->
+      <!--<div>-->
+        <!--<div class="search-list-top">-->
+          <!--<h5>历史搜索：<i class="iconfont icon-delete"></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="iconfont icon-remensousuo"></i>热搜器件</h5>-->
+          <!--<span v-for="item in hotwords">-->
+          <!--<nuxt-link :to="item.url" >{{item.name}}</nuxt-link>-->
+        <!--</span>-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -188,6 +189,13 @@
       },
       counts () {
         return this.$store.state.product.common.counts.data
+      },
+      bgUrl () {
+        if (!this.associate) {
+          return '/images/mobile/@2x/home/background@2x.png'
+        } else {
+          return '/images/mobile/@2x/home/background_search@2x.png'
+        }
       }
     }
   }
@@ -203,13 +211,12 @@
     .home-header{
       width:100%;
       height:6.12rem;
-      background:url('/images/mobile/@2x/home/background@2x.png')no-repeat;
-      background-size: 100% 6.14rem;
       padding-bottom:1rem;
       .home-search{
         width:6rem;
         line-height: .3rem;
         margin:0 auto;
+        text-align: center;
         padding-top:2rem;
         ul{
           display:inline-flex;

pages/mobile/search/_keycode.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="search-list">
     <div class="search-item">
-      <span :class="activeType=='store'?'active':''" @click="activeType='store'">仅看有货</span>
-      <span :class="activeType=='support'?'active':''" @click="activeType='support'">店铺自营</span>
+      <span :class="activeType=='store'?'active':''" @click="clickType('store')">仅看有货</span>
+      <span :class="activeType=='support'?'active':''" @click="clickType('support')">店铺自营</span>
     </div>
-    <div class="brand-list-content">
+
+    <div class="brand-list-content" v-if="!productList.brands && productList.components[0].brands">
       <div class="brand-list-top">
         <span>品牌墙</span>
         <span @click="onclick()">展开<i class="iconfont icon-arrow-down"></i></span>
@@ -17,7 +18,8 @@
         </div>
       </div>
     </div>
-    <div class="detail-brand-content" >
+
+    <div class="detail-brand-content" v-if="productList.brands">
       <h4>主营产品</h4>
       <div class="brand-list">
         <div class="list-left">
@@ -27,6 +29,7 @@
         <p>{{brandDetail.series}}</p>
       </div>
     </div>
+
     <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
       <nuxt-link :to="'/mobile/brand/componentDetail/'+ item.uuid">
         <div class="brand-item">
@@ -37,6 +40,10 @@
         </div>
       </nuxt-link>
     </div>
+
+    <div class="none-state" v-if="!productList.components[0].brands">
+      <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
+    </div>
   </div>
 </template>
 
@@ -74,6 +81,15 @@
     methods: {
       onclick () {
         this.isShow = !this.isShow
+      },
+      clickType (type) {
+        if (type === 'store') {
+          this.activeType = 'store'
+        }
+        if (type === 'support') {
+          this.activeType = 'support'
+          this.$store.dispatch('searchData/searchForList', {count: 15, filter: {'goods_store_type': ['ORIGINAL_FACTORY', 'AGENCY', 'DISTRIBUTION']}, keyword: this.$route.query.w, page: 1, sorting: {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}})
+        }
       }
     }
   }
@@ -81,20 +97,30 @@
 
 <style scoped lang="scss">
   .search-list{
-    width:100%;
-    margin-bottom: .98rem;
-    margin-top: .88rem;
-    .search-item{
-      justify-content: space-around;
-      text-align: center;
-      display:flex;
-      span{
-        display:inline-block;
-        width:1.41rem;
-        line-height: .76rem;
-        font-size:.32rem;
-        color:#666;
+      width:100%;
+      margin-bottom: .98rem;
+      margin-top: .88rem;
+      .none-state{
+        text-align: center;
+        margin-top:2rem;
+        width:100%;
+        img{
+          margin:0 auto;
+          width:3rem;
+          hight:3rem;
+        }
       }
+      .search-item{
+        justify-content: space-around;
+        text-align: center;
+        display:flex;
+        span{
+          display:inline-block;
+          width:1.41rem;
+          line-height: .76rem;
+          font-size:.32rem;
+          color:#666;
+        }
       span.active{
         color:#3976f4;
         border-bottom:2px solid #3976f4;
@@ -196,12 +222,15 @@
         background: #fff;
         padding:.2rem;
         position:relative;
+        &:active{
+           background: #e1e1e1;
+         }
         p{
           font-size:.28rem;
           line-height:.4rem;
           color:#333;
           margin:0;
-        span{}
+          span{}
         }
         i{
           display:block;

pages/mobile/shop/index.vue

@@ -2,7 +2,7 @@
   <div class="shop">
     <div class="shop-top">
       <p><i class="iconfont icon-dianpu1"></i><span>{{list.totalElements}}</span>家店铺</p>
-      <span @click="onClick()">全部 <i class="iconfont icon-arrow-down"></i></span>
+      <span @click="onClick()">{{downName}} <i class="iconfont icon-arrow-down"></i></span>
       <ul class="supdown" v-if="down">
         <li @click="onDown('ORIGINAL_FACTORY')">原厂</li>
         <li @click="onDown('AGENCY')">代理</li>
@@ -36,7 +36,8 @@
         page: '',
         count: '',
         types: '',
-        down: false
+        down: false,
+        downName: '全部'
       }
     },
     fetch ({ store }) {
@@ -53,13 +54,13 @@
       isType (type) {
         let bgurl = ''
         if (type === 'ORIGINAL_FACTORY') {
-          bgurl = '/images/mobile/@2x/shop/daili@2x.png'
+          bgurl = '/images/mobile/@2x/shop/yuangchang@2x.png'
         }
         if (type === 'DISTRIBUTION') {
           bgurl = '/images/mobile/@2x/shop/jingxiao@2x.png'
         }
         if (type === 'AGENCY') {
-          bgurl = '/images/mobile/@2x/shop/yuangchang@2x.png'
+          bgurl = '/images/mobile/@2x/shop/daili@2x.png'
         }
         return bgurl
       },
@@ -68,6 +69,19 @@
       },
       onDown (type) {
         this.$store.dispatch('provider/findStoreList', { page: 1, count: 10, types: type })
+        this.down = !this.down
+        if (type === 'ORIGINAL_FACTORY') {
+          this.downName = '原厂'
+        }
+        if (type === 'DISTRIBUTION') {
+          this.downName = '经销'
+        }
+        if (type === 'AGENCY') {
+          this.downName = '代理'
+        }
+        if (type === 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY') {
+          this.downName = '全部'
+        }
       }
     }
   }
@@ -126,6 +140,9 @@
     background:#fff;
     margin-top:.12rem;
     padding-bottom:.28rem;
+     &:hover{
+        background: #e1e1e1;
+      }
     h3{
       font-size:.32rem;
       line-height: .8rem;
@@ -152,6 +169,7 @@
           display:inline-block;
           width:100%;
           height:100%;
+          border:.02rem solid #418bf6;
         }
       }
       .list-item-phone{

pages/mobile/user/_uuid.vue

@@ -2,16 +2,17 @@
   <div class="user-content">
     <div class="user-name">
       <img src="/images/component/default.png"/>
-      <p>{{userName}}uu用户名</p>
-      <span @click="onclick()">全部收藏 <i class="iconfont icon-arrow-down"></i></span>
+      <p>{{loadUserInfo.userName}}</p>
+      <span @click="onclick()">{{listName}}<i class="iconfont icon-arrow-down"></i></span>
       <ul class="supdown" v-if="down">
-        <li @click="onDown('ORIGINAL_FACTORY')">店铺关注</li>
-        <li @click="onDown('ORIGINAL_FACTORY')">器件收藏</li>
-        <li @click="onDown('ORIGINAL_FACTORY')">全部收藏</li>
+        <li @click="onDown('-1')">店铺关注</li>
+        <li @click="onDown('0')">器件收藏</li>
+        <li @click="onDown('1')">全部收藏</li>
       </ul>
     </div>
-    <div class="shop-list">
-      <h3>{{1213}}</h3>
+
+    <div class="shop-list" v-if="isShop">
+      <h3>{{}}</h3>
       <div class="list-item">
         <div class="item-img">
           <i></i>
@@ -25,6 +26,17 @@
         </div>
       </div>
     </div>
+
+    <div class="detail-brand" v-for="(item, index) in collectSave.content" v-if="isDevice">
+      <nuxt-link :to="'/mobile/brand/componentDetail/'+ item.componentinfo.uuid">
+        <div class="brand-item">
+          <p>型号：<span>{{item.componentinfo.code}}</span></p>
+          <p>品牌：<span>{{item.componentinfo.brand.nameCn}}</span></p>
+          <p>产品描述：<span>{{item.componentinfo.kind.nameCn}}</span></p>
+          <i class="iconfont icon-shoucang"></i>
+        </div>
+      </nuxt-link>
+    </div>
   </div>
 </template>
 
@@ -34,20 +46,53 @@
     data () {
       return {
         userName: '',
-        down: false
+        down: false,
+        count: '',
+        page: '',
+        type: '',
+        listName: '全部收藏',
+        isShop: true,
+        isDevice: true
       }
     },
-    fetch ({ store, storeName }) {
+    fetch ({ store }) {
       return Promise.all([
-        store.dispatch('shop/storeInfo', { storeName: storeName })
+        store.dispatch('product/saveStores', { count: 25, page: 1, type: 'component' }),
+        store.dispatch('loadUserInfo'),
+        store.dispatch('shop/StoreFocusList', { count: 5, page: 1 })
       ])
     },
     methods: {
       onclick () {
         this.down = !this.down
       },
-      onDown () {
-
+      onDown (type) {
+        if (type === '-1') {
+          this.listName = '店铺关注'
+          this.isShop = true
+          this.isDevice = false
+          this.down = false
+        }
+        if (type === '0') {
+          this.listName = '器件收藏'
+          this.isDevice = true
+          this.isShop = false
+          this.down = false
+        }
+        if (type === '1') {
+          this.listName = '全部收藏'
+          this.isDevice = true
+          this.isShop = true
+          this.down = false
+        }
+      }
+    },
+    computed: {
+      collectSave () {
+        return this.$store.state.product.common.collectList.data
+      },
+      loadUserInfo () {
+        return this.$store.state.option.user.data
       }
     }
   }
@@ -128,6 +173,7 @@
             background-size: .65rem .33rem;
           }
           img{
+            border:.02rem solid #418bf6;
             width:2.4rem;
             height:1.69rem;
           }
@@ -152,5 +198,40 @@
         }
       }
     }
+    .detail-brand{
+      background: #f8fcff;
+      width:100%;
+      min-height:1.5rem;
+      padding-top:.2rem;
+      .brand-item{
+        width:7rem;
+        margin:0 auto;
+        border-radius:.1rem;
+        background: #fff;
+        padding:.2rem;
+        position:relative;
+        &:active{
+           background: #e1e1e1;
+         }
+        p{
+          font-size:.28rem;
+          line-height:.4rem;
+          color:#333;
+          margin:0;
+          span{}
+        }
+        i{
+          display:block;
+          position:absolute;
+          top:.2rem;
+          right:.1rem;
+          font-size:.4rem;
+          color:#ff7800;
+        }
+      }
+      div.active{
+        background: #d4d;
+      }
+    }
   }
 </style>