Merge remote-tracking branch 'origin/feature-201815-wangcz' into feature-201815-wangcz

assets/scss/mobileCommon.scss

@@ -511,3 +511,36 @@ table.com-price-list {
     }
   }
 }
+
+/* 报价方式切换 */
+.switch-say {
+  text-align: center;
+  font-size: 0;
+  background: #fff;
+  margin-bottom: .35rem;
+  -webkit-box-shadow: 0 2px 4px #ccc;
+  -moz-box-shadow: 0 2px 4px #ccc;
+  box-shadow: 0 2px 4px #ccc;
+  li {
+    width: 50%;
+    height: .72rem;
+    line-height: .72rem;
+    color: #666;
+    font-size: .28rem;
+    text-align: center;
+    position: relative;
+    &.active {
+      color: #3f84f6;
+      &::after {
+        content: '';
+        position: absolute;
+        width: 1.2rem;
+        height: .07rem;
+        background: #3f84f6;
+        left: 50%;
+        margin-left: -.6rem;
+        top: .65rem;
+      }
+    }
+  }
+}

components/applyPurchase/SayPrice.vue

@@ -29,12 +29,34 @@
               <span>规格：</span><span class="text"  :title="purchaseManList.content[currentSayPriceIndex].spec">{{purchaseManList.content[currentSayPriceIndex].spec || '-'}}</span>
             </div>
           </div>
+          <ul class="switch-say">
+            <li :class="{'active': sayType == 'current'}" @click="setSayType('current')">当前型号报价</li>
+            <li :class="{'active': sayType == 'replace'}" @click="setSayType('replace')">替代型号报价</li>
+          </ul>
+          <template v-if="sayType == 'replace'">
+            <div class="content-line">
+              <div class="form-item form-left form-long">
+                <span><i>*</i>品牌：</span>
+                <input type="text" class="form-control" v-model="sayPriceObj.replaceBrand" @blur="onReplaceBrandBlur()">
+              </div>
+            </div>
+            <div class="content-line">
+              <div class="form-item form-left form-long">
+                <span><i>*</i>型号：</span>
+                <input type="text" class="form-control" v-model="sayPriceObj.replaceCmpCode" @blur="onReplaceCmpCodeBlur()">
+              </div>
+            </div>
+            <div class="content-line">
+              <div class="form-item form-left form-long">
+                <span><i>*</i>规格：</span>
+                <input type="text" class="form-control" v-model="sayPriceObj.replaceSpec" @blur="onReplaceSpecBlur()">
+              </div>
+            </div>
+          </template>
           <div class="content-line">
             <div class="form-item form-left">
               <span><i>*</i>交期：</span>
               <input type="number" class="form-control" placeholder="天数" @input="onLeadtimeInput" @blur="onLeadtimeBlur" v-model="sayPriceObj.leadtime">
-              <!-- -
-              <input type="text" class="form-control" placeholder="天数">-->
             </div>
             <!--<div class="form-item form-upload">
               <label>
@@ -94,14 +116,21 @@
               lapQty: '',
               price: ''
             }
-          ]
+          ],
+          replaceBrand: '',
+          replaceCmpCode: '',
+          replaceSpec: ''
         },
         validSayPrice: {
           leadtime: false,
           repliesPrice: false,
-          repliesLapQty: false
+          repliesLapQty: false,
+          replaceBrand: false,
+          replaceCmpCode: false,
+          replaceSpec: false
         },
-        showLoading: false
+        showLoading: false,
+        sayType: 'current'
       }
     },
     components: {
@@ -113,6 +142,7 @@
       },
       currentSayPriceIndex () {
         this.resetSayPrice()
+        this.sayType = 'current'
         return this.current
       },
       user () {
@@ -155,6 +185,12 @@
           if (!purchaseMan.currency) {
             purchaseMan.currency = this.sayPriceObj.currency
           }
+          if (this.sayType === 'replace') {
+            purchaseMan.replaceBrand = this.sayPriceObj.replaceBrand
+            purchaseMan.replaceCmpCode = this.sayPriceObj.replaceCmpCode
+            purchaseMan.replaceSpec = this.sayPriceObj.replaceSpec
+            purchaseMan.isReplace = 1
+          }
           this.$http.post('/inquiry/sale/item/save', purchaseMan).then(response => {
             this.showLoading = false
             if (response.data.success === false) {
@@ -185,7 +221,10 @@
               lapQty: '',
               price: ''
             }
-          ]
+          ],
+          replaceBrand: '',
+          replaceCmpCode: '',
+          replaceSpec: ''
         }
       },
       onLeadtimeInput: function () {
@@ -201,6 +240,30 @@
           this.validSayPrice.leadtime = true
         }
       },
+      onReplaceBrandBlur: function () {
+        if (!this.sayPriceObj.replaceBrand || !this.sayPriceObj.replaceBrand.length) {
+          this.validSayPrice.replaceBrand = false
+          this.$message.error('请填写替代物料品牌')
+        } else {
+          this.validSayPrice.replaceBrand = true
+        }
+      },
+      onReplaceCmpCodeBlur: function () {
+        if (!this.sayPriceObj.replaceCmpCode || !this.sayPriceObj.replaceCmpCode.length) {
+          this.validSayPrice.replaceCmpCode = false
+          this.$message.error('请填写替代物料型号')
+        } else {
+          this.validSayPrice.replaceCmpCode = true
+        }
+      },
+      onReplaceSpecBlur: function () {
+        if (!this.sayPriceObj.replaceSpec || !this.sayPriceObj.replaceSpec.length) {
+          this.validSayPrice.replaceSpec = false
+          this.$message.error('请填写替代物料规格')
+        } else {
+          this.validSayPrice.replaceSpec = true
+        }
+      },
       onReplyPriceInput: function (index) {
         let price = this.sayPriceObj.replies[index].price
         if (price >= 10000) {
@@ -265,12 +328,13 @@
         return {index: -1}
       },
       checkValid: function () {
+        let validReplace = this.sayType === 'replace' ? this.validSayPrice.replaceBrand && this.validSayPrice.replaceCmpCode && this.validSayPrice.replaceSpec : true
         for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
           if (!this.sayPriceObj.replies[i].lapQty || !this.sayPriceObj.replies[i].price) {
             return false
           }
         }
-        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice
+        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice && validReplace
       },
       setReplies: function (type, index) {
         if (type === 'add' && this.sayPriceObj.replies.length < 5) {
@@ -285,6 +349,10 @@
         } else if (type === 'sub' && this.sayPriceObj.replies.length > 1) {
           this.sayPriceObj.replies.splice(index, 1)
         }
+      },
+      setSayType: function (type) {
+        this.sayType = type
+        this.resetSayPrice()
       }
     }
   }
