jp-education-student/pages/youth/course/viewBill.vue

<template>
	<view>
		<u-navbar title="查看票据"></u-navbar>
		<view class="bill" v-if="billInfo.invoiceUrl != null">
			<view class="img">
				<img :src="billInfo.invoiceUrl" alt="">
			</view>
			<view class="options">
				<view class="key">
					{{billInfo.invoiceTitle}}
				</view>
				<view class="btn">
					<!-- <button class="download" @click="downloadBill">下载票据</button> -->
					<button class="print" @click="toPrintBill">打印票据</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import * as courseApi from '@/apis/youth/course.js'

	export default {
		data() {
			return {
				buyId: '',
				billInfo: {}
			}
		},
		onLoad(op) {
			if (op.id) {
				this.buyId = op.id;
				this.getBillInfo();
			}
		},
		methods: {
			downloadBill() {
				let _self = this;
				var token = _self.carhelp.getToken()

				// 1 选择保存图片到本地
				uni.showActionSheet({
					itemList: ["保存图片到本地"],
					success: (res) => {
						if (res.tapIndex == 0) {
							// 2 提示保存中
							uni.showLoading({
								title: "图片保存中..."
							})

							// 3 下载到本地
							uni.downloadFile({
								url: _self.billInfo.invoiceUrl,
								success: (result) => {
									var tempFilePath = result.tempFilePath;

									// 4 保存到本地
									uni.saveImageToPhotosAlbum({
										filePath: tempFilePath,
										success: () => {
											// 5 提示保存成功
											uni.showToast({
												title: "保存成功",
												duration: 2000
											})
										},
										fail: () => {
											//  6 失败关闭提示信息！！！
											console.log("saveImageToPhotosAlbum 失败");
											uni.hideLoading();
										},
										complete: function() {
											// 7 隐藏提示
											uni.hideLoading();
										}
									})
								},
								fail: () => {
									console.log("downloadFile 失败");
								}
							})
						}
					},
					fail: () => {
						console.log("showActionSheet 失败");
					}
				})
			},
			getBillInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.getBuyInvoiceInfo({
					buyId: this.buyId
				}).then((res) => {
					uni.hideLoading();
					this.billInfo = res.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toPrintBill() {
				uni.navigateTo({
					url: '/pages/youth/course/printBill?id=' + this.billInfo.buyId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bill {
		margin: 24rpx 32rpx;
		border-radius: 4px;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);

		.img {
			width: 100%;
			height: 398rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.options {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 0px 0px 4px 4px;
			background-color: #000000;
			opacity: 0.4;
			padding: 24rpx;

			.key {
				color: rgba(255, 255, 255, 1);
				font-size: 16px;

			}

			.btn {
				display: flex;

				uni-button {
					width: 160rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					border-radius: 4px;
					font-size: 28rpx;
					padding: 0;
				}

				.download {
					background-color: rgba(255, 255, 255, 1);
					color: #333333;
				}

				.print {
					background-color: #0DBAC7;
					color: rgba(255, 255, 255, 1);
					margin-left: 20rpx;
				}

			}
		}

	}
</style>