ต่อ api ประวัติการศึกษา

src/modules/01_exam/components/ExamPayment.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="q-pa-md text-center col-12">
-      <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
+      <q-btn color="primary" @click="clickPayment" label="ส่งหลักฐานการชำระเงิน" />
     </div>
     <div class="text-black text-center q-pb-lg col-12">
       ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ***
@@ -31,6 +31,10 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
+import http from '@/plugins/http'
+import config from '@/app.config'
 
 const props = defineProps({
   fetchStep: {
@@ -43,10 +47,15 @@ const props = defineProps({
   }
 })
 
+const $q = useQuasar()
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { success } = mixin
 const status = ref<string>('')
 const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
 const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
 const fileData = ref<any>()
+const loader = ref<boolean>(false)
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
 
 const uploadImg = (file: any) => {
   fileData.value = null
@@ -56,11 +65,26 @@ const uploadImg = (file: any) => {
     'https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png'
 }
 
-const setStatus = (val: string) => {
+const setStatus = async (val: string) => {
   status.value = val
   if (val == 'next') props.fetchStep()
 }
 
+const clickPayment = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidatePayment(candidateId.value))
+    .then(() => {
+      success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
+    })
+    .catch(() => {})
+    .finally(async () => {
+      loader.value = false
+      props.fetchStep()
+    })
+  status.value = 'processing'
+}
+
 const getClass = (val: string) => {
   switch (val) {
     case 'processing':