'修复保存的bug'

pages/subcomponent/promo-qrcode.vue

@@ -28,7 +28,7 @@
 				</view>
 				<!-- 二维码图片 -->
 				<image 
-					v-else
+					v-else-if="qrcodeUrl"
 					class="qrcode-img" 
 					:src="qrcodeUrl" 
 					mode="widthFix"
@@ -59,9 +59,11 @@ export default {
 	data() {
 		return {
 			userInfo: {},
-			qrcodeUrl: '/static/qrcode.png', // 二维码图片URL
+			qrcodeUrl: '', // 二维码图片URL
 			inviteCode: '888888',
-			isLoading: true, // 加载状态
+			isLoading: true, // 加载状态，控制骨架屏显示
+			retryCount: 0, // 重试次数
+			maxRetries: 2, // 最大重试次数
 		}
 	},
 	onLoad() {
@@ -69,27 +71,33 @@ export default {
 		this.fetchUserInfo()
 		this.getQrcode()
 	},
+	onUnload() {
+		// 页面销毁时的清理逻辑
+	},
 	// 微信小程序分享配置
 	// #ifdef MP-WEIXIN
 	onShareAppMessage() {
 		return {
 			title: `${this.userInfo.nickName || '用户'}邀请您一起参与旧衣回收`,
 			path: `/pages/component/home?shareId=${this.inviteCode}`,
-			imageUrl: this.qrcodeUrl || '/static/share-default.png'
+			imageUrl: this.qrcodeUrl
 		}
 	},
 	onShareTimeline() {
 		return {
 			title: `${this.userInfo.nickName || '用户'}邀请您一起参与旧衣回收，环保从我做起！`,
 			query: `shareId=${this.inviteCode}`,
-			imageUrl: this.qrcodeUrl || '/static/share-default.png'
+			imageUrl: this.qrcodeUrl
 		}
 	},
 	// #endif
 	methods: {
 		async onRefresh() {
-			// 模拟刷新数据
-			await new Promise(resolve => 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;