搜索功能调整

assets/scss/mobileCommon.scss

@@ -18,6 +18,8 @@
       text-align: center;
       font-size: .32rem;
       position: relative;
+      border-top-left-radius: .1rem;
+      border-top-right-radius: .1rem;
       i {
         position: absolute;
         right: -.13rem;
@@ -29,6 +31,8 @@
       background: #fff;
       color: #333;
       padding: 0 .54rem;
+      border-bottom-left-radius: .1rem;
+      border-bottom-right-radius: .1rem;
       div {
         padding: .2rem 0;
         line-height: .4rem;
@@ -52,6 +56,8 @@
     z-index: 1000;
     background: #fff;
     color: #333;
+    border-top-right-radius: .1rem;
+    border-top-left-radius: .1rem;
     .cancel-share {
       height: .98rem;
       line-height: .98rem;

components/mobile/MobileFooter.vue

@@ -52,7 +52,7 @@
   }
 
   .mobile-footer span a i{
-    font-size:.3rem;
+    font-size:.45rem;
   }
   .mobile-footer span a p{
     font-size:.22rem;

components/mobile/MobileHeader.vue

@@ -60,8 +60,8 @@
       <span v-show="showSearch" @click="showMainSearch = true"><i class="icon-sousuo iconfont"></i>搜索</span>
     </div>
     <main-search v-if="showMainSearch"></main-search>
-    <i v-show="rightIcon=='share'" class="iconfont icon-fenxiang" @click="showShare = true"></i>
-    <i v-show="rightIcon=='phone'" class="iconfont icon-dianhua" @click="showLink"></i>
+    <i v-show="rightIcon=='share'" class="iconfont icon-fenxiang" @click="showShare = true" @touchmove="onTouchMove($event)"></i>
+    <i v-show="rightIcon=='phone'" class="iconfont icon-dianhua" @click="showLink" @touchmove="onTouchMove($event)"></i>
   </div>
 </template>
 <script>
@@ -205,6 +205,14 @@
         let _this = this
         _this.url = window.location.href
         _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
+        e.preventDefault()
+        e.target.style.left = x * 2 / 100.0 + 'rem'
+        e.target.style.top = y * 2 / 100.0 + 'rem'
       }
     }
   }

components/mobile/brand/BrandDetail.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="brand-detail" @click="checkShowFilter()">
     <div class="brand-logo">
-      <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
+      <div class="brand-logo-box">
+        <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
+      </div>
     </div>
     <div class="brand-switch-item">
       <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">品牌</span>
@@ -9,25 +11,25 @@
     </div>
     <div class="brand-param-list" v-if="activeType=='detail'">
       <div class="brand-param-item" v-if="brandDetail.series">
-        <span class="remind-tag">| </span>
-        <span>主营产品</span>
+        <p class="remind-title">主营产品</p>
+        <img class="remind-tag" src="/images/mobile/@2x/title-line.png" alt="">
         <div class="main-sell">{{brandDetail.series}}</div>
       </div>
       <div class="brand-param-item" v-if="applications.length>0">
-        <span class="remind-tag">| </span>
-        <span>应用领域</span>
+        <p class="remind-title">应用领域</p>
+        <img class="remind-tag" src="/images/mobile/@2x/title-line.png" alt="">
         <div class="main-sell">
           <span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
         </div>
       </div>
       <div class="brand-param-item" v-if="brandDetail.brief">
-        <span class="remind-tag">| </span>
-        <span>品牌介绍</span>
-        <div class="main-sell">{{brandDetail.brief}}</div>
+        <p class="remind-title">品牌介绍</p>
+        <img class="remind-tag" src="/images/mobile/@2x/title-line.png" alt="">
+        <div class="main-sell">{{brandDetail.brief | wordFilter}}</div>
       </div>
       <div class="brand-param-item" v-if="brandDetail.url">
-        <span class="remind-tag">| </span>
-        <span>官网地址</span>
+        <p class="remind-title">官网地址</p>
+        <img class="remind-tag" src="/images/mobile/@2x/title-line.png" alt="">
         <a class="brand-url" :href="brandDetail.url" v-text="brandDetail.url"></a>
       </div>
     </div>
@@ -76,6 +78,11 @@
         isInList: false
       }
     },
