feat(邀请新用户页): 对接接口
This commit is contained in:
parent
749e6d8284
commit
d28977202a
@ -60,13 +60,13 @@ export const getMyInviteUsers = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 邀请用户奖励池
|
||||
export const getInviteAwardPool = async () => {
|
||||
// 获取绑定用户奖励
|
||||
export const apiGetBindingUserRewards = async (data) => {
|
||||
try {
|
||||
const response = await get(`/activity/invite/user/award/pool`)
|
||||
const response = await post(`/props-activity/reward/client/map/config-info`, data)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get my invite award pool:', error)
|
||||
console.error('Failed to fetch get binding user rewards:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
|
||||
@ -43,7 +43,6 @@ const RankingPage = [
|
||||
|
||||
// 活动页面
|
||||
const ACTIVITIES = [
|
||||
'/invitation-to-register', //邀请新用户(邀请码)
|
||||
'/recharge-reward', //充值奖励页面
|
||||
|
||||
'/Lebanon-independence-day', //黎巴嫩独立日
|
||||
|
||||
@ -11,11 +11,11 @@
|
||||
</div>
|
||||
|
||||
<!-- 确认邀请码 -->
|
||||
<div style="padding: 87% 0 5%">
|
||||
<div class="leftBt">
|
||||
<img
|
||||
v-if="showBindingBt"
|
||||
v-smart-img
|
||||
:src="imageUrl('enterCode')"
|
||||
:src="imageUrl(getImgName('enterCode'))"
|
||||
alt=""
|
||||
width="40%"
|
||||
@click="enterCodeShow = true"
|
||||
@ -24,7 +24,7 @@
|
||||
<img
|
||||
v-else-if="myInviter.inviterInfo?.userId"
|
||||
v-smart-img
|
||||
:src="imageUrl('privateChat')"
|
||||
:src="imageUrl(getImgName('privateChat'))"
|
||||
alt=""
|
||||
width="40%"
|
||||
@click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
|
||||
@ -34,28 +34,24 @@
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div
|
||||
style="padding: 0 3%; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px"
|
||||
style="
|
||||
padding: 91vw 3vw 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2vw;
|
||||
"
|
||||
>
|
||||
<!-- 我的邀请码 -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
background: rgba(194, 174, 232, 0.2);
|
||||
backdrop-filter: blur(32px);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
"
|
||||
@click.stop
|
||||
<itemCenter
|
||||
style=""
|
||||
:imgUrl="imageUrl(getImgName('myCode'))"
|
||||
:contentStyle="`padding: 26vw 6vw 16vw;`"
|
||||
>
|
||||
<div style="font-weight: 590">My invitation code:</div>
|
||||
<div
|
||||
style="
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
padding: 3vw 1vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -67,22 +63,39 @@
|
||||
v-smart-img
|
||||
src="../../assets/icon/copy.png"
|
||||
alt=""
|
||||
width="24px"
|
||||
style="display: block; width: 2em; object-fit: cover"
|
||||
@click="copyCode(myInviteInfo.inviteCode || '')"
|
||||
/>
|
||||
</div>
|
||||
<div style="font-weight: 510; font-size: 0.7em">
|
||||
*Copy your invitation code and send it to your new friends.
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 模块切换按钮 -->
|
||||
<div style="display: flex; justify-content: space-around; align-items: center">
|
||||
<!-- 奖励按钮 -->
|
||||
<div style="width: 40%; position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('processBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
:style="{ opacity: showModule === 'process' ? 0 : 1 }"
|
||||
@click="showModule = 'process'"
|
||||
/>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('processBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
|
||||
:style="{ opacity: showModule === 'process' ? 1 : 0 }"
|
||||
@click="showModule = 'process'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 列表按钮 -->
|
||||
<div style="width: 40%; position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('listBt')"
|
||||
:src="imageUrl(getImgName('listBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
:style="{ opacity: showModule === 'list' ? 0 : 1 }"
|
||||
@ -90,58 +103,63 @@
|
||||
/>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('listBtActive')"
|
||||
:src="imageUrl(getImgName('listBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
|
||||
:style="{ opacity: showModule === 'list' ? 1 : 0 }"
|
||||
@click="showModule = 'list'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 奖励按钮 -->
|
||||
<div style="width: 40%; position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('rewardBt')"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
:style="{ opacity: showModule === 'reward' ? 0 : 1 }"
|
||||
@click="showModule = 'reward'"
|
||||
/>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('rewardBtActive')"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
|
||||
:style="{ opacity: showModule === 'reward' ? 1 : 0 }"
|
||||
@click="showModule = 'reward'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 邀请列表模块 -->
|
||||
<div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 12px">
|
||||
<div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 2vw">
|
||||
<!-- 收入展示 -->
|
||||
<div style="display: flex; justify-content: space-around; align-items: center">
|
||||
<div style="position: relative; width: 47%">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('totalIncome')"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<itemCenter
|
||||
style=""
|
||||
:imgUrl="imageUrl(getImgName('incomeBg'))"
|
||||
:contentStyle="`padding: 32vw 6vw 18vw;display:grid;grid-template-columns: repeat(2, 1fr);gap: 3.8vw;`"
|
||||
>
|
||||
<!-- 总邀请人数 -->
|
||||
<div
|
||||
style="
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 2vw;
|
||||
"
|
||||
>
|
||||
<div>Total invitations:</div>
|
||||
<div>{{ myInviteIncome.validInviteCount || 0 }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日邀请人数 -->
|
||||
<div
|
||||
style="
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 2vw;
|
||||
"
|
||||
>
|
||||
<div>Today's invitation:</div>
|
||||
<div>{{ myInviteIncome.todayInviteCount || 0 }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 总收入 -->
|
||||
<div
|
||||
style="
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 2vw;
|
||||
"
|
||||
>
|
||||
<div>Total income:</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
@ -152,25 +170,19 @@
|
||||
<div style="font-weight: 590">{{ myInviteIncome.totalIncome || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative; width: 47%">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('todayIncome')"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
|
||||
<!-- 今日邀请人数 -->
|
||||
<div
|
||||
style="
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 2vw;
|
||||
"
|
||||
>
|
||||
<div>Today's income:</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
@ -181,198 +193,142 @@
|
||||
<div style="font-weight: 590">{{ myInviteIncome.todayIncome || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 邀请人数 -->
|
||||
<div
|
||||
style="
|
||||
border-radius: 8px;
|
||||
background: rgba(194, 174, 232, 0.2);
|
||||
backdrop-filter: blur(32px);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
background: radial-gradient(323.25% 50.32% at 50% 50%, #d58ef4 0%, #7a5aff 100%);
|
||||
"
|
||||
></div>
|
||||
<div style="font-weight: 590">
|
||||
Number of valid users invited: {{ myInviteIncome.validInviteCount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 列表 -->
|
||||
<div
|
||||
style="
|
||||
border-radius: 8px;
|
||||
background: rgba(194, 174, 232, 0.2);
|
||||
backdrop-filter: blur(32px);
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
"
|
||||
<itemCenter
|
||||
style=""
|
||||
:imgUrl="imageUrl(getImgName('listBg'))"
|
||||
:contentStyle="`padding: 25vw 6vw 10vw;`"
|
||||
>
|
||||
<!-- 头部 -->
|
||||
<div style="width: 100%; display: flex; align-items: center">
|
||||
<div style="flex: 1; font-weight: 590; font-size: 0.85em">Users</div>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
font-weight: 590;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: linear-gradient(
|
||||
rgba(217, 217, 217, 0) 0%,
|
||||
#d9d9d9 50%,
|
||||
rgba(217, 217, 217, 0) 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
<div style="font-weight: 590; font-size: 0.82em">Remaining time</div>
|
||||
<div
|
||||
style="
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: linear-gradient(
|
||||
rgba(217, 217, 217, 0) 0%,
|
||||
#d9d9d9 50%,
|
||||
rgba(217, 217, 217, 0) 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div style="flex: 1; font-weight: 590; text-align: end; font-size: 0.82em">
|
||||
Prowide income
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表项 -->
|
||||
<div
|
||||
v-for="user in myInviteUsers"
|
||||
style="width: 100%; display: flex; align-items: center"
|
||||
>
|
||||
<div style="flex: 1; font-weight: 590; font-size: 0.7em">
|
||||
ID:{{ user.invitedUserAccount || '-' }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
font-weight: 590;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: linear-gradient(
|
||||
rgba(217, 217, 217, 0) 0%,
|
||||
#d9d9d9 50%,
|
||||
rgba(217, 217, 217, 0) 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
<div style="font-weight: 590; font-size: 0.7em">{{ user.remainingDays || 0 }}Day</div>
|
||||
<div
|
||||
style="
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: linear-gradient(
|
||||
rgba(217, 217, 217, 0) 0%,
|
||||
#d9d9d9 50%,
|
||||
rgba(217, 217, 217, 0) 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<img v-smart-img src="/src/assets/icon/coin.png" alt="" width="15%" />
|
||||
<div style="color: #ffb627; font-size: 0.8em; font-weight: 590">
|
||||
{{ user.provideIncome || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 奖励说明模块 -->
|
||||
<div v-if="showModule == 'reward'" style="display: flex; flex-direction: column; gap: 12px">
|
||||
<div style="position: relative" v-for="poolItem in inviteAwardPool">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(`reward${poolItem.quantity}people`)"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
inset: 12% 0 0;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
background: rgba(194, 174, 232, 0.2);
|
||||
backdrop-filter: blur(32px);
|
||||
padding: 8px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-around">
|
||||
<!-- 头部 -->
|
||||
<div style="width: 100%; display: flex; align-items: center">
|
||||
<div style="flex: 1; font-weight: 590; font-size: 0.85em">Users</div>
|
||||
<div
|
||||
style="width: 45%; position: relative"
|
||||
v-for="(award, index) in poolItem.activityRewardPropsList"
|
||||
style="
|
||||
flex: 1;
|
||||
font-weight: 590;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img v-smart-img :src="imageUrl('rewardItemBg')" alt="" width="100%" />
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: linear-gradient(
|
||||
rgba(217, 217, 217, 0) 0%,
|
||||
#d9d9d9 50%,
|
||||
rgba(217, 217, 217, 0) 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
<div style="font-weight: 590; font-size: 0.82em">Remaining time</div>
|
||||
<div
|
||||
style="
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: linear-gradient(
|
||||
rgba(217, 217, 217, 0) 0%,
|
||||
#d9d9d9 50%,
|
||||
rgba(217, 217, 217, 0) 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div style="flex: 1; font-weight: 590; text-align: end; font-size: 0.82em">
|
||||
Prowide income
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表项 -->
|
||||
<div class="overflow-y-auto" style="align-self: stretch; width: 100%">
|
||||
<div
|
||||
v-for="user in myInviteUsers"
|
||||
style="width: 100%; display: flex; align-items: center"
|
||||
>
|
||||
<div style="flex: 1; font-weight: 590; font-size: 0.7em">
|
||||
ID:{{ user.invitedUserAccount || '-' }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
font-weight: 590;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img v-smart-img :src="award.cover" alt="" width="50%" />
|
||||
<div>{{ showAwardText(award) }}</div>
|
||||
<div
|
||||
style="
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: linear-gradient(
|
||||
rgba(217, 217, 217, 0) 0%,
|
||||
#d9d9d9 50%,
|
||||
rgba(217, 217, 217, 0) 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
<div style="font-weight: 590; font-size: 0.7em">
|
||||
{{ user.remainingDays || 0 }}Day
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: linear-gradient(
|
||||
rgba(217, 217, 217, 0) 0%,
|
||||
#d9d9d9 50%,
|
||||
rgba(217, 217, 217, 0) 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<img v-smart-img src="/src/assets/icon/coin.png" alt="" width="15%" />
|
||||
<div style="color: #ffb627; font-size: 0.8em; font-weight: 590">
|
||||
{{ user.provideIncome || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<img
|
||||
v-if="poolItem.state == '1'"
|
||||
v-smart-img
|
||||
:src="imageUrl('receiveBtActive')"
|
||||
alt=""
|
||||
width="35%"
|
||||
@click="receiveAward(poolItem.id)"
|
||||
/>
|
||||
<img v-else v-smart-img :src="imageUrl('receiveBt')" alt="" width="35%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
|
||||
<!-- 流程说明模块 -->
|
||||
<div v-if="showModule == 'process'" style="position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('example'))"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -380,11 +336,13 @@
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
|
||||
<!-- 帮助模块 -->
|
||||
<div v-if="helpInfoShow" style="margin: 20% 10%; position: relative" @click.stop>
|
||||
<img v-smart-img :src="imageUrl('helpInfo')" alt="" width="100%" />
|
||||
<div
|
||||
style="position: absolute; width: 8%; aspect-ratio: 1/1; top: 3.8%; right: 7%"
|
||||
@click="closedPopup"
|
||||
></div>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('helpInfo'))"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 输入邀请码模块 -->
|
||||
@ -394,53 +352,95 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
@click="closedPopup"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 80%;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
"
|
||||
<itemCenter
|
||||
style=""
|
||||
:imgUrl="imageUrl(getImgName('enterCodeBg'))"
|
||||
:contentStyle="`padding: 31.5vw 6vw 10vw;display: flex;flex-direction: column;justify-content: space-between;`"
|
||||
@click.stop
|
||||
>
|
||||
<div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">Enter Invitation Code</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; gap: 8px">
|
||||
<!-- 邀请码 -->
|
||||
<div style="flex: 1">
|
||||
<input
|
||||
v-model="invitationCode"
|
||||
type="text"
|
||||
<!-- 邀请码 -->
|
||||
<div class="bindingUserCode">
|
||||
<!-- 输入框 -->
|
||||
<input
|
||||
v-model="invitationCode"
|
||||
type="text"
|
||||
style="
|
||||
width: 44.5vw;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-weight: 510;
|
||||
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
"
|
||||
@keyup.enter="confirmInvitationCode"
|
||||
/>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<div style="width: 16vw" @click="confirm"></div>
|
||||
</div>
|
||||
|
||||
<!-- 礼物 -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 28vw;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5vw;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="reward in bindingUserRewards"
|
||||
style="align-self: stretch; display: flex; flex-direction: column"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-weight: 510;
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
"
|
||||
@keyup.enter="confirmInvitationCode"
|
||||
/>
|
||||
</div>
|
||||
min-width: 0;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
<!-- 确认按钮 -->
|
||||
<img v-smart-img :src="imageUrl('confirm')" alt="" width="25%" @click="confirm" />
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
width="70%"
|
||||
style="display: block; object-fit: cover"
|
||||
@error="(e) => handleImageError(e, reward.type)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
{{ showDetail(reward) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 510; font-size: 0.7em">
|
||||
*Only users who registered within 72 hours can fill in the invitation code. Once the
|
||||
invitation code is flled in, itcannot be modifed.
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</maskLayer>
|
||||
|
||||
@ -459,27 +459,42 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { gotoPrivateChat } from '@/utils/appBridge.js'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import maskLayer from '../../components/MaskLayer.vue'
|
||||
import { useLangStore } from '@/stores/lang'
|
||||
import { gotoPrivateChat } from '@/utils/appBridge.js'
|
||||
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { preloadImages } from '@/utils/imagePreloader.js'
|
||||
|
||||
import {
|
||||
getMyInviteCode, // 获取我的邀请码
|
||||
bindInviteCode, // 绑定邀请码
|
||||
getMyInviteIncome, // 获取收益统计
|
||||
getMyInviteUsers, // 有效邀请用户列表
|
||||
getInviteAwardPool, // 邀请用户奖励池
|
||||
apiGetBindingUserRewards, // 获取绑定用户奖励
|
||||
getInviteReceiveAward, // 邀请用户领取奖励
|
||||
getMyInviter, // 获取我的邀请人信息
|
||||
} from '@/api/invitation.js'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { preloadImages } from '@/utils/imagePreloader.js'
|
||||
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import itemCenter from '@/components/itemCenter.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
|
||||
const langStore = useLangStore()
|
||||
// 当前语言类型
|
||||
const currentLangType = computed(() => {
|
||||
return langStore.selectedLang?.type || 'en'
|
||||
})
|
||||
|
||||
// 根据语言获取图片名
|
||||
const getImgName = (filename) => {
|
||||
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
|
||||
}
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const imageUrl = (filename) => getPngUrl('invitation/InviteNewUser/', filename)
|
||||
const imageUrl = (filename) => getPngUrl('invitation/InviteNewUser2/', filename)
|
||||
|
||||
const { copy, isSupported } = useClipboard()
|
||||
|
||||
@ -492,9 +507,9 @@ const myInviteInfo = ref({}) //我的邀请信息
|
||||
const myInviter = ref({}) //我的邀请人信息
|
||||
const myInviteIncome = ref({}) //邀请用户收益统计
|
||||
const myInviteUsers = ref([]) //邀请用户列表
|
||||
const inviteAwardPool = ref({})
|
||||
const bindingUserRewards = ref([]) //绑定用户奖励
|
||||
|
||||
const showModule = ref('list') //显示模块
|
||||
const showModule = ref('process') //显示模块
|
||||
|
||||
const showBindingBt = computed(() => {
|
||||
return !myInviter.value.myInfo?.expired && !myInviter.value.inviterInfo
|
||||
@ -511,6 +526,30 @@ const closedPopup = () => {
|
||||
enterCodeShow.value = false
|
||||
}
|
||||
|
||||
// 奖励图片资源出错处理
|
||||
const handleImageError = (e, type) => {
|
||||
console.log('图片资源出错')
|
||||
e.target.onerror = null //防止循环
|
||||
if (type == 'GOLD') {
|
||||
e.target.src = new URL('/src/assets/icon/coin.png', import.meta.url).href
|
||||
}
|
||||
if (type == 'DOLLARS') {
|
||||
e.target.src = new URL('/src/assets/icon/dollar.png', import.meta.url).href
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化奖励的展示信息
|
||||
const showDetail = (reward) => {
|
||||
let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
|
||||
if (showamount.includes(reward.type)) {
|
||||
return reward.content
|
||||
} else if (reward.type === 'DOLLARS') {
|
||||
return `$${reward.content}`
|
||||
} else {
|
||||
return `${reward.quantity}Days`
|
||||
}
|
||||
}
|
||||
|
||||
// 复制到剪贴板(原生方法)
|
||||
const copyCode = (text) => {
|
||||
if (isSupported.value) {
|
||||
@ -595,14 +634,17 @@ const apiGetMyInviteUsers = async () => {
|
||||
const resUserList = await getMyInviteUsers()
|
||||
if (resUserList.status && resUserList.body) {
|
||||
myInviteUsers.value = resUserList.body
|
||||
// myInviteUsers.value = Array(2).fill(resUserList.body).flat()
|
||||
// myInviteUsers.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 邀请用户奖励池
|
||||
const apiGetInviteAwardPool = async () => {
|
||||
const resAwardPool = await getInviteAwardPool()
|
||||
// 绑定用户奖励
|
||||
const getBindingUserRewards = async () => {
|
||||
let data = ['1983474358707736577']
|
||||
const resAwardPool = await apiGetBindingUserRewards(data)
|
||||
if (resAwardPool.status && resAwardPool.body) {
|
||||
inviteAwardPool.value = resAwardPool.body
|
||||
bindingUserRewards.value = resAwardPool.body['1983474358707736577']
|
||||
}
|
||||
}
|
||||
|
||||
@ -610,11 +652,10 @@ const apiGetInviteAwardPool = async () => {
|
||||
const receiveAward = async (awardId) => {
|
||||
try {
|
||||
await getInviteReceiveAward(awardId)
|
||||
// apiGetInviteAwardPool() // 刷新奖励池
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch receive award:', error)
|
||||
} finally {
|
||||
apiGetInviteAwardPool() // 刷新奖励池
|
||||
getBindingUserRewards() // 绑定用户奖励
|
||||
}
|
||||
}
|
||||
|
||||
@ -623,31 +664,40 @@ const preloadCriticalImages = () => {
|
||||
const criticalImages = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('enterCode'),
|
||||
imageUrl('privateChat'),
|
||||
imageUrl('listBtActive'),
|
||||
imageUrl('rewardBt'),
|
||||
imageUrl('listBt'),
|
||||
imageUrl('rewardBtActive'),
|
||||
imageUrl('totalIncome'),
|
||||
imageUrl('todayIncome'),
|
||||
imageUrl('enterCodeBg'),
|
||||
imageUrl('example'),
|
||||
imageUrl('helpInfo'),
|
||||
imageUrl('confirm'),
|
||||
imageUrl('rewardItemBg'),
|
||||
imageUrl('receiveBtActive'),
|
||||
imageUrl('receiveBt'),
|
||||
imageUrl('reward5people'),
|
||||
imageUrl('reward10people'),
|
||||
imageUrl('reward15people'),
|
||||
imageUrl('incomeBg'),
|
||||
imageUrl('listBg'),
|
||||
imageUrl('listBt'),
|
||||
imageUrl('listBtActive'),
|
||||
imageUrl('myCode'),
|
||||
imageUrl('privateChat'),
|
||||
imageUrl('processBt'),
|
||||
imageUrl('processBtActive'),
|
||||
]
|
||||
|
||||
// 动态添加奖励图片
|
||||
if (inviteAwardPool.value && Array.isArray(inviteAwardPool.value)) {
|
||||
inviteAwardPool.value.forEach((poolItem) => {
|
||||
criticalImages.push(imageUrl(`reward${poolItem.quantity}people`))
|
||||
})
|
||||
}
|
||||
const criticalImages_ar = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('enterCode_ar'),
|
||||
imageUrl('enterCodeBg_ar'),
|
||||
imageUrl('example_ar'),
|
||||
imageUrl('helpInfo_ar'),
|
||||
imageUrl('incomeBg_ar'),
|
||||
imageUrl('listBg_ar'),
|
||||
imageUrl('listBt_ar'),
|
||||
imageUrl('listBtActive_ar'),
|
||||
imageUrl('myCode_ar'),
|
||||
imageUrl('privateChat_ar'),
|
||||
imageUrl('processBt_ar'),
|
||||
imageUrl('processBtActive_ar'),
|
||||
]
|
||||
|
||||
preloadImages(criticalImages)
|
||||
if (currentLangType.value == 'en') {
|
||||
preloadImages(criticalImages)
|
||||
} else if (currentLangType.value == 'ar') {
|
||||
preloadImages(criticalImages_ar)
|
||||
}
|
||||
}
|
||||
|
||||
// 页面初始化数据
|
||||
@ -656,7 +706,7 @@ const initData = () => {
|
||||
apiGetMyInviter() // 获取我的邀请人信息
|
||||
apiGetMyInviteIncome() // 获取收益统计
|
||||
apiGetMyInviteUsers() // 有效邀请用户列表
|
||||
apiGetInviteAwardPool() // 邀请用户奖励池
|
||||
getBindingUserRewards() // 绑定用户奖励
|
||||
}
|
||||
|
||||
// 使用工具函数连接APP
|
||||
@ -689,6 +739,14 @@ onMounted(() => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
@ -697,7 +755,7 @@ onMounted(() => {
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -712,4 +770,33 @@ onMounted(() => {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
.leftBt {
|
||||
position: absolute;
|
||||
top: 75vw;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.bindingUserCode {
|
||||
width: 100%;
|
||||
padding-left: 3.5vw;
|
||||
padding-right: 5vw;
|
||||
height: 8vw;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
[dir='rtl'] .leftBt {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
[dir='rtl'] .bindingUserCode {
|
||||
padding-left: 5vw;
|
||||
padding-right: 3.5vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user