报价及发布表单提交

assets/scss/common.scss

@@ -634,13 +634,24 @@ a {
 .select-adder {
   background:url("../../static/images/all/xiala.png") right no-repeat #fff !important;
   background-position-x: 100% !important;
+
+}
+select {
   /*将默认的select选择框样式清除*/
   appearance:none;
   -moz-appearance:none;
   -webkit-appearance:none;
   -ms-appearance:none;
-
 }
-.select-adder::-ms-expand {
+select::-ms-expand {
   display: none;
 }
+
+/*input number 箭头*/
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"]{
+  -moz-appearance: textfield;
+}

components/applyPurchase/ApplyInfo.vue

@@ -20,16 +20,16 @@
         <span>操作</span>
       </p>
       <ul>
-        <li v-for="purchaseMan in purchaseManList.content">
+        <li v-for="purchaseMan in purchaseManList.content" :class="{'active': purchaseMan.active}">
           <span>{{purchaseMan.releaseDate | date}}</span>
           <span>{{purchaseMan.tel | phone}}</span>
           <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=""><span :style="purchaseMan.offerAmount > 10 ? 'color: #ff9a00': ''">{{purchaseMan.amount}}</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="btn-content">
             <a>联系买家</a>
-            <a>我要报价</a>
+            <a @click="sayPrice(purchaseMan)">我要报价</a>
           </span>
           <div class="expand-content">
             <div>
@@ -45,6 +45,28 @@
               单价预算：<span>￥{{purchaseMan.unitPrice}}</span>
             </div>
           </div>
+          <div class="say-price">
+            <div>报价</div>
+            <div>
+              <i>*</i>单价
+              <select>
+                <option value="RMB">$</option>
+                <option value="USD">￥</option>
+              </select>
+              <input type="text" class="form-control">
+            </div>
+            <div>
+              <i>*</i>交期&nbsp;
+              <input type="text" class="form-control">&nbsp;-&nbsp;<input type="text" class="form-control">&nbsp;天
+            </div>
+            <div>
+              生产日期&nbsp;<input type="text" class="form-control">
+            </div>
+            <div>
+              <span @click="cancelSayPrice(purchaseMan)">取消</span>
+              <span>提交</span>
+            </div>
+          </div>
         </li>
       </ul>
     </div>
@@ -97,6 +119,12 @@
       listenPage: function (page) {
         this.nowPage = page
         this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: this.nowPage, count: this.pageSize})
+      },
+      sayPrice: function (purchaseMan) {
+        purchaseMan.active = true
+      },
+      cancelSayPrice: function (purchaseMan) {
+        purchaseMan.active = false
       }
     }
   }
@@ -291,6 +319,102 @@
               display: flex;
             }
           }
+          .say-price {
+            background-color: #e7eef9;
+            display: none;
+            >div {
+              display: inline-block;
+              position: relative;
+              height: 64px;
+              line-height: 64px;
+              &:nth-child(1) {
+                width: 282px;
+                background: url('/images/applyPurchase/say-price.png')no-repeat;
+                text-align: center;
+                margin-right: 44px;
+              }
+              &:nth-child(2) {
+                margin-right: 39px;
+                input {
+                  width: 118px;
+                  height: 26px;
+                  border: 1px solid #5392f9;
+                }
+                select {
+                  position: absolute;
+                  top: 19px;
+                  width: 32px;
+                  height: 26px;
+                  background: url('/images/applyPurchase/arrow-down.png')no-repeat right center;
+                  -webkit-box-shadow: none;
+                  -moz-box-shadow: none;
+                  box-shadow: none;
+                  border: {
+                    left: none;
+                    top: none;
+                    bottom: none;
+                    right: 1px solid #5392f9;
+                    bottom-left-radius: 4px;
+                    top-left-radius: 4px;
+                  }
+                  color: #5392f9;
+                  & + input {
+                    padding-left: 34px;
+                  }
+                }
+              }
+              &:nth-child(3) {
+                margin-right: 37px;
+                input {
+                  width: 32px;
+                  height: 26px;
+                }
+              }
+              &:nth-child(4) {
+                margin-right: 132px;
+                input {
+                  width: 118px;
+                  height: 26px;
+                }
+              }
+              &:nth-child(5) {
+                span {
+                  width: 71px;
+                  height: 28px;
+                  line-height: 28px;
+                  text-align: center;
+                  display: inline-block;
+                  cursor: pointer;
+                  &:first-child {
+                    background: #dedddd;
+                    margin-right: 10px;
+                  }
+                  &:last-child {
+                    background: #fa4701;
+                    color: #fff;
+                  }
+                }
+              }
+              i {
+                color: #e41515;
+                position: relative;
+                top: 2px;
+                right: 3px;
+              }
+            }
+          }
+          &.active {
+            border-color: #f71026;
+            .expand-content {
+              display: flex;
+              -webkit-box-shadow: none;
+              -moz-box-shadow: none;
+              box-shadow: none;
+            }
+            .say-price {
+              display: block;
+            }
+          }
         }
       }
     }

