ปรับ css กรอกข้อมูล และปรับรูปแบบ step การชำระเงิน

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

@@ -1,18 +1,18 @@
 <template>
-  <q-card-section class="row items-center col-12 q-py-sm">
-    <div class="row col-11">
-      <div class="text-bold">ข้อกำหนดและเงื่อนไข</div>
+  <q-card-section class="row items-center col-12 q-py-sm bg-grey-2">
+    <div class="row col-11 justify-center">
+      <div class="text-bold text-subtitle1">ข้อกำหนดและเงื่อนไข</div>
     </div>
     <q-space />
   </q-card-section>
   <q-separator />
-  <q-card-section style="max-height: 50vh" class="scroll">
-    <div class="text-center">
+  <q-card-section style="max-height: 70vh" class="scroll q-pb-sm">
+    <div class="text-center row justify-center">
       <div class="col-12 text-subtitle1 text-weight-bold text-negative q-pt-sm">
         ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล
       </div>
-      <q-card class="col-12 q-pa-md" flat>
-        <q-card-section class="text-black text-left">
+      <q-card class="col-xs-12 col-sm-11 row text-left q-py-sm" flat>
+        <div class="col-12">
           <p>
             &nbsp;&nbsp;&nbsp;&nbsp;หนังสือยินยอมให้เก็บ ใช้หรือเปิดเผยข้อมูลส่วนบุคคลของผู้สมัคร
             เพื่อสมัครงานกับกรุงเทพมหานครฯ 1. คำยินยอมจากผู้ให้ข้อมูลกับกรุงเทพมหานครฯ ข้าพเจ้า
@@ -48,14 +48,12 @@
               จะใช้วิธีการที่ชอบด้วยกฏหมายและเป็นธรรมในการเก็บรวบรวมข้อมูลส่วนบุคคลอย่างจำกัดเพียงเท่าที่จำเป็นภายใต้วัตถุประสงค์การทำงานของกรุงเทพมหานครฯ
               เพื่อใช้เป็นข้อมูลประกอบการพิจารณาคัดเลือกตามตำแหน่งที่ผู้ให้ข้อมูลประสงค์จะสมัครรับการคัดเลือกโดยกรุงเทพมหานครฯ
               จะเก็บรวบรวมข้อมูลส่วนบุคคลของท่าน ดังนี้
-              <ul>
-                <ul>
+              <ul style="list-style-type: circle;">
                   <li>ชื่อ-นามสกุล เพื่อติดต่อกับทางกรุงเทพมหานครฯ</li>
                   <li>อีเมล์ เพื่อใช้ในการติดต่อกับกรุงเทพมหานครฯ</li>
                   <li>เบอร์โทร เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
                   <li>ที่อยู่ เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
                   <li>ประวัติการทำงาน, ประวัติการศึกษา, ประวัติการฝึกอบรม ตามข้อมูลข้างต้น</li>
-                </ul>
               </ul>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ท้้งนี้ข้อมูลส่วนบุคคลดังกล่าวเป็นข้อมูลที่จำเป็นสำหรับการทำงานของกรุงเทพมหานครฯ
               หากไม่มีข้อมูลดังกล่าว อาจส่งผลต่อกระบวนการพิจารณาคุณสมบัติของผู้สมัคร
@@ -70,17 +68,19 @@
             จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย
             เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย
           </p>
-          <q-checkbox
-            v-model="acceptTermOfUse"
-            label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
-          />
-        </q-card-section>
+          <div class="row col-12 justify-center">
+            <q-checkbox
+              v-model="acceptTermOfUse"
+              label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
+            />
+          </div>
+        </div>
       </q-card>
     </div>
   </q-card-section>
   <q-separator />
   <q-card-actions align="right" class="bg-white text-teal justify-center">
-    <q-btn label="ตกลง" color="primary" @click="ok" :disable="!acceptTermOfUse" />
+    <q-btn label="ยอมรับ" style="width: 150px;" :color="!acceptTermOfUse ? 'grey':'primary'" @click="ok" :disable="!acceptTermOfUse" />
   </q-card-actions>
 </template>
 

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

@@ -1,16 +1,147 @@
 <template>
   <div class="col-12">
