onlinenew_h5/pages/proof/proof.vue

<template>
	<view class="container">
		<view class="info" id="infoImg">
			<image class="info_photo" v-if="msg.picture" :src="msg.picture" mode="aspectFill" @click="clickImg(msg.picture)"></image>
			<image class="info_photo" v-else src="/static/4.png" mode="aspectFill"></image>
			<image class="info_img" src="/static/logo2.png" mode="aspectFill"></image>
			<view class="info_box">
				<view class="box_key">学院：</view>
				<view class="box_value">{{ msg.college }}</view>
			</view>
			<view class="info_box">
				<view class="box_key">专业：</view>
				<view class="box_value">{{ msg.major }}</view>
			</view>
			<view class="info_box">
				<view class="box_key">班级：</view>
				<view class="box_value">{{ msg.classstr }}</view>
			</view>
			<view class="info_box">
				<view class="box_key">姓名：</view>
				<view class="box_value">{{ msg.name }}</view>
			</view>
			<view class="info_box">
				<view class="box_key">录取号：</view>
				<view class="box_value">{{ msg.admissNum }}</view>
			</view>
			<view class="info_box">
				<view class="box_key">性别：</view>
				<view class="box_value">{{ msg.sex }}</view>
			</view>
			<view class="info_box">
				<view class="box_key">联系电话：</view>
				<view class="box_value">{{ msg.phone }}</view>
			</view>
			<view class="info_box">
				<view class="box_key">楼栋名称：</view>
				<view class="box_value color">{{ msg.build }}</view>
			</view>
			<view class="info_box">
				<view class="box_key">宿舍床号：</view>
				<view class="box_value color">{{ msg.dormitory + '-' + msg.number }}</view>
			</view>
		</view>

		<!-- 按钮区域 -->
		<view class="btn">
			<view class="btn_box" @click="handleDownload">下载凭证</view>
		</view>

		<!-- 预览图片弹窗 -->
		<uni-popup ref="popup_img" :is-mask-click="false">
			<view class="pop_img">
				<!-- 关闭图标 -->
				<uni-icons class="pop_close" type="closeempty" color="#808080" size="20" @click="handleClose_img"></uni-icons>

				<image class="img" v-if="previewUrl" :src="previewUrl" mode="aspectFill"></image>
				<view class="text">长按图片保存到相册</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import html2canvas from 'html2canvas'

const msg = ref({})

const previewUrl = ref()

const popup_img = ref()

onLoad((options) => {
	msg.value = JSON.parse(decodeURIComponent(options.msg))
	// console.log(msg.value)
})

// 点击图片回调
const clickImg = (url) => {
	// console.log(url)
	uni.previewImage({
		urls: [url]
	})
}

const handleClose_img = () => {
	popup_img.value.close()
}

// 点击下载凭证按钮回调
const handleDownload = async () => {
	try {
		uni.showLoading({ title: '生成中...', mask: true })

		// 获取DOM元素
		const element = document.getElementById('infoImg')

		// 使用html2canvas生成图片
		const canvas = await html2canvas(element, {
			useCORS: true, // 允许跨域图片
			scale: 2, // 提高清晰度
			backgroundColor: '#fff', // 背景色
			logging: false // 关闭日志
		})

		// 转换为图片URL
		const imgData = canvas.toDataURL('image/png')

		if (isWechatBrowser()) {
			// 显示预览图
			previewUrl.value = imgData
			// console.log(previewUrl.value)
			popup_img.value.open()
		} else {
			// 下载图片
			downloadImage(imgData, '页面截图.png')
			uni.showToast({ title: '保存成功', icon: 'success' })
		}
	} catch (error) {
		console.error('截图失败:', error)
		uni.showToast({ title: '保存失败', icon: 'none' })
	} finally {
		uni.hideLoading()
	}
}

// 判断是否在微信浏览器中
const isWechatBrowser = () => {
	const ua = navigator.userAgent.toLowerCase()
	return ua.indexOf('micromessenger') !== -1
}

const downloadImage = (dataUrl, fileName) => {
	const link = document.createElement('a')
	link.href = dataUrl
	link.download = fileName
	link.style.display = 'none'
	document.body.appendChild(link)
	link.click()
	document.body.removeChild(link)
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding-top: 12rpx;
	min-height: 100vh;
	font-size: 28rpx;
	background-color: #fff;

	.info {
		position: relative;
		padding: 20rpx;
		box-sizing: border-box;
		margin: auto;
		width: 690rpx;
		border-radius: 8rpx;
		background-image: url(@/static/11.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.info_img {
			width: 168rpx;
			height: 45rpx;
		}

		.info_photo {
			position: absolute;
			top: 30rpx;
			right: 20rpx;
			width: 213rpx;
			height: 259rpx;
			border-radius: 8rpx;
		}

		.info_box {
			display: flex;
			align-items: center;
			height: 60rpx;

			.box_key {
				color: #4d4d4d;
			}

			.box_value {
				font-weight: bold;
			}

			.color {
				font-size: 40rpx;
				color: #0061ff;
			}
		}
	}

	.btn {
		padding-top: 120rpx;
		padding-bottom: 80rpx;
		background-color: #fff;

		.btn_box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
			width: 710rpx;
			height: 100rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 8rpx;
			background-color: #0061ff;
		}
	}

	.pop_img {
		position: relative;
		box-sizing: border-box;
		padding: 80rpx 20rpx 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 90vw;
		height: 70vh;
		border-radius: 15rpx;
		background: linear-gradient(180deg, #ebf2ff 0%, #ffffff 100%);

		.pop_close {
			position: absolute;
			top: 19rpx;
			right: 29rpx;
		}

		.img {
			margin-top: 50rpx;
			width: 563rpx;
			height: 525rpx;
		}

		.text {
			margin-top: 50rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}
</style>