feat(新年活动): 完善页面

src/api/lottery.js

@@ -164,6 +164,31 @@ export const winnerHistory = async () => {
   }
 }
 
+// 获取累计抽奖-徽章信息
+export const rewardConfigsBadge = async (data) => {
+  try {
+    const response = await get(
+      `/activity/lottery/reward-configs-badge?activityType=${data.activityType}&activityId=${data.activityId}`
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get reward configs badge:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 领取累计抽奖奖励-徽章
+export const receiveRewardBadge = async (data) => {
+  try {
+    const response = await post('/activity/lottery/claim-reward-badge', data)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch receive reward badge:', error)
+    throw error
+  }
+}
+
 // 获取任务列表
 export const ActTaskList = async () => {
   try {

src/views/Activities/NewYear/index.vue

@@ -56,7 +56,7 @@
           <!-- 规则按钮 -->
           <img
             v-smart-img
-            :src="imageUrl(getImgName('helpBt'))"
+            :src="imageUrl(getImgName('rulesBt'))"
             alt=""
             style="display: block; width: 25vw"
             @click="ruleShow = true"
@@ -481,7 +481,7 @@
                   align-items: center;
                 "
               >
-                <div style="color: #ffe601; font-weight: 700" class="UserNickname">
+                <div style="color: #fff; font-weight: 700" class="UserNickname">
                   ${{ listItem?.amount }}
                 </div>
               </div>
@@ -642,11 +642,43 @@
               <div style="font-size: 1.2em; font-weight: 700">
                 Total Tickets:({{ totalDraw?.usedCount || 0 }}/100)
               </div>
+
+              <!-- 按钮 -->
+              <div style="width: 20%">
+                <!-- 未满足条件 -->
+                <img
+                  v-if="RechargeBadgeInfo.claimStatus == -1"
+                  v-smart-img
+                  :src="imageUrl('taskBtGo')"
+                  width="100%"
+                  style="display: block"
+                />
+
+                <!-- 未领取 -->
+                <img
+                  v-if="RechargeBadgeInfo.claimStatus == 0"
+                  :src="imageUrl('taskBtReceive')"
+                  :alt="t('receive')"
+                  width="100%"
+                  style="display: block"
+                  @click="receiveRechargeBadge(RechargeBadgeInfo)"
+                />
+
+                <!-- 已领取 -->
+                <img
+                  v-if="RechargeBadgeInfo.claimStatus == 1"
+                  :src="imageUrl('taskBtReceived')"
+                  :alt="t('done')"
+                  width="100%"
+                  style="display: block"
+                />
+              </div>
             </div>
             <div style="display: flex; align-items: center; gap: 4vw">
               <img
+                v-for="Badge in RechargeBadgeInfo.rewardProps"
                 v-smart-img
-                :src="imageUrl('LuckyDollarsMedal')"
+                :src="Badge.cover || ''"
                 alt=""
                 style="display: block; width: 18vw"
               />
@@ -935,7 +967,7 @@
             </div>
           </div>
 
-          <!-- 抽屉 -->
+          <!-- 操作抽屉 -->
           <div
             style="
               border-radius: 12px;
@@ -1094,10 +1126,21 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
+
                     border-radius: 12px;
-                    background: rgba(255, 255, 255, 0.2);
+                    border: 2px solid #fff;
-                    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+                    background: linear-gradient(
-                    backdrop-filter: blur(32px);
+                      264deg,
+                      rgba(220, 228, 255, 0.4) 10.17%,
+                      rgba(151, 176, 255, 0.4) 60.22%,
+                      rgba(220, 228, 255, 0.4) 103.12%
+                    );
+                    box-shadow: 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
+                      0 20.335px 12.71px 0 rgba(151, 176, 255, 0.08),
+                      0 8.897px 8.897px 0 rgba(151, 176, 255, 0.13),
+                      0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
+                    backdrop-filter: blur(4.5px);
+
                     padding: 12px 0;
                   "
                 >
@@ -1106,10 +1149,19 @@
                       font-weight: 590;
                       padding: 16px;
 
-                      border-radius: 8px;
+                      border-radius: 12px;
-                      background: rgba(255, 255, 255, 0.2);
+                      border: 2px solid #fff;
-                      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+                      background: linear-gradient(
-                      backdrop-filter: blur(32px);
+                        264deg,
+                        rgba(220, 228, 255, 0.4) 10.17%,
+                        rgba(151, 176, 255, 0.4) 60.22%,
+                        rgba(220, 228, 255, 0.4) 103.12%
+                      );
+                      box-shadow: 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
+                        0 20.335px 12.71px 0 rgba(151, 176, 255, 0.08),
+                        0 8.897px 8.897px 0 rgba(151, 176, 255, 0.13),
+                        0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
+                      backdrop-filter: blur(4.5px);
                     "
                     @click="searchPayee"
                   >
@@ -1126,7 +1178,7 @@
                     :class="['coin-item', { selected: selectedCoin?.id === coin.id }]"
                   >
                     <img v-smart-img src="/src/assets/icon/dollar.png" alt="" style="width: 40%" />
-                    <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
+                    <div style="font-weight: 500; color: #fff">${{ coin.price }}</div>
                   </div>
                 </div>
 
@@ -1139,8 +1191,21 @@
                       display: flex;
                       justify-content: center;
                       align-items: center;
-                      border-radius: 32px;
+
-                      background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+                      border-radius: 12px;
+                      border: 2px solid #fff;
+                      background: linear-gradient(
+                        264deg,
+                        rgba(220, 228, 255, 0.4) 10.17%,
+                        rgba(151, 176, 255, 0.4) 60.22%,
+                        rgba(220, 228, 255, 0.4) 103.12%
+                      );
+                      box-shadow: 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
+                        0 20.335px 12.71px 0 rgba(151, 176, 255, 0.08),
+                        0 8.897px 8.897px 0 rgba(151, 176, 255, 0.13),
+                        0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
+                      backdrop-filter: blur(4.5px);
+
                       font-weight: 590;
                     "
                     @click="transfer"
@@ -1189,7 +1254,7 @@
                   >
                     <img v-smart-img src="/src/assets/icon/coin.png" alt="" style="width: 40%" />
                     <div style="font-size: 0.7em">{{ coin.amount }} coins x1</div>
-                    <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
+                    <div style="font-weight: 500; color: #fff">${{ coin.price }}</div>
                   </div>
                 </div>
 
@@ -1199,11 +1264,25 @@
                     style="
                       width: 70%;
                       padding: 12px;
+
                       display: flex;
                       justify-content: center;
                       align-items: center;
-                      border-radius: 32px;
+
-                      background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+                      border-radius: 12px;
+                      border: 2px solid #fff;
+                      background: linear-gradient(
+                        264deg,
+                        rgba(220, 228, 255, 0.4) 10.17%,
+                        rgba(151, 176, 255, 0.4) 60.22%,
+                        rgba(220, 228, 255, 0.4) 103.12%
+                      );
+                      box-shadow: 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
+                        0 20.335px 12.71px 0 rgba(151, 176, 255, 0.08),
+                        0 8.897px 8.897px 0 rgba(151, 176, 255, 0.13),
+                        0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
+                      backdrop-filter: blur(4.5px);
+
                       font-weight: 590;
                     "
                     :disabled="!selectedCoin || !selectedPayee.value?.id"
@@ -1304,7 +1383,7 @@
             align-items: center;
           "
         >
-          <div style="color: #ffe601; font-weight: 700">${{ myRanking?.amount || 0 }}</div>
+          <div style="color: #fff; font-weight: 700">${{ myRanking?.amount || 0 }}</div>
         </div>
       </itemCenter>
 
@@ -1530,8 +1609,10 @@ import {
   multiDraw, // 执行连抽
   drawRecords, // 获取中奖记录
   ActTaskList, // 获取任务列表
+  rewardConfigsBadge, // 获取累计抽奖-徽章信息
   receiveTickets, // 领取任务奖励
   receiveRechargeReward, // 领取充值奖励
+  receiveRewardBadge, // 领取累计抽奖奖励-徽章
   winnerHistory, //获取历史中奖用户
   withdrawableAmount, //获取可提现金额
   transferActivityDollar, // 转账活动美金
@@ -1660,6 +1741,8 @@ const result = ref([]) // 抽奖结果
 const resultShowIndex = ref(0)
 const myRecords = ref([]) // 抽奖结果
 
+const RechargeBadgeInfo = ref([]) //充值奖励-徽章信息
+
 const transferShow = ref(false)
 const exchangeShow = ref(false)
 const withdrawShow = ref(false)
@@ -2184,12 +2267,16 @@ const getActivityReward = async () => {
 
 //充值奖励的内容样式
 const rewardContentLayer = (sort) => {
+  let gridStyle = ''
+  if (currentLangType.value == 'ar') {
+    gridStyle = 'direction: ltr;'
+  }
   if (sort == '1') {
-    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:5.5vw 6.5vw;padding: 23.5vw 5.5vw 29vw;`
+    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:5.5vw 6.5vw;padding: 23.5vw 5.5vw 29vw;${gridStyle}`
   } else if (sort == '2' || sort == '3') {
-    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:5.5vw 6.5vw;padding: 23.5vw 5.5vw 29vw;`
+    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:5.5vw 6.5vw;padding: 23.5vw 5.5vw 29vw;${gridStyle}`
   } else if (sort == '4' || sort == '5' || sort == '6') {
-    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:5.5vw 6.5vw;padding: 23.5vw 5.5vw 29vw;`
+    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:5.5vw 6.5vw;padding: 23.5vw 5.5vw 29vw;${gridStyle}`
   }
 }
 
@@ -2197,7 +2284,7 @@ const rewardContentLayer = (sort) => {
 const showDetail = (type, reward) => {
   let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS', 'TICKET']
   if (showamount.includes(type)) {
-    return reward.content
+    return `*${reward.content}`
   } else if (type === 'DOLLARS') {
     return `$${reward.content}`
   } else {
@@ -2239,6 +2326,18 @@ const getTaskList = async () => {
   }
 }
 
+// 获取累计抽奖-徽章信息
+const getConfigsBadgeInfo = async () => {
+  let data = {
+    activityType: 'USER_RECHARGE_DRAW',
+    activityId: '2005571533988298753',
+  }
+  const resConfigsBadge = await rewardConfigsBadge(data)
+  if (resConfigsBadge.status && resConfigsBadge.body) {
+    RechargeBadgeInfo.value = resConfigsBadge.body?.[0]
+  }
+}
+
 //获取中奖记录
 const getDrawRecords = async () => {
   const resDrawRecords = await drawRecords()
@@ -2289,6 +2388,23 @@ const receiveReward = async (rewards) => {
   }
 }
 
+// 领取累计抽奖奖励-徽章
+const receiveRechargeBadge = async (rewards) => {
+  let data = {
+    activityType: rewards.activityType,
+    activityId: '2005571533988298753',
+    ruleId: rewards.ruleId,
+  }
+  try {
+    const resReceive = await receiveRewardBadge(data)
+    if (resReceive.status && resReceive.body) {
+      getConfigsBadgeInfo() // 刷新累计抽奖-徽章信息
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
 // 页面初始化数据
 const initData = async () => {
   await Promise.all([
@@ -2303,6 +2419,7 @@ const initData = async () => {
     getTotalDrawCount(), //获取我的累计抽奖次数
     getTaskList(), //获取任务列表
     getWinners(), //获取历史中奖用户
+    getConfigsBadgeInfo(), // 刷新累计抽奖-徽章信息
   ])
 }
 
@@ -2535,19 +2652,30 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border: 2px solid transparent;
 
-  transition: all 0.2s;
+  // transition: all 0.2s;
   aspect-ratio: 1/1;
 
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid #fff;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+  background: linear-gradient(
-  backdrop-filter: blur(32px);
+    264deg,
+    rgba(220, 228, 255, 0.4) 10.17%,
+    rgba(151, 176, 255, 0.4) 60.22%,
+    rgba(220, 228, 255, 0.4) 103.12%
+  );
+  box-shadow: 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
+    0 20.335px 12.71px 0 rgba(151, 176, 255, 0.08), 0 8.897px 8.897px 0 rgba(151, 176, 255, 0.13),
+    0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
+  backdrop-filter: blur(4.5px);
 }
 
 .coin-item.selected {
-  border-color: #8b5cf6;
+  border-radius: 12px;
+  border: 2px solid #80d7ff;
+  box-shadow: -0.25px -0.25px 1px 0 #16bcff, 0.25px 0.25px 1px 0 #16bcff,
+    0 0 3px 0 rgba(22, 188, 255, 0.8), 0 0 5px 0 rgba(22, 188, 255, 0.6),
+    0 0 4px 0 rgba(0, 83, 117, 0.3);
 }
 
 .coin-item:active {