DZP/src/views/DZP1.vue

<script setup>

import { ref, onBeforeMount,onMounted } from 'vue'
import jiantou from '../assets/img/jiantou.png'

const showPopup = ref(false);
const popupMessage = ref('');
const totalScore = ref(4000) // 初始分数
const myLucky = ref()
// 新增变量记录基础分数
//const baseScore = 4000
const wheelConfig = ref({
})
const prizes = ref([
    { fonts: [{ text: '-199', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //0
    { fonts: [{ text: '-55', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //1
    { fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //2
    { fonts: [{ text: '-88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //3
    { fonts: [{ text: '-11', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //4
    { fonts: [{ text: '-299', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //5
    { fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //6
    { fonts: [{ text: '-66', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //7
])
const blocks = ref([{ padding: '13px', background: '	#FF2A00' }])
const buttons = ref([{
    radius: '35%',
    imgs: [{
        src: jiantou,
        width: '100%',
        top: '-130%'
    }],
    //background: '#8a9bf3',

    pointer: true,

}])

//自定义数组
const customOrder = ref([0, 4, 3, 1, 2, 4, 5, 7, 3, 4, 0])
let orderIndex = 0;

function startCallback() {
    // 重置为初始分数
    //totalScore.value = baseScore
    // 调用抽奖组件的play方法开始游戏
    myLucky.value.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
        // 
        console.log(orderIndex, 'orderIndex')

        const index = orderIndex

        console.log(customOrder.value[index], 'custome')
        // 调用stop停止旋转并传递中奖索引
        myLucky.value.stop(customOrder.value[index])
        //更新指针(循环)
        orderIndex = (index + 1) % customOrder.value.length;
    }, 3000)
}
const scoreAnimation = ref(false)


// 抽奖结束end回调
function endCallback(prize) {
    const result = Number(prize.fonts[0].text)
    console.log(prize.fonts[0].text)
    // 更新总分
    totalScore.value = totalScore.value + result
    // 触发动画
    animateScoreChange()
    // 先清空文字
  popupMessage.value = ""; 
  showPopup.value = true;
    // 设置弹窗内容
    setTimeout(() => {
      popupMessage.value= `${result}金币`; 
 }, 1000); //  <---  正确的用法
  
    showPopup.value = true;
    // 3秒后隐藏弹窗
    setTimeout(() => {
        showPopup.value = false;
    }, 3000);
}
// 添加分数变化动画方法
const animateScoreChange = () => {
    scoreAnimation.value = true
    setTimeout(() => {
        scoreAnimation.value = false
    }, 3000)
}

onMounted(() => {
    console.log(import.meta.env.MODE,'1111')
    console.log(process.env.NODE_ENV,'2222')
})

</script>

<template>
    <div class="full-background">
        <!-- <img :src="jiantou" alt="111"> -->
        <div class="art-text" :class="{ 'score-change': scoreAnimation }">
            {{ totalScore }}金币
        </div>
        <div class="luckyWheel">
            <LuckyWheel class="lucky" ref="myLucky" width="434px" height="434px" :default-config="wheelConfig"
                :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />

        </div>


        <div class="full-background">
            <!-- 其他原有代码不变 -->

        </div>

        <div class="wheel-base">
        </div>
        <transition name="popup-fade">
            <div v-if="showPopup" class="score-popup" :class="{ 'boom-effect': showPopup }">
            <!-- <div class="score-popup" :class="{ 'boom-effect': showPopup }"> -->
                <div class="ziti">
                    
                    {{ popupMessage }}
                </div>
            </div>

        </transition>

    </div>
</template>

<style scoped>
/* 爆炸动画关键帧 */
@keyframes boom {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}



.score-popup {
    /* 基础样式同上 */


    position: fixed;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);

    z-index: 1000;

    /* 背景图配置 */
    background:
        url('/public/tanchuang.png') center/contain no-repeat;
    padding: 120px 80px;
    /* 根据图片留出边距 */

    /* 尺寸控制 */
    width: 800px;
    height: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.score-popup::before {
    background: rgba(255, 215, 0, 0.1);
}

.ziti {
    /* 文字样式 */
    font-family: '华康金文体', 'Arial Black', sans-serif;
    
    font-size: 100px;

    /* 根据图片调整字号 */
    color: #ffd904;
    /* 金色文字 */
    line-height: 250px;
    /* 垂直居中文字 */
    text-shadow: 2px 2px 0 #B8860B;
    /* 略微加粗文字 */
    margin-bottom: 100px;
}

/* 添加艺术字样式 */
.art-text {
    position: fixed;
    left: 30%;
    bottom: 20%;
    transform: translateX(-50%);
    font-family: 'Arial Black', sans-serif;
    font-size: 150px;
    color: #FFD700;
    /* 金色 */
    text-shadow:
        3px 3px 0 #FF0000,
        /* 红色描边 */
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    transition: transform 0.3s ease;
    z-index: 1000;
}



/* 添加分数变化动画 */
.score-change {
    transform: translateX(-50%) scale(1.2);
    color: hwb(69 0% 0%);
    /* 变化时的橙色 */
}

.full-background {
    background-image: url('/public/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

.custom-text {
    position: fixed;
    left: 300px;
    bottom: 200px;
    color: black;
    font-size: 150px;
    z-index: 999;
}

.luckyWheel {
    position: fixed;
    z-index: 999;
    left: 1140px;
    top: 443px;
    pointer-events: auto;
}

/* 转盘底的样式 */
.wheel-base {
    background-image: url('/public/wheel-base.png');
    position: fixed;
    left: 1065px;
    top: 350px;
    width: 568px;
    height: 600px;
    z-index: 990;

}



.luckyWheel .lucky {
    aspect-ratio: 1/1;
    color: aqua;
}

h1 {
    position: relative;
    z-index: 1;
    text-align: center;
    /* 居中标题 */
    width: 100%;
    top: 50px;
    /* 让标题占据整个宽度 */
    font-size: 100px;
    /* 文字大小 */

}
</style>