JP-ChargeTeam51/pages/MyInvoice/invoicePreview.vue

<template>
	<view >
		<ujp-navbar title="发票预览"></ujp-navbar>
		<view style="margin: 10px 0;">
			<H2>长按发票图片保存至本地</H2>
		</view>
		<view class="img-box" v-for="(item,i) in imagesz" :key="i">
			<img :src="item" alt="">	
		</view>
		
		<view class="btn">
				
<!-- 			<u-button shape="circle" v-if="imagesz.length"  @click="down('1')" style="color: #00b962;">下载图片</u-button>
 -->			<u-button shape="circle" v-if="invoiceInfo.pdf" @click="down('2')" type="success">下载PDF</u-button>
		</view>
		
	</view>
</template>

<script>

	import * as API from '@/apis/invoiceApi.js'
	export default {
		data() {
			return {
				id: '',
				imagesz:[],
				invoiceInfo:{},
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id;
				this.invoiceDetail();
			}
			
			
		},
		methods: {
			down(type){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})	
				var url=[];
				if(type==1){
					url=this.imagesz
				}else{
					url.push(this.invoiceInfo.pdf)
				}
				
				for(var i  in  url){
					var obj=url[i]
					
					window.location.href = obj;
				
				}
				setTimeout(()=>{
					uni.hideLoading()
				},2000)
				
			},
			view(){
				uni.navigateTo({
					url:"/pages/MyInvoice/invoicePreview?id="+this.invoiceInfo.id
				})
			},
			invoiceDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				API.invoiceDetail({
					invoiceId:this.id
				}).then((res) => {
					uni.hideLoading();
					this.invoiceInfo=res.data.invoiceInfo;
					if(this.invoiceInfo.image){
						this.imagesz=this.invoiceInfo.image.split(',')
						
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.img-box{
		margin-bottom: 20px;
		width: 100%;
		height: 238px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	
	.btn{
		margin: 0 40px;
		display: flex;
		.u-btn{
		width: 37.8vw;	
	
		line-height: 44px;
		}
	}
</style>