update

.env.development

@@ -1,2 +1,2 @@
-VITE_API_URL=http://192.168.192.38:8000
+VITE_API_URL=http://172.104.93.163:3219
 VITE_API_IMG_URL=http://localhost:5176/src

.env.production

@@ -1,2 +1,2 @@
-VITE_API_URL=http://192.168.192.38:8000
-VITE_API_IMG_URL=http://192.168.192.38:8000/static
+VITE_API_URL=http://172.104.93.163:3219
+VITE_API_IMG_URL=http://172.104.93.163:3219/static

src/App.vue

@@ -1,10 +1,20 @@
 <script setup>
+import { onMounted } from "vue";
 import { RouterLink, RouterView } from "vue-router";
+
+onMounted(() => {
+  const url = window.location.href;
+  // 動態切換 Title
+  if (url.includes("interact")) {
+    document.title = "AI 天燈";
+  } else {
+    document.title = "AI 明信片";
+  }
+});
 </script>
 
 <template>
   <RouterView />
 </template>
 
-<style>
-</style>
+<style></style>

src/router/index.js

@@ -6,11 +6,12 @@ import Step_2 from "../views/Step_2.vue";
 import Step_3 from "../views/Step_3.vue";
 import Step_4 from "../views/Step_4.vue";
 import Step_5 from "../views/Step_5.vue";
- // 天燈
- import Interact from '../views/Interact.vue'
- import InteractStep_1 from '../views/InteractStep_1.vue'
- import InteractStep_2 from '../views/InteractStep_2.vue'
- import InteractHome from '../views/InteractHome.vue'
+// 天燈
+import Interact from '../views/Interact.vue'
+import InteractHome from '../views/InteractHome.vue'
+import InteractStep_1 from '../views/InteractStep_1.vue'
+import InteractStep_2 from '../views/InteractStep_2.vue'
+import InteractStep_3 from '../views/InteractStep_3.vue'
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -50,6 +51,11 @@ const router = createRouter({
           name: 'Interact',
           component: Interact
         },
+        {
+          path: '/interacthome',
+          name: 'Interact_home',
+          component: InteractHome
+        },
         {
           path: '/interact_step1',
           name: 'Interact_step1',
@@ -61,10 +67,10 @@ const router = createRouter({
           component: InteractStep_2
         },
         {
-          path: '/interacthome',
-          name: 'Interact_home',
-          component: InteractHome
-        }
+          path: '/interact_step3',
+          name: 'Interact_step3',
+          component: InteractStep_3
+        },
       ],
     },
   ]

src/views/HomeView.vue

