wanzai_school_app/pages/invitation/invitation.vue

<template>
	<view class="container">
		<!-- 二维码区域 -->
		<view class="box">
			<view class="box_top">
				<view class="top_text">尊敬的家长：您好！{{ currentClass }}现诚邀您扫描下方二维码，填写相关信息加入班级，感谢您的配合，让我们携手为孩子的成长保驾护航！</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">填写相关信息</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 { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { ref } from 'vue'

const gradeId = ref('')
const classId = ref('')
const departmentId = ref('')
const departmentId_list = ref('')

const currentClass = ref('')

onLoad(() => {
	gradeId.value = uni.getStorageSync('grade_student')
	classId.value = uni.getStorageSync('classes_student')
	departmentId.value = uni.getStorageSync('departmentId')
	departmentId_list.value = uni.getStorageSync('departmentId_list')
	currentClass.value = uni.getStorageSync('currentClass')

	QRCodeUrl.value = `https://chtech.ncjti.edu.cn/testingServer/repairManage/pages/register/register?gradeId=${gradeId.value}&classId=${classId.value}&departmentId=${departmentId.value}&departmentId_list=${departmentId_list.value}&currentClass=${currentClass.value}`
})

onShareAppMessage(() => {
	return {
		title: '邀请家长',
		path: `/pages/register/register?gradeId=${gradeId.value}&classId=${classId.value}&departmentId=${departmentId.value}&departmentId_list=${departmentId_list.value}&currentClass=${currentClass.value}`
	}
})

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

// 二维码信息
const QRCodeUrl = ref('')

// 保存图片按钮回调
const handleSave = () => {
	qrcodeRef.value.save({
		success: (res) => {
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
		},
		fail: (err) => {
			console.log(err)
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			})
		}
	})
}
</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>