แก้ badge เป็น tap แสดงค่า

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

@@ -1,56 +1,28 @@
 <template>
+  <q-card class="my-card" style="max-width: 1000px; width: 100%" bordered>
+    <q-card-actions class="q-pa-md text-center" :class="getClass(status)">
+      <div class="text-black text-bold">{{ message(status) }}</div>
+
+      <q-space />
+    </q-card-actions>
+  </q-card>
+
   <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-center q-pb-lg">
-        <q-badge
+        <!-- <q-badge
           :outline="badgeOutline"
           :color="badgeColor"
           :label="badgeLabel"
           class="q-pa-nond text-center"
           style="font-size: 16px"
-        />
-        <!-- <q-badge
-          outline
-          color="primary"
-          label="รออัปโหลดหลักฐานชำระเงิน"
-          class="q-pa-nond text-center"
         /> -->
-        <!-- <q-badge outline color="red" 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-carousel
-            animated
-            v-model="slide"
-            thumbnails
-            swipeable
-            infinite
-            class="my-carousel"
-            ref="carousel"
-          >
-            <q-carousel-slide :name="1" :img-src="img1" :ratio="1" />
-            <q-carousel-slide :name="2" :img-src="img2" :ratio="1" />
 
-            <template v-slot:control>
-              <!-- <q-carousel-control position="bottom-right" :offset="[18, 18]">
-                <q-icon
-                  name="remove"
-                  class="remove-icon"
-                  @click="
-                    () => {
-                      removeSlide(slide, $refs.carousel)
-                    }
-                  "
-                />
-              </q-carousel-control> -->
-            </template>
-          </q-carousel>
-        </div>
+      <div class="row q-pa-nond text-center">
+        <q-img :src="img" :ratio="1" style="max-width: 300px; height: 300px" />
         <q-uploader
+          ref="uploader"
           type="file"
           :factory="uploadImg"
           class="q-mx-auto col-6"
@@ -61,14 +33,14 @@
         />
       </div>
       <div class="q-pa-md text-center">
-        <q-btn color="primary" @click="updateBadge" label="ส่งหลักฐานการชำระเงิน" />
+        <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
       </div>
       <div class="text-black text-center q-pb-lg">
         ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
       </div>
     </div>
-    <q-btn @click="updateBadgeReject" label="R" />
-    <q-btn @click="updateBadgeSuceed" label="S" />
+    <q-btn color="negative" @click="setStatus('rejected')">Rejected</q-btn>
+    <q-btn color="positive" @click="setStatus('success')">Success</q-btn>
   </div>
 </template>
 
@@ -78,41 +50,44 @@ import { log } from 'console'
 import { defineComponent, ref, Ref } from 'vue'
 import { onMounted } from 'vue'
 import { ComponentRef } from '@vue/runtime-core'
+const status = ref<string>('')
+
+const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
 
-const img1 = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
-const img2 = ref<string>('')
 const uploadImg = (file: any) => {
-  img1.value =
-    'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
-  img2.value = 'https://f.ptcdn.info/914/078/000/rkq4y4prgcMlHAUfb3h-o.jpg'
-  console.log('string')
+  //   img.value =
+  //     'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
+  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'
 }
-const badgeOutline = ref(true)
-const badgeColor = ref('blue')
-const badgeLabel = ref<string>('รออัปโหลดหลักฐานชำระเงิน')
+
 const slide = ref(1)
-function updateBadge(): void {
-  badgeColor.value = 'orange'
-  badgeLabel.value = 'รอการตรวจสอบ'
+const setStatus = (val: string) => {
+  status.value = val
 }
-function updateBadgeReject(): void {
-  badgeColor.value = 'red'
-  badgeLabel.value = 'หลักฐานการชำระเงินผิดพลาด'
-}
-function updateBadgeSuceed(): void {
-  badgeColor.value = 'primary'
-  badgeLabel.value = 'ตรวจสอบเเล้ว'
-}
-function removeSlide(slide: Ref<number>, carouselRef: ComponentRef): void {
-  // Get the current index of the slide
-  const currentSlide = slide.value
 
-  // Remove the current slide from the array
-  carouselRef.value.removeSlide(currentSlide)
-
-  // If the current slide was the last one, go back one slide
-  if (slide.value === carouselRef.value.slides.length) {
-    slide.value -= 1
+const getClass = (val: string) => {
+  switch (val) {
+    case 'processing':
+      return 'bg-lime-12'
+    case 'rejected':
+      return 'bg-deep-orange-4'
+    case 'success':
+      return 'bg-green-12'
+    default:
+      return 'bg-blue-grey-2'
+  }
+}
+const message = (val: string) => {
+  switch (val) {
+    case 'processing':
+      return 'รอการตรวจสอบ'
+    case 'rejected':
+      return 'หลักฐานการชำระเงินผิดพลาด'
+    case 'success':
+      return 'ตรวจสอบเเล้ว'
+    default:
+      return 'รออัปโหลดหลักฐานชำระเงิน'
   }
 }
 </script>
@@ -121,8 +96,4 @@ function removeSlide(slide: Ref<number>, carouselRef: ComponentRef): void {
 .q-img {
   margin: 0 auto;
 }
-.my-carousel {
-  width: 100%; /* Set the width to 100% of the parent container */
-  height: 500px; /* Set the height to the desired value */
-}
 </style>