feat(每日充值活动页面): 对接接口

src/views/Activities/DailyRecharge/index.vue

@@ -242,22 +242,28 @@ justify-content: flex-start;
               "
             >
               <!-- 开箱进度条 -->
-              <div style="width: 100%; overflow-x: auto" class="scroll">
+              <div
-                <div class="chest-progress-row">
+                :class="['scroll', 'chest-progress-scroll', { 'chest-progress-scroll-rtl': isRtlLayout }]"
+              >
+                <div :class="['chest-progress-row', { 'chest-progress-row-rtl': isRtlLayout }]">
                   <!-- 进度条 -->
                   <div class="chest-progress-track" :style="progressTrackStyle">
                     <!-- 进度条图片 -->
-                    <img
+                    <div
-                      v-smart-img
+                      :class="['chest-progress-fill', { 'chest-progress-fill-rtl': isRtlLayout }]"
-                      :src="imageUrl('progressBar')"
+                      :style="progressFillStyle"
-                      alt=""
+                    >
-                      class="chest-progress-bar"
+                      <img
-                      :style="progressBarStyle"
+                        v-smart-img
-                    />
+                        :src="imageUrl('progressBar')"
+                        alt=""
+                        :class="['chest-progress-bar', { 'chest-progress-bar-rtl': isRtlLayout }]"
+                      />
+                    </div>
                   </div>
 
                   <!-- 宝箱列表 -->
-                  <div class="chest-progress-list">
+                  <div :class="['chest-progress-list', { 'chest-progress-list-rtl': isRtlLayout }]">
                     <!-- 开头占位 -->
                     <div></div>
                     <div
@@ -510,8 +516,8 @@ const claimingTask2Reward = ref(false)
 const selectedRewardLevel = ref(1)
 const activityRewards = ref([])
 const createDefaultTaskInfo = () => ({
+  currentLevel: 1,
   task1SpendCoins: 0,
-  task1MaxLevel: 0,
   task1TodayRewardCoins: 0,
   task1PendingCoins: 0,
   task2RechargeAmount: 0,
@@ -533,13 +539,13 @@ const levelMap = computed(() => {
   return new Map(taskInfo.value.levelList.map((item) => [Number(item.level), item]))
 })
 const currentLevel = computed(() => {
-  return normalizeLevel(taskInfo.value.task1MaxLevel || 1)
+  return normalizeLevel(taskInfo.value.currentLevel || 1)
 })
 const currentLevelInfo = computed(() => {
   return levelMap.value.get(currentLevel.value) || {}
 })
 const currentChestImageName = computed(() => {
-  return `Lv${currentLevel.value}${currentLevelInfo.value.reached ? '_open' : ''}`
+  return `Lv${currentLevel.value}${currentLevelInfo.value.task2Claimed ? '_open' : ''}`
 })
 const canClaimTask1Reward = computed(() => {
   return Number(taskInfo.value.task1PendingCoins) > 0 && !claimingTask1Reward.value
@@ -568,7 +574,7 @@ const chestProgressList = computed(() => {
     const levelInfo = levelMap.value.get(level) || {}
     return {
       level,
-      reached: Boolean(levelInfo.reached),
+      task2Claimed: Boolean(levelInfo.task2Claimed),
     }
   })
 })
@@ -592,17 +598,17 @@ const progressTrackStyle = computed(() => {
     width: `${CHEST_PROGRESS_TRACK_WIDTH_VW}vw`,
     left: isRtlLayout.value ? 'auto' : '0',
     right: isRtlLayout.value ? '0' : 'auto',
-    justifyContent: isRtlLayout.value ? 'flex-end' : 'flex-start',
   }
 })
-const progressBarStyle = computed(() => {
+const progressFillStyle = computed(() => {
   return {
     width: progressBarWidth.value,
-    transform: isRtlLayout.value ? 'scaleX(-1)' : 'none',
+    marginLeft: isRtlLayout.value ? 'auto' : '0',
+    marginRight: isRtlLayout.value ? '0' : 'auto',
   }
 })
 const task1Completed = computed(() => {
-  return Boolean(currentLevelInfo.value.reached)
+  return Number(taskInfo.value.task1SpendCoins) >= Number(currentTask1TargetCoins.value)
 })
 const currentTask1TargetCoins = computed(() => {
   return currentLevelInfo.value.spendCoinsTarget || 0
@@ -656,11 +662,20 @@ const selectRewardChest = (level) => {
 }
 
 const isChestConditionReached = (level) => {
-  return Boolean(levelMap.value.get(Number(level))?.reached)
+  const chestLevel = Number(level)
+  if (chestLevel < currentLevel.value) {
+    return true
+  }
+
+  if (chestLevel === currentLevel.value) {
+    return task1Completed.value && taskInfo.value.task2Completed
+  }
+
+  return false
 }
 
 const getChestImageName = (chest) => {
-  return `Lv${chest.level}${chest.reached ? '_open' : ''}`
+  return `Lv${chest.level}${chest.task2Claimed ? '_open' : ''}`
 }
 
 const closedPopup = () => {
@@ -711,6 +726,7 @@ const claimTask2Reward = useThrottle(async () => {
     const res = await claimDailyRechargeTask2({
       activityType: 'DAILY_RECHARGE_TASK2',
       ruleId: currentTask2RewardTop.value.rule.id,
+      level: currentLevel.value,
     })
     if (res.status) {
       await getDailyRechargeTaskInfo()
@@ -730,7 +746,7 @@ const getDailyRechargeTaskInfo = async () => {
       ...res.body,
       levelList: Array.isArray(res.body.levelList) ? res.body.levelList : [],
     }
-    selectedRewardLevel.value = normalizeLevel(res.body.task1MaxLevel || 1)
+    selectedRewardLevel.value = currentLevel.value
   }
 }
 
@@ -860,12 +876,27 @@ onMounted(() => {
   padding: 132vw 2vw 10vw;
 }
 
+.chest-progress-scroll {
+  width: 100%;
+  overflow-x: auto;
+  direction: ltr;
+}
+
+.chest-progress-scroll-rtl {
+  direction: rtl;
+}
+
 .chest-progress-row {
   position: relative;
   z-index: 0;
   display: flex;
   align-items: center;
   width: max-content;
+  direction: ltr;
+}
+
+.chest-progress-row-rtl {
+  margin-left: auto;
 }
 
 .chest-progress-track {
@@ -874,22 +905,41 @@ onMounted(() => {
   height: 3vw;
   display: flex;
   align-items: center;
+  overflow: hidden;
   background: rgba(103, 41, 0, 0.7);
 }
 
+.chest-progress-fill {
+  height: 3vw;
+  overflow: hidden;
+}
+
+.chest-progress-fill-rtl {
+  direction: ltr;
+}
+
 .chest-progress-bar {
   display: block;
+  width: 100%;
   height: 3vw;
   object-fit: cover;
   transform-origin: center;
 }
 
+.chest-progress-bar-rtl {
+  transform: scaleX(-1) !important;
+}
+
 .chest-progress-list {
   display: flex;
   align-items: center;
   gap: 2vw;
 }
 
+.chest-progress-list-rtl {
+  flex-direction: row-reverse;
+}
+
 .reward-showcase {
   flex: 1;
   min-height: 0;