style(KIP-7551): 支付订单详情页面

src/pages/parkingFee/components/base/parkingReceipt/parkingOrderDetail.vue

@@ -0,0 +1,101 @@
+<template>
+  <scroll-view class="scroll-Y" scroll-y >
+<!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
+
+    <div class="order-price">
+      <div class="text">开票金额</div>
+      <div class="price">￥{{ parFee }}元</div>
+    </div>
+    <div class="tab-header">缴费订单总数 <sapn class="red">{{orderList.length}}单</sapn></div>
+    <div class="order-list">
+      <div class="order-item" v-for="(item, index) in orderList" :key="index" @click="gotoDetail(item)">
+        <!-- 0：停车缴费  1:活动报名 2:积分兑换 -->
+        <template v-if="item.invoiceCategory === 0">
+          <div class="item-header">
+            <div>{{ item.orderNo }}-{{ item.carNo }}</div>
+            <div class="red">￥{{ getOrderItemPrice(item) }}</div>
+          </div>
+          <div class="item-bottom">
+            <div>{{ item.parkName }}</div>
+            <div>入场时间: {{ item.enterTime }}</div>
+            <div>停车时长: {{ item.serviceHour }}分钟</div>
+          </div>
+        </template>
+        <template v-else-if="item.invoiceCategory === 1"></template>
+        <template v-else-if="item.invoiceCategory === 2"></template>
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingOrderDetailJs from '../../../mixins/parkingReceipt/parkingOrderDetail'
+export default {
+  mixins:[parkingOrderDetailJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f2f2f2;
+  padding: 20px;
+  box-sizing: border-box;
+  .order-price {
+    border-radius: 10px;
+    text-align: center;
+    background-color: #ffffff;
+    padding: 20px 0;
+    margin-bottom: 20px;
+    .text {
+      color: #4D4D4D;
+      padding: 10px 0;
+    }
+    .price {
+      color: #000000;
+      font-weight: 400;
+      font-size: 32px;
+      padding: 10px 0;
+    }
+  }
+  .tab-header {
+    color: #808080;
+    padding: 10px 20px 20px;
+
+  }
+  .order-list {
+    .order-item {
+      border-radius: 20px;
+      background-color: #ffffff;
+      padding: 20px;
+      margin-bottom: 20px;
+      .item-header {
+        padding-top: 6px;
+        padding-bottom: 6px;
+        font-size: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: 400;
+        border-bottom: 1px solid #F8F8F8;
+        padding-bottom: 20px;
+        padding-left: 10px;
+      }
+      .item-bottom {
+        color: #808080;
+        padding-top: 20px;
+        padding-left: 10px;
+        > div {
+          padding: 10px 0;
+        }
+      }
+    }
+  }
+  .red {
+    color: #ED1C24;
+  }
+}
+</style>

src/pages/parkingFee/components/officeBlue/parkingReceipt/parkingOrderDetail.vue

@@ -0,0 +1,158 @@
+<template>
+  <scroll-view class="scroll-Y" scroll-y>
+    <div>
+      <div class="order-price">
+        <div class="text">开票金额</div>
+        <div class="price">￥{{ parFee }}元</div>
+      </div>
+      <div class="tab-header">缴费订单总数 <span class="red">{{ orderList.length }}单</span></div>
+      <div class="order-list">
+        <div class="order-item" v-for="(item, index) in orderList" :key="index" @click="gotoDetail(item)">
+          <!-- 0：停车缴费  1:活动报名 2:积分兑换 -->
+          <template v-if="item.invoiceCategory === 0">
+            <div class="item-header">
+              <div class="carNo">{{ item.carNo }}</div>
+              <div class="price">￥{{ getOrderItemPrice(item) }}</div>
+            </div>
+            <div class="item-bottom">
+              <div>{{ item.parkName }}</div>
+              <div>订单号: {{ item.orderNo }}</div>
+              <div>入场时间: {{ item.enterTime }}</div>
+              <div>停车时长: {{ item.serviceHour }}分钟</div>
+            </div>
+          </template>
+          <template v-else-if="item.invoiceCategory === 1"></template>
+          <template v-else-if="item.invoiceCategory === 2"></template>
+        </div>
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingOrderDetailJs from '../../../mixins/parkingReceipt/parkingOrderDetail'
+export default {
+  mixins:[parkingOrderDetailJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #F4F7FF;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .order-price {
+    // border-radius: 10px;
+    text-align: center;
+    // background-color: #ffffff;
+    padding: 30px;
+    margin-bottom: 36px;
+    // width: 690px;
+    // height: 189px;
+
+    background: #FAFBFF;
+    border-radius: 4px;
+    border: 1px solid #D8DAE0;
+
+    .text {
+      font-size: 30px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 42px;
+      margin-bottom: 20px;
+    }
+
+    .price {
+      // width: 158px;
+      // height: 67px;
+      font-size: 48px;
+      // font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      line-height: 67px;
+    }
+  }
+
+  .tab-header {
+    color: #808080;
+    padding: 10px 20px 20px;
+    // width: 690px;
+    // height: 189px;
+
+    // background: #FAFBFF;
+    // border-radius: 4px;
+    // border: 1px solid #D8DAE0;
+
+  }
+
+  .order-list {
+    .order-item {
+      // border-radius: 20px;
+      // background-color: #ffffff;
+      padding: 30px;
+      // margin-bottom: 20px;
+
+      // width: 690px;
+      // height: 345px;
+      background: #FAFBFF;
+      border-radius: 4px;
+      border: 1px solid #D8DAE0;
+
+      .item-header {
+        padding-top: 6px;
+        padding-bottom: 6px;
+        font-size: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: 400;
+        border-bottom: 1px solid #D8DAE0;
+        padding-bottom: 20px;
+        padding-left: 10px;
+
+        .carNo {
+          font-size: 36px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 50px;
+        }
+
+        .price {
+          font-size: 30px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 42px;
+        }
+      }
+
+      .item-bottom {
+        // color: #808080;
+        // padding-top: 20px;
+        // padding-left: 10px;
+
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+        padding-top: 8px;
+
+        > div {
+          padding-top: 12px;
+        }
+      }
+    }
+  }
+
+  .red {
+    color: #064C8A;
+  }
+}
+</style>
+
+
+

src/pages/parkingFee/mixins/parkingReceipt/parkingOrderDetail.js

@@ -0,0 +1,95 @@
+// const app = getApp()
+import uni from '@/utils/uniHooks';
+
+export default {
+  data() {
+    return {
+      picUrl: this.$picUrl,
+      order: {},
+      parFee: '',
+      id: '',
+      orderList: [],
+      optionsQuery: null,
+      useParkingOrderCache: false,
+    };
+  },
+  created() {
+    const options = this.$route.query;
+    this.optionsQuery = options;
+    this.id = options.id;
+    const useParkingOrderCache = options?.useParkingOrderCache || 'false';
+    // 如果是通过"发票申请"页面进入的，可以适用本地缓存直接获取数据
+    if (useParkingOrderCache == 'true') {
+      this.useParkingOrderCache = true;
+      const tempParkingOrder = this.$store.state?.tempParkingOrder;
+      this.parFee = (tempParkingOrder.invoiceAmount / 100).toFixed(2);
+      const orderList = tempParkingOrder.list;
+      orderList.forEach((item) => {
+        item.invoiceCategory = 0;
+      });
+      this.orderList = orderList;
+    } else {
+      this.useParkingOrderCache = false;
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      uni.setNavigationBarTitle({
+        title: '支付订单详情',
+      });
+    }, 300);
+    if (!this.useParkingOrderCache) {
+      this.getInvoicedDetail(this.id);
+    }
+  },
+  methods: {
+    gotoDetail(item) {
+      console.log(this.orderList);
+      // this.$router.push({ path: '/pages/parkingFee/parkingFeeDetailSuccess?orderNo=' + item.orderNo });
+    },
+    // 根据发票id获取支付记录详情信息
+    getInvoicedDetail(id) {
+      const self = this;
+      const data = {
+        id: id,
+      };
+      self.$md(data);
+      uni.request({
+        url:
+          self.$baseURL + 'api/1.0/invoice/myParkOrderListByInvoiceId?id=' + id,
+        method: 'POST',
+        data: data,
+        header: JSON.parse(uni.getStorageSync('handleUser')),
+        success: (res) => {
+          console.log('获取订单详情信息', res.data);
+          if (res.data.code === 0) {
+            self.order = res.data.data.list[0];
+            self.parFee = (res.data.data.invoiceAmount / 100).toFixed(2);
+            self.orderList = res.data.data.list;
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              duration: 2000,
+              icon: 'none',
+            });
+          }
+        },
+        fail: () => {
+          uni.showToast({
+            title: '服务器开小差了呢，请您稍后再试',
+            icon: 'none',
+          });
+        },
+      });
+    },
+    getOrderItemPrice(item) {
+      if (this.useParkingOrderCache) {
+        const payFee = item.serviceFee;
+        return (payFee / 100).toFixed(2);
+      } else {
+        const payFee = item.invoiceAmount;
+        return (payFee / 100).toFixed(2);
+      }
+    },
+  },
+};