@@ -293,9 +361,10 @@
   .say-price-box {
     position: fixed;
     width: 476px;
-    top: 30%;
-    left: 33%;
-    bottom: 3%;
+    top: 50%;
+    left: 50%;
+    margin-top: -183px;
+    margin-left: -238px;
     overflow-y: auto;
     /*-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
     /*-moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
@@ -444,6 +513,32 @@
               margin-left: 4px;
             }
           }
+          &.form-long {
+            width: 100%;
+            input {
+              width: 292px;
+            }
+          }
+        }
+      }
+      .switch-say {
+        text-align: center;
+        margin: 0 0 14px 0;
+        font-size: 0;
+        li {
+          width: 200px;
+          height: 34px;
+          line-height: 34px;
+          color: #4290f7;
+          border: 1px solid #4290f7;
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 14px;
+          cursor: pointer;
+          &.active {
+            color: #fff;
+            background: #4290f7;
+          }
         }
       }
     }

components/common/buyOrCar/buyComponent.vue

@@ -1,13 +1,28 @@
 <template>
   <div>
-    <button style="z-index: 1000;" class="btn btn-primary btn-buy-now" :class="{'disabled': disabledFlag}"  @click="buyNow(true, $event)"><span class="watch">立即购买</span></button>
-    <button style="z-index: 1000;" class="btn btn-add-cart" :class="{'disabled': disabledFlag}"  @click="buyNow(false, $event)"><span class="watch">加入购物车</span></button>
+    <button style="z-index: 1000;"
+            class="btn btn-primary btn-buy-now"
+            :style="btnColor ? `background:${btnColor};border-color:${btnColor};` : ''"
+            :class="{'disabled': disabledFlag}"
+            @click="buyNow(true, $event)">
+      <span class="watch">立即购买</span>
+    </button>
+    <button style="z-index: 1000;"
+            ref="addCartBtn"
+            class="btn btn-add-cart"
+            @mouseenter="setHoverStyle(true)"
+            @mouseleave="setHoverStyle(false)"
+            :style="btnColor ? `color:${btnColor};border-color:${btnColor};` : ''"
+            :class="{'disabled': disabledFlag}"
+            @click="buyNow(false, $event)">
+      <span class="watch">加入购物车</span>
+    </button>
   </div>
 </template>
 
 <script>
   export default {
-    props: ['item', 'disabledFlag'],
+    props: ['item', 'disabledFlag', 'btnColor'],
     methods: {
       buyNow: function (isBuy, event) {
         event.stopPropagation()
@@ -91,6 +106,12 @@
             }
           }
         }
+      },
+      setHoverStyle: function (isShow) {
+        if (this.btnColor) {
+          this.$refs.addCartBtn.style.color = isShow ? '#fff' : this.btnColor
+          this.$refs.addCartBtn.style.background = isShow ? this.btnColor : '#fff'
+        }
       }
     }
   }

components/mobile/applyPurchase/SayPrice.vue

@@ -31,12 +31,16 @@
             </div>
           </div>
           <div class="form-list">
+            <ul class="switch-say">
+              <li class="inline-block" :class="{'active': sayType == 'current'}" @click="setSayType('current')">当前型号报价</li>
+              <li class="inline-block" :class="{'active': sayType == 'replace'}" @click="setSayType('replace')">替代型号报价</li>
+            </ul>
             <div class="form-title">
               <span class="fl">价格梯度<span>(PCS)</span></span>
               <span class="fr">
             <!--<span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>-->
             <span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>
-            <!--<span v-if="purchaseDetail.custCurrency" v-text="purchaseDetail.custCurrency"></span>-->
+                <!--<span v-if="purchaseDetail.custCurrency" v-text="purchaseDetail.custCurrency"></span>-->
             <img v-if="!showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
             <img v-if="showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" alt="">
             <ul v-if="showCurrencyList">
@@ -45,6 +49,20 @@
             </ul>
           </span>
             </div>
+            <template v-if="sayType == 'replace'">
+              <div class="replace">
+                <span>品牌</span>
+                <input type="text" v-model="sayPriceObj.replaceBrand" class="fr" @blur="onReplaceBrandBlur()">
+              </div>
+              <div class="replace">
+                <span>型号</span>
+                <input type="text" v-model="sayPriceObj.replaceCmpCode" class="fr" @blur="onReplaceCmpCodeBlur()">
+              </div>
+              <div class="replace">
+                <span>规格</span>
+                <input type="text" v-model="sayPriceObj.replaceSpec" class="fr" @blur="onReplaceSpecBlur()">
+              </div>
+            </template>
             <div class="form-item" v-for="(reply, index) in sayPriceObj.replies">
               <input type="text" placeholder="分段数量" class="fl" @blur="onReplyLapQtyBlur(index)" @input="onReplyLapQtyInput(index)" v-model="reply.lapQty">
               <input type="text" placeholder="分段单价" class="fr" @input="onReplyPriceInput(index)" @blur="onReplyPriceBlur(index)" v-model="reply.price">
@@ -77,13 +95,20 @@
               lapQty: '',
               price: ''
             }
-          ]
+          ],
+          replaceBrand: '',
+          replaceCmpCode: '',
+          replaceSpec: ''
         },
         validSayPrice: {
           leadtime: false,
           repliesPrice: false,
-          repliesLapQty: false
+          repliesLapQty: false,
+          replaceBrand: false,
+          replaceCmpCode: false,
+          replaceSpec: false
         },
+        sayType: 'current',
         remindText: '',
         timeoutCount: 0
       }
@@ -100,6 +125,7 @@
              this.initScroll.scrollTo(0, 0, 0)
            })
          }
+        this.sayType = 'current'
         this.resetSayPrice()
       }
     },
@@ -155,7 +181,10 @@
               lapQty: '',
               price: ''
             }
-          ]
+          ],
+          replaceBrand: '',
+          replaceCmpCode: '',
+          replaceSpec: ''
         }
       },
       setReplies: function (type, index) {
@@ -179,6 +208,12 @@
           purchaseMan.vendUserUU = this.user.data.userUU
           purchaseMan.qutoApp = 'MALL'
           purchaseMan.currency = this.sayPriceObj.currency
+          if (this.sayType === 'replace') {
+            purchaseMan.replaceBrand = this.sayPriceObj.replaceBrand
+            purchaseMan.replaceCmpCode = this.sayPriceObj.replaceCmpCode
+            purchaseMan.replaceSpec = this.sayPriceObj.replaceSpec
+            purchaseMan.isReplace = 1
+          }
           this.$http.post('/inquiry/sale/item/save', purchaseMan).then(response => {
             this.showLoading = false
             if (response.data.success === false) {
@@ -211,6 +246,30 @@
           this.validSayPrice.leadtime = true
         }
       },
+      onReplaceBrandBlur: function () {
+        if (!this.sayPriceObj.replaceBrand || !this.sayPriceObj.replaceBrand.length) {
+          this.validSayPrice.replaceBrand = false
+          this.onRemind('请填写替代物料品牌')
+        } else {
+          this.validSayPrice.replaceBrand = true
+        }
+      },
+      onReplaceCmpCodeBlur: function () {
+        if (!this.sayPriceObj.replaceCmpCode || !this.sayPriceObj.replaceCmpCode.length) {
+          this.validSayPrice.replaceCmpCode = false
+          this.onRemind('请填写替代物料型号')
+        } else {
+          this.validSayPrice.replaceCmpCode = true
+        }
+      },
+      onReplaceSpecBlur: function () {
+        if (!this.sayPriceObj.replaceSpec || !this.sayPriceObj.replaceSpec.length) {
+          this.validSayPrice.replaceSpec = false
+          this.onRemind('请填写替代物料规格')
+        } else {
+          this.validSayPrice.replaceSpec = true
+        }
+      },
       onReplyPriceInput: function (index) {
         this.sayPriceObj.replies[index].price = this.sayPriceObj.replies[index].price.replace(/[^\-?\d.]/g, '')
         let price = this.sayPriceObj.replies[index].price
@@ -280,6 +339,7 @@
         this.validSayPrice.repliesLapQty = true
         this.validSayPrice.repliesPrice = true
         this.validSayPrice.leadtime = true
+        let validReplace = this.sayType === 'replace' ? this.validSayPrice.replaceBrand && this.validSayPrice.replaceCmpCode && this.validSayPrice.replaceSpec : true
         for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
           if (!this.sayPriceObj.replies[i].lapQty || !/^[0-9]+([.]{1}[0-9]+)?$/.test(this.sayPriceObj.replies[i].lapQty) || this.sayPriceObj.replies[i].lapQty === '') {
             this.validSayPrice.repliesLapQty = false
@@ -292,11 +352,15 @@
         if (!this.sayPriceObj.leadtime || !/^\d+$/.test(this.sayPriceObj.leadtime) || this.sayPriceObj.leadtime === '') {
           this.validSayPrice.leadtime = false
         }
-        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice
+        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice && validReplace
       },
       onRemind: function (str) {
         this.remindText = str
         this.timeoutCount ++
+      },
+      setSayType: function (type) {
+        this.sayType = type
+        this.resetSayPrice()
       }
     }
   }
@@ -317,10 +381,13 @@
         width: 100%;
         overflow: hidden;
         height: 90%;
+        .base-info {
+          margin-bottom: .12rem;
+        }
         .form-list {
           /*height: 7.53rem;*/
-          background: #fff;
-          padding-top: .2rem;
+          /*background: #fff;*/
+          /*padding-top: .2rem;*/
           padding-bottom: 0.4rem;
           > div {
             height: .7rem;
@@ -340,6 +407,7 @@
               border: 1px solid #666;
               border-radius: .05rem;
               padding: 0 .07rem 0 .17rem;
+              background: #fff;
               .fl {
                 span {
                   color: #666;
@@ -399,6 +467,16 @@
                 width: 4.6rem;
               }
             }
+            &.replace {
+              span {
+                display: inline-block;
+                width: .66rem;
+                text-align: left;
+              }
+              input {
+                width: 5.1rem;
+              }
+            }
           }
           .say-price-btn {
             width: 6.44rem;

components/mobile/applyPurchase/SayPriceInfo.vue

@@ -2,7 +2,7 @@
   <div class="mobile-modal" @touchmove="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">
-        查看报价
+        {{sayInfoTitle}}
         <!--{{purchaseDetail.agreed == 1 || agreed == 1 ? '已采纳' : '已报价'}}-->
         <i class="icon-guanbi iconfont" @click="cancel"></i>
       </div>
@@ -47,7 +47,11 @@
                 联系电话：<span>{{purchaseDetail.userTel || '-'}}</span>
               </div>
             </div>-->
-            <div class="base-info say-info say" :class="{'long': item.showRefuseList}" v-for="(item, index) in qutationsTemp">
+            <ul class="switch-say">
+              <li class="inline-block" :class="{'active': sayType == 'current'}" @click="setSayType('current')">当前型号报价</li>
+              <li class="inline-block" :class="{'active': sayType == 'replace'}" @click="setSayType('replace')">替代型号报价</li>
+            </ul>
+            <div class="base-info say-info say" :class="{'long': item.showRefuseList}" v-for="(item, index) in qutationsTemp" v-if="(sayType == 'current' && item.isReplace != 1) || (sayType == 'replace' && item.isReplace == 1)">
           <!--    <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex == index" src="/images/mobile/@2x/applyPurchase/say-price-check.png" alt="">
               <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex != index" src="/images/mobile/@2x/applyPurchase/say-price-default.png" alt="">
               <img v-if="item.agreed == 1" src="/images/mobile/@2x/applyPurchase/say-price-accept.png" alt="">-->
@@ -57,17 +61,41 @@
                 <img src="/images/mobile/center/accept.png" alt="" v-if="item.agreed == 1">
                 <img src="/images/mobile/center/refuse.png" alt="" v-if="item.agreed == 0">
               </div>
-              <div class="content-line">
-                报价人：<span v-if="item.user">{{item.user.userName}}</span>
-                <span v-else>-</span>
-              </div>
-              <div class="content-line">
-                电话：<span v-if="item.user">{{item.user.userTel}}</span>
-                <span v-else>-</span>
-              </div>
-              <div class="content-line date">
-                交期(天)：<span>{{item.leadtime}}</span>
-              </div>
+              <template v-if="item.isReplace == 1">
+                <div class="content-line">
+                  品牌：<span>{{item.replaceBrand || '-'}}</span>
+                </div>
+                <div class="content-line">
+                  型号：<span>{{item.replaceCmpCode || '-'}}</span>
+                </div>
+                <div class="content-line">
+                  规格：<span>{{item.replaceSpec || '-'}}</span>
+                </div>
+                <div class="content-line">
+                  报价人：<span v-if="item.user">{{item.user.userName}}</span>
+                  <span v-else>-</span>
+                </div>
+                <div class="content-line date">
+                  交期(天)：<span>{{item.leadtime}}</span>
+                </div>
+                <div class="content-line">
+                  电话：<span v-if="item.user">{{item.user.userTel}}</span>
+                  <span v-else>-</span>
+                </div>
+              </template>
+              <template v-else>
+                <div class="content-line">
+                  报价人：<span v-if="item.user">{{item.user.userName}}</span>
+                  <span v-else>-</span>
+                </div>
+                <div class="content-line">
+                  电话：<span v-if="item.user">{{item.user.userTel}}</span>
+                  <span v-else>-</span>
+                </div>
+                <div class="content-line date">
+                  交期(天)：<span>{{item.leadtime}}</span>
+                </div>
+              </template>
               <div class="content-line date">
                 报价时间：<span>{{item.offerTime | date}}</span>
               </div>
@@ -163,15 +191,37 @@
               </div>
             </div>-->
             <div class="base-info say-info">
-              <div class="content-line inline-block">
-                报价人：<span>{{purchaseDetail.user ? purchaseDetail.user.userName : '-'}}</span>
-              </div>
-              <div class="content-line inline-block">
-                电话：<span>{{purchaseDetail.user ? purchaseDetail.user.userTel : '-'}}</span>
-              </div>
-              <div class="content-line inline-block date">
-                交期(天)：<span>{{purchaseDetail.leadtime}}</span>
-              </div>
+              <template v-if="purchaseDetail.isReplace == 1">
+                <div class="content-line inline-block">
+                  品牌：<span>{{purchaseDetail.replaceBrand || '-'}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  型号：<span>{{purchaseDetail.replaceCmpCode || '-'}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  规格：<span>{{purchaseDetail.replaceSpec || '-'}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  报价人：<span>{{purchaseDetail.user ? purchaseDetail.user.userName : '-'}}</span>
+                </div>
+                <div class="content-line inline-block date">
+                  交期(天)：<span>{{purchaseDetail.leadtime}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  电话：<span>{{purchaseDetail.user ? purchaseDetail.user.userTel : '-'}}</span>
+                </div>
+              </template>
+              <template v-else>
+                <div class="content-line inline-block">
+                  报价人：<span>{{purchaseDetail.user ? purchaseDetail.user.userName : '-'}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  电话：<span>{{purchaseDetail.user ? purchaseDetail.user.userTel : '-'}}</span>
+                </div>
+                <div class="content-line inline-block date">
+                  交期(天)：<span>{{purchaseDetail.leadtime}}</span>
+                </div>
+              </template>
               <div class="content-line inline-block date">
                 报价时间：<span>{{purchaseDetail.offerTime | date}}</span>
               </div>
@@ -220,7 +270,10 @@
         remindText: '',
         timeoutCount: 0,
         qutationsTemp: [],
-        refusereason: ''
+        refusereason: '',
+        sayType: 'current',
+        currentCount: 0,
+        replaceCount: 0
       }
     },
     components: {
@@ -248,13 +301,19 @@
       purchaseDetail () {
         let obj = {}
         if (this.isBuyer) {
+          this.replaceCount = 0
+          this.currentCount = 0
           obj = this.baseUtils.deepCopy(this.$store.state.applyPurchase.purchaseManList.buyerInquiryDetail.data)
           if (obj.qutations) {
             this.qutationsTemp = obj.qutations
             for (let i = 0; i < this.qutationsTemp.length; i++) {
               this.$set(this.qutationsTemp[i], 'showRefuseList', false)
+              this.qutationsTemp[i].isReplace === 1 ? this.replaceCount++ : this.currentCount++
             }
           }
+          if (this.currentCount === 0) {
+            this.sayType = 'replace'
+          }
         } else {
           obj = this.$store.state.applyPurchase.purchaseManList.vendorInquiryDetail.data
         }
@@ -265,6 +324,13 @@
       },
       isBuyer () {
         return this.$route.query.type === 'buyer' || this.userType === 'buyer'
+      },
+      sayInfoTitle () {
+        if (this.isBuyer) {
+          return this.sayType === 'current' ? '当前型号报价' : '替代型号报价'
+        } else {
+          return this.purchaseDetail.isReplace === 1 ? '替代型号报价' : '当前型号报价'
+        }
       }
     },
     methods: {
@@ -312,6 +378,13 @@
       setShowRefuseList: function (item, flag) {
 //        console.log(flag)
         item.showRefuseList = flag
+      },
+      setSayType: function (sayType) {
+        if ((sayType === 'current' && this.currentCount > 0) || (sayType === 'replace' && this.replaceCount > 0)) {
+          this.sayType = sayType
+        } else {
+          this.onRemind(`暂无${sayType === 'current' ? '当前型号报价' : '替代型号报价'}`)
+        }
       }
     },
     mounted() {
@@ -573,7 +646,7 @@
               margin-top: .1rem;
             }
             .price {
-              margin-top: .1rem;
+              margin-top: .2rem;
             }
           }
         }

components/product/CategoryNav.vue

@@ -2,35 +2,70 @@
   <div class="breadcrumbs container">
     <ul class="list-unstyled list-inline">
       <li class="crumb-item">
-        <nuxt-link :to="`/product/kind/home`">电子元器件</nuxt-link>
+        <nuxt-link :to="`/product/kind/home`">全部器件</nuxt-link><span class="arrow">> </span>
       </li>
-      <li class="crumb-item crumb-item-angle" v-for="k in actives">
-        <i class="angle"></i>
+      <li class="crumb-item crumb-item-angle" v-for="(k, index) in actives">
+        <!-- <i class="angle"></i>-->
         <nuxt-link :to="`/product/kind/${k.id}`">
-          <span :title="k.nameCn">{{k.nameCn}}</span> <i class="fa fa-angle-down"></i>
+          <span :title="k.nameCn">{{k.nameCn | nameFilter}}</span> <i class="fa fa-angle-down td-icon"></i>
         </nuxt-link>
-        <div class="crumb-drop" v-if="k.bothers">
+        <span v-if="index<actives.length-1" class="arrow">> </span>
+        <div class="crumb-drop crumb-drop-angle" v-if="k.bothers">
+          <div><i class="angle"></i></div>
           <ul class="list-unstyled list-inline" role="menu">
-            <li v-for="b in k.bothers"><nuxt-link :to="`/product/kind/${b.id}`">{{b.nameCn}}</nuxt-link></li>
+            <li v-for="(b, index) in k.bothers" :style="index == k.bothers.length-1?'border-right: none;': ''"><nuxt-link :to="`/product/kind/${b.id}`"><span>{{b.nameCn}}</span> </nuxt-link></li>
           </ul>
         </div>
         <i class="icon-glass"></i>
       </li>
     </ul>
+    <div class="breadcrumbs-children" v-if="firstChildrenKinds.length">
+      <div class="inline-block text-ellipse" v-for="item in firstChildrenKinds">
+        <nuxt-link :to="`/product/kind/${item.id}`" class="item" :title="item.nameCn">{{item.nameCn}}</nuxt-link>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
   export default {
+    filters: {
+      nameFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      }
+    },
     computed: {
       actives () {
         return this.$store.state.product.kind.kindsParentWithBother.data
+      },
+      firstChildrenKinds () {
+        return this.$store.state.product.kind.firstChildren.data
       }
     }
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   /* breadcrumbs */
   .breadcrumbs {
     margin-top: 20px;
@@ -41,75 +76,134 @@
   }
   .breadcrumbs ul.list-inline.list-unstyled li.crumb-item {
     position: relative;
-    padding-left: 0px;
-    padding-right: 0px;
-    padding-bottom: 1px;
-    height: 32px;
+    padding: 0;
+    height: 30px;
     line-height: 30px;
-    background: #fff;
-    border: solid 1px #6493ff;
+    span{
+      padding: 0;
+    }
   }
-  .breadcrumbs ul li.crumb-item-angle {
+/*  .breadcrumbs ul li.crumb-item-angle {
     margin-left: -5px;
-  }
+  }*/
   .breadcrumbs ul li.crumb-item>a {
+    border: 1px solid #ddd;
     display: inline-block;
-    width: 100%;
-    height: 100%;
-    padding-left: 15px;
-    padding-right: 15px;
+    background: #fff;
+ /*   height: 30px;
+    line-height: 30px;*/
+    padding-left: 10px;
+    padding-right: 10px;
     cursor: pointer;
     text-decoration: none;
-    color: #323232;
-    font-size: 16px;
+    color: #666;
+    font-size: 14px;
   }
   .breadcrumbs ul li.crumb-item:hover>a span,.breadcrumbs ul li.crumb-item:hover>a i{
-    color: #5078cb;
+    color: #0056d7;
   }
-  .breadcrumbs ul li.crumb-item>a i{
+  /*.breadcrumbs ul li.crumb-item>a i{
     margin-right: 10px;
-  }
+  }*/
   .breadcrumbs ul li.crumb-item:hover>a i{
     transform: rotate(-180deg);
   }
-  .breadcrumbs ul li.crumb-item .angle {
-    position: absolute;
-    left: -6px;
-    top: 50%;
-    margin-top: -5px;
+  .crumb-drop-angle div{
+    width: 133px;
     height: 10px;
-    width: 10px;
-    border-bottom: 1px solid #6493ff;
-    border-left: 1px solid #6493ff;
-    background: white;
-    transform: rotate(45deg);
-    -ms-transform: rotate(45deg); 	/* IE 9 */
-    -moz-transform: rotate(45deg); 	/* Firefox */
-    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-    -o-transform: rotate(45deg); 	/* Opera */
-    z-index: 14;
-  }
-  .breadcrumbs ul li.crumb-item .crumb-drop {
+    display: none;
+  }
+  /* .crumb-drop-angle .angle {
+     position: absolute;
+     background-color: #404040;
+     opacity: 0.6;
+     left: 35px;
+     top: 32px;
+     height: 10px;
+     width: 10px;
+     transform: rotate(45deg);
+     -ms-transform: rotate(45deg); 	!* IE 9 *!
+     -moz-transform: rotate(45deg); 	!* Firefox *!
+     -webkit-transform: rotate(45deg); !* Safari 和 Chrome *!
+     -o-transform: rotate(45deg); 	!* Opera *!
+     display: none;
+     z-index: 98;
+   }*/
+  .crumb-drop-angle .angle{
+    position: absolute;
+    top: 29px;
+    left: 30px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 7px solid #404040;
+    z-index: 115;
+    opacity: 0.9;
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop ul{
+    padding: 15px 0px;
     position: absolute;
+    top: 36px;
     display: none;
-    left: -1px;
-    top: 30px;
-    border: #6493ff 1px solid;
-    background: #fff;
     z-index: 100;
-    width: 200px;
+    width: 403px;
+    background-color: #404040;
+    opacity: 0.9;
+    max-height: 170px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  /*滚动条样式*/
+  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 12px;     /*高宽分别对应横竖滚动条的尺寸*/
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 3px;
+    background: #606060;
+    border-left: 1px solid #0d0c0f;
+    border-right: 1px solid #0d0c0f;
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    border-radius: 0;
+    border: 1px solid #0d0c0f;
+    background: #161618;
   }
   .breadcrumbs ul li.crumb-item .crumb-drop li {
+    float: left;
     line-height: 20px;
+    height: 20px;
+    width: 133px;
+    border-right: 1px dashed #fff;
+    &:nth-child(3n){
+      border-right: none;
+    }
   }
-  .breadcrumbs ul li.crumb-item .crumb-drop li a{
-    font-size: 12px;
+  .breadcrumbs ul li.crumb-item .crumb-drop li a {
+    display: inline-block;
+    font-size: 14px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    color: #fff;
+    padding-left: 10px;
+    &:hover{
+      color: rgba(255,255,255,0.5);
+      border: none;
+      span{
+        color: rgba(255,255,255,0.5);
+        text-decoration: underline;
+      }
+    }
   }
   li{
     list-style: none;
   }
   .breadcrumbs ul li.crumb-item:hover .crumb-drop {
-    display: block;
+    ul, div ,.angle{
+      display: block;
+    }
   }
 
   .breadcrumbs ul li.crumb-item:hover>a {
@@ -121,7 +215,8 @@
     color: #323232;
   }
   .breadcrumbs ul li.crumb-item a:hover{
-    color: #5078cb;
+    color: #0056d7;
+    border: 1px solid #0056d7;
   }
   /* sl_warp */
   .main-content .sl-wrap .sl-key>span {
@@ -299,6 +394,12 @@
   .div-table-right table thead tr td:hover span{
     color: #5078cb;
   }
+  .td-icon{
+    font-size: 20px;
+    position: relative;
+    top: 2px;
+    margin-left: 4px;
+  }
   .div-table-right table thead tr td:hover span.fa-angle-down{
     transform: rotate(-180deg);
   }
@@ -325,4 +426,28 @@
     text-overflow: ellipsis;
     float: left;
   }
+  .breadcrumbs-children {
+    padding: 20px 0;
+    background: #fff;
+    border: 1px solid #ddd;
+    max-height: 130px;
+    overflow-y: auto;
+    .inline-block {
+      width: 20%;
+      text-align: center;
+      padding: 0 5px;
+      &:nth-child(n + 6) {
+        margin-top: 20px;
+      }
+      .item {
+        color: #666;
+        &:hover {
+          color: #f54802;
+        }
+      }
+    }
+  }
+  .arrow {
+    margin: 0 6px;
+  }
 </style>

components/product/CategoryProperty.vue

@@ -2,19 +2,19 @@
   <div class="main-content container">
     <div class="selector" v-if="kind && !kind.leaf">
       <div class="sl-wrap" >
-        <div class="sl-key">
+        <!--<div class="sl-key">
           <span>分类：</span>
-        </div>
+        </div>-->
         <div class="sl-value">
           <ul class="list-inline">
             <li v-for="c in children" :title="c.nameCn">
-              <nuxt-link :to="`/product/kind/${c.id}`">{{c.nameCn}}</nuxt-link>
+              <nuxt-link :to="`/product/kind/${c.id}`"><span>{{c.nameCn}}</span></nuxt-link>
             </li>
           </ul>
         </div>
       </div>
     </div>
-    <div class="div-table" split-dropdown v-if="kind && kind.leaf">
+    <!--<div class="div-table" split-dropdown v-if="kind && kind.leaf">
       <div class="div-table-left">
         <table class="table table-bordered">
           <thead >
@@ -22,7 +22,7 @@
             <td class="td-width dropdown">
               <span  class="dropdown-toggle dropdown-back" data-toggle="dropdown">品牌<span class="fa fa-angle-down td-icon"></span></span>
               <ul class="dropdown-menu parameter-selection-ul" role="menu" aria-labelledby="dropdownMenu1" style="top: 38px;">
-                <!--orderBy:'nameCn'-->
+                &lt;!&ndash;orderBy:'nameCn'&ndash;&gt;
                 <li v-for="b in brands"><a @click="selectBrand(b)"><span>{{b.nameCn}}</span></a></li>
               </ul>
             </td>
@@ -77,7 +77,7 @@
               </a>
             </li>
           </ul>
-    </div>
+    </div>-->
   </div>
 </template>
 
@@ -182,7 +182,7 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .clear, .clr {
     clear: both;
   }
@@ -300,8 +300,7 @@
   .main-content .selector {
     color: #666;
     border: 1px solid #ddd;
-    border-top: #6493ff 2px solid;
-    margin-bottom: 30px;
+    /*border-top: #6493ff 2px solid;*/
     padding: 10px 0;
   }
 
@@ -309,6 +308,7 @@
     position: relative;
     line-height: 22px;
     padding: 5px 0;
+    /*border: 1px solid red;*/
   }
 
   .main-content .sl-wrap .sl-key {
@@ -323,16 +323,51 @@
   }
 
   .main-content .sl-wrap .sl-value {
-    margin-left: 110px;
+    max-height: 117px;
     overflow-y: auto;
+    overflow-x: hidden;
+    padding-left: 10px;
+  }
+  /*滚动条样式*/
+  .main-content .sl-wrap .sl-value::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
+  }
+  .main-content .sl-wrap .sl-value::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 3px;
+    background: #ccc;
+    border-left: 1px solid #f1f1f1;
+    border-right: 1px solid #f1f1f1;
+  }
+  .main-content .sl-wrap .sl-value::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    border-radius: 0;
+    border: 1px solid #f1f1f1;
+    background: #f1f1f1;
+  }
+  .main-content .sl-wrap .sl-value ul {
+    width: 100%;
+    padding-top: 5px;
+  }
+  .main-content .sl-wrap .sl-value ul li {
+    width: 20% !important;
+    text-align: center;
   }
-
   .main-content .sl-wrap .sl-value ul li a{
-    color: #323232;
+    color: #333;
     font-size: 14px;
+    span{
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
   }
   .main-content .sl-wrap .sl-value ul li a:hover{
-    color: #5078cb;
+    color: #f54802;
+    span{
+      color: #f54802;
+      text-decoration: underline;
+    }
   }
   .main-content .sl-wrap .sl-value .sl-selected {
     display: inline-block;

components/product/ComponentGoods.vue

@@ -8,45 +8,52 @@
     <table class="product-list">
       <thead>
       <tr style="height: 40px;">
-        <th width="80"></th>
-        <th width="150">品牌/类目/型号/规格</th>
+        <th width="180">品牌/类目/型号/规格</th>
         <th width="100">包装/生产日期</th>
-        <th width="130">库存</th>
-        <th width="90">梯度/pcs</th>
-        <th width="90">香港交货<span style="font-size: 12px;">($)</span></th>
-        <th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>
-        <th width="90">交期(天)</th>
+        <th width="120">商家名称</th>
+        <th width="110">库存</th>
+        <th width="210">价格梯度(PCS)</th>
+        <th width="100">交期(天)</th>
         <th width="100">操作</th>
       </tr>
       </thead>
       <tbody id="productList-content">
       <!--| orderBy : dir + orderType  ng-class="{'tr-even' : !compGoods.isOdd}"-->
       <tr v-for="compGoods in componentGoods.content">
-        <td style="position: relative">
-          <img class="sellout-flag" v-if="compGoods.status === 602" src="/images/search/sellout-search.png" alt="">
-          <!--store/{{compGoods.storeId}}#/batchInfo/{{compGoods.batchCode}}-->
-          <nuxt-link v-if="compGoods.batchCode" :to="`/store/productDetail/${compGoods.batchCode}`" target="_blank">
-            <img :src="compGoods.img?compGoods.img:compGoods.brand&&compGoods.brand.logoUrl?compGoods.brand.logoUrl:'/images/all/default.png'"/>
+        <!--<td>
+          &lt;!&ndash;store/{{compGoods.storeId}}#/batchInfo/{{compGoods.batchCode}}&ndash;&gt;
+          <nuxt-link v-if="compGoods.batchCode" :to="`/store/${compGoods.storeId}/${compGoods.batchCode}`" target="_blank">
+            <img :src="compGoods.img?compGoods.img:'/images/all/default.png'"/>
           </nuxt-link>
-            <img v-if="!compGoods.batchCode" :src="compGoods.img?compGoods.img:compGoods.brand&&compGoods.brand.logoUrl?compGoods.brand.logoUrl:'/images/all/default.png'"/>
-          <!--store/{{compGoods.storeId}}#/home-->
+          <img v-if="!compGoods.batchCode" :src="compGoods.img || '/images/all/default.png'"/>
+          &lt;!&ndash;store/{{compGoods.storeId}}#/home&ndash;&gt;
           <nuxt-link :to="'/store/' + compGoods.storeId" class="contact" :title="compGoods.storeName" target="_blank">{{compGoods.storeName}}</nuxt-link>
-        </td>
+        </td>-->
         <td class="brand-code">
-          <div class="brand" v-if="compGoods.brand.nameEn"><nuxt-link :to="`/product/brand/${compGoods.brand.uuid}/`" title="compGoods.brand.nameEn">{{compGoods.brand.nameEn}}</nuxt-link></div>
+          <div class="brand" v-if="compGoods.brand.nameEn"><nuxt-link :to="`/product/brand/${compGoods.brand.uuid}/`" :title="compGoods.brand.nameEn">{{compGoods.brand.nameEn | nameFilter}}</nuxt-link></div>
           <div class="brand" v-if="!compGoods.brand.nameEn">—</div>
-          <div class="brand">
-            <nuxt-link v-if="compGoods.kind&&compGoods.kind.nameCn" :to="`/product/kind/${compGoods.kindid}`" v-text="compGoods.kind.nameCn"></nuxt-link>
-          </div>
-          <div v-if="!compGoods.kind||!compGoods.kind.nameCn">{{compGoods.kindName || '—'}}</div>
-          <div class="code" v-if="compGoods.code"><nuxt-link :to="`/product/component/${compGoods.uuid}/`" :title="compGoods.code">{{compGoods.code}}</nuxt-link></div>
+          <div class="list" v-if="compGoods.kind"><nuxt-link :to="`/product/kind/${compGoods.kind.id}`" :title="compGoods.kind.nameCn">{{compGoods.kind.nameCn | listFilter}}</nuxt-link></div>
+          <div class="list" v-if="!compGoods.kind">—</div>
+          <div class="code" v-if="compGoods.code"><nuxt-link :to="`/product/component/${compGoods.uuid}/`" :title="compGoods.code">{{compGoods.code | codeFilter}}</nuxt-link></div>
           <div class="code" v-if="!compGoods.code">—</div>
-          <div class="brand" style="width: 160px;">{{compGoods.spec || '—'}}</div>
+          <div class="code" :title="compGoods.spec"><span class="text-ellipse inline-block fl" style="width: 160px">{{compGoods.spec || '-'}}</span></div>
         </td>
         <td>
           <div class="package" v-if="compGoods.packaging">{{compGoods.packaging}}</div>
+          <div class="package" v-if="!compGoods.packaging && compGoods.produceDate">—</div>
           <div v-if="!compGoods.produceDate && !compGoods.packaging">—</div>
           <div class="date" v-if="compGoods.produceDate">{{compGoods.produceDate}}</div>
+          <div class="date" v-if="!compGoods.produceDate && compGoods.packaging">—</div>
+        </td>
+        <td class="merchantName">
+          <div v-if="!compGoods.storeName" style="margin-top: 20px;">—</div>
+          <!--<div v-for="price in compGoods.prices">
+            &lt;!&ndash;| number&ndash;&gt;
+            <span>{{price.start}}</span> +
+          </div>-->
+          <div v-if="compGoods.storeName">
+            <nuxt-link :to="'/store/' + compGoods.storeId" class="contact" :title="compGoods.storeName" target="_blank"><span>{{compGoods.storeName | storeNameFilter}}</span></nuxt-link>
+          </div>
         </td>
         <td class="text-left">
           <div class="goods" v-if="compGoods.reserve">
@@ -54,45 +61,42 @@
           </div>
           <div v-if="!compGoods.reserve" style="text-align: center;margin-left: 0;"><span>—</span></div>
           <div class="from" v-if="compGoods.reserve && compGoods.reserve > 0">
-            最小起订量：<span v-if="compGoods.minBuyQty">{{compGoods.minBuyQty}}</span>
+            起拍：<span v-if="compGoods.minBuyQty">{{compGoods.minBuyQty}}</span>
           </div>
           <!--<div class="multiple" v-if="compGoods.reserve > 0">
             倍数：<span>{{compGoods.minPackQty}}</span>
           </div>-->
-          <div class="can-div-sell" v-if="compGoods.reserve && compGoods.breakUp" v-text="compGoods.breakUp?'可拆卖':'不可拆卖'"></div>
+          <div class="can-div-sell" v-if="compGoods.reserve" v-text="compGoods.breakUp?'可拆卖':''"></div>
         </td>
         <td>
           <div v-if="!compGoods.prices">
             <span>—</span>
           </div>
-          <div v-for="price in compGoods.prices">
-            <!--| number-->
-            <span>{{price.start}}</span> +
-          </div>
-        </td>
-        <td>
-          <div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('USD')==-1) || !compGoods.prices">
-            <span>—</span>
+          <div class="amount">
+            <div v-for="price in compGoods.prices"><span>{{price.start}}</span> +</div>
           </div>
-          <div v-for="price in compGoods.prices">
-            <!--| formateNumber : 6-->
-            <span>{{price.uSDPrice | currency}}</span>
-          </div>
-        </td>
-        <td>
-          <div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('RMB')==-1) || !compGoods.prices">
-            <span>—</span>
-          </div>
-          <div v-for="price in compGoods.prices">
-            <!--formateNumber : 6-->
-            <span>{{price.rMBPrice | currency}}</span>
+          <!-- <div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('USD')==-1) || !compGoods.prices">
+             <span>—</span>
+           </div>
+           <div v-for="price in compGoods.prices">
+             &lt;!&ndash;| formateNumber : 6&ndash;&gt;
+             <span>{{price.uSDPrice | currency}}</span>
+           </div>-->
+          <div class="price">
+            <!--<div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('RMB')==-1) || !compGoods.prices">
+              <span>—</span>
+            </div>-->
+            <div v-for="price in compGoods.prices">
+              <!--formateNumber : 6-->
+              <span>￥{{price.rMBPrice | currency}}</span>
+            </div>
           </div>
         </td>
         <td>
           <div v-if="!compGoods.b2cMinDelivery">
             <span>—</span>
           </div>
-          <div v-if="compGoods.b2cMinDelivery">交期：<span v-if="compGoods.b2cMinDelivery != compGoods.b2cMaxDelivery">{{compGoods.b2cMinDelivery + '-' + compGoods.b2cMaxDelivery}}</span>
+          <div v-if="compGoods.b2cMinDelivery"><span v-if="compGoods.b2cMinDelivery != compGoods.b2cMaxDelivery">{{compGoods.b2cMinDelivery + '-' + compGoods.b2cMaxDelivery}}</span>
             <span v-if="compGoods.b2cMinDelivery == compGoods.b2cMaxDelivery">{{compGoods.b2cMinDelivery}}</span>
           </div>
         </td>
@@ -101,21 +105,13 @@
             <span>—</span>
           </div>
           <div v-if="compGoods.reserve > 0">
-            <buy :item="compGoods" :disabledFlag="compGoods.status === 602"></buy>
+            <buy :item="compGoods" :btnColor="'#3975f4'"></buy>
           </div>
         </td>
       </tr>
       <tr v-if="componentGoods.totalElements == 0">
-        <td colspan="12">
-          <div class="empty">
-            <p class="empty-img">
-              <img src="/images/brandList/empty-cart.png">
-            </p>
-            <div class="empty-info">
-              <p class="grey"> 暂无产品信息 </p>
-              <a href="javascript:history.go(-1)"><i class="fa fa-mail-reply fa-xs"></i>返回上一页</a>
-            </div>
-          </div>
+        <td colspan="10" class="text-center" style="line-height: 40px; font-size: 20px;">
+          <i class="fa fa-smile-o fa-lg"></i> 暂无产品信息
         </td>
       </tr>
       </tbody>
@@ -158,6 +154,98 @@
       }
     },
     filters: {
+      nameFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      },
+      codeFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      },
+      listFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      },
+      storeNameFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      },
       currency: function (num) {
         if (typeof num === 'number') {
           if (num <= 0.000001) {
@@ -188,6 +276,7 @@
         return null
       },
       handlerCurrentNode (data, node) {
+        console.log(this.pageParams)
         this.pageParams.page = 1
         this.pageCmpGoods(this.pageParams)
       },
@@ -216,49 +305,13 @@
   }
 </script>
 
-<style scoped>
-  /**/
-  .product-list tbody>tr .empty{
-    overflow: hidden;
-    margin: 0!important;
-    height:130px;
-    display:inline-flex;
-    align-items: center;
-  }
-  .product-list tbody>tr .empty .empty-img{
-    margin:0;
-    border:0;
-    min-width:143px;
-    min-height:72px;
-  }
-  .product-list tbody>tr .empty .empty-img img {
-    margin: 0;
-    border: 0;
-    min-width: 143px;
-    min-height: 72px;
-  }
-  .product-list tbody>tr .empty-info{
-    line-height: 14px;
-    width: 143px;
-  }
-  .product-list tbody>tr .grey{
-    color: #999;
-    font-size: 14px;
-  }
-  .product-list tbody>tr .empty .empty-info>a{
-    font-size: 14px;
-    color: #5078cb;
-  }
-  .product-list tbody>tr .empty .empty-info i{
-    margin-right:5px;
-  }
+<style lang="scss" scoped>
   .product-list{
     width: 1190px;
     margin-bottom: 20px;
   }
   .product-list thead tr{
-    border-top: #6493ff 2px solid;
-    color: #323232;
+    color: #333;
     background: none;
   }
   /* 物品列表 */
@@ -266,27 +319,48 @@
     font-size: 14px;
     text-align: center;
   }
