付款明細

src/pages/usercenter/order/orderPriceDetail.vue → src/pages/usercenter/order/carPriceDetail.vue

@@ -2,7 +2,81 @@
 
 </style>
 <template>
-    <div>价格详情</div>
+    <div>价格详情
+      <div
+      class="rounded-borders bg-white q-pa-md"
+      style="width: 300px"
+      :style="{
+        width:
+          $q.screen.width < 1200 || $q.platform.is.mobile
+            ? 'unset'
+            : '300px',
+        position:$q.platform.is.mobile?'unset':'sticky',
+        top:$q.platform.is.mobile?'unset':'50px',
+      }"
+    >
+      <div class="text-subtitle1 text-weight-bolder">付款明細</div>
+      <!-- <div class="q-mt-md text-grey-6">
+        <div class="row q-pb-xs no-wrap" v-if="AirportObj&&AirportObj.Name">
+          <div style="width: 80px">{{details.CarType==1?'接':'送'}}機機場：</div>
+          <div class="q-ml-md ellipsis-2-lines">{{AirportObj.Name}}</div>
+        </div>
+        <div class="row q-pb-xs no-wrap" v-if="AirportObj&&AirportObj.Name">
+          <div style="width: 80px">{{details.CarType==1?'抵達':'起飛'}}時間：</div>
+          <div class="q-ml-md ellipsis-2-lines">{{parameters.FlightTime}}</div>
+        </div>
+        <div class="row q-pb-xs no-wrap" v-if="parameters.GetonAddress">
+          <div style="width: 80px">上車點：</div>
+          <div class="q-ml-md ellipsis-2-lines">{{parameters.GetonAddress}}</div>
+        </div>
+        <div class="row q-pb-xs no-wrap" v-if="parameters.GetoffAddress">
+          <div style="width: 80px">下車點：</div>
+          <div class="q-ml-md ellipsis-2-lines">{{parameters.GetoffAddress}}</div>
+        </div>
+        <div class="row">
+          <div style="width: 80px">
+            接駁日期：</div>
+          <div class="q-ml-md">
+            {{parameters.OrderDate}}
+          </div>
+        </div>
+      </div>
+      <q-separator color="grey-2" class="q-my-md"/> -->
+      <div class="text-grey-9">
+        <!-- <div class="row q-mb-sm" v-if="chosenObj.Count>0&&CarObj">
+          <div class="col">{{CarObj.CarName}} x {{ chosenObj.Count }}</div>
+          <div>{{details.CurrencyCode}} {{ moneyFormat(OrderDate.originalB2CPrice,2) }}</div>
+        </div> -->
+        <hr
+          style="border: none; border-top: 1px dashed #eee !important"
+          class="bg-transparent q-mb-sm"
+        />
+        <div class="row q-mb-sm items-center">
+          <div class="col">總金額</div>
+          <div class="text-subtitle2 text-weight-bolder text-primary">
+            CNY {{ moneyFormat(sumPrice, 2) }}
+          </div>
+        </div>
+        <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
+        <div class="row q-mb-sm items-center">
+            <div class="col">優惠金額</div>
+            <div
+              class="text-subtitle2 text-weight-bolder text-teal"
+              v-if="DiscountsMoney > 0"
+            >
+              CNY - {{ moneyFormat(DiscountsMoney, 2) }}
+            </div>
+            <div class="text-grey-5" v-else>暫無優惠</div>
+          </div>
+        <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
+        <div class="row q-mb-sm items-center">
+          <div class="col">支付金額</div>
+          <div class="text-h6 text-weight-bolder text-primary product-price">{{details.CurrencyCode}} {{ moneyFormat(Money,2) }}</div>
+        </div>
+      </div>
+      
+    </div>
+    </div>
 </template>
 <script>
 export default {
@@ -12,7 +86,14 @@ export default {
             default: () => ({})
         }
     },
