feat: 添加背景滚动功能

frontend/pages/square/components/WaterfallGrid.vue

@@ -75,7 +75,7 @@ const props = defineProps({
   isActive: { type: Boolean, default: true },  // 是否处于激活状态
 })
 
-const emit = defineEmits(['cardClick'])
+const emit = defineEmits(['cardClick', 'scroll'])
 
 // ========== 布局常量 ==========
 const rpx2px = (rpx) => Math.round(uni.getSystemInfoSync().windowWidth / 750 * rpx)
@@ -121,18 +121,44 @@ const iosScrollPaused = ref(true)
 const startIOSAutoScroll = () => {
   if (!isComponentMounted || !isIOS) return
   iosScrollPaused.value = false
+
+  // 启动 iOS 滚动位置追踪，定时发送 scrollLeft 给父组件
+  clearInterval(iosScrollEmitTimer)
+  iosScrollEmitTimer = setInterval(() => {
+    if (!isComponentMounted) return
+    // iOS CSS 动画从 0 到 totalWidth.value，循环播放
+    const scrollDist = totalWidth.value
+    const duration = scrollDist / AUTO_SCROLL_SPEED_IOS
+    const elapsed = (Date.now() % duration)
+    const pos = (elapsed / duration) * scrollDist
+    emit('scroll', pos)
+  }, 16)
 }
 
 const stopIOSAutoScroll = () => {
   iosScrollPaused.value = true
+  clearInterval(iosScrollEmitTimer)
+  iosScrollEmitTimer = null
 }
 
 const pauseIOSAutoScroll = () => {
   iosScrollPaused.value = true
+  clearInterval(iosScrollEmitTimer)
+  iosScrollEmitTimer = null
 }
 
 const resumeIOSAutoScroll = () => {
   iosScrollPaused.value = false
+  // 重新启动 iOS 滚动位置追踪
+  clearInterval(iosScrollEmitTimer)
+  iosScrollEmitTimer = setInterval(() => {
+    if (!isComponentMounted) return
+    const scrollDist = totalWidth.value
+    const duration = scrollDist / AUTO_SCROLL_SPEED_IOS
+    const elapsed = (Date.now() % duration)
+    const pos = (elapsed / duration) * scrollDist
+    emit('scroll', pos)
+  }, 16)
 }
 let rafId = null
 let userInteracting = false
@@ -141,6 +167,8 @@ let appendTimer = null  // 防抖定时器
 let autoScrollPos = 0  // 自动滚动目标位置
 let momentumTimer = null  // iOS/Android 惯性滚动检测定时器
 let scrollUpdateTimer = null  // 定期同步 scrollLeft 的定时器（仅 Android）
