0911 第一版

src/components/HomePage.vue

@@ -1,16 +1,22 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue"
 import { useRouter } from 'vue-router'
-import globalToastEvent, { ToastType } from '../globalToastEvent';
 import { Request, Storage } from "../libs/utils"
 import faceFamily from "../assets/audio/faceFamily.mp3"
+import MyPhoto from './MyPhoto.vue'
+import PhotoSquare from './PhotoSquare.vue'
+import globalToastEvent, { ToastType } from '../globalToastEvent';
+import { globalStore } from "../globalstore.js";
+
 defineProps({
   show: true
 })
 const isMusicOn = ref(false);
 const audioElement = ref(null);
-
+const drawChances = ref(0);
+const gameChances = ref(0);
 onMounted(() => {
+  initUserGameInfos(true, true);
   // 创建音频
   audioElement.value = new Audio(faceFamily);
   // 尝试自动播放
@@ -29,12 +35,12 @@ const tryAutoPlay = () => {
       isMusicOn.value = true;
       console.log("自动播放成功");
     })
-      .catch(error => {
-        // 自动播放被阻止
-        console.log("自动播放被阻止，需要用户交互:", error);
-        isMusicOn.value = false;
-        audioElement.value.pause();
-      });
+    .catch(error => {
+      // 自动播放被阻止
+      console.log("自动播放被阻止，需要用户交互:", error);
+      isMusicOn.value = false;
+      audioElement.value.pause();
+    });
   }
 };
 