@@ -72,6 +72,7 @@ p {
   padding-top: 4rem;
   margin-bottom: 2rem;
   font-size: 1.625rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 
   @media (max-width: 600px) {
     padding-top: 2rem;
@@ -91,7 +92,7 @@ p {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 85% 50%;
-  
+
   p {
     line-height: 1.7;
     letter-spacing: 2px;

src/views/InteractStep_1.vue

@@ -37,12 +37,13 @@ import Footer from "../components/Footer.vue";
 
 <style lang="scss" scoped>
 .lartern-content {
-  height: 100%;
+  height: 100vh;
   padding: 4rem 10vw 0;
   background-image: url("@/assets/img/background.webp");
 
   @media (max-width: 600px) {
-    padding: 7rem 1rem 0;
+    height: 100%;
+    padding: 9rem 1rem 0;
   }
 
   h3 {

src/views/InteractStep_2.vue

@@ -19,7 +19,8 @@ function getValue(state) {
       if (state) {
         skyImageUrl.value = response.data.url;
       } else {
-        window.location = "https://cmm.ai/skylantern/";
+        router.push("/interact_step3");
+        // window.location = "https://cmm.ai/skylantern/";
       }
     })
     .catch((error) => {
@@ -43,7 +44,7 @@ function getValue(state) {
 
       <img
         v-else-if="skyImageUrl === ''"
-        src="/src/assets/img/skylentern.png"
+        src="/src/assets/img/skylentern.webp"
         alt=""
         class="skyLarten"
       />

src/views/InteractStep_3.vue

@@ -0,0 +1,20 @@
+<script setup>
+import Footer from "../components/Footer.vue";
+</script>
+
+<template>
+  <div class="lartern-content">
+    <h3 class="title">送出成功！</h3>
+
+    <img width="100" src="../assets/img/confirm.png" alt="" />
+
+    <p class="mt-5 px-5">
+      已經收到您的天燈 <br />
+      天燈將於整點在 101 五樓觀景台售票處旁的環景螢幕進行播放，敬請期待。
+    </p>
+  </div>
+
+  <Footer url="/interact_step2" back="/interacthome" />
+</template>
+
+<style lang="scss" scoped></style>

src/views/Step_3.vue

@@ -222,7 +222,7 @@ function checkImg() {
       >
         <img
           class="cover"
-          :src="`http://192.168.192.38:8000/static/assets/img/bg/${item.bg_img}`"
+          :src="`http://172.104.93.163:3219/static/assets/img/bg/${item.bg_img}`"
           alt=""
         />
         <!-- {{ bg_img }} -->

src/views/Step_4.vue

@@ -71,7 +71,15 @@ async function upload() {
 <template>
   <div class="content main-bg">
     <v-container class="px-5 px-sm-15">
-      <div v-if="imgLoading" class="d-flex justify-center">
+      <div
+        v-if="imgLoading"
+        class="d-flex flex-column align-center justify-center"
+      >
+        <p class="mb-15">
+          明信片製作中… <br />
+          請稍等約 30 秒
+        </p>
+
         <v-progress-circular
           :size="70"
           :width="7"

src/views/Step_5.vue

@@ -3,14 +3,37 @@ import { useMainStore } from "@/stores/store";
 import Footer from "../components/Footer.vue";
 
 const store = useMainStore();
-const apiUrl = import.meta.env.VITE_API_URL;
-const imgUrl = import.meta.env.VITE_API_IMG_URL;
+// const apiUrl = import.meta.env.VITE_API_URL;
+// const imgUrl = import.meta.env.VITE_API_IMG_URL;
+
+const shareData = {
+  title: "101 AI明信片",
+  text: "",
+  url: store.imgPath,
+};
+
+let resultMessage = "";
+
+const share = async () => {
+  try {
+    await navigator.share(shareData);
+    resultMessage = "MDN shared successfully";
+  } catch (err) {
+    resultMessage = `Error: ${err}`;
+  }
+};
 </script>
 
 <template>
   <div class="content main-bg">
-    <v-container class="px-5 px-sm-15">
-      <img class="w-100" :src="store.imgPath" alt="" />
+    <v-container class="px-5 px-sm-15 d-flex flex-column align-center">
+      <img class="w-100 mb-15" :src="store.imgPath" alt="" />
+
+      <!-- <p class="text-start mt-5 px-5">
+        位在南部橫貫公路、向陽北方，直線約7公里的高山湖泊嘉明湖，是一座被譽為「高山藍寶石」、「天使的眼淚」的橢圓形湖泊。由翠綠的森林植被所環繞，清澈的湖面映照著天空的湛藍，深不可測，彷若人間仙境般的靜謐。傳說中嘉明湖的形成，是因隕石撞擊地球表面後造成的隕石坑，相當罕見。
+      </p> -->
+
+      <button @click="share()" class="main-btn mt-15">分享相片</button>
     </v-container>
     <Footer url="/step3" />
   </div>
@@ -18,11 +41,16 @@ const imgUrl = import.meta.env.VITE_API_IMG_URL;
 
 <style lang="scss" scoped>
 .content {
-  padding: 0;
+  padding: 11rem 0 8rem;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
+  p {
+    color: #b3b3b4;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+  }
 }
 </style>