shop-applet/pages/payment/qrcode.vue

<style lang="scss" scoped>
	page {
		background-color: #FCE9B2;
	}

	.container {
		height: 100vh;
		background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/9cf05202402291000026355.webp");
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding-top: 88rpx;

		.v-navbar {
			margin-bottom: 54rpx;
		}

		.v-desc {
			margin-left: 30rpx;
			margin-bottom: 124rpx;

			.v-desc-main {
				margin-bottom: 30rpx;
				font-weight: 600;
				font-size: 42rpx;
				color: #FFFFFF;
			}

			.v-desc-sub {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.v-qrcode {
			display: flex;
			justify-content: center;
			margin-bottom: 158rpx;
		}

		.v-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(255, 94, 12, 0.32);
			border-radius: 55rpx 55rpx 55rpx 55rpx;
			margin: 0 auto;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}

			text {
				font-weight: 600;
				font-size: 32rpx;
				color: #FF5E0C;
				line-height: 16rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-top: 2rpx;
			}
		}
	}
</style>
<template>
	<view class="container">
		<view style="height: var(--status-bar-height);"></view>
		<view class="v-navbar">
			<u-navbar title="面对面收款" @rightClick="rightClick" :autoBack="true" :fixed="false" bgColor="transparent"
				leftIconColor="#fff" :titleStyle="{color:'#fff',fontWeight:'bold',fontSize:'32rpx'}">
			</u-navbar>
		</view>

		<view class="v-desc">
			<view class="v-desc-main">扫描二维码</view>
			<view class="v-desc-sub">即可进入面对面付款</view>
		</view>

		<view class="v-qrcode">
			<u-image width="540rpx" height="540rpx" :showLoading="true" :src="img" class="v-qrcode-img"></u-image>
		</view>

		<view class="v-btn" @click="handleSavePic">
			<image src="../../static/images/download_yellow.webp" />
			<text>保存二维码</text>
		</view>
	</view>
</template>

<script>
	import {
		qrcode
	} from "@/api/payment.js";
	export default {
		data() {
			return {
				img: ''
			}
		},
		onLoad(opt) {
			this.getQrcode(opt.mer_id)
		},
		methods: {
			// 获取二维码
			getQrcode(merid) {
				qrcode({
					mer_id: merid || 7
				}).then(res => {
					this.img = res.data.url;
				})
			},

			handleSavePic() {
				// 获取要保存的图片路径或URL
				let imageUrl = this.img; // 这里使用了网络上的图片作为示例

				// #ifdef H5
				var a = document.createElement("a");
				a.download = imageUrl;
				a.href = imageUrl;
				document.body.appendChild(a);
				a.click();
				a.remove();
				this.$util.Tips({
					title: '二维码保存成功！'
				})
				// #endif

				// #ifndef H5
				let that = this;
				uni.downloadFile({
					url: imageUrl,
					success(res) {
						if (res.statusCode === 200) {
							let tempFilePath = res.tempFilePath; // 临时文件路径
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success() {
									return that.$util.Tips({
										title: '图片已保存至相册!'
									});
								},
								fail(err) {
									console.error('保存失败', err);
								}
							});
						} else {
							console.error('下载失败', res.statusCode);
						}
					},
					fail(err) {
						console.error('下载失败', err);
					}
				});
				// #endif
			}
		}
	}
</script>