修改器件收藏详情页

components/mobile/brand/ComponentDetail.vue

@@ -33,63 +33,77 @@
       </div>
     </div>
     <div class="product-store" v-if="activeType == 'store'">
-      <table v-if="searchLists&&searchLists.length > 0">
-        <thead id="product-head">
-        <tr>
-          <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>
-        <thead class="active" v-show="isScrollOverTab">
-        <tr>
-          <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 id="product-body">
-        <tr v-for="store in searchLists">
-          <td class="store-name">
-            <nuxt-link :to="'/mobile/shop/' + store.storeid">
-              {{store.storeName || '-' | storeNameFilter}}
-            </nuxt-link>
-          </td>
-          <td>
-            <div v-if="!store.packaging && !store.breakUp && !store.produceDate">-</div>
-            <div>{{store.produceDate}}</div>
-            <div>{{store.packaging}}</div>
-            <div>{{store.breakUp?'可拆卖':'不可拆卖'}}</div>
-          </td>
-          <td class="price-level-wrap">
-            <div v-if="!store.prices || store.prices.length == 0">-</div>
-            <div class="price-number fl">
-              <div v-for="price in store.prices">{{price.start}}+</div>
+      <div v-for="(item, index) in searchLists">
+        <div class="middle">
+          <div class="storeName" @click="goProductDetail(item)">
+            {{item.storeName || '-' | storeNameFilter}}
+          </div>
+          <div class="list">
+            <div class="fl">
+              <div class="name">品牌：</div>
+              <div class="text">{{item.brandNameEn}}</div>
             </div>
-            <div class="price-number fr">
-              <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>
+          </div>
+          <div class="list">
+            <div class="fl" style="width: 100%">
+              <div class="name">类目(产品名称)：</div>
+              <div class="text" style="color: #3f84f6">{{item.kindNameCn || '-'}}</div>
             </div>
-          </td>
-          <td class="push-date">
-            <div v-if="store.b2cMinDelivery">
-              <span>{{store.b2cMinDelivery}}</span>
-              <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">-</span>
-              <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">{{store.b2cMaxDelivery}}</span>
+
+          </div>
+          <div class="list">
+            <div class="fl" style="width: 100%">
+              <div class="name">型号：</div>
+              <div class="text">{{item.code || '-'}}</div>
+            </div>
+          </div>
+          <div class="list">
+            <div class="fl" style="width: 100%">
+              <div class="name">规格：</div>
+              <div class="text">{{item.spec || '-'}}</div>
             </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>
+
+          <div class="list">
+            <div class="fl" style="width: 100%">
+              <div class="name">包装：</div>
+              <div class="text">{{item.packaging || '无包装信息'}}</div>
+              <div class="textinfo" v-if="item.breakUp">可拆卖</div>
             </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
+          </div>
+
+          <div class="list">
+            <div class="name">生产日期：</div>
+            <div class="text" :title="item.produceDate">{{item.produceDate || '-'}}</div>
+          </div>
+
+          <div class="list">
+            <div class="fl" style="width: 100%; ">
+              <div class="name">交期(天)：</div>
+              <div class="text" style="color: #ef5042" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery != item.b2cMinDelivery)" v-text="item.b2cMinDelivery + '-'+ item.b2cMaxDelivery"></div>
+              <div class="text" style="color: #ef5042" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery == item.b2cMinDelivery)" v-text="item.b2cMinDelivery"></div>
+              <div v-if="item.minBuyQty" style="display: inline-block;margin-left: 0.2rem"><span class="order-tag">订</span>{{item.minBuyQty}}起订</div>
+              <div v-if="item.reserve" style="display: inline-block;margin-left: 0.2rem"><span class="order-tag reserve-tag">库</span>{{item.reserve}}</div>
+            </div>
+          </div>
+          <div class="list">
+            <div class="name left">价格梯度<p>(pcs):</p></div>
+            <div class="table left">
+              <ul>
+                <li class="title">
+                  <div>分段数量/PCS</div>
+                  <div>分段单价</div>
+                </li>
+                <li v-for="price in item.prices">
+                  <div>{{price.start}}+</div>
+                  <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
+                  <div v-else>${{price.rMBPrice}}</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div v-if="(storeList.totalElements == 0 && activeType == 'store') || (component.properties && component.properties.length == 0 && activeType == 'param')" class="no-store">
       <img src="/images/mobile/@2x/car@2x.png" alt="">
