chuangte_bike_newxcx/page_shanghu/guanli/kajuan_peie_qr.vue

<template>
	<view class="page">
		<u-navbar title="配额二维码赠送" :border-bottom="false" :background="bgc" title-color="#000" title-size="34" height="44" />
		
		<view class="ewm">
			<canvas id="quotaQrcode" canvas-id="quotaQrcode" class="qr-canvas" />
		</view>
		
		<!-- 文本信息：名称 / 数量 / 过期时间 -->
		<view class="info-box" v-if="code">
			<view class="row">
				<text class="label">卡券名称</text>
				<text class="value">{{ name || '—' }}</text>
			</view>
			<view class="row">
				<text class="label">赠送数量</text>
				<text class="value highlight">{{ quantity || 0 }}</text>
			</view>
			<view class="row" v-if="expireTime">
				<text class="label">过期时间</text>
				<text class="value">{{ expireTime }}</text>
			</view>
		</view>
		
		<view class="saveQr" @click="saveQrcode">
			保存二维码
		</view>
	</view>
</template>

<script>
import UQRCode from 'uqrcodejs';

export default {
	data() {
		return {
			bgc: {
				backgroundColor: "#FFFFFF",
			},
			http: this.$store.state.app.urlConfig || {},
			code: '',
			name: '',
			quantity: '',
			expireTime: ''
		}
	},
	onLoad(e) {
		this.code = e.code || ''
		this.name = decodeURIComponent(e.name || '')
		this.quantity = e.quantity || ''
		this.expireTime = decodeURIComponent(e.expireTime || '')
		
		if (!this.code) {
			uni.showToast({
				title: '缺少编号',
				icon: 'none'
			})
			return
		}
		this.generateQrcode()
	},
	methods: {
		// 生成配额二维码（礼品码）
		generateQrcode() {
			const qr = new UQRCode()
			const qrSizeRpx = 600
			const qrSizePx = uni.upx2px(qrSizeRpx)
			
			// 二维码承载链接：vipGiftCodePrefix + ?c=code
			const prefix = (this.http && this.http.vipGiftCodePrefix) || ''
			const qrData = prefix + '?c=' + this.code
			
			qr.data = qrData
			qr.size = qrSizePx
			
			const ctx = uni.createCanvasContext('quotaQrcode', this)
			qr.canvasContext = ctx
			qr.make()
			qr.drawCanvas()
			
			// 这里只生成二维码，下面的文字用普通视图展示
		},
		// 保存二维码到相册
		saveQrcode() {
			const width = uni.upx2px(600)
			const height = uni.upx2px(700)
			uni.canvasToTempFilePath({
				canvasId: 'quotaQrcode',
				x: 0,
				y: 0,
				width,
				height,
				fileType: 'jpg',
				quality: 1,
				success: (res) => {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
						},
						fail: () => {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					})
				},
				fail: () => {
					uni.showToast({
						title: '生成二维码失败',
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F9FAFB;
	min-height: 100vh;
}

.page {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.tip {
	margin: 32rpx 40rpx 0;
	font-size: 24rpx;
	color: #6B7280;
	line-height: 1.6;
}

.ewm {
	margin-top: 120rpx;
	width: 100%;
	display: flex;
	justify-content: center;
}

.qr-canvas {
	width: 600rpx;
	height: 700rpx;
}

.info-box {
	margin: 32rpx 40rpx 0;
	padding: 20rpx 24rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.label {
			font-size: 24rpx;
			color: #9CA3AF;
		}
		
		.value {
			font-size: 26rpx;
			color: #374151;
		}
		
		.value.highlight {
			color: #2563EB;
			font-weight: 600;
		}
	}
}

.saveQr {
	margin: 0 auto;
	margin-top: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 502rpx;
	height: 80rpx;
	background: #4C97E7;
	border-radius: 40rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
}
</style>