fix(cp活动): 修复苹果端奖励滚动动画不同步的问题

src/views/Ranking/Couple/components/topUser.vue

@@ -259,13 +259,15 @@
 
       <!-- 奖励 -->
       <div class="reward-wrapper">
-        <div style="height: 100%; display: flex; align-items: center; overflow: hidden">
+        <div
+          style="height: 100%; display: flex; align-items: center; overflow: hidden"
+        >
           <!-- 滚动容器 -->
-          <div class="scroll-wrapper">
+          <div v-if="scrollReady && rewardList.length" :key="rewardScrollKey" class="scroll-wrapper">
             <!-- 2套内容 -->
-            <div class="scroll-content" v-for="value in 2">
+            <div class="scroll-content" v-for="value in 2" :key="value">
               <div
-                v-for="(item, index) in rewards.activityRewardProps"
+                v-for="(item, index) in rewardList"
                 :key="index"
                 style="align-self: stretch; display: flex; align-items: center; padding: 0 1vw"
                 @click="clickReward(item)"
@@ -276,6 +278,7 @@
                   :src="item.cover"
                   alt=""
                   style="min-width: 0; display: block; width: 10vw; object-fit: cover"
+                  @error="handleRewardImageError($event, item.type)"
                 />
                 <div style="min-width: 0; color: #fff; white-space: nowrap">
                   {{ formatRewardDisplay(item.type, item) }}
@@ -291,7 +294,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useLangStore } from '@/stores/lang'
 import { useI18n } from 'vue-i18n'
@@ -351,6 +354,13 @@ const props = defineProps({
   },
 })
 
+const rewardScrollKey = ref(0)
+const scrollReady = ref(false)
+
+const rewardList = computed(() => {
+  return Array.isArray(props.rewards?.activityRewardProps) ? props.rewards.activityRewardProps : []
+})
+
 const BorderImgUrl = computed(() => {
   switch (props.ranking) {
     case '1':
@@ -374,6 +384,67 @@ const clickReward = (item) => {
   topReward.value = item // 展示奖品赋值
   topRewardShow.value = true // 显示奖品
 }
+let rewardRestartTimer = null
+
+const waitForLayoutFrame = () => {
+  return new Promise((resolve) => {
+    const requestFrame =
+      typeof window !== 'undefined' && window.requestAnimationFrame
+        ? window.requestAnimationFrame
+        : (callback) => setTimeout(callback, 16)
+
+    requestFrame(() => {
+      requestFrame(resolve)
+    })
+  })
+}
+
+const restartRewardScroll = async () => {
+  if (rewardRestartTimer) {
+    clearTimeout(rewardRestartTimer)
+  }
+
+  scrollReady.value = false
+  await nextTick()
+
+  rewardRestartTimer = setTimeout(async () => {
+    await waitForLayoutFrame()
+    rewardScrollKey.value += 1
+    scrollReady.value = rewardList.value.length > 0
+    rewardRestartTimer = null
+  }, 80)
+}
+
+const handleVisibilityChange = () => {
+  if (!document.hidden) {
+    restartRewardScroll()
+  }
+}
+
+watch(
+  () =>
+    rewardList.value
+      .map((item) => `${item.type || ''}-${item.cover || ''}-${item.content || ''}-${item.quantity || ''}`)
+      .join('|'),
+  () => {
+    restartRewardScroll()
+  },
+  { flush: 'post', immediate: true },
+)
+
+onMounted(() => {
+  window.addEventListener('pageshow', restartRewardScroll)
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+})
+
+onUnmounted(() => {
+  if (rewardRestartTimer) {
+    clearTimeout(rewardRestartTimer)
+    rewardRestartTimer = null
+  }
+  window.removeEventListener('pageshow', restartRewardScroll)
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
+})
 </script>
 
 <style lang="scss" scoped>