components/applyPurchase/PublishApply.vue

@@ -19,19 +19,23 @@
             <span>
               <i>*</i>型号：
             </span>
-            <input type="text" class="form-control" v-model="applyObj.code" maxlength="30" @blur="checkCode" required />
+            <input type="text" class="form-control" :class="{'error': !validObj.code}" v-model="applyObj.code" maxlength="30" @blur="checkCode" />
           </div>
           <div class="form-item">
             <span>
               <i>*</i>品牌：
             </span>
-            <input type="text" class="form-control" maxlength="20" v-model="applyObj.brand" required />
+            <input type="text" class="form-control" :class="{'error': !validObj.brand}" maxlength="20" v-model="applyObj.brand" @blur="checkBrand" />
           </div>
           <div class="form-item">
             <span>
               单价预算：
             </span>
-            <input type="text" class="form-control" v-model="applyObj.unitPrice" />
+            <select v-model="applyObj.currency">
+              <option value="RMB">￥</option>
+              <option value="USD">$</option>
+            </select>
+            <input type="number" class="form-control" :class="{'error': !validObj.unitPrice}" v-model="applyObj.unitPrice" @blur="checkUnitPrice" @input="onUnitPriceInput" />
           </div>
           <div class="form-item">
            <span>
@@ -49,13 +53,19 @@
             <span>
               采购数量：
             </span>
-            <input type="text" class="form-control" v-model="applyObj.amount" />
+            <input type="number" class="form-control" :class="{'error': !validObj.amount}" v-model="applyObj.amount" @blur="checkAmount" @input="onAmountInput" />
           </div>
           <div class="form-item">
             <span>
               <i>*</i>截止日期：
             </span>
-            <input type="text" class="form-control" v-model="applyObj.deadline" required />
+            <!--<input type="text" class="form-control" readonly :class="{'error': !validObj.deadline}" v-model="applyObj.deadline" @blur="checkDeadline" />-->
+            <el-date-picker
+              v-model="applyObj.deadline"
+              type="date"
+              :picker-options="pickerOptions"
+              size="mini">
+            </el-date-picker>
           </div>
         </div>
         <a @click="goPublish()">发布求购</a>
@@ -99,6 +109,7 @@
           code: '',
           brand: '',
           unitPrice: '',
+          currency: 'RMB',
           encapsulation: '',
           produceDate: '',
           amount: '',
@@ -108,10 +119,16 @@
           code: true,
           brand: true,
           unitPrice: true,
-          encapsulation: true,
-          produceDate: true,
-          amount: true,
-          deadline: true
+//          encapsulation: true,
+//          produceDate: true,
+          amount: true
+//          deadline: true
+        },
+        pickerOptions: {
+          disabledDate (time) {
+            // 大于等于今天 小于三个月后
+            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
+          }
         }
       }
     },
