165 lines
4.2 KiB
Vue
165 lines
4.2 KiB
Vue
<template>
|
||
<view class="qrcode-page">
|
||
<view class="qrcode-wrap">
|
||
<!-- 显示后台返回的二维码图片 -->
|
||
<view class="qrcode-box">
|
||
<image :src="qrcodeUrl" mode="widthFix" class="qrcode-img" />
|
||
|
||
<!-- 四角装饰边框保留 -->
|
||
<view class="qrcode-border border-top"></view>
|
||
<view class="qrcode-border border-right"></view>
|
||
<view class="qrcode-border border-bottom"></view>
|
||
<view class="qrcode-border border-left"></view>
|
||
</view>
|
||
|
||
<text class="qrcode-desc">{{houseName}}通行二维码</text>
|
||
<text class="qrcode-tips">分享此二维码给访客，可扫码开门，单次有效</text>
|
||
</view>
|
||
|
||
<view class="btn-wrap">
|
||
<button class="send-btn" @click="saveToAlbum">保存图片到相册</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
|
||
// 直接接收图片URL
|
||
const qrcodeUrl = ref('');
|
||
const qrcodeImage = ref('');
|
||
const houseName = ref('')
|
||
|
||
onLoad((option) => {
|
||
if (option.qrcodeUrl) {
|
||
// 接收后台返回的二维码图片链接
|
||
qrcodeUrl.value = decodeURIComponent(option.qrcodeUrl);
|
||
qrcodeImage.value = qrcodeUrl.value;
|
||
houseName.value = option.villageName
|
||
console.log('最终二维码图片：', qrcodeUrl.value);
|
||
}
|
||
});
|
||
|
||
// 保存图片到相册
|
||
const saveToAlbum = () => {
|
||
if (!qrcodeUrl.value) {
|
||
uni.showToast({ title: '二维码加载中...', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
uni.showLoading({ title: '保存中...', mask: true });
|
||
|
||
const doSave = (filePath) => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath,
|
||
success: () => {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading();
|
||
console.log('保存失败', err);
|
||
|
||
const errMsg = (err.errMsg || err.message || '').toLowerCase();
|
||
const isAuthError = errMsg.includes('auth') ||
|
||
errMsg.includes('deny') ||
|
||
errMsg.includes('permission') ||
|
||
errMsg.includes('拒绝') ||
|
||
err.errCode === '1' ||
|
||
err.errCode === 1;
|
||
|
||
if (isAuthError) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '保存图片需要相册权限，请在设置中开启',
|
||
confirmText: '去设置',
|
||
success: (res) => {
|
||
if (res.confirm) uni.openSetting();
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({ title: '保存失败', icon: 'none' });
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
if (qrcodeUrl.value.startsWith('http')) {
|
||
uni.downloadFile({
|
||
url: qrcodeUrl.value,
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
doSave(res.tempFilePath);
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '图片下载成功', icon: 'none' });
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading();
|
||
console.log('下载失败', err);
|
||
uni.showToast({ title: '图片下载失败', icon: 'none' });
|
||
}
|
||
});
|
||
} else {
|
||
doSave(qrcodeUrl.value);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.qrcode-page {
|
||
min-height: 100vh;
|
||
}
|
||
.qrcode-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 60rpx;
|
||
}
|
||
.qrcode-box {
|
||
position: relative;
|
||
width: 400rpx;
|
||
height: 400rpx;
|
||
}
|
||
/* 图片铺满 */
|
||
.qrcode-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
/* 边框装饰 */
|
||
.qrcode-border {
|
||
position: absolute;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border: 4rpx solid #007aff;
|
||
}
|
||
.border-top { top: 0; left: 0; border-right: none; border-bottom: none; }
|
||
.border-right { top: 0; right: 0; border-left: none; border-bottom: none; }
|
||
.border-bottom { bottom: 0; right: 0; border-left: none; border-top: none; }
|
||
.border-left { bottom: 0; left: 0; border-right: none; border-top: none; }
|
||
|
||
.qrcode-desc {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin-top: 30rpx;
|
||
color: #333;
|
||
}
|
||
.qrcode-tips {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
.btn-wrap {
|
||
margin: 80rpx 40rpx 20rpx;
|
||
}
|
||
.send-btn {
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
height: 88rpx;
|
||
font-size: 28rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
</style> |