@@ -100,10 +114,11 @@
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
     <loading v-show="isSearchingMore"></loading>
     <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
+    <pull-up :searchMore="fetching" :allPage="allPage" :page="params.page" @pullUpAction="getMoreStore"></pull-up>
   </div>
 </template>
 <script>
-  import {RemindBox, Loading, LoginBox} from '~components/mobile/common'
+  import {RemindBox, Loading, LoginBox, PullUp} from '~components/mobile/common'
   export default {
     data () {
       return {
@@ -134,17 +149,21 @@
     components: {
       RemindBox,
       Loading,
-      LoginBox
+      LoginBox,
+      PullUp
     },
     mounted: function () {
-      let _this = this
-      _this.$nextTick(function () {
-        window.addEventListener('scroll', function () {
-          _this.scroll()
-        }, false)
-      })
+      // let _this = this
+      // _this.$nextTick(function () {
+      //   window.addEventListener('scroll', function () {
+      //     _this.scroll()
+      //   }, false)
+      // })
     },
     computed: {
+      fetching () {
+        return this.$store.state.componentInformation.information.fetching
+      },
       component () {
         return this.$store.state.componentDetail.detail.data
       },
@@ -244,16 +263,19 @@
       }
     },
     methods: {
+      goProductDetail: function (com) {
+        this.$router.push('/mobile/shop/' + com.storeid)
+      },
       scroll: function () {
         let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
         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')
-        if (theadObj) {
-          this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
-        }
+        // let tbodyObj = document.getElementById('product-body')
+        // let theadObj = document.getElementById('product-head')
+        // if (theadObj) {
+        //   this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
+        // }
       },
       getMoreStore: function () {
         if (!this.isSearchingMore) {
@@ -300,9 +322,10 @@
 <style lang="scss" scoped>
   .component-detail {
     font-size: .28rem;
-    margin-bottom: 1.2rem;
+    margin-bottom: 0.98rem;
     background: #f7f7f7;
     padding-top: .2rem;
+    padding-bottom: 0.2rem;
     .base-detail {
       /*margin: 0 .27rem .2rem .27rem;*/
       padding: .18rem .36rem 0 .36rem;
@@ -424,95 +447,164 @@
         }
       }
     }
-    .product-store {
-      margin: .2rem 0;
-      table {
-        width: 100%;
-        font-size: .28rem;
-        thead {
-          background: #d5e5fb;
-          &.active {
-            position: fixed;
-            top: .88rem;
-            z-index: 2;
+    .middle {
+      .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: -.05rem;
+        margin-right: .05rem;
+        &.reserve-tag {
+          background: #07bb1c;
+        }
+      }
+      text-align: left;
+      padding: 0 0 0.24rem;
+      background: #fff;
+      margin: 0.24rem 0.24rem 0;
+      border-radius: 5px;
+      border: 1px solid #e3e5e8;
+      .storeName{
+        color: #3f84f6;
+        font-size: 0.28rem;
+        line-height: 0.6rem;
+        border-bottom: 1px solid #d3d3d3;
+        margin-bottom: 0.18rem;
+        padding-left: 0.24rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: bold;
+      }
+      .pms {
+        color: #f57710;
+        border: 1px solid #f57710;
+        border-radius: 0.4rem;
+        background: #fff;
+        font-size: 0.24rem;
+        height: 0.4rem;
+        line-height: 0.4rem;
+        width: 0.8rem;
+        text-align: center;
+      }
+      .list {
+        padding: 0 0.24rem;
+        .left {
+          float: left;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .textinfo {
+          font-size: 0.18rem;
+          margin-left: 0.1rem;
+          display: inline-block;
+          background: #3f84f6;
+          color: #fff;
+          font-weight: bold;
+          border-radius: 3px;
+          width: 0.8rem;
+          height: 0.32rem;
+          line-height: 0.32rem;
+          text-align: center
+        }
+        .button {
+          font-size: 0.3rem;
+          color: #1a58dd;
+          width: 0.92rem;
+          height: 0.43rem;
+          line-height: 0.43rem;
+          text-align: center;
+          border-radius: 5px;
+          border:1px solid #1a58dd;
+          display: inline-block;
+          margin-right: 0.2rem;
+        }
+        margin-bottom: 0.18rem;
+        &::after{
+          clear: both;
+          display: block;
+          content: ' ';
+          visibility: hidden;
+          zoom: 1;
+        }
+        .fl {
+          width: 4.4rem;
+          float: left;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .fr {
+          text-align: left;
+          width: 2.6rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        &.list-long {
+          .fl {
+            width: 100% !important;
           }
-          tr {
-            th {
-              font-weight: bold;
+        }
+        .name {
+          color: #333;
+          font-size: 0.28rem;
+          display: inline-block;
+        }
+        .text {
+          display: inline-block;
+          color: #333;
+          font-size: 0.28rem
+        }
+        .table {
+          width: 5rem;
+          margin-bottom: 0;
+          margin-top: 0;
+          margin-left: 0.1rem;
+          li {
+            height: 0.43rem;
+            line-height: 0.43rem;
+            border-left: .01rem solid #c5c5c5;
+            font-size: .28rem;
+            &::after {
+              clear: both;
+              display: block;
+              content: ' ';
+              visibility: hidden;
+              zoom: 1;
+            }
+            div {
               text-align: center;
-              height: .78rem;
-              line-height: .78rem;
-              >span {
-                font-size: .22rem;
-              }
+              width: 50%;
+              float: left;
+              border-right: .01rem solid #c5c5c5;
+              border-bottom: .01rem solid #c5c5c5;
             }
-          }
-        }
-        tbody {
-          background: #fff;
-          tr {
-            border-bottom: 0.2rem solid #f7f7f7;
-            td {
-              padding: .2rem .1rem;
-              &.store-name {
-                color: #418bf6;
-                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;
-                &:last-child {
-                  margin-bottom: 0;
-                }
-              }
-              &.push-date {
-                text-align: left;
-                div {
-                  text-align: left;
-                }
-              }
-              .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: -.05rem;
-                margin-right: .05rem;
-                &.reserve-tag {
-                  background: #07bb1c;
-                }
-              }
+            &:nth-child(odd) {
+              background: #ddd;
+              color: #333;
+              font-size: 0.28rem;
+            }
+            &:nth-child(even) {
+              background: #fcfcfc;
+              color: #333;
+              font-size: 0.28rem;
+            }
+            &:nth-last-of-type(1){
+              color: #f31919;
+            }
+            &.title {
+              font-size: 0.28rem;
+              color: #333;
             }
           }
         }

components/mobile/store/StoreDetail.vue

@@ -139,7 +139,7 @@
               </div>
             </div>
             <div class="list">
-              <div class="name left">价格梯度：<p>(pcs):</p></div>
+              <div class="name left">价格梯度<p>(pcs):</p></div>
               <div class="table left">
                 <ul>
                   <li class="title">
@@ -158,62 +158,7 @@
           </div>
           </div>
       </div>
-      <!--<table v-if="commodities.content&&commodities.content.length > 0">-->
-        <!--<thead id="product-head" >-->
-          <!--<tr>-->
-            <!--<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>-->
-        <!--<thead class="active" v-show="isScrollOverTab">-->
-          <!--<tr>-->
-            <!--<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 id="product-body">-->
-        <!--<tr v-for="commodity in searchLists" @click="goProductDetail(commodity)">-->
-          <!--<td class="store-name">-->
-            <!--<div>{{commodity.code}}</div>-->
-            <!--<div>{{commodity.brandNameCn}}</div>-->
-          <!--</td>-->
-          <!--<td>-->
-            <!--<div v-if="!commodity.packaging && !commodity.breakUp && !commodity.produceDate">-</div>-->
-            <!--<div>{{commodity.packaging}}</div>-->
-            <!--<div>{{commodity.breakUp?'可拆卖':'不可拆卖'}}</div>-->
-            <!--<div>{{commodity.produceDate}}</div>-->
-          <!--</td>-->
-          <!--<td class="price-level-wrap">-->
-            <!--<div v-if="!commodity.prices || commodity.prices.length == 0">-</div>-->
-            <!--<div class="price-number fl">-->
-              <!--<div v-for="price in commodity.prices">{{price.start}}+</div>-->
-            <!--</div>-->
-            <!--<div class="price-number fr">-->
-              <!--<div v-for="price in commodity.prices" class="price-level">-->
-                <!--<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>-->
-            <!--</div>-->
-          <!--</td>-->
-          <!--<td>-->
-            <!--<div v-if="commodity.b2cMinDelivery">-->
-              <!--<span>{{commodity.b2cMinDelivery}}</span>-->
-              <!--<span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery">-</span>-->
-              <!--<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>-->
-          <!--</td>-->
-        <!--</tr>-->
-        <!--</tbody>-->
-      <!--</table>-->
+
       <empty-status :type="isSearch ? 'search' : 'collect'"
                     :text="isSearch ? `抱歉，暂无与“${remindKeyword}”匹配的产品信息`: '抱歉，暂无产品信息'"
                     :showLink="false"
@@ -548,81 +493,6 @@
         }
       }
     }
-    .providerList {
-      border-top: .31rem solid #f1f3f7;
-      .content {
-        padding: 0.24rem 0.24rem;
-        background: #fff;
-        .linetext {
-          margin-bottom: 0.24rem;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          &:nth-last-of-type(1){
-            margin-bottom: 0rem;
-          }
-        }
-        .fl {
-          float: left;
-          border-right: 1px dashed #e0e0e4;
-          width: 4.68rem;
-        }
-        .fr {
-          float: right;
-          margin: 0.18rem 0.24rem;
-          margin-right: 0rem;
-          font-size: 0.3rem;
-          &.addtop {
-            margin-top: 0.6rem;
-            .add {
-              background: #0067e7;
-              color: #fff;
-              &.noadd{
-                background: #cccbcb;
-                color: #fff;
-                border:1px solid #cccbcb;
-              }
-            }
-          }
-          div {
-            width: 2.1rem;
-            height: 0.6rem;
-            text-align: center;
-            line-height: 0.6rem;
-            border-radius: 3px;
-            &.look{
-              background: #0067e7;
-              color: #fff;
-            }
-            &.add{
-              background: #fff;
-              color: #0067e7;
-              border: 1px solid #0067e7;
-            }
-            &.delete{
-              background: #fff;
-              color: #f70415;
-              border: 1px solid #f70415;
-            }
-            &.noadd{
-              background: #cccbcb;
-              color: #fff;
-              border:1px solid #cccbcb;
-            }
-          }
-          div:nth-child(1){
-            margin-bottom: 0.26rem
-          }
-        }
-        &::after{
-          clear: both;
-          display: block;
-          content: ' ';
-          visibility: hidden;
-          zoom: 1;
-        }
-      }
-    }
     .middle {
       .order-tag {
         display: inline-block;
@@ -647,6 +517,7 @@
       background: #fff;
       margin: 0.24rem 0.24rem 0;
       border-radius: 5px;
+      border: 1px solid #e3e5e8;
       .pms {
         color: #f57710;
         border: 1px solid #f57710;
@@ -731,6 +602,7 @@
           width: 5rem;
           margin-bottom: 0;
           margin-top: 0;
+          margin-left: 0.1rem;
           li {
             height: 0.43rem;
             line-height: 0.43rem;