update

src/components/Marquee.vue

@@ -11,7 +11,7 @@
           <img src="../assets/img/result/南投清境農場_成果圖.webp" alt="" />
         </div>
         <div class="pic">
-          <img src="../assets/img/result/台中日月潭_成果圖.webp" alt="" />
+          <img src="../assets/img/result/南投日月潭_成果圖.webp" alt="" />
         </div>
         <div class="pic">
           <img src="../assets/img/result/台中歌劇院_成果照.webp" alt="" />
@@ -29,7 +29,7 @@
           <img src="../assets/img/result/南投清境農場_成果圖.webp" alt="" />
         </div>
         <div class="pic">
-          <img src="../assets/img/result/台中日月潭_成果圖.webp" alt="" />
+          <img src="../assets/img/result/南投日月潭_成果圖.webp" alt="" />
         </div>
         <div class="pic">
           <img src="../assets/img/result/台中歌劇院_成果照.webp" alt="" />

src/language/en.json

@@ -8,6 +8,8 @@
   "female": "Female",
   "select_gender": "Please select your gender",
   "select_person": "Please select a person",
+  "ticket_purchase": "Go to Ticket Purchase",
+  "purchase_link": "Please select the ticket purchase link",
 
   "postcard": {
     "step1": {

src/language/ja.json

@@ -8,6 +8,8 @@
   "female": "女性",
   "select_gender": "性別を選択してください",
   "select_person": "人物を選択してください",
+  "ticket_purchase": "前往購票",
+  "purchase_link": "請選擇購票連結",
 
   "postcard": {
     "step1": {

src/language/ko.json

@@ -8,6 +8,8 @@
   "female": "女性",
   "select_gender": "請選擇性別",
   "select_person": "請選擇人物",
+  "ticket_purchase": "前往購票",
+  "purchase_link": "請選擇購票連結",
 
   "postcard": {
     "step1": {
@@ -65,7 +67,7 @@
   "keelung_heping_island_park": "基隆和平島公園",
   "keelung_heping_island_park_description": "지룽항 동쪽에 위치한 허핑다오 공원은 바람과 바다의 침식으로 인해 형성된 특별한 지질 구조가 특징입니다. 가장 유명한 것은 \"A Thousand Layers\"와 \"Tend Thousand Piles\"(버섯 바위)입니다. 이러한 아름다운 지형 외에도 신체 화석과 흔적 화석이 섬의 지질 보물입니다. 이러한 귀중한 자원을 보호하기 위해 화석지대는 가이드 투어 형태로 특정 시간에만 방문객이 접근할 수 있습니다.",
 
-  "taichung_sun_moon_lake": "台中日月潭",
+  "taichung_sun_moon_lake": "南投日月潭",
   "taichung_sun_moon_lake_description": "르웨탄 호수는 대만 난터우현 유치향에 위치한 아름다운 산악 호수입니다. 호수는 라루섬(Lalu Island)과 경계를 이루고 있으며 동쪽은 '해' 모양이고 서쪽은 '달' 모양이므로 일월담이라는 이름이 붙었습니다. 산과 강, 울창한 숲으로 둘러싸여 있으며 수영장은 거울처럼 넓고 평평하여 시시각각 변화하는 산을 반사합니다.",
 
   "tainan_salt_field": "台南鹽田",

src/language/zh.json

@@ -8,6 +8,8 @@
   "female": "女性",
   "select_gender": "請選擇性別",
   "select_person": "請選擇人物",
+  "ticket_purchase": "前往購票",
+  "purchase_link": "請選擇購票連結",
 
   "postcard": {
     "step1": {
@@ -65,7 +67,7 @@
   "keelung_heping_island_park": "基隆和平島公園",
   "keelung_heping_island_park_description": "和平島地質公園位於基隆港港口東側，是基隆港的門戶，同時也是北台灣最早有西方人足跡的地方，亦是基隆最早有漢人入墾的所在地之一。此地早期原為凱達格蘭族的聚落，之後被列為軍事管制區，目前在沿海部份地區已開放設為和平島地質公園。",
 
-  "taichung_sun_moon_lake": "台中日月潭",
+  "taichung_sun_moon_lake": "南投日月潭",
   "taichung_sun_moon_lake_description": "日月潭位於臺灣南投縣魚池鄉，是一座美麗的高山湖泊。潭面以拉魯島為界，東側形如「日」，西側形如「月」，故名日月潭。其周圍山重水複，林木蒼鬱，潭面廣闊水平如鏡，映照群山變化萬千。",
 
   "tainan_salt_field": "台南鹽田",

src/views/HomeView.vue

@@ -86,6 +86,21 @@ p {
   }
 }
 
+.alert-item {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .v-alert {
+    background-color: var(--sub-color);
+  }
+
+  .text-warning {
+    color: var(--main-color) !important;
+  }
+}
+
 .lartern-content {
   height: 100vh;
   display: flex;

src/views/Step_2.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
 import { useMainStore } from "@/stores/store";
 import { useI18n } from "vue-i18n";
 import "animate.css";
 import Footer from "../components/Footer.vue";
 
 const { t } = useI18n();
+const router = useRouter();
 const store = useMainStore();
 
 // let assignGender = ref("");
@@ -25,6 +27,22 @@ function setGender(value) {
   store.assignGender = value;
   console.log("setGender", store.assignGender);
 }
+
+let alertShow = ref(false);
+
+function check() {
+  console.log("store.assignGender", store.assignGender);
+  if (store.assignGender === "") {
+    // alert("尚未選擇性別");
+    alertShow.value = true;
+    setTimeout(() => {
+      alertShow.value = false;
+    }, 2000);
+  } else {
+    alertShow.value = false;
+    router.push("/step3");
+  }
+}
 </script>
 
 <template>
@@ -40,11 +58,21 @@ function setGender(value) {
         <v-icon :icon="item.icon" color="white"></v-icon>
         <p>{{ t(item.value) }}</p>
       </button>
+
+      <div v-if="alertShow" class="alert-item">
+        <v-alert border="top" type="warning" variant="outlined" class="mt-5">
+          尚未選擇
+        </v-alert>
+      </div>
     </div>
 
-    <router-link to="/step3" class="main-btn">
+    <button @click="check()" to="/step3" class="main-btn">
+      {{ t("next_step") }}
+    </button>
+
+    <!-- <router-link to="/step3" class="main-btn">
       {{ t("next_step") }}
-    </router-link>
+    </router-link> -->
 
     <Footer url="/step1" />
   </div>

src/views/Step_3.vue

@@ -171,9 +171,9 @@ function handleBgImg(race) {
 
       <span class="page-num">{{ currentPage }} ／ {{ totalPages }}</span>
 
-      <a @click="checkImg()" href="javascript:;" class="main-btn">
+      <button @click="checkImg()" class="main-btn">
         {{ t("next_step") }}
-      </a>
+      </button>
 
       <div v-if="alertShow" class="alert-item">
         <v-alert border="top" type="warning" variant="outlined" class="mt-5">
@@ -272,19 +272,4 @@ function handleBgImg(race) {
     min-height: 100vh;
   }
 }
-
-.alert-item {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  .v-alert {
-    background-color: var(--sub-color);
-  }
-
-  .text-warning {
-    color: var(--main-color) !important;
-  }
-}
 </style>

src/views/Step_4.vue

@@ -178,7 +178,7 @@ let parameterList = ref([]);
 //     description: "keelung_heping_island_park_description",
 //   },
 //   {
-//     bg_img: "台中日月潭.png",
+//     bg_img: "南投日月潭.png",
 //     title: "taichung_sun_moon_lake",
 //     description: "taichung_sun_moon_lake_description",
 //   },

src/views/Step_4_backup.vue

@@ -107,7 +107,7 @@ let parameter = ref([
     description: "keelung_heping_island_park_description",
   },
   {
-    bg_img: "台中日月潭.png",
+    bg_img: "南投日月潭.png",
     title: "taichung_sun_moon_lake",
     description: "taichung_sun_moon_lake_description",
   },

src/views/Step_7.vue

@@ -16,6 +16,7 @@ const shareData = {
 };
 
 console.log("shareData", shareData);
+console.log("store.assignBgImgTitle", store.assignBgImgTitle);
 
 const imageUrl = ref("");
 
@@ -97,10 +98,50 @@ async function share() {
         class="text-start px-5 description"
         v-html="t(store.assignBgImg.description)"
       ></p> -->
+
       <!-- <button @click="share()" class="main-btn mt-15">分享相片</button> -->
+
       <button @click="downloadImage(store.imgPath)" class="main-btn mt-15">
         {{ t("save_photo") }}
       </button>
+
+      <v-dialog v-if="store.assignBgImgTitle === '南投日月潭'" max-width="300">
+        <template v-slot:activator="{ props: activatorProps }">
+          <button v-bind="activatorProps" class="main-btn mt-7">
+            {{ t("ticket_purchase") }}
+          </button>
+        </template>
+
+        <template v-slot:default="{ isActive }">
+          <v-card class="pa-2">
+            <v-card-title class="pa-5">
+              {{ t("purchase_link") }}
+            </v-card-title>
+
+            <v-card-text>
+              <a
+                href="https://nantou.welcometw.com/tour/kwOz"
+                target="_blank"
+                class="d-block mb-5"
+              >
+                1.【日月潭C好行款】<br />
+                <small>南投日月潭來回車票(電子票證)+船+纜車+遊湖巴士</small>
+              </a>
+
+              <a href="https://nantou.welcometw.com/tour/KNez" target="_blank">
+                2.【日月潭D暢遊款】<br />
+                <small>南投日月潭來回車票(電子票證)+船+九族+遊湖巴士</small>
+              </a>
+            </v-card-text>
+
+            <v-card-actions>
+              <v-spacer></v-spacer>
+
+              <v-btn text="Close" @click="isActive.value = false"></v-btn>
+            </v-card-actions>
+          </v-card>
+        </template>
+      </v-dialog>
     </v-container>
     <Footer url="/step6" />
   </div>
@@ -129,4 +170,13 @@ async function share() {
     }
   }
 }
+
+.v-card-title {
+  letter-spacing: 1px;
+}
+
+a {
+  color: var(--main-color);
+  text-decoration: none;
+}
 </style>