441 lines
21 KiB
HTML
441 lines
21 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<title data-i18n="wheel.pageTitle">Party Wheel</title>
|
||
<link
|
||
rel="stylesheet"
|
||
href="../../common/theme.css?v=20260618-wheel-batch2"
|
||
/>
|
||
<link rel="stylesheet" href="./style.css?v=20260624-reward-total" />
|
||
</head>
|
||
<body>
|
||
<div id="app" v-cloak>
|
||
<main
|
||
class="wheel-page"
|
||
:class="pageClass"
|
||
data-i18n-aria="wheel.pageLabel"
|
||
aria-label="Yumi Wheel"
|
||
>
|
||
<div v-if="pageLoading" class="wheel-loading">
|
||
{{ common('loading') }}
|
||
</div>
|
||
<section v-else class="wheel-stage">
|
||
<nav class="lucky-tab" aria-label="Wheel type">
|
||
<button
|
||
v-for="tab in tabs"
|
||
v-show="enabled[tab.key]"
|
||
:key="tab.key"
|
||
type="button"
|
||
class="tab-item"
|
||
:class="[tab.key, { active: currentPage === tab.key }]"
|
||
@click="handleSelect(tab.key)"
|
||
>
|
||
{{ t(tab.labelKey) }}
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="marquee-box" v-if="currentConfig.hasMarqueeBox">
|
||
<div class="marquee-content">
|
||
<div
|
||
class="reward"
|
||
:class="{ 'reward-active': currentLanguage === 'ar' }"
|
||
:style="{ animationDuration: durationSpeed }"
|
||
>
|
||
<div
|
||
v-for="(item, index) in marqueeRewards"
|
||
:key="index"
|
||
class="reward-list"
|
||
>
|
||
<img
|
||
:src="item.avatar"
|
||
class="img"
|
||
alt=""
|
||
/>
|
||
<span
|
||
>{{ replaceTwo('userAward',
|
||
item.nickname, item.value) }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="marquee-content" v-else>
|
||
<div
|
||
class="reward"
|
||
:class="{ 'reward-active': currentLanguage === 'ar' }"
|
||
:style="{ animationDuration: durationSpeed }"
|
||
>
|
||
<div
|
||
v-for="(item, index) in marqueeRewards"
|
||
:key="index"
|
||
class="reward-list"
|
||
>
|
||
<img :src="item.avatar" class="img" alt="" />
|
||
<span
|
||
>{{ replaceTwo('userAward', item.nickname,
|
||
item.value) }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lucky-content">
|
||
<div class="content">
|
||
<img
|
||
v-if="currentConfig.lightPrefix"
|
||
:src="asset(currentConfig.lightPrefix + active.currentBackground + '.png')"
|
||
class="right"
|
||
alt=""
|
||
/>
|
||
<div
|
||
class="lottery-grid"
|
||
:class="currentConfig.gridClass"
|
||
>
|
||
<div
|
||
v-if="currentConfig.type === 'round'"
|
||
class="turntable-content"
|
||
>
|
||
<div
|
||
v-for="(item, index) in active.gridItems"
|
||
:key="item.id || index"
|
||
class="grid-item"
|
||
:style="getPrizePosition(index)"
|
||
role="button"
|
||
tabindex="0"
|
||
@click.stop="openPrizePreview(item)"
|
||
@keyup.enter.prevent="openPrizePreview(item)"
|
||
>
|
||
<div class="item">
|
||
<img
|
||
:src="item.merchandise.coverUrl"
|
||
class="img"
|
||
alt=""
|
||
/>
|
||
<div class="item-gold">
|
||
<img
|
||
:src="asset('gold_new.png')"
|
||
alt=""
|
||
/>{{ item.value }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<template v-else>
|
||
<div
|
||
v-for="(item, index) in active.gridItems"
|
||
:key="item.id || index"
|
||
class="grid-item"
|
||
:class="{ active: active.activeIndex === index }"
|
||
role="button"
|
||
tabindex="0"
|
||
@click.stop="openPrizePreview(item)"
|
||
@keyup.enter.prevent="openPrizePreview(item)"
|
||
>
|
||
<img
|
||
v-if="currentPage === 'advanced' && index > 5"
|
||
:src="asset('advanced_gift.webp')"
|
||
class="gift-webp"
|
||
alt=""
|
||
/>
|
||
<img
|
||
:src="item.merchandise.coverUrl"
|
||
class="img"
|
||
alt=""
|
||
/>
|
||
<div class="item-gold">
|
||
<img
|
||
:src="asset('gold_new.png')"
|
||
alt=""
|
||
/>{{ item.value }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div
|
||
v-if="active.isInit && !active.gridItems.length"
|
||
class="wheel-empty"
|
||
>
|
||
{{ common('rewardUnavailable') }}
|
||
</div>
|
||
|
||
<button
|
||
class="start-button"
|
||
type="button"
|
||
:style="pointerStyle()"
|
||
:disabled="!active.gridItems.length || active.drawAmount <= 0 || active.isSpinning"
|
||
@click="startLottery"
|
||
>
|
||
<template v-if="currentPage === 'advanced'">
|
||
<span>{{ common('balance') }}:</span>
|
||
<strong
|
||
><i></i>{{ userBalance }}</strong
|
||
>
|
||
</template>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-start">
|
||
<button
|
||
v-for="(item, index) in active.goldBtn"
|
||
:key="item.value"
|
||
type="button"
|
||
class="btn"
|
||
:class="{ active: active.activeBtnIndex === index }"
|
||
:style="buttonStyle(index)"
|
||
:disabled="!active.gridItems.length || active.drawAmount <= 0"
|
||
@click="handleGoldBtn(index)"
|
||
>
|
||
<span>{{ item.name }}</span>
|
||
<strong
|
||
>{{ item.value * active.drawAmount }}</strong
|
||
>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="desc-content">
|
||
<button
|
||
class="rule"
|
||
type="button"
|
||
:aria-label="common('rule')"
|
||
@click="active.showRecord = true"
|
||
></button>
|
||
<button
|
||
class="record"
|
||
type="button"
|
||
:aria-label="t('historyRecord')"
|
||
@click="active.showRule = true"
|
||
></button>
|
||
</div>
|
||
<div v-if="currentPage !== 'advanced'" class="user-gold">
|
||
<img :src="asset('gold_new.png')" alt="" />{{
|
||
userBalance }}
|
||
</div>
|
||
</section>
|
||
|
||
<div
|
||
v-if="active.showRule"
|
||
class="wheel-popup"
|
||
@click.self="active.showRule = false"
|
||
>
|
||
<section class="rule-content">
|
||
<button
|
||
class="popup-close rule-close"
|
||
type="button"
|
||
@click="active.showRule = false"
|
||
>
|
||
×
|
||
</button>
|
||
<div class="rule-title">{{ common('rule') }}</div>
|
||
<div
|
||
v-if="currentPage !== 'advanced'"
|
||
class="rule-top"
|
||
></div>
|
||
<div class="rule-center">
|
||
<p class="rule-desc">{{ t('rule1') }}</p>
|
||
<p class="rule-desc">{{ t('rule2') }}</p>
|
||
<p class="rule-desc">{{ t('rule3') }}</p>
|
||
</div>
|
||
<div
|
||
v-if="currentPage !== 'advanced'"
|
||
class="rule-bottom"
|
||
></div>
|
||
</section>
|
||
</div>
|
||
|
||
<div
|
||
v-if="active.showRecord"
|
||
class="wheel-popup"
|
||
@click.self="active.showRecord = false"
|
||
>
|
||
<section class="popup-content">
|
||
<button
|
||
class="popup-close icon rule-close"
|
||
type="button"
|
||
@click="active.showRecord = false"
|
||
>
|
||
×
|
||
</button>
|
||
<div class="bg-title">{{ t('historyRecord') }}</div>
|
||
<div
|
||
v-if="currentPage !== 'advanced'"
|
||
class="rule-top"
|
||
></div>
|
||
<div class="rule-center">
|
||
<div class="record-list">
|
||
<article
|
||
v-for="(item, index) in active.historyRecord"
|
||
:key="index"
|
||
class="record-item list"
|
||
>
|
||
<header class="item-title">
|
||
<span class="left"
|
||
>{{ formatDate(item.createdTime,
|
||
'yyyy-MM-dd') }}</span
|
||
>
|
||
<span
|
||
>{{ formatDate(item.createdTime,
|
||
'HH:mm:ss') }}</span
|
||
>
|
||
<strong class="right"
|
||
>X{{ item.drawTimes }}</strong
|
||
>
|
||
</header>
|
||
<div class="box-content">
|
||
<div
|
||
v-for="(reward, rewardIndex) in item.rewards"
|
||
:key="rewardIndex"
|
||
class="box-desc"
|
||
>
|
||
<div
|
||
class="box previewable-box"
|
||
role="button"
|
||
tabindex="0"
|
||
@click.stop="openPrizePreview(reward)"
|
||
@keyup.enter.prevent="openPrizePreview(reward)"
|
||
>
|
||
<img
|
||
:src="reward.coverUrl"
|
||
class="img"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<span>X{{ reward.count }}</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<p v-if="active.finished" class="finished-text">
|
||
{{ common('noDate') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="currentPage !== 'advanced'"
|
||
class="rule-bottom"
|
||
></div>
|
||
</section>
|
||
</div>
|
||
|
||
<div
|
||
v-if="active.showReward"
|
||
class="wheel-popup"
|
||
@click.self="active.showReward = false"
|
||
>
|
||
<section class="reward-content">
|
||
<div class="bg"></div>
|
||
<div class="title">{{ common('rewards') }}</div>
|
||
<button
|
||
class="popup-close reward-close"
|
||
type="button"
|
||
@click="active.showReward = false"
|
||
>
|
||
×
|
||
</button>
|
||
<div class="content">
|
||
<div class="box-content">
|
||
<div
|
||
v-for="(item, index) in active.currentReward.rewards"
|
||
:key="index"
|
||
class="box-desc"
|
||
>
|
||
<div
|
||
class="box previewable-box"
|
||
role="button"
|
||
tabindex="0"
|
||
@click.stop="openPrizePreview(item)"
|
||
@keyup.enter.prevent="openPrizePreview(item)"
|
||
>
|
||
<img
|
||
:src="item.coverUrl"
|
||
class="img"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<span>X{{ item.count }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- <p class="tips">
|
||
{{ replaceOne('rewardTips',
|
||
active.currentReward.rewardValue) }}
|
||
</p> -->
|
||
<div
|
||
v-if="rewardTotalValue(active.currentReward) > 0"
|
||
class="reward-total"
|
||
>
|
||
<span class="reward-total-label">
|
||
{{ t('totalRewards') }}
|
||
</span>
|
||
<span class="reward-total-value">
|
||
<img :src="asset('gold_new.png')" alt="" />
|
||
<span
|
||
v-text="rewardTotalText(active.currentReward)"
|
||
></span>
|
||
</span>
|
||
</div>
|
||
<button
|
||
class="again-btn"
|
||
type="button"
|
||
@click="startLottery"
|
||
>
|
||
<span
|
||
class="again-label"
|
||
v-text="t('drawAgain')"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div
|
||
v-if="preview.open"
|
||
class="material-preview-overlay"
|
||
role="button"
|
||
tabindex="0"
|
||
aria-label="Close preview"
|
||
@click="closePrizePreview"
|
||
@keyup.enter.prevent="closePrizePreview"
|
||
@keyup.space.prevent="closePrizePreview"
|
||
@keyup.esc.prevent="closePrizePreview"
|
||
>
|
||
<button
|
||
class="material-preview-close"
|
||
type="button"
|
||
aria-label="Close preview"
|
||
@click.stop="closePrizePreview"
|
||
>
|
||
×
|
||
</button>
|
||
<div class="material-preview-stage">
|
||
<img
|
||
v-if="preview.coverUrl"
|
||
ref="previewImage"
|
||
:src="preview.coverUrl"
|
||
class="material-preview-image"
|
||
:class="{ 'is-dynamic-hidden': preview.animationReady }"
|
||
alt=""
|
||
/>
|
||
<div
|
||
ref="previewEffect"
|
||
class="material-preview-effect"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
|
||
<script src="../../common/i18n.js?v=20260618-wheel-batch2"></script>
|
||
<script src="../../common/api.js?v=20260618-wheel-batch2"></script>
|
||
<script src="../../common/toast.js?v=20260618-wheel-batch2"></script>
|
||
<script src="../../common/effect-player.js?v=20260618-wheel-batch2"></script>
|
||
<script src="./script.js?v=20260624-reward-total"></script>
|
||
</body>
|
||
</html>
|