|
|
@@ -1,306 +1,18 @@
|
|
|
<template>
|
|
|
- <scroll-view class="scroll-Y" scroll-y>
|
|
|
- <div class="part">
|
|
|
- <div class="part-item lines">
|
|
|
- <span class="part-item-key">电子邮箱</span>
|
|
|
- <span class="part-item-value">{{ order.mailbox }}</span>
|
|
|
- </div>
|
|
|
- <div class="part-item lines">
|
|
|
- <span class="part-item-key" style="color: transparent">电子邮箱</span>
|
|
|
- <span class="part-item-value"></span>
|
|
|
- </div>
|
|
|
- <div class="invoice-img" v-if="order.invoiceUrl">
|
|
|
- <!-- <img class="img" :src="picUrl + order.invoiceImgUrl" mode="widthFix"/>
|
|
|
- <uni-view class="img-index">1/1</uni-view> -->
|
|
|
- <!-- <uni-view :class="{download: true, 'blue-download': custTypeId === 1, 'green-download': custTypeId === 2}" @click="downloadOrder(order.invoiceUrl)">
|
|
|
- <img mode="widthFix" :src="downloadBtnIcon"/>
|
|
|
- <span>下载发票</span>
|
|
|
- </uni-view> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="footer">
|
|
|
- <div
|
|
|
- :class="{
|
|
|
- btn: true,
|
|
|
- 'push-again-btn': true,
|
|
|
- 'blue-push-again-btn': custTypeId === 1,
|
|
|
- 'green-push-again-btn': custTypeId === 2,
|
|
|
- }"
|
|
|
- @click="pushAgain(order.invoiceUrl)"
|
|
|
- >再次推送</div
|
|
|
- >
|
|
|
- </div>
|
|
|
- </scroll-view>
|
|
|
+ <div>
|
|
|
+ <component :is="componentName"></component>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// const app = getApp()
|
|
|
- const app = {}
|
|
|
-import downloadBtnIcon from '../static/images/download.png'
|
|
|
-import { mapState } from 'vuex'
|
|
|
-import uni from '@/utils/uniHooks'
|
|
|
+import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingInvoiceImage.vue';
|
|
|
+import baseParkingFeeCom from '../components/base/parkingReceipt/parkingInvoiceImage.vue';
|
|
|
+import baseMixins from '../mixins/base'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- picUrl: this.$picUrl,
|
|
|
- downloadBtnIcon: downloadBtnIcon,
|
|
|
- globalData: app.globalData,
|
|
|
- setTime: 60,
|
|
|
- timer: null,
|
|
|
- order: {},
|
|
|
- preUrl: '',
|
|
|
- }
|
|
|
+ mixins:[baseMixins],
|
|
|
+ components: {
|
|
|
+ officeBlueCom,
|
|
|
+ baseParkingFeeCom,
|
|
|
},
|
|
|
- created() {
|
|
|
- this.order = JSON.parse(this.$route.query.order)
|
|
|
- // this.order = {
|
|
|
- // mailbox: '1212'
|
|
|
- // }
|
|
|
- console.log('获取的发票信息', this.order)
|
|
|
- // 埋点本地化
|
|
|
- this.preUrl = uni.getStorageSync('previousUrl')
|
|
|
- uni.setStorageSync(
|
|
|
- 'previousUrl',
|
|
|
- '/pages/parkingFee/parkingReceipt/parkingInvoiceImage.vue'
|
|
|
- )
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- setTimeout(() => {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: '停车发票',
|
|
|
- });
|
|
|
- }, 300);
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- if (this.timer) {
|
|
|
- clearTimeout(this.timer)
|
|
|
- this.timer = null
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState({
|
|
|
- custTypeId: (state) => state.custTypeId,
|
|
|
- }),
|
|
|
- },
|
|
|
- methods: {
|
|
|
- downloadOrder(url) {
|
|
|
- uni.downloadFile({
|
|
|
- url: url,
|
|
|
- success: function (res) {
|
|
|
- console.log('下载文档成功')
|
|
|
- var filePath = res.tempFilePath
|
|
|
- uni.openDocument({
|
|
|
- filePath: filePath,
|
|
|
- success: function (res) {
|
|
|
- console.log('打开文档成功')
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- pushAgain(url) {
|
|
|
- const self = this
|
|
|
- if (self.setTime >= 0 && self.timer) {
|
|
|
- uni.showToast({
|
|
|
- title: '邮件已发送，请于1分钟后再试',
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- return false
|
|
|
- }
|
|
|
- if (self.timer && self.setTime < 0) {
|
|
|
- clearTimeout(self.timer)
|
|
|
- self.timer = null
|
|
|
- }
|
|
|
- self.timer = setTimeout(() => {
|
|
|
- self.setTime--
|
|
|
- }, 1000)
|
|
|
- const data = {
|
|
|
- attachments: [
|
|
|
- {
|
|
|
- name: '嘉里停车发票.pdf',
|
|
|
- invoiceId: self.order.id,
|
|
|
- url: url,
|
|
|
- },
|
|
|
- ],
|
|
|
- html: true,
|
|
|
- sendTo: 'string',
|
|
|
- sendTos: [self.order.mailbox],
|
|
|
- subject: self.order.invoiceTitleName + '的电子发票',
|
|
|
- text: '停车发票',
|
|
|
- }
|
|
|
- self.$md(data)
|
|
|
- uni.request({
|
|
|
- url: self.$baseURL + 'sms/email',
|
|
|
- method: 'POST',
|
|
|
- data: data,
|
|
|
- header: JSON.parse(uni.getStorageSync('handleUser')),
|
|
|
- success: (res) => {
|
|
|
- console.log('推送', res.data)
|
|
|
- if (res.data.code === 0) {
|
|
|
- // 埋点
|
|
|
- self.sensorsClick('$ClickSendAgain', {
|
|
|
- redirect_url: '',
|
|
|
- invoice_url: url,
|
|
|
- subject: self.order.invoiceTitleName + '的电子发票',
|
|
|
- })
|
|
|
- uni.showToast({
|
|
|
- title: '邮件已发送邮箱，请注意查收',
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.data.msg,
|
|
|
- duration: 2000,
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
- uni.showToast({
|
|
|
- title: '服务器开小差了呢，请您稍后再试',
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- // 埋点方法
|
|
|
- sensorsClick(eventName, params) {
|
|
|
- let optionsQuery = uni.getStorageSync('options_query')
|
|
|
- let fixedParams = {
|
|
|
- cta_itemno: '',
|
|
|
- cta_name: '',
|
|
|
- previous_url: this.preUrl || '',
|
|
|
- $brand_id:uni.getStorageSync('groupId'),
|
|
|
- $location: uni.getStorageSync('mallid'),
|
|
|
- $channel: optionsQuery.channel || '',
|
|
|
- // $utm_lbs: this.optionsQuery.utm_lbs || '',
|
|
|
- $utm_channel: optionsQuery.utm_channel || '',
|
|
|
- $utm_method: optionsQuery.utm_method || '',
|
|
|
- $utm_source: optionsQuery.utm_source || '',
|
|
|
- $utm_function: optionsQuery.utm_function || '',
|
|
|
- $utm_user: optionsQuery.utm_user || '',
|
|
|
- },
|
|
|
- finalParams = Object.assign(fixedParams, params)
|
|
|
- this.$sensors.track(eventName, finalParams)
|
|
|
- },
|
|
|
- },
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-// @import '../../../styles/mixins.less';
|
|
|
-.scroll-Y {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 100vh;
|
|
|
- background: #F4F7FF;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- .part {
|
|
|
- background-color: #ffffff;
|
|
|
- padding: 0 30px;
|
|
|
- border-radius: 20px;
|
|
|
-
|
|
|
- background: #FAFBFF;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #D8DAE0;
|
|
|
-
|
|
|
- .part-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 20px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- .part-item-key {
|
|
|
- color: #4c4c4d;
|
|
|
- }
|
|
|
- .part-item-value {
|
|
|
- color: #6f6f70;
|
|
|
- text-align: right;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- > img {
|
|
|
- width: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .invoice-img {
|
|
|
- width: 100%;
|
|
|
- padding: 30px 0;
|
|
|
- .img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .img-index {
|
|
|
- width: 100px;
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- background-color: #b3b3b3;
|
|
|
- border-radius: 50px;
|
|
|
- margin: 20px auto;
|
|
|
- }
|
|
|
- .download {
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border: 1px solid #662d91;
|
|
|
- width: 300px;
|
|
|
- height: 70px;
|
|
|
- border-radius: 50px;
|
|
|
- margin: 0 auto;
|
|
|
- > img {
|
|
|
- width: 32px;
|
|
|
- }
|
|
|
- > span {
|
|
|
- margin-left: 10px;
|
|
|
- color: #662d91;
|
|
|
- }
|
|
|
- }
|
|
|
- .blue-download {
|
|
|
- .color-download('blue');
|
|
|
- }
|
|
|
- .green-download {
|
|
|
- .color-download('green');
|
|
|
- }
|
|
|
- .color-download(@value) {
|
|
|
- @color: 'color-@{value}';
|
|
|
- border-color: @@color;
|
|
|
- > span {
|
|
|
- color: @@color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .footer {
|
|
|
- padding-top: 20px;
|
|
|
- .btn {
|
|
|
- margin: 20px 60px;
|
|
|
- color: #ffffff;
|
|
|
- border-radius: 50px;
|
|
|
- text-align: center;
|
|
|
- padding: 20px 0;
|
|
|
- }
|
|
|
- .push-again-btn {
|
|
|
- background: #064C8A;
|
|
|
- border-radius: 45px;
|
|
|
- // background-image: linear-gradient(to right, #7d4ea1, #40397c);
|
|
|
- }
|
|
|
- .blue-push-again-btn {
|
|
|
- .color-background-color('blue');
|
|
|
- }
|
|
|
- .green-push-again-btn {
|
|
|
- .color-background-color('green');
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.lines {
|
|
|
- border-bottom: 2px solid #ececec;
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-
|
|
|
-
|
John-Hong