siyu_app/pages/store/invoice/invoiceDetail.vue

<template>
	<view class="container">
		<view class="content-body">
			<view class="x-f info-item">
				<view class="label">开票类型</view><text>{{info.billType==1 ? "个人/非企业单位" : "企业单位"}}</text>
			</view>
			<view class="x-f info-item">
				<view class="label">购方名称</view><text>{{info.payerName}}</text>
			</view>
			<view class="x-f info-item">
				<view class="label">购方税号</view><text>{{info.payerTaxNo}}</text>
			</view>
			<view class="x-f info-item">
				<view class="label">开票金额</view><text v-show="info.orderAmount!=null">{{info.orderAmount}}元</text>
			</view>
			<view class="x-f info-item">
				<view class="label">相关订单</view>
				<!-- <text>{{info.orderNo}}</text> -->
				<view class="lookbtn x-ac" v-if="info.orderId" @click="handleOrder">查看</view>
			</view>
			<view class="x-start info-item">
				<view class="label">开票时间</view><text>{{info.invoiceTime}}</text>
			</view>
			<view class="x-start info-item">
				<view class="label">开票状态</view>
				<text class="tag tag_error" v-if="info.redStatus == '01'">作废</text>
				<template v-else>
					<text class="tag" :class="tagColor(info)">{{statusOption(info)}}</text>
				</template>
			</view>
			<view class="x-start info-item" v-if="info.failCause">
				<view class="label">失败原因</view><text>{{info.failCause}}</text>
			</view>
			<view class="info-item" v-if="info.imgUrls">
				<view class="x-start">
					<view class="label">发票图片</view>
					<text class="content-title">{{info.invoiceKind}}</text>
				</view>
				<image class="img" :src="info.imgUrls" mode="widthFix" @click="previewImage"></image>
			</view>
		</view>
		<view class="btnbox x-ac">
			<button class="downbtn x-c" v-if="info.imgUrls" @click="downFile(info.imgUrls)">下载图片</button>
			<!-- <button class="downbtn x-c" v-if="info.pdfUrl" @click="downFile(info.pdfUrl)">下载PDF</button> -->
		</view>
	</view>
</template>

<script>
	import {billInfo} from "@/api/store.js"
	export default {
		data() {
			return {
				id: "",
				info: {},
			}
		},
		computed: {
			// 开票状态0未开始2 :开票完成（ 最终状 态），
			// 其他状态分别为: 20:开票中; 21:开票成功签章中;22:开票失败;24: 开票成功签章失败;3:发票已作废 31: 发票作废中 
			// 备注：22、24状态时，无需再查询，请确认开票失败原因以及签章失败原因； 注：请以该状态码区分发票状态
			tagColor() {
				return (item)=> {
					const tagColor = {
						0: 'tag_info',
						2: 'tag_success',
						20: 'tag_info',
						21: 'tag_info',
						22: 'tag_error',
						24: 'tag_error',
						3: 'tag_error',
						31: 'tag_error',
					}
					return item ? tagColor[item.status] || 'tag_info' : 'tag_info' 
				}
			},
			statusOption() {
				return (item)=> {
					const status = {
						0: '未开始',
						2: '开票完成',
						20: '开票中',
						21: '开票成功签章中',
						22: '开票失败',
						24: '开票成功签章失败',
						3: '发票已作废',
						31: '发票作废中',
					}
					return item&&item.statusMsg ? item.status == 2 ? status[item.status] : item.statusMsg : status[item.status]
				}
			},
		},
		onLoad(option) {
			this.id= option.id
			this.getDetail()
		},
		methods: {
			previewImage() {
				uni.previewImage({
					urls: this.info.imgUrls.split(','),
				});
			},
			getDetail() {
				billInfo({id: this.id}).then(res=>{
					if(res.code == 200) {
						this.info = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			handleOrder() {
				uni.navigateTo({
					url: '/pages/store/storeOrderDetail?orderId='+this.info.orderId
				})
			},
			downFile(file) {
				uni.showLoading({
					title: "保存中..."
				})
				uni.downloadFile({
					url: file,
					fail: function(res) {
					  uni.showModal({
						title: '提示',
						content: '保存失败',
					  })
					  uni.hideLoading();
					},
					success: function(res) {
						var tempFilePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success:()=> {
							  uni.showToast({
								title: "保存成功",
								duration: 2000
							  })
							},
							fail:()=>{
							  console.log("保存失败");
							  uni.showToast({
									title: "保存失败",
									duration: 2000,
									icon: "error"
							  })
							  uni.hideLoading();
							},
							complete: function() {
							  uni.hideLoading();
							}
						})
					},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 24rpx;
	}
	.content-body {
		padding: 24rpx;
		border-radius: 16rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		word-break: break-all;
		.tag_info {
			color: #222222;
		}
		.tag_success {
			color: #67c23a;
		}
		.tag_error{
			color: #f56c6c;
		}
	}
	.lookbtn {
		min-width: 100rpx;
		padding: 4rpx 8rpx;
		// margin-left: 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 66rpx;
		border: 2rpx solid #aaa;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #aaa;
	}
	.img {
		margin-top: 20rpx;
		width: 100%;
		height: auto;
	}
	.btnbox {
		padding: 50rpx;
	}
	.info-item {
		padding: 16rpx 0;
		color: #222222;
	}
	.label {
		flex-shrink: 0;
		color: #9B9B9B;
		min-width: 160rpx;
	}
	.downbtn {
		width: 254rpx;
		height: 88rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		border: 2rpx solid #FF5C03;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #FF5C03;
		&::after {
			display: none;
		}
	}
</style>