155 lines
3.4 KiB
XML
155 lines
3.4 KiB
XML
<template>
|
||
<div class="page">
|
||
<!-- 吉祥物：唯一主体，点击互动 -->
|
||
<image class="mascot {{tapAnim ? 'mascot-bounce' : ''}}" src="/common/dsniang.png" onclick="onTap" />
|
||
|
||
<!-- 峰谷实时指示（绿色谷时 / 红色峰时） -->
|
||
<text class="peak {{isPeak ? 'peak-red' : 'peak-green'}}">{{peakLabel}}</text>
|
||
|
||
<!-- Token 使用统计 / 余额 -->
|
||
<text class="stats">余额 {{balance}}</text>
|
||
<text class="stats">今日 {{todayTokens}} tokens · 预估 ¥{{todayCost}}</text>
|
||
|
||
<!-- 点击吉祥物弹出的“对话小框”（类 DSH 挂件气泡） -->
|
||
<div class="bubble" if="{{bubbleVisible}}">
|
||
<text class="bubble-text">{{bubbleText}}</text>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 懒加载 @system.audio，避免模拟器/无扬声器时崩
|
||
let audioModule = null
|
||
let audioTried = false
|
||
function loadAudio() {
|
||
if (audioTried) return audioModule
|
||
audioTried = true
|
||
try {
|
||
audioModule = require('@system.audio')
|
||
} catch (e) {
|
||
audioModule = null
|
||
}
|
||
return audioModule
|
||
}
|
||
function playDuckSound() {
|
||
const a = loadAudio()
|
||
if (!a) return
|
||
try {
|
||
a.src = '/common/Ya1.mp3'
|
||
a.play()
|
||
} catch (e) {}
|
||
}
|
||
|
||
export default {
|
||
private: {
|
||
isPeak: false,
|
||
peakLabel: '谷时 · 半价',
|
||
balance: '--',
|
||
todayTokens: '--',
|
||
todayCost: '--',
|
||
bubbleVisible: false,
|
||
bubbleText: '',
|
||
tapAnim: false,
|
||
lines: [
|
||
'我算得比你快，但没你可爱。',
|
||
'余额在跳，我也在跳，别慌。',
|
||
'峰时了，省着点用哦～',
|
||
'谷时来了，冲就完事！',
|
||
'今天也要一起聪明地偷懒。',
|
||
'点我一下，解压一下。'
|
||
]
|
||
},
|
||
|
||
onInit() {
|
||
this.refreshPeak()
|
||
},
|
||
|
||
onReady() {
|
||
// 后续接服务器时在这里拉余额/用量
|
||
},
|
||
|
||
refreshPeak() {
|
||
// 用北京时间计算峰谷；周六/周日全天谷时
|
||
const now = Date.now()
|
||
const d = new Date(now + 8 * 3600 * 1000)
|
||
const day = d.getUTCDay() // 0=Sun
|
||
const hour = d.getUTCHours()
|
||
const isWeekend = day === 0 || day === 6
|
||
const inPeak = !isWeekend && ((hour >= 9 && hour < 12) || (hour >= 14 && hour < 18))
|
||
this.isPeak = inPeak
|
||
this.peakLabel = inPeak ? '峰时 · 全价' : '谷时 · 半价'
|
||
},
|
||
|
||
onTap() {
|
||
// Q 弹互动 + 小黄鸭叫声（无扬声器时静默）
|
||
playDuckSound()
|
||
this.tapAnim = true
|
||
const self = this
|
||
setTimeout(() => { self.tapAnim = false }, 400)
|
||
|
||
// 对话小框：显示一句幽默文案 + 峰谷信息
|
||
const idx = Math.floor(Math.random() * this.lines.length)
|
||
const mode = this.isPeak ? '当前是峰时，钱包瑟瑟发抖' : '当前是谷时，薅羊毛好时机'
|
||
this.bubbleText = this.lines[idx] + ' ｜ ' + mode
|
||
this.bubbleVisible = !this.bubbleVisible
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page {
|
||
width: 100%;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #0b1220;
|
||
}
|
||
|
||
.mascot {
|
||
width: 220px;
|
||
height: 220px;
|
||
}
|
||
|
||
.mascot-bounce {
|
||
transform: scale(0.92);
|
||
}
|
||
|
||
.peak {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.peak-green {
|
||
color: #3ddc84;
|
||
}
|
||
|
||
.peak-red {
|
||
color: #ff5b5b;
|
||
}
|
||
|
||
.stats {
|
||
color: #9fb0d0;
|
||
font-size: 14px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.bubble {
|
||
position: absolute;
|
||
top: 90px;
|
||
left: 50%;
|
||
margin-left: -110px;
|
||
width: 220px;
|
||
padding: 10px 12px;
|
||
border-radius: 14px;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.bubble-text {
|
||
color: #0b1220;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
</style>
|