update YTViews

frontend/src/interfaces/index.ts

@@ -86,6 +86,7 @@ export interface YTViewsUserData {
   amount: number,
   email: string;
   name: string;
+  phone: string;
   company: string | null;
   url: string;
   area: string;

frontend/src/views/TestYTViews.vue

@@ -86,6 +86,7 @@ function activeBtn(view: string, param: number) {
 let userData = reactive({
   email: "",
   name: "",
+  phone: "",
   company: "",
   url: "",
   area: "",
@@ -107,6 +108,7 @@ const isSubmitDisabled = computed(() => {
   return (
     !userData.email ||
     !userData.name ||
+    !userData.phone ||
     !userData.url ||
     !userData.area ||
     !userData.language ||
@@ -136,10 +138,11 @@ async function ECPaySubmit() {
   }
 
   let data: YTViewsUserData = {
-    item: `YT0.4-(${assignView.value})`,
+    item: `YT 觀看數（${assignView.value} 次觀看）`,
     amount: assignPrice.value,
     email: userData.email,
     name: userData.name,
+    phone: userData.phone,
     company: userData.company,
     url: userData.url,
     area: userData.area,
@@ -274,6 +277,12 @@ async function ECPaySubmit() {
               label="姓名"
               required
             ></v-text-field>
+            <v-text-field
+              v-model="userData.phone"
+              :rules="[(v:any) => /^0\d{0,9}$/i.test(v) || '請輸入有效的電話號碼']"
+              label="電話號碼"
+              required
+            ></v-text-field>
             <v-text-field
               v-model="userData.company"
               label="公司 / 所屬產業"

frontend/src/views/YTViews.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, computed } from "vue";
+import { ref, reactive, computed, watch } from "vue";
 import { required, emailRules } from "@/utils";
 import { useMainStore } from "@/stores/main";
 import type { YTViewsUserData } from "@/interfaces";
@@ -91,6 +91,7 @@ function activeBtn(view: string, param: number) {
 let userData = reactive({
   email: "",
   name: "",
+  phone: "",
   company: "",
   url: "",
   area: "",
@@ -102,16 +103,35 @@ let userData = reactive({
 });
 
 // 其他選項
-let target = ref("");
-let theme = ref("");
+let target = ref([]);
+let theme = ref([]);
 let otherTarget = ref("");
 let otherTheme = ref("");
+let checkOtherTarget = ref("");
+let checkOtherTheme = ref("");
+
+watch(otherTarget, (newVal) => {
+  if (newVal !== "") {
+    checkOtherTarget.value = "其他";
+  } else {
+    checkOtherTarget.value = "";
+  }
+});
+
+watch(otherTheme, (newVal) => {
+  if (newVal !== "") {
+    checkOtherTheme.value = "其他";
+  } else {
+    checkOtherTheme.value = "";
+  }
+});
 
 // 檢查必填欄位
 const isSubmitDisabled = computed(() => {
   return (
     !userData.email ||
     !userData.name ||
+    !userData.phone ||
     !userData.url ||
     !userData.area ||
     !userData.language ||
@@ -128,16 +148,16 @@ async function ECPaySubmit() {
     chooseError.value = false;
   }
 
-  if (target.value === "其他" && otherTarget.value !== "") {
-    userData.target = otherTarget.value;
+  if (checkOtherTarget.value === "其他" && otherTarget.value !== "") {
+    userData.target = `${target.value.join("、")}、${otherTarget.value}`;
   } else {
-    userData.target = target.value;
+    userData.target = target.value.join("、");
   }
 
-  if (theme.value === "其他" && otherTheme.value !== "") {
-    userData.theme = otherTheme.value;
+  if (checkOtherTheme.value === "其他" && otherTheme.value !== "") {
+    userData.theme = `${theme.value.join("、")}、${otherTheme.value}`;
   } else {
-    userData.theme = theme.value;
+    userData.theme = theme.value.join("、");
   }
 
   let lang = ref("");
@@ -151,33 +171,36 @@ async function ECPaySubmit() {
   }
 
   let data: YTViewsUserData = {
-    item: `YT0.4-(${assignView.value})`,
-    amount: 5,
+    item: `YT觀看數（${assignView.value} 次觀看）`,
+    amount: assignPrice.value,
     email: userData.email,
     name: userData.name,
+    phone: userData.phone,
     company: userData.company,
     url: userData.url,
     area: userData.area,
     language: userData.language,
-    ages: userData.ages.join(","),
+    ages: userData.ages.join("、"),
     target: userData.target,
     theme: userData.theme,
     taxID: userData.taxID,
   };
 
-  const originalHTML = await mainStore.YTViewsPayment(data, lang.value);
-  let formHTML = originalHTML?.replace(
-    '<script type="text/javascript">document.getElementById("data_set").submit();</scr',
-    ""
-  );
-  formHTML = formHTML?.replace("ipt>", "");
-  const payFormElement = document.getElementById("pay-form");
-  payFormElement!.innerHTML = formHTML!;
-  const ecpayForm: HTMLFormElement = <HTMLFormElement>(
-    document.getElementById("data_set")
-  );
-  console.log(ecpayForm);
-  ecpayForm.submit();
+  console.log("data", data);
+
+  // const originalHTML = await mainStore.YTViewsPayment(data, lang.value);
+  // let formHTML = originalHTML?.replace(
+  //   '<script type="text/javascript">document.getElementById("data_set").submit();</scr',
+  //   ""
+  // );
+  // formHTML = formHTML?.replace("ipt>", "");
+  // const payFormElement = document.getElementById("pay-form");
+  // payFormElement!.innerHTML = formHTML!;
+  // const ecpayForm: HTMLFormElement = <HTMLFormElement>(
+  //   document.getElementById("data_set")
+  // );
+  // console.log(ecpayForm);
+  // ecpayForm.submit();
 }
 
 // 資料存進 Google Sheets
@@ -293,6 +316,12 @@ async function ECPaySubmit() {
               label="姓名"
               required
             ></v-text-field>
+            <v-text-field
+              v-model="userData.phone"
+              :rules="[(v:any) => /^0\d{0,9}$/i.test(v) || '請輸入有效的電話號碼']"
+              label="電話號碼"
+              required
+            ></v-text-field>
             <v-text-field
               v-model="userData.company"
               label="公司 / 所屬產業"
@@ -331,8 +360,23 @@ async function ECPaySubmit() {
             <p class="mt-10 mb-3">
               目標對象區隔（興趣、習慣）<span class="text-red-darken-1">*</span>
             </p>
-            <div class="ms-5">
-              <v-radio-group v-model="target">
+            <div class="checkbox ms-5">
+              <v-checkbox
+                v-for="option in objectOptions"
+                v-model="target"
+                :key="option.label"
+                :label="option.label"
+                :value="option.label"
+                color="primary"
+              ></v-checkbox>
+              <v-checkbox
+                v-model="checkOtherTarget"
+                label="其他"
+                value="其他"
+                color="primary"
+              ></v-checkbox>
+              <input v-model="otherTarget" type="text" class="other" />
+              <!-- <v-radio-group v-model="target">
                 <v-radio
                   v-for="option in objectOptions"
                   :key="option.label"
@@ -342,14 +386,30 @@ async function ECPaySubmit() {
                 ></v-radio>
                 <v-radio label="其他" value="其他" color="primary"></v-radio>
                 <input v-model="otherTarget" type="text" class="other" />
-              </v-radio-group>
+              </v-radio-group> -->
             </div>
 
             <p class="mt-5 mb-3">
               影片主題 <span class="text-red-darken-1">*</span>
             </p>
-            <div class="ms-5">
-              <v-radio-group v-model="theme">
+            <div class="checkbox ms-5 mb-5">
+              <v-checkbox
+                v-for="option in themeOptions"
+                v-model="theme"
+                :key="option.label"
+                :label="option.label"
+                :value="option.label"
+                color="primary"
+              ></v-checkbox>
+              <v-checkbox
+                v-model="checkOtherTheme"
+                label="其他"
+                value="其他"
+                color="primary"
+              ></v-checkbox>
+              <input v-model="otherTheme" type="text" class="other" />
+
+              <!-- <v-radio-group v-model="theme">
                 <v-radio
                   v-for="option in themeOptions"
                   :key="option.label"
@@ -360,7 +420,7 @@ async function ECPaySubmit() {
 
                 <v-radio label="其他" value="其他" color="primary"></v-radio>
                 <input v-model="otherTheme" type="text" class="other" />
-              </v-radio-group>
+              </v-radio-group> -->
             </div>
 
             <v-text-field
@@ -374,7 +434,7 @@ async function ECPaySubmit() {
               type="submit"
               block
               class="mt-2 submit-btn"
-              :disabled="isSubmitDisabled"
+              :disabled="!isSubmitDisabled"
               >送出</v-btn
             >
           </v-form>