|
@@ -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>
|