@@ -42,7 +48,7 @@ const tryAutoPlay = () => {
 const toggleMusicState = () => {
   isMusicOn.value = !isMusicOn.value;
   if (!isMusicOn.value) {
-    audioElement.value.pause();
+      audioElement.value.pause();
   } else {
     audioElement.value.play().catch(error => {
       console.log("播放失败:", error);
@@ -50,13 +56,6 @@ const toggleMusicState = () => {
   }
 };
 
-const router = useRouter();
-const navigateSelectTemplatePage = () => {
-  router.push({
-    name: 'selectTemplateV2'
-  })
-}
-
 const navigateTodoList = () => {
   globalToastEvent.emit(ToastType.SHOW_TODO)
 }
@@ -68,23 +67,58 @@ const handleRule = () => {
 }
 const handleLottery = () => {
   globalToastEvent.emit(ToastType.SHOW_LOTTERY)
+  if (drawChances.value <= 0) return;
+  drawChances.value -= 1;
+  globalStore.draw_chances = drawChances.value
 }
 
+const router = useRouter();
+const navigateSelectTemplatePage = () => {
+  if (gameChances.value <= 0) return;
+  gameChances.value -= 1;
+  globalStore.game_chances = gameChances.value
+  router.push({
+    name: 'selectTemplateV2'
+  })
+}
+
+const isMyPhotoVisible = ref(false);
+const isPhotoSquareVisible = ref(false);
+
+
+const activeTab = ref('my-photo')
+
+const showMyPhoto = () => { activeTab.value = 'my-photo', isMyPhotoVisible.value = true; }
+const showPhotoSquare=()=>{
+  activeTab.value='photo-square',
+  isPhotoSquareVisible.value = true;
+}
+
+const initUserGameInfos = async (refresh_official, refresh_cap_scan) => {
+  const result = await Request('game/info', { refresh_official: refresh_official, refresh_cap_scan: refresh_cap_scan }, "GET")
+
+  if (result.res.status === 200) {
+    drawChances.value = result.json.draw_chances
+    gameChances.value = result.json.game_chances
+    globalStore.draw_chances = drawChances.value
+    globalStore.game_chances = gameChances.value
+  }
+}
 </script>
 
 <template>
   <div :show="show">
     <div class="home-wrapper">
-      <div class="scene-item item-1" @click="handleLottery">
+      <div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': drawChances <= 0 }">
         <img src="../assets/images/lottery.png" alt="抽奖">
         <div class="lottery-main">
-          <p class="lottery-value">3</p>
+          <p class="lottery-value">{{ drawChances }}</p>
         </div>
       </div>
-      <div class="scene-item item-2" @click="navigateSelectTemplatePage">
+      <div class="scene-item item-2" @click="navigateSelectTemplatePage" :class="{ 'disabled': gameChances <= 0 }">
         <img src="../assets/images/join.png" alt="立即参与">
         <div class="join-main">
-          <p class="join-value">2</p>
+          <p class="join-value">{{ gameChances }}</p>
         </div>
       </div>
       <div class="scene-item item-3" @click="navigateTodoList">
@@ -105,14 +139,17 @@ const handleLottery = () => {
       <div class="scene-item item-7" @click="handlePrizeList">
         <img src="../assets/images/award.png" alt="奖励">
       </div>
-      <div class="scene-item item-8">
+      <div class="scene-item item-8" @click="showMyPhoto">
         <img src="../assets/images/my-photo.png" alt="我的照片">
       </div>
-      <div class="scene-item item-9">
+      <div class="scene-item item-9" @click="showPhotoSquare">
         <img src="../assets/images/photos.png" alt="照片广场">
       </div>
     </div>
   </div>
+
+  <MyPhoto v-if="activeTab === 'my-photo'"  @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
+  <PhotoSquare v-else  @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
 </template>
 
 <style scoped>
@@ -132,10 +169,8 @@ const handleLottery = () => {
 
 .scene-item {
   position: absolute;
-  z-index: 2;
   cursor: pointer;
   transition: all 0.4s ease;
-  border-radius: 8px;
   overflow: hidden;
   border: 3px solid transparent;
   animation: float 4s ease-in-out infinite;
@@ -143,7 +178,6 @@ const handleLottery = () => {
 
 .scene-item:hover {
   transform: scale(1.05);
-  z-index: 10;
 }
 
 .scene-item img {
@@ -154,7 +188,7 @@ const handleLottery = () => {
 }
 
 .item-1 {
-  width: 90px;
+  width: 21vw;
   bottom: 0;
   left: 0;
   animation-delay: 0s;
@@ -164,11 +198,11 @@ const handleLottery = () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 18px;
-  height: 16px;
+  width: 4vw;
+  height: 3.5vw;
   position: absolute;
-  top: 7px;
-  right: 28px;
+  top: 1.5vw;
+  right: 6.6vw;
   color: #fff;
 }
 
@@ -177,18 +211,17 @@ const handleLottery = () => {
 }
 
 .item-2 {
-  width: 200px;
+  width: 48vw;
   bottom: 0;
   animation-delay: 0s;
 }
 
 .join-main {
   position: absolute;
-  top: 16px;
-  right: 8px;
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
+  top: 3.4vw;
+  right: 2.4vw;
+  width: 7vw;
+  line-height: 7vw;
   text-align: left;
 }
 
@@ -202,49 +235,43 @@ const handleLottery = () => {
 }
 
 .item-3 {
-  width: 90px;
+  width: 21vw;
   bottom: 0;
   right: 0;
   animation-delay: 0s;
 }
-
 .item-4 {
-  width: 46px;
+  width: 11vw;
   top: 1.5%;
   right: 1.5%;
   animation-delay: 0s;
 }
-
 .item-5 {
-  width: 46px;
+  width: 11vw;
   top: 1.5%;
   right: 1.5%;
   animation-delay: 0s;
 }
-
 .item-6 {
-  width: 62px;
+  width: 14.5vw;
   top: 8%;
   right: 0;
   animation-delay: 0s;
 }
-
 .item-7 {
-  width: 62px;
+  width: 14.5vw;
   top: 13.5%;
   right: 0;
   animation-delay: 0s;
 }
-
 .item-8 {
-  width: 50px;
+  width: 11vw;
   bottom: 32%;
   right: 1%;
   animation-delay: 0s;
 }
-
 .item-9 {
-  width: 50px;
+  width: 11vw;
   bottom: 23%;
   right: 1%;
   animation-delay: 0s;