update

src/views/HomeView.vue

@@ -294,7 +294,9 @@ async function sendMessage(type = "") {
               item.type === "lost_property" ||
               item.type === "complain"
             ) {
+              contactFormType.value = item.type;
               labelContent = "contact-form";
+              console.log("contactFormType", contactFormType.value);
             }
           });
 
@@ -2442,10 +2444,11 @@ function handleVoice(state) {
 }
 
 // 失物招領表單
-let lostForm = ref(null);
-let lostDialog = ref(false);
+let contactForm = ref(null);
+let contactDialog = ref(false);
 
-const lostFormData = ref({
+const contactFormData = ref({
+  type: null,
   title: "",
   content: "",
   client_name: "",
@@ -2454,27 +2457,49 @@ const lostFormData = ref({
   phone: "",
 });
 
+watch(contactDialog, (val) => {
+  // 表單欄位清空
+  Object.keys(contactFormData.value).forEach((key) => {
+    if (key === "type") {
+      contactFormData.value[key] = null; // type 設為 null
+    } else {
+      contactFormData.value[key] = ""; // 其他屬性設為空字串
+    }
+  });
+});
+
+let contactFormType = ref(""); // 聯絡表單類別 (lost_property or complain)
+let lostOptions = ref(["購物中心", "顧客服務", "遺失物查詢"]); // 遺失物類別選單
+let complaintOptions = ref(["購物中心", "顧客意見反映", "服務建議"]); // 客訴類別選單
+
 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 submitContactForm = async () => {
+  console.log("contactForm.value", contactForm.value);
   // 驗證表單
-  const validationResult = await lostForm.value[0].validate();
+  const validationResult = await contactForm.value.validate();
   console.log("validationResult", validationResult.valid);
 
   if (validationResult.valid) {
-    let url = "https://cmm.ai:9101/insert_table?type=lost_property";
+    let url = "https://cmm.ai:9101/insert_table";
 
     try {
-      const response = await axios.post(url, lostFormData.value);
+      const response = await axios.post(url, contactFormData.value);
       console.log("表單 response", response);
 
       if (response.data.state === 200) {
-        alert(response.data.message);
-        lostDialog.value = false;
+        // alert(response.data.message);
+        contactDialog.value = false;
+
+        messages.value.push({
+          label: "text",
+          author: "ai",
+          body: "表單已成功送出！",
+        });
       }
     } catch (error) {
       console.log("error", error);
@@ -3281,9 +3306,16 @@ const submitLostForm = async () => {
             </section>
           </div>
 
-          <!-- 聯絡我們 -->
+          <!-- 聯絡表單 -->
           <div v-else-if="message.label === 'contact-form'">
-            <v-dialog v-model="lostDialog" max-width="600">
+            <v-btn
+              @click="contactDialog = true"
+              text="填寫表單"
+              color="primary"
+              class="mt-5"
+            ></v-btn>
+
+            <!-- <v-dialog v-model="contactDialog" max-width="600">
               <template v-slot:activator="{ props: activatorProps }">
                 <v-btn
                   text="填寫表單"
@@ -3297,9 +3329,9 @@ const submitLostForm = async () => {
                 <v-card-title class="mt-3 ms-3"> 聯絡我們 </v-card-title>
 
                 <v-form
-                  ref="lostForm"
+                  ref="contactForm"
                   lazy-validation
-                  @submit.prevent="submitLostForm"
+                  @submit.prevent="submitContactForm"
                 >
                   <v-card-text>
                     <p class="mb-5">
@@ -3307,15 +3339,28 @@ const submitLostForm = async () => {
                       (國際電話+886 2 8101-8800)，將有專人協助您；<br />
                       或於下方填寫聯絡資料及留言，我們將盡快為您處理。
                     </p>
+
+                    <v-select
+                      v-model="contactFormData.type"
+                      label="問題類別"
+                      :items="
+                        contactFormType === 'lost_property'
+                          ? lostOptions
+                          : complaintOptions
+                      "
+                      :rules="[requiredRule]"
+                      required
+                    ></v-select>
+
                     <v-text-field
-                      v-model="lostFormData.title"
+                      v-model="contactFormData.title"
                       :rules="[requiredRule]"
                       label="標題 *"
                       required
                     ></v-text-field>
 
                     <v-text-field
-                      v-model="lostFormData.content"
+                      v-model="contactFormData.content"
                       :rules="[requiredRule]"
                       label="內容 *"
                       required
@@ -3323,28 +3368,28 @@ const submitLostForm = async () => {
                     ></v-text-field>
 
                     <v-text-field
-                      v-model="lostFormData.client_name"
+                      v-model="contactFormData.client_name"
                       :rules="[requiredRule]"
                       label="姓名 *"
                       required
                     ></v-text-field>
 
                     <v-text-field
-                      v-model="lostFormData.gender"
+                      v-model="contactFormData.gender"
                       :rules="[requiredRule]"
                       label="性別 *"
                       required
                     ></v-text-field>
 
                     <v-text-field
-                      v-model="lostFormData.email"
+                      v-model="contactFormData.email"
                       :rules="[requiredRule, emailRule]"
                       label="電子郵件 *"
                       required
                     ></v-text-field>
 
                     <v-text-field
-                      v-model="lostFormData.phone"
+                      v-model="contactFormData.phone"
                       :rules="[requiredRule]"
                       label="聯絡電話 *"
                       required
@@ -3412,7 +3457,7 @@ const submitLostForm = async () => {
                     <v-btn
                       text="取消"
                       variant="plain"
-                      @click="lostDialog = false"
+                      @click="contactDialog = false"
                     ></v-btn>
 
                     <v-btn
@@ -3422,17 +3467,10 @@ const submitLostForm = async () => {
                       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>
+            </v-dialog> -->
           </div>
         </div>
 
@@ -3852,6 +3890,172 @@ const submitLostForm = async () => {
     </div>
   </v-dialog>
 
+  <!-- 聯絡表單 -->
+  <v-dialog v-if="contactDialog" v-model="contactDialog" 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="contactForm"
+        lazy-validation
+        @submit.prevent="submitContactForm"
+      >
+        <v-card-text>
+          <p class="mb-5">
+            為加快為您服務或有其他問題，您可撥打客服電話：02-8101-8800<br />
+            (國際電話+886 2 8101-8800)，將有專人協助您；<br />
+            或於下方填寫聯絡資料及留言，我們將盡快為您處理。
+          </p>
+
+          <v-select
+            v-model="contactFormData.type"
+            label="問題類別 *"
+            :items="
+              contactFormType === 'lost_property'
+                ? lostOptions
+                : complaintOptions
+            "
+            :rules="[requiredRule]"
+            required
+          ></v-select>
+
+          <v-text-field
+            v-model="contactFormData.title"
+            :rules="[requiredRule]"
+            label="標題 *"
+            required
+          ></v-text-field>
+
+          <v-text-field
+            v-model="contactFormData.content"
+            :rules="[requiredRule]"
+            label="內容 *"
+            required
+            placeholder="請詳述說明，我們將盡快回覆您，您最多可輸入 1,000 字元"
+          ></v-text-field>
+
+          <v-text-field
+            v-model="contactFormData.client_name"
+            :rules="[requiredRule]"
+            label="姓名 *"
+            required
+          ></v-text-field>
+
+          <v-select
+            v-model="contactFormData.gender"
+            label="性別 *"
+            :items="['女性', '男性', '不願透露']"
+            :rules="[requiredRule]"
+            required
+          ></v-select>
+
+          <!-- <v-text-field
+            v-model="contactFormData.gender"
+            :rules="[requiredRule]"
+            label="性別 *"
+            required
+          ></v-text-field> -->
+
+          <v-text-field
+            v-model="contactFormData.email"
+            :rules="[requiredRule, emailRule]"
+            label="電子郵件 *"
+            required
+          ></v-text-field>
+
+          <v-text-field
+            v-model="contactFormData.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="contactDialog = 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
     v-show="showAd"
     v-for="(item, index) in ad"