-    <div class="row justify-center q-pa-md">
-      <div class="col-4">
-        <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
+    <div class="row q-px-sm">
+        <div class="text-bold text-subtitle1 q-pb-md">เลือกวีธีการชำระเงิน</div>
+        <div class="row col-12 q-gutter-y-md q-mb-lg">
+          <q-list bordered class="col-12 rounded-borders">
+            <q-item tag="label" v-ripple class="q-pa-md">
+              <q-item-section avatar>
+                <q-icon name="mdi-cellphone-settings" color="positive" size="30px" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านมือถือ</q-item-label>
+                <q-item-label caption class="gt-xs">อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label>
+              </q-item-section>
+              <q-item-section avatar class="gt-xs">
+                <q-avatar size="32px">
+                  <q-img src="@/assets/krungthai.png" class="col-12"/>
+                </q-avatar>
+              </q-item-section>
+              <q-item-section side>
+                <q-radio v-model="pay" val="teal" color="blue" />
+              </q-item-section>
+            </q-item> 
+            <q-separator v-show="pay == 'teal'" />
+            <q-slide-transition :duration="100" class="">
+              <div v-show="pay == 'teal'" class="q-pa-md bg-grey-1">
+                <div class="row q-col-gutter-sm">
+                  <div class=" col-xs-12 col-sm-7">
+                    <q-card bordered class="items-start q-pa-md row q-mb-sm" style="height: 300px">
+                      <div class="row col-12">
+                        <div class="col-12 row no-wrap items-center">
+                          <q-avatar size="50px">
+                            <q-img src="@/assets/krungthai.png"/>
+                          </q-avatar>
+                          <div class="column q-pl-md">
+                            <strong>ธนาคารกรุงไทย</strong>
+                            สำนักงานทรัพยากรบุคคล 
+                            <div>387-3-94793-0</div>
+                          </div>
+                        </div>
+                        <div class="col-12">
+                          <q-separator class="q-my-md"/>
+                          <div class="q-pb-sm">
+                            <span class="text-weight-medium">ชื่อบัญชี :</span>
+                            <span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
+                          </div>
+                          <div class="q-pb-sm">
+                            <span class="text-weight-medium">ธนาคารกรุงไทย :</span>
+                            <span class="text-blue q-pl-sm"> 387-3-94793-0</span>
+                          </div>
+                          <div class="q-pb-sm">
+                            <span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
+                            <span class="text-blue q-pl-sm">12837495985900</span>
+                          </div>
+                          <div>
+                            <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
+                            <span class="text-blue q-pl-sm text-bold">200.00</span>
+                          </div>
+                        </div>
+                        <div class="col-12 text-grey-6 q-mt-xl">
+                          ** ถ้าต้องการเเก้ไขหลักฐานการโอนเงิน กรุณาอัปโหลดซ้ำ
+                        </div>
+                      </div>
+                     </q-card>
+                  </div>
+                  <div class=" col-xs-12 col-sm-5">
+                    <label for="file-upload" class="col-12 row"><!-- :src="img" -->
+                        <q-img src="@/assets/ex_slip.jpeg" fit="contain" style="min-height: 300px; max-height: 300px;" class="col-12 bg-white">
+                        <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
+                        </q-img> 
+                    </label>
+                    <input id="file-upload" type="file" />
+                  </div>
+                </div>
+              </div>
+            </q-slide-transition>
+          </q-list>
+
+          <q-list bordered class="col-12 rounded-borders">
+            <q-item tag="label" v-ripple class="q-pa-md">
+              <q-item-section avatar>
+                <q-icon name="mdi-cash" color="positive" size="30px" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label>
+                <q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</q-item-label>
+              </q-item-section>
+              <q-item-section avatar class="gt-xs">
+                <q-avatar size="32px">
+                  <q-img src="@/assets/krungthai.png" class="col-12"/>
+                </q-avatar>
+              </q-item-section>
+              <q-item-section side>
+                <q-radio v-model="pay" val="orange" color="blue" />
+              </q-item-section>
+            </q-item>
+            <q-separator v-show="pay == 'orange'" />
+            <q-slide-transition :duration="100">
+              <div v-show="pay == 'orange'" class="q-pa-md bg-grey-1">
+                <q-card bordered class="q-pa-md">
+                  <div class="q-pb-sm">
+                    <span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
+                    <span class="text-blue q-pl-sm">12837495985900</span>
+                  </div>
+                  <div>
+                    <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
+                    <span class="text-blue q-pl-sm text-bold">200.00</span>
+                  </div>
+                  <q-btn
+                      color="blue"
+                      icon="print"
+                      class="q-px-md q-mt-md"
+                      outline
+                      dense
+                      label="พิมพ์ใบแจ้งการชำระเงิน"
+                    />
+                </q-card>
+                <div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
+                <div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
+                <ul class="q-gutter-y-sm">
+                  <li>ขั้นที่ 1 บริการอื่นๆ</li>
+                  <li>ขั้นที่ 2 ชำระค่าบริการ</li>
+                  <li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
+                  <li>ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ กระแสรายวัน</li>
+                  <li>ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ <span class="text-blue text-bold">2111</span> และ ใส่ Ref No.1 ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน "ใบแจ้งการชำระเงิน")</li>
+                  <li>ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น 012345.308833</li>
+                  <li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
+                  <li>ขั้นที่ 7 ตรวจสอบรายการ</li>
+                </ul>
+                
+              </div>
+            </q-slide-transition>
+          </q-list>
+        </div>
+        <!-- <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
           <div class="text-bold col-12" :class="getFontColor(status)">
             {{ message(status) }}
           </div>
           <div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)">
             <li>{{ rejectMessage }}</li>
           </div>
