手机端店铺、器件详情页修改

components/mobile/brand/ComponentDetail.vue

@@ -30,23 +30,20 @@
     </div>
     <div class="product-store" v-if="activeType == 'store'">
       <table v-if="searchLists&&searchLists.length > 0">
-        <thead>
+        <thead id="product-head" :class="{'active': isScrollOverTab}">
           <tr>
-            <th>商家</th>
-            <th>生产日期</th>
-            <th>数量<span>(PCS)</span></th>
-            <th>单价</th>
-            <th>交期(天)</th>
+            <th style="width: 1.55rem;">商家</th>
+            <th style="width: 1.59rem;">生产日期</th>
+            <th style="width: 2.58rem;">价格梯度</th>
+            <th style="width: 1.77rem;">交期(天)</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="product-body">
           <tr v-for="store in searchLists">
             <td class="store-name">
-              <div>
-                <nuxt-link :to="'/mobile/shop/' + store.storeid">
-                  {{store.storeName || '-' | storeNameFilter}}
-                </nuxt-link>
-              </div>
+              <nuxt-link :to="'/mobile/shop/' + store.storeid">
+                {{store.storeName || '-' | storeNameFilter}}
+              </nuxt-link>
             </td>
             <td>
               <div v-if="!store.packaging && !store.breakUp && !store.produceDate">-</div>
@@ -54,15 +51,10 @@
               <div>{{store.packaging}}</div>
               <div>{{store.breakUp?'可拆卖':'不可拆卖'}}</div>
             </td>
-            <td>
+            <td class="price-level-wrap">
               <div v-if="!store.prices || store.prices.length == 0">-</div>
-              <div v-for="price in store.prices">{{price.start}}+</div>
-            </td>
-            <td>
-              <div v-if="!store.prices || store.prices.length == 0">
-                <span>—</span>
-              </div>
-              <div v-for="price in store.prices" class="price-level">
+              <div v-for="price in store.prices" class="price-number">{{price.start}}+</div>
+              <div v-for="price in store.prices" class="price-level price-number">
                 <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>
@@ -74,6 +66,7 @@
                 <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">{{store.b2cMaxDelivery}}</span>
               </div>
               <div v-if="store.minBuyQty"><span class="order-tag">订</span>{{store.minBuyQty}}起订</div>
+              <div v-if="store.reserve"><span class="order-tag reserve-tag">库</span>{{store.reserve}}</div>
               <div v-if="!store.b2cMinDelivery">
                 <span>—</span>
               </div>
@@ -117,7 +110,8 @@
         },
         isSearchingMore: false,
         searchLists: [],
-        showLoginBox: false
+        showLoginBox: false,
+        isScrollOverTab: false
       }
     },
     components: {
@@ -238,6 +232,9 @@
         if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.params.page < this.allPage) {
           this.getMoreStore()
         }
+        let tbodyObj = document.getElementById('product-body')
+        let theadObj = document.getElementById('product-head')
+        this.isScrollOverTab = tbodyObj.getBoundingClientRect().top <= theadObj.getBoundingClientRect().height
       },
       getMoreStore: function () {
         if (!this.isSearchingMore) {
@@ -405,6 +402,11 @@
         font-size: .28rem;
         thead {
           background: #d5e5fb;
+          &.active {
+            position: fixed;
+            top: .88rem;
+            z-index: 2;
+          }
           tr {
             th {
               font-weight: bold;
@@ -425,13 +427,29 @@
               padding: .2rem .1rem;
               &.store-name {
                 color: #418bf6;
-                div {
+                a {
                   padding: 0;
+                  display: block;
                   width: 1.2rem;
                   overflow: hidden;
                   margin-left: .16rem;
                 }
               }
+              &.price-level-wrap {
+                text-align: center;
+              }
+              > div {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                max-width: 1.58rem;
+              }
+              .price-number {
+                display: inline-block;
+                vertical-align: middle;
+                margin-bottom: 0;
+                width: .9rem;
+              }
               div {
                 margin-bottom: .2rem;
                 text-align: left;
@@ -440,9 +458,9 @@
                 }
               }
               &.push-date {
-              text-align: center;
+              text-align: left;
                 div {
-                  text-align: center;
+                  text-align: left;
                 }
             }
               .price-level:last-child {
@@ -460,7 +478,11 @@
                 text-align: center;
                 border-radius: .05rem;
                 position: relative;
-                top: -.03rem;
+                top: -.05rem;
+                margin-right: .05rem;
+                &.reserve-tag {
+                  background: #07bb1c;
+                }
               }
             }
           }

components/mobile/store/StoreDetail.vue

@@ -37,7 +37,7 @@
             <div>{{commodity.breakUp?'可拆卖':'不可拆卖'}}</div>
             <div>{{commodity.produceDate}}</div>
           </td>
-          <td>
+          <td class="price-level-wrap">
             <div v-if="!commodity.prices || commodity.prices.length == 0">-</div>
             <div v-for="price in commodity.prices" class="price-number">{{price.start}}+</div>
             <div v-for="price in commodity.prices" class="price-level price-number">
@@ -152,14 +152,12 @@
         }
         let tbodyObj = document.getElementById('product-body')
         let theadObj = document.getElementById('product-head')
-//        console.log(theadObj.height)
         this.isScrollOverTab = tbodyObj.getBoundingClientRect().top <= theadObj.getBoundingClientRect().height
       },
       getMoreCom: function () {
         if (!this.isSearchingMore) {
           this.page++
           this.isSearchingMore = true
-          console.log(this.page)
           this.pageCommodity({ page: this.page, count: 6 })
         }
       },
@@ -310,6 +308,9 @@
             td {
               padding: .2rem .1rem;
               text-align: left;
+              &.price-level-wrap {
+                text-align: center;
+              }
               div {
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -341,9 +342,10 @@
                 text-align: center;
                 border-radius: .05rem;
                 position: relative;
-                top: -.03rem;
+                top: -.05rem;
+                margin-right: .05rem;
                 &.reserve-tag {
-                  background: #0ece24;
+                  background: #07bb1c;
                 }
               }
             }