update payment แก้ Ui

เพิ่ม status เเก้ ui payment

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

@@ -4,11 +4,11 @@
       <q-card class="my-card" style="max-width: 480px; width: 100%" bordered>
         <q-card-section horizontal>
           <q-card-section class="q-pt-xs">
-            <div class="text-caption text-bold">บัตรประจำตัวผู้สอบ</div>
+            <div class="text-caption text-bold text-h5">บัตรประจำตัวผู้สอบ</div>
             <div class="text-h5 q-mt-sm q-mb-xs">{{ candidateFullName }}</div>
-            <div class="text-caption text-black">ชื่อ : นางพิมพ์ภา วงศ์สวัสดิ์</div>
+            <div class="text-caption text-black text-bold">ชื่อ : นางพิมพ์ภา วงศ์สวัสดิ์</div>
-            <div class="text-caption text-black">เลขประจำตัวประชาชน : 1100700954521</div>
+            <div class="text-caption text-black text-bold">เลขประจำตัวสอบ : CDE-004</div>
-            <div class="text-caption text-black">เลขประจำตัวสอบ : CDE-004</div>
+            <div class="text-caption text-black">เลขประจำตัวประชาชน : 1100700954521</div>           
             <div class="text-caption text-black">เวลาสอบ : 09:00-12:00</div>
             <div class="text-caption text-black">สถานที่สอบ : ศูนย์สอบ 01 กรุงเทพฯและนนทบุรี</div>
             <div class="text-caption text-black">ชั้นที่ : 4</div>

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

@@ -1,30 +1,50 @@
 <template>
   <div class="d-flex justify-content-center align-items-center min-vh-100">
     <div>
-      <div class="text-h5 text-center text-primary q-pb-lg">ชำระค่าธรรมเนียมการสอบ</div>
+      <!-- <div class="text-h5 text-center text-primary q-pb-lg">ชำระค่าธรรมเนียมการสอบ</div> -->
-      <div class="q-pa-nond text-center">
+
-        <div class="q-pa-md">
+      <div class="text-center q-pb-lg">
-          <q-img
+        <q-badge
-            src="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"
+          outline
-            :ratio="1"
+          color="primary"
-            style="max-width: 500px; height: 750px"
+          label="รออัปโหลดหลักฐานชำระเงิน"
-          />
+          class="q-pa-nond text-center"
+        />
+        <!-- <q-badge outline color="orange" label="รอการตรวจสอบ" class="q-pa-nond text-center" /> -->
+      </div>
+      <!-- <q-badge outline color="secondary" label="ตรวจสอบเเล้ว" /> -->
+      <div class="row q-pa-nond text-center">
+        <div class="q-pa-md col-6">
+          <q-img :src="img" :ratio="1" style="max-width: 300px; height: 300px" />
         </div>
         <q-uploader
-          url="http://localhost:4444/upload"
+          type="file"
-          class="q-mx-auto"
+          :factory="uploadImg"
-          label="กรุณาอัพโหลดหลักฐานการชำระเงิน"
+          class="q-mx-auto col-6"
+          label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
           flat
           color="blue"
           bordered
         />
       </div>
+      <div class="text-black text-center q-pb-lg">
+        ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { file } from '@babel/types'
+import { log } from 'console'
 import { onMounted, ref } from 'vue'
+const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
+// const status =
+const uploadImg = (file: any) => {
+  img.value =
+    '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'
+  console.log('string')
+}
 </script>
 
 <style lang="scss" scoped>