wanzai_school_app/pages/invitation/invitation.vue

<template>
	<view class="container">
		<!-- 二维码区域 -->
		<view class="box">
			<view class="box_top">
				<view class="top_text">尊敬的家长：您好！七年级一班现诚邀您扫描下方二维码，填写相关信息加入班级，感谢您的配合，让我们携手为孩子的成长保驾护航！</view>
				<view class="top_qrcode">
					<view class="qrcode_box">
						<uv-qrcode ref="qrcodeRef" size="350rpx" :value="QRCodeUrl"></uv-qrcode>
					</view>
					<view class="qrcode_info">
						<image class="info_img" src="/static/images/school-logo.jpg" mode=""></image>
						万载三中
					</view>
				</view>
			</view>
			<view class="box_bottom" @click="test">填写相关信息</view>
		</view>

		<view class="btns">
			<view class="btn save" @click="handleSave">保存图片</view>
			<view class="btn send">
				发送到微信
				<button class="share" open-type="share">发送到微信</button>
			</view>
		</view>
	</view>
</template>

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

onShareAppMessage(() => {
	if (res.from === 'button') {
		// 来自页面内分享按钮
		console.log(res.target)
	}
	return {
		title: '自定义分享标题',
		path: '/pages/test/test?id=123'
	}
})

// 二维码元素引用标记
const qrcodeRef = ref(null)

// 二维码信息
const QRCodeUrl = ref('https://chtech.ncjti.edu.cn/testingServer/repairManage/')

// 保存图片按钮回调
const handleSave = () => {
	qrcodeRef.value.save({
		success: (res) => {
			console.log(res)

			// uni.getImageInfo({
			// 	url: res.tempFilePath,
			// 	success: (res) => {
			// 		console.log(res)
			// 		uni.saveImageToPhotosAlbum({
			// 			filePath: res.tempFilePath,
			// 			success: function () {
			// 				console.log('save success')
			// 			}
			// 		})
			// 	}
			// })
		},
		fail: (err) => {
			console.log(err)
		}
	})
}

const test = () => {
	uni.navigateTo({
		url: '/pages/register/register'
	})
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 38rpx 0;
	min-height: 100vh;
	background: linear-gradient(180deg, rgba(242, 247, 255, 1) 0%, rgba(242, 247, 255, 0) 100%);

	.box {
		margin: auto;
		width: 670rpx;
		height: 910rpx;

		.box_top {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 45rpx 50rpx;
			height: 795rpx;
			border-radius: 18rpx 18rpx 0 0;
			background-color: #0061ff;

			.top_text {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #fff;
			}

			.top_qrcode {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				width: 456rpx;
				height: 506rpx;
				background-color: #fff;
				border-radius: 0 30rpx 0 30rpx;

				.qrcode_box {
					width: 350rpx;
					height: 350rpx;
				}

				.qrcode_info {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.info_img {
						margin-right: 18rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.box_bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 115rpx;
			font-size: 38rpx;
			font-weight: bold;
			border-radius: 0 0 18rpx 18rpx;
			border: 2rpx solid #0061ff;
			background-color: #fff;
		}
	}

	.btns {
		display: flex;
		justify-content: center;
		margin-top: 90rpx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 300rpx;
			height: 100rpx;
			font-size: 32rpx;
			border-radius: 8rpx;
		}

		.save {
			color: #fff;
			background-color: #0061ff;
		}

		.send {
			margin-left: 20rpx;
			color: #0061ff;
			border: 2rpx solid #0061ff;
		}

		.share {
			position: absolute;
			width: 300rpx;
			height: 100rpx;
			border-radius: 8rpx;
			opacity: 0;
		}
	}
}
</style>