首页求购

components/applyPurchase/ApplyInfo.vue

@@ -55,35 +55,6 @@
             <!--<a @click="setLinkBoxIndex(index)">联系买家</a>-->
             <a v-if="purchaseMan.remainingTime > 0 && (!purchaseMan.quoted || purchaseMan.quoted != 1)" @click="sayPrice(purchaseMan, index)">我要报价</a>
             <div class="is-say-price" v-if="purchaseMan.remainingTime > 0 && purchaseMan.quoted == 1">已报价 <img src="/images/applyPurchase/green-check.png" alt="">
-              <!--<div class="say-price-history">
-                <p class="price-title">历史报价</p>
-                <div>
-                  <div>
-                    <span>交期：</span><span class="red-text">6 天</span>
-                  </div>
-                  <div>
-                    <span>附件：</span><a href="">下载</a>
-                  </div>
-                  <div class="pre-line">
-                    <span>规格：</span>2016-05-21
-                  </div>
-                  <p class="price-level">价格梯度</p>
-                  <ul>
-                    <li>
-                      <span>1333+</span>
-                      <span>$123123</span>
-                    </li>
-                    <li>
-                      <span>1333+</span>
-                      <span>$123123</span>
-                    </li>
-                    <li>
-                      <span>1333+</span>
-                      <span>$123123</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>-->
             </div>
           </div>
           <div class="expand-content">
@@ -126,62 +97,14 @@
         </li>
       </ul>
     </div>
-    <div class="modal-wrap" v-if="currentSayPriceIndex > -1">
-      <div class="say-price-box" >
-        <div class="title">
-          <div>型号：<span :title="purchaseManList.content[currentSayPriceIndex].cmpCode">{{purchaseManList.content[currentSayPriceIndex].cmpCode}}</span></div>
-          <div>品牌：<span :title="purchaseManList.content[currentSayPriceIndex].inbrand">{{purchaseManList.content[currentSayPriceIndex].inbrand}}</span></div>
-          <i class="fa fa-close" @click="cancelSayPrice"></i>
-        </div>
-        <div class="content">
-          <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>
-                <span><i>+</i>添加附件</span>
-                <input type="file">
-              </label>
-              &lt;!&ndash;<div>
-                <span>我是Excel的名字111</span>
-                <i class="fa fa-times-circle"></i>
-                <a href="">更换</a>
-              </div>&ndash;&gt;
-            </div>-->
-          </div>
-          <div class="content-line" v-for="(reply, index) in sayPriceObj.replies">
-            <div class="form-item form-left">
-              <span><i>*</i>价格梯度：</span>
-              <input type="number" class="form-control" @blur="onReplyLapQtyBlur(index)" @input="onReplyLapQtyInput(index)" v-model="reply.lapQty" placeholder="数量">
-              <!-- -
-               <input type="text" class="form-control" placeholder="数量">-->
-            </div>
-            <div class="form-item form-right">
-              <span><i>*</i>单价<span v-if="purchaseManList.content[currentSayPriceIndex].currency" v-text="purchaseManList.content[currentSayPriceIndex].currency == 'USD' ? '($)' : '(¥)'"></span>：</span>
-              <!--{{purchaseManList.content[currentSayPriceIndex].currency == 'USD' ? '$' : '¥'}})-->
-              <select v-if="!purchaseManList.content[currentSayPriceIndex].currency" v-model="sayPriceObj.currency">
-                <option value="RMB">¥</option>
-                <option value="USD">$</option>
-              </select>
-              <input type="number" class="form-control" @input="onReplyPriceInput(index)" @blur="onReplyPriceBlur(index)" placeholder="单价" v-model="reply.price">
-              <i class="fa fa-minus-circle" v-if="sayPriceObj.replies.length > 1" @click="setReplies('sub', index)"></i>
-              <i class="fa fa-plus-circle" v-if="sayPriceObj.replies.length < 5" @click="setReplies('add', index)"></i>
-            </div>
-          </div>
-        </div>
-        <div class="operate">
-          <span @click="commitSayPrice">确定</span>
-          <span @click="cancelSayPrice">取消</span>
-        </div>
-      </div>
-    </div>
+    <say-price :current="currentSayPriceIndex"
+               :purchase="purchaseManList"
+               @cancelSayPriceAction="cancelSayPrice"
+               @resetListAction="resetList"
+               @sayPriceIndexAction="setIndex(index)"
+    ></say-price>
     <page :total="totalCount" :page-size="pageSize"
           :current="nowPage" v-on:childEvent="listenPage"></page>
-    <loading v-show="showLoading"></loading>
     <div class="com-del-box link-saler-box" v-if="linkBoxIndex > -1">
       <div class="title">
         <i @click="setLinkBoxIndex(-1)"></i>
@@ -197,58 +120,22 @@
   </div>
 </template>
 <script>
-  //  let getRealLen = function (str) {
-  //    let len = 0
-  //    for (let i = 0; i < str.length; i++) {
-  //      if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
-  //        len += 2
-  //      } else {
-  //        len++
-  //      }
-  //    }
-  //    return len
-  //  }
-  //  let cutOutString = function (str, length) {
-  //    for (let i = 1; i <= str.length; i++) {
-  //      if (getRealLen(str.substr(0, i)) > length) {
-  //        str = str.substr(0, i - 1)
-  //        break
-  //      }
-  //    }
-  //    return str
-  //  }
   import Page from '~components/common/page/pageComponent.vue'
