diff --git a/pages/subcomponent/promo-qrcode.vue b/pages/subcomponent/promo-qrcode.vue index 73a2752..b288b0d 100644 --- a/pages/subcomponent/promo-qrcode.vue +++ b/pages/subcomponent/promo-qrcode.vue @@ -28,7 +28,7 @@ setTimeout(resolve, 1000)) + // 重新获取用户信息和二维码 + this.retryCount = 0 // 重置重试计数 + this.isLoading = true // 重置加载状态,显示骨架屏 + this.fetchUserInfo() + this.getQrcode() uni.stopPullRefresh() }, navigateBack() { @@ -120,23 +128,29 @@ export default { // 生成二维码 generateQrcode() { + // 重置重试计数(仅在第一次调用时) + if (this.retryCount === 0) { + this.retryCount = 0 + } + + // 设置加载状态 + this.isLoading = true + const token = uni.getStorageSync('token') const qrcodeUrl = `${config.baseUrl}/recycle-admin/applet/promotion/getInviteCode?token=${token}` - console.log('二维码URL:', qrcodeUrl) + // console.log('二维码URL:', qrcodeUrl) // 直接使用网络图片 this.qrcodeUrl = qrcodeUrl + if(this.qrcodeUrl){ + this.isLoading = false + } uni.hideLoading() - this.onImageLoad(); - - // 添加调试日志 - console.log('设置二维码URL:', this.qrcodeUrl) - console.log('当前加载状态:', this.isLoading) }, // 保存到手机相册 saveToAlbum() { - if (!this.qrcodeUrl || this.qrcodeUrl === '/static/qrcode.png') { + if (!this.qrcodeUrl) { uni.showToast({ title: '二维码还未加载完成', icon: 'none' @@ -144,35 +158,88 @@ export default { return } + // 检查是否为iOS设备 + const systemInfo = uni.getSystemInfoSync() + const isIOS = systemInfo.platform === 'ios' + + // 显示加载提示 + uni.showLoading({ + title: '保存中...' + }) + // 先下载图片到本地 uni.downloadFile({ url: this.qrcodeUrl, success: res => { + uni.hideLoading() if (res.statusCode === 200) { - this.saveLocalImage(res.tempFilePath) + this.saveLocalImage(res.tempFilePath, isIOS) } else { uni.showToast({ title: '下载失败', icon: 'none' }) } }, fail: err => { + uni.hideLoading() console.log('下载失败:', err) uni.showToast({ title: '下载失败', icon: 'none' }) } }) }, // 保存本地图片到相册 - saveLocalImage(tempFilePath) { - // 使用新的权限检查方式 + saveLocalImage(tempFilePath, isIOS) { + // #ifdef APP-PLUS + // APP端特殊处理 + uni.saveImageToPhotosAlbum({ + filePath: tempFilePath, + success: () => { + uni.showToast({ + title: '保存成功', + icon: 'success' + }) + }, + fail: (err) => { + console.log('保存失败', err) + // iOS权限处理 + if (isIOS || (err.errMsg && err.errMsg.includes('auth deny'))) { + uni.showModal({ + title: '权限提示', + content: '需要您授权保存相册权限,请在设置中开启', + confirmText: '去设置', + success: (res) => { + if (res.confirm) { + // #ifdef APP-PLUS + plus.runtime.openURL('app-settings://') + // #endif + // #ifdef MP-WEIXIN + uni.openSetting() + // #endif + } + } + }) + } else { + uni.showToast({ + title: '保存失败', + icon: 'none' + }) + } + } + }) + // #endif + + // #ifdef MP-WEIXIN + // 微信小程序端处理 uni.getSetting({ success: (res) => { if (res.authSetting['scope.writePhotosAlbum'] === false) { // 权限被拒绝,引导用户手动开启 uni.showModal({ - title: '提示', + title: '权限提示', content: '需要您授权保存相册权限,请在设置中开启', - showCancel: false, - success: () => { - uni.openSetting() + confirmText: '去设置', + success: (modalRes) => { + if (modalRes.confirm) { + uni.openSetting() + } } }) } else { @@ -187,10 +254,24 @@ export default { }, fail: (err) => { console.log('保存失败', err) - uni.showToast({ - title: '保存失败', - icon: 'none' - }) + // iOS特殊处理 + if (isIOS) { + uni.showModal({ + title: 'iOS权限提示', + content: 'iOS设备需要手动授权相册权限,请在设置中开启', + confirmText: '去设置', + success: (modalRes) => { + if (modalRes.confirm) { + uni.openSetting() + } + } + }) + } else { + uni.showToast({ + title: '保存失败', + icon: 'none' + }) + } } }) } @@ -207,29 +288,60 @@ export default { }, fail: (err) => { console.log('保存失败', err) - uni.showToast({ - title: '保存失败', - icon: 'none' - }) + // iOS特殊处理 + if (isIOS) { + uni.showModal({ + title: 'iOS权限提示', + content: 'iOS设备需要手动授权相册权限,请在设置中开启', + confirmText: '去设置', + success: (modalRes) => { + if (modalRes.confirm) { + uni.openSetting() + } + } + }) + } else { + uni.showToast({ + title: '保存失败', + icon: 'none' + }) + } } }) } }) + // #endif }, // 图片加载成功 onImageLoad() { console.log('二维码图片加载成功') - this.isLoading = false - console.log('加载状态已更新为:', this.isLoading) + this.isLoading = false // 隐藏骨架屏 }, // 图片加载失败 onImageError() { - console.log('二维码图片加载失败,使用默认图片') - this.qrcodeUrl = '/static/qrcode.png' - this.isLoading = false - console.log('错误处理完成,加载状态:', this.isLoading) + console.log('二维码图片加载失败,尝试重试') + + // 如果还有重试次数,则重试 + if (this.retryCount < this.maxRetries) { + this.retryCount++ + console.log(`第${this.retryCount}次重试加载二维码`) + + // 延迟1秒后重试 + setTimeout(() => { + this.generateQrcode() + }, 1000) + return + } + + // 重试次数用完,显示错误提示并隐藏骨架屏 + console.log('重试次数用完,二维码加载失败') + this.isLoading = false // 隐藏骨架屏 + uni.showToast({ + title: '二维码加载失败', + icon: 'none' + }) } } } @@ -320,51 +432,48 @@ export default { align-items: center; margin-bottom: 48rpx; - .qrcode-img { - width: 100%; - height: 100%; - background: #fff; - border-radius: 24rpx; - 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; + + .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; } - 100% { - background-position: -200% 0; + + .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; + } } } - + .qrcode-img { + width: 100%; + height: 100%; + background: #fff; + border-radius: 24rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); + } .invite-code { margin-top: 32rpx;