luoyang-uniapp-app/pages/mineEntry/myOrder/voucher/voucher.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="培训缴费电子凭证"></topNavbar>
		<view class="imgBox" style="width: 100%;">
			<image :src="imgLink" mode="widthFix"></image>
		</view>
		<view class="btnBox">
			<view class="btnBg" @click="downloadImgClick">保存到手机</view>
		</view>
	</view>
</template>

<script>
	import { getStudentVoucher } from '@/config/api.js'
	import { downloadImg } from '../comp/download.js'
	export default {
		data() {
				return {
					orderId: '',
					imgLink: ''
				}
			},
			onLoad(options) {
				if (options.orderId) {
					this.orderId = options.orderId
					this.getStudentVoucherFn()
				}
			},
			methods: {
				async getStudentVoucherFn() {
					let obj = {
						studentId: this.studentId,
						type: 1
					}
					const {data: res} = await getStudentVoucher(obj)
					this.imgLink = res
					console.log(res)
				},
				downloadImgClick() {
					downloadImg(this.imgLink)
				}
			}
	}
</script>

<style lang="scss" scoped>
	.pageBgImg {
		width: 100vw;
		height: 100vh;
		overflow-x: hidden;
	}
	.imgBox {
		// transform: translateY(200px);
		transform: translateX(50px);
		transform: rotate(90deg);
		width: 100%;
		
		image {
			margin-top: 500rpx;
			transform: scale(2);
		}
	}
	.btnBox {
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 30rpx 0;
		width: 100%;
		.btnBg {
			padding: 0 30rpx;
		}
	}
</style>