update

2025-12-26 18:51:50 +08:00
parent 9b899bbc82
commit b823be82a7
22 changed files with 138 additions and 44 deletions
--- a/src/components/GamePage.vue
+++ b/src/components/GamePage.vue
@@ -15,12 +15,19 @@
        height: circularArea.size
      }"
    ></div>
-    <div class="game-page" :style="gameBackgroundImg"></div>
+    <div class="game-page base-bg" :style="gameBackgroundImg"></div>
+
+    <!-- 上层：完成背景，一直在 DOM 里，只是透明度为 0/1 -->
+    <div
+      class="game-page finish-bg"
+      :style="finishBgStyle"
+      :class="{ 'finish-bg--show': showFinishBg }"
+    ></div>
  </ModalTransition>
 </template>

 <script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import ModalTransition from "./ModalTransition.vue"
 import globalToastEvent, { ToastType } from '../globalToastEvent';
 import game1 from '../assets/images/new/game1.webp';
@@ -28,6 +35,13 @@ import game2 from '../assets/images/new/game2.webp';
 import game3 from '../assets/images/new/game3.webp';
 import game4 from '../assets/images/new/game4.webp';
 import game5 from '../assets/images/new/game5.webp';
+
+import game1_1 from '../assets/images/new/game1-1.webp';
+import game2_2 from '../assets/images/new/game2-2.webp';
+import game3_3 from '../assets/images/new/game3-3.webp';
+import game4_4 from '../assets/images/new/game4-4.webp';
+import game5_5 from '../assets/images/new/game5-5.webp';
+
 import { globalStore } from "../globalstore.js";
 import { Request } from "../libs/utils"

@@ -42,6 +56,21 @@ const handleGoBack = () => {
  emit('close')
 }

