验收修改1-16

app.html

@@ -6,7 +6,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css"/>
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css"/>
-  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_380hfz7t3zph9f6r.css">
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_tnqskb835gs98uxr.css">
   {{ HEAD }}
   <script>
     (function (w, d) {

assets/scss/mobileCommon.scss

@@ -57,6 +57,7 @@
       line-height: .98rem;
       font-size: .3rem;
       text-align: center;
+      border-top: .01rem solid #cdcecf;
     }
     .share-area {
       .share-item {

components/mobile/Home.vue

@@ -6,94 +6,106 @@
         <div class="mobile-modal-content">
           <div>商家地址：深圳市南山区英唐大厦6楼</div>
           <div class="content-line link-url">在线咨询</div>
-          <div>致电：<span class="content-line link-url">0755-96586323</span></div>
+          <div>致电：<a href="tel:0755-96586323" class="content-line link-url">0755-96586323</a></div>
           <div>邮件：<a href="mailto:yrsc@usoftchina.com" class="content-line link-url">yrsc@usoftchina.com</a></div>
         </div>
       </div>
     </div>
-    <div class="home-header" :style="'background:url(' + bgUrl + ')no-repeat center center/100% 6.14rem'">
-      <div class="home-search">
-        <!--<ul>-->
+    <div v-if="!showMainSearch">
+      <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>-->
-        <div class="home-input">
-          <input type="text" placeholder="请输入您要查找的型号、品牌或商家" v-model="keyword"
-                 @focus.stop.prevent="onFocus()" @blur="onBlur()"/>
-          <span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
+          <!--</ul>-->
+          <div class="home-input">
+            <input type="text" placeholder="请输入您要查找的型号、品牌或商家" v-model="keyword"
+                   @click="onHomeSearchClick()"/>
+            <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>
-        <!--<p style="color:#e45803;line-height:.4rem;margin-top:.1rem;width:4.2rem;margin-left:1rem;">搜品牌、搜现货 、搜好店 、搜规格书 就上优软商城</p>-->
+      </div>
+      <div class="home-main">
+        <nuxt-link to="/mobile/shop" class="home-main-content">
+          <div>
+            <img src="/images/mobile/@2x/home/shopbrand@2x.png">
+          </div>
+          <p>店铺列表</p>
+        </nuxt-link>
+        <nuxt-link to="/mobile/user" class="home-main-content">
+          <div>
+            <img src="/images/mobile/@2x/home/storebrand@2x.png">
+          </div>
+          <p>我的收藏</p>
+        </nuxt-link>
+        <a @click="showStoreInfo = true" class="home-main-content">
+          <div>
+            <img src="/images/mobile/@2x/home/phonebrand@2x.png">
+          </div>
+          <p>联系我们</p>
+        </a>
+        <a class="home-main-content">
+          <div>
+            <i class="icon-pinpai iconfont"></i>
+          </div>
+          <h2>
+            {{numbrand[0]}}
+          </h2>
+          <p>品牌</p>
+        </a>
+        <a class="home-main-content">
+          <div>
+            <i class="icon-xinghao iconfont"></i>
+          </div>
+          <h2>
+            {{numbrand[1]}}
+          </h2>
+          <p>型号</p>
+        </a>
+        <a class="home-main-content">
+          <div>
+            <i class="icon-biaoguigeshuomingshu iconfont"></i>
+          </div>
+          <h2>
+            {{numbrand[2]}}
+          </h2>
+          <p>规格书</p>
+        </a>
       </div>
     </div>
-    <div class="home-main" v-if="!associate">
-      <a class="home-main-content">
-        <div>
-          <img src="/images/mobile/@2x/home/brand@2x.png" alt="1">
-        </div>
-        <h2>
-          {{numbrand[0]}}
-        </h2>
-        <p>品牌</p>
-      </a>
-      <a class="home-main-content">
-        <div>
-          <img src="/images/mobile/@2x/home/modelbrand@2x.png" alt="1">
-        </div>
-        <h2>
-          {{numbrand[1]}}
-        </h2>
-        <p>型号</p>
-      </a>
-      <a class="home-main-content">
-        <div>
-          <img src="/images/mobile/@2x/home/bookbrand@2x.png">
-        </div>
-        <h2>
-         {{numbrand[2]}}
-        </h2>
-        <p>规格书</p>
-      </a>
-      <nuxt-link to="/mobile/shop" class="home-main-content">
-        <div>
-          <img src="/images/mobile/@2x/home/shopbrand@2x.png">
-        </div>
-        <p>店铺列表</p>
-      </nuxt-link>
-      <nuxt-link to="/mobile/user" class="home-main-content">
-        <div>
-          <img src="/images/mobile/@2x/home/storebrand@2x.png">
+    <div class="main-search" v-else>
+      <div class="main-search-header">
+        <input type="text" v-model="keyword" placeholder="请输入您要查找的型号或品牌" @keyup.13="onSearch()" autofocus>
+        <span @click="onSearch()">搜索</span>
+      </div>
+      <ul class="associate-list" v-show="associate.show">
+        <li @click="onAssociateClick(similar.code)" v-for="similar in similarKeywords.all">
+          <i class="icon-sousuo iconfont"></i>
+          <span>{{similar.code}}</span>
+        </li>
+        <li>查找“{{keyword}}”</li>
+      </ul>
+      <div class="hot-history" v-show="!associate.show">
+        <div class="search-history">
+          <p>历史搜索</p>
+          <ul>
+            <li v-for="item in searchHistory" @click="onSearch(item.keyword)">
+              <a>{{item.keyword}}</a>
+            </li>
+          </ul>
         </div>
-        <p>我的收藏</p>
-      </nuxt-link>
-      <a @click="showStoreInfo = true" class="home-main-content">
-        <div>
-          <img src="/images/mobile/@2x/home/phonebrand@2x.png">
+        <div class="search-hot">
+          <img src="/images/mobile/@2x/home/hot-search.png" alt="">
+          <ul>
+            <li v-for="hotword in hotwords">
+              <nuxt-link :to="hotword.url" v-text="hotword.name"></nuxt-link>
+            </li>
+          </ul>
         </div>
-        <p>联系我们</p>
-      </a>
+      </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>
 
@@ -104,11 +116,15 @@
       return {
         keyword: '',
         activeType: 'model',
-        associate: '',
+        showMainSearch: false,
         showStoreInfo: false,
         isMore: false,
         isShow: false,
-        len: 0
+        len: 0,
+        bgUrl: '/images/mobile/@2x/home/background@2x.png',
+        associate: {
+          show: false
+        }
       }
     },
     props: {
@@ -116,22 +132,37 @@
         type: Array,
         default () {
           return [
-            {name: 'SCT2080KEC', url: '/mobile/brand/componentDetail/1100400300009990'},
+            {name: 'DSP1-DC5V-F', url: '/mobile/brand/componentDetail/0900300200000669'},
             {name: 'Vishay', url: '/mobile/brand/30327265e42a871be050007f01003d96'},
             {name: 'Panasonic', url: '/mobile/brand/30327265e47d871be050007f01003d96'}
           ]
         }
       }
     },
+//    filters: {
+//      similarFilter: function (key) {
+//        let keyword = this.keyword
+//        let index = key.indexOf(keyword)
+//        if (index !== -1) {
+//          key = key.substring(0, index) + '<strong>' + key.sub(index, keyword.length) + '</strong>' + key.substring(index + keyword.length, key.length)
+//        }
+//        return key
+//      }
+//    },
     methods: {
-      onFocus () {
-        this.associate = true
+      onHomeSearchClick () {
+        this.showMainSearch = true
+        this.$store.dispatch('searchData/getSearchHistory')
       },
       onBlur () {
-        this.associate = false
+        this.showMainSearch = false
       },
-      onSearch () {
+      onSearch (key) {
+        if (key && key !== '') {
+          this.keyword = key
+        }
         if (this.keyword) {
+          this.associate.show = false
           this.$router.push({path: '/mobile/search?w=' + encodeURIComponent(this.keyword)})
         }
       },
@@ -167,11 +198,40 @@
       },
       loadCounts () {
         this.$store.dispatch('loadProductCounts', { _status: 'actived' })
+      },
+      onChange () {
+        if (!this.keyword) {
+          this.associate.show = false
+          this.$store.dispatch('resetSearchKeywords')
+        } else {
+          this.searchKeywords()
+        }
+        if (this.click_flag) {
+          this.associate.show = false
+        }
+      },
+      searchKeywords () {
+        this.associate.show = true
+        this.$store.dispatch('searchKeywords', { keyword: this.keyword })
+      },
+      onAssociateClick (word) {
+        this.keyword = word
+        this.onSearch()
       }
     },
     created () {
       this.$store.dispatch('resetSearchKeywords')
     },
+    watch: {
+      'keyword': {
+        handler (val, oldVal) {
+          let keywords = this.similarKeywords.data
+          if (!keywords || !keywords.length) {
+            this.onChange()
+          }
+        }
+      }
+    },
     computed: {
       numbrand () {
         return this.forNum(this.counts)
@@ -179,12 +239,12 @@
       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'
-        }
+      similarKeywords () {
+        return this.$store.state.search.keywords.data
+      },
+      searchHistory () {
+        console.log(this.$store.state.searchData)
+        return this.$store.state.searchData.searchHistory.searchHistory.data
       }
     }
   }
@@ -205,7 +265,7 @@
         line-height: .3rem;
         margin:0 auto;
         text-align: center;
-        padding-top:2rem;
+        padding-top: 1.74rem;
         ul{
           display:inline-flex;
         li{
@@ -264,7 +324,8 @@
       justify-content:space-between;
       flex-wrap:wrap;
       text-align: center;
-      padding-top:.22rem;
+      padding-top: .46rem;
+      height: 6.25rem;
     }
     .home-main a.home-main-content {
       width:33%;
@@ -280,6 +341,18 @@
       width: 100%;
       height:100%;
     }
+  .home-main .home-main-content div>i {
+    font-size: .8rem;
+  }
+  .home-main .home-main-content:nth-child(4) div>i {
+    color: #ff3064;
+  }
+  .home-main .home-main-content:nth-child(5) div>i {
+    color: #fa6743;
+  }
+  .home-main .home-main-content:nth-child(6) div>i {
+    color: #fcb836;
+  }
     .home-main .home-main-content p{
       font-size:.28rem;
       color:rgb(51,51,51);
@@ -292,81 +365,136 @@
       margin:0;
       margin-top:.1rem;
     }
-
-    /*  搜索记录  */
-    .home-search-list {
-      position:absolute;
-      top:6.5rem;
-      width:100%;
-      min-height: 4rem;
-      background: #fff;
-    }
-    .home-search-list div{
-      width:6.55rem;
-      margin:0 auto;
-      margin-top:.1rem;
-      padding-bottom:.2rem;
-    .search-list-top{
-    h5{
-      font-size:.3rem;
-      position:relative;
-      line-height: .4rem;
-      color:rgb(102,102,102);
-    i{
-      position:absolute;
-      right:.2rem;
-      top:.1rem;
-      color:#4f8afb;
-      font-size: .35rem;
-    }
-    }
-    .search-list-item{
-    a{
-      display:inline-block;
-      font-size:.28rem;
-      line-height: .45rem;
-      color:rgb(102,102,102);
-      background: #fff;
-      padding:0 .1rem;
-      width:2.18rem;
-      overflow:hidden;
-      text-overflow : ellipsis;
-    &:nth-child(2){
-       border-left:1px solid #a5a6a6;
-       border-right:1px solid #a5a6a6;
-       text-align: center;
-     }
-    &:nth-child(5){
-       border-left:1px solid #a5a6a6;
-       border-right:1px solid #a5a6a6;
-       text-align: center;
-     }
-    }
-    }
-    }
-    .search-list-bottom{
-      margin-top:-.07rem;
-    h5{
-      color:rgb(255,120,0);
-      font-size:.3rem;
-      text-align: center;
-    i{
-      margin-right:.15rem;
-    }
+  .main-search {
+    background: #fff;
+    .main-search-header {
+      height: .71rem;
+      background: #4391f7;
+      line-height: .66rem;
+      padding-left: .84rem;
+      input {
+        width: 4.78rem;
+        height: .54rem;
+        line-height: .54rem;
+        font-size: .23rem;
+        color: #999;
+        padding-left: .2rem;
+        border-bottom-left-radius: .05rem;
+        border-top-left-radius: .05rem;
+        border: .01rem solid #fff;
+        background: #fff;
+      }
+      span {
+        display: inline-block;
+        width: 1.02rem;
+        text-align: center;
+        height: .54rem;
+        line-height: .54rem;
+        color: #366df3;
+        font-size: .23rem;
+        margin-left: .02rem;
+        border-top-right-radius: .05rem;
+        border-bottom-right-radius: .05rem;
+        background: #fff;
+      }
     }
-    a{
-      display:inline-block;
-      font-size:.24rem;
-      color:rgb(255,120,0);
+    .associate-list {
+      padding-top: .25rem;
       background: #fff;
-      max-width:1.62rem;
-      line-height: .35rem;
-      padding:0 .1rem;
-      border:1px solid rgb(255,120,0);
-      overflow:hidden;
-      text-overflow : ellipsis;
-      margin-left:.12rem;
+      li {
+        height: 58px;
+        line-height: 58px;
+        padding: 0 45px;
+        border-bottom: .01rem solid #f1f0f0;
+        i {
+          font-size: .4rem;
+          margin-right: .24rem;
+          color: #ddd;
+        }
+        span {
+          color: #999;
+          font-size: .28rem;
+          line-height: 58px;
+          height: .58rem;
+          display: inline-block;
+        }
+        &:active, &:hover {
+          background: #eee;
+        }
+        &:last-child {
+          text-align: center;
+          font-size: .3rem;
+          color: #3976f4;
+          border-bottom: none;
+          &:active, &:hover {
+            background: #fff;
+          }
+        }
+      }
     }
+    .hot-history {
+      .search-history {
+        padding-left: .51rem;
+        padding-top: .38rem;
+        >p {
+          font-size: .3rem;
+          color: #333;
+        }
+        ul {
+          text-align: left;
+          margin-top: .26rem;
+          li {
+            display: inline-block;
+            max-width: 2.83rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 10px;
+            background: #f2f6ff;
+            height: .56rem;
+            line-height: .56rem;
+            padding: 0 .12rem;
+            a {
+              font-size: .3rem;
+              color: #666;
+            }
+          }
+        }
+      }
+      .search-hot {
+        text-align: center;
+        margin-top: .3rem;
+        >img {
+          width: 2.56rem;
+          height: .67rem;
+        }
+        ul {
+          text-align: left;
+          padding-left: .51rem;
+          margin-top: .31rem;
+          li {
+            display: inline-block;
+            max-width: 2.83rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 10px;
+            background: #fef1eb;
+            height: .56rem;
+            line-height: .56rem;
+            padding: 0 .12rem;
+            a {
+              font-size: .3rem;
+              color: #666;
+            }
+            &:nth-child(1) {
+              a {
+                color: #fc5708;
+              }
+            }
+          }
+        }
+      }
     }
   }
 </style>

components/mobile/MobileFooter.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="mobile-footer">
-    <span :class="activeType=='home'?'active':''" @click="activeType='home'">
+    <span :class="activeType=='home'?'active':''">
       <nuxt-link to="/">
         <i :class="activeType=='home'?'iconfont icon-shouye':'iconfont icon-shouye1'"></i><p>首页</p>
       </nuxt-link>
     </span>
-    <span :class="activeType=='shops'?'active':''" @click="activeType='shops'">
+    <span :class="activeType=='shops'?'active':''">
       <nuxt-link to="/mobile/shop">
         <i :class="activeType=='shops'?'iconfont icon-dianpu':'iconfont icon-dianpu1'"></i><p>店铺</p>
       </nuxt-link>
     </span>
-    <span :class="activeType=='user'?'active':''" @click="activeType='user'">
+    <span :class="activeType=='user'?'active':''">
       <nuxt-link to="/mobile/user">
         <i :class="activeType=='user'?'iconfont icon-icon':'iconfont icon-wo'"></i><p>我</p>
       </nuxt-link>
@@ -20,9 +20,9 @@
 <script>
   export default{
     name: 'MobileFooter',
-    data () {
-      return {
-        activeType: ''
+    computed: {
+      activeType () {
+        return this.$route.path === '/' ? 'home' : this.$route.path === '/mobile/shop' ? 'shops' : this.$route.path === '/mobile/user' ? 'user' : ''
       }
     }
   }

components/mobile/MobileHeader.vue

@@ -19,10 +19,10 @@
       <div class="mobile-share-box" v-if="showShare">
         <div class="share-area">
           <ul>
-            <!--<li class="share-item" @click="shareWeChat">-->
-             <!--<i class="icon-weixin iconfont" style="color: #07af12;"></i>-->
-              <!--<span>微信</span>-->
-            <!--</li>-->
+            <li class="share-item" @click="shareWeChat">
+             <i class="icon-weixin iconfont" style="color: #07af12;"></i>
+              <span>微信</span>
+            </li>
             <li class="share-item" @click="shareQQ">
               <i class="icon-qq1 iconfont" style="color: #5872f4;"></i>
               <span>QQ</span>
@@ -111,7 +111,9 @@
       },
       initHeader: function (val) {
         let title = '优软商城'
-        if (val.startsWith('/mobile/brand/')) {
+        if (val.startsWith('/mobile/brand/componentDetail/')) {
+          title = this.component.code
+        } else if (val.startsWith('/mobile/brand/')) {
           if (this.brandDetail.nameCn) {
             if (this.brandDetail.nameCn !== this.brandDetail.nameEn) {
               title = this.brandDetail.nameEn + '(' + this.brandDetail.nameCn + ')'

components/mobile/brand/BrandDetail.vue

@@ -28,14 +28,14 @@
       <div class="brand-param-item" v-if="brandDetail.url">
         <span class="remind-tag">| </span>
         <span>官网地址</span>
-        <a class="brand-url" v-text="brandDetail.url"></a>
+        <a class="brand-url" :href="brandDetail.url" v-text="brandDetail.url"></a>
       </div>
     </div>
     <div class="brand-product-list" v-if="activeType=='product'">
       <div class="search-box">
         <div class="kind-selecter">
           <div @mouseenter="isInList = true" @mouseleave="isInList = false">
-            <span @click="showKindList = !showKindList" v-text="selectedKind"></span>
+            <span @click="showKindList = !showKindList" v-text="selectedKind.substring(0, 4)"></span>
             <ul v-show="showKindList">
               <li @click="selectKind({nameCn: '全部分类', id: ''})">全部分类</li>
               <li v-for="kind in kindList" v-text="kind.nameCn" @click="selectKind(kind)"></li>
@@ -330,6 +330,9 @@
           white-space: nowrap;
           color: #01a44e;
           margin-left: .28rem;
+          &:hover, &:active, &:focus, &:visited {
+            text-decoration: underline;
+          }
         }
       }
     }

components/mobile/brand/ComponentDetail.vue

@@ -78,7 +78,7 @@
       <div v-if="!storeList.content || storeList.content.length == 0" class="no-store">
         <img src="/images/mobile/@2x/car@2x.png" alt="">
         <div>抱歉，暂无商家出售此型号！</div>
-        <div>您可前往<a href="http://www.usoftmall.com" class="link-url">www.usoftmall.com</a>网页版进行“发布求购”或“产品上架”操作！</div>
+        <div>您可前往www.usoftmall.com网页版进行“发布求购”或“产品上架”操作！</div>
       </div>
     </div>
   </div>
@@ -307,6 +307,7 @@
           display: inline-block;
           width: 2.69rem;
           float: right;
+          text-align: right;
         }
       }
     }

store/searchData.js

@@ -106,6 +106,16 @@ export const actions = {
       }, err => {
         commit('searchCrname/GET_CRNAME_FAILURE', err)
       })
+  },
+  // 获取搜索币种
+  getSearchHistory ({ commit }, params = {}) {
+    commit('searchHistory/REQUEST_SEARCH_HISTORY', params)
+    return axios.get(`/search/searchHistory`, {params})
+      .then(response => {
+        commit('searchHistory/GET_SEARCH_HISTORY_SUCCESS', response.data)
+      }, err => {
+        commit('searchHistory/GET_SEARCH_HISTORY_FAILURE', err)
+      })
   }
 }
 

store/searchData/searchHistory.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  searchHistory: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_SEARCH_HISTORY (state) {
+    state.searchHistory.fetching = true
+  },
+  GET_SEARCH_HISTORY_FAILURE (state) {
+    state.searchHistory.fetching = false
+  },
+  GET_SEARCH_HISTORY_SUCCESS (state, result) {
+    state.searchHistory.fetching = false
+    state.searchHistory.data = result
+  }
+}