add saas payment

frontend/src/api.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import { apiUrl } from "@/env";
-import type { IUserProfile, IUserProfileUpdate, IUserProfileCreate, Video, VideoCreate, ArticleCreate, ImageDownload, VideoUploaded, YTViewsUserData } from "@/interfaces";
+import type { IUserProfile, IUserProfileUpdate, IUserProfileCreate, Video, VideoCreate, ArticleCreate, ImageDownload, VideoUploaded, YTViewsUserData, PaymentData} from "@/interfaces";
+import type { StringOptionsWithImporter } from "sass";
 
 function authHeaders(token: string) {
   return {
@@ -147,12 +148,26 @@ export const api = {
         lang: lang
       }
     };
-    return axios.post<string>(`${apiUrl}/api/v1/payment/ytviews-ecpay-payment`, user_data, config);
+    return axios.post<string>(`${apiUrl}/api/v1/payment/ytviews-ecpay-payment?lang=${lang}`, user_data);
   },
-  async YTViewsTestPayment(user_data: YTViewsUserData) {
-    return axios.post<string>(`${apiUrl}/api/v1/payment/ytviews-ecpay-test-payment`, user_data);
+  async YTViewsTestPayment(user_data: YTViewsUserData, lang:string) {
+    return axios.post<string>(`${apiUrl}/api/v1/payment/ytviews-ecpay-test-payment?lang=${lang}`, user_data);
   },
   async getYTViewsList() {
     return axios.get(`${apiUrl}/api/v1/payment/ytviews-list-all`);
   },
+  async Payment(payment_data: PaymentData, token:string, lang: string) {
+    const config = {
+      params: {
+        lang: lang
+      }
+    };
+    return axios.post<string>(`${apiUrl}/api/v1/payment/ecpay-payment?lang=${lang}`, payment_data, authHeaders(token));
+  },
+  async TestPayment(payment_data:PaymentData, token:string, lang:string) {
+    return axios.post<string>(`${apiUrl}/api/v1/payment/ecpay-test-payment?lang=${lang}`, payment_data, authHeaders(token));
+  },
+  async getPaymentList() {
+    return axios.get(`${apiUrl}/api/v1/payment/list-all`);
+  },
 };

frontend/src/interfaces/index.ts

@@ -95,4 +95,9 @@ export interface YTViewsUserData {
   target: string;
   theme: string;
   taxID: string | null;
+}
+
+export interface PaymentData {
+  item: string,
+  amount: number
 }

frontend/src/router/index.ts

@@ -160,6 +160,12 @@ const router = createRouter({
                   component: () => import(
                     /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/TestECPay.vue'),
                 },
+                {
+                  path: 'test-payment',
+                  name: 'test-payment',
+                  component: () => import(
+                    /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/TestPayment.vue'),
+                },
               ],
             },
           ],

frontend/src/stores/main.ts

@@ -4,7 +4,7 @@ import { api } from "@/api"
 import router from "@/router"
 import { getLocalToken, removeLocalToken, saveLocalToken } from "@/utils";
 import type { AppNotification } from '@/interfaces';
-import type { IUserProfile, IUserProfileCreate, IUserProfileUpdate, MainState, Video, VideoCreate, ArticleCreate, Image, ImageDownload, VideoUploaded, YTViewsUserData } from '@/interfaces';
+import type { IUserProfile, IUserProfileCreate, IUserProfileUpdate, MainState, Video, VideoCreate, ArticleCreate, Image, ImageDownload, VideoUploaded, YTViewsUserData, PaymentData } from '@/interfaces';
 import i18n from '@/plugins/i18n'
 import { wsUrl } from "@/env";
 
@@ -465,12 +465,12 @@ export const useMainStore = defineStore("MainStoreId", {
         await mainStore.checkApiError(error);
       }
     },
-    async YTViewsTestPayment(user_data: YTViewsUserData) {
+    async YTViewsTestPayment(user_data: YTViewsUserData, lang:string) {
       const mainStore = useMainStore();
       try {
         const response = (
           await Promise.all([
-            api.YTViewsTestPayment(user_data),
+            api.YTViewsTestPayment(user_data, lang),
             await new Promise<void>((resolve, _) => setTimeout(() => resolve(), 0)),
           ])
         );
@@ -508,5 +508,48 @@ export const useMainStore = defineStore("MainStoreId", {
         await mainStore.checkApiError(error);
       }
     },
+    async TestPayment(payment_data: PaymentData, lang:string) {
+      const mainStore = useMainStore();
+      try {
+        const response = (
+          await Promise.all([
+            api.TestPayment(payment_data, mainStore.token, lang),
+            await new Promise<void>((resolve, _) => setTimeout(() => resolve(), 0)),
+          ])
+        );
+        if (response[0]) {
+          return response[0].data;
+        }
+      } catch (error) {
+        await mainStore.checkApiError(error);
+      }
+    },
+    async Payment(payment_data: PaymentData, lang: string) {
+      const mainStore = useMainStore();
+      try {
+        const response = (
+          await Promise.all([
+            api.Payment(payment_data, mainStore.token, lang),
+            await new Promise<void>((resolve, _) => setTimeout(() => resolve(), 0)),
+          ])
+        );
+        if (response[0]) {
+          return response[0].data;
+        }
+      } catch (error) {
+        await mainStore.checkApiError(error);
+      }
+    },
+    async getPaymentList() {
+      const mainStore = useMainStore();
+      try {
+        const response = await api.getYTViewsList();
+        if (response) {
+          return response.data;
+        }
+      } catch (error) {
+        await mainStore.checkApiError(error);
+      }
+    },
   }
 });

frontend/src/views/TestYTViews.vue

@@ -152,7 +152,7 @@ async function ECPaySubmit() {
     theme: userData.theme,
     taxID: userData.taxID,
   };
-  const originalHTML = await mainStore.YTViewsTestPayment(data);
+  const originalHTML = await mainStore.YTViewsTestPayment(data, 'zh');
   let formHTML = originalHTML?.replace(
     '<script type="text/javascript">document.getElementById("data_set").submit();</scr',
     ""

frontend/src/views/main/Main.vue

@@ -164,6 +164,12 @@ const routeGuardAdmin = async (
             >
               <v-list-item-title>Test Style Preview</v-list-item-title>
             </v-list-item>
+            <v-list-item
+              to="/main/admin/test-payment"
+              prepend-icon="payments"
+            >
+              <v-list-item-title>Test Payment</v-list-item-title>
+            </v-list-item>
           </v-list>
         </v-sheet>
         <!-- <v-spacer></v-spacer> -->

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

@@ -0,0 +1,50 @@
+<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')
+
+function confirmation() {
+  
+}
+function ecpay(){
+
+  const data: PaymentData = {
+    item : `Credit 60 X${credit.value}`,
+    amount: 500*credit.value
+  }
+  mainStore.TestPayment(data, 'zh')
+}
+</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="confirmation">往前</v-btn>
+</template>
+
+<style lang="scss">
+</style>