修改

quasar.conf.js

@@ -146,7 +146,8 @@ module.exports = function( /* ctx */ ) {
                 'QSpinner',
                 'QDialog',
                 'QCardActions',
-                'QCheckbox'
+                'QCheckbox',
+                'QPagination'
             ],
 
             directives: [

src/pages/usercenter/demandlist.vue

+<style>
+  .demandlist{
+    padding: 30px 20px;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .order-header{
+    display: flex;
+    align-items: flex-start;
+    margin: 20px 0;
+  }
+  .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{
+    font-size: 16px;
+    padding: 0 2px 12px;
+    text-decoration: none;
+  }
+  .type-item .is-acted{
+    color: #00afff;
+    border-bottom: 2px solid #00afff;
+  }
+  .type-bar{
+    display: flex;
+    align-items: center;
+    margin:0;
+    padding:0;
+  }
+  .type-bar li{
+    list-style-type: none;
+  }
+  .order_link{
+    display: block;
+    padding: 20px 25px;
+  }
+  .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;
+  }
+  .order_link .order_tour{
+    font-size: 16px;
+    padding-right: 10px;
+    width: calc(100% - 90px);
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .tour-name{
+    margin-bottom: 5px;
+    color: #333;
+  }
+  .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;
+  }
+  .order-status-ch{
+    width:90px;
+    color:#333;
+    text-align:center;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .order-status-tag{
+    padding: 2px 12px;
+    background-color: #e2f0fb;
+    color: #00afff;
+    border-radius: 50px;
+    background-clip: padding-box;
+    display: inline-block;
+    vertical-align: middle;
+    font-size:13px;
+  }
+  @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);
+    }
+  }
+  .demandlist .items-center{
+    justify-content: center;
+  }
+</style>
 <template>
   <q-page>
     <div class="demandlist">
-      需求单列表
+      <div class="order-header">
+        <div class="order_title">我的訂單</div>
+        <ul class="type-bar">
+          <li class="type-item">
+            <a :class="{'is-acted':toPend==1}" @click="toPend=1">待處理</a>
+          </li>
+          <li class="type-item">
+            <a :class="{'is-acted':toPend==2}" @click="toPend=2">處理中</a>
+          </li>
+          <li class="type-item">
+            <a :class="{'is-acted':toPend==3}" @click="toPend=3">已完成</a>
+          </li>
+          <li class="type-item">
+            <a :class="{'is-acted':toPend==4}" @click="toPend=4">已取消</a>
+          </li>
+        </ul>
+      </div>
+      <ul class="order-list">
+        <li v-for="(item,index) in DataList" :key="index">
+          <a class="order_link">
+            <div class="order_tour">
+              <div class="tour-name">
+                {{item.TripTitle}}
+              </div>
+              <div class="order-status">
+                訂購日期：{{item.CreateDateStr}}
+              </div>
+              <div class="order-status">
+                需求單編號：{{item.Id}}
+              </div>
+            </div>
+            <div class="order-status-ch">
+              <div class="order-status-tag">{{item.DemandStatusStr}}</div>
+            </div>
+          </a>
+        </li>
+        <q-pagination
+          v-if="pageCount>1"
+          v-model="qMsg.PageIndex"
+          :max="pageCount"
+          @input="getdemandList()"
+          :direction-links="true"
+        >
+        </q-pagination>
+      </ul>
     </div>
   </q-page>
 </template>
@@ -16,6 +164,8 @@
           CreateBy: 0,
         },
         DataList: [],
+        pageCount:0,
+        toPend:1
       };
     },
     created() {
@@ -37,7 +187,8 @@
           res => {
             console.log("getdemandList", res.data.data);
             if (res.data.resultCode == 1) {
-
+              this.DataList=res.data.data.pageData;
+              this.pageCount=res.data.data.pageCount;
             }
           },
           err => {}