|
|
|
@ -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; |
|
|
|
|
