交互

components/applyPurchase/ApplyInfo.vue

@@ -25,12 +25,26 @@
           <span>{{purchaseMan.tel | phone}}</span>
           <span>{{purchaseMan.code}}</span>
           <span>{{purchaseMan.brand}}</span>
-          <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
-          <span class="number-content"><span>{{purchaseMan.amount}}</span>&nbsp;条</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="btn-content">
             <a>联系买家</a>
             <a>我要报价</a>
           </span>
+          <div class="expand-content">
+            <div>
+              生产日期：{{purchaseMan.produceDate}}
+            </div>
+            <div>
+              封装：{{purchaseMan.encapsulation}}
+            </div>
+            <div>
+              采购数量：<span>{{purchaseMan.amount}}</span>个
+            </div>
+            <div>
+              单价预算：<span>￥{{purchaseMan.unitPrice}}</span>
+            </div>
+          </div>
         </li>
       </ul>
     </div>
@@ -61,8 +75,6 @@
         const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate() + ' '
         return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes
       },
-      deadLine: function (date) {
-      },
       phone: function (str) {
         return str.substring(0, 3) + '****' + str.substring(7, 11)
       }
@@ -76,6 +88,12 @@
       }
     },
     methods: {
+      getDay: function (timeStamp) {
+        return Math.floor(timeStamp / (1000 * 60 * 60 * 24))
+      },
+      getHours: function (timeStamp) {
+        return Math.floor((timeStamp / (1000 * 60 * 60)) % 24)
+      },
       listenPage: function (page) {
         this.nowPage = page
         this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: this.nowPage, count: this.pageSize})
@@ -195,6 +213,7 @@
             display: inline-block;
             text-align: center;
             color: #3c3c3c;
+            vertical-align: middle;
             &:nth-child(1) {
               width: 186px;
             }
@@ -232,6 +251,10 @@
                   color: #ff9a00;
                 }
               }
+              >img {
+                margin-bottom: 5px;
+                margin-right: 2px;
+              }
             }
             &.btn-content {
               a {
@@ -251,7 +274,7 @@
             }
           }
           .expand-content {
-            display: flex;
+            display: none;
             justify-content: space-between;
             padding: 0 236px 0 36px;
             background: #fffbf0;
@@ -263,8 +286,17 @@
               }
             }
           }
+          &:hover {
+            .expand-content {
+              display: flex;
+            }
+          }
         }
       }
     }
+    .page-wrap {
+      text-align: right;
+      float: none;
+    }
   }
 </style>

components/applyPurchase/PublishApply.vue

@@ -19,46 +19,46 @@
             <span>
               <i>*</i>型号：
             </span>
-            <input type="text" class="form-control" />
+            <input type="text" class="form-control" v-model="applyObj.code" maxlength="30" @blur="checkCode" required />
           </div>
           <div class="form-item">
             <span>
-              <i>*</i>型号：
+              <i>*</i>品牌：
             </span>
-            <input type="text" class="form-control" />
+            <input type="text" class="form-control" maxlength="20" v-model="applyObj.brand" required />
           </div>
           <div class="form-item">
             <span>
-              <i>*</i>型号：
+              单价预算：
             </span>
-            <input type="text" class="form-control" />
+            <input type="text" class="form-control" v-model="applyObj.unitPrice" />
           </div>
           <div class="form-item">
            <span>
-              型号：
+              封装：
             </span>
-            <input type="text" class="form-control" />
+            <input type="text" class="form-control" maxlength="20" v-model="applyObj.encapsulation" />
           </div>
           <div class="form-item">
             <span>
-              搜索搜索：
+              生产日期：
             </span>
-            <input type="text" class="form-control" />
+            <input type="text" class="form-control" v-model="applyObj.produceDate" />
           </div>
           <div class="form-item">
             <span>
-              <i>*</i>型号：
+              采购数量：
             </span>
-            <input type="text" class="form-control" />
+            <input type="text" class="form-control" v-model="applyObj.amount" />
           </div>
           <div class="form-item">
             <span>
-              <i>*</i>型号搜索：
+              <i>*</i>截止日期：
             </span>
-            <input type="text" class="form-control" />
+            <input type="text" class="form-control" v-model="applyObj.deadline" required />
           </div>
         </div>
-        <a>发布求购</a>
+        <a @click="goPublish()">发布求购</a>
       </div>
       <div class="publish-upload">
         <h1>批量发布</h1>
