cashier_wx/distribution/shop-detail/components/share-popup.vue

<template>
	<view class="">
		<view class="w-qrcode">
			<w-qrcode :options="codeOptions" :opacity="0" ref="wQrcode" @generate="(e) => qrcodeResult(e)"></w-qrcode>
		</view>
		<up-popup :show="show" bgColor="transparent" :safeAreaInsetBottom="false" :closeOnClickOverlay="true" @close="close" mode="center">
			<view class="box">
				<view class="info">
					<view class="u-flex justify-center">
						<up-avatar size="214rpx" :src="shopUserInfo.headImg"></up-avatar>
					</view>
					<view class="u-m-t-48 font-14 font-700 color-333 text-center line-height-54">
						<view>{{ shopUserInfo.nickName }}</view>
						<view>{{ desensitizePhone(shopUserInfo.phone) }}</view>
					</view>
					<view class="u-m-t-16 font-14 line-height-54 text-center">
						<text class="color-666">邀请码</text>
						<text class="u-m-l-16 u-m-r-16 color-333 font-16 font-700">{{ inviteCode }}</text>
						<text class="" style="color: #fe6d11" @click="copyCode">复制</text>
					</view>
					<view class="u-flex justify-center" style="margin-top: 90rpx">
						<!-- <w-qrcode
              :options="codeOptions"
              :opacity="1"
              ref="wQrcode"
              @generate="(e) => qrcodeResult(e)"
            ></w-qrcode> -->
						<up-image width="322rpx" height="322rpx" :src="code"></up-image>
					</view>
				</view>
				<view class="footer-wrap">
					<view class="confirm line" @click="save">保存图片</view>
					<ymf-share><view class="confirm">微信分享</view></ymf-share>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import ymfShare from '@/components/ymf-components/ymf-share.vue';
import wQrcode from '@/uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue';
import { desensitizePhone } from '@/utils/util.js';
import { ref } from 'vue';
const props = defineProps({
	inviteCode: {
		type: String,
		default: ''
	},
	shopUserInfo: {
		type: Object,
		default: () => {}
	}
});
const codeOptions = ref({
	size: 200,
	code: props.inviteCode
});
function copyCode() {
	uni.setClipboardData({
		data: props.inviteCode,
		success: function () {
			console.log('success');
		}
	});
}
const code = ref('');

function qrcodeResult(e) {
	console.log('qrcodeResult', e);
	code.value = e.img.tempFilePath;
	console.log('code', code.value);
}

const show = defineModel({
	type: Boolean,
	default: false
});
const emits = defineEmits(['cancel', 'confirm']);
function close() {
	show.value = false;
	emits('cancel');
}
function save() {
	show.value = false;

	// 保存图片到相册
	uni.saveImageToPhotosAlbum({
		filePath: code.value,
		success: function () {
			uni.showToast({
				title: '保存成功',
				icon: 'none'
			});
		},
		fail: function (err) {
			console.log('保存失败原因：', err);
			// 判断是否为授权拒绝（微信小程序授权拒绝的特征）
			if (err.errMsg.includes('auth deny') || err.errMsg.includes('authorize fail')) {
				// 弹出提示引导用户去设置页开启授权
				uni.showModal({
					title: '授权提示',
					content: '保存图片需要授权访问相册，请前往设置开启授权',
					showCancel: true,
					cancelText: '取消',
					confirmText: '去设置',
					success: function (res) {
						if (res.confirm) {
							// 跳转到微信小程序的授权设置页
							uni.openSetting({
								success: function (settingRes) {
									// 检查用户是否开启了相册授权
									if (settingRes.authSetting['scope.writePhotosAlbum']) {
										uni.showToast({
											title: '授权成功，可重新保存',
											icon: 'none'
										});
									} else {
										uni.showToast({
											title: '未开启授权，保存失败',
											icon: 'none'
										});
									}
								},
								fail: function () {
									uni.showToast({
										title: '打开设置失败',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			} else {
				// 非授权问题的保存失败（如文件路径错误、系统问题等）
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				});
			}
		}
	});

	emits('confirm', code.value);
}
</script>

<style lang="scss" scoped>
:deep(.info .canvas) {
	opacity: 1;
}
.border {
	border: 2rpx solid #d9d9d9;
	padding: 18rpx;
	border-radius: 4rpx;
}
.box {
	width: 638rpx;
	background-color: #fff;
	border-radius: 16rpx;
	// overflow: hidden;
	position: relative;
	.title {
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
	}
	.top {
		border-bottom: 2rpx solid #ededed;
	}
	.info {
		padding: 96rpx 40rpx 96rpx 40rpx;
		font-size: 28rpx;
	}
	.small-title {
		min-width: 84rpx;
		text-align: right;
	}
	.footer-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: -100upx;
		display: flex;
		gap: 28upx;
	}
}

.cancel {
	padding: 14rpx 76rpx;
	border-radius: 36rpx;
	border: 2rpx solid #e8ad7b;
	color: #e8ad7b;
	font-size: 32rpx;
	font-weight: 400;
	white-space: nowrap;
	line-height: 48rpx;
}
.confirm {
	$color: #e8ad7b;
	flex: 1;
	padding: 14rpx 76rpx;
	border-radius: 16rpx;
	background-color: $color;
	border: 2rpx solid $color;
	color: #fff;
	font-size: 32rpx;
	font-weight: 400;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	align-items: center;
	&.line {
		background-color: #fff;
		color: $color;
	}
}
.line-height-54 {
	line-height: 54rpx;
}
.w-qrcode {
	position: fixed;
	left: -9999px;
	top: -9999px;
	z-index: -1;
}
</style>