-
-  .product-list .brand-code .code {
-    font-weight: 600;
+  .product-list .brand-code .code,.product-list .brand-code .brand,.product-list .brand-code .list {
+    width: 80%;
+    margin: 0 auto;
+    text-align: center;
+    a {
+      color: #333;
+      &:hover{
+        font-weight: 600;
+        color: #3975f4;
+      }
+    }
   }
-
   .product-list th {
     color: rgb(50,50,50);
     font-size: 14px;
     font-weight: 600;
-    background-color: #f7f7f7;
+    background-color: #edf3ff;
     text-align: center;
+    height: 46px;
+  }
+  .product-list .merchantName{
+    span {
+      color: #333;
+      &:hover{
+        font-weight: 600;
+        color: #3975f4;
+      }
+    }
   }
-
   .product-list tbody>tr {
-    border: 1px solid #e8e8e8;
+    border: 1px solid #d4e1ff;
+    background: #fff;
+  }
+  .product-list tbody>tr:hover {
+    background: #f9fbff;
   }
+
   .product-list tbody>tr img {
     border: 1px solid #e8e8e8;
     margin: 10px 0 5px 0;
-    max-width: 36px;
-    max-height: 36px;
+    width: 36px;
+    height: 36px;
   }
   .product-list tbody>tr .contact{
     font-size: 14px;
@@ -300,10 +374,11 @@
   }
 
   .product-list td {
-    font-size: 12px;
+    font-size: 14px;
     /*color: #333;*/
     text-align: center;
     line-height: 20px;
+    height: 100px;
   }
   .product-list td a{
     color: #337ab7;
@@ -317,33 +392,38 @@
   }
 
   /* 物品列表按钮 */
-  .product-list .btn-buy-now {
-    background-color: #5078CB;
+  .btn-buy-now {
+    background-color: #3975f4!important;
     color: #fff;
     width: 80px;
     height: 30px;
     font-size: 12px;
-    border: 1px solid #5078cb;
+    border: 1px solid #3975f4!important;;
   }
 
-  .product-list .btn-add-cart {
+  .btn-add-cart {
     margin-top: 10px;
-    color: #214797;
+    color: #3975f4!important;
     width: 80px;
     height: 30px;
     font-size: 12px;
     background-color: #fff;
-    border: 1px solid #e8e8e8;
+    border: 1px solid #3975f4!important;
   }
   .product-list .btn-buy-now:hover{
     background: #214797;
   }
   .product-list .btn-add-cart:hover{
-    background-color: #5078CB;
+    background-color: #3975f4;
     color: #fff;
   }
   .product-list .text-left{
     text-align: left;
+    .goods {
+      span {
+        color: #f01010;
+      }
+    }
   }
   .product-list .text-left div{
     margin-left: 30px;
@@ -354,19 +434,30 @@
   .product-list tbody tr td .can-div-sell {
     color: #333;
   }
-  .product-list tbody tr td .sellout-flag {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    border: none;
+  .product-list tbody tr td .amount {
+    width: 60%;
+    float: left;
+    padding-left: 60px;
+    text-align: left;
+  }
+  .product-list tbody tr td .amount div:last-child, .product-list tbody tr td .price div:last-child{
+    color: #f01010;
+  }
+  .product-list tbody tr td .price {
+    width: 40%;
+    float:right;
+    text-align:left;
   }
   .search-record{
     width: 100%;
-    margin: 0 auto;
     height: 40px;
     font-size: 16px;
     line-height: 40px;
-    margin-top: 20px;
+    margin: 14px 0px;
+    background-color: #f1f1f1;
+    border-bottom: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+    padding-left: 10px;
   }
   .search-record span.red{
     color: #ff0909;

components/product/KindBox.vue

@@ -1,36 +1,37 @@
 <template>
-  <div class="container" style="width:1190px;padding: 0;">
-    <div style="background: #fff; z-index:10;">
-      <div class="box-first">
-        <div class="box-item">物料名称(类目)：</div>
-        <div class="box-kind">
+  <div class="component">
+    <div class="component-content">
+      <div class="box-first" id="box-first" >
+        <!-- <div class="box-item">类目：</div>-->
+        <div class="box-kind" :class="boxFirstFixed == true ? 'isFixed' :''">
           <ul id="letter-nav">
             <!--| orderBy : 'namelength'-->
-            <li class="text-num" v-for="kind in kinds">
-              <a :title="kind.nameCn"  @click="scrollTo(kind.id)">{{kind.nameCn}}</a>
+            <li class="text-num" v-for="(kind, index) in kinds" :style="index <= 6 || boxFirstFixed == true? 'border-bottom: 1px dashed #ccc;': 'border-bottom: 1px dashed #f1f4fb;'">
+              <img class="content-thumbnail-list" :src=imgList[index]><a :title="kind.nameCn"  @click="scrollTo(kind.id)">{{kind.nameCn}}</a>
             </li>
           </ul>
         </div>
       </div>
-      <div class="box-catagory" v-for="kind in kinds" style="clear: both">
+      <div class="showKindId"></div>
+      <div class="box-catagory clearfix" v-for="(kind, index) in kinds">
         <div class="box">
           <div class="box-title" :id="kind.id">
             <div class="box-smtitle">
               <div>
-                <nuxt-link :to="`/product/kind/${kind.id}`"><span :title="kind.nameCn">{{kind.nameCn}}</span></nuxt-link>
+                <nuxt-link :to="`/product/kind/${kind.id}`"> <img class="content-thumbnail" :src=kindLogo[index]><span :title="kind.nameCn">{{kind.nameCn}}</span></nuxt-link>
               </div>
             </div>
           </div>
           <div class="box-content">
             <div class="box-subcatagory">
               <div class="childkind" v-for="child in kind.children">
-                <dl class="dl-horizontal">
+                <dl class="dl-horizontal" style="background: #f1f4fb;">
                   <dt class="dt-title">
-                    <ul>
-                      <li>
-                        <nuxt-link :to="`/product/kind/${child.id}`" :title="child.nameCn"><span>{{child.nameCn}}</span></nuxt-link>
-                      </li>
-                    </ul>
+                  <ul>
+                    <li>
+                      <nuxt-link :to="`/product/kind/${child.id}`" :title="child.nameCn"><span>{{child.nameCn}}</span><i class="iconfont icon-arrow-right icon-sm pull-right"></i></nuxt-link>
+                    </li>
+                  </ul>
                   </dt>
                   <dd>
                     <ul class="list-unstyled list-inline">
@@ -40,6 +41,9 @@
                       <li  style="width: 35%" v-if="leaf.nameCn.length>15" v-for="leaf in child.children">
                         <nuxt-link :to="`/product/kind/${leaf.id}`" :title="leaf.nameCn">{{leaf.nameCn}}</nuxt-link>
                       </li>
+                      <li v-if="!child.children || !child.children.length">
+                        <span style="margin-left: 25%;">—</span>
+                      </li>
                     </ul>
                   </dd>
                 </dl>
@@ -56,30 +60,99 @@
   import { scrollTo } from '~utils/scroll'
   export default {
     name: 'kind-box',
+    data () {
+      return {
+        boxFirstFixed: false,
+        imgList: [
+          '/images/component/component-logo/component01.png',
+          '/images/component/component-logo/component02.png',
+          '/images/component/component-logo/component03.png',
+          '/images/component/component-logo/component04.png',
+          '/images/component/component-logo/component05.png',
+          '/images/component/component-logo/component06.png',
+          '/images/component/component-logo/component07.png',
+          '/images/component/component-logo/component08.png',
+          '/images/component/component-logo/component09.png',
+          '/images/component/component-logo/component010.png',
+          '/images/component/component-logo/component011.png',
+          '/images/component/component-logo/component012.png',
+          '/images/component/component-logo/component013.png',
+          '/images/component/component-logo/component014.png'
+        ],
+        kindLogo: [
+          '/images/component/component-logo/component001.png',
+          '/images/component/component-logo/component002.png',
+          '/images/component/component-logo/component003.png',
+          '/images/component/component-logo/component004.png',
+          '/images/component/component-logo/component005.png',
+          '/images/component/component-logo/component006.png',
+          '/images/component/component-logo/component007.png',
+          '/images/component/component-logo/component008.png',
+          '/images/component/component-logo/component009.png',
+          '/images/component/component-logo/component0010.png',
+          '/images/component/component-logo/component0011.png',
+          '/images/component/component-logo/component0012.png',
+          '/images/component/component-logo/component0013.png',
+          '/images/component/component-logo/component0014.png'
+        ]
+      }
+    },
     computed: {
       kinds () {
         return this.$store.state.product.kind.kinds.data
       }
     },
+    mounted () {
+      window.addEventListener('scroll', () => {
+        this.handleScroll()
+      })
+    },
     methods: {
+      handleScroll () {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+        var offsetTop = document.querySelector('#box-first').offsetTop
+        if (scrollTop > offsetTop) {
+          this.boxFirstFixed = true
+        } else {
+          this.boxFirstFixed = false
+        }
+      },
       scrollTo: function (el) {
-        scrollTo(document.getElementById(el), 10)
+        scrollTo(document.getElementById(el), 10, {offset: -58})
       }
     }
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .component{
+    width: 100%;
+    min-width:1190px;
+    padding: 0;
+    background: #efeeec;
+    .component-content{
+      width:1190px;
+      margin: 0 auto;
+    }
+  }
   .box {
     margin-bottom: 20px;
+    -webkit-box-shadow: 0 6px 10px #c8c8c8;
+    -moz-box-shadow: 0 6px 10px #c8c8c8;
+    box-shadow: 0 6px 10px #c8c8c8;
   }
   .box .box-title {
-    border-bottom: 4px solid #6493FF;
+    width: 100%;
+    height: 50px;
+    background-color: #689cff;
   }
   .box .box-smtitle span {
-    background-color: #6493FF;
-    line-height: 28px;
-    padding: 8px 30px;
+    display: inline-block;
+    text-align: left;
+    padding-left: 30px;
+    width: 186px;
+    height: 50px;
+    line-height: 50px;
     font-size: 14px;
     font-weight: 100;
   }
@@ -98,21 +171,63 @@
     margin: 0 auto;
   }
   .box .box-content .box-subcatagory {
-    background-color: #ffffff;
+    background-color: #f1f4fb;
     border-radius: 5px;
   }
   .box .box-content .box-subcatagory .childkind {
-    border-bottom: 1px solid #ccc;
-    border-bottom-style: dashed;
+    border-bottom: 1px dashed #ccc;
+  }
+  .box .box-content .box-subcatagory .childkind:last-child {
+    border-bottom: none;
   }
   .box .box-content .box-subcatagory dl, .box .box-content .box-subcatagory ul
   {
-    padding-bottom: 5px;
+    padding-bottom: 0px;
     margin-bottom: 0px;
+    background-color: #fff;
+  }
+  .content-thumbnail{
+    position: relative;
+    left: 20px;
+    top: -1px;
+  }
+  .content-thumbnail-list{
+    position: relative;
+    top: -2px;
   }
   .box .box-content .box-subcatagory dl dt {
-    width: 160px;
-    margin-left: 20px;
+    width: 186px;
+    height: 50px;
+    line-height: 50px;
+    text-align: left;
+    li {
+      float: left;
+      list-style: none;
+      width: 186px;
+      color: #fff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      .pull-right {
+        float: right!important;
+        padding-right: 12px;
+      }
+      .iconfont {
+        font-size: 16px;
+        font-style: normal;
+        color: #5079cb;
+        -webkit-font-smoothing: antialiased;
+      }
+    }
+    &:hover{
+      background-color: #3c7cf5;
+      .iconfont{
+        color: #fff;
+      }
+      span{
+        color: #fff;
+      }
+    }
   }
   .box .box-content .box-subcatagory dl dt span{
     width: 125px;
@@ -120,6 +235,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    padding-left: 20px;
+    color: #5079cb;
   }
   .box .box-content .box-subcatagory dl dt a {
     color: #000;
@@ -130,18 +247,18 @@
     color: #6493FF;
   }
   .box .box-content .box-subcatagory dl dd {
-    margin-left: 180px;
-    margin-bottom: 10px;
-    margin-top: 20px;
+    margin-left: 190px;
   }
   .box .box-content .box-subcatagory .list-inline {
     margin-left: 0;
+    padding-left: 7px;
   }
   .box .box-content .box-subcatagory .list-inline>li {
     width: 20%;
-    margin-bottom: 10px;
     vertical-align: top;
     font-size: 14px;
+    height: 50px;
+    line-height: 50px;
   }
   .box .box-content .box-subcatagory .list-inline>li a {
     color: #000;
@@ -149,36 +266,57 @@
     font-weight: 500;
   }
   .box .box-content .box-subcatagory .list-inline>li a:hover {
-    color: #6493FF;
+    color: #f54802;
+    span{
+      text-decoration: underline;
+      color: #f54802;
+    }
   }
-  .box-first {
-    margin-top: 10px;
+
+  .box-first{
+    .isFixed {
+      padding-top: 10px;
+      width: 1190px;
+      height: 106px!important;
+      margin: 0 auto;
+      position: fixed;
+      top: 0px;
+      margin-left: -1px;
+      z-index:999;
+      border: #c8c8c8 1px solid;
+      box-shadow: 0px 6px 10px #c8c8c8;
+    }
   }
-  .box-first .box-item {
+  /*.box-first .box-item {
     float: left;
-    /*width: 55px;*/
-    margin-left: 15px;
+    width: 55px;
+    margin-left: 30px;
     font-size: 14px;
     padding-top: 10px;
-  }
+  }*/
   .box-first .box-kind {
-    float: right;
-    width: 1050px;
-    /*margin-left: 50px;*/
+    height: 100px;
     font-size: 14px;
+    background-color: #f1f4fb;
   }
   #letter-nav ul, #letter-nav li {
     list-style-type: none;
   }
+  #letter-nav{
+    margin-top: -9px;
+  }
   #letter-nav li {
     float: left;
-    width: 130px;
-    margin-right: 12px;
-    margin-bottom: 15px;
-    padding: 5px;
+    width: 14.285%;
+    padding: 17px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: center;
+    &:hover{
+      border-bottom: 1px solid #5079cb !important;
+      background-color: #fff;
+    }
   }
   #letter-nav li a {
     color: #000;
@@ -186,29 +324,18 @@
     border-radius: 5px;
   }
   #letter-nav li a:hover {
-    color: #337ab7;
+    color: #333;
     cursor: pointer;
     text-decoration: none;
   }