+    filters: {
+      wordFilter: function (str) {
+        return str.length > 65 ? str.substring(0, 65) + '...' : str
+      }
+    },
     computed: {
       brandDetail () {
         let list = this.$store.state.brandDetail.detail.data
@@ -214,108 +221,71 @@
     margin: 0 auto;
     margin-bottom: 1.2rem;
     text-align: center;
+    background: #f7f7f7;
     .brand-logo {
-      height: 2.21rem;
-      width: 3.73rem;
+      height: 3.17rem;
+      width: 6.96rem;
       display: inline-block;
-      border: .01rem solid #e75610;
-      margin: .38rem auto;
+      margin: .38rem auto .18rem;
       line-height: 2.13rem;
-      img {
-        max-height: 2.13rem;
-        max-width: 3.7rem;
+      background: #fff;
+      text-align: center;
+      border-radius: .1rem;
+      background: url('/images/mobile/@2x/brand-bg.png')no-repeat;
+      background-size: cover;
+      .brand-logo-box {
+        border: .01rem solid #c7e5fd;
+        border-radius: .1rem;
+        height: 2.21rem;
+        width: 3.73rem;
+        margin: .5rem auto 0;
+        background: #fff;
+        img {
+          max-height: 2.13rem;
+          max-width: 3.7rem;
+        }
       }
     }
     .brand-switch-item {
       text-align: center;
+      background: #fff;
       .mobile-switch-btn {
-        background: #e75610;
-        color: #fff;
+        background: #fff;
+        color: #666;
         display: inline-block;
-        height: .68rem;
-        font-size: .28rem;
-        padding: .19rem .53rem;
-        position: relative;
+        height: .64rem;
+        font-size: .34rem;
+        line-height: .64rem;
+        width: 1.4rem;
         &:first-child {
-          background: #fff;
-          color: #e75610;
-          border: .01rem solid #e75610;
-          border-left: none;
-          padding-left: .30rem;
-        }
-        &:first-child.active {
-          background: #e75610;
-          color: #fff;
-          border: .01rem solid #e75610;
-          padding-left: .30rem;
-        }
-        &:last-child {
-          background: #fff;
-          color: #e75610;
-          border: .01rem solid #e75610;
-          border-right: none;
-          padding-right: .35rem;
-        }
-        &:last-child.active {
-          background: #e75610;
-          color: #fff;
-          border: .01rem solid #e75610;
-          border-right: none;
-          padding-right: .35rem;
-        }
-        &:first-child:before {
-          content: '';
-          background: #fff;
-          border: .01rem solid #e75610;
-          width: .64rem;
-          height: .68rem;
-          border-radius: 100%;
-          position: absolute;
-          left: -.33rem;
-          top: -.01rem;
-          z-index: -5;
+          margin-right: 1.78rem;
         }
-        &:first-child.active:before {
-          background: #e75610;
-          border: .01rem solid #e75610;
-        }
-        &:last-child:before {
-          content: '';
-          background: #fff;
-          width: .64rem;
-          height: .68rem;
-          border-radius: 100%;
-          position: absolute;
-          border: .01rem solid #e75610;
-          left: 1.04rem;
-          z-index: -5;
-          top: -.01rem;
-        }
-        &:last-child.active:before {
-          background: #e75610;
-          border: .01rem solid #e75610;
+        &.active {
+          color: #fc5708;
+          border-bottom: .01rem solid #fc5708;
         }
       }
     }
     .brand-param-list {
       text-align: left;
-      padding: 0 .44rem;
+      padding: .11rem .44rem;
       margin-top: .28rem;
+      background: #fff;
       .brand-param-item {
         font-size: .28rem;
         margin-bottom: .48rem;
-
-
-
         .remind-tag {
-          color: rgb(4,198,96);
-          font-size: .24rem;
-          position: relative;
-          bottom: .03rem;
+          width: 1.18rem;
+          float: left;
+          margin-top: .05rem;
+        }
+        .remind-title {
+          font-size: .3rem;
+          color: #418bf6;
+          margin: 0;
         }
         .main-sell {
           color: #666;
-          margin-top: .19rem;
           line-height: .4rem;
           max-height: 1.2rem;
           overflow: hidden;
@@ -323,6 +293,7 @@
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
+          margin-top: .15rem;
         }
         .brand-url {
           overflow: hidden;
@@ -330,6 +301,8 @@
           white-space: nowrap;
           color: #01a44e;
           margin-left: .28rem;
+          position: relative;
+          bottom: .32rem;
           &:hover, &:active, &:focus, &:visited {
             text-decoration: underline;
           }

components/mobile/brand/ComponentDetail.vue

@@ -2,16 +2,15 @@
   <div class="component-detail">
     <div class="base-detail">
       <div class="base-detail-item" v-if="component.kind.nameCn">
-        <span>类目：</span>
+        <span>类&nbsp;&nbsp;&nbsp;&nbsp;目：</span>
         <span>{{component.kind.nameCn}}</span>
       </div>
       <div class="base-detail-item" v-if="component.brand.nameCn">
-        <span>品牌：</span>
+        <span>品&nbsp;&nbsp;&nbsp;&nbsp;牌：</span>
         <span>{{component.brand.nameCn}}</span>
       </div>
       <div class="base-detail-item attach" @click="goAttach(component.attach)">
-        <span>规格书：</span>
-        <i class="icon-chakan iconfont"></i>
+        <span>规格书：<img src="/images/mobile/@2x/productDetail/pdf.png" alt=""><span>查看</span></span>
       </div>
       <div class="base-detail-item" v-if="component.description">
         <span class="description">产品描述：{{component.description}}</span>
@@ -40,7 +39,7 @@
         </thead>
         <tbody>
           <tr v-for="store in storeList.content">
-            <td>{{store.storeName || '-'}}</td>
+            <td class="store-name">{{store.storeName || '-'}}</td>
             <td>
               <div v-if="!store.packaging && !store.breakUp && !store.produceDate">-</div>
               <div>{{store.packaging}}</div>
@@ -55,7 +54,7 @@
               <div v-if="!store.prices || store.prices.length == 0">
                 <span>—</span>
               </div>
-              <div v-for="price in store.prices">
+              <div v-for="price in store.prices" class="price-level">
                 <span v-if="store.currencyName.indexOf('RMB')!==-1">￥{{price.rMBPrice | currency}}</span>
                 <span v-if="store.currencyName.indexOf('USD')!==-1">${{price.uSDPrice | currency}}</span>
               </div>
@@ -67,7 +66,7 @@
                 <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">-</span>
                 <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">{{store.b2cMaxDelivery}}</span>
               </div>
-              <div v-if="store.minBuyQty">{{store.minBuyQty}}起订</div>
+              <div v-if="store.minBuyQty"><span class="order-tag">订</span>{{store.minBuyQty}}起订</div>
               <div v-if="!store.b2cMinDelivery">
                 <span>—</span>
               </div>
@@ -78,7 +77,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>您可前往www.usoftmall.com网页版进行“发布求购”或“产品上架”操作！</div>
+        <div>您可前往<strong>www.usoftmall.com</strong>网页版进行<strong>“发布求购”</strong>或<strong>“产品上架”</strong>操作！</div>
       </div>
     </div>
   </div>
@@ -169,20 +168,33 @@
   .component-detail {
     font-size: .28rem;
     margin-bottom: 1.2rem;
+    background: #f7f7f7;
+    padding-top: .4rem;
     .base-detail {
-      margin: 0 .66rem .34rem .40rem;
-      padding-top: .34rem;
+      margin: 0 .27rem .34rem .27rem;
+      padding: .18rem .36rem;
+      background: #fff;
+      border-radius: .1rem;
+      background: url('/images/mobile/@2x/productDetail/component-desc-bg.png')no-repeat;
+      height: 3.17rem;
       .base-detail-item {
-        margin-bottom: .3rem;
+        margin-bottom: .2rem;
         position: relative;
+        color: #fff;
+        &:nth-last-child(1) {
+          color: #999;
+        }
         &.attach {
           display: inline-block;
-        }
-        i {
-          font-size: .55rem;
-          color: #6fcafe;
-          position: absolute;
-          top: -.13rem;
+          img {
+            background-color: #fff;
+            width: .36rem;
+            height: .4rem;
+          }
+          >span >span {
+            margin-left: .1rem;
+            color: #418bf6;
+          }
         }
         &:last-child {
           margin-bottom: 0;
@@ -201,97 +213,34 @@
     }
     .product-switch-item {
       text-align: center;
+      background: #fff;
       .mobile-switch-btn {
-        background: #e75610;
-        color: #fff;
+        background: #fff;
+        color: #666;
         display: inline-block;
-        height: .68rem;
-        font-size: .28rem;
-        padding: .19rem .53rem;
-        position: relative;
+        height: .64rem;
+        line-height: .64rem;
+        font-size: .34rem;
+        width: 1.4rem;
         &:first-child {
-          background: #fff;
-          color: #e75610;
-          border: .01rem solid #e75610;
-          border-left: none;
-          padding-left: .30rem;
-        }
-        &:first-child.active {
-          background: #e75610;
-          color: #fff;
-          border: .01rem solid #e75610;
-          padding-left: .30rem;
-        }
-        &:last-child {
-          background: #fff;
-          color: #e75610;
-          border: .01rem solid #e75610;
-          border-right: none;
-          padding-right: .35rem;
-        }
-        &:last-child.active {
-          background: #e75610;
-          color: #fff;
-          border: .01rem solid #e75610;
-          border-right: none;
-          padding-right: .35rem;
-        }
-        &:first-child:before {
-          content: '';
-          background: #fff;
-          border: .01rem solid #e75610;
-          width: .64rem;
-          height: .68rem;
-          border-radius: 100%;
-          position: absolute;
-          left: -.33rem;
-          top: -.01rem;
-          z-index: -5;
-        }
-        &:first-child.active:before {
-          content: '';
-          background: #e75610;
-          border: .01rem solid #e75610;
-          width: .64rem;
-          height: .68rem;
-          border-radius: 100%;
-          position: absolute;
-          left: -.33rem;
-          top: -.01rem;
-        }
-        &:last-child:before {
-          content: '';
-          background: #fff;
-          width: .64rem;
-          height: .68rem;
-          border-radius: 100%;
-          position: absolute;
-          border: .01rem solid #e75610;
-          left: 1.04rem;
-          z-index: -5;
-          top: -.01rem;
+          margin-right: 1.78rem;
         }
-        &:last-child.active:before {
-          content: '';
-          background: #e75610;
-          width: .64rem;
-          height: .68rem;
-          border-radius: 100%;
-          position: absolute;
-          border: .01rem solid #e75610;
-          left: 1.04rem;
-          z-index: -5;
-          top: -.01rem;
+        &.active {
+          color: #fc5708;
+          border-bottom: .01rem solid #fc5708;
         }
       }
     }
     .product-params {
       line-height: .28rem;
-      margin-top: .19rem;
+      margin-top: .2rem;
       .param-item {
         padding: .19rem .4rem;
         &:nth-child(even) {
-          background: #efeeee;
+          background: #f9f9f9;
+        }
+        &:nth-child(odd) {
+          background: #fff;
         }
         .prop-name {
           width: 3.72rem;
@@ -312,16 +261,18 @@
       }
     }
     .product-store {
-      margin: .38rem .2rem;
+      margin: .2rem 0;
       table {
         width: 100%;
         font-size: .28rem;
         thead {
+          background: #d5e5fb;
           tr {
             th {
-              padding-bottom: .2rem;
               font-weight: bold;
               text-align: center;
+              height: .78rem;
+              line-height: .78rem;
             }
           }
         }
@@ -329,7 +280,10 @@
           tr {
             border-top: .01rem solid rgb(174,175,176);
             td {
-              padding-top: .2rem;
+              padding: .2rem .1rem;
+              &.store-name {
+                color: #418bf6;
+              }
               div {
                 padding-left: .4rem;
                 overflow: hidden;
@@ -340,19 +294,37 @@
                   margin-bottom: 0;
                 }
               }
+              .price-level:last-child {
+                color: #fc5708;
+              }
+              .order-tag {
+                display: inline-block;
+                font-size: .18rem;
+                color: #fff;
+                font-weight: bold;
+                background: #ee1717;
+                height: .27rem;
+                width: .27rem;
+                line-height: .27rem;
+                text-align: center;
+                border-radius: .05rem;
+                position: relative;
+                top: -.03rem;
+              }
             }
           }
         }
       }
       .no-store {
-        margin-top: .89rem;
+        background: #fff;
+        padding-top: 1rem;
         img {
           display: block;
           text-align: center;
           margin: 0 auto;
           margin-bottom: .45rem;
-          width: 1.97rem;
-          height: 1.8rem;
+          width: 3.31rem;
+          height: 2.13rem;
         }
         div {
           width: 5.27rem;

components/mobile/search/MainSearch.vue

@@ -124,6 +124,7 @@
     width: -webkit-fill-available;
     position: fixed;
     z-index: 9;
+    top: 0;
     .main-search-header {
       height: .71rem;
       background: #4391f7;

pages/mobile/merchantDescription/_uuid.vue

@@ -23,24 +23,34 @@
 </script>
 <style scoped>
   .merchant-description{
-    margin-bottom: .98rem;
     width:100%;
+    background: url('/images/mobile/@2x/shop/store-intro-bg.png')no-repeat;
+    background-size: cover;
+    height: -webkit-fill-available;
+    background-position: 0 -.86rem;
   }
   .merchant-description div{
     width:6.5rem;
     margin:0 auto;
     padding-top:.75rem;
+    color: #fff;
   }
   .merchant-description div h5{
     text-align: center;
-    font-size: .32rem;
+    font-size: .36rem;
     margin:0;
   }
   .merchant-description div p{
-
     font-size:.32rem;
-    line-height: .4rem;0
+    line-height: .4rem;
     margin:0;
-    margin-top: .46rem;
+    margin-top: .76rem;
+    color: #333;
+    padding: .35rem .25rem;
+    border-radius: .1rem;
+    background: url('/images/mobile/@2x/shop/store-intro-content-bg.png')no-repeat;
+    background-color: #fff;
+    background-size: cover;
+    min-height: 10rem;
   }
 </style>

pages/mobile/search/_keycode.vue

@@ -26,7 +26,7 @@
           <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
           <span>{{list.nameCn}}</span>
         </div>
-        <p>{{list.series}}</p>
+        <p>{{list.series | productDescFilter}}</p>
       </div>
     </div>
 
@@ -68,6 +68,11 @@
         store.dispatch('searchData/searchForBrands', {collectList: 'goods_brand', keyword: route.query.w, paramJSON: {}})
       ])
     },
+    filters: {
+      productDescFilter: function (str) {
+        return str.length > 50 ? str.substring(0, 50) + '...' : str
+      }
+    },
     computed: {
       productList () {
         return this.$store.state.searchData.searchList.lists.data
@@ -193,17 +198,29 @@
         }
       }
       .brand-list-item{
-        justify-content: space-between;
         flex-wrap: wrap;
         display:inline-flex;
         overflow: hidden;
         margin:0 .2rem;
-        img{
-          width:1.57rem;
-          height:.77rem;
-          margin-top:.2rem;
-          border-radius: .1rem;
-          border:.02rem solid #53a0f7;
+        >div {
+          display: inline-block;
+          margin-right: .14rem;
+          &:nth-child(4n) {
+            margin-right: 0;
+          }
+          a {
+            width: 1.57rem;
+            height: .77rem;
+            display: inline-block;
+            margin-top: .2rem;
+            border: .02rem solid #53a0f7;
+            border-radius: .1rem;
+            line-height: .77rem;
+            img{
+              max-width:1.07rem;
+              max-height:.57rem;
+            }
+          }
         }
       }
     }

pages/mobile/shop/index.vue

@@ -199,8 +199,8 @@
           display:block;
           position:absolute;
           top:.1rem;
-          right:.1rem;
-          font-size:.4rem;
+          right: 0;
+          font-size:.6rem;
           color:#ff7800;
         }
         i.active{

pages/mobile/user/index.vue

@@ -2,7 +2,10 @@
   <div class="user-content">
     <div class="user-name">
       <img src="/images/component/default.png"/>
-      <p>{{loadUserInfo.userName}}</p>
+      <div class="user-info">
+        <p>{{loadUserInfo.userName}}</p>
+        <p>{{enterprise.enName}}</p>
+      </div>
       <span @click="onclick()">{{listName}}<i class="iconfont icon-arrow-down"></i></span>
       <ul class="supdown" v-if="down">
         <li @click="onDown('-1')">店铺关注</li>
@@ -89,7 +92,6 @@
         }
       },
       cancelFocus: function (type, item) {
-        console.log(item)
         if (type === 'store') {
           this.$http.post('/trade/storeFocus/delete/storeId', [item.storeid])
             .then(response => {
@@ -123,6 +125,14 @@
       loadUserInfo () {
         return this.$store.state.option.user.data
       },
+      enterprise () {
+        let ens = this.loadUserInfo.enterprises
+        if (ens && ens.length) {
+          return ens.find(item => item.current) || {enName: this.user.data.userName + '（个人账户）'}
+        } else {
+          return {enName: this.user.data.userName + '（个人账户）'}
+        }
+      },
       focusPage () {
         return this.$store.state.shop.storeInfo.focusPage.data
       }
@@ -159,7 +169,7 @@
       }
     }
     .user-name{
-      padding:.14rem .38rem .09rem .34rem;
+      padding:.14rem 0rem .09rem .34rem;
       background:#fff;
       display:flex;
       align-items: center;
@@ -189,11 +199,23 @@
         border:.04rem solid #c5dbfc;
         border-radius: .05rem;
       }
-      p{
-        font-size:.32rem;
-        margin:0;
+      .user-info {
         margin-left:.25rem;
-        flex:1;
+        display: inline-block;
+        width: 3.92rem;
+        p{
+          font-size:.3rem;
+          margin:0;
+          font-weight: bold;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          &:nth-child(2) {
+            font-weight: normal;
+            margin-top: .3rem;
+          }
+        }
       }
       span{
         font-size:.28rem;