手机端店铺产品页面修改

components/mobile/store/StoreDetail.vue

@@ -17,16 +17,15 @@
     </div>
     <div class="product-store" v-if="activeType == 'product'">
       <table v-if="commodities.content&&commodities.content.length > 0">
-        <thead>
+        <thead :class="{'active': isScrollOverTab}">
         <tr>
-          <th>型号/品牌</th>
-          <th>包装</th>
-          <th>数量</th>
-          <th>单价</th>
-          <th>交期(天)</th>
+          <th style="width: 1.77rem;">型号/品牌</th>
+          <th style="width: 1.75rem;">包装</th>
+          <th style="width: 2.2rem;">价格梯度</th>
+          <th style="width: 1.77rem;">交期(天)</th>
         </tr>
         </thead>
-        <tbody>
+        <tbody id="product-body">
         <tr v-for="commodity in searchLists" @click="goProductDetail(commodity.uuid)">
           <td class="store-name">
             <div>{{commodity.code}}</div>
@@ -40,14 +39,9 @@
           </td>
           <td>
             <div v-if="!commodity.prices || commodity.prices.length == 0">-</div>
-            <div v-for="price in commodity.prices">{{price.start}}+</div>
-          </td>
-          <td>
-            <div v-if="!commodity.prices || commodity.prices.length == 0">
-              <span>—</span>
-            </div>
-            <div v-for="price in commodity.prices" class="price-level">
-              <span v-if="commodity.currencyName.indexOf('RMB')!==-1">￥{{price.rMBPrice | currency}}</span>
+            <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">
+              <span v-if="commodity.currencyName.indexOf('RMB')!==-1">¥{{price.rMBPrice | currency}}</span>
               <span v-if="commodity.currencyName.indexOf('USD')!==-1">${{price.uSDPrice | currency}}</span>
             </div>
           </td>
@@ -58,6 +52,7 @@
               <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery">{{commodity.b2cMaxDelivery}}</span>
             </div>
             <div v-if="commodity.minBuyQty"><span class="order-tag">订</span>{{commodity.minBuyQty}}起订</div>
+            <div v-if="commodity.reserve"><span class="order-tag reserve-tag">库</span>{{commodity.reserve}}</div>
             <div v-if="!commodity.b2cMinDelivery">
               <span>—</span>
             </div>
@@ -86,7 +81,8 @@
         isSearchingMore: false,
         searchLists: [],
         page: 1,
-        showLoginBox: false
+        showLoginBox: false,
+        isScrollOverTab: false
       }
     },
     components: {
@@ -154,6 +150,8 @@
         if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.page < this.allPage && this.activeType === 'product') {
           this.getMoreCom()
         }
+        let theadObj = document.getElementById('product-body')
+        this.isScrollOverTab = theadObj.getBoundingClientRect().top <= 78
       },
       getMoreCom: function () {
         if (!this.isSearchingMore) {
@@ -289,6 +287,11 @@
         font-size: .28rem;
         thead {
           background: #d5e5fb;
+          &.active {
+            position: fixed;
+            top: .88rem;
+            z-index: 2;
+          }
           tr {
             th {
               font-weight: bold;
@@ -318,6 +321,12 @@
               .price-level:last-child {
                 color: #fc5708;
               }
+              .price-number {
+                display: inline-block;
+                vertical-align: middle;
+                margin-bottom: 0;
+                width: .9rem;
+              }
               .order-tag {
                 display: inline-block;
                 font-size: .18rem;
@@ -331,6 +340,9 @@
                 border-radius: .05rem;
                 position: relative;
                 top: -.03rem;
+                &.reserve-tag {
+                  background: #0ece24;
+                }
               }
             }
             &:active {