-        </q-card>
-        <q-file
+        </q-card> -->
+
+        <!-- <q-file
           borderless
           v-model="fileData"
           stack-label
@@ -20,10 +151,10 @@
           <q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
             <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
           </q-img>
-        </q-file>
+        </q-file> -->
       </div>
     </div>
-    <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
+    <!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
       <q-btn
         
         color="primary"
@@ -33,7 +164,14 @@
     </div>
     <div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange">
       <q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ
-    </div>
+    </div> -->
+    <div class="row col-12 justify-center">
+      <q-btn
+          :color="pay === null ? 'grey': 'primary'"
+          :disable="pay === null"
+          style="width: 200px;"
+          label="แจ้งการชำระเงิน"
+        />
   </div>
 </template>
 
@@ -60,9 +198,10 @@ const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const { success } = mixin
 const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
-const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
+const img = ref<string>('@/assets/krungthai.png')
 const fileData = ref<any>()
 const loader = ref<boolean>(false)
+const pay = ref(null)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 

src/modules/01_exam/components/Form/Address.vue

@@ -96,8 +96,9 @@
           :label="`${'รหัสไปรษณีย์'}`"
         />
       </div>
-      <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
-        <label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
+      <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm row">
+        <div class="text-bold" v-if="$q.screen.gt.xs">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
+        <div class="text-bold col-12 q-pt-sm" v-else>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
         <q-radio
           v-model="defaultAddress.same"
           checked-icon="task_alt"

src/modules/01_exam/components/Form/Document.vue

@@ -2,7 +2,7 @@
 <template>
   <HeaderTop
     v-model:edit="edit"
-    header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
+    :header="$q.screen.gt.xs ? 'อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)':'อัปโหลดเอกสาร'"
     icon="mdi-file-document"
     :addData="true"
     :editOnly="true"
@@ -11,23 +11,25 @@
 
   <div v-if="edit" class="row justify-center row col-12">
     <q-input
-      class="q-mt-sm col-12"
+      class="q-mt-sm col-12 q-pb-xs"
       :outlined="edit"
       dense
       lazy-rules
       :readonly="!edit"
       :borderless="!edit"
       v-model="name"
+      hide-bottom-space
       :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
       :label="`${'ชื่อเอกสาร'}`"
     />
     <q-uploader
-      color="blue"
+      color="gray"
       type="file"
       flat
       auto-upload
       :factory="fileUpload"
       class="full-width"
+      text-color="dark"
       :max-size="10000000"
       accept=".jpg,.png,.pdf,.csv,.doc"
       bordered

src/modules/01_exam/components/Form/Family.vue

@@ -106,7 +106,7 @@
         />
       </div>
 
-      <div class="col-xs-12 text-weight-bold">• บิดา</div>
+      <div class="col-xs-12 text-weight-bold q-pb-sm">• บิดา</div>
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-select
           :class="getClass(status == 'register' || status == 'rejectRegister')"
@@ -179,7 +179,7 @@
         />
       </div>
 
-      <div class="col-xs-12 text-weight-bold">• มารดา</div>
+      <div class="col-xs-12 text-weight-bold q-pb-sm">• มารดา</div>
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-select
           :class="getClass(status == 'register' || status == 'rejectRegister')"

