video-maker/frontend/src/views/main/admin/TestPayment.vue

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import type { PaymentData } from "@/interfaces";
import { useMainStore } from "@/stores/main";

const mainStore = useMainStore();
const credit = ref(0);
function increment() {
  credit.value++;
}
function decrement() {
  if (credit.value > 0) {
    credit.value--;
  }
}
const epayment = ref("ecpay");

async function ecpay() {
  const data: PaymentData = {
    item: `Credit 60 X${credit.value}`,
    amount: 500 * credit.value,
  };
  if (data.amount <= 0) {
    return;
  }

  const originalHTML = await mainStore.TestPayment(data, "zh");
  console.log(originalHTML);
  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();
}
</script>

<template>
  <v-col>
    <span>Credit 60</span>
    <span>$500</span>
    <v-btn icon="remove" @click="decrement"></v-btn>
    {{ credit }}
    <v-btn icon="add" @click="increment"></v-btn>
    <span>{{ 500 * credit }}</span>
  </v-col>
  <div>
    <span>付款方式</span>
    <v-row>
      <span>ecpay</span>
    </v-row>
  </div>
  <v-btn @click="ecpay">往前</v-btn>
  <div id="pay-form"></div>
</template>

<style lang="scss"></style>