shop_app/pages/mine/invoice/detail.vue

<template>
	<view class="whole" v-if="!isLoading">
		<view class="contBox">
			<view class="oneBox">
				<template v-if="info.status === 0">
					<view class="title">
						<up-icon name="clock" size="20" color="#888" />
						<text>申请中</text>
					</view>
					<view class="desc">商家正在处理，如有问题请咨询管家</view>
				</template>
				
				<view class="title" v-if="info.status == 1">
					<up-icon name="checkmark-circle-fill" size="24" color="#04BE02" />
					<text>申请成功</text>
				</view>
			</view>
			<view class="box">
				<view class="row">
					<view class="tit">开票金额</view>
					<view class="text">￥{{info.invoice_amount}}</view>
				</view>
				<view class="row">
					<view class="tit">发票类型</view>
					<view class="text">增值税电子发票</view>
				</view>
				<view class="row">
					<view class="tit">抬头类型</view>
					<view class="text">{{ info.body_type == 2 ? '企业' : '个人或事业单位'}}</view>
				</view>
				<view class="row">
					<view class="tit">发票内容</view>
					<view class="text">明细</view>
				</view>
				<view class="row">
					<view class="tit">发票抬头</view>
					<view class="text">{{info.body}}</view>
				</view>
				<view class="row" v-if="info.body_type == 2">
					<view class="tit">税号</view>
					<view class="text">{{info.tax_number}}</view>
				</view>
				<view class="row">
					<view class="tit">申请时间</view>
					<view class="text">{{info.created_at}}</view>
				</view>
			</view>
		</view>
		
		<view class="btnBox">
			<view class="btn" @click="showService = true">联系管家</view>
			<view class="btn" @click="handleDownload()" v-if="info.status == 1">下载发票</view>
		</view>
		
		<!-- 客服 -->
		<call-center :show="showService" @close="showService = false" :type="1" />
		
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast } from '@/components/common.js'
	import callCenter from '@/components/callCenter/index.vue'
	
	export default {
		components: { callCenter },
		setup() {
			const data = reactive({
				id: 0,
				info: {},
				isLoading: true,
				showService: false
			})
			
			async function getInfo() {
				await get(`/api/v1/orderInvoice/${data.id}`).then((res) => {
					data.info = res.data
					data.isLoading = false
				}).catch(() => {
					data.isLoading = false
				})
			}
			
			function handleDownload() {
				uni.downloadFile({
					url: data.info.invoice_url,
					fileName: data.info.body,
					success: res => {
						console.log(res)
						uni.openDocument({
						    filePath: res.tempFilePath,
							showMenu: true,
						    success: function (ress) {}
						})
					}
				})
			}
			
			return {
				...toRefs(data),
				getInfo,
				handleDownload
			}
		},
		async onLoad(options) {
			this.id = options.id
			// await this.$onLaunched
			await this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		width: 100%;
		height: 100vh;
		.contBox{
			padding: 24rpx;
			box-sizing: border-box;
			height: 100%;
			background-color: #f5f5f5;
			font-size: 28rpx;
			.oneBox{
				border-radius: 10rpx;
				background-color: #fff;
				padding: 30rpx 24rpx;
				color: #333;
				.title{
					color: #000;
					font-size: 36rpx;
					font-weight: 600;
					display: flex;
					align-items: center;
					text{
						margin-left: 10rpx;
					}
				}
				.desc{
					margin-top: 16rpx;
				}
			}
			.box{
				border-radius: 10rpx;
				background-color: #fff;
				margin-top: 24rpx;
				padding: 16rpx 0;
			}
			.row{
				padding: 16rpx 24rpx;
				font-size: 28rpx;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.tit{
					color: #000;
				}
			}
		}
		.btnBox{
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.btn{
				padding: 6rpx 20rpx;
				font-size: 26rpx;
				color: #666;
				border-radius: 8rpx;
				border: 1px solid #999;
				margin-left: 24rpx;
			}
		}
	}
</style>