页面修改

src/pages/usercenter/orderinfo.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}}【{{InfoData.TCNUM}}({{InfoData.TCID}})】</div>
+            <div class="tour_name">
+              {{InfoData.Title}}
+            </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">{{InfoData.StartDate}}</div>
+          </div>
+          <div class="d_row">
+            <div class="d_title">
+              <i class="iconfont icontime"></i> 訂單狀態
+            </div>
+            <div class="d_content">{{InfoData.OrderStateStr}}</div>
+          </div>
+          <div class="d_row">
+            <div class="d_title">
+              <i class="iconfont iconfazhuangtai"></i> 付款狀態
+            </div>
+            <div class="d_content">{{InfoData.PayStateStr}}</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">{{InfoData.Unit_Price}}</div>
+            <div class="d_content">X{{InfoData.ManNum}}</div>
+            <div class="d-content">{{(InfoData.Unit_Price*InfoData.ManNum)}}
+            </div>
+          </div>
+          <div class="d-row-between">
+            <div class="d-Mytitle">小孩</div>
+            <div class="d_content"> {{InfoData.Unit_Price+modelPrice.BabyChargePrice-modelPrice.DiscountPrice}}</div>
+            <div class="d_content">X{{InfoData.ChirdNum}}</div>
+            <div class="d-content">
+              {{(InfoData.Unit_Price+modelPrice.BabyChargePrice-modelPrice.DiscountPrice)*InfoData.ChirdNum}}</div>
+          </div>
+          <div class="d-row-between">
+            <div class="d-Mytitle">退签证</div>
+            <div class="d_content"></div>
+            <div class="d_content"></div>
+            <div class="d-content">-{{(modelPrice.BackVisaPrice)*(InfoData.ChirdNum+InfoData.ManNum)}}</div>
+          </div>
+          <div class="d-row-between">
+            <div class="d-Mytitle">小孩不占床</div>
+            <div class="d_content"></div>
+            <div class="d_content"></div>
+            <div class="d-content">-{{(InfoData.ChirdNum-InfoData.ChirdNeedBedNum)*modelPrice.ChildNoNeedPrice}}</div>
+          </div>
+          <div class="d-row-between total-price">
+            <div class="d-Mytitle">總計</div>
+            <div class="d_content">
+              <b>{{InfoData.PreferPrice}}</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" @click="CommonJump('/passengerList/'+InfoData.OrderId+'',{})"
+            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: {},
+        modelPrice: {},
+      };
+    },
+    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 => {
+              this.$q.loading.hide()
+              if (res.data.resultCode == 1) {
+                console.log(" res.data.data", res.data.data);
+                this.InfoData = res.data.data.model;
+                this.modelPrice = res.data.data.modelPrice;
+              }
+            },
+            err => {}
+          );
+        }
+      },
+      toTime(date) {
+        if (date) {
+          return date.replace("T", " ");
+        }
+      },
+    },
+  };
+
+</script>