-  .dl-horizontal .dt-title{
-    text-align:left;
-    margin-left: -20px;
-  }
-  .dt-title li{
-    float: left;
-    list-style: none;
-    max-width: 150px;
-    color: #fff;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
   .box-first{
-    border: #e8e8e8 1px solid;
-    width: 100%;
+    border: #c8c8c8 1px solid;
+    box-shadow: 0 6px 10px #c8c8c8;
+    width: 1190px;
     display: inline-block;
     margin-top: 16px;
     margin-bottom: 16px;
     padding-top: 10px;
+    min-height: 108px;
   }
 </style>

components/register-saler/register/StepThird.vue

@@ -561,7 +561,10 @@
                 })
               }
               )
-          })
+          }).catch((err) => {
+          console.log(err)
+          this.$message.error('开通卖家中心失败')
+        })
       },
       goProduct: function (baseUrl) {
         if (this.loginData.isSelf) {

pages/product/kind/_id.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="container">
-    <div v-if="actives.length">
-      <categroy-nav></categroy-nav>
-      <!--<category-property  @loadCmpGoodsByBrandEvent="listemBrandFilter" @loadCmpGoodsByTypeEvent="listemProTypeFilter"></category-property>-->
-      <component-goods :brandid="brandid" :propertyJSON="propertyJSON"></component-goods>
-    </div>
-    <div v-else>
-      <error-page :title="'类目'"></error-page>
+  <div class="kind-wrap">
+    <div class="container">
+      <div v-if="actives.length">
+        <categroy-nav></categroy-nav>
+        <!--<category-property  @loadCmpGoodsByBrandEvent="listemBrandFilter" @loadCmpGoodsByTypeEvent="listemProTypeFilter"></category-property>-->
+        <component-goods :brandid="brandid" :propertyJSON="propertyJSON"></component-goods>
+      </div>
+      <div v-else>
+        <error-page :title="'类目'"></error-page>
+      </div>
     </div>
   </div>
 </template>
@@ -25,7 +27,8 @@
     fetch ({store, route}) {
       return Promise.all([
         store.dispatch('product/loadKindParentsWithBothers', {id: route.params.id}),
-        // store.dispatch('product/loadKindBrands', {id: route.params.id}),
+        store.dispatch('product/loadKindFirstChild', {id: route.params.id}),
+        store.dispatch('product/loadKindBrands', {id: route.params.id}),
         store.dispatch('product/pageComGoods', {kindid: route.params.id})
       ])
     },
@@ -72,7 +75,10 @@
   }
 </script>
 
-<style>
+<style scoped>
+  .kind-wrap {
+    background: #f7f7f7;
+  }
   .container {
     position: relative;
     width: 1190px;

plugins/mixin.js

@@ -96,16 +96,20 @@ Vue.mixin({
     goStoreApply: function () {
       if (this.user.logged) {
         if (this.user.data.enterprise.uu) {
-          this.$http.get('/basic/vendor/transactionInfo').then(response => {
-            if (response.data.isOpenStore) {
-              window.location.href = '/vendor#/store/maintain'
-            } else {
-              window.location.href = '/vendor#/store-apply'
-            }
-          }, err => {
-            this.$message.error('该账户未开通卖家中心')
-            console.log(err)
-          })
+          if (this.user.data.enterprise.isVendor === 313) {
+            this.$http.get('/basic/vendor/transactionInfo').then(response => {
+              if (response.data.isOpenStore) {
+                window.location.href = '/vendor#/store/maintain'
+              } else {
+                window.location.href = '/vendor#/store-apply'
+              }
+            }, err => {
+              this.$message.error('获取开店信息失败')
+              console.log(err)
+            })
+          } else {
+            this.$router.push('/register-saler')
+          }
         } else {
           this.$router.push('/personalMaterial')
         }

store/product.js

@@ -115,6 +115,16 @@ export const actions = {
         commit('kind/GET_KINDPARENTSWITHBOTHERS_FAILURE', err)
       })
   },
+  loadKindFirstChild ({ commit }, params = {}) {
+    let id = params.id
+    commit('kind/REQUEST_KINDFIRSTCHILD', params)
+    return axios.get(`/api/product/kind/${id}/children`)
+      .then(response => {
+        commit('kind/GET_KINDFIRSTCHILD_SUCCESS', response.data)
+      }, err => {
+        commit('kind/GET_KINDFIRSTCHILD_FAILURE', err)
+      })
+  },
   loadKindBrands ({ commit }, params = {}) {
     let id = params.id
     commit('kind/REQUEST_KINDBRANDS')

store/product/kind.js

@@ -18,6 +18,10 @@ export const state = () => ({
   brands: {
     fetching: false,
     data: []
+  },
+  firstChildren: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -96,5 +100,15 @@ export const mutations = {
   },
   GET_KINDBRANDS_FAILURE (state) {
     state.brands.fetching = false
+  },
+  REQUEST_KINDFIRSTCHILD (state) {
+    state.firstChildren.fetching = true
+  },
+  GET_KINDFIRSTCHILD_SUCCESS (state, result) {
+    state.firstChildren.fetching = false
+    state.firstChildren.data = result
+  },
+  GET_KINDFIRSTCHILD_FAILURE (state) {
+    state.firstChildren.fetching = false
   }
 }