'修复显示bug

pages/subcomponent/promo-qrcode.vue

@@ -21,7 +21,14 @@
 			</view> -->
 			<!-- 二维码区 -->
 			<view class="qrcode-modal-section">
+				<!-- 加载骨架屏 -->
+				<view v-if="isLoading" class="qrcode-skeleton">
+					<view class="skeleton-img"></view>
+					<view class="skeleton-text"></view>
+				</view>
+				<!-- 二维码图片 -->
 				<image 
+					v-else
 					class="qrcode-img" 
 					:src="qrcodeUrl" 
 					mode="widthFix"
@@ -52,9 +59,9 @@ export default {
 	data() {
 		return {
 			userInfo: {},
-			qrcodeUrl: '/static/qrcode.png', // 展示用的图片URL
-			qrcodeLocalPath: '', // 下载用的本地文件路径
+			qrcodeUrl: '/static/qrcode.png', // 二维码图片URL
 			inviteCode: '888888',
+			isLoading: true, // 加载状态
 		}
 	},
 	onLoad() {
@@ -104,65 +111,57 @@ export default {
 		},
 
 		getQrcode() {
-			// 获取全局二维码路径
-			if (getApp().globalData.qr_path && getApp().globalData.qr_path.startsWith('wxfile://')) {
-				console.log('获取到二维码路径', getApp().globalData.qr_path)
-				this.qrcodeLocalPath = getApp().globalData.qr_path
-				this.qrcodeUrl = getApp().globalData.qr_path
-			} else {
-				console.log('全局二维码路径不存在，调用后端API生成')
-				uni.showLoading({
-					title: '生成二维码中...'
-				})
-				this.generateQrcode()
-			}
+			console.log('调用后端API生成二维码')
+			uni.showLoading({
+				title: '生成二维码中...'
+			})
+			this.generateQrcode()
 		},
 
-		// 只保留后端API生成二维码
+		// 生成二维码
 		generateQrcode() {
 			const token = uni.getStorageSync('token')
 			const qrcodeUrl = `${config.baseUrl}/recycle-admin/applet/promotion/getInviteCode?token=${token}`
 			console.log('二维码URL:', qrcodeUrl)
 			
-			// 展示用网络图片
+			// 直接使用网络图片
 			this.qrcodeUrl = qrcodeUrl
+			uni.hideLoading()
+			this.onImageLoad();
 			
-			// 下载到本地用于保存
+			// 添加调试日志
+			console.log('设置二维码URL:', this.qrcodeUrl)
+			console.log('当前加载状态:', this.isLoading)
+		},
+
+		// 保存到手机相册
+		saveToAlbum() {
+			if (!this.qrcodeUrl || this.qrcodeUrl === '/static/qrcode.png') {
+				uni.showToast({
+					title: '二维码还未加载完成',
+					icon: 'none'
+				})
+				return
+			}
+
+			// 先下载图片到本地
 			uni.downloadFile({
-				url: qrcodeUrl,
+				url: this.qrcodeUrl,
 				success: res => {
-					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 {