修改优化我的店铺界面

components/mobile/MobileHeader.vue

@@ -286,7 +286,7 @@
     width:100%;
     height:.88rem;
     line-height: .88rem;
-    border-bottom:.01rem solid #ccc;
+    /*border-bottom:.01rem solid #ccc;*/
     background: #3e82f5;
     padding:0 .2rem 0 .1rem;
     color:#fff;

components/mobile/store/StoreDetail.vue

@@ -5,11 +5,12 @@
         <img :src="store.logoUrl || '/images/component/default.png'"/>
         <i v-if="showIcon" class="iconfont icon-shoucang" :style="isFocus === 'true'?'color:#ff7800':'color: #ddd'" @click="collectStore"></i>
       </div>
+      <div class="store-switch-item">
+        <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
+        <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">介绍</span>
+      </div>
     </div>
-    <div class="store-switch-item">
-      <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
-      <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">介绍</span>
-    </div>
+
     <div class="store-info" v-if="activeType=='detail'">
       <div class="store-description">
         <h4>主营产品</h4>
@@ -82,68 +83,159 @@
     <div class="product-store" v-else>
       <div class="search-content">
         <input type="text" v-model="keyword" placeholder="品牌/类目/型号/规格" @keyup.13="search">
-        <span @click="search">
+        <span @click="search" style="height:0.5rem;line-height:0.5rem;">
         <i class="iconfont icon-sousuo"></i>
         </span>
       </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.brandNameEn || brandEn || '-'}}</div>
-            <div>{{commodity.kindNameCn || '-'}}</div>
-            <div>{{commodity.code || '-'}}</div>
-            <div>{{commodity.spec || '-'}}</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 v-if="commodities.content&&commodities.content.length > 0">
+        <div v-for="(item, index) in commodities.content">
+          <div class="middle">
+            <div class="list">
+              <div class="fl">
+                <div class="name">品牌：</div>
+                <div class="text">{{item.brandNameEn}}</div>
+              </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>
+
             </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 class="list">
+              <div class="fl" style="width: 100%">
+                <div class="name">型号：</div>
+                <div class="text">{{item.code || '-'}}</div>
               </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 class="list">
+              <div class="fl" style="width: 100%">
+                <div class="name">规格：</div>
+                <div class="text">{{item.spec || '-'}}</div>
+              </div>
+            </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>
             </div>
-            <div v-if="commodity.minBuyQty"><span class="order-tag">订</span>{{commodity.minBuyQty}}起订</div>
-            <div><span class="order-tag reserve-tag">库</span>{{commodity.reserve || 0}}</div>
-            <div v-if="!commodity.b2cMinDelivery">
-              <span>—</span>
+
+            <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>
-          </td>
-        </tr>
-        </tbody>
-      </table>
+            <!--<div class="list">-->
+              <!--<div class="fl">-->
+                <!--<div class="name">最小包装数：</div>-->
+                <!--<div class="text">{{item.minPackQty}}</div>-->
+              <!--</div>-->
+              <!--<div class="fr">-->
+                <!--<div class="name">库存：</div>-->
+                <!--<div class="text">{{item.reserve}}</div>-->
+              <!--</div>-->
+            <!--</div>-->
+
+            <!--<div class="list">-->
+              <!--<div class="fl">-->
+                <!--<div class="name">包装方式：</div>-->
+                <!--<div class="text">{{item.packaging || '无包装信息'}}</div>-->
+              <!--</div>-->
+              <!--<div class="fr">-->
+                <!--<div class="name">最小起订量：</div>-->
+                <!--<div class="text" style="color: #f31919">{{item.minBuyQty}}</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>
+      <!--<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"
@@ -315,6 +407,9 @@
   }
 </script>
 <style lang="scss" scoped>