@@ -124,15 +141,57 @@
       }
     },
     methods: {
+      emptyForm: function () {
+        for (let attr in this.applyObj) {
+          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
+        }
+      },
       getRankBg: function (index) {
         return index === 0 ? 1 : index < 3 ? 2 : 3
       },
       goPublish: function () {
-//        console.log(this)
-//        let obj = this.applyObj
         this.$store.dispatch('applyPurchase/publishPurchaseApply', this.applyObj)
+//        this.emptyForm()
       },
       checkCode: function () {
+        this.validObj.code = this.applyObj.code && this.applyObj.code !== ''
+      },
+      checkBrand: function () {
+        this.validObj.brand = this.applyObj.brand && this.applyObj.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
+      },
+//      checkEncapsulation: function () {
+//        this.validObj.encapsulation = this.applyObj.encapsulation && this.applyObj.encapsulation !== ''
+//      },
+//      checkProduceDate: function () {
+//        this.validObj.produceDate = this.applyObj.produceDate && this.applyObj.produceDate !== ''
+//      },
+      checkAmount: function () {
+        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 100000000
+      },
+//      checkDeadline: function () {
+//        this.validObj.deadline = this.applyObj.deadline && this.applyObj.deadline !== ''
+//      },
+      onUnitPriceInput: function () {
+        if (this.applyObj.unitPrice < 0) {
+          this.applyObj.unitPrice = 0
+        } else if (this.applyObj.unitPrice.toString().indexOf('.') !== -1 && this.applyObj.unitPrice.toString().split('.')[1].length > 6) {
+          this.applyObj.unitPrice = Number(this.applyObj.unitPrice).toFixed(6)
+        }
+      },
+      onAmountInput: function () {
+        if (this.applyObj.amount < 0) {
+          this.applyObj.amount = 0
+        }
       }
     }
   }
@@ -210,12 +269,42 @@
                 color: #e41515;
               }
             }
+            select {
+              width: 32px;
+              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;
+              }
+            }
             input {
               width: 111px;
               height: 20px;
               line-height: 20px;
               border-radius: 2px;
               padding: 0 3px;
+              box-shadow: none;
+              -webkit-box-shadow: none;
+              -moz-box-shadow: none;
+              &.error {
+                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;
+              }
             }
           }
         }

plugins/element-ui.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Message, Breadcrumb, BreadcrumbItem, Tree, Pagination, Upload, Dialog } from 'element-ui'
+import { Message, Breadcrumb, BreadcrumbItem, Tree, Pagination, Upload, Dialog, DatePicker } from 'element-ui'
 
 Vue.use(Breadcrumb)
 Vue.use(BreadcrumbItem)
@@ -7,5 +7,6 @@ Vue.use(Tree)
 Vue.use(Pagination)
 Vue.use(Upload)
 Vue.use(Dialog)
+Vue.use(DatePicker)
 
 Vue.prototype.$message = Message

store/applyPurchase.js

@@ -1,7 +1,6 @@
 import axios from '~plugins/axios'
 
-// 载入历史记录
-function loadPurchaseManList ({ commit }, params = {}) {
+function loadPurchaseManList ({commit}, params = {}) {
   commit('purchaseManList/REQUEST_PURCHASEMAN')
   return axios.get('/seek/getSeekPageInfo', {params})
     .then(response => {
@@ -17,6 +16,9 @@ export const actions = {
     commit('purchaseManList/REQUEST_PURCHASEMAN')
     return axios.get('/seek/getSeekPageInfo', {params})
       .then(response => {
+        for (let i = 0; i < response.data.content.length; i++) {
+          response.data.content[i].active = false
+        }
         commit('purchaseManList/GET_PURCHASEMAN_SUCCESS', response.data)
       }, err => {
         commit('purchaseManList/GET_PURCHASEMAN_FAILURE', err)
@@ -46,7 +48,9 @@ export const actions = {
   publishPurchaseApply ({ commit }, params = {}) {
     return axios.put('/seek/saveOneSeekPurchase', params)
       .then(response => {
-        loadPurchaseManList()
+        return Promise.all([
+          loadPurchaseManList({ commit }, {page: 1, count: 10})
+        ])
       })
   }
 }