-  import Loading from '~components/common/loading/PageLoading.vue'
+  import SayPrice from './SayPrice.vue'
   export default {
     data () {
       return {
         pageSize: 10,
         nowPage: 1,
-        sayPriceObj: {
-          currency: 'RMB',
-          leadtime: '',
-          replies: [
-            {
-              lapQty: '',
-              price: ''
-            }
-          ]
-        },
-        validSayPrice: {
-          leadtime: false,
-          repliesPrice: false,
-          repliesLapQty: false
-        },
         keyWord: '',
         sorting: {},
-        showLoading: false,
         currentSayPriceIndex: -1,
         linkBoxIndex: -1
       }
     },
     components: {
       Page,
-      Loading
+      SayPrice
     },
     filters: {
       date: function (date) {
@@ -283,15 +170,15 @@
       }
     },
     methods: {
+      setIndex: function (index) {
+        this.currentSayPriceIndex = index
+      },
       getDay: function (timeStamp) {
         return Math.floor(timeStamp / (1000 * 60 * 60 * 24))
       },
       getHours: function (timeStamp) {
         return Math.floor((timeStamp / (1000 * 60 * 60)) % 24)
       },
-//      getPurchaseManName: function (purchaseMan) {
-//        return purchaseMan.enUu ? purchaseMan.userName : purchaseMan.userName.charAt(0) + '**'
-//      },
       listenPage: function (page) {
         this.nowPage = page
         this.resetList()
@@ -304,7 +191,7 @@
         if (this.user.logged) {
           if (this.user.data.enterprise.uu) {
             if (this.user.data.enterprise.isVendor && this.user.data.enterprise.isVendor !== '1690') {
-              this.resetSayPrice()
+//              this.resetSayPrice()
               purchaseMan.active = true
               this.currentSayPriceIndex = index
             } else {
@@ -321,204 +208,10 @@
         this.purchaseManList.content[this.currentSayPriceIndex].active = false
         this.currentSayPriceIndex = -1
       },
-      commitSayPrice: function () {
-        if (this.checkValid()) {
-          let purchaseMan = this.purchaseManList.content[this.currentSayPriceIndex]
-          this.showLoading = true
-          purchaseMan.leadtime = this.sayPriceObj.leadtime
-          purchaseMan.replies = this.sayPriceObj.replies
-          purchaseMan.vendUU = this.user.data.enterprise.uu
-          purchaseMan.vendorUserUU = this.user.data.userUU
-          purchaseMan.qutoApp = 'MALL'
-          if (!purchaseMan.currency) {
-            purchaseMan.currency = this.sayPriceObj.currency
-          }
-          this.$http.post('/inquiry/sale/item/save', purchaseMan).then(response => {
-            this.showLoading = false
-            if (response.data.success === false) {
-              this.$message.error(response.data.message)
-            } else {
-              this.$message.success('报价成功')
-              this.resetSayPrice()
-              this.resetList()
-            }
-          }, error => {
-            console.log(error)
-            this.$message.error('请勿重复报价或报价自己的求购')
-            this.showLoading = false
-          })
-        } else {
-          this.$message.error('请输入正确的报价信息')
-        }
-      },
       resetList: function () {
         this.currentSayPriceIndex = -1
         this.$store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: this.nowPage, pageSize: this.pageSize, keyword: this.keyWord, sorting: !this.sorting || JSON.stringify(this.sorting) === '{}' ? {releaseDate: 'DESC'} : this.sorting, enUU: this.user.data.enterprise ? this.user.data.enterprise.uu : null})
       },
-      resetSayPrice: function () {
-        this.sayPriceObj = {
-          currency: 'RMB',
-          leadtime: '',
-          replies: [
-            {
-              lapQty: '',
-              price: ''
-            }
-          ]
-        }
-      },
-      onLeadtimeInput: function () {
-        if (this.sayPriceObj.leadtime.length > 2) {
-          this.sayPriceObj.leadtime = this.sayPriceObj.leadtime.substring(0, 2)
-        }
-      },
-      onLeadtimeBlur: function () {
-        if (!this.sayPriceObj.leadtime || this.sayPriceObj.leadtime < 1 || this.sayPriceObj.leadtime > 31 || this.sayPriceObj.leadtime.toString().indexOf('.') !== -1) {
-          this.validSayPrice.leadtime = false
-          this.$message.error('交期只能填写1-31之间的整数值')
-        } else {
-          this.validSayPrice.leadtime = true
-        }
-      },
-      onReplyPriceInput: function (index) {
-        let price = this.sayPriceObj.replies[index].price
-        if (price >= 10000) {
-          this.sayPriceObj.replies[index].price = price.substring(0, 4)
-        } else if (price.indexOf('.') > -1) {
-          let arr = price.split('.')
-          if (arr[0].length > 4) {
-            this.sayPriceObj.replies[index].price = Number(arr[0].substring(0, 4) + '.' + arr[1])
-          } else if (arr[1].length > 6) {
-            this.sayPriceObj.replies[index].price = Number(arr[0] + '.' + arr[1].substring(0, 6))
-          }
-        }
-      },
-      onReplyPriceBlur: function (index) {
-        let price = this.sayPriceObj.replies[index].price
-        if (!price) {
-          this.sayPriceObj.replies[index].price = ''
-          this.$message.error('价格不能为空')
-          this.validSayPrice.repliesPrice = false
-        } else if (price <= 0) {
-          this.sayPriceObj.replies[index].price = ''
-          this.$message.error('输入值必须为正整数')
-          this.validSayPrice.repliesPrice = false
-        } else {
-          this.validSayPrice.repliesPrice = true
-        }
-      },
-      onReplyLapQtyBlur: function (index) {
-        let lapQty = this.sayPriceObj.replies[index].lapQty
-        let limitDownObj = this.getLimitDownQty()
-        if (!lapQty || lapQty < 1) {
-          this.sayPriceObj.replies[index].lapQty = ''
-          this.$message.error('输入值必须为正整数')
-          this.validSayPrice.repliesLapQty = false
-        } else if (limitDownObj.index !== index && limitDownObj.lapQty > lapQty) {
-          this.$message.error('输入值必须大于#该梯度的下限#')
-          this.sayPriceObj.replies[index].lapQty = ''
-          this.validSayPrice.repliesLapQty = false
-        } else if ((index - 1 >= 0 && this.sayPriceObj.replies[index - 1].lapQty && this.sayPriceObj.replies[index - 1].lapQty >= lapQty) || (index + 1 < this.sayPriceObj.replies.length && this.sayPriceObj.replies[index + 1].lapQty && this.sayPriceObj.replies[index + 1].lapQty <= lapQty)) {
-          this.$message.error('输入值会导致梯度重叠，请重新修改')
-          this.sayPriceObj.replies[index].lapQty = ''
-          this.validSayPrice.repliesLapQty = false
-        } else {
-          this.validSayPrice.repliesLapQty = true
-        }
-      },
-      onReplyLapQtyInput: function (index) {
-        let lapQty = this.sayPriceObj.replies[index].lapQty
-        if (lapQty.length > 9) {
-          this.sayPriceObj.replies[index].lapQty = lapQty.substring(0, 9)
-        }
-      },
-      getLimitDownQty: function () {
-        for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
-          if (this.sayPriceObj.replies[i].lapQty) {
-            return {
-              lapQty: this.sayPriceObj.replies[i].lapQty,
-              index: i
-            }
-          }
-        }
-        return {index: -1}
-      },
-      checkValid: function () {
-        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
-      },
-//      onUnitPriceBlur: function () {
-//        if (this.sayPriceObj.unitPrice) {
-//          if (this.sayPriceObj.unitPrice <= 0) {
-//            this.$message.error('单价必须是大于0的数字')
-//            this.validSayPrice.unitPrice = false
-//          } else {
-//            this.validSayPrice.unitPrice = true
-//          }
-//        } else {
-//          this.$message.error('单价必须是大于0的数字')
-//          this.validSayPrice.unitPrice = false
-//        }
-//      },
-//      onUnitPriceChange: function () {
-//        let price = this.sayPriceObj.unitPrice
-//        if (price >= 10000) {
-//          this.sayPriceObj.unitPrice = price.substring(0, 4)
-//        } else if (price.indexOf('.') > -1) {
-//          let arr = price.split('.')
-//          if (arr[0].length > 4) {
-//            this.sayPriceObj.unitPrice = Number(arr[0].substring(0, 4) + '.' + arr[1])
-//          } else if (arr[1].length > 6) {
-//            this.sayPriceObj.unitPrice = Number(arr[0] + '.' + arr[1].substring(0, 6))
-//          }
-//        }
-//      },
-//      onMinDayInput: function () {
-//        this.sayPriceObj.minDay = Number(this.sayPriceObj.minDay)
-//        if (this.sayPriceObj.minDay < 1 || this.sayPriceObj.minDay > 31 || this.sayPriceObj.minDay.toString().indexOf('.') !== -1) {
-//          this.validSayPrice.minDay = false
-//          this.$message.error('交期只能填写1-31之间的整数值')
-//        } else if (this.sayPriceObj.maxDay && this.sayPriceObj.maxDay < this.sayPriceObj.minDay) {
-//          this.validSayPrice.minDay = false
-//          this.$message.error('最短交期应小于等于最长交期')
-//        } else {
-//          this.validSayPrice.minDay = true
-//        }
-//      },
-//      onMinDayChange: function () {
-//        if (this.sayPriceObj.minDay.length > 2) {
-//          this.sayPriceObj.minDay = this.sayPriceObj.minDay.substring(0, 2)
-//        }
-//      },
-//      onMaxDayInput: function () {
-//        this.sayPriceObj.maxDay = Number(this.sayPriceObj.maxDay)
-//        if (this.sayPriceObj.maxDay < 1 || this.sayPriceObj.maxDay > 31 || this.sayPriceObj.maxDay.toString().indexOf('.') !== -1) {
-//          this.validSayPrice.maxDay = false
-//          this.$message.error('交期只能填写1-31之间的整数值')
-//        } else if (this.sayPriceObj.minDay && this.sayPriceObj.maxDay < this.sayPriceObj.minDay) {
-//          this.validSayPrice.maxDay = false
-//          this.$message.error('最短交期应小于等于最长交期')
-//        } else {
-//          this.validSayPrice.maxDay = true
-//        }
-//      },
-//      onMaxDayChange: function () {
-//        if (this.sayPriceObj.maxDay.length > 2) {
-//          this.sayPriceObj.maxDay = this.sayPriceObj.maxDay.substring(0, 2)
-//        }
-//      },
-//      onProduceDateChange: function () {
-//        if (this.sayPriceObj.produceDate && getRealLen(this.sayPriceObj.produceDate) > 12) {
-//          this.sayPriceObj.produceDate = cutOutString(this.sayPriceObj.produceDate, 12)
-//        }
-//      },
-//      checkAllSayPrice: function () {
-//        return this.validSayPrice.unitPrice && this.validSayPrice.minDay && this.validSayPrice.maxDay
-//      },
       searchList: function () {
         this.nowPage = 1
         this.resetList()
@@ -537,20 +230,6 @@
         this.nowPage = 1
         this.resetList()
       },
-      setReplies: function (type, index) {
-        if (type === 'add' && this.sayPriceObj.replies.length < 5) {
-          if (this.sayPriceObj.replies[index].lapQty && this.sayPriceObj.replies[index].price) {
-            this.sayPriceObj.replies.splice(index + 1, 0, {
-              lapQty: '',
-              price: ''
-            })
-          } else {
-            this.$message.error('请填完整信息')
-          }
-        } else if (type === 'sub' && this.sayPriceObj.replies.length > 1) {
-          this.sayPriceObj.replies.splice(index, 1)
-        }
-      },
       setLinkBoxIndex: function (index) {
         if (!this.user.logged) {
           this.$router.push('/auth/login?returnUrl=' + window.location.href)
@@ -1003,175 +682,6 @@
       text-align: right;
       float: none;
     }
-    .say-price-box {
-      position: fixed;
-      width: 456px;
-      top: 30%;
-      left: 33%;
-      /*-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
-      /*-moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
-      /*box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
-      z-index: 1;
-      .title {
-        position: relative;
-        height: 44px;
-        background: #4290f7;
-        line-height: 44px;
-        color: #fff;
-        border: {
-          top-right-radius: 5px;
-          top-left-radius: 5px;
-        }
-        > div {
-          display: inline-block;
-          padding-left: 57px;
-          width: 47%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        i {
-          position: absolute;
-          right: 10px;
-          top: 8px;
-          cursor: pointer;
-        }
-      }
-      .content {
-        padding: 9px 0;
-        background: #fff;
-        .content-line {
-          margin: 0 0 14px 0;
-          .form-item {
-            display: inline-block;
-            width: 49%;
-            > span {
-              i {
-                color: #fd2637;
-                margin-right: 4px;
-              }
-            }
-            input {
-              border: 1px solid #bfbfbf;
-              border-radius: 2px;
-              height: 28px;
-              padding: 0 8px;
-            }
-            &.form-left {
-              span {
-                display: inline-block;
-                width: 104px;
-                text-align: right;
-              }
-              input {
-                width: 64px;
-                padding: 0 8px;
-              }
-            }
-            &.form-upload {
-              text-align: center;
-              label {
-                margin-bottom: 0;
-                cursor: pointer;
-                input {
-                  display: none;
-                }
-                span {
-                  display: block;
-                  width: 94px;
-                  height: 23px;
-                  line-height: 18px;
-                  font-weight: normal;
-                  color: #4290f7;
-                  text-align: center;
-                  border: 1px dashed #4290f7;
-                  border-radius: 11px;
-                  i {
-                    font-weight: bold;
-                    font-style: normal;
-                    font-size: 18px;
-                    margin-right: 5px;
-                  }
-                }
-              }
-              div {
-                i {
-                  cursor: pointer;
-                  color: #eb222c;
-                  font-size: 16px;
-                  margin-right: 10px;
-                }
-                span {
-                  display: inline-block;
-                  max-width: 128px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-              }
-            }
-            &.form-right {
-              padding-left: 13px;
-              position: relative;
-              input {
-                width: 101px;
-                padding: 0 8px;
-              }
-              select {
-                position: absolute;
-                top: 0;
-                width: 32px;
-                height: 28px;
-                background: url(/images/applyPurchase/arrow-down.png) no-repeat right center;
-                border: {
-                  left: none;
-                  top: none;
-                  bottom: none;
-                  right: 1px solid #bfbfbf;
-                  bottom-left-radius: 4px;
-                  top-left-radius: 4px;
-                }
-                color: #5392f9;
-                font: small-caption;
-                padding-left: 8px;
-                outline: none;
-                & + input {
-                  padding-left: 36px;
-                }
-              }
-              > i {
-                margin-left: 4px;
-              }
-            }
-          }
-        }
-      }
-      .operate {
-        background: #fff;
-        height: 62px;
-        text-align: center;
-        padding-top: 15px;
-        border: {
-          top: 1px solid #e4e5e6;
-          bottom-left-radius: 5px;
-          bottom-right-radius: 5px;
-        }
-        span {
-          display: inline-block;
-          width: 64px;
-          height: 28px;
-          line-height: 28px;
-          text-align: center;
-          background: #4290f7;
-          color: #fff;
-          cursor: pointer;
-          &:last-child {
-            margin-left: 15px;
-            background: #acabab;
-          }
-        }
-      }
-    }
     .link-saler-box {
       width: 289px;
       height: auto;

components/applyPurchase/SayPrice.vue

@@ -0,0 +1,441 @@
+<template>
+  <div>
+    <div class="modal-wrap" v-if="currentSayPriceIndex > -1">
+      <div class="say-price-box" >
+        <div class="title">
+          <div>型号：<span :title="purchaseManList.content[currentSayPriceIndex].cmpCode">{{purchaseManList.content[currentSayPriceIndex].cmpCode}}</span></div>
+          <div>品牌：<span :title="purchaseManList.content[currentSayPriceIndex].inbrand">{{purchaseManList.content[currentSayPriceIndex].inbrand}}</span></div>
+          <i class="fa fa-close" @click="cancelSayPrice"></i>
+        </div>
+        <div class="content">
+          <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>
+                <span><i>+</i>添加附件</span>
+                <input type="file">
+              </label>
+              &lt;!&ndash;<div>
+                <span>我是Excel的名字111</span>
+                <i class="fa fa-times-circle"></i>
+                <a href="">更换</a>
+              </div>&ndash;&gt;
+            </div>-->
+          </div>
+          <div class="content-line" v-for="(reply, index) in sayPriceObj.replies">
+            <div class="form-item form-left">
+              <span><i>*</i>价格梯度：</span>
+              <input type="number" class="form-control" @blur="onReplyLapQtyBlur(index)" @input="onReplyLapQtyInput(index)" v-model="reply.lapQty" placeholder="数量">
+              <!-- -
+               <input type="text" class="form-control" placeholder="数量">-->
+            </div>
+            <div class="form-item form-right">
+              <span><i>*</i>单价<span v-if="purchaseManList.content[currentSayPriceIndex].currency" v-text="purchaseManList.content[currentSayPriceIndex].currency == 'USD' ? '($)' : '(¥)'"></span>：</span>
+              <!--{{purchaseManList.content[currentSayPriceIndex].currency == 'USD' ? '$' : '¥'}})-->
+              <select v-if="!purchaseManList.content[currentSayPriceIndex].currency" v-model="sayPriceObj.currency">
+                <option value="RMB">¥</option>
+                <option value="USD">$</option>
+              </select>
+              <input type="number" class="form-control" @input="onReplyPriceInput(index)" @blur="onReplyPriceBlur(index)" placeholder="单价" v-model="reply.price">
+              <i class="fa fa-minus-circle" v-if="sayPriceObj.replies.length > 1" @click="setReplies('sub', index)"></i>
+              <i class="fa fa-plus-circle" v-if="sayPriceObj.replies.length < 5" @click="setReplies('add', index)"></i>
+            </div>
+          </div>
+        </div>
+        <div class="operate">
+          <span @click="commitSayPrice">确定</span>
+          <span @click="cancelSayPrice">取消</span>
+        </div>
+      </div>
+    </div>
+    <loading v-show="showLoading"></loading>
+  </div>
+</template>
+<script>
+  import Loading from '~components/common/loading/PageLoading.vue'
+  export default {
+    props: {
+      purchase: Array,
+      current: Number
+    },
+    data () {
+      return {
+        sayPriceObj: {
+          currency: 'RMB',
+          leadtime: '',
+          replies: [
+            {
+              lapQty: '',
+              price: ''
+            }
+          ]
+        },
+        validSayPrice: {
+          leadtime: false,
+          repliesPrice: false,
+          repliesLapQty: false
+        },
+        showLoading: false
+      }
+    },
+    components: {
+      Loading
+    },
+    computed: {
+      purchaseManList () {
+        return this.purchase || []
+      },
+      currentSayPriceIndex () {
+        this.resetSayPrice()
+        return this.current || -1
+      },
+      user () {
+        return this.$store.state.option.user
+      }
+    },
+    methods: {
+      setIndex: function (index) {
+        this.$emit('sayPriceIndexAction', index)
+      },
+      sayPrice: function (purchaseMan, index) {
+        if (this.user.logged) {
+          if (this.user.data.enterprise.uu) {
+            if (this.user.data.enterprise.isVendor && this.user.data.enterprise.isVendor !== '1690') {
+              this.resetSayPrice()
+              purchaseMan.active = true
+              this.setIndex(index)
+            } else {
+              this.$message.error('抱歉，您需开通卖家功能才可报价')
+            }
+          } else {
+            this.$message.error('个人账户不可报价')
+          }
+        } else {
+          this.$router.push('/auth/login?returnUrl=' + window.location.href)
+        }
+      },
+      cancelSayPrice: function () {
+        this.$emit('cancelSayPriceAction')
+      },
+      commitSayPrice: function () {
+        if (this.checkValid()) {
+          let purchaseMan = this.purchaseManList.content[this.currentSayPriceIndex]
+          this.showLoading = true
+          purchaseMan.leadtime = this.sayPriceObj.leadtime
+          purchaseMan.replies = this.sayPriceObj.replies
+          purchaseMan.vendUU = this.user.data.enterprise.uu
+          purchaseMan.vendorUserUU = this.user.data.userUU
+          purchaseMan.qutoApp = 'MALL'
+          if (!purchaseMan.currency) {
+            purchaseMan.currency = this.sayPriceObj.currency
+          }
+          this.$http.post('/inquiry/sale/item/save', purchaseMan).then(response => {
+            this.showLoading = false
+            if (response.data.success === false) {
+              this.$message.error(response.data.message)
+            } else {
+              this.$message.success('报价成功')
+              this.resetSayPrice()
+              this.resetList()
+            }
+          }, error => {
+            console.log(error)
+            this.$message.error('请勿重复报价或报价自己的求购')
+            this.showLoading = false
+          })
+        } else {
+          this.$message.error('请输入正确的报价信息')
+        }
+      },
+      resetList: function () {
+        this.$emit('resetListAction')
+      },
+      resetSayPrice: function () {
+        this.sayPriceObj = {
+          currency: 'RMB',
+          leadtime: '',
+          replies: [
+            {
+              lapQty: '',
+              price: ''
+            }
+          ]
+        }
+      },
+      onLeadtimeInput: function () {
+        if (this.sayPriceObj.leadtime.length > 2) {
+          this.sayPriceObj.leadtime = this.sayPriceObj.leadtime.substring(0, 2)
+        }
+      },
+      onLeadtimeBlur: function () {
+        if (!this.sayPriceObj.leadtime || this.sayPriceObj.leadtime < 1 || this.sayPriceObj.leadtime > 31 || this.sayPriceObj.leadtime.toString().indexOf('.') !== -1) {
+          this.validSayPrice.leadtime = false
+          this.$message.error('交期只能填写1-31之间的整数值')
+        } else {
+          this.validSayPrice.leadtime = true
+        }
+      },
+      onReplyPriceInput: function (index) {
+        let price = this.sayPriceObj.replies[index].price
+        if (price >= 10000) {
+          this.sayPriceObj.replies[index].price = price.substring(0, 4)
+        } else if (price.indexOf('.') > -1) {
+          let arr = price.split('.')
+          if (arr[0].length > 4) {
+            this.sayPriceObj.replies[index].price = Number(arr[0].substring(0, 4) + '.' + arr[1])
+          } else if (arr[1].length > 6) {
+            this.sayPriceObj.replies[index].price = Number(arr[0] + '.' + arr[1].substring(0, 6))
+          }
+        }
+      },
+      onReplyPriceBlur: function (index) {
+        let price = this.sayPriceObj.replies[index].price
+        if (!price) {
+          this.sayPriceObj.replies[index].price = ''
+          this.$message.error('价格不能为空')
+          this.validSayPrice.repliesPrice = false
+        } else if (price <= 0) {
+          this.sayPriceObj.replies[index].price = ''
+          this.$message.error('输入值必须为正整数')
+          this.validSayPrice.repliesPrice = false
+        } else {
+          this.validSayPrice.repliesPrice = true
+        }
+      },
+      onReplyLapQtyBlur: function (index) {
+        let lapQty = this.sayPriceObj.replies[index].lapQty
+        let limitDownObj = this.getLimitDownQty()
+        if (!lapQty || lapQty < 1) {
+          this.sayPriceObj.replies[index].lapQty = ''
+          this.$message.error('输入值必须为正整数')
+          this.validSayPrice.repliesLapQty = false
+        } else if (limitDownObj.index !== index && limitDownObj.lapQty > lapQty) {
+          this.$message.error('输入值必须大于#该梯度的下限#')
+          this.sayPriceObj.replies[index].lapQty = ''
+          this.validSayPrice.repliesLapQty = false
+        } else if ((index - 1 >= 0 && this.sayPriceObj.replies[index - 1].lapQty && this.sayPriceObj.replies[index - 1].lapQty >= lapQty) || (index + 1 < this.sayPriceObj.replies.length && this.sayPriceObj.replies[index + 1].lapQty && this.sayPriceObj.replies[index + 1].lapQty <= lapQty)) {
+          this.$message.error('输入值会导致梯度重叠，请重新修改')
+          this.sayPriceObj.replies[index].lapQty = ''
+          this.validSayPrice.repliesLapQty = false
+        } else {
+          this.validSayPrice.repliesLapQty = true
+        }
+      },
+      onReplyLapQtyInput: function (index) {
+        let lapQty = this.sayPriceObj.replies[index].lapQty
+        if (lapQty.length > 9) {
+          this.sayPriceObj.replies[index].lapQty = lapQty.substring(0, 9)
+        }
+      },
+      getLimitDownQty: function () {
+        for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
+          if (this.sayPriceObj.replies[i].lapQty) {
+            return {
+              lapQty: this.sayPriceObj.replies[i].lapQty,
+              index: i
+            }
+          }
+        }
+        return {index: -1}
+      },
+      checkValid: function () {
+        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
+      },
+      setReplies: function (type, index) {
+        if (type === 'add' && this.sayPriceObj.replies.length < 5) {
+          if (this.sayPriceObj.replies[index].lapQty && this.sayPriceObj.replies[index].price) {
+            this.sayPriceObj.replies.splice(index + 1, 0, {
+              lapQty: '',
+              price: ''
+            })
+          } else {
+            this.$message.error('请填完整信息')
+          }
+        } else if (type === 'sub' && this.sayPriceObj.replies.length > 1) {
+          this.sayPriceObj.replies.splice(index, 1)
+        }
+      }
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .say-price-box {
+    position: fixed;
+    width: 456px;
+    top: 30%;
+    left: 33%;
+    /*-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
+    /*-moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
+    /*box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
+    z-index: 1;
+    .title {
+      position: relative;
+      height: 44px;
+      background: #4290f7;
+      line-height: 44px;
+      color: #fff;
+      border: {
+        top-right-radius: 5px;
+        top-left-radius: 5px;
+      }
+      > div {
+        display: inline-block;
+        padding-left: 57px;
+        width: 47%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      i {
+        position: absolute;
+        right: 10px;
+        top: 8px;
+        cursor: pointer;
+      }
+    }
+    .content {
+      padding: 9px 0;
+      background: #fff;
+      .content-line {
+        margin: 0 0 14px 0;
+        .form-item {
+          display: inline-block;
+          width: 49%;
+          > span {
+            i {
+              color: #fd2637;
+              margin-right: 4px;
+            }
+          }
+          input {
+            border: 1px solid #bfbfbf;
+            border-radius: 2px;
+            height: 28px;
+            padding: 0 8px;
+          }
+          &.form-left {
+            span {
+              display: inline-block;
+              width: 104px;
+              text-align: right;
+            }
+            input {
+              width: 64px;
+              padding: 0 8px;
+            }
+          }
+          &.form-upload {
+            text-align: center;
+            label {
+              margin-bottom: 0;
+              cursor: pointer;
+              input {
+                display: none;
+              }
+              span {
+                display: block;
+                width: 94px;
+                height: 23px;
+                line-height: 18px;
+                font-weight: normal;
+                color: #4290f7;
+                text-align: center;
+                border: 1px dashed #4290f7;
+                border-radius: 11px;
+                i {
+                  font-weight: bold;
+                  font-style: normal;
+                  font-size: 18px;
+                  margin-right: 5px;
+                }
+              }
+            }
+            div {
+              i {
+                cursor: pointer;
+                color: #eb222c;
+                font-size: 16px;
+                margin-right: 10px;
+              }
+              span {
+                display: inline-block;
+                max-width: 128px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+          &.form-right {
+            padding-left: 13px;
+            position: relative;
+            input {
+              width: 101px;
+              padding: 0 8px;
+            }
+            select {
+              position: absolute;
+              top: 0;
+              width: 32px;
+              height: 28px;
+              background: url(/images/applyPurchase/arrow-down.png) no-repeat right center;
+              border: {
+                left: none;
+                top: none;
+                bottom: none;
+                right: 1px solid #bfbfbf;
+                bottom-left-radius: 4px;
+                top-left-radius: 4px;
+              }
+              color: #5392f9;
+              font: small-caption;
+              padding-left: 8px;
+              outline: none;
+              & + input {
+                padding-left: 36px;
+              }
+            }
+            > i {
+              margin-left: 4px;
+            }
+          }
+        }
+      }
+    }
+    .operate {
+      background: #fff;
+      height: 62px;
+      text-align: center;
+      padding-top: 15px;
+      border: {
+        top: 1px solid #e4e5e6;
+        bottom-left-radius: 5px;
+        bottom-right-radius: 5px;
+      }
+      span {
+        display: inline-block;
+        width: 64px;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        background: #4290f7;
+        color: #fff;
+        cursor: pointer;
+        &:last-child {
+          margin-left: 15px;
+          background: #acabab;
+        }
+      }
+    }
+  }
+</style>

components/home/floor/FloorList.vue

@@ -2,54 +2,65 @@
   <div class="floor-list">
     <div class="container">
       <floor-bar :floors="floors"></floor-bar>
-      <a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao.png" alt=""></a>
-     <!-- <div class="banner">
-        <ul>
+      <!--<a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao.png" alt=""></a>-->
+      <div class="banner">
+        <ul class="seek-banner">
           <li><a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao01.png" alt=""></a></li>
           <li>
             <div class="banner-cuxiao">
-              <table>
-                <caption><span>最新求购</span><img src="/images/all/banner-cuxiao03.jpg" alt=""></caption>
-                <thead>
-                <tr>
-                  <th>发布时间</th>
-                  <th>买家名称</th>
-                  <th>型号</th>
-                  <th>操作</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="purchaseMan in purchaseManList.content.slice(timerIndex, timerIndex + 5)">
-                  <td>{{purchaseMan.date | date}}</td>
-                  <td>
-                    <div v-if="purchaseMan.inquiry.enterprise && purchaseMan.inquiry.enterprise.enName">{{purchaseMan.inquiry.enterprise.enName | enterpriseFilter}}</div>
-                    <div v-else>{{purchaseMan.userName | userNameFilter}}</div>
-                  </td>
-                  <td :title="purchaseMan.cmpCode">{{purchaseMan.cmpCode}}</td>
-                  <td><nuxt-link to="applyPurchase">我要报价</nuxt-link></td>
-                </tr>
-                </tbody>
-              </table>
-              <nuxt-link to="applyPurchase" class="purchase">我要求购</nuxt-link>
+              <div class="wrap">
+                <p class="title"><span>最新求购</span><img src="/images/all/banner-cuxiao03.jpg" alt="">
+                  <nuxt-link to="/applyPurchase">查看更多</nuxt-link>
+                </p>
+                <div class="list-head">
+                  <span>发布时间</span>
+                  <span>买家名称</span>
+                  <span>型号</span>
+                  <span>操作</span>
+                </div>
+                <ul>
+                  <li v-for="(purchaseMan, index) in purchaseManList.content" :style="'top: -' + 32 * timerIndex + 'px'">
+                    <div>{{purchaseMan.date | date}}</div>
+                    <div>
+                      <span v-if="purchaseMan.inquiry.enterprise && purchaseMan.inquiry.enterprise.enName">{{purchaseMan.inquiry.enterprise.enName | enterpriseFilter}}</span>
+                      <span v-else>{{purchaseMan.userName | userNameFilter}}</span>
+                    </div>
+                    <div :title="purchaseMan.cmpCode">{{purchaseMan.cmpCode}}</div>
+                    <div>
+                      <a @click="sayPrice(purchaseMan, index)">我要报价</a>
+                      <div class="is-say-price" v-if="purchaseMan.remainingTime > 0 && purchaseMan.quoted == 1">已报价 <img src="/images/applyPurchase/green-check.png" alt=""></div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <nuxt-link to="/applyPurchase" class="purchase">我要求购</nuxt-link>
             </div>
           </li>
         </ul>
-      </div>-->
+      </div>
       <floor :floor="defaultFloors[0]" :isDefault="true" v-if="!isEmpty"></floor>
       <floor :floor="defaultFloors[1]" :isDefault="true" v-if="!isEmpty"></floor>
       <floor v-for="(floor, index) in floors.data" :floor="floor" :isDefault="false" :key="index"></floor>
     </div>
     <span v-if="expandFloors && false">floor</span>
+    <say-price :current="currentSayPriceIndex"
+               :purchase="purchaseManList"
+               @cancelSayPriceAction="cancelSayPrice"
+               @resetListAction="resetList"
+               @sayPriceIndexAction="setIndex(index)"
+    ></say-price>
   </div>
 </template>
 <script>
   import Floor from './Floor.vue'
   import FloorBar from './FloorBar.vue'
+  import SayPrice from '~components/applyPurchase/SayPrice.vue'
   export default {
     name: 'floor-list',
     components: {
       Floor,
-      FloorBar
+      FloorBar,
+      SayPrice
     },
     data () {
       return {
@@ -77,17 +88,20 @@
             ]
           }
         ],
-        timerIndex: 0
+        timerIndex: 0,
+        pageSize: 50,
+        nowPage: 1,
+        currentSayPriceIndex: -1
       }
     },
-//    mounted () {
-//      setInterval(() => {
-//        this.timerIndex ++
-//        if (this.timerIndex > 45) {
-//          this.timerIndex = 0
-//        }
-//      }, 3000)
-//    },
+    mounted () {
+      setInterval(() => {
+        this.timerIndex ++
+        if (this.timerIndex > 45) {
+          this.timerIndex = 0
+        }
+      }, 3000)
+    },
     filters: {
       date: function (date) {
         const now = new Date()
@@ -150,6 +164,9 @@
       },
       purchaseManList () {
         return this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
+      },
+      user () {
+        return this.$store.state.option.user
       }
     },
     methods: {
@@ -159,6 +176,34 @@
             return currency === 'RMB' ? prices[i].rMBPrice : prices[i].uSDPrice
           }
         }
+      },
+      setIndex: function (index) {
+        this.currentSayPriceIndex = index
+      },
+      sayPrice: function (purchaseMan, index) {
+        if (this.user.logged) {
+          if (this.user.data.enterprise.uu) {
+            if (this.user.data.enterprise.isVendor && this.user.data.enterprise.isVendor !== '1690') {
+              purchaseMan.active = true
+              this.currentSayPriceIndex = index
+            } else {
+              this.$message.error('抱歉，您需开通卖家功能才可报价')
+            }
+          } else {
+            this.$message.error('个人账户不可报价')
+          }
+        } else {
+          this.$router.push('/auth/login?returnUrl=' + window.location.href)
+        }
+      },
+      resetList: function () {
+        this.currentSayPriceIndex = -1
+        this.timerIndex = 0
+        this.$store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: this.nowPage, pageSize: this.pageSize, enUU: this.user.data.enterprise ? this.user.data.enterprise.uu : null})
+      },
+      cancelSayPrice: function () {
+        this.purchaseManList.content[this.currentSayPriceIndex].active = false
+        this.currentSayPriceIndex = -1
       }
     }
   }
@@ -190,80 +235,122 @@
     width:1190px;
     height: 253px;
     margin-top: 20px;
-    li{
-      float: left;
-      padding-left: 14px;
-      position: relative;
-      &:first-child{
-        padding-left: 0;
+    .seek-banner {
+      > li{
+        float: left;
+        padding-left: 14px;
+        position: relative;
+        &:first-child{
+          padding-left: 0;
+        }
       }
     }
     .banner-cuxiao {
       width: 660px;
       height: 253px;
       background: url('/images/all/banner-cuxiao02.png') no-repeat;
-      table {
+      .wrap {
         width: 436px;
-        table-layout: fixed;
-        caption {
+        .title {
           color: #f57a2e;
           font-size: 20px;
           font-weight: bold;
           padding: 10px 30px;
+          margin: 0;
           img{
             position: relative;
             top: -7px;
             animation: myfirst 1s infinite;
           }
+          a {
+            font-size: 14px;
+            color: #f57a2e;
+            float: right;
+            margin-top: 7px;
+          }
         }
-        thead tr th {
+        .list-head {
           height: 30px;
+          line-height: 30px;
           color: #fff;
           font-size: 14px;
           background-color: #f57a2e;
-        }
-       tr th, tr td {
-          height: 30px;
-         text-align: center;
-          &:first-child {
-            padding: 6px 7px 6px 16px;
-          }
-         &:nth-child(2) {
-           padding-right: 7px;
-         }
-         &:nth-child(3) {
-           text-align: center;
-           padding: 6px 10px 6px 10px;
-         }
-         &:nth-child(4) {
-           text-align: center;
-           padding: 6px 10px 6px 10px;
-         }
-          a {
-            width: 64px;
-            height: 22px;
-            line-height: 22px;
-            text-align: center;
-            padding: 3px 5px;
-            color: #fd3904;
-            font-size: 12px;
-            border-radius: 2px;
-            border: 1px solid #fd3904;
-            &:hover {
-              border: 1px solid #fd3904;
-              background-color: #fd3904;
-              color: #fff;
-              -moz-box-shadow: 0 3px 5px #f57a2e; /* 老的 Firefox */
-              box-shadow: 0 3px 10px #f57a2e;
+          text-align: center;
+          span {
+            display: inline-block;
+            &:nth-child(1) {
+              width: 70px;
+            }
+            &:nth-child(2) {
+              width: 144px;
+            }
+            &:nth-child(3) {
+              width: 106px;
+            }
+            &:nth-child(4) {
+              width: 115px;
             }
           }
         }
-        tr td{
+        ul {
+          max-height: 160px;
           overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          &:first-child {
-            color: #f57a2e;
+          position: relative;
+          li {
+            height: 32px;
+            line-height: 32px;
+            position: relative;
+            top: 0;
+            transition: top 1s;
+            -moz-transition: top 1s; /* Firefox 4 */
+            -webkit-transition: top 1s; /* Safari and Chrome */
+            -o-transition: top 1s; /* Opera */
+            div {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              display: inline-block;
+              text-align: center;
+              &:first-child {
+                color: #f57a2e;
+              }
+              &:nth-child(1) {
+                width: 70px;
+              }
+              &:nth-child(2) {
+                width: 144px;
+              }
+              &:nth-child(3) {
+                width: 106px;
+              }
+              &:nth-child(4) {
+                width: 115px;
+              }
+              a {
+                width: 64px;
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                padding: 3px 5px;
+                color: #fd3904;
+                font-size: 12px;
+                border-radius: 2px;
+                border: 1px solid #fd3904;
+                &:hover {
+                  border: 1px solid #fd3904;
+                  background-color: #fd3904;
+                  color: #fff;
+                  -moz-box-shadow: 0 3px 5px #f57a2e; /* 老的 Firefox */
+                  box-shadow: 0 3px 10px #f57a2e;
+                }
+              }
+              .is-say-price {
+                color: #39ae05;
+                img {
+                  margin-bottom: 2px;
+                }
+              }
+            }
           }
         }
       }

pages/index.vue

@@ -99,8 +99,8 @@
             'BT2018012900002056',
             'BT2018012900002056',
             'BT2018012900002056']
-        })
-//        store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 50})
+        }),
+        store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 50, enUU: store.state.option.user.data.enterprise ? store.state.option.user.data.enterprise.uu : null})
       ]) : []
     },
     computed: {