Merge branch 'master' into hxl

2 months ago · d1dc8e67d4
15 changed files with 537 additions and 106 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -14,7 +14,7 @@
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^5.2.1",
-        "vite": "^6.2.0"
+        "vite": "^6.2.6"
      }
    },
    "node_modules/@babel/helper-string-parser": {
@ -1150,10 +1150,9 @@
    },
    "node_modules/vite": {
      "version": "6.2.6",
-      "resolved": "https://mirrors.huaweicloud.com/repository/npm/vite/-/vite-6.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
      "integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "esbuild": "^0.25.0",
        "postcss": "^8.5.3",
@ -1860,7 +1859,7 @@
    },
    "vite": {
      "version": "6.2.6",
-      "resolved": "https://mirrors.huaweicloud.com/repository/npm/vite/-/vite-6.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
      "integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==",
      "dev": true,
      "requires": {
--- a/package.json
+++ b/package.json
@ -15,6 +15,6 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
-    "vite": "^6.2.0"
+    "vite": "^6.2.6"
  }
 }
--- a/public/bg.png
+++ b/public/bg.png
--- a/public/bg2.jpg
+++ b/public/bg2.jpg
--- a/public/pan.png
+++ b/public/pan.png
--- a/public/tanchuang.png
+++ b/public/tanchuang.png
--- a/public/wheel-base.png
+++ b/public/wheel-base.png
--- a/public/wheel-base2.png
+++ b/public/wheel-base2.png
--- a/src/assets/img/j.png
+++ b/src/assets/img/j.png
--- a/src/assets/img/jiantou.png
+++ b/src/assets/img/jiantou.png
--- a/src/router/index.js
+++ b/src/router/index.js
@ -2,12 +2,17 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
    {
        path: '/',
-        redirect: '/DZP'
+        redirect: '/DZP1'
    },
    {
-        path: '/DZP',
-        name: 'DZP',
-        component: () => import('../views/DZP.vue')
+        path: '/DZP1',
+        name: 'DZP1',
+        component: () => import('../views/DZP1.vue')
+    },
+    {
+        path: '/DZP2',
+        name: 'DZP2',
+        component: () => import('../views/DZP2.vue')
    },
 ]
 // 创建路由实例
