第一阶段修改。

assets/scss/mobileCommon.scss

@@ -22,8 +22,8 @@
       border-top-right-radius: .1rem;
       i {
         position: absolute;
-        right: -.13rem;
-        font-size: .4rem;
+        right: -.25rem;
+        font-size: .6rem;
         bottom: .46rem;
       }
     }

components/mobile/MobileHeader.vue

@@ -56,8 +56,9 @@
     </div>
     <div class="mobile-header" v-if="showHeader && !showMainSearch">
       <!--<a class="iconfont icon-fanhui" @click="goLastPage">返回</a>-->
-      <p>{{title}}</p>
-      <span v-show="showSearch" @click="showMainSearch = true"><i class="icon-sousuo iconfont"></i>搜索</span>
+      <p>{{title}}
+        <span v-show="showSearch" @click="showMainSearch = true"><i class="icon-sousuo iconfont"></i>搜索</span>
+      </p>
     </div>
     <main-search v-if="showMainSearch"></main-search>
     <i v-show="rightIcon=='share'" class="iconfont icon-fenxiang" @click="showShare = true" @touchmove="onTouchMove($event)"></i>
@@ -72,7 +73,7 @@
       return {
         showStoreInfo: false,
         showShare: false,
-        rightIcon: 'share',
+        rightIcon: 'phone',
         showDefaultAddr: true,
         url: '',
         clipboard: {},
@@ -207,9 +208,12 @@
         _this.clipboard = new Clipboard('#copyLink')
       },
       onTouchMove: function (e) {
-        console.log(e.touches[0])
-        let x = e.touches[0].clientX
-        let y = e.touches[0].clientY
+        let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+        let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+        let x = Math.min(width - 20, e.touches[0].clientX)
+        let y = Math.min(height - 20, e.touches[0].clientY)
+        x = Math.max(0, x)
+        y = Math.max(0, y)
         e.preventDefault()
         e.target.style.left = x * 2 / 100.0 + 'rem'
         e.target.style.top = y * 2 / 100.0 + 'rem'
@@ -225,6 +229,7 @@
   .mobile-header{
     width:100%;
     height:.88rem;
+    line-height: .88rem;
     display:flex;
     justify-content:space-around;
     align-items:center;
@@ -237,18 +242,18 @@
     flex:1;
     font-size:.36rem;
     text-align: center;
-    margin-top:.2rem;
+    margin: 0;
   }
   .mobile-header a{
     font-size:.28rem;
     color:#fff;
   }
-  .mobile-header span {
+  .mobile-header p span {
     position: absolute;
     right: .4rem;
     font-size: .24rem;
   }
-  .mobile-header span i {
+  .mobile-header p span i {
     font-size: .24rem;
   }
   .mobile-nav >i{

components/mobile/brand/BrandDetail.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
     <div class="brand-product-list" v-if="activeType=='product'">
-      <div class="search-box">
+      <div class="search-box" v-if="productList.content && productList.content.length > 0">
         <div class="kind-selecter">
           <div @mouseenter="isInList = true" @mouseleave="isInList = false">
             <span @click="showKindList = !showKindList" v-text="selectedKind.substring(0, 4)"></span>
@@ -55,6 +55,10 @@
           <a class="text-right" @click="toShowPdf(product.attach)">规格书 <i class="icon-chakan iconfont"></i></a>
         </li>
       </ul>
+      <div class="no-product" v-if="!productList.content || productList.content.length == 0">
+        <img src="/images/mobile/@2x/car@2x.png" alt="">
+        <div>抱歉，暂无产品信息</div>
+      </div>
     </div>
   </div>
 </template>
@@ -332,6 +336,10 @@
           .text-left {
             float: left;
             color: #333;
+            width: 4.45rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
           .text-right {
             float: right;
@@ -420,6 +428,26 @@
           }
         }
       }
+      .no-product {
+        background: #fff;
+        padding-top: 1rem;
+        img {
+          display: block;
+          text-align: center;
+          margin: 0 auto;
+          margin-bottom: .45rem;
+          width: 3.31rem;
+          height: 2.13rem;
+        }
+        div {
+          width: 5.27rem;
+          margin: 0 auto;
+          text-align: center;
+          line-height: .4rem;
+          font-size: .32rem;
+          color: #999;
+        }
+      }
     }
   }
 </style>

components/mobile/brand/ComponentDetail.vue

@@ -176,6 +176,7 @@
       background: #fff;
       border-radius: .1rem;
       background: url('/images/mobile/@2x/productDetail/component-desc-bg.png')no-repeat;
+      background-size: cover;
       height: 3.17rem;
       .base-detail-item {
         margin-bottom: .2rem;
@@ -331,6 +332,7 @@
           margin: 0 auto;
           text-align: center;
           line-height: .4rem;
+          color: #999;
           .link-url {
             color: #01a44e;
           }

components/mobile/common/RemindBox.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="com-remind-box" v-show="showBox">{{title}}</div>
+</template>
+<script>
+  export default {
+    props: ['title', 'timeoutCount'],
+    data () {
+      return {
+        showBox: false,
+        timer: ''
+      }
+    },
+    watch: {
+      timeoutCount: function (val, oldVal) {
+        if (val > 0) {
+          clearTimeout(this.timer)
+          this.setTimer()
+        } else {
+          this.showBox = false
+        }
+      }
+    },
+    methods: {
+      setTimer: function () {
+        let _this = this
+        _this.showBox = true
+        _this.timer = setTimeout(function () {
+          _this.showBox = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+<style>
+  .com-remind-box{
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-left: -1.07rem;
+    margin-top: -.6rem;
+    z-index: 100;
+    background: rgba(0,0,0,.6);
+    color: #fff;
+    font-size: .28rem;
+    padding: .44rem .51rem;
+    border-radius: .1rem;
+  }
+</style>

components/mobile/search/MainSearch.vue

@@ -128,8 +128,9 @@
     .main-search-header {
       height: .71rem;
       background: #4391f7;
-      line-height: .66rem;
       padding-left: .84rem;
+      display: flex;
+      align-items: center;
       input {
         width: 4.78rem;
         height: .54rem;

pages/mobile/search/_keycode.vue

@@ -43,10 +43,12 @@
       <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
       <a @click="goLastPage">返回上一页</a>
     </div>
+    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 
 <script>
+  import RemindBox from '~components/mobile/common/remindBox.vue'
   export default {
     layout: 'main',
     data () {
@@ -59,9 +61,14 @@
         isShow: true,
         isMove: '',
         isFocus: false,
-        isClickCollect: false
+        isClickCollect: false,
+        collectResult: '收藏成功',
+        timeoutCount: 0
       }
     },
+    components: {
+      RemindBox
+    },
     fetch ({store, route}) {
       return Promise.all([
         store.dispatch('searchData/searchForListInMobile', {count: 15, filter: {}, keyword: route.query.w, page: 1, sorting: {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}}),
@@ -114,10 +121,14 @@
           this.$http.post('/trade/collection/save', {componentid: item.cmpId, kind: 2})
             .then(response => {
               item.isFocus = true
+              this.collectResult = '收藏成功'
+              this.timeoutCount++
             })
         } else {
           this.$http.post('/trade/collection/delete/cmpId', [item.cmpId]).then(response => {
             item.isFocus = false
+            this.collectResult = '取消成功'
+            this.timeoutCount++
           })
         }
       },
@@ -298,7 +309,7 @@
           display:block;
           position:absolute;
           top:.1rem;
-          right:.1rem;
+          right:.34rem;
           font-size:.4rem;
           color:#ff7800;
         }

pages/mobile/shop/index.vue

@@ -25,10 +25,12 @@
         </div>
       </div>
     </div>
+    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 
 <script>
+  import RemindBox from '~components/mobile/common/remindBox.vue'
   export default {
     layout: 'main',
     data () {
@@ -38,9 +40,14 @@
         types: '',
         down: false,
         downName: '全部',
-        isFocus: true
+        isFocus: true,
+        collectResult: '收藏成功',
+        timeoutCount: 0
       }
     },
+    components: {
+      RemindBox
+    },
     fetch ({ store }) {
       return Promise.all([
         store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, types: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY' })
@@ -55,7 +62,7 @@
       isType (type) {
         let bgurl = ''
         if (type === 'ORIGINAL_FACTORY') {
-          bgurl = '/images/mobile/@2x/shop/yuangchang@2x.png'
+          bgurl = '/images/mobile/@2x/shop/yuanchang@2x.png'
         }
         if (type === 'DISTRIBUTION') {
           bgurl = '/images/mobile/@2x/shop/jingxiao@2x.png'
@@ -90,11 +97,15 @@
           this.$http.post('/trade/storeFocus/save', {storeName: item.storeName, storeid: item.id})
             .then(response => {
               item.isFocus = 'true'
+              this.collectResult = '收藏成功'
+              this.timeoutCount++
             })
         } else {
           this.$http.post('/trade/storeFocus/delete/storeId', [item.id])
             .then(response => {
               item.isFocus = 'false'
+              this.collectResult = '取消成功'
+              this.timeoutCount++
             })
         }
       }
@@ -128,8 +139,7 @@
         color:#ffffff;
         height: .32rem;
         line-height: .32rem;
-        margin: .2rem;
-        margin-right:.4rem;
+        margin: .4rem .3rem;
       }
     }
     p{
@@ -198,9 +208,9 @@
         i{
           display:block;
           position:absolute;
-          top:.1rem;
+          top: 0;
           right: 0;
-          font-size:.6rem;
+          font-size:.4rem;
           color:#ff7800;
         }
         i.active{

pages/mobile/user/index.vue

@@ -13,6 +13,9 @@
         <li @click="onDown('1')">全部收藏</li>
       </ul>
     </div>
+    <div class="collect-list-type" v-if="focusPage.content && focusPage.content.length > 0 && isShop">
+      <p>店铺</p>
+    </div>
     <div class="shop-list" v-if="isShop" v-for="item in focusPage.content">
       <h3>{{item.storeName}}</h3>
       <div class="list-item">
@@ -28,6 +31,9 @@
         </div>
       </div>
     </div>
+    <div class="collect-list-type" v-if="collectSave.content && collectSave.content.length > 0 && isDevice">
+      <p>器件</p>
+    </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">
@@ -183,13 +189,13 @@
         width:1.7rem;
         background:#616264;
         border-radius:.1rem;
-        padding-left:.18rem;
         li{
           font-size: .28rem;
           color:#ffffff;
           height: .32rem;
           line-height: .32rem;
-          margin: .2rem 0;
+          margin: .4rem 0;
+          text-align: center;
         }
       }
       img{
@@ -226,9 +232,6 @@
       background:#fff;
       margin-top:.12rem;
       padding-bottom:.28rem;
-      &:hover{
-         background: #e1e1e1;
-       }
       h3{
         font-size:.32rem;
         line-height: .8rem;
@@ -269,7 +272,7 @@
           i{
             display:block;
             position:absolute;
-            top:.1rem;
+            top: 0;
             right: -.1rem;
             font-size:.4rem;
             color:#ff7800;
@@ -278,7 +281,7 @@
       }
     }
     .detail-brand{
-      background: #f8fcff;
+      background: #fff;
       width:100%;
       margin-top:.12rem;
       min-height:1.5rem;
@@ -313,5 +316,18 @@
         background: #d4d;
       }
     }
+    .collect-list-type {
+      background: #fff;
+      margin-top: .1rem;
+      margin-bottom: -.11rem;
+      p {
+        font-size: .32rem;
+        margin: 0 0 0 .13rem;
+        width: .92rem;
+        text-align: center;
+        line-height: .5rem;
+        border-bottom: .06rem solid #418bf6;
+      }
+    }
   }
 </style>

store/searchData.js

@@ -5,11 +5,7 @@ function reloadListData ({ commit }, listData) {
     let focusData = response.data
     for (let i = 0; i < listData.components.length; i++) {
       for (let j = 0; j < focusData.length; j++) {
-        if (listData.components[i].cmpId === focusData[j].componentid) {
-          listData.components[i].isFocus = true
-        } else {
-          listData.components[i].isFocus = false
-        }
+        listData.components[i].isFocus = listData.components[i].cmpId === focusData[j].componentid
       }
     }
     commit('searchList/GET_LIST_SUCCESS', listData)