107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<template>
|
||
<view>
|
||
<!-- <img style="width: 0%; height: 0%;display: none;" :src="webpUrl"> -->
|
||
<view class="content-container" :class="{ 'fade-out': isFadingOut }" v-if="isVisible && isInitialized">
|
||
<img id="animatedWebp" style="width: 100%; height: 100%" :src="webpUrl" alt="超神特效" />
|
||
<view style="color: #484848;font-size: 19rpx;text-align: center;position: fixed;bottom: 10%;width: 99.5vw;">
|
||
动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
// 移除prizeList props
|
||
},
|
||
data() {
|
||
return {
|
||
isVisible: false, // 控制组件显示/隐藏
|
||
isInitialized: false, // 控制是否已初始化
|
||
webpUrl: "https://image.zfunbox.cn/static/image/lucky/grand.webp",
|
||
isFadingOut: false, // 控制淡出动画
|
||
};
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
// 初始化老虎机组件
|
||
init() {
|
||
this.isInitialized = true;
|
||
this.webpUrl = "";
|
||
},
|
||
playWebP() {
|
||
const webpImg = document.getElementById("animatedWebp");
|
||
// 重新加载图片实现从头播放
|
||
webpImg.src = ""; // 先清空
|
||
webpImg.src = "https://image.zfunbox.cn/static/image/lucky/grand.webp"; // 重新设置相同的URL
|
||
webpImg.style.animationPlayState = "running";
|
||
if (this.bgmCtx && this.bgmCtx.csBgm) {
|
||
this.bgmCtx.csBgm.seek(0);
|
||
this.bgmCtx.csBgm.play();
|
||
}
|
||
},
|
||
|
||
pauseWebP() {
|
||
const webpImg = document.getElementById("animatedWebp");
|
||
webpImg.style.animationPlayState = "paused";
|
||
},
|
||
// 显示老虎机组件
|
||
show() {
|
||
if (!this.isInitialized) {
|
||
console.error("尚未初始化，请先调用init方法");
|
||
return this;
|
||
}
|
||
this.isVisible = true;
|
||
this.isFadingOut = false; // 重置淡出状态
|
||
this.webpUrl =
|
||
"https://image.zfunbox.cn/static/image/lucky/grand.webp?v=" + new Date().getTime();
|
||
this.audioManager.playCsBgm();
|
||
// 设置动画结束后的淡出效果
|
||
setTimeout(() => {
|
||
// 开始淡出动画
|
||
this.isFadingOut = true;
|
||
// 等待淡出动画完成后再隐藏组件
|
||
setTimeout(() => {
|
||
this.audioManager.stop();
|
||
this.isVisible = false;
|
||
this.$emit("end");
|
||
}, 400); // 淡出动画持续800ms
|
||
|
||
}, 3800); // 4秒后开始淡出（总时间仍维持在4.2秒左右）
|
||
|
||
return this;
|
||
},
|
||
},
|
||
mounted() {
|
||
// 不再自动初始化
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 内容容器样式
|
||
.content-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
//background-image: url('https://image.zfunbox.cn/static/image/lucky/grand.webp');
|
||
background-size: cover;
|
||
background-position: center;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
opacity: 1;
|
||
transition: opacity 0.8s ease;
|
||
}
|
||
|
||
// 淡出动画样式
|
||
.fade-out {
|
||
opacity: 0;
|
||
}
|
||
</style>
|