-    data() {},
+    data() {
+      return {
+        details: null,
+      sumPrice: 0,//总金额
+      DiscountsMoney: 0,//优惠金额
+      Money: 0, // 支付金額
+      }
+    },
     mounted() {
         this.getCarData()
         this.getCarOrder()
@@ -20,13 +101,14 @@ export default {
     methods: {
     //  获取团的详情
     getGroupData() {
-      this.$q.loading.show();
+      // this.$q.loading.show();
       this.apipost(
         "b2c_get_GetCarSingleProductDetail",
-        { ProductId: this.msg.configId },
+        { ProductId: this.orderInfo.GoodsId },
         (r) => {
           if (r.data.resultCode == 1) {
             this.dataList = r.data.data;
+            this.emitAddress()
           } else {
             this.$q.notify({
               type: "negative",
@@ -35,20 +117,21 @@ export default {
               timeout: 2000, // 以毫秒为单位; 0意味着没有超时
             });
           }
-          this.$q.loading.hide();
+          // this.$q.loading.hide();
         },
         null
       );
     },
     //  获取车的详情
     getCarData() {
-      this.$q.loading.show();
+      // this.$q.loading.show();
       this.apipost(
         "b2c_get_GetCarSingleProductDetail",
-        { ProductId: this.msg.configId },
+        { ProductId: this.orderInfo.GoodsId },
         (r) => {
           if (r.data.resultCode == 1) {
             this.dataList = r.data.data;
+            this.details = r.data.data;
           } else {
             this.$q.notify({
               type: "negative",
@@ -57,7 +140,7 @@ export default {
               timeout: 2000, // 以毫秒为单位; 0意味着没有超时
             });
           }
-          this.$q.loading.hide();
+          // this.$q.loading.hide();
         },
         null
       );
@@ -67,10 +150,11 @@ export default {
         this.$q.loading.show();
       this.apipost(
         "CarSingle_post_GetTYMyCarOrderInfo",
-        { OrderId: this.msg.configId },
+        { OrderId: this.orderInfo.ErpOrderId },
         (r) => {
           if (r.data.resultCode == 1) {
             this.dataList = r.data.data;
+            this.Money = r.data.data.Money;
           } else {
             this.$q.notify({
               type: "negative",
@@ -84,6 +168,11 @@ export default {
         null
       );
     
+    },
+    emitAddress() {
+      const {PlaceList} = this.dataList
+            PlaceList.findItem(item => item.id === this.id)
+            this.$emit('address', this.dataList)
     }
     }
 }

src/pages/usercenter/order/orderDetail.vue

@@ -94,7 +94,7 @@
           }">
             <componentsMap :AddressObj="detail"/>
           </div>
-          <orderPriceDetail v-if="detail.OrderNo" :orderInfo="detail"></orderPriceDetail>
+          <carPriceDetail v-if="detail.OrderNo" :orderInfo="detail"></carPriceDetail>
     </q-card>
     <div v-if="(!orderNo || orderNo == '') && !loading" class="text-center q-my-xl">
       <none-data
@@ -108,9 +108,9 @@
 
 <script>
 import componentsMap from "../../../components/car/Map.vue";
-import orderPriceDetail from './orderPriceDetail.vue'
+import carPriceDetail from './carPriceDetail.vue'
 export default {
-    components: {componentsMap, orderPriceDetail},
+    components: {componentsMap, carPriceDetail},
 data() {
     return {
         detail: {},
@@ -122,7 +122,7 @@ data() {
 },
 created() {},
 mounted() {
-    const {orderNo} = this.$route.query
+    const {orderNo} = this.$route.params
     if(orderNo) {
     this.getOrderDetail(orderNo)
     } else {

src/router/routes.js

@@ -195,7 +195,7 @@ const routes = [{
                     import ('pages/pay/paysuccess.vue')
             },
             {
-                path: '/orderinfo', //訂單詳情
+                path: '/orderinfo/:orderNo', //訂單詳情
                 meta: { title: '訂單詳情', isUserCenter: false, needLogin: true, },
                 component: () =>
                     import ('pages/usercenter/order/orderDetail.vue')