+  .mobile-header {
+    border-bottom: 0px !important;
+  }
   .store-detail {
     margin: 0 auto;
     margin-bottom: 1.2rem;
@@ -322,16 +417,15 @@
     background: #f7f7f7;
     height: 100%;
     .store-logo {
-      height: 3.17rem;
-      width: 6.96rem;
+      height: 4.49rem;
+      width: 100%;
       display: inline-block;
-      margin: .2rem auto;
       line-height: 2.13rem;
       background: #fff;
       text-align: center;
-      border-radius: .1rem;
-      background: url('/images/mobile/@2x/brand-bg.png') no-repeat;
+      background: url('/images/mobile/@2x/brand-bg2.jpg') no-repeat;
       background-size: cover;
+      position: relative;
       .store-logo-box {
         border: .01rem solid #c7e5fd;
         border-radius: .1rem;
@@ -362,14 +456,21 @@
     .store-switch-item {
       text-align: center;
       background: #fff;
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      height: 0.83rem;
+      line-height: 0.83rem;
+      border-bottom: 1px solid #ccc;
       .mobile-switch-btn {
         background: #fff;
         color: #666;
         display: inline-block;
-        height: .64rem;
         font-size: .34rem;
-        line-height: .64rem;
         width: 1.4rem;
+        height: 0.79rem;
+        line-height: 0.79rem;
         &:first-child {
           margin-right: 1.78rem;
         }
@@ -467,6 +568,221 @@
         }
       }
     }
+    .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;
+        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.24rem 0.24rem;
+      background: #fff;
+      margin: 0.24rem 0.24rem 0;
+      border-radius: 5px;
+      .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 {
+        .left {
+          float: left;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .textinfo {
+          font-size: 0.18rem;
+          margin-left: 0.1rem; display: inline-block;padding: 0.05rem 0.2rem;background: #3f84f6;color: #fff;font-weight: bold;
+          border-radius: 3px;
+        }
+        .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;
+          }
+        }
+        .name {
+          color: #333;
+          font-size: 0.28rem;
+          display: inline-block;
+        }
+        .text {
+          display: inline-block;
+          color: #666;
+          font-size: 0.28rem
+        }
+        .table {
+          width: 5rem;
+          margin-bottom: 0;
+          margin-top: 0;
+          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;
+              width: 50%;
+              float: left;
+              border-right: .01rem solid #c5c5c5;
+              border-bottom: .01rem solid #c5c5c5;
+            }
+            &:nth-child(odd) {
+              background: #ddd;
+              color: #666;
+              font-size: 0.28rem;
+            }
+            &:nth-child(even) {
+              background: #fcfcfc;
+              color: #666;
+              font-size: 0.28rem;
+            }
+            &:nth-last-of-type(1){
+              color: #f31919;
+            }
+            &.title {
+              font-size: 0.28rem;
+              color: #333;
+            }
+          }
+        }
+      }
+    }
     .product-store {
       margin: .2rem 0 0 0;
       table {
@@ -568,6 +884,7 @@
       }
     }
     .no-product {
+
       background: #fff;
       padding-top: 1rem;
       img {
@@ -598,7 +915,6 @@
     }
   }
   .search-content {
-    background: #fff;
     padding: .07rem 0;
     input {
       width: 6.37rem;

pages/mobile/center/vendor/productdetails.vue

@@ -294,11 +294,16 @@
       },
       // 结束价格阶段失去焦点
       endpriceBlur(item, index) {
-        if (Math.abs(item.end) + 1 >= this.chooseItem.prices[index + 1].end) {
+        if (this.chooseItem.prices[index + 1].end !== '' && toString(this.chooseItem.prices[index + 1].end).trim() !== '' && Math.abs(item.end) + 1 >= this.chooseItem.prices[index + 1].end) {
           this.timeoutCount++
           this.collectResult = `输入值不能大于${this.chooseItem.prices[index + 1].end - 1}`
           item.end = ''
           return false
+        } else if (item.start !== '' && toString(item.start).trim() !== '' && Math.abs(item.end) + 1 <= item.start) {
+          this.timeoutCount++
+          this.collectResult = `输入值不能小于${item.start}`
+          item.end = ''
+          return false
         }
         this.chooseItem.prices[index + 1].start = Math.abs(item.end) + 1
       },
@@ -312,7 +317,7 @@
       },
       // 单价失去焦点
       rMBPriceBlur(item) {
-        if (!/^[0-9]+([.]{1}[1-9]{1,6})?$/.test(item.rMBPrice)) {
+        if (!/^[0-9]+([.]{1}[1-9]+)?$/.test(item.rMBPrice)) {
           this.timeoutCount++
           this.collectResult = '单价只能输入数字'
           return false
@@ -324,11 +329,16 @@
           item.rMBPrice = splits[0]
         }
         if (splits[1]) {
-          item.rMBPrice = splits[0] + splits[1]
-        }
-        if (splits[1] && splits[1].length >= 6) {
-          splits[1] = splits[0].substr(0, 6)
-          item.rMBPrice = splits[0] + splits[1]
+          item.rMBPrice = splits[0] + '.' + splits[1]
+        }
+        if (splits[1] && splits[1].length > 6) {
+          splits[1] = splits[1].substr(0, 7)
+          let str = splits[1].substr(0, 6)
+          if (splits[1][splits[1].length - 1] >= 5) {
+            str = splits[1].substr(0, 6)
+            str = Math.abs(str) + 1
+          }
+          item.rMBPrice = splits[0] + '.' + Math.ceil(str)
         }
       },
       // 保存
@@ -378,19 +388,23 @@
           this.timeoutCount++
           this.collectResult = '请填写最大交期时间'
           return false
+        } else if (!this.chooseItem.minDelivery || !this.chooseItem.maxDelivery) {
+          this.timeoutCount++
+          this.collectResult = '交期不能为空'
+          return false
         } else if (!/^\d{1,3}$/.test(this.chooseItem.minDelivery) || !/^\d{1,3}$/.test(this.chooseItem.maxDelivery)) {
           this.timeoutCount++
-          this.collectResult = '交期时间只能输入数字'
+          this.collectResult = '交期只能输入数字'
           return false
         } else {
           let isHas = false
           for (let i = 0; i < this.chooseItem.prices.length; i++) {
-            if (!this.chooseItem.prices[i].start || !this.chooseItem.prices[i].end) {
+            if (!this.chooseItem.prices[i].start || (this.chooseItem.prices[i].end !== '' && !this.chooseItem.prices[i].end)) {
               this.timeoutCount++
               this.collectResult = '分段数量必须填写'
               isHas = true
               break
-            } else if (Math.abs(this.chooseItem.prices[i].start) > Math.abs(this.chooseItem.prices[i].end)) {
+            } else if (i !== this.chooseItem.prices.length - 1 && Math.abs(this.chooseItem.prices[i].start) > Math.abs(this.chooseItem.prices[i].end)) {
               this.timeoutCount++
               this.collectResult = '存在分段的起始值大于分段的结束值'
               isHas = true
@@ -400,7 +414,7 @@
               this.collectResult = '单价必须是大于0的数字'
               isHas = true
               break
-            } else if (!/^\d+$/.test(this.chooseItem.prices[i].start) || !/^\d+$/.test(this.chooseItem.prices[i].end)) {
+            } else if (!/^\d+$/.test(this.chooseItem.prices[i].start) || (this.chooseItem.prices[i].end !== '' && !/^\d+$/.test(this.chooseItem.prices[i].end))) {
               this.timeoutCount++
               this.collectResult = '分段数量必须是正整数'
               isHas = true
@@ -421,6 +435,7 @@
         } else {
           this.chooseItem.selfSale = 2
         }
+        this.chooseItem.prices[2].end = '9999999999'
         this.$http.put('/trade/goods', this.chooseItem).then(res => {
           if (res.data.success) {
             this.timeoutCount++