修改

src/pages/usercenter/orderlist.vue

@@ -57,6 +57,7 @@
     background-color: #fff;
     box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
     transition: transform .2s ease, box-shadow .2s ease;
+    cursor: pointer;
   }
 
   .order_link .order_tour {
@@ -132,7 +133,7 @@
         </ul>
       </div>
       <ul class="order-list">
-        <li v-for="(item,index) in DataList" :key="index">
+        <li v-for="(item,index) in DataList" :key="index" @click="CommonJump('/orderlistInfo/'+item.orderId,{})">
           <a class="order_link">
             <div class="order_tour">
               <div class="tour-name">

src/pages/usercenter/orderlistInfo.vue

+<style>
+  .order_detail {
+    margin: 0 auto 20px;
+    width: 100%;
+    max-width: 800px;
+    padding: 40px 20px;
+  }
+
+  .order_content {
+    color: #666;
+    font-size: 15px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
+  }
+
+  .order_header {
+    display: flex;
+    align-items: center;
+    background-color: #00afff;
+  }
+
+  .header_content {
+    flex-basis: 60%;
+    padding: 30px;
+    color: #fff;
+    font-weight: 600;
+  }
+
+  .tour_code {
+    margin-bottom: 5px;
+  }
+
+  .tour_name {
+    font-size: 22px;
+  }
+
+  .order_content .d_list {
+    padding: 20px 30px;
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  .order_content .d_list:not(:last-child) {
+    border-bottom: 1px solid #eee;
+  }
+
+  .d_list .d_row {
+    padding: 10px 0;
+    flex: 1 50%;
+  }
+
+  .d_row .d_title {
+    display: block;
+    color: #333;
+    padding: 0 5px;
+  }
+
+  .d_content {
+    padding-top: 2px;
+    color: #999;
+    padding: 0 5px;
+  }
+
+  .d-block-title {
+    padding-bottom: 10px;
+    font-weight: 700;
+    color: #333;
+  }
+
+  .d-row-between {
+    display: flex;
+    padding: 5px 0;
+    flex: 1 100%;
+    justify-content: space-between;
+  }
+
+  .order-price .d-title {
+    display: flex;
+    flex-basis: 85px;
+  }
+
+  .total-price {
+    margin-top: 5px;
+    padding-top: 10px;
+    border-top: 1px dashed #eee;
+    font-weight: 700;
+  }
+
+  .d-Mytitle {
+    display: flex;
+    flex-basis: 85px;
+    color: #333;
+  }
+
+  .total-price b {
+    color: #ff9a14;
+    font-size: 24px;
+    line-height: 1;
+  }
+
+  .d_titleBtm {
+    color: #333;
+    padding: 0 5px;
+  }
+
+  .d_contentBtm {
+    padding-top: 2px;
+    color: #999;
+    padding: 0 5px;
+  }
+
+  .detail-footer {
+    display: flex;
+    padding: 0 10px;
+  }
+
+  .detail-footer>* {
+    flex: 1;
+    margin: 20px 10px;
+  }
+
+</style>
+<template>
+  <q-page>
+    <div class="order_detail">
+      <div class="order_content">
+        <div class="order_header">
+          <div class="header_content">
+            <div class="tour_code">{{InfoData.OrderId}}</div>
+            <div class="tour_name">
+              123
+            </div>
+          </div>
+        </div>
+        <div class="d_list">
+          <div class="d_row">
+            <div class="d_title">
+              <i class="iconfont icontext"></i> 訂購日期
+            </div>
+            <div class="d_content">{{toTime(InfoData.CreateDate)}}</div>
+          </div>
+          <div class="d_row">
+            <div class="d_title">
+              <i class="iconfont iconhangbanxinxicopy"></i> 出團日期
+            </div>
+            <div class="d_content">2020/07/06</div>
+          </div>
+          <div class="d_row">
+            <div class="d_title">
+              <i class="iconfont icontime"></i> 訂單狀態
+            </div>
+            <div class="d_content">2020/07/06</div>
+          </div>
+          <div class="d_row">
+            <div class="d_title">
+              <i class="iconfont iconfazhuangtai"></i> 付款狀態
+            </div>
+            <div class="d_content">2020/07/06</div>
+          </div>
+        </div>
+        <div class="d_list order-price">
+          <div class="d-block-title">付款資訊</div>
+          <div class="d-row-between">
+            <div class="d-Mytitle">成人</div>
+            <div class="d_content">15,900</div>
+            <div class="d_content">X 1</div>
+            <div class="d-content">15,900</div>
+          </div>
+          <div class="d-row-between total-price">
+            <div class="d-Mytitle">總計</div>
+            <div class="d_content">
+              <b>15,900</b>
+            </div>
+          </div>
+        </div>
+        <div class="d_list">
+          <div class="d-row-between">
+            <div class="d_titleBtm">備註</div>
+            <div class="d_contentBtm">
+              {{InfoData.Remarks}}
+            </div>
+          </div>
+        </div>
+        <div class="detail-footer">
+          <q-btn color="primary" style="height:50px;font-size:17px;font-weight:bold;" label="前往付款" />
+          <q-btn color="amber" style="height:50px;font-size:17px;font-weight:bold;" label="填寫旅客資料" />
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+<script>
+  export default {
+    props: [],
+    data() {
+      return {
+        orderId: 0,
+        InfoData: {},
+      };
+    },
+    created() {
+      if (this.$route.params.id) {
+        this.orderId = this.$route.params.id;
+      }
+    },
+    mounted() {
+      this.getdemandInfo()
+    },
+    methods: {
+
+      getdemandInfo() {
+        if (this.orderId > 0) {
+          this.$q.loading.show()
+          this.apipost(
+            "sellorder_post_GetOrderEntity", {
+              ID: this.orderId
+            },
+            res => {
+              console.log(res, 'resss');
+              this.$q.loading.hide()
+              if (res.data.resultCode == 1) {
+                this.InfoData = res.data.data.model;
+                console.log("this.infoData", this.InfoData);
+              }
+            },
+            err => {}
+          );
+        }
+
+      },
+      toTime(date) {
+        if(date){
+          return date.replace("T", " ");
+        }
+      },
+    },
+  };
+
+</script>

src/router/routes.js

@@ -53,6 +53,11 @@ const routes = [{
         component: () =>
           import('pages/usercenter/orderlist.vue')
       },
+      {
+        path: '/orderlistInfo/:id', //订单详情
+        component: () =>
+          import('pages/usercenter/orderlistInfo.vue')
+      },
       {
         path: '/register', //用户注册
         component: () =>