update

src/components/HomePage.vue

@@ -360,6 +360,11 @@ watch(() => lotteryShow.value, async (newVal) => {
   initUserGameInfos(true, true);
 }, { immediate: true })
 
+import Popup from './Popup.vue'
+const isPopupVisible = ref(false);
+const navigatePopupPage = () => {
+  isPopupVisible.value = true;
+}
 </script>
 
 <template>
@@ -393,8 +398,7 @@ watch(() => lotteryShow.value, async (newVal) => {
           <p class="lottery-value">{{ globalStore.draw_chances }}</p>
         </div>
       </div>
-      <div class="scene-item item-2" @click="navigateSelectTemplatePage"
-        :class="{ 'disabled': globalStore.game_chances <= 0 }">
+      <div class="scene-item item-2" @click="navigatePopupPage">
         <img src="../assets/images/join.webp" alt="立即参与">
         <div class="join-main">
           <p class="join-value">{{ globalStore.game_chances }}</p>
@@ -431,6 +435,7 @@ watch(() => lotteryShow.value, async (newVal) => {
   <PhotoSquare @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
   <Login :show="loginShow" @login-success="handleLoginSuccess" />
   <Lottery :show="lotteryShow" @close="lotteryShow = false" :type="lotteryType" :data="lotteryNoticeData"></Lottery>
+  <Popup v-model:show="isPopupVisible" />
 </template>
 
 <style scoped>

src/components/Popup.vue

@@ -52,12 +52,12 @@ const confirmBtn = () => {
     <div class="home-bg">
       <div class="popup-bg">
         <div class="scene-item item-1">
-          <img src="../assets/images/confirm.webp" @click="confirmBtn" alt="确认">
+          <img src="../assets/images/confirm.webp" @click="cancelBtn" alt="确认">
         </div>
-        <p class="message">温馨提示：每位用户只能选择一张合影参与打榜，一经确认，在打榜期间将无法更换。</p>
-        <div class="scene-item item-2">
+        <p class="message">活动已结束</p>
+        <!-- <div class="scene-item item-2">
           <img src="../assets/images/cancel.webp" @click="cancelBtn" alt="取消">
-        </div>
+        </div> -->
       </div>
     </div>
   </ModalTransition>
@@ -74,6 +74,7 @@ const confirmBtn = () => {
   position: absolute;
   top: 42%;
   color: #774107;
+  text-align: center;
 }
 .popup-bg {
   width: 77vw;
@@ -112,7 +113,6 @@ const confirmBtn = () => {
 .item-1 {
   top: 50vw;
   width: 40vw;
-  right: 0;
 }
 .item-2 {
   top: 50vw;

src/components/SelectTemplateV2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue"
+import { ref, onMounted, watch } from "vue"
 import { useRouter } from 'vue-router'
 import imageBackground from '../static/imageBackground.js';
 import { globalStore } from "../globalstore.js";
@@ -19,6 +19,19 @@ const navigateBack = () => {
   })
 }
 
+const imageUrl = ref(globalStore.select_template);
+const goToHomePage = (item) => {
+  if (!item) {
+    router.push({
+      name: 'home'
+    });
+  }
+}
+
+watch(imageUrl, (item) => {
+  goToHomePage(item)
+}, { immediate: true })
+
 const displayedImages = ref([]);
 const goToGenerateImgPage = (item) => {
   globalStore.people_count = item.peopleCount;