求购发布交互

components/applyPurchase/ApplyInfo.vue

@@ -26,7 +26,7 @@
           <span>{{purchaseMan.code}}</span>
           <span>{{purchaseMan.brand}}</span>
           <span class="date-content"><span>剩余&nbsp;</span><span v-text="getDay(purchaseMan.deadline - purchaseMan.releaseDate)"></span>&nbsp;天&nbsp;<span v-text="getHours(purchaseMan.deadline - purchaseMan.releaseDate)"></span>&nbsp;小时</span>
-          <span class="number-content"><img src="/images/applyPurchase/hot-fire.png" alt="" v-if="purchaseMan.offerAmount > 10"><span :style="purchaseMan.offerAmount > 10 ? 'color: #ff9a00': ''">{{purchaseMan.amount || 0}}</span>&nbsp;条</span>
+          <span class="number-content"><img src="/images/applyPurchase/hot-fire.png" alt="" v-if="purchaseMan.offerAmount > 10"><span :style="purchaseMan.offerAmount > 10 ? 'color: #ff9a00': ''">{{purchaseMan.offerAmount || 0}}</span>&nbsp;条</span>
           <span class="btn-content">
             <a>联系买家</a>
             <a @click="sayPrice(purchaseMan)">我要报价</a>
@@ -49,27 +49,43 @@
             <div>报价</div>
             <div>
               <i>*</i>单价
-              <select>
-                <option value="RMB">$</option>
-                <option value="USD">￥</option>
+              <select v-model="sayPriceObj.currency">
+                <option value="RMB">￥</option>
+                <option value="USD">$</option>
               </select>
-              <input type="text" class="form-control">
+              <input type="text" v-model="sayPriceObj.unitPrice" class="form-control">
             </div>
             <div>
               <i>*</i>交期&nbsp;
-              <input type="text" class="form-control">&nbsp;-&nbsp;<input type="text" class="form-control">&nbsp;天
+              <input type="number" v-model="sayPriceObj.minDay" @blur="onMinDayInput" class="form-control">&nbsp;-&nbsp;<input type="number" v-model="sayPriceObj.maxDay" @blur="onMaxDayInput" class="form-control">&nbsp;天
             </div>
             <div>
-              生产日期&nbsp;<input type="text" class="form-control">
+              生产日期&nbsp;<input v-model="sayPriceObj.produceDate" type="text" class="form-control">
             </div>
             <div>
               <span @click="cancelSayPrice(purchaseMan)">取消</span>
-              <span>提交</span>
+              <span @click="commitSayPrice(purchaseMan)">提交</span>
             </div>
           </div>
         </li>
       </ul>
     </div>
+    <!--提示框-->
+    <div class="com-del-box" v-if="showRemindBox">
+      <div class="title">
+        <a @click="showRemindBox = false"><i class="fa fa-close fa-lg"></i></a>
+      </div>
+      <div class="content">
+        <!--<p style="line-height: 20px;margin-top: 10px;padding:0 10px">非常抱歉，目前暂无此品牌！<br>若直接前往“品牌申请”，我们将为您先开通寄售功能，待申请通过后再提交开店申请。</p>-->
+        <!--<p style="line-height: 20px;">前往<a @click="goBrandApply()"  target="_blank" style="color: #5078CB">品牌申请&nbsp;<i class="fa fa-arrow-right"></i></a></p>-->
+        <p><img src="/images/applyPurchase/check.png" alt="">发布成功</p>
+        <p>其中 <span>100</span>个求购型号有现货在售，您可前往“<span>买家中心-我的求购</span>”查询并直接购买</p>
+        <div>
+          <a @click="showRemindBox = false">我知道了</a>
+          <a href="javascript:void(0)">前往我的求购</a>
+        </div>
+      </div>
+    </div>
     <page :total="totalCount" :page-size="pageSize"
           :current="nowPage" v-on:childEvent="listenPage"></page>
   </div>
