update

src/language/en.json

@@ -3,6 +3,11 @@
   "next_step": "Next Step",
   "back_homepage": "Back to the Homepage",
   "confirm": "Confirm",
+  "save_photo": "Save Photo",
+  "male": "Male",
+  "female": "Female",
+  "select_gender": "Please select your gender",
+  "select_person": "Please select a person",
 
   "postcard": {
     "step1": {

src/language/ja.json

@@ -3,6 +3,11 @@
   "next_step": "続く",
   "back_homepage": "トップページへ戻る",
   "confirm": "決定",
+  "save_photo": "写真を保存",
+  "male": "男性",
+  "female": "女性",
+  "select_gender": "性別を選択してください",
+  "select_person": "人物を選択してください",
 
   "postcard": {
     "step1": {

src/language/ko.json

@@ -3,6 +3,11 @@
   "next_step": "下一步",
   "back_homepage": "回到首頁",
   "confirm": "確定",
+  "save_photo": "儲存相片",
+  "male": "男性",
+  "female": "女性",
+  "select_gender": "請選擇性別",
+  "select_person": "請選擇人物",
 
   "postcard": {
     "step1": {

src/language/zh.json

@@ -3,6 +3,11 @@
   "next_step": "下一步",
   "back_homepage": "回到首頁",
   "confirm": "確定",
+  "save_photo": "儲存相片",
+  "male": "男性",
+  "female": "女性",
+  "select_gender": "請選擇性別",
+  "select_person": "請選擇人物",
 
   "postcard": {
     "step1": {

src/stores/store.js

@@ -6,8 +6,9 @@ export const useMainStore = defineStore('mainStore', {
         imgPath: "",
         assignGender: "", // 性別
         assignRace: "", // 種族
-        assignBgImg: "", // 背景
-        assignBgImgUrl: "", // 背景
+        assignBgImg: "", // 背景圖片檔名
+        assignBgImgUrl: "", // 背景圖片網址
+        assignBgImgTitle: "", // 背景圖片名稱
     }),
     getters: {
     },

src/views/Skylantern.vue

@@ -13,7 +13,7 @@ const { t, locale } = useI18n();
       {{ t("skylantern.home.text_3") }}
     </h3>
 
-    <p>
+    <p class="px-5">
       {{ t("skylantern.home.text_4") }} <br />
       {{ t("skylantern.home.text_5") }}
     </p>

src/views/SkylanternStep_2.vue

@@ -30,6 +30,24 @@ function getValue(state) {
       console.log(error);
     });
 }
+
+const blessArray = [
+  "福如東海 壽比南山",
+  "年年有餘 歲歲平安",
+  "花開富貴 竹報平安",
+  "金玉滿堂 喜氣洋洋",
+  "財源廣進 運籌帷幄",
+  "吉祥如意 心想事成",
+  "開門大吉 大展鴻圖",
+  "四季平安 五福臨門",
+  "萬事如意 幸福美滿",
+  "平安喜樂 福壽安康",
+];
+
+function assignBless(val) {
+  inputValue.value = val;
+  getValue(true);
+}
 </script>
 
 <template>
@@ -60,12 +78,32 @@ function getValue(state) {
     </div>
 
     <h3 class="title">{{ t("skylantern.step2.text_1") }}</h3>
-    <input v-model="inputValue" type="text" />
+
+    <v-menu max-height="200" location="bottom" transition="slide-y-transition">
+      <template v-slot:activator="{ props }">
+        <v-btn color="primary" v-bind="props" append-icon="mdi-menu-down">
+          {{ inputValue !== "" ? inputValue : "請選擇祝福" }}
+        </v-btn>
+      </template>
+      <v-list>
+        <v-list-item
+          v-for="(item, index) in blessArray"
+          :key="item"
+          :value="item"
+        >
+          <v-list-item-title @click="assignBless(item)">{{
+            item
+          }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+
+    <!-- <input v-model="inputValue" class="mt-10" type="text" readonly /> -->
 
     <div class="d-flex flex-column align-center my-15">
-      <button @click="getValue(true)" class="main-btn mb-5">
+      <!-- <button @click="getValue(true)" class="main-btn mb-5">
         {{ t("skylantern.step2.text_2") }}
-      </button>
+      </button> -->
       <button @click="getValue(false)" class="main-btn mb-5">
         {{ t("skylantern.step2.text_3") }}
       </button>
@@ -77,8 +115,8 @@ function getValue(state) {
 
 <style lang="scss" scoped>
 .lartern-content {
-  height: 100%;
-  padding-top: 8rem;
+  // height: 100%;
+  padding-top: 6rem;
 
   input {
     padding: 10px;

src/views/Step_2.vue

@@ -12,13 +12,11 @@ const store = useMainStore();
 
 let genderList = reactive([
   {
-    text: "男",
-    value: "man",
+    value: "male",
     icon: "mdi-gender-male",
   },
   {
-    text: "女",
-    value: "woman",
+    value: "female",
     icon: "mdi-gender-female",
   },
 ]);
@@ -32,7 +30,7 @@ function setGender(value) {
 <template>
   <div class="content">
     <div class="gender-btn">
-      <p class="mb-10">請選擇性別</p>
+      <p class="mb-10">{{ t("select_gender") }}</p>
 
       <button
         v-for="item in genderList"
@@ -40,7 +38,7 @@ function setGender(value) {
         :class="{ assign: store.assignGender === item.value }"
       >
         <v-icon :icon="item.icon" color="white"></v-icon>
-        <p>{{ item.text }}</p>
+        <p>{{ t(item.value) }}</p>
       </button>
     </div>
 
@@ -94,7 +92,7 @@ span {
 
     &.assign {
       border: 3px solid white;
-      background-color: #AE774F;
+      background-color: #ae774f;
     }
   }
 }

src/views/Step_3.vue

@@ -120,7 +120,7 @@ function handleBgImg(race) {
 
 <template>
   <div class="content">
-    <p class="title">請選擇人種</p>
+    <p class="title">{{ t("select_person") }}</p>
 
     <div
       v-if="imgLoading"

src/views/Step_4.vue

@@ -20,6 +20,12 @@ let gender = store.assignGender; // 性別
 let imgLoading = ref(false);
 let parameter = ref([]);
 
+onMounted(() => {
+  getLandmark();
+  getTargetImageList();
+  // getParameters();
+});
+
 // 取得背景清單
 async function getTargetImageList() {
   imgLoading.value = true;
@@ -28,7 +34,7 @@ async function getTargetImageList() {
 
   try {
     let response = await axios.get(url);
-    console.log("response", response);
+    console.log("取得背景清單", response);
 
     let imagePromises = response.data.map((item, index) => {
       let imageUrl = `http://172.104.93.163:3219/fs/target-image/${gender}/${race}/${item}`;
@@ -38,12 +44,43 @@ async function getTargetImageList() {
     await Promise.all(imagePromises);
     console.log("全部完成");
 
+    // 依照檔名進行排序 (0-9)
+    parameter.value.sort((a, b) => {
+      const aNum = parseInt(a.name);
+      const bNum = parseInt(b.name);
+      return aNum - bNum;
+    });
+
+    // 組合陣列
+    parameter.value = parameter.value.map((item, index) => ({
+      imgUrl: item.imgUrl,
+      name: `${index}.jpg`,
+      title: landmarkNames.value[index],
+    }));
+    console.log("items >>>", parameter.value);
+
     imgLoading.value = false;
   } catch (error) {
     console.log("error", error);
   }
 }
 
+const landmarkNames = ref([]);
+
+// 取得景點名稱
+async function getLandmark() {
+  let url = "http://172.104.93.163:3219/fslandmark-order";
+
+  try {
+    let response = await axios.get(url);
+    landmarkNames.value = response.data;
+
+    console.log("getLandmark", landmarkNames.value);
+  } catch (error) {
+    console.log("error", error);
+  }
+}
+
 // 取得背景圖片
 async function getTargetImage(url, index) {
   try {
@@ -64,24 +101,11 @@ function handleBgImg(item) {
   console.log("item", item);
   store.assignBgImg = item.name;
   store.assignBgImgUrl = item.imgUrl;
+  store.assignBgImgTitle = item.title;
   console.log("store.assignBgImg", store.assignBgImg);
   console.log("store.assignBgImgUrl", store.assignBgImgUrl);
-
-  // assignBgImg.value = item;
-  // store.assignBgImg = item;
-  // parameterList.value.filter((e, index) => {
-  //   if (e.bg_img === item.bg_img) {
-  //     store.styleNum = index;
-  //   }
-  // });
-  // console.log("store.styleNum", store.styleNum);
 }
 
-onMounted(() => {
-  getTargetImageList();
-  getParameters();
-});
-
 const currentPhotos = computed(() => {
   const start = currentIndex.value;
   const end = start + perPage.value;
@@ -321,8 +345,6 @@ function checkImg() {
           </template>
         </v-img> -->
 
-        <!-- <p>{{ t(item.title) }}</p> -->
-
         <v-img cover class="cover" :lazy-src="item.imgUrl" :src="item.imgUrl">
           <template v-slot:placeholder>
             <div class="d-flex align-center justify-center fill-height">
@@ -334,6 +356,8 @@ function checkImg() {
           </template>
         </v-img>
 
+        <p>{{ item.title }}</p>
+
         <img
           v-if="item.name === store.assignBgImg"
           class="icon active"

src/views/Step_5.vue

@@ -32,6 +32,8 @@ console.log("step5 store.assignBgImgUrl", store.assignBgImgUrl);
           </template>
         </v-img>
 
+        <p>{{ store.assignBgImgTitle }}</p>
+
         <!-- <v-img
           max-width="500"
           cover
@@ -48,7 +50,7 @@ console.log("step5 store.assignBgImgUrl", store.assignBgImgUrl);
             </div>
           </template>
         </v-img> -->
-
+      
         <!-- <p>{{ t(store.assignBgImg.title) }}</p> -->
 
         <!-- <p

src/views/Step_7.vue

@@ -88,6 +88,8 @@ async function share() {
           :src="store.imgPath"
           alt=""
         />
+
+        <p>{{ store.assignBgImgTitle }}</p>
         <!-- <p>{{ t(store.assignBgImg.title) }}</p> -->
       </div>
 
@@ -97,7 +99,7 @@ async function share() {
       ></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-container>
     <Footer url="/step6" />