src/pages/parkingFee/parkingReceipt/parkingOrderDetail.vue

@@ -1,248 +1,18 @@
 <template>
-  <scroll-view class="scroll-Y" scroll-y>
-   <div>
-     <div class="order-price">
-       <div class="text">开票金额</div>
-       <div class="price">￥{{ parFee }}元</div>
-     </div>
-     <div class="tab-header">缴费订单总数 <span class="red">{{ orderList.length }}单</span></div>
-     <div class="order-list">
-       <div class="order-item" v-for="(item, index) in orderList" :key="index" @click="gotoDetail(item)">
-         <!-- 0：停车缴费  1:活动报名 2:积分兑换 -->
-         <template v-if="item.invoiceCategory === 0">
-           <div class="item-header">
-             <div class="carNo">{{ item.carNo }}</div>
-             <div class="price">￥{{ getOrderItemPrice(item) }}</div>
-           </div>
-           <div class="item-bottom">
-             <div>{{ item.parkName }}</div>
-             <div>订单号: {{ item.orderNo }}</div>
-             <div>入场时间: {{ item.enterTime }}</div>
-             <div>停车时长: {{ item.serviceHour }}分钟</div>
-           </div>
-         </template>
-         <template v-else-if="item.invoiceCategory === 1"></template>
-         <template v-else-if="item.invoiceCategory === 2"></template>
-       </div>
-     </div>
-   </div>
-  </scroll-view>
+  <div>
+    <component :is="componentName"></component>
+  </div>
 </template>
 
 <script>
