H5_QiCaiYao/pages_tool/invoice/detail.vue

<template>
	<div class="view">
		<div class="top card">
			<div class="left">发票凭证</div>
			<div class="right" @click="showInvoice">
				查看
				<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
			</div>
		</div>

		<div class="info card">
			<!-- <div class="row">
				<div class="title">发票抬头</div>
				<div class="desc">{{data.header}}</div>
			</div> -->

			<div class="row">
				<div class="title">发票编号</div>
				<div class="desc">{{invoiceData.invoice_code}}</div>
			</div>
			<!-- 
			<div class="row">
				<div class="title">发票金额</div>
				<div class="desc">{{invoiceData.invoice_money}}元</div>
			</div> -->
			<div class="row">
				<div class="title">申请时间</div>
				<div class="desc">{{ $util.timeStampTurnTime(invoiceData.create_time, 'date') }}</div>
			</div>

			<div>
				<div class="row">
					<div class="title">发票备注</div>
					<div class="desc">{{invoiceData.invoice_remark  || '无'}}</div>
				</div>
				<!-- <div class="row">
					<div class="title">公司电话</div>
					<div class="desc">{{data.phoneNumber}}</div>
				</div>
				<div class="row">
					<div class="title">公司开户行</div>
					<div class="desc">{{data.bank}}</div>
				</div>
				<div class="row">
					<div class="title">开户行账号</div>
					<div class="desc">{{data.bankNumber}}</div>
				</div> -->
			</div>
			<!-- 
			<div class="footer" @click="showAll=!showAll">
				<div v-if="showAll">
					收起
					<image :src="$util.img('/upload/weapp/user/arrow-top.png')" mode=""></image>

				</div>
				<div v-else>
					展开
					<image :src="$util.img('/upload/weapp/user/arrow-bottom.png')" mode=""></image>
				</div>
			</div> -->



		</div>

		<!-- 
		<div class="count_email card">
			<div class="count_left">
				电子邮箱
			</div>
			<div class="count_right">
				{{invoiceData.invoice_email}}
			</div>
		</div> -->


		<u-overlay :show="showImage" @click="showImage = false">
			<div class="invoice_img">
				<div class="image">
					<image :src="$util.img(invoiceData.invoice_image)" mode="widthFix"></image>
				</div>
				<!-- <div class="btnBox">
					<div>返回</div>
					<div>下载</div>
				</div> -->
			</div>

		</u-overlay>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				showAll: false,
				showImage: false,
				data: {
					header: '北京某某科技有限公司',
					id: '11023871733113',
					money: 20266,
					time: '2022-12-24 18:16:02',
					address: '北京朝阳区朝阳路888号',
					phoneNumber: '68882343',
					bank: '工商银行长青路支行',
					bankNumber: '202123131213',
					email: '4672347@qq.com',
					status: false
				},
				invoiceData: {}
			}
		},
		onLoad(option) {
			this.getOrderDetail(Number(option.order_id))
		},
		methods: {
			showInvoice() {
				//截取文件后缀名
				let suffix = this.invoiceData.invoice_image.substring(this.invoiceData.invoice_image.lastIndexOf(".") + 1);
				// pdf格式
				if (suffix == 'pdf') {
					uni.downloadFile({
						url: this.invoiceData.invoice_image,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						}
					});
				}
				//图片格式
				else {
					this.showImage = true;
				}
			},

			getOrderDetail(order_id) {
				this.$api.sendRequest({
					url: "/api/order/detail",
					data: {
						order_id
					},
					success: res => {
						this.invoiceData = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		padding: 0 32rpx 32rpx 32rpx;

		.top {
			display: flex;

			.left {
				flex-grow: 1;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.right {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #999999;

				image {
					margin-left: 5rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.info {
			.row {
				display: flex;
				margin-bottom: 24rpx;

				.title {
					width: 140rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

				}

				.desc {
					width: calc(100% - 140rpx);
					margin-left: 68rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					word-break: break-all
				}

			}

			.footer {
				margin-top: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				image {
					margin-left: 8rpx;
					position: relative;
					top: 4rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.count_email {
			display: flex;
			justify-content: space-between;

			.count_left {}

			.count_right {
				image {
					position: relative;
					top: 3rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.invoice_img {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.btnBox {
				width: 100%;
				margin-top: 48rpx;
				display: flex;
				justify-content: space-evenly;

				div {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 206rpx;
					height: 72rpx;
					background: rgba(162, 162, 162, 0.3);
					border-radius: 40rpx;


					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}

	}

	.card {
		margin-top: 24rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 32rpx;
	}
</style>