+// 重置背景状态
+const resetFinishBg = () => {
+  showFinishBg.value = false
+  finishBgStyle.value = {}
+}
+
+// 每次弹窗“打开”时重置
+watch(() => props.show,
+  (val) => {
+    if (val) {
+      resetFinishBg()
+    }
+  }
+)
+
 const gameImgMap = {
  1: game1,
  2: game2,
@@ -50,6 +79,15 @@ const gameImgMap = {
  5: game5
 }

+const gameImgFinishMap = {
+  1: game1_1,
+  2: game2_2,
+  3: game3_3,
+  4: game4_4,
+  5: game5_5
+}
+
+// 当前背景图
 const gameBackgroundImg = computed(() => {
  const id = Number(props.gameSlideId) || 1;
  const img = gameImgMap[id] || game1;
@@ -58,14 +96,14 @@ const gameBackgroundImg = computed(() => {

 const circularAreaList = {
  1: {
-    top: '62vw',
-    left: '55vw',
+    top: '80vw',
+    left: '50vw',
    size: '35vw'
  },
  2: {
-    top: '62vw',
-    left: '80vw',
-    size: '35vw'
+    top: '82vw',
+    left: '70vw',
+    size: '40vw'
  },
  3: {
    top: '88vw',
@@ -74,12 +112,12 @@ const circularAreaList = {
  },
  4: {
    top: '96vw',
-    left: '36vw',
+    left: '51vw',
    size: '35vw'
  },
  5: {
-    top: '96vw',
-    left: '40vw',
+    top: '98vw',
+    left: '74vw',
    size: '35vw'
  }
 }
@@ -93,13 +131,23 @@ const circularArea = computed(() => {
 // 点击隐藏区域显示抽奖弹窗
 //防止多次点击
 const isRequesting = ref(false)
+const showFinishBg = ref(false)
+const finishBgStyle = ref({}) // 点击后再赋值
 const handleShowLottery = async () => {
  // 如果已经在请求中，直接忽略后续点击
  if (isRequesting.value) return
  isRequesting.value = true;

+  // 1. 点击后才计算完成背景图
+  const id = Number(props.gameSlideId) || 1
+  const img = gameImgFinishMap[id] || game1_1
+  finishBgStyle.value = { backgroundImage: `url(${img})` }
+  // 先切换背景（慢慢显示新的）
+  showFinishBg.value = true
+  // 2. 停留 2 秒
+  await new Promise(resolve => setTimeout(resolve, 3000))
+
  const loading = weui.loading()
-  globalToastEvent.emit(ToastType.SHOW_LOTTERY);

  // 点击隐藏区域后，游戏结束，再次调用game log接口
  try {
@@ -110,6 +158,7 @@ const handleShowLottery = async () => {
      emit('close')
      return
    } else {
+      globalToastEvent.emit(ToastType.SHOW_LOTTERY);
      console.log(gameLogRes)
    }
  } finally {
@@ -254,6 +303,7 @@ onUnmounted(() => {
  top: 8vw;
  left: 2vw;
  animation-delay: 0s;
+  z-index: 1;
 }
 .item-2 {
  width: 12vw;
@@ -302,6 +352,27 @@ onUnmounted(() => {
  background-position: center;
 }

+/* 让两个背景层叠放满屏 */
+.base-bg,
+.finish-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+/* 上层完成背景：初始透明，点击后渐显 */
+.finish-bg {
+  opacity: 0;
+  transition: opacity 2.5s ease; /* 控制“缓慢”程度，越大越慢 */
+  pointer-events: none; /* 让点击事件透传给下面的元素 */
+}
+
+.finish-bg.finish-bg--show {
+  opacity: 1;
+}
+
 .carousel-container {
  width: 100%;
  max-width: 100vw;
--- a/src/components/GameSwiper.vue
+++ b/src/components/GameSwiper.vue
@@ -29,7 +29,7 @@
              :class="['carousel-slide', { active: currentIndex === index }]"
            >
              <img v-show="slide.show" class="complete-icon" src="../assets/images/new/complete-icon.webp" alt="已完成">
-              <img :src="slide.image" :alt="slide.title" />
+              <img class="slider-img" :src="slide.image" :alt="slide.title" />

              <div class="shou-dev">
                <div class="show-position">
@@ -220,7 +220,7 @@ const handleConfirmClick = async () => {
 const handleSlideClick = (slide) => {
  
  if (!hasVisitedBefore) {
-    localStorage.setItem('hasVisitedGameSwiper', 'true');
+    localStorage.setItem('hasVisitedGameSwiper', true);
    globalToastEvent.emit(ToastType.SHOW_GAMEDEMO)
    globalToastEvent.emit(ToastType.SHOW_GAMEPAGE, slide)
  } else {
@@ -424,6 +424,12 @@ onUnmounted(() => {
 }

 .carousel-slide {
+  width: 100%;
+  height: 112.7vw;
+  padding: 5vw;
+  background-size: cover;
+  background-position: center;
+  background-image: url('../assets/images/new/border-img.webp');
  min-width: calc(100% - 160px);
  width: calc(100% - 160px);
  margin: 0 20px;
@@ -505,7 +511,6 @@ onUnmounted(() => {
    min-width: calc(100% - 12vw);
    width: calc(100% - 12vw);
    margin: 0 10px;
-    border-radius: 8px;
  }
  
  .carousel-track {
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -458,6 +458,9 @@ const handleAddress = (id) => {
    <div class="home-wrapper">
      <div class="fallback-background"></div>

+      <!-- 透明洞的覆盖块：50x100px，背景色 #7b3d0d -->
+      <div class="transparent-hole-cover"></div>
+
      <div class="scene-item item-1" @click="handleLottery">
        <img src="../assets/images/new/lottery.webp" alt="抽奖">
      </div>
@@ -579,6 +582,7 @@ const handleAddress = (id) => {
 }

 .home-wrapper {
+  position: relative;
  width: 100vw;
  height: 200vw;
  display: flex;
@@ -614,11 +618,19 @@ const handleAddress = (id) => {
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/new/home-bg.webp');
-  background-size: cover;
+  background-size: 100% auto;
  background-repeat: no-repeat;
-  background-position: center;
+  background-position: 0 0;
  z-index: -1;
-  /* 置于视频下方 */
+}
+.transparent-hole-cover {
+  position: fixed;
+  width: 30vw;
+  height: 80vw;
+  background-color: #7b3d0d;
+  top: 100vw;
+  right: 8vw;
+  z-index: -2;
 }

 .scene-item {
@@ -643,23 +655,24 @@ const handleAddress = (id) => {
 /* 马的位置 */
 .item-ma1 {
  width: 14vw;
-  top: 47vw;
-  left: 4.4vw;
+  top: 43vw;
+  left: 6.2vw;
 }
 .item-ma2 {
  width: 14vw;
-  top: 47vw;
-  right: 4.4vw;
+  top: 43vw;
+  right: 7.1vw;
 }
 .item-ma3 {
  width: 21vw;
-  top: 162vw;
-  left: 3vw;
+  top: 147vw;
+  left: 7vw;
 }
 .item-ma4 {
  width: 25vw;
-  top: 128vw;
-  right: 6.6vw;
+  top: 121vw;
+  right: 2.6vw;
+  z-index: -2;
 }

 .item-jiu1 {
@@ -733,13 +746,13 @@ const handleAddress = (id) => {

 /* 每匹马用同一个 keyframes，但频率和起始时间不同，让节奏更自然 */
 .scene-item.item-ma1 img {
-  animation: horse-gallop 1.0s infinite ease-in-out;
+  animation: horse-gallop 1.8s infinite ease-in-out;
  animation-delay: 0s;
  transform-origin: center bottom;
 }

 .scene-item.item-ma2 img {
-  animation: horse-gallop 1.25s infinite ease-in-out;
+  animation: horse-gallop 2.1s infinite ease-in-out;
  /* 负 delay：进场时就已经错位，不会同时起跳 */
  animation-delay: -0.3s;
  transform-origin: center bottom;
@@ -751,7 +764,7 @@ const handleAddress = (id) => {
  transform-origin: center bottom;
 }

-.scene-item.item-ma4 img {
+.scene-item.item-ma4 {
  animation: horse-gallop 1.65s infinite ease-in-out;
  animation-delay: -0.9s;
  transform-origin: center bottom;
@@ -772,12 +785,12 @@ const handleAddress = (id) => {
  animation-delay: -0.9s;
  transform-origin: center bottom;
 }
-.scene-item.item-jiu1 img {
+.scene-item.item-jiu1 {
  animation: horse-gallop 2.4s infinite ease-in-out;
  animation-delay: -0.9s;
  transform-origin: center bottom;
 }
-.scene-item.item-jiu2 img {
+.scene-item.item-jiu2 {
  animation: horse-gallop 2.2s infinite ease-in-out;
  animation-delay: -0.9s;
  transform-origin: center bottom;
@@ -800,7 +813,7 @@ const handleAddress = (id) => {

 .item-1 {
  width: 21vw;
-  bottom: 7vw;
+  bottom: 20vw;
  left: 0;
  animation-delay: 0s;
 }
@@ -823,7 +836,7 @@ const handleAddress = (id) => {

 .item-2 {
  width: 48vw;
-  bottom: 5vw;
+  bottom: 18vw;
  animation-delay: 0s;
 }

@@ -844,7 +857,7 @@ const handleAddress = (id) => {

 .item-3 {
  width: 21vw;
-  bottom: 7vw;
+  bottom: 20vw;
  right: 0;
  animation-delay: 0s;
 }
@@ -879,17 +892,11 @@ const handleAddress = (id) => {

 .item-8 {
  width: 27vw;
-  bottom: 27vw;
+  bottom: 43vw;
  right: 1vw;
  animation-delay: 0s;
 }

-.item-ma1 {
-  width: 14vw;
-  top: 47vw;
-  left: 4.4vw;
-}
-
@keyframes loginloading {
  0% {
    transform: rotate(0deg);
--- a/src/components/Lottery.vue
+++ b/src/components/Lottery.vue
@@ -280,7 +280,7 @@ watch(() => props.show, async (newVal) => {

      // 再逐渐放大到 50 倍（2500px）
      prizeshowTime.to(layerRef.value, {
-        duration: 5.0,
+        duration: 2.0,
        ease: "none",
        '--maskSize': '2500px',
        onComplete: () => {
--- a/src/components/PopupMore.vue
+++ b/src/components/PopupMore.vue
@@ -14,7 +14,10 @@ const cancelBtn = () => {

 const startNow = () => {
  if (isWeixinPlatform()) {
-    miniJumpToScene()
+    weui.alert("2026年1月1日正式开启！")
+    return;
+    //TODO 上限更换
+    // miniJumpToScene()
  } else {
    weui.alert("请前往「泸州老窖会员中心」小程序进行查询")
  }
@@ -42,8 +45,8 @@ const startNow = () => {

 <style scoped>
 .haibao {
-  width: 70vw;
-  height: 119.444444vw;
+  width: 82vw;
+  height: 157vw;
  background-image: url("../assets/images/new/sanchongli.webp");
  background-repeat: no-repeat;
  background-size: 100%;
--- a/src/components/TodoList.vue
+++ b/src/components/TodoList.vue
@@ -3,6 +3,11 @@
    <div class="todolist-wrapper">
      <div class="btn-group">
        <div class="btn-share" :class="globalStore.MAX_INVITE_DAILY === globalStore.MAX_INVITE_DAILY ? 'has' : ''" @click="openHaibao($event)"></div>
+        <!-- <div 
+          class="btn-share" 
+          :class="{'has': globalStore.inviteCount >= globalStore.MAX_INVITE_DAILY}"
+          @click="globalStore.inviteCount < globalStore.MAX_INVITE_DAILY && openHaibao($event)">
+        </div> -->
        <div class="btn-qiwei" :class="globalStore.followed_official && 'has'" @click="openQiwei($event)"></div>
      </div>
      <div class="close" @click="$emit('close')"></div>
@@ -42,6 +47,9 @@ const userhaibaoCover = computed(() => {
 })

 const openHaibao = async (e) => {
+  if (this.globalStore.inviteCount >= this.globalStore.MAX_INVITE_DAILY) {
+    return;
+  }
  globalToastEvent.emit(ToastType.SHOW_SHAREPAGE, true);
 }