guanmao-wxapp/pages/mine/order/invoice.vue

<template>
	<view class="app-container">
		<view class="card">
			<view class="row">发票状态：<text>{{detail.status ? '已':'待'}}开票</text></view>
		</view>
		<view class="card">
			<view class="row">订单编号：<text>{{detail.orderId}}</text></view>
			<view class="row">下单时间：<text>{{detail.createTime}}</text></view>
		</view>
		<view class="card">
			<view class="row">发票类型：<text>{{detail.taxType ? '增值税专用发票':'增值税普通发票'}}</text></view>
			<view class="row">发票抬头：<text>{{detail.name}}</text></view>
			<view class="row">发票内容：<text>{{detail.content}}</text></view>
			<!-- <view class="row">发票税号：<text>{{detail.taxNo ? detail.taxNo : ''}}</text></view> -->
		</view>
		
		<view class="bottom-container">
			<view class="button white" @tap="look">查看发票</view>
			<view class="button white" @tap="sendEmail">发送邮箱</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invoiceId: null, // 发票id
				detail: {}, // 发票详情
			}
		},
		
		onLoad({id}) {
			this.invoiceId = id;
			this.getInvoiceDetail();
		},
		
		methods: {
			getInvoiceDetail() {
				this.$axios({
					url: '/user/order/tax/detail',
					method: 'get',
					params: {
						orderTaxId: this.invoiceId
					}
				}).then(res => {
					this.detail = res.data;
				})
			},
			
			// 查看发票
			look() {
				let that = this;
				if(!this.detail.taxLink) {
					return this.$toast('发票链接无效');
				}
				uni.downloadFile({
					url: this.detail.taxLink,
					success: function (res) {
						uni.openDocument({
							filePath: res.tempFilePath,
							fileType: 'pdf',
							success(res) {
								console.log('打开文档成功');
							},
							fail() {
								that.$toast('查看发票失败');
							}
						});
					}
				});
			},
			
			// 发送邮箱
			sendEmail() {
				this.$axios({
					url: '/user/order/tax/send',
					params: {
						orderTaxId: this.invoiceId
					}
				}).then(res => {
					this.$successToast('发送成功');
				})
			}
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 10rpx 20rpx;
		.row {
			line-height: 60rpx;
		}
	}
	
	.bottom-container {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1px solid #F4F2F2;
		.button {
			width: 180rpx;
			height: 56rpx;
			border-radius: 56rpx;
			text-align: center;
			line-height: 56rpx;
			font-size: 28rpx;
			margin-left: 20rpx;
			&:first-child {
				margin-left: 0;
			}
			&.gray {
				color: #999999;
				border: 1px solid #999999;
			}
			&.white {
				color: #FF3F42;
				border: 1px solid #FF3F42;
			}
			&.red {
				color: #FFFFFF;
				border: 1px solid #FF3F42;
				background: #FF3F42;
			}
		}
	}
</style>