页面修改

src/pages/usercenter/demandlist.vue

 <style>
-  .demandlist{
+  .demandlist {
     padding: 30px 20px;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
   }
-  .order-header{
+
+  .order-header {
     display: flex;
     align-items: flex-start;
     margin: 20px 0;
   }
-  .order-header .order_title{
+
+  .order-header .order_title {
     margin-right: 20px;
     font-size: 25px;
     color: #666;
     font-weight: 400;
   }
+
   .order-header .type-item {
     margin: 0 15px;
     cursor: pointer;
   }
-  .order-header .type-item a{
+
+  .order-header .type-item a {
     font-size: 16px;
     padding: 0 2px 12px;
     text-decoration: none;
   }
-  .type-item .is-acted{
+
+  .type-item .is-acted {
     color: #00afff;
     border-bottom: 2px solid #00afff;
   }
-  .type-bar{
+
+  .type-bar {
     display: flex;
     align-items: center;
-    margin:0;
-    padding:0;
+    margin: 0;
+    padding: 0;
   }
-  .type-bar li{
+
+  .type-bar li {
     list-style-type: none;
   }
-  .order_link{
+
+  .order_link {
     display: block;
     padding: 20px 25px;
   }
-  .order-list li{
+
+  .order-list li {
     margin-bottom: 15px;
     font-size: 0;
     background-color: #fff;
-    box-shadow: 0 2px 4px 0 rgba(10,8,8,.5);
-    transition: transform .2s ease,box-shadow .2s ease;
+    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
+    transition: transform .2s ease, box-shadow .2s ease;
   }
-  .order_link .order_tour{
+
+  .order_link .order_tour {
     font-size: 16px;
     padding-right: 10px;
     width: calc(100% - 90px);
     display: inline-block;
     vertical-align: middle;
   }
-  .tour-name{
+
+  .tour-name {
     margin-bottom: 5px;
     color: #333;
   }
-  .order_link .order-status{
+
+  .order_link .order-status {
     font-size: 15px;
     display: inline-block;
     vertical-align: middle;
     color: #999;
   }
+
   .order-list li .order-status:not(:last-child) {
-      margin-right: 20px;
+    margin-right: 20px;
   }
-  .order-status-ch{
-    width:90px;
-    color:#333;
-    text-align:center;
+
+  .order-status-ch {
+    width: 90px;
+    color: #333;
+    text-align: center;
     display: inline-block;
     vertical-align: middle;
   }
-  .order-status-tag{
+
+  .order-status-tag {
     padding: 2px 12px;
     background-color: #e2f0fb;
     color: #00afff;
@@ -84,41 +99,44 @@
     background-clip: padding-box;
     display: inline-block;
     vertical-align: middle;
-    font-size:13px;
+    font-size: 13px;
   }
-  @media only screen and (min-width: 768px){
+
+  @media only screen and (min-width: 768px) {
     .order-list li:hover {
-        -webkit-transform: translate(0,-4px);
-        -moz-transform: translate(0,-4px);
-        -ms-transform: translate(0,-4px);
-        -o-transform: translate(0,-4px);
-        transform: translate(0,-4px);
-        -webkit-box-shadow: 0 4px 25px 0 rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,.1);
-        -moz-box-shadow: 0 4px 25px 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.1);
-        box-shadow: 0 4px 25px 0 rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,.1);
+      -webkit-transform: translate(0, -4px);
+      -moz-transform: translate(0, -4px);
+      -ms-transform: translate(0, -4px);
+      -o-transform: translate(0, -4px);
+      transform: translate(0, -4px);
+      -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
+      -moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
+      box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
     }
   }
-  .demandlist .items-center{
+
+  .demandlist .items-center {
     justify-content: center;
   }
+
 </style>
 <template>
   <q-page>
     <div class="demandlist">
       <div class="order-header">
-        <div class="order_title">我的訂單</div>
+        <div class="order_title">我的需求單</div>
         <ul class="type-bar">
           <li class="type-item">
-            <a :class="{'is-acted':toPend==1}" @click="toPend=1">待處理</a>
+            <a :class="{'is-acted':toPend==0}" @click="clickItem(0)">待處理</a>
           </li>
           <li class="type-item">
-            <a :class="{'is-acted':toPend==2}" @click="toPend=2">處理中</a>
+            <a :class="{'is-acted':toPend==1}" @click="clickItem(1)">處理中</a>
           </li>
           <li class="type-item">
-            <a :class="{'is-acted':toPend==3}" @click="toPend=3">已完成</a>
+            <a :class="{'is-acted':toPend==2}" @click="clickItem(2)">已完成</a>
           </li>
           <li class="type-item">
-            <a :class="{'is-acted':toPend==4}" @click="toPend=4">已取消</a>
+            <a :class="{'is-acted':toPend==4}" @click="clickItem(4)">已取消</a>
           </li>
         </ul>
       </div>
@@ -141,13 +159,8 @@
             </div>
           </a>
         </li>
-        <q-pagination
-          v-if="pageCount>1"
-          v-model="qMsg.PageIndex"
-          :max="pageCount"
-          @input="getdemandList()"
-          :direction-links="true"
-        >
+        <q-pagination v-if="pageCount>1" v-model="qMsg.PageIndex" :max="pageCount" @input="getdemandList()"
+          :direction-links="true">
         </q-pagination>
       </ul>
     </div>
@@ -162,10 +175,11 @@
           PageIndex: 1,
           PageSize: 10,
           CreateBy: 0,
+          DemandStatus: 0,
         },
         DataList: [],
-        pageCount:0,
-        toPend:1
+        pageCount: 0,
+        toPend: 0,
       };
     },
     created() {
@@ -181,14 +195,19 @@
       }
     },
     methods: {
+      clickItem(index) {
+        this.toPend = index;
+        this.qMsg.DemandStatus = index;
+        this.getdemandList()
+      },
       getdemandList() {
+        this.DataList = [];
         this.apipost(
           "ws_get_GetServicePageList", this.qMsg,
           res => {
-            console.log("getdemandList", res.data.data);
             if (res.data.resultCode == 1) {
-              this.DataList=res.data.data.pageData;
-              this.pageCount=res.data.data.pageCount;
+              this.DataList = res.data.data.pageData;
+              this.pageCount = res.data.data.pageCount;
             }
           },
           err => {}