-// const app = getApp()
-import uni from '@/utils/uniHooks'
-
+import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingOrderDetail.vue';
+import baseParkingFeeCom from '../components/base/parkingReceipt/parkingOrderDetail.vue';
+import baseMixins from '../mixins/base'
 export default {
-  data() {
-    return {
-      picUrl: this.$picUrl,
-      order: {},
-      parFee: '',
-      id: '',
-      orderList: [],
-      optionsQuery: null,
-      useParkingOrderCache: false,
-    }
-  },
-  created() {
-    const options = this.$route.query
-    this.optionsQuery = options;
-    this.id = options.id;
-    const useParkingOrderCache = options?.useParkingOrderCache || 'false';
-    // 如果是通过"发票申请"页面进入的，可以适用本地缓存直接获取数据
-    if ( useParkingOrderCache == 'true' ) {
-      this.useParkingOrderCache = true;
-      const tempParkingOrder = this.$store.state?.tempParkingOrder;
-      this.parFee = ( tempParkingOrder.invoiceAmount / 100 ).toFixed(2);
-      const orderList = tempParkingOrder.list;
-      orderList.forEach(item => {
-        item.invoiceCategory = 0;
-      });
-      this.orderList = orderList;
-    } else {
-      this.useParkingOrderCache = false;
-    }
-  },
-  mounted() {
-    setTimeout(() => {
-      uni.setNavigationBarTitle({
-        title: '支付订单详情',
-      });
-    },300);
-    if ( !this.useParkingOrderCache ) {
-      this.getInvoicedDetail(this.id);
-    }
+  mixins:[baseMixins],
+  components: {
+    officeBlueCom,
+    baseParkingFeeCom,
   },
-  methods: {
-    gotoDetail( item ) {
-      console.log(this.orderList);
-      // this.$router.push({ path: '/pages/parkingFee/parkingFeeDetailSuccess?orderNo=' + item.orderNo });
-    },
-    // 根据发票id获取支付记录详情信息
-    getInvoicedDetail( id ) {
-      const self = this;
-      const data = {
-        id: id
-      }
-      self.$md(data);
-      uni.request({
-        url: self.$baseURL + 'api/1.0/invoice/myParkOrderListByInvoiceId?id=' + id,
-        method: 'POST',
-        data: data,
-        header: JSON.parse(uni.getStorageSync('handleUser')),
-        success: ( res ) => {
-          console.log('获取订单详情信息',res.data)
-          if ( res.data.code === 0 ) {
-            self.order = res.data.data.list[0];
-            self.parFee = ( res.data.data.invoiceAmount / 100 ).toFixed(2);
-            self.orderList = res.data.data.list;
-          } else {
-            uni.showToast({
-              title: res.data.msg,
-              duration: 2000,
-              icon: 'none'
-            });
-          }
-        },
-        fail: () => {
-          uni.showToast({
-            title: '服务器开小差了呢，请您稍后再试',
-            icon: 'none'
-          });
-        },
-      });
-    },
-    getOrderItemPrice( item ) {
-      if ( this.useParkingOrderCache ) {
-        const payFee = item.serviceFee;
-        return ( payFee / 100 ).toFixed(2)
-      } else {
-        const payFee = item.invoiceAmount;
-        return ( payFee / 100 ).toFixed(2)
-      }
-    },
-  }
-}
+};
 </script>
