Merge branch 'master' of http://git.choozmo.com:3000/ai-anchor/video-maker

frontend/src/components/Payment.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { PaymentData } from "@/interfaces";
+import { useMainStore } from "@/stores/main";
+
+const mainStore = useMainStore();
+let isLoading = ref(false);
+const credit = ref(1);
+
+function increment() {
+  credit.value++;
+}
+function decrement() {
+  if (credit.value > 1) {
+    credit.value--;
+  }
+}
+
+const epayment = ref("ecpay");
+
+async function ecpay() {
+  isLoading.value = true;
+  const data: PaymentData = {
+    item: `Credit 60 X${credit.value}`,
+    amount: 500 * credit.value,
+  };
+  if (data.amount <= 0) {
+    return;
+  }
+
+  const originalHTML = await mainStore.Payment(data, "zh");
+
+  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")
+  );
+  ecpayForm.submit();
+
+  setTimeout(() => {
+    isLoading.value = false;
+  }, 3000);
+}
+</script>
+
+<template>
+  <div class="d-flex align-center flex-wrap">
+    <div class="payment-item me-6 mt-3">
+      <span>分鐘數：</span>
+      <v-btn
+        density="compact"
+        icon="remove"
+        color="grey"
+        class="mx-2"
+        @click="decrement"
+      ></v-btn>
+      <span class="px-2">{{ credit }}</span>
+      <v-btn
+        density="compact"
+        icon="add"
+        color="grey"
+        class="mx-2"
+        @click="increment"
+      ></v-btn>
+      <span class="ms-2">NT＄{{ 500 * credit }}</span>
+    </div>
+
+    <v-btn
+      @click="ecpay"
+      variant="flat"
+      color="primary"
+      class="px-4 mt-3"
+      prepend-icon="add"
+      :loading="isLoading"
+      >我要加值</v-btn
+    >
+  </div>
+
+  <div id="pay-form"></div>
+</template>
+
+<style lang="scss" scoped>
+.payment-item {
+  .v-btn {
+    border: 1px solid #a6a6a6;
+  }
+}
+</style>

frontend/src/views/main/Dashboard.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { useMainStore } from "@/stores/main";
 import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
+import Payment from "@/components/Payment.vue";
 
 const { t } = useI18n();
 const mainStore = useMainStore();
@@ -98,14 +99,15 @@ const greetedUser = computed(() => {
             ><small>秒</small>
           </v-card-text>
           <v-divider></v-divider>
-          <v-card-actions>
-            <v-btn
+          <v-card-actions class="d-flex align-center">
+            <Payment />
+            <!-- <v-btn
               variant="flat"
               color="primary"
               class="mt-3"
               prepend-icon="add"
               >我要加值</v-btn
-            >
+            > -->
           </v-card-actions>
         </v-card>
       </v-col>

frontend/src/views/main/admin/TestPayment.vue

@@ -4,32 +4,28 @@ import type { PaymentData } from "@/interfaces";
 import { useMainStore } from "@/stores/main";
 
 const mainStore = useMainStore();
-const credit = ref(0)
+const credit = ref(0);
 function increment() {
   credit.value++;
 }
 function decrement() {
-  if (credit.value>0){
+  if (credit.value > 0) {
     credit.value--;
   }
 }
-const epayment=ref('ecpay')
-
-function confirmation() {
-  
-}
-async function ecpay(){
+const epayment = ref("ecpay");
 
+async function ecpay() {
   const data: PaymentData = {
-    item : `Credit 60 X${credit.value}`,
-    amount: 500*credit.value
+    item: `Credit 60 X${credit.value}`,
+    amount: 500 * credit.value,
+  };
+  if (data.amount <= 0) {
+    return;
   }
-  if (data.amount<=0){
-    return ;
-  }
-  
-  const originalHTML = await mainStore.TestPayment(data, 'zh');
-  console.log(originalHTML)
+
+  const originalHTML = await mainStore.TestPayment(data, "zh");
+  console.log(originalHTML);
   let formHTML = originalHTML?.replace(
     '<script type="text/javascript">document.getElementById("data_set").submit();</scr',
     ""
@@ -41,7 +37,6 @@ async function ecpay(){
     document.getElementById("data_set")
   );
   ecpayForm.submit();
-  
 }
 </script>
 
@@ -52,7 +47,7 @@ async function ecpay(){
     <v-btn icon="remove" @click="decrement"></v-btn>
     {{ credit }}
     <v-btn icon="add" @click="increment"></v-btn>
-    <span>{{ 500*credit }}</span>
+    <span>{{ 500 * credit }}</span>
   </v-col>
   <div>
     <span>付款方式</span>
@@ -64,5 +59,4 @@ async function ecpay(){
   <div id="pay-form"></div>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>