@@ -80,35 +80,11 @@
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>NO.<span>1</span><em>|</em></td>
-            <td>sssssssssssss<em>|</em></td>
-            <td>1000<em>|</em></td>
-            <td>10000</td>
-          </tr>
-          <tr>
-            <td>NO.<span>1</span><em>|</em></td>
-            <td>sssssssssssss<em>|</em></td>
-            <td>1000<em>|</em></td>
-            <td>10000</td>
-          </tr>
-          <tr>
-            <td>NO.<span>1</span><em>|</em></td>
-            <td>sssssssssssss<em>|</em></td>
-            <td>1000<em>|</em></td>
-            <td>10000</td>
-          </tr>
-          <tr>
-            <td>NO.<span>1</span><em>|</em></td>
-            <td>sssssssssssss<em>|</em></td>
-            <td>1000<em>|</em></td>
-            <td>10000</td>
-          </tr>
-          <tr>
-            <td>NO.<span>1</span><em>|</em></td>
-            <td>sssssssssssss<em>|</em></td>
-            <td>1000<em>|</em></td>
-            <td>10000</td>
+          <tr v-for="(rank, index) in purchaseRank">
+            <td><div>NO.<span>{{index + 1}}</span><i>|</i></div></td>
+            <td :title="rank.spCode"><div><span>{{rank.spCode}}</span><i>|</i></div></td>
+            <td :title="rank.spAmount"><div><span>{{rank.spAmount}}</span><i>|</i></div></td>
+            <td :title="rank.uuAmount"><div>{{rank.uuAmount}}</div></td>
           </tr>
         </tbody>
       </table>
@@ -117,14 +93,46 @@
 </template>
 <script>
   export default {
+    data () {
+      return {
+        applyObj: {
+          code: '',
+          brand: '',
+          unitPrice: '',
+          encapsulation: '',
+          produceDate: '',
+          amount: '',
+          deadline: ''
+        },
+        validObj: {
+          code: true,
+          brand: true,
+          unitPrice: true,
+          encapsulation: true,
+          produceDate: true,
+          amount: true,
+          deadline: true
+        }
+      }
+    },
     computed: {
       goodPurchaseMan () {
         return this.$store.state.applyPurchase.goodPurchaseMan.goodPurchaseMan.data
+      },
+      purchaseRank () {
+        return this.$store.state.applyPurchase.purchaseApplyRank.purchaseApplyRank.data
       }
     },
     methods: {
       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)
+      },
+      checkCode: function () {
       }
     }
   }
@@ -207,6 +215,7 @@
               height: 20px;
               line-height: 20px;
               border-radius: 2px;
+              padding: 0 3px;
             }
           }
         }
@@ -287,18 +296,45 @@
               }
             }
             td {
-              &:first-child {
+              &:nth-child(1) {
                 color: #f6682f;
                 font-size: 12px;
-                span {
-                 font-size: 16px;
+                >div {
+                  width: 62px;
+                  span {
+                    font-size: 16px;
+                  }
                 }
               }
-              em {
-                font-style: normal;
-                float: right;
-                color: #8b8b8b;
-                font-size: 14px;
+              &:nth-child(2) {
+                >div {
+                  width: 122px;
+                }
+              }
+              &:nth-child(3) {
+                >div {
+                  width: 55px;
+                }
+              }
+              &:nth-child(4) {
+                >div {
+                  width: 72px;
+                }
+              }
+              >div {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                padding: 0 8px;
+                position: relative;
+                i {
+                  font-style: normal;
+                  float: right;
+                  color: #8b8b8b;
+                  font-size: 14px;
+                  position: absolute;
+                  right: 0;
+                }
               }
             }
           }

store/applyPurchase.js

@@ -1,10 +1,21 @@
 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 = {}) {
     commit('purchaseManList/REQUEST_PURCHASEMAN')
-    return axios.get('/seek/getSeekPageInfo', params)
+    return axios.get('/seek/getSeekPageInfo', {params})
       .then(response => {
         commit('purchaseManList/GET_PURCHASEMAN_SUCCESS', response.data)
       }, err => {
@@ -30,6 +41,13 @@ export const actions = {
       }, err => {
         commit('goodPurchaseMan/GET_GOODPURCHASE_FAILURE', err)
       })
+  },
+  // 发布求购
+  publishPurchaseApply ({ commit }, params = {}) {
+    return axios.put('/seek/saveOneSeekPurchase', params)
+      .then(response => {
+        loadPurchaseManList()
+      })
   }
 }