chore: oss的png转webp格式

This commit is contained in:
hzj 2026-05-18 16:59:18 +08:00
parent 4cf55cc406
commit 61a3541ad0
3 changed files with 182 additions and 182 deletions

View File

@ -13,7 +13,7 @@
<!-- 页面背景 -->
<BackgroundLayer
:useCanvas="true"
:backgroundImages="[imageUrl('bg0'), imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]"
:backgroundImages="[webpUrl('bg0'), webpUrl('bg1'), webpUrl('bg2'), webpUrl('bg3')]"
/>
<!-- 页面内容 -->
@ -26,25 +26,25 @@
<!-- 倒计时 -->
<div class="timeBox">
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Days }}D</div>
</itemCenter>
</div>
<div class="timeText timeGap"></div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Hours }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Minutes }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Seconds }}</div>
</itemCenter>
</div>
@ -53,7 +53,7 @@
<!-- 规则按钮 -->
<img
v-smart-img
:src="imageUrl(getImgName('rulesBt'))"
:src="webpUrl(getImgName('rulesBt'))"
alt=""
style="display: block; width: 25vw"
@click="openPopup('rule')"
@ -70,14 +70,14 @@
<img
v-show="RankingShow"
v-smart-img
:src="imageUrl(getImgName('rankBtActive'))"
:src="webpUrl(getImgName('rankBtActive'))"
alt=""
style="width: 100%; display: block"
/>
<img
v-show="!RankingShow"
v-smart-img
:src="imageUrl(getImgName('rankBt'))"
:src="webpUrl(getImgName('rankBt'))"
alt=""
style="width: 100%; display: block"
/>
@ -88,14 +88,14 @@
<img
v-show="!RankingShow"
v-smart-img
:src="imageUrl(getImgName('lotteryBtActive'))"
:src="webpUrl(getImgName('lotteryBtActive'))"
alt=""
style="width: 100%; display: block"
/>
<img
v-show="RankingShow"
v-smart-img
:src="imageUrl(getImgName('lotteryBt'))"
:src="webpUrl(getImgName('lotteryBt'))"
alt=""
style="width: 100%; display: block"
/>
@ -103,7 +103,7 @@
</div>
<!-- 标签页切换按钮 -->
<itemCenter :imgUrl="imageUrl('tagsBg')" style="padding: 0 3vw">
<itemCenter :imgUrl="webpUrl('tagsBg')" style="padding: 0 3vw">
<div
style="
width: 100%;
@ -198,17 +198,17 @@
style="position: absolute; inset: 0 10vw; display: flex; align-items: center"
:style="underlineStyle"
>
<img v-smart-img :src="imageUrl('tagBtBg')" alt="" style="width: 50%" />
<img v-smart-img :src="webpUrl('tagBtBg')" alt="" style="width: 50%" />
</div>
</itemCenter>
<!-- Rewards模块 -->
<div v-show="reward" style="display: flex; flex-direction: column; align-items: center">
<!-- 我的充值记录 -->
<itemCenter :imgUrl="imageUrl('myInfoBg')" contentStyle="padding: 18vw 10vw 7vw;gap:2vw;">
<itemCenter :imgUrl="webpUrl('myInfoBg')" contentStyle="padding: 18vw 10vw 7vw;gap:2vw;">
<!-- 头像 -->
<itemCenter
:imgUrl="imageUrl('myAvatarFrame')"
:imgUrl="webpUrl('myAvatarFrame')"
contentStyle=""
style="width: 20vw; position: relative; z-index: 2"
>
@ -267,7 +267,7 @@
<img
v-show="rechargehidden"
v-smart-img
:src="imageUrl('rechargehidden')"
:src="webpUrl('rechargehidden')"
alt=""
style="width: 5vw; display: block; object-fit: cover"
@click="rechargehidden = !rechargehidden"
@ -275,7 +275,7 @@
<img
v-show="!rechargehidden"
v-smart-img
:src="imageUrl('rechargeShow')"
:src="webpUrl('rechargeShow')"
alt=""
style="width: 5vw; display: block; object-fit: cover"
@click="rechargehidden = !rechargehidden"
@ -365,20 +365,20 @@
>
<img
v-if="rewardsTop.claimStatus == -1"
:src="imageUrl(getImgName('rewardReceiveNot'))"
:src="webpUrl(getImgName('rewardReceiveNot'))"
alt=""
style="width: 55vw; display: block; object-fit: cover"
/>
<img
v-if="rewardsTop.claimStatus == 0"
:src="imageUrl(getImgName('rewardReceive'))"
:src="webpUrl(getImgName('rewardReceive'))"
alt=""
style="width: 55vw; display: block; object-fit: cover"
@click="receiveReward(rewardsTop)"
/>
<img
v-if="rewardsTop.claimStatus == 1"
:src="imageUrl(getImgName('rewardReceived'))"
:src="webpUrl(getImgName('rewardReceived'))"
alt=""
style="width: 55vw; display: block; object-fit: cover"
/>
@ -395,7 +395,7 @@
<div style="display: flex; justify-content: center">
<TopUser
ranking="1"
:BorderImgUrl="imageUrl('top1')"
:BorderImgUrl="webpUrl('top1')"
:avatarUrl="RankingHasTop3[0].userAvatar"
:name="RankingHasTop3[0].userName"
:distributionValue="RankingHasTop3[0].amount"
@ -421,7 +421,7 @@
>
<TopUser
ranking="2"
:BorderImgUrl="imageUrl('top2')"
:BorderImgUrl="webpUrl('top2')"
:avatarUrl="RankingHasTop3[1].userAvatar"
:name="RankingHasTop3[1].userName"
:distributionValue="RankingHasTop3[1].amount"
@ -435,7 +435,7 @@
>
<TopUser
ranking="3"
:BorderImgUrl="imageUrl('top3')"
:BorderImgUrl="webpUrl('top3')"
:avatarUrl="RankingHasTop3[2].userAvatar"
:name="RankingHasTop3[2].userName"
:distributionValue="RankingHasTop3[2].amount"
@ -450,7 +450,7 @@
<itemCenter
v-for="(listItem, index) in showRanking"
:key="listItem.userId"
:imgUrl="imageUrl('RankingItem')"
:imgUrl="webpUrl('RankingItem')"
:contentStyle="`padding: 0 9%`"
:lazy="true"
:immediate="index < 2"
@ -536,13 +536,13 @@
style="margin-top: -12vw; width: 100vw; display: flex; flex-direction: column; gap: 3vw"
>
<itemCenter
:imgUrl="imageUrl('lottery')"
:imgUrl="webpUrl('lottery')"
:contentStyle="`flex-direction: column;justify-content: flex-start;gap: 5vw`"
>
<!-- 中奖历史按钮 -->
<img
v-smart-img
:src="imageUrl(getImgName('historyBt'))"
:src="webpUrl(getImgName('historyBt'))"
alt=""
style="width: 15vw; position: absolute; top: 18vw; right: 4vw"
@click="openPopup('history')"
@ -589,7 +589,7 @@
<img
v-show="activeIndex === index"
v-smart-img
:src="imageUrl('prizeActiveFrame')"
:src="webpUrl('prizeActiveFrame')"
alt=""
style="
display: block;
@ -697,7 +697,7 @@
<img
v-if="RechargeBadgeInfo.claimStatus == -1"
v-smart-img
:src="imageUrl('taskBtGo')"
:src="webpUrl('taskBtGo')"
width="100%"
style="display: block"
/>
@ -705,7 +705,7 @@
<!-- 未领取 -->
<img
v-if="RechargeBadgeInfo.claimStatus == 0"
:src="imageUrl('taskBtReceive')"
:src="webpUrl('taskBtReceive')"
:alt="t('receive')"
width="100%"
style="display: block"
@ -715,7 +715,7 @@
<!-- 已领取 -->
<img
v-if="RechargeBadgeInfo.claimStatus == 1"
:src="imageUrl('taskBtReceived')"
:src="webpUrl('taskBtReceived')"
:alt="t('done')"
width="100%"
style="display: block"
@ -814,7 +814,7 @@
<img
v-if="task.taskType == 1"
v-smart-img
:src="imageUrl('taskTalk')"
:src="webpUrl('taskTalk')"
alt=""
width="100%"
style="display: block"
@ -822,7 +822,7 @@
<img
v-if="task.taskType == 2"
v-smart-img
:src="imageUrl('taskGift')"
:src="webpUrl('taskGift')"
alt=""
width="100%"
style="display: block"
@ -830,7 +830,7 @@
<img
v-if="task.taskType == 4"
v-smart-img
:src="imageUrl('taskGame')"
:src="webpUrl('taskGame')"
alt=""
width="100%"
style="display: block"
@ -838,7 +838,7 @@
<img
v-if="task.taskType == 5"
v-smart-img
:src="imageUrl('taskRecharge')"
:src="webpUrl('taskRecharge')"
alt=""
width="100%"
style="display: block"
@ -857,7 +857,7 @@
<div style="color: #fff; font-weight: 590">{{ t('Rewards:') }}</div>
<img
v-smart-img
:src="imageUrl('ticket')"
:src="webpUrl('ticket')"
:alt="t('ticket')"
width="15%"
style="display: block"
@ -872,7 +872,7 @@
<img
v-if="task.taskStatus == 0"
v-smart-img
:src="imageUrl('taskBtGo')"
:src="webpUrl('taskBtGo')"
width="100%"
style="display: block"
/>
@ -881,7 +881,7 @@
<img
v-else-if="task.taskStatus === 1"
v-smart-img
:src="imageUrl('taskBtReceive')"
:src="webpUrl('taskBtReceive')"
:alt="t('receive')"
width="100%"
style="display: block"
@ -892,7 +892,7 @@
<img
v-else
v-smart-img
:src="imageUrl('taskBtReceived')"
:src="webpUrl('taskBtReceived')"
:alt="t('done')"
width="100%"
style="display: block"
@ -1384,7 +1384,7 @@
<itemCenter
v-show="rankShow"
style="position: fixed; bottom: 0; z-index: 2"
:imgUrl="imageUrl('myRankingBg')"
:imgUrl="webpUrl('myRankingBg')"
:contentStyle="`padding: 2vw 8vw 0`"
>
<!-- 基本信息 -->
@ -1465,7 +1465,7 @@
<!-- 抽奖结果 -->
<div v-if="resultShow" style="position: relative; width: 90%" @click.stop>
<itemCenter
:imgUrl="imageUrl('rewardBg')"
:imgUrl="webpUrl('rewardBg')"
:contentStyle="`inset: 31vw 10vw 4vw;
flex-direction: column;
justify-content: space-between;
@ -1493,7 +1493,7 @@
<img
v-smart-img
v-show="result.length > 1 && resultShowIndex > 0"
:src="imageUrl('rewardBack')"
:src="webpUrl('rewardBack')"
alt=""
style="display: block; width: 100%; object-fit: cover"
@click="resultShowIndex--"
@ -1520,7 +1520,7 @@
<img
v-smart-img
v-show="result.length > 1 && resultShowIndex + 1 < result.length"
:src="imageUrl('rewardNext')"
:src="webpUrl('rewardNext')"
alt=""
style="display: block; width: 100%; object-fit: cover"
@click="resultShowIndex++"
@ -1574,7 +1574,7 @@
<!-- 中奖历史 -->
<div v-if="historyShow" style="position: relative; width: 95%" @click.stop>
<itemCenter :imgUrl="imageUrl('historyBg')" :contentStyle="`padding: 22vw 4vw 4vw;`">
<itemCenter :imgUrl="webpUrl('historyBg')" :contentStyle="`padding: 22vw 4vw 4vw;`">
<div
style="
width: 100%;
@ -1626,14 +1626,14 @@
<!-- 帮助弹窗 -->
<div v-if="helpShow" style="position: relative; width: 90%" @click.stop>
<itemCenter :imgUrl="imageUrl(getImgName('helpInfo'))" :contentStyle="``">
<itemCenter :imgUrl="webpUrl(getImgName('helpInfo'))" :contentStyle="``">
<div class="close-btn" @click="closedPopup"></div>
</itemCenter>
</div>
<!-- 规则弹窗 -->
<div v-if="ruleShow" style="position: relative; width: 90%" @click.stop>
<itemCenter :imgUrl="imageUrl(getImgName('ruleInfo'))" :contentStyle="``">
<itemCenter :imgUrl="webpUrl(getImgName('ruleInfo'))" :contentStyle="``">
<div class="close-btn" @click="closedPopup"></div>
</itemCenter>
</div>
@ -1701,8 +1701,8 @@ const currentLangType = computed(() => {
const isLoading = ref(true) //
// OSSURL
const imageUrl = (filename) => getPngUrl('Activities/LuckyDollars/Season5/', filename)
const webpUrl = (filename) => getWebpUrl('Activities/LuckyDollars/Season5/', filename)
// const imageUrl = (filename) => getPngUrl('Activities/LuckyDollars/Season5/', filename)
const webpUrl = (filename) => getWebpUrl('Activities/LuckyDollars/Season5New/', filename)
//
const getImgName = (filename) => {
@ -1778,12 +1778,12 @@ const rankingTotal = computed(() => {
})
const myRanking = ref({}) //
const topImg = ref([
imageUrl('RewardRecharge100'),
imageUrl('RewardRecharge500'),
imageUrl('RewardRecharge1000'),
imageUrl('RewardRecharge3000'),
imageUrl('RewardRecharge5000'),
imageUrl('RewardRecharge10000'),
webpUrl('RewardRecharge100'),
webpUrl('RewardRecharge500'),
webpUrl('RewardRecharge1000'),
webpUrl('RewardRecharge3000'),
webpUrl('RewardRecharge5000'),
webpUrl('RewardRecharge10000'),
]) // top
// 3
@ -2367,7 +2367,7 @@ const getActivityReward = async () => {
addReward = [
// {
// type: 'TICKET',
// cover: imageUrl('ticket'),
// cover: webpUrl('ticket'),
// content: 10,
// },
]
@ -2375,7 +2375,7 @@ const getActivityReward = async () => {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
cover: webpUrl('ticket'),
content: 15,
},
]
@ -2383,7 +2383,7 @@ const getActivityReward = async () => {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
cover: webpUrl('ticket'),
content: 20,
},
]
@ -2391,12 +2391,12 @@ const getActivityReward = async () => {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
cover: webpUrl('ticket'),
content: 30,
},
{
type: 'GIFT',
cover: imageUrl('reward_gift'),
cover: webpUrl('reward_gift'),
content: 1,
},
]
@ -2404,12 +2404,12 @@ const getActivityReward = async () => {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
cover: webpUrl('ticket'),
content: 40,
},
{
type: 'GIFT',
cover: imageUrl('reward_gift'),
cover: webpUrl('reward_gift'),
content: 1,
},
]
@ -2417,24 +2417,24 @@ const getActivityReward = async () => {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
cover: webpUrl('ticket'),
content: 50,
},
{
type: 'GIFT',
cover: imageUrl('reward_gift'),
cover: webpUrl('reward_gift'),
content: 1,
},
{
type: 'PROPS',
detailType: 'AVATAR_FRAME',
cover: imageUrl('reward_frame'),
cover: webpUrl('reward_frame'),
quantity: 365,
},
{
type: 'PROPS',
detailType: 'RIDE',
cover: imageUrl('reward_ride'),
cover: webpUrl('reward_ride'),
quantity: 60,
},
]
@ -2615,31 +2615,31 @@ const initData = async () => {
const preloadCriticalImages = async () => {
const criticalImages = [
// webpUrl('pageTop'),
imageUrl('bg0'),
imageUrl('bg1'),
imageUrl('bg2'),
imageUrl('bg3'),
imageUrl('myAvatarFrame'),
imageUrl('myInfoBg'),
imageUrl(getImgName('rankBt')),
imageUrl(getImgName('rankBtActive')),
imageUrl('rechargehidden'),
imageUrl('rechargeShow'),
imageUrl('rewardBg'),
imageUrl('rewardBack'),
imageUrl('rewardNext'),
imageUrl(getImgName('rewardReceive')),
imageUrl(getImgName('rewardReceived')),
imageUrl(getImgName('rewardReceiveNot')),
imageUrl('RewardRecharge100'),
imageUrl('RewardRecharge500'),
imageUrl('RewardRecharge1000'),
imageUrl('RewardRecharge3000'),
imageUrl('RewardRecharge5000'),
imageUrl('RewardRecharge10000'),
imageUrl('tagBtBg'),
imageUrl('tagsBg'),
imageUrl('timeBg'),
webpUrl('bg0'),
webpUrl('bg1'),
webpUrl('bg2'),
webpUrl('bg3'),
webpUrl('myAvatarFrame'),
webpUrl('myInfoBg'),
webpUrl(getImgName('rankBt')),
webpUrl(getImgName('rankBtActive')),
webpUrl('rechargehidden'),
webpUrl('rechargeShow'),
webpUrl('rewardBg'),
webpUrl('rewardBack'),
webpUrl('rewardNext'),
webpUrl(getImgName('rewardReceive')),
webpUrl(getImgName('rewardReceived')),
webpUrl(getImgName('rewardReceiveNot')),
webpUrl('RewardRecharge100'),
webpUrl('RewardRecharge500'),
webpUrl('RewardRecharge1000'),
webpUrl('RewardRecharge3000'),
webpUrl('RewardRecharge5000'),
webpUrl('RewardRecharge10000'),
webpUrl('tagBtBg'),
webpUrl('tagsBg'),
webpUrl('timeBg'),
]
await preloadImages(criticalImages)
@ -2671,30 +2671,30 @@ const registerRankingLoadObserver = async () => {
//
const preloadOtherImages = async () => {
const criticalImages = [
imageUrl(getImgName('helpInfo')),
imageUrl(getImgName('historyBg')),
imageUrl(getImgName('historyBt')),
imageUrl('lottery'),
imageUrl(getImgName('lotteryBt')),
imageUrl(getImgName('lotteryBtActive')),
imageUrl('myRankingBg'),
imageUrl('RankingItem'),
imageUrl(getImgName('rulesBt')),
imageUrl(getImgName('ruleInfo')),
imageUrl('taskBtGo'),
imageUrl('taskBtReceive'),
imageUrl('taskBtReceived'),
imageUrl('taskGame'),
imageUrl('taskGift'),
imageUrl('taskRecharge'),
imageUrl('taskTalk'),
imageUrl('ticket'),
imageUrl('top1'),
imageUrl('top2'),
imageUrl('top3'),
imageUrl('reward_gift'),
imageUrl('reward_frame'),
imageUrl('reward_ride'),
webpUrl(getImgName('helpInfo')),
webpUrl(getImgName('historyBg')),
webpUrl(getImgName('historyBt')),
webpUrl('lottery'),
webpUrl(getImgName('lotteryBt')),
webpUrl(getImgName('lotteryBtActive')),
webpUrl('myRankingBg'),
webpUrl('RankingItem'),
webpUrl(getImgName('rulesBt')),
webpUrl(getImgName('ruleInfo')),
webpUrl('taskBtGo'),
webpUrl('taskBtReceive'),
webpUrl('taskBtReceived'),
webpUrl('taskGame'),
webpUrl('taskGift'),
webpUrl('taskRecharge'),
webpUrl('taskTalk'),
webpUrl('ticket'),
webpUrl('top1'),
webpUrl('top2'),
webpUrl('top3'),
webpUrl('reward_gift'),
webpUrl('reward_frame'),
webpUrl('reward_ride'),
]
await preloadImagesIdle(criticalImages)

View File

@ -9,11 +9,11 @@
<!-- 主要内容 -->
<div v-else>
<!-- Rewards0.png 使用相对定位容器 -->
<itemCenter :imgUrl="imageUrl('goodID0New')" :contentStyle="`display: block;`">
<itemCenter :imgUrl="webpUrl('goodID0New')" :contentStyle="`display: block;`">
<!-- 帮助按钮 -->
<img
v-smart-img
:src="imageUrl('help')"
:src="webpUrl('help')"
alt=""
style="
position: absolute;
@ -30,7 +30,7 @@
<!-- 用户财富等级靓号申请窗口 -->
<itemCenter
style="position: absolute; top: 65%"
:imgUrl="imageUrl('applyBg')"
:imgUrl="webpUrl('applyBg')"
:contentStyle="`display: block;`"
>
<!-- 财富等级 -->
@ -102,7 +102,7 @@
<!-- 按钮 -->
<img
v-smart-img
:src="imageUrl(getImgName('applyBt'))"
:src="webpUrl(getImgName('applyBt'))"
alt=""
style="height: 70%; display: block"
@click="confirm"
@ -112,8 +112,8 @@
</itemCenter>
<!-- 其他图片直接引入 -->
<img v-smart-img :src="imageUrl('goodID1')" alt="" style="width: 100%; display: block" />
<img v-smart-img :src="imageUrl('goodID2')" alt="" style="width: 100%; display: block" />
<img v-smart-img :src="webpUrl('goodID1')" alt="" style="width: 100%; display: block" />
<img v-smart-img :src="webpUrl('goodID2')" alt="" style="width: 100%; display: block" />
<!-- 弹窗遮罩层 -->
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
@ -121,7 +121,7 @@
<div style="margin: 20% 0" @click.stop>
<img
v-smart-img
:src="imageUrl(getImgName('rule'))"
:src="webpUrl(getImgName('rule'))"
alt=""
style="display: block; width: 100%"
/>
@ -152,7 +152,7 @@
import { ref, onMounted, computed } from 'vue'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { connectToApp } from '@/utils/appConnector.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { getUserId } from '@/utils/userStore.js'
@ -177,7 +177,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true)
// OSSURL
const imageUrl = (filename) => getPngUrl('GoodID/', filename)
const webpUrl = (filename) => getWebpUrl('GoodIDWebp/', filename)
//
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
@ -250,13 +250,13 @@ const initData = () => {
//
const preloadCriticalImages = () => {
const criticalImages = [
imageUrl('goodID0New'),
imageUrl('goodID1'),
imageUrl('goodID2'),
imageUrl('help'),
imageUrl('rule'),
imageUrl('applyBg'),
imageUrl(getImgName('applyBt')),
webpUrl('goodID0New'),
webpUrl('goodID1'),
webpUrl('goodID2'),
webpUrl('help'),
webpUrl('rule'),
webpUrl('applyBg'),
webpUrl(getImgName('applyBt')),
]
return preloadImages(criticalImages)

View File

@ -9,7 +9,7 @@
<!-- 主要内容 -->
<div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg1New'), imageUrl('bg2'), imageUrl('bg3')]" />
<BackgroundLayer :backgroundImages="[webpUrl('bg1New'), webpUrl('bg2'), webpUrl('bg3')]" />
<!-- 头部导航组件 -->
<div style="position: absolute; top: 0; left: 0; width: 100%">
@ -28,7 +28,7 @@
<itemCenter
v-if="leftBtType === 'enterCode'"
style="width: 40%; min-height: 15.63vw"
:imgUrl="imageUrl('BtBg')"
:imgUrl="webpUrl('BtBg')"
:contentStyle="`direction: ltr;justify-content: center;inset: 1vw 6vw 0 0.5vw;`"
@click="enterCodeShow = true"
>
@ -36,7 +36,7 @@
</itemCenter>
<!-- <itemCenter
style="width: 40%; min-height: 15.63vw"
:imgUrl="imageUrl('BtBg')"
:imgUrl="webpUrl('BtBg')"
:contentStyle="`direction: ltr;justify-content: center;inset: 1vw 6vw 0 0.5vw;`"
@click="enterCodeShow = true"
>
@ -47,7 +47,7 @@
<itemCenter
v-else-if="leftBtType === 'privateChat'"
style="width: 40%; min-height: 15.63vw"
:imgUrl="imageUrl('BtBg')"
:imgUrl="webpUrl('BtBg')"
:contentStyle="`direction: ltr;justify-content: center;inset: 1vw 6vw 0 0.5vw;`"
@click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
>
@ -57,7 +57,7 @@
</itemCenter>
<!-- <itemCenter
style="width: 40%; min-height: 15.63vw"
:imgUrl="imageUrl('BtBg')"
:imgUrl="webpUrl('BtBg')"
:contentStyle="`direction: ltr;justify-content: center;inset: 1vw 6vw 0 0.5vw;`"
@click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
>
@ -80,7 +80,7 @@
<!-- 我的邀请码 -->
<itemCenter
style="min-height: 141vw"
:imgUrl="imageUrl(getImgName('myCode'))"
:imgUrl="webpUrl(getImgName('myCode'))"
:contentStyle="`padding: 111vw 10vw 17vw;flex-direction: column;justify-content: flex-start;gap: 0vw;`"
>
<!-- 邀请码 -->
@ -101,7 +101,7 @@
<img
v-if="myInviteInfo.inviteCode"
v-smart-img
:src="imageUrl('copy')"
:src="webpUrl('copy')"
alt=""
style="display: block; width: 1.5em; object-fit: cover"
@click="copyCode(myInviteInfo.inviteCode || '')"
@ -138,7 +138,7 @@
<div style="width: 40%; position: relative; min-height: max-content">
<img
v-smart-img.noFade
:src="imageUrl(getImgName('incomeBtActive'))"
:src="webpUrl(getImgName('incomeBtActive'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: showModule === 'income' ? 1 : 0 }"
@ -146,7 +146,7 @@
/>
<img
v-smart-img.noFade
:src="imageUrl(getImgName('incomeBt'))"
:src="webpUrl(getImgName('incomeBt'))"
alt=""
style="display: block; width: 100%; position: absolute; bottom: 0; left: 0"
:style="{ opacity: showModule === 'income' ? 0 : 1 }"
@ -158,7 +158,7 @@
<div style="width: 40%; position: relative">
<img
v-smart-img.noFade
:src="imageUrl(getImgName('earningsRankingBtActive'))"
:src="webpUrl(getImgName('earningsRankingBtActive'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: showModule === 'ranking' ? 1 : 0 }"
@ -166,7 +166,7 @@
/>
<img
v-smart-img.noFade
:src="imageUrl(getImgName('earningsRankingBt'))"
:src="webpUrl(getImgName('earningsRankingBt'))"
alt=""
style="display: block; width: 100%; position: absolute; bottom: 0; left: 0"
:style="{ opacity: showModule === 'ranking' ? 0 : 1 }"
@ -183,7 +183,7 @@
<!-- 收入展示 -->
<itemCenter
style="min-height: 100vw"
:imgUrl="imageUrl(getImgName('incomeBg'))"
:imgUrl="webpUrl(getImgName('incomeBg'))"
:contentStyle="`padding: 44vw 8vw 18vw 7vw;display:grid;grid-template-columns: repeat(2, 1fr);gap: 4vw;`"
>
<!-- 更多按钮 -->
@ -285,7 +285,7 @@
<!-- 流程展示 -->
<img
v-smart-img
:src="imageUrl(getImgName('example'))"
:src="webpUrl(getImgName('example'))"
alt=""
style="position: relative; z-index: 2; display: block; width: 100%; object-fit: cover"
/>
@ -308,7 +308,7 @@
<div style="width: 35vw; min-width: 0" @click="changeTag('rankAll')">
<img
v-smart-img
:src="imageUrl(getImgName('listBt'))"
:src="webpUrl(getImgName('listBt'))"
alt=""
:class="{
'grayscale-container': !rankAllShow,
@ -321,7 +321,7 @@
<div style="width: 35vw; min-width: 0" @click="changeTag('rankWeek')">
<img
v-smart-img
:src="imageUrl(getImgName('rankBt'))"
:src="webpUrl(getImgName('rankBt'))"
alt=""
:class="{
'grayscale-container': !rankWeekShow,
@ -335,7 +335,7 @@
<div v-show="rankAllShow">
<itemCenter
style="min-height: 205.33vw"
:imgUrl="imageUrl('rankingBg')"
:imgUrl="webpUrl('rankingBg')"
:contentStyle="`padding: 10vw 6vw 10vw;flex-direction: column;justify-content: flex-start;gap:2vw`"
>
<!-- 列表 -->
@ -359,7 +359,7 @@
style="min-height: 22.33vw"
v-for="(listItem, index) in rankingTotal"
:key="listItem.userId"
:imgUrl="imageUrl('rankItemBg')"
:imgUrl="webpUrl('rankItemBg')"
:contentStyle="`padding: 0 5vw`"
:lazy="true"
:immediate="index < 10"
@ -462,7 +462,7 @@
<div v-show="rankWeekShow">
<itemCenter
style="min-height: 205.33vw"
:imgUrl="imageUrl('rankingBg')"
:imgUrl="webpUrl('rankingBg')"
:contentStyle="`padding: 13vw 6vw 10vw;flex-direction: column;justify-content: flex-start;gap:2vw`"
>
<!-- 头部 -->
@ -470,7 +470,7 @@
<!-- 倒计时 -->
<itemCenter
style="width: 70%; min-width: 0; min-height: 9.87vw"
:imgUrl="imageUrl('timeBg')"
:imgUrl="webpUrl('timeBg')"
:contentStyle="``"
>
<div class="timeBox">
@ -487,7 +487,7 @@
<!-- 奖励按钮 -->
<img
v-smart-img
:src="imageUrl(getImgName('rewardBt'))"
:src="webpUrl(getImgName('rewardBt'))"
alt=""
style="flex: 1; min-width: 0; display: block; object-fit: cover"
@click="rewardShow = true"
@ -515,7 +515,7 @@
style="min-height: 22.33vw"
v-for="(listItem, index) in rankingTotal"
:key="listItem.userId"
:imgUrl="imageUrl('rankItemBg')"
:imgUrl="webpUrl('rankItemBg')"
:contentStyle="`padding: 0 5vw`"
:lazy="true"
:immediate="index < 10"
@ -639,7 +639,7 @@
<img
v-show="showModule == 'income'"
v-smart-img
:src="imageUrl(getImgName('inviteFriendsBt'))"
:src="webpUrl(getImgName('inviteFriendsBt'))"
alt=""
style="display: block; width: 90%; object-fit: cover; pointer-events: none"
/>
@ -649,7 +649,7 @@
<itemCenter
v-show="showModule == 'ranking' && rankWeekShow"
style="min-height: 25.33vw; position: fixed; bottom: 0; z-index: 3"
:imgUrl="imageUrl('rankItemBg')"
:imgUrl="webpUrl('rankItemBg')"
:contentStyle="`padding: 0 7vw`"
>
<!-- 基本信息 -->
@ -729,7 +729,7 @@
<div v-show="helpInfoShow" style="margin: 20% 0; position: relative" @click.stop>
<img
v-smart-img
:src="imageUrl(getImgName('helpInfo'))"
:src="webpUrl(getImgName('helpInfo'))"
alt=""
width="100%"
style="display: block"
@ -752,7 +752,7 @@
>
<itemCenter
style="width: 100vw; min-height: 240.66vw"
:imgUrl="imageUrl(getImgName('enterCodeBg'))"
:imgUrl="webpUrl(getImgName('enterCodeBg'))"
:contentStyle="`padding: 31.5vw 6vw 10vw;display: flex;flex-direction: column;justify-content: flex-start;`"
@click.stop
>
@ -780,7 +780,7 @@
<!-- 按钮 -->
<img
:src="imageUrl(getImgName('confirmBt'))"
:src="webpUrl(getImgName('confirmBt'))"
alt=""
style="display: block; width: 16vw; object-fit: contain"
@click="confirm"
@ -927,7 +927,7 @@
<!-- 收益&列表 -->
<itemCenter
style="min-height: 163.33vw"
:imgUrl="imageUrl(getImgName('incomeListBg'))"
:imgUrl="webpUrl(getImgName('incomeListBg'))"
:contentStyle="`padding: 37vw 6.5vw 10vw 5.5vw;flex-direction: column;gap: 4vw;justify-content: flex-start;`"
@click.stop
>
@ -1194,7 +1194,7 @@
<!-- 收益&列表 -->
<itemCenter
style="min-height: 286.13vw"
:imgUrl="imageUrl(getImgName('weekRewardBg'))"
:imgUrl="webpUrl(getImgName('weekRewardBg'))"
:contentStyle="`padding: 57vw 15vw 20vw 15vw;flex-direction: column;gap: 40vw;justify-content: flex-start;`"
@click.stop
>
@ -1271,7 +1271,7 @@ import { viewUserInfo, gotoPrivateChat, openAppComponent } from '@/utils/appBrid
import { showError, showWarning, showSuccess } from '@/utils/toast.js'
import { useClipboard } from '@vueuse/core'
import { connectToApp } from '@/utils/appConnector.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
@ -1310,7 +1310,7 @@ const getImgName = (filename) => {
}
// OSSURL
const imageUrl = (filename) => getPngUrl('invitation/inviteNewUser/', filename)
const webpUrl = (filename) => getWebpUrl('invitation/inviteNewUserWebp/', filename)
const { copy, isSupported } = useClipboard()
@ -1649,31 +1649,31 @@ const getRechargeRewards = async () => {
//
const preloadCriticalImages = async () => {
const criticalImages = [
imageUrl('bg1New'),
imageUrl('bg2'),
imageUrl('bg3'),
imageUrl('BtBg'),
imageUrl(getImgName('myCode')),
imageUrl('copy'),
imageUrl(getImgName('incomeBtActive')),
imageUrl(getImgName('incomeBt')),
imageUrl(getImgName('earningsRankingBtActive')),
imageUrl(getImgName('earningsRankingBt')),
imageUrl(getImgName('incomeBg')),
imageUrl(getImgName('example')),
imageUrl(getImgName('listBt')),
imageUrl(getImgName('rankBt')),
imageUrl(getImgName('rewardBt')),
imageUrl('rankingBg'),
imageUrl('timeBg'),
imageUrl('rankItemBg'),
webpUrl('bg1New'),
webpUrl('bg2'),
webpUrl('bg3'),
webpUrl('BtBg'),
webpUrl(getImgName('myCode')),
webpUrl('copy'),
webpUrl(getImgName('incomeBtActive')),
webpUrl(getImgName('incomeBt')),
webpUrl(getImgName('earningsRankingBtActive')),
webpUrl(getImgName('earningsRankingBt')),
webpUrl(getImgName('incomeBg')),
webpUrl(getImgName('example')),
webpUrl(getImgName('listBt')),
webpUrl(getImgName('rankBt')),
webpUrl(getImgName('rewardBt')),
webpUrl('rankingBg'),
webpUrl('timeBg'),
webpUrl('rankItemBg'),
imageUrl(getImgName('inviteFriendsBt')),
imageUrl(getImgName('helpInfo')),
imageUrl(getImgName('enterCodeBg')),
imageUrl(getImgName('confirmBt')),
imageUrl(getImgName('incomeListBg')),
imageUrl(getImgName('weekRewardBg')),
webpUrl(getImgName('inviteFriendsBt')),
webpUrl(getImgName('helpInfo')),
webpUrl(getImgName('enterCodeBg')),
webpUrl(getImgName('confirmBt')),
webpUrl(getImgName('incomeListBg')),
webpUrl(getImgName('weekRewardBg')),
]
await preloadImages(criticalImages)