LocalLivingServicesUniapp/pages/orderingSet/components/QrCodePopup.vue

<template>
	<u-popup v-model="visible" mode="bottom" border-radius="24" :mask-close-able="true">
		<view class="qr-sheet">
			<view class="sheet-title">{{ tableNo }}桌号二维码</view>
			<view class="qr-block">
				<text class="qr-label">小程序二维码</text>
				<image class="qr-img" :src="miniQrUrl" mode="aspectFit"></image>
			</view>
			<view class="qr-block" v-if="officialQrUrl">
				<text class="qr-label">公众号二维码</text>
				<image class="qr-img" :src="officialQrUrl" mode="aspectFit"></image>
			</view>
			<view class="btn primary sheet-btn" :class="{ disabled: saving }" @click="handleSave">保存二维码</view>
		</view>
		<canvas
			canvas-id="qrPosterCanvas"
			class="poster-canvas"
			:style="{ width: posterSize.width + 'px', height: posterSize.height + 'px' }"
		></canvas>
	</u-popup>
</template>

<script>
	import { saveQrPoster, posterSize } from '@/utils/saveQrPoster.js'

	export default {
		name: 'QrCodePopup',
		props: {
			value: {
				type: Boolean,
				default: false
			},
			tableNo: {
				type: String,
				default: ''
			},
			miniQrUrl: {
				type: String,
				default: ''
			},
			officialQrUrl: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				saving: false,
				posterSize
			}
		},
		computed: {
			visible: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
		methods: {
			handleSave() {
				if (this.saving) return
				if (!this.miniQrUrl) {
					uni.showToast({ title: '暂无二维码', icon: 'none' })
					return
				}
				this.saving = true
				uni.showLoading({ title: '保存中', mask: true })
				saveQrPoster({
					tableNo: this.tableNo,
					qrUrl: this.miniQrUrl,
					canvasId: 'qrPosterCanvas',
					vm: this
				}).then(() => {
					// #ifdef H5
					uni.showToast({ title: '已保存到本地', icon: 'success' })
					// #endif
					// #ifndef H5
					uni.showToast({ title: '已保存到相册', icon: 'success' })
					// #endif
					this.$emit('save')
				}).catch(() => {
					uni.showToast({ title: '保存失败，请稍后重试', icon: 'none' })
				}).finally(() => {
					this.saving = false
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qr-sheet {
		padding: 0 80rpx calc(40rpx + env(safe-area-inset-bottom));
		background: #fff;
	}

	.sheet-title {
		text-align: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #1D2129;
		padding: 56rpx 0 52rpx;
	}

	.qr-block {
		padding: 48rpx 0 70rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		background: linear-gradient(-190deg, #DEEEFF 0%, #FFFFFF 18%);
		border-radius: 24rpx;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 24rpx;
			padding: 2rpx;
			background: linear-gradient(360deg, rgba(16, 173, 255, 0) 35%, rgba(33, 101, 246, 1) 190%);
			-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
		}

		.qr-img {
			width: 200rpx;
			height: 200rpx;
			background: #f5f6f8;
		}

		.qr-label {
			font-weight: 500;
			font-size: 28rpx;
			color: #165DFF;
			margin-bottom: 44rpx;
		}
	}

	.sheet-btn {
		margin-top: 22rpx;
	}

	.btn {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;

		&.primary {
			background: linear-gradient(88deg, #0FB0FF 0%, #2260F6 100%);
			color: #fff;
		}

		&.disabled {
			opacity: 0.6;
		}
	}

	.poster-canvas {
		position: fixed;
		left: -9999px;
		top: -9999px;
		pointer-events: none;
	}
</style>