update

src/components/Chat.vue

@@ -1921,7 +1921,7 @@ function handleShoppingDialog(value) {
     messages.value.push({
       label: "text",
       author: "ai",
-      body: "請選擇品牌類別",
+      body: t("shopping_discounts_info.brands.choose"),
     });
 
     messages.value.push({
@@ -2175,7 +2175,7 @@ async function handleAudioToText() {
         messages.value.push({
           label: "text",
           author: "user",
-          body: "語音辨識有誤，請重新錄製。",
+          body: t("speech_error"),
         });
       }
     }
@@ -3050,7 +3050,10 @@ let dialog = ref(false);
                     <div class="price-info">
                       <span>{{ item.info.floor || item.info.price }}</span>
                       <div class="link-btn">
-                        <a :href="item.info.url || item.info.website_url" target="_blank">
+                        <a
+                          :href="item.info.url || item.info.website_url"
+                          target="_blank"
+                        >
                           {{ t("ctaGoUrl") }}
                         </a>
                       </div>
@@ -3458,7 +3461,12 @@ let dialog = ref(false);
           v-html="t('system_construction')"
         ></p>
         <!-- <p v-if="!isRecording" class="mb-3">點選以進行錄音</p> -->
-        <p v-else class="mb-3">錄音中：{{ recordTime }} 秒</p>
+        <span v-else>
+          <p class="text-center">
+            {{ t("recording") }}：{{ recordTime }} {{ t("second") }}
+          </p>
+          <p class="text-center mb-3" v-html="t('stop_recording')"></p>
+        </span>
 
         <!-- <v-btn
           v-if="!isRecording"

src/language/en.json

@@ -21,6 +21,10 @@
   "system_construction": "The system is under construction. <br> The voice input function is disabled.",
   "tap_to_record": "Tap to record",
   "close": "Close",
+  "recording": "Recording",
+  "second": "second",
+  "stop_recording": "After the conversation is complete,<br>please press the stop button to end the recording.",
+  "speech_error": "Speech recognition error. Please re-record.",
   "service_info": {
     "title": "Service information",
     "inquiry_prompt": "What are you searching for?<br>Or please enter your question",

src/language/ja.json

@@ -21,6 +21,10 @@
   "system_construction": "系統建置中，<br />關閉語音輸入功能。",
   "tap_to_record": "點選以進行錄音",
   "close": "關閉",
+  "recording": "錄音中",
+  "second": "秒",
+  "stop_recording": "對話完畢後，請按下停止按鈕結束錄音",
+  "speech_error": "語音辨識有誤，請重新錄製。",
   "service_info": {
     "title": "サービス情報",
     "inquiry_prompt": "サービス情報を選択<br>下のメッセージボックスにご質問を入力してください。",

src/language/ko.json

@@ -21,6 +21,10 @@
   "system_construction": "系統建置中，<br />關閉語音輸入功能。",
   "tap_to_record": "點選以進行錄音",
   "close": "關閉",
+  "recording": "錄音中",
+  "second": "秒",
+  "stop_recording": "對話完畢後，請按下停止按鈕結束錄音",
+  "speech_error": "語音辨識有誤，請重新錄製。",
   "service_info": {
     "title": "服務資訊",
     "inquiry_prompt": "請問您想查詢？",

src/language/zh.json

@@ -21,6 +21,10 @@
   "system_construction": "系統建置中，<br>關閉語音輸入功能。",
   "tap_to_record": "點選以進行錄音",
   "close": "關閉",
+  "recording": "錄音中",
+  "second": "秒",
+  "stop_recording": "對話完畢後，請按下停止按鈕結束錄音",
+  "speech_error": "語音辨識有誤，請重新錄製。",
   "service_info": {
     "title": "服務資訊",
     "inquiry_prompt": "請問您想查詢？<br>或於下方文字框輸入您的問題",

src/views/HomeView.vue

@@ -237,6 +237,8 @@ async function sendMessage(type = "") {
               console.log("品牌");
               info.ticketList.push(item);
               labelContent = "brand";
+            } else if (item.type === "lost_property" || item.type === "complain") {
+              labelContent = "contact-form";
             }
           });
 
@@ -244,11 +246,19 @@ async function sendMessage(type = "") {
           console.log("labelContent", labelContent);
 
           setTimeout(() => {
-            messages.value.push({
-              label: labelContent,
-              author: "ai",
-              body: info,
-            });
+            if (labelContent !== "contact-form") {
+              messages.value.push({
+                label: labelContent,
+                author: "ai",
+                body: info,
+              });
+            } else {
+              messages.value.push({
+                label: "contact-form",
+                author: "ai",
+                body: "",
+              });
+            }
           }, 10);
         }
       })
@@ -1950,7 +1960,7 @@ function handleShoppingDialog(value) {
     messages.value.push({
       label: "text",
       author: "ai",
-      body: "請選擇品牌類別",
+      body: t("shopping_discounts_info.brands.choose"),
     });
 
     messages.value.push({
@@ -1962,7 +1972,7 @@ function handleShoppingDialog(value) {
     messages.value.push({
       label: "text",
       author: "user",
-      body: "國際貴賓卡專屬禮遇",
+      body: t("shopping_discounts_info.tourist_card.title"),
     });
 
     messages.value.push({
@@ -2374,6 +2384,47 @@ function handleVoice(state) {
     }
   }
 }
+
+// 失物招領表單
+let lostForm = ref(null);
+let lostDialog = ref(false);
+
+const lostFormData = ref({
+  title: "",
+  content: "",
+  client_name: "",
+  gender: "",
+  email: "",
+  phone: "",
+});
+
+const requiredRule = (value) => !!value || "此欄位為必填";
+const emailRule = (value) =>
+  /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value) ||
+  "請輸入有效的電子郵件地址";
+
+// 寄送表單
+const submitLostForm = async () => {
+  // 驗證表單
+  const validationResult = await lostForm.value[0].validate();
+  console.log("validationResult", validationResult.valid);
+
+  if (validationResult.valid) {
+    let url = "https://cmm.ai:9101/insert_table?type=lost_property";
+
+    try {
+      const response = await axios.post(url, lostFormData.value);
+      console.log("表單 response", response);
+
+      if (response.data.state === 200) {
+        alert(response.data.message);
+        lostDialog.value = false;
+      }
+    } catch (error) {
+      console.log("error", error);
+    }
+  }
+};
 </script>
 
 <template>
@@ -2990,7 +3041,10 @@ function handleVoice(state) {
                     <div class="price-info">
                       <span>{{ item.info.floor || item.info.price }}</span>
                       <div class="link-btn">
-                        <a :href="item.info.url || item.info.website_url" target="_blank">
+                        <a
+                          :href="item.info.url || item.info.website_url"
+                          target="_blank"
+                        >
                           {{ t("ctaGoUrl") }}
                         </a>
                       </div>
@@ -3160,6 +3214,160 @@ function handleVoice(state) {
               <span class="price-item">{{ message.body.price }}</span>
             </section>
           </div>
+
+          <!-- 聯絡我們 -->
+          <div v-else-if="message.label === 'contact-form'">
+            <v-dialog v-model="lostDialog" max-width="600">
+              <template v-slot:activator="{ props: activatorProps }">
+                <v-btn
+                  text="填寫表單"
+                  color="primary"
+                  class="mt-5"
+                  v-bind="activatorProps"
+                ></v-btn>
+              </template>
+
+              <v-card class="lost-item">
+                <v-card-title class="mt-3 ms-3"> 聯絡我們 </v-card-title>
+
+                <v-form
+                  ref="lostForm"
+                  lazy-validation
+                  @submit.prevent="submitLostForm"
+                >
+                  <v-card-text>
+                    <p class="mb-5">
+                      為加快為您服務或有其他問題，您可撥打客服電話：02-8101-8800<br />
+                      (國際電話+886 2 8101-8800)，將有專人協助您；<br />
+                      或於下方填寫聯絡資料及留言，我們將盡快為您處理。
+                    </p>
+                    <v-text-field
+                      v-model="lostFormData.title"
+                      :rules="[requiredRule]"
+                      label="標題 *"
+                      required
+                    ></v-text-field>
+
+                    <v-text-field
+                      v-model="lostFormData.content"
+                      :rules="[requiredRule]"
+                      label="內容 *"
+                      required
+                      placeholder="請詳述說明，我們將盡快回覆您，您最多可輸入 1,000 字元"
+                    ></v-text-field>
+
+                    <v-text-field
+                      v-model="lostFormData.client_name"
+                      :rules="[requiredRule]"
+                      label="姓名 *"
+                      required
+                    ></v-text-field>
+
+                    <v-text-field
+                      v-model="lostFormData.gender"
+                      :rules="[requiredRule]"
+                      label="性別 *"
+                      required
+                    ></v-text-field>
+
+                    <v-text-field
+                      v-model="lostFormData.email"
+                      :rules="[requiredRule, emailRule]"
+                      label="電子郵件 *"
+                      required
+                    ></v-text-field>
+
+                    <v-text-field
+                      v-model="lostFormData.phone"
+                      :rules="[requiredRule]"
+                      label="聯絡電話 *"
+                      required
+                    ></v-text-field>
+
+                    <section class="mt-5">
+                      <strong
+                        >台北 101個人資料蒐集、處理及利用告知事項：</strong
+                      >
+
+                      <p>
+                        台北金融大樓股份有限公司（即「台北101」）基於客戶服務及業務聯繫(特定目的代號090消費者、客戶管理與服務)及其他相關業務(181其他經營合於營業登記項目或組織章程所定之業務)，故有必要蒐集、處理或利用相關個人資料，請您詳閱。
+                      </p>
+
+                      <p>
+                        基於前項目的蒐集之資料包含姓名、聯絡方式、性別(個人資料類別代號C001、C011、C132)等實際蒐集之個人資料，台北101將依前項特定目的存續期間，辦理紙本及電子化資料保存，並以非全自動化方式進行資料處理，且僅於臺灣地區之台北101營業範圍內進行特定目的內利用，除有法令規定或主管機關要求，或為答覆您的詢問而需提供商品或服務之合作夥伴共同處理外，台北101不會將資料提供給其他第三方或跨國境進行處理或利用。
+                      </p>
+
+                      <p>
+                        依據不同法令適用規定，就台北101保有您的個人資料，您可行使下列權利：
+                      </p>
+
+                      <ol>
+                        <li>
+                          除有法令規定之例外情形外，得向台北101查詢、請求閱覽或請求製給複製本，惟台北101得依法令及實際狀況酌收必要成本費用。
+                        </li>
+                        <li>
+                          向台北101請求補充或更正您的個人資料，惟需應適當釋明其原因及事實。
+                        </li>
+                        <li>
+                          若台北101違反法令規定蒐集、處理或利用個人資料，得依法令規定向台北101請求停止繼續蒐集、處理或利用您的個人資料。
+                        </li>
+                        <li>
+                          若個人資料正確性有爭議者，得向台北101請求停止處理或利用您的個人資料，惟因執行業務所必須並註明其爭議或經您書面同意者，不在此限。
+                        </li>
+                        <li>
+                          依法令規定，個人資料蒐集之特定目的消失、期限屆滿、受法令拘束要求、您撤回同意、反對台北101繼續處理時，得向台北101請求刪除、停止處理或利用您的個人資料，惟因台北101因執行業務、履行雙方契約關係所必須、履行法定義務要求或經您書面同意者，不在此限。
+                        </li>
+                        <li>
+                          若您針對資料的正確性或處理方式提出疑義、反對台北101繼續處理、台北101非法處理、特定目的消失或保存期間屆滿時，台北101於進行法律訴訟、待完成法令適用釐清、查證等作業期間，仍需持續保存，您可要求台北101限制資料的處理；若台北101基於合法利益或公共利益處理您的個人資料，您亦有提出拒絕(異議)之權利。
+                        </li>
+                        <li>
+                          您可依法令適用之不同，將台北101基於履行契約、您同意處理或台北101以自動化方式處理的個人資料，並以您提供的資料為限，以機器可讀之格式，指定傳輸至其他機關(構)。
+                        </li>
+                        <li>
+                          若處理之依據為您明確表示同意之前提下進行蒐集、處理或利用，您可撤回您的同意，惟不影響您撤回同意前台北101處理個資之合法性。
+                        </li>
+                      </ol>
+
+                      <p>
+                        若您如欲行使上述各項法定權利、了解如何行使之方式，或有任何個人資料相關問題，得向台北101客服(電話：02-8101-8800；電子郵件：mallservice@tfc101.com.tw）詢問、於台北101官方網站【聯絡我們】提出詢問，或連繫台北101隱私保護官（EMAIL：dpo@tfc101.com.tw），隱私權及資訊安全政策請詳台北101網站。您另有向個人資料保護法之主管機關「個人資料保護委員會」申訴之權利。
+                      </p>
+
+                      <p>
+                        您可自由選擇是否提供相關個人資料及類別，惟您拒絕提供之個人資料及類別，如是辦理業務審核或作業所必需，或為成立雙方契約關係或法令要求之資料，台北101可能無法進行必要之業務審核或作業而無法提供您相關服務或無法提供較佳之服務，敬請見諒。（2024.06修訂）
+                      </p>
+                    </section>
+                  </v-card-text>
+
+                  <v-divider></v-divider>
+
+                  <v-card-actions class="py-5">
+                    <v-spacer></v-spacer>
+
+                    <v-btn
+                      text="取消"
+                      variant="plain"
+                      @click="lostDialog = false"
+                    ></v-btn>
+
+                    <v-btn
+                      type="submit"
+                      color="primary"
+                      text="確認送出"
+                      variant="tonal"
+                    >
+                    </v-btn>
+
+                    <!-- <v-btn
+                    color="primary"
+                    text="確認送出"
+                    variant="tonal"
+                    @click="dialog = false"
+                  ></v-btn> -->
+                  </v-card-actions>
+                </v-form>
+              </v-card>
+            </v-dialog>
+          </div>
         </div>
 
         <!-- 對話輸入框 -->
@@ -4087,6 +4295,28 @@ function handleVoice(state) {
   }
 }
 
+.lost-item {
+  p,
+  strong {
+    display: block;
+    margin-bottom: 1rem;
+    line-height: 1.7;
+  }
+
+  section {
+    font-size: 0.875rem;
+    color: #808080;
+
+    ol {
+      margin-left: 1.25rem;
+      li {
+        margin-bottom: 0.5rem;
+        line-height: 1.7;
+      }
+    }
+  }
+}
+
 .btn-options {
   // max-width: 85%;
   margin-top: 15px;