video-maker/frontend/src/components/Payment.vue

<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="payment-item me-6">
    <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"
    prepend-icon="add"
    :loading="isLoading"
    >我要加值</v-btn
  >
  <div id="pay-form"></div>
</template>

<style lang="scss" scoped>
.payment-item {
  .v-btn {
    border: 1px solid #a6a6a6;
  }
}
</style>