@@ -80,7 +96,16 @@
     data () {
       return {
         pageSize: 10,
-        nowPage: 1
+        nowPage: 1,
+        sayPriceObj: {
+          currency: 'RMB',
+          unitPrice: '',
+          minDay: '',
+          maxDay: '',
+          produceDate: '',
+          spId: ''
+        },
+        showRemindBox: false
       }
     },
     components: {
@@ -92,7 +117,7 @@
         const year = d.getFullYear()
         const monthTemp = d.getMonth() + 1
         const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
-        const hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours() + ' '
+        const hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours()
         const minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes() + ' '
         const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate() + ' '
         return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes
@@ -118,13 +143,64 @@
       },
       listenPage: function (page) {
         this.nowPage = page
-        this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: this.nowPage, count: this.pageSize})
+        this.resetList()
       },
       sayPrice: function (purchaseMan) {
         purchaseMan.active = true
       },
       cancelSayPrice: function (purchaseMan) {
         purchaseMan.active = false
+      },
+      commitSayPrice: function (purchaseMan) {
+        let valid = this.sayPriceObj.currency && this.sayPriceObj.unitPrice && this.sayPriceObj.minDay && this.sayPriceObj.maxDay
+        if (valid) {
+          this.sayPriceObj.spId = purchaseMan.id
+          this.$http.post('/seek/offer/saveOffer', this.sayPriceObj).then(response => {
+//            this.$message.success('发布成功')
+            this.showRemindBox = true
+            this.nowPage = 1
+            this.resetSayPrice()
+            this.resetList()
+          }, error => {
+            console.log(error)
+            this.$message.error('系统错误')
+          })
+        } else {
+          this.$message.error('请填写正确的信息')
+        }
+      },
+      resetList: function () {
+        this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: this.nowPage, count: this.pageSize})
+      },
+      resetSayPrice: function () {
+        this.sayPriceObj = {
+          currency: 'RMB',
+          unitPrice: '',
+          minDay: '',
+          maxDay: '',
+          produceDate: '',
+          spId: ''
+        }
+      },
+      onMinDayInput: function () {
+        this.sayPriceObj.minDay = Math.floor(this.sayPriceObj.minDay)
+        if (this.sayPriceObj.maxDay) {
+          if (this.sayPriceObj.maxDay < this.sayPriceObj.minDay) {
+            this.sayPriceObj.minDay = this.sayPriceObj.maxDay
+          }
+        } else if (this.sayPriceObj.minDay < 0) {
+          this.sayPriceObj.minDay = 0
+        }
+      },
+      onMaxDayInput: function () {
+        this.sayPriceObj.maxDay = Math.floor(this.sayPriceObj.maxDay)
+        if (this.sayPriceObj.minDay) {
+          if (this.sayPriceObj.maxDay < this.sayPriceObj.minDay) {
+            this.sayPriceObj.maxDay = this.sayPriceObj.minDay
+          }
+        } else if (this.sayPriceObj.maxDay < 0) {
+          this.sayPriceObj.maxDay = 0
+        }
       }
     }
   }
@@ -358,6 +434,8 @@
                     top-left-radius: 4px;
                   }
                   color: #5392f9;
+                  font: small-caption;
+                  padding-left: 3px;
                   & + input {
                     padding-left: 34px;
                   }
@@ -422,5 +500,72 @@
       text-align: right;
       float: none;
     }
+    .com-del-box{
+      position: fixed;
+      z-index: 1000;
+      height: auto;
+      opacity: 1;
+      background-color: white;
+      width: 310px;
+      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      -o-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      margin: -155px 0 0 -75px;
+      top: 55%;
+      left: 43%;
+      .title{
+        height: 24px;
+        background-color: #007aff;
+        text-align: right;
+        padding-right: 15px;
+        line-height: 24px;
+        a{
+          color: white;
+          font-size: 12px;
+        }
+      }
+      .content{
+        width: 100%;
+        text-align: center;
+        margin: 0 auto;
+        p{
+          padding: 12px 31px;
+          margin: 0;
+          i{
+            color: #5078cb;
+            font-size: 16px;
+            margin-right: 10px;
+          }
+          span {
+            color: #007aff;
+          }
+          &:last-child {
+            font-size: 12px;
+          }
+        }
+        div{
+          width: 100%;
+          text-align: center;
+          margin: 0 auto 20px;
+          a{
+            padding: 0 19px;
+            height: 26px;
+            line-height: 26px;
+            display: inline-block;
+            text-align: center;
+            font-size: 14px;
+            color: #fff;
+            &:first-child{
+              background: #c8c6c6;
+              margin-right: 10px;
+            }
+            &:last-child{
+              background: #007aff;
+            }
+          }
+        }
+      }
+    }
   }
 </style>

components/applyPurchase/PublishApply.vue

@@ -64,6 +64,7 @@
               v-model="applyObj.deadline"
               type="date"
               :picker-options="pickerOptions"
+              :class="{'error': !validObj.deadline}"
               size="mini">
             </el-date-picker>
           </div>
