ต่อapiคนสมัครกรอกข้อมูลสมัครสอบ

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

@@ -6,7 +6,7 @@
           <div class="text-bold col-12" :class="getFontColor(status)">
             {{ message(status) }}
           </div>
-          <div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
+          <div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)">
             <li>{{ rejectMessage }}</li>
           </div>
         </q-card-actions>
@@ -18,15 +18,17 @@
       </div>
     </div>
     <div class="q-pa-md text-center col-12">
-      <q-btn color="primary" @click="clickPayment" label="ส่งหลักฐานการชำระเงิน" />
+      <q-btn
+        v-if="status == 'payment' || status == 'rejectPayment'"
+        color="primary"
+        @click="clickPayment"
+        label="ส่งหลักฐานการชำระเงิน"
+      />
     </div>
     <div class="text-black text-center q-pb-lg col-12">
       ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ***
     </div>
   </div>
-  <q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
-  <q-btn color="positive" @click="setStatus('success')">Su</q-btn>
-  <q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
 </template>
 
 <script setup lang="ts">
@@ -41,8 +43,8 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
@@ -50,7 +52,6 @@ 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>()
@@ -65,11 +66,6 @@ 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 = async (val: string) => {
-  status.value = val
-  if (val == 'next') props.fetchStep()
-}
-
 const clickPayment = async () => {
   loader.value = true
   await http
@@ -82,16 +78,17 @@ const clickPayment = async () => {
       loader.value = false
       props.fetchStep()
     })
-  status.value = 'processing'
 }
 
 const getClass = (val: string) => {
   switch (val) {
-    case 'processing':
+    case 'checkPayment':
       return 'bg-yellow-3'
-    case 'rejected':
+    case 'rejectPayment':
       return 'bg-red-2'
-    case 'success':
+    case 'checkSeat':
+      return 'bg-light-green-3'
+    case 'done':
       return 'bg-light-green-3'
     default:
       return 'bg-light-blue-1'
@@ -99,11 +96,13 @@ const getClass = (val: string) => {
 }
 const message = (val: string) => {
   switch (val) {
-    case 'processing':
+    case 'checkPayment':
       return 'รอการตรวจสอบ'
-    case 'rejected':
+    case 'rejectPayment':
       return 'หลักฐานการชำระเงินผิดพลาด'
-    case 'success':
+    case 'checkSeat':
+      return 'ตรวจสอบเเล้ว'
+    case 'done':
       return 'ตรวจสอบเเล้ว'
     default:
       return 'รออัปโหลดหลักฐานชำระเงิน'
@@ -111,11 +110,13 @@ const message = (val: string) => {
 }
 const getFontColor = (val: string) => {
   switch (val) {
-    case 'processing':
+    case 'checkPayment':
       return 'text-orange'
-    case 'rejected':
+    case 'rejectPayment':
       return 'text-red-12'
-    case 'success':
+    case 'checkSeat':
+      return 'text-green'
+    case 'done':
       return 'text-green'
     default:
       return 'text-blue'