+let iosScrollEmitTimer = null  // iOS 滚动位置发射定时器
+let iosCurrentScrollPos = 0  // iOS CSS 动画当前滚动位置
 
 const startAutoScroll = () => {
   if (!isComponentMounted || isIOS) return
@@ -269,6 +297,9 @@ const onScroll = (e) => {
   if (!isComponentMounted) return
   currentScrollLeft = e.detail.scrollLeft
 
+  // 发送滚动事件给父组件用于背景视差
+  emit('scroll', currentScrollLeft)
+
   // iOS 手动滚动时，不再更新自动滚动相关变量
   if (isIOS && isManualScrolling) {
     return

frontend/pages/square/square.vue

@@ -1,7 +1,14 @@
 <template>
   <view class="square-container">
-    <!-- 固定背景 -->
+    <!-- 可横向滑动的背景 -->
-    <image class="background-fixed" src="/static/square/squearbj.png" mode="aspectFill" />
+    <view class="bg-wrapper">
+      <image
+        class="background-fixed"
+        :style="{ transform: `translateX(${-bgScrollLeft}px)` }"
+        src="/static/square/squearbj1.png"
+        mode="aspectFill"
+      />
+    </view>
 
     <!-- 横向瀑布流卡片层（内部自带横向滚动） -->
     <WaterfallGrid
@@ -13,6 +20,7 @@
       :category="activeContentTab"
       :isActive="isActive"
       @cardClick="handleCardClick"
+      @scroll="handleWaterfallScroll"
       class="fall-bg"
     />
 
@@ -105,11 +113,19 @@ const {
 // banner(216+360rpx) + tab栏(16+80rpx) + 间距(8rpx) ≈ 680rpx
 const bannerBottomPx = computed(() => Math.round(screenWidth.value / 750 * 715))
 
+const bgScrollLeft = ref(0)
+
 // ========== Handlers ==========
+
 const handleCardClick = (card) => {
   // WaterfallGrid 组件内部已处理单击跳转和双击点赞
 }
 
+const handleWaterfallScroll = (scrollLeft) => {
+  // 背景以 30% 速度跟随瀑布流滚动
+  bgScrollLeft.value = scrollLeft * 0.3
+}
+
 const handleActivityClick = (item) => {
   uni.navigateTo({
     url: `/pages/support-activity/index?id=${item.id}`,
@@ -260,13 +276,19 @@ onUnmounted(() => {
   margin-bottom: 8rpx;
 } */
 
-.background-fixed {
+.bg-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 110%;
   z-index: 0;
+  overflow: hidden;
+}
+
+.background-fixed {
+  width: 300%;
+  height: 100%;
 }
 
 .nav-mask {

frontend/pages/support-activity/components/ActionBar.vue

@@ -334,13 +334,36 @@ async function handleConfirmContribute() {
     }
 
     // 调用贡献API多次
+    let successCount = 0
+    let lastRemainingBalance = null
+    let lastErrorMessage = ''
     for (let i = 0; i < quantity.value; i++) {
-      await contributeItem(item, false, true)
+      const res = await contributeItem(item, true, true)
+      console.log(`第${i+1}次调用返回值:`, res)
+      if (res && res.success !== false) {
+        successCount++
+        lastRemainingBalance = res.remainingBalance
+      } else {
+        lastErrorMessage = res?.message || '活动不在进行中，无法购买'
+      }
+    }
+
+    // 更新本地余额（使用最后一次成功的余额）
+    if (lastRemainingBalance !== null) {
+      await updateLocalBalanceFromResult(lastRemainingBalance)
+    }
+
+    // 显示自定义结果提示
+    if (successCount === quantity.value) {
+      showResultToast('✅', `贡献成功\n+${item.cost * successCount} 贡献值已到账`)
+    } else if (successCount > 0) {
+      showResultToast('⚠️', `部分成功 ${successCount}/${quantity.value}`)
+    } else {
+      showResultToast('❌', lastErrorMessage || '贡献失败')
     }
   } finally {
     processingItems.delete(item.type)
     isContributing.value = false
-    // 注意：不清除 selectedItem，让用户可以继续赠送或选择其他道具
   }
 }
 
@@ -366,11 +389,13 @@ async function contributeItem(item, isRetry = false, silent = false) {
   try {
     // 使用 activity-config.js 中的 purchaseItem 函数
     const result = await purchaseItem(props.activityId, item.type, 1)
+    console.log(`[contributeItem] result:`, result, 'isRetry:', isRetry, 'silent:', silent)
 
     // 检查购买结果
     if (!result.success) {
-      if (!silent) showResultToast('', result.message || '活动不在进行中，无法购买')
+      const msg = result.message || '活动不在进行中，无法购买'
-      return false
+      if (!silent) showResultToast('', msg)
+      return { success: false, message: msg }
     }
 
     // 成功：触发反馈动画（重试时静默，不触发）
@@ -393,7 +418,7 @@ async function contributeItem(item, isRetry = false, silent = false) {
     }
 
     // 重试时返回完整结果供 syncPendingActions 汇总；正常时返回 true
-    return isRetry ? { contribution: result.totalContribution, remainingBalance: result.remainingBalance } : true
+    return isRetry ? { contribution: result.totalContribution, remainingBalance: result.remainingBalance, success: true } : { success: true }
   } catch (error) {
     console.error('贡献失败:', error)
 
@@ -404,12 +429,12 @@ async function contributeItem(item, isRetry = false, silent = false) {
       if (!queued) {
         // 队列已满，退还刚扣除的余额
         refundLocalBalance(item.cost)
-        return false
+        return { success: false, message: '网络异常，已加入队列' }
       }
-      showResultToast('', '网络异常，已加入队列')
+      return { success: false, message: '网络异常，已加入队列' }
     }
 
-    return false
+    return { success: false, message: error.message || '贡献失败' }
   }
 }
 

frontend/pages/support-activity/index.vue

@@ -22,11 +22,11 @@
     />
 
     <!-- 实时贡献列表 -->
-    <ContributionList
+    <!-- <ContributionList
       v-if="activityId && !isLoading"
       :activity-id="activityId"
       class="contribution-list-wrapper"
-    />
+    /> -->
 
     <!-- 舞台区域 -->
     <StageArea