@@ -150,24 +151,31 @@
         return index === 0 ? 1 : index < 3 ? 2 : 3
       },
       goPublish: function () {
-        this.$store.dispatch('applyPurchase/publishPurchaseApply', this.applyObj)
-//        this.emptyForm()
+        if (this.checkAll()) {
+          this.$http.post('/seek/saveOneSeekPurchase', this.applyObj)
+            .then(response => {
+              this.$message.success('发布成功')
+              this.emptyForm()
+              this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: 1, count: 10})
+            }, error => {
+              console.log(error)
+              this.$message.error('发布失败')
+            })
+        } else {
+          this.$message.error('请填写正确的信息')
+        }
       },
       checkCode: function () {
         this.validObj.code = this.applyObj.code && this.applyObj.code !== ''
+        return this.validObj.code
       },
       checkBrand: function () {
         this.validObj.brand = this.applyObj.brand && this.applyObj.brand !== ''
+        return this.validObj.brand
       },
-//      code: true,
-//      brand: true,
-//      unitPrice: true,
-//      encapsulation: true,
-//      produceDate: true,
-//      amount: true,
-//      deadline: true
       checkUnitPrice: function () {
         this.validObj.unitPrice = this.applyObj.unitPrice === '' ? true : this.applyObj.unitPrice > 0 && this.applyObj.unitPrice < 100000000
+        return this.validObj.unitPrice
       },
 //      checkEncapsulation: function () {
 //        this.validObj.encapsulation = this.applyObj.encapsulation && this.applyObj.encapsulation !== ''
@@ -177,10 +185,15 @@
 //      },
       checkAmount: function () {
         this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 100000000
+        return this.validObj.amount
+      },
+      checkAll: function () {
+        return this.checkCode() && this.checkBrand() && this.checkUnitPrice() && this.checkAmount() && this.checkDeadline()
+      },
+      checkDeadline: function () {
+        this.validObj.deadline = this.applyObj.deadline && this.applyObj.deadline !== ''
+        return this.validObj.deadline
       },
-//      checkDeadline: function () {
-//        this.validObj.deadline = this.applyObj.deadline && this.applyObj.deadline !== ''
-//      },
       onUnitPriceInput: function () {
         if (this.applyObj.unitPrice < 0) {
           this.applyObj.unitPrice = 0
@@ -274,10 +287,6 @@
               position: absolute;
               height: 20px;
               background: url('/images/applyPurchase/select.png')no-repeat right;
-              appearance:none;
-              -moz-appearance:none;
-              -webkit-appearance:none;
-              -ms-appearance:none;
               & + input {
                 padding-left: 34px;
               }
@@ -295,17 +304,6 @@
                 border-color: #f4645f!important;
               }
             }
-            .el-date-editor--date{
-              width: 110px;
-              .el-icon-date {
-                display: none;
-              }
-              .el-input__inner {
-                height: 20px;
-                border-radius: 0;
-                border: 1px solid #c9c9c9 !important;
-              }
-            }
           }
         }
         >a {
@@ -431,4 +429,20 @@
       }
     }
   }
+  .el-date-editor--date{
+    width: 110px;
+    &.error {
+      input {
+        border: 1px solid #f4645f !important;
+      }
+    }
+  }
+  .el-icon-date {
+    display: none;
+  }
+  .el-input__inner {
+    height: 20px;
+    border-radius: 0;
+    border: 1px solid #c9c9c9;
+  }
 </style>

store/applyPurchase.js

@@ -1,15 +1,5 @@
 import axios from '~plugins/axios'
 
-function loadPurchaseManList ({commit}, params = {}) {
-  commit('purchaseManList/REQUEST_PURCHASEMAN')
-  return axios.get('/seek/getSeekPageInfo', {params})
-    .then(response => {
-      commit('purchaseManList/GET_PURCHASEMAN_SUCCESS', response.data)
-    }, err => {
-      commit('purchaseManList/GET_PURCHASEMAN_FAILURE', err)
-    })
-}
-
 export const actions = {
 // 采购商列表
   loadPurchaseManList ({ commit }, params = {}) {
@@ -43,15 +33,6 @@ export const actions = {
       }, err => {
         commit('goodPurchaseMan/GET_GOODPURCHASE_FAILURE', err)
       })
-  },
-  // 发布求购
-  publishPurchaseApply ({ commit }, params = {}) {
-    return axios.put('/seek/saveOneSeekPurchase', params)
-      .then(response => {
-        return Promise.all([
-          loadPurchaseManList({ commit }, {page: 1, count: 10})
-        ])
-      })
   }
 }