-
-<style lang="less" scoped>
-.scroll-Y {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: #F4F7FF;
-  padding: 20px;
-  box-sizing: border-box;
-
-  .order-price {
-    // border-radius: 10px;
-    text-align: center;
-    // background-color: #ffffff;
-    padding: 30px;
-    margin-bottom: 36px;
-    // width: 690px;
-    // height: 189px;
-
-    background: #FAFBFF;
-    border-radius: 4px;
-    border: 1px solid #D8DAE0;
-
-    .text {
-      font-size: 30px;
-      font-weight: 400;
-      color: #333333;
-      line-height: 42px;
-      margin-bottom: 20px;
-    }
-
-    .price {
-      // width: 158px;
-      // height: 67px;
-      font-size: 48px;
-      // font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      color: #333333;
-      line-height: 67px;
-    }
-  }
-
-  .tab-header {
-    color: #808080;
-    padding: 10px 20px 20px;
-    // width: 690px;
-    // height: 189px;
-
-    // background: #FAFBFF;
-    // border-radius: 4px;
-    // border: 1px solid #D8DAE0;
-
-  }
-
-  .order-list {
-    .order-item {
-      // border-radius: 20px;
-      // background-color: #ffffff;
-      padding: 30px;
-      // margin-bottom: 20px;
-
-      // width: 690px;
-      // height: 345px;
-      background: #FAFBFF;
-      border-radius: 4px;
-      border: 1px solid #D8DAE0;
-
-      .item-header {
-        padding-top: 6px;
-        padding-bottom: 6px;
-        font-size: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border: 400;
-        border-bottom: 1px solid #D8DAE0;
-        padding-bottom: 20px;
-        padding-left: 10px;
-
-        .carNo {
-          font-size: 36px;
-          font-weight: 600;
-          color: #333333;
-          line-height: 50px;
-        }
-
-        .price {
-          font-size: 30px;
-          font-weight: 600;
-          color: #333333;
-          line-height: 42px;
-        }
-      }
-
-      .item-bottom {
-        // color: #808080;
-        // padding-top: 20px;
-        // padding-left: 10px;
-
-        font-size: 28px;
-        font-weight: 400;
-        color: #999999;
-        line-height: 40px;
-        padding-top: 8px;
-
-        > div {
-          padding-top: 12px;
-        }
-      }
-    }
-  }
-
-  .red {
-    color: #064C8A;
-  }
-}
-</style>
-
-
-