求购报价排序

components/applyPurchase/ApplyInfo.vue

@@ -10,12 +10,27 @@
     </div>
     <div class="apply-info-list">
       <p>
-        <span>发布时间<img src="/images/applyPurchase/sort-arrow.png" alt=""></span>
+        <span>发布时间
+          <a href="javascript:void(0)" @click="sortListByParam('releaseDate')">
+            <i class=" fa fa-long-arrow-up" :class="{active: sorting.releaseDate == 'ASC'}"></i>
+            <i class=" fa fa-long-arrow-down" :class="{active: sorting.releaseDate == 'DESC'}"></i>
+          </a>
+        </span>
         <span>买家</span>
         <span>型号</span>
         <span>品牌</span>
-        <span>截止时间<img src="/images/applyPurchase/sort-arrow.png" alt=""></span>
-        <span>已报价<img src="/images/applyPurchase/sort-arrow.png" alt=""></span>
+        <span>截止时间
+          <a href="javascript:void(0)" @click="sortListByParam('deadline')">
+            <i class=" fa fa-long-arrow-up" :class="{active: sorting.deadline == 'ASC'}"></i>
+            <i class=" fa fa-long-arrow-down" :class="{active: sorting.deadline == 'DESC'}"></i>
+          </a>
+        </span>
+        <span>已报价
+          <a href="javascript:void(0)" @click="sortListByParam('offerAmount')">
+            <i class=" fa fa-long-arrow-up" :class="{active: sorting.offerAmount == 'ASC'}"></i>
+            <i class=" fa fa-long-arrow-down" :class="{active: sorting.offerAmount == 'DESC'}"></i>
+          </a>
+        </span>
         <span>操作</span>
       </p>
       <ul>
@@ -89,7 +104,8 @@
           produceDate: '',
           spId: ''
         },
-        keyWord: ''
+        keyWord: '',
+        sorting: {}
       }
     },
     components: {
@@ -154,7 +170,7 @@
         }
       },
       resetList: function () {
-        this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: this.nowPage, count: this.pageSize, keyWord: this.keyWord})
+        this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: this.nowPage, count: this.pageSize, keyWord: this.keyWord, sorting: this.sorting})
       },
       resetSayPrice: function () {
         this.sayPriceObj = {
@@ -188,6 +204,19 @@
       },
       searchList: function () {
         this.resetList()
+      },
+      sortListByParam: function (param) {
+        if (this.sorting[param]) {
+          if (this.sorting[param] === 'ASC') {
+            this.$set(this.sorting, param, 'DESC')
+          } else {
+            this.$delete(this.sorting, param)
+          }
+        } else {
+          this.sorting = {}
+          this.$set(this.sorting, param, 'ASC')
+        }
+        this.resetList()
       }
     }
   }
@@ -263,10 +292,13 @@
         span {
           display: inline-block;
           text-align: center;
-          img {
-            width: 15px;
-            height: 14px;
-            margin:  0 0 3px 5px;
+          a {
+            i {
+              color: #333;
+              &.active {
+                color: #5078cb;
+              }
+            }
           }
           &:nth-child(1) {
             width: 186px;