Merge pull request #538 from John-Hong/John/release-3.8.0/KIP-11923(停车发票支持在线查看PDF)

feat(KIP-11923): 停车发票支持在线查看pdf

src/pages/parkingFeeV2/mixins/parkingReceipt/parkingInvoice.js

@@ -23,6 +23,7 @@ export default {
         remark: "",
         invoiceTitleId: 0,
         invoiceTime: "",
+        invoiceUrl: "",
         invoiceTitle: {
             id: 0,
             titleName: "",
@@ -92,7 +93,12 @@ export default {
       try {
         const res = await invoicesDeatil(id)
         console.log('支付订单详情', res)
-          self.order = res;
+        self.order = res;
+        // TODO KIP-11923 发布前移除
+        self.order.invoiceUrl = [
+          'https://kip-public-qa.oss-cn-shanghai.aliyuncs.com/dea54e0cff544ace90564a9f715dc9df_99242000000001678918.pdf',
+          'https://kip-public-qa.oss-cn-shanghai.aliyuncs.com/a2a53363f2a245d69b7853dc04d49ba1_996922403177_08447684.pdf'
+        ]
       } catch {
         uni.showToast({
           title: '服务器开小差了呢，请您稍后再试',
@@ -139,9 +145,9 @@ export default {
       });
     },
     showInvoiceDetail() {
-      this.$router.push({
-        path: 'parkingInvoiceImage?order=' + JSON.stringify(this.order),
-      });
+        this.$router.push({
+          path: 'parkingInvoiceImage?order=' + JSON.stringify(this.order),
+        });
     },
   },
 };

src/pages/parkingFeeV2/mixins/parkingReceipt/parkingInvoiceImage.js

@@ -78,5 +78,23 @@ export default {
         });
       }
     },
+    downloadPdf() {
+      if(this.order.invoiceUrl.length > 1) {
+        this.$router.push({
+          path: 'parkingInvoiceImages?order=' + JSON.stringify(this.order),
+        });
+        return
+      }
+      if (window.__wxjs_environment === 'miniprogram') {              
+        wx.miniProgram.navigateTo({
+          url: `/pages/package-parkingFee/file?invoiceUrl=${encodeURIComponent(this.order.invoiceUrl)}`,
+        });
+      }
+      if (this.isAlipayClient) {
+        my?.navigateTo({
+          url: `/pages/package-parkingFee/file?invoiceUrl=${encodeURIComponent(this.order.invoiceUrl)}`,
+        })
+      }
+    }
   },
 };

src/pages/parkingFeeV2/parkingReceipt/parkingInvoiceImage.vue

@@ -25,6 +25,17 @@
       >
         再次推送
       </div>
+      <div
+        v-if="order && order.invoiceUrl.length"
+        :class="{
+          btn: true,
+          'push-again-btn': true,
+        }"
+        style="width:100%; margin:24px auto 0;"
+        @click="downloadPdf"
+      >
+        {{ order.invoiceUrl.length > 1 ? '下载更多发票' : "下载发票"}}
+      </div>
     </div>
   </scroll-view>
 </template>

src/pages/parkingFeeV2/parkingReceipt/parkingInvoiceImages.vue

@@ -0,0 +1,99 @@
+<!-- 更多发票预览 -->
+<template>
+    <div :class="['invoice-url-list', theme]">
+        <div class="invoice-url" v-for="item in invoiceUrl">
+            <div class="url-box">
+                <div class="title">发票号码:</div>
+                <div class="url">{{ getTitle(item) }}</div>
+            </div> <div class="btn" @click="dowloadPdf(item)">下载发票</div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import baseMixins from '../mixins/base'
+
+export default {
+    mixins: [baseMixins],
+    data() {
+        return {
+            order: {},
+            invoiceUrl: []
+        }
+    },
+    created() {
+        this.order = JSON.parse(this.$route.query.order);
+        this.invoiceUrl = this.order.invoiceUrl
+    },
+    methods:{
+        getTitle(fileUrl = '') {
+            if (!fileUrl) return '';
+            
+            // 使用更明确的正则表达式并处理匹配失败的情况
+            const match = fileUrl.match(/.*_(.*_.*)\.pdf$/);
+            const match2 = fileUrl.match(/.*_(.*)\.pdf$/);
+            if (match && match[1]) {
+                return match[1];
+            } else if(match2 && match2[1]){
+                return match2[1]
+            } else {
+                // 处理不匹配的情况，返回空字符串或其他默认值
+                return '';
+            }
+        },
+        dowloadPdf(invoiceUrl) {
+            if (window.__wxjs_environment === 'miniprogram') {              
+                wx.miniProgram.navigateTo({
+                url: `/pages/package-parkingFee/file?invoiceUrl=${encodeURIComponent(invoiceUrl)}`,
+                });
+            }
+            if (this.isAlipayClient) {
+                my?.navigateTo({
+                url: `/pages/package-parkingFee/file?invoiceUrl=${encodeURIComponent(invoiceUrl)}`,
+                })
+            }
+        }
+    }
+}
+</script>
+
+
+<style lang="less" scoped>
+.invoice-url-list {
+    padding: 24px;
+    .invoice-url {
+        padding: 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border: 1px solid var(--k-color-primary-02);
+        border-radius: 10px;
+        margin-bottom: 24px;
+        &:last-child {
+            margin-bottom: 0px;
+        }
+        .url-box {
+            font-size: 24px;
+            .title {
+                color: #333;
+                font-weight: 600;
+                font-size: 32px;
+                margin-bottom: 10px;
+            }
+            .url {
+                color: var(--k-color-primary-01);
+            }
+        }
+        .btn {
+            color: #ffffff;
+            font-size: 24px;
+            border-radius: 50px;
+            text-align: center;
+            padding: 10px 24px;
+            background: var(--k-color-primary-01);
+            border-radius: 45px;
+        }
+    }
+}
+</style>

src/routes/indexV2.js

@@ -31,6 +31,10 @@ export const routes = [
         path: '/parkingInvoiceImage',
         name: 'parkingInvoiceImage',
         component: () => import('@/pages/parkingFeeV2/parkingReceipt/parkingInvoiceImage.vue'),
+    },{
+        path: '/parkingInvoiceImages',
+        name: 'parkingInvoiceImages',
+        component: () => import('@/pages/parkingFeeV2/parkingReceipt/parkingInvoiceImages.vue'),
     },{
         path: '/parkingInvoice',
         name: 'parkingInvoice',