hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hzj 2025-12-31 16:49:13 +08:00
parent 50a46d0d4e
commit ebde6669f1
2 changed files with 181 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/api/lottery.js
View File

@ -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 {

184
src/views/Activities/NewYear/index.vue
View File

@ -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);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
backdrop-filter: blur(32px);
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);
padding: 12px 0;
"
>
@ -1106,10 +1149,19 @@
font-weight: 590;
padding: 16px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
backdrop-filter: blur(32px);
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);
"
@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);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
backdrop-filter: blur(32px);
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);
}
.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 {