refactor(AdPage): 替换手动刷新按钮为步骤说明
将手动刷新按钮和重试按钮替换为网络连接异常的步骤说明,并更新相关样式
Showing
2 changed files
with
20 additions
and
54 deletions
| ... | @@ -191,40 +191,22 @@ | ... | @@ -191,40 +191,22 @@ |
| 191 | line-height: 1.5; | 191 | line-height: 1.5; |
| 192 | } | 192 | } |
| 193 | 193 | ||
| 194 | - .refresh-buttons { | 194 | + .refresh-steps { |
| 195 | - display: flex; | 195 | + text-align: left; |
| 196 | - gap: 20rpx; | 196 | + background: #f8f9fa; |
| 197 | - justify-content: center; | ||
| 198 | - } | ||
| 199 | - | ||
| 200 | - .refresh-button { | ||
| 201 | - flex: 1; | ||
| 202 | - padding: 24rpx 32rpx; | ||
| 203 | - background: linear-gradient(135deg, #007aff, #0056cc); | ||
| 204 | - color: white; | ||
| 205 | border-radius: 12rpx; | 197 | border-radius: 12rpx; |
| 206 | - font-size: 32rpx; | 198 | + padding: 32rpx; |
| 207 | - font-weight: 600; | 199 | + margin-top: 20rpx; |
| 208 | - text-align: center; | ||
| 209 | - | ||
| 210 | - &:active { | ||
| 211 | - background: linear-gradient(135deg, #0056cc, #003d99); | ||
| 212 | - transform: scale(0.98); | ||
| 213 | - } | ||
| 214 | } | 200 | } |
| 215 | 201 | ||
| 216 | - .retry-button-small { | 202 | + .step-item { |
| 217 | - flex: 1; | 203 | + font-size: 30rpx; |
| 218 | - padding: 24rpx 32rpx; | 204 | + color: #333; |
| 219 | - background: #f0f0f0; | 205 | + line-height: 1.6; |
| 220 | - color: #666; | 206 | + margin-bottom: 16rpx; |
| 221 | - border-radius: 12rpx; | ||
| 222 | - font-size: 32rpx; | ||
| 223 | - text-align: center; | ||
| 224 | 207 | ||
| 225 | - &:active { | 208 | + &:last-child { |
| 226 | - background: #e0e0e0; | 209 | + margin-bottom: 0; |
| 227 | - transform: scale(0.98); | ||
| 228 | } | 210 | } |
| 229 | } | 211 | } |
| 230 | 212 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-25 21:22:49 | 4 | + * @LastEditTime: 2025-09-26 08:14:03 |
| 5 | * @FilePath: /lls_program/src/pages/AdPage/index.vue | 5 | * @FilePath: /lls_program/src/pages/AdPage/index.vue |
| 6 | * @Description: 广告页面 | 6 | * @Description: 广告页面 |
| 7 | --> | 7 | --> |
| ... | @@ -24,11 +24,11 @@ | ... | @@ -24,11 +24,11 @@ |
| 24 | <view v-if="showManualRefresh" class="manual-refresh-container"> | 24 | <view v-if="showManualRefresh" class="manual-refresh-container"> |
| 25 | <view class="refresh-content"> | 25 | <view class="refresh-content"> |
| 26 | <view class="refresh-icon">⚠️</view> | 26 | <view class="refresh-icon">⚠️</view> |
| 27 | - <view class="refresh-title">加载遇到问题</view> | 27 | + <view class="refresh-title">网络连接异常</view> |
| 28 | - <view class="refresh-subtitle">网络可能不稳定,请尝试刷新页面</view> | 28 | + <view class="refresh-subtitle">请检查网络连接后重新进入小程序</view> |
| 29 | - <view class="refresh-buttons"> | 29 | + <view class="refresh-steps"> |
| 30 | - <view class="refresh-button" @tap="manualRefresh">刷新页面</view> | 30 | + <view class="step-item">1. 点击右上角 ⋯ 菜单</view> |
| 31 | - <view class="retry-button-small" @tap="retryLoadImage">重试</view> | 31 | + <view class="step-item">2. 选择"重新进入小程序"</view> |
| 32 | </view> | 32 | </view> |
| 33 | </view> | 33 | </view> |
| 34 | </view> | 34 | </view> |
| ... | @@ -181,22 +181,6 @@ const retryLoadImage = () => { | ... | @@ -181,22 +181,6 @@ const retryLoadImage = () => { |
| 181 | }; | 181 | }; |
| 182 | 182 | ||
| 183 | /** | 183 | /** |
| 184 | - * 手动刷新页面 | ||
| 185 | - */ | ||
| 186 | -const manualRefresh = () => { | ||
| 187 | - // 重置所有状态 | ||
| 188 | - retryCount.value = 0; | ||
| 189 | - imageLoading.value = true; | ||
| 190 | - imageLoadError.value = false; | ||
| 191 | - isTimeout.value = false; | ||
| 192 | - showManualRefresh.value = false; | ||
| 193 | - loading.value = true; | ||
| 194 | - | ||
| 195 | - // 重新初始化页面 | ||
| 196 | - initializePage(); | ||
| 197 | -}; | ||
| 198 | - | ||
| 199 | -/** | ||
| 200 | * 开始加载超时检测 | 184 | * 开始加载超时检测 |
| 201 | */ | 185 | */ |
| 202 | const startLoadingTimeout = () => { | 186 | const startLoadingTimeout = () => { |
| ... | @@ -204,7 +188,7 @@ const startLoadingTimeout = () => { | ... | @@ -204,7 +188,7 @@ const startLoadingTimeout = () => { |
| 204 | if (loadingTimeout.value) { | 188 | if (loadingTimeout.value) { |
| 205 | clearTimeout(loadingTimeout.value); | 189 | clearTimeout(loadingTimeout.value); |
| 206 | } | 190 | } |
| 207 | - | 191 | + |
| 208 | // 设置10秒超时 | 192 | // 设置10秒超时 |
| 209 | loadingTimeout.value = setTimeout(() => { | 193 | loadingTimeout.value = setTimeout(() => { |
| 210 | if (imageLoading.value) { | 194 | if (imageLoading.value) { |
| ... | @@ -249,7 +233,7 @@ const initializePage = async () => { | ... | @@ -249,7 +233,7 @@ const initializePage = async () => { |
| 249 | try { | 233 | try { |
| 250 | // 开始超时检测 | 234 | // 开始超时检测 |
| 251 | startLoadingTimeout(); | 235 | startLoadingTimeout(); |
| 252 | - | 236 | + |
| 253 | // 执行静默授权 | 237 | // 执行静默授权 |
| 254 | await performSilentAuth(); | 238 | await performSilentAuth(); |
| 255 | 239 | ... | ... |
-
Please register or login to post a comment