src/modules/01_exam/components/Form/Information.vue

@@ -9,8 +9,8 @@
     :editData="false"
   />
   <!-- :changeBtn="changeBtn" -->
-  <q-form ref="myform" class="col-12 row q-col-gutter-x-sm">
-    <div class="row col-xs-12 col-sm-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+  <q-form ref="myform" class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm">
+    <div class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-select
           :class="getClass(status == 'register' || status == 'rejectRegister')"
@@ -294,33 +294,28 @@
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
         <q-input
-          :class="getClass(false)"
-          :outlined="false"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           dense
           lazy-rules
-          :readonly="true"
-          :borderless="true"
+          readonly
+          borderless
+          style="padding:0 12px;"
           v-model="defaultInformation.email"
           label="E-mail address"
         />
       </div>
     </div>
-    <div class="row col-xs-12 col-sm-2 justify-center">
-      <div class="containerimage row justify-center">
-        <q-file
-          borderless
-          v-model="fileData"
-          stack-label
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          @update:model-value="pickFile"
-        >
-          <q-img src="@/assets/avatar_user.jpg" class="col-12">
-            <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
-              <q-icon name="mdi-camera" />
-              <br />อัปเดต
-            </div>
-          </q-img>
-        </q-file>
+    <div class="row col-xs-12 col-sm-3 col-md-2 justify-center">
+      <div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
+        <label for="file-upload" class="col-12 row">
+            <q-img src="@/assets/avatar_user.jpg" class="col-12">
+              <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
+                <q-icon name="mdi-camera" />
+                <br />อัปเดต
+              </div>
+            </q-img> 
+        </label>
+        <input id="file-upload" type="file" />
       </div>
       <div class="col-12 text-center" v-if="disabledPic">
         <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
@@ -328,7 +323,7 @@
         </q-btn>
       </div>
     </div>
-    <div class="col-xs-12 col-sm-12">
+    <div class="col-xs-12 col-sm-9 col-md-12">
       <q-input
         :class="getClass(status == 'register' || status == 'rejectRegister')"
         :outlined="status == 'register' || status == 'rejectRegister'"
@@ -489,8 +484,8 @@ const getClass = (val: boolean) => {
 
 .q-img {
   display: block;
-  width: 160px;
-  height: 170px;
+  width: 100%;
+  max-height: 170px;
   padding: 1%;
   border-radius: 8px;
   border: solid 2px rgba(168, 168, 168, 0.055) !important;
@@ -504,7 +499,7 @@ const getClass = (val: boolean) => {
   background: rgba(0, 0, 0, 0.7);
   color: #f1f1f1;
   transition: 0.5s ease;
-  width: 160px;
+  width: 100%;
   height: 70px;
   opacity: 0;
   color: white;
@@ -520,4 +515,14 @@ const getClass = (val: boolean) => {
 .q-field__bottom {
   padding: 5px 10px 0px 0px;
 }
+
+input[type="file"] {
+    display: none;
+}
+.custom-file-upload {
+    border: 1px solid #ccc;
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
+}
 </style>

src/modules/01_exam/views/ExamDetail.vue

@@ -1,7 +1,7 @@
 <!-- page:detail page รายการสอบทั้งหมด -->
 <template>
   <q-toolbar class="q-pa-sm text-center">
-    <q-toolbar-title class="text-dark text-weight-medium">
+    <q-toolbar-title class="text-dark">
       {{ tittle }}
     </q-toolbar-title>
   </q-toolbar>
@@ -49,7 +49,7 @@
     </q-step>
   </q-stepper>
   <q-dialog :model-value="modalConsend" persistent>
-    <q-card style="min-width: 800px">
+    <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw':'min-width: 80vw'">
       <Conference :ok="consendOk" :close="consenClose" />
     </q-card>
   </q-dialog>
@@ -77,10 +77,10 @@ const status = ref<string>('register')
 const modalConsend = ref<boolean>(false)
 
 onMounted(async () => {
-  // stepRaw.value = 4
-  // step.value = 4
-  await fetchPeriodExam()
-  await candidateCheck()
+  stepRaw.value = 3
+  step.value = 3
+  /* await fetchPeriodExam()
+  await candidateCheck() */
 })
 
 const candidateCheck = async () => {