diff --git a/pages/subcomponent/promo-qrcode.vue b/pages/subcomponent/promo-qrcode.vue index f6a2663..73a2752 100644 --- a/pages/subcomponent/promo-qrcode.vue +++ b/pages/subcomponent/promo-qrcode.vue @@ -21,7 +21,14 @@ --> + + + + + + { - console.log('下载成功:', res) if (res.statusCode === 200) { - // 使用微信小程序推荐的临时文件路径格式 - const tempFilePath = res.tempFilePath - getApp().globalData.qr_path = tempFilePath - this.qrcodeLocalPath = tempFilePath - console.log('本地二维码路径:', tempFilePath) + this.saveLocalImage(res.tempFilePath) } else { - console.log('下载失败,状态码:', res.statusCode) - uni.showToast({ title: '二维码下载失败', icon: 'none' }) + uni.showToast({ title: '下载失败', icon: 'none' }) } }, fail: err => { console.log('下载失败:', err) - uni.showToast({ title: '二维码下载失败', icon: 'none' }) - }, - complete() { - uni.hideLoading() + uni.showToast({ title: '下载失败', icon: 'none' }) } }) }, - - // 保存到手机相册 - saveToAlbum() { - if (!this.qrcodeLocalPath) { - uni.showToast({ - title: '二维码还未下载完成,请稍后再试', - icon: 'none' - }) - return - } - + // 保存本地图片到相册 + saveLocalImage(tempFilePath) { // 使用新的权限检查方式 uni.getSetting({ success: (res) => { @@ -178,30 +177,41 @@ export default { }) } else { // 尝试保存,如果没有权限会自动弹出授权框 - this.doSaveImage() + uni.saveImageToPhotosAlbum({ + filePath: tempFilePath, + success: () => { + uni.showToast({ + title: '保存成功', + icon: 'success' + }) + }, + fail: (err) => { + console.log('保存失败', err) + uni.showToast({ + title: '保存失败', + icon: 'none' + }) + } + }) } }, fail: () => { // 直接尝试保存 - this.doSaveImage() - } - }) - }, - // 执行保存图片 - doSaveImage() { - uni.saveImageToPhotosAlbum({ - filePath: this.qrcodeLocalPath, - success: () => { - uni.showToast({ - title: '保存成功', - icon: 'success' - }) - }, - fail: (err) => { - console.log('保存失败', err) - uni.showToast({ - title: '保存失败', - icon: 'none' + uni.saveImageToPhotosAlbum({ + filePath: tempFilePath, + success: () => { + uni.showToast({ + title: '保存成功', + icon: 'success' + }) + }, + fail: (err) => { + console.log('保存失败', err) + uni.showToast({ + title: '保存失败', + icon: 'none' + }) + } }) } }) @@ -210,13 +220,16 @@ export default { // 图片加载成功 onImageLoad() { console.log('二维码图片加载成功') + this.isLoading = false + console.log('加载状态已更新为:', this.isLoading) }, // 图片加载失败 onImageError() { console.log('二维码图片加载失败,使用默认图片') this.qrcodeUrl = '/static/qrcode.png' - this.qrcodeLocalPath = '' + this.isLoading = false + console.log('错误处理完成,加载状态:', this.isLoading) } } } @@ -315,6 +328,42 @@ export default { box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); } + /* 骨架屏样式 */ + .qrcode-skeleton { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + .skeleton-img { + width: 300rpx; + height: 300rpx; + border-radius: 20rpx; + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; + margin-bottom: 20rpx; + } + + .skeleton-text { + width: 200rpx; + height: 32rpx; + border-radius: 16rpx; + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; + } + + @keyframes skeleton-loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } + } + .invite-code {