--- a/src/views/DZP.vue
+++ b/src/views/DZP.vue
@ -1,95 +0,0 @@
-<script setup>
-
-import { ref, onBeforeMount, computed } from 'vue'
-
-const myLucky = ref()
-const wheelConfig = ref({
-})
-const prizes = ref([
-    { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
-    { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
-    { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
-    { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
-    { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
-    { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
-])
-const blocks = ref([{ padding: '13px', background: '#617df2' }])
-const buttons = ref([{
-    radius: '35%',
-    background: '#8a9bf3',
-    pointer: true,
-    fonts: [{ text: '开始', top: '-10px' }]
-}])
-
-const prizeList=ref([1,3,5,0,2,4])
-var index=0
-function startCallback() {
-    // 调用抽奖组件的play方法开始游戏
-    myLucky.value.play()
-    // 模拟调用接口异步抽奖
-    setTimeout(() => {
-        // 假设后端返回的中奖索引是0
-        // 调用stop停止旋转并传递中奖索引
-        myLucky.value.stop(prizeList.value[index])
-        index=index+1;
-    }, 3000)
-}
-const prize = ref(0)
-
-// 抽奖结束end回调
-function endCallback(prizeObj) {
-    console.log(prizeObj)
-
-    // alert('恭喜你抽中了：' + prizeObj.fonts[0].text)
-    prize.value = prizeObj.fonts[0].text
-    console.log(prize.value);
-}
-const now = computed(() => {
-    return prize.value
-})
-
-</script>
-
-<template>
-    <div class="bk">
-        <h1 class="title"> 大转盘 </h1>
-
-        <div class="luckyWheel">
-
-            <LuckyWheel class="lucky" ref="myLucky" width="300px" height="300px" :default-config="wheelConfig"
-                :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
-        </div>
-
-        <div class="prize">
-            <h1>{{ now }}</h1>
-        </div>
-
-    </div>
-</template>
-
-<style scoped>
-.title {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-}
-
-.bk {
-    background-color: #8a9bf3;
-    width: 100vw;
-    height: 100vh;
-}
-
-.luckyWheel {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.prize {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-</style>
--- a/src/views/DZP1.vue
+++ b/src/views/DZP1.vue
@ -0,0 +1,287 @@
+<script setup>
+
+import { ref, onBeforeMount } 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)
+}
+
+</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: 450px;
+    bottom: 200px;
+    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('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>
--- a/src/views/DZP2.vue
+++ b/src/views/DZP2.vue
@ -0,0 +1,216 @@
+<script setup>
+
+import { ref, onBeforeMount,onMounted } from 'vue'
+import j from '../assets/img/j.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: '2' ,top:'10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //2
+    { fonts: [{ text: '4' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //4
+    { fonts: [{ text: '6' ,top:'10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //6
+    { fonts: [{ text: '9' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //9
+    { fonts: [{ text: '10' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //10
+    { fonts: [{ text: '15' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //15
+])
+const blocks = ref([{ padding: '13px', background: '	#FF2A00' }])
+const buttons = ref([{
+    radius: '35%',
+    imgs: [{
+        src: j,
+        width: '100%',
+        top: '-130%'
+    }],
+    //background: '#8a9bf3',
+
+    pointer: true,
+
+}])
+
+
+//修改一点
+function startCallback() {
+    // 调用抽奖组件的play方法开始游戏
+    myLucky.value.play()
+    // 模拟调用接口异步抽奖
+    setTimeout(() => {
+        // 假设后端返回的中奖索引是0
+        const index = 3
+        // 调用stop停止旋转并传递中奖索引
+        myLucky.value.stop(index)
+    }, 3000)
+}
+const scoreAnimation = ref(false)
+
+
+// 抽奖结束end回调
+function endCallback(prize) {
+    console.log(prize)
+}
+</script>
+
+<template>
+    <div class="full-background">
+       
+        <div class="luckyWheel">
+            <LuckyWheel class="lucky" ref="myLucky" width="354px" height="354px" :default-config="wheelConfig"
+                :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
+
+        </div>
+        <div class="wheel-base2" >
+        </div>
+
+    </div>
+</template>
+
+<style scoped>
+
+
+.score-popup {
+    /* 基础样式同上 */
+    position: fixed;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+
+    z-index: 1000;
+
+    /* 背景图配置 */
+    background:
+        ('/public/tanchaung.png') center/contain no-repeat;
+    padding: 240px 160px;
+    /* 根据图片留出边距 */
+
+    /* 尺寸控制 */
+    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: #0e0d0d;
+    /* 金色文字 */
+    line-height: 250px;
+    /* 垂直居中文字 */
+    text-shadow: 2px 2px 0 #B8860B;
+    /* 略微加粗文字 */
+    margin-bottom: 260px;
+}
+
+/* 添加艺术字样式 */
+.art-text {
+    position: fixed;
+    left: 450px;
+    bottom: 200px;
+    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/bg2.jpg');
+    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: 2000;
+    left: 826px;
+    top: 487px;
+    pointer-events: auto;
+}
+
+/* 转盘底的样式 */
+.wheel-base2 {
+    background-image: url('/public/wheel-base2.png');
+    position: fixed;
+    left: 750px;
+    top: 395px;
+    width: 520px;
+    height: 600px;
+    z-index: 1190;
+
+}
+.pan {
+    background-image: url('/public/pan.png');
+    position: fixed;
+    left: 822px;
+    top: 460px;
+    width: 360px;
+    height: 360px;
+    z-index: 1190;
+
+}
+
+
+
+.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>
--- a/vite.config.js
+++ b/vite.config.js
@ -1,7 +1,26 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path' // 

-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue()], //
+  server: {
+    host: '192.168.1.102',
+    port: 5173,
+    //  错误1：server 块内不能嵌套 plugins 配置（已删除）
+    proxy: {
+      '/api': {
+        target: 'http://192.168.99.223:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  },
+  resolve: { // 
+    alias: {
+      "/@": resolve(__dirname, "src"), // 
+    }
+  },
+  base: process.env.NODE_ENV === "production" ? "/dazhuanpan" : "/",
+  
 })