ปรับ UI / ปรับคำถามใหม่

src/App.vue

@@ -42,9 +42,11 @@
           <v-menu transition="slide-x-transition" v-if="getUsername">
             <template v-slot:activator="{ props }">
               <v-btn elevated color="#F4C03F" v-bind="props" height="40">
+                <!-- {{ getImg }} -->
+
                 <v-avatar
                   color="#635d56"
-                  v-if="getImg"
+                  v-if="getImg&&img"
                   :image="getImg"
                   size="30"
                 >
@@ -127,7 +129,7 @@ export default {
     if (this.getUsername == "") {
       this.$store.commit("setUsername", this.username);
     }
-    if (this.getImg == "") {
+    if (this.getImg == ""||this.getImg == null||this.getImg == undefined) {
       this.$store.commit("setImg", this.img);
     }
   },

src/components/HeaderHome.vue

@@ -17,7 +17,36 @@
               <b>“เลือกกันเอง”</b>
               ศึกษาให้พร้อมแล้วมาร่วมเป็นส่วนหนึ่งของกระบวนการเลือก สว.
             </div>
-            <v-btn
+
+            <div class="text-center pa-4">
+              <v-btn
+                @click="dialog = true"
+                elevated
+                color="#B2C573"
+                class="mt-4 text-normal"
+                style="color: #0f470f"
+                size="large"
+                height="80"
+              >
+                <span class="text-normal"> ขั้นตอนการใช้งานระบบ</span>
+              </v-btn>
+
+              <v-dialog v-model="dialog" width="100%">
+                <v-card width="100%">
+                  <v-img src="../assets/order.png" width="100%"> </v-img>
+                  <template v-slot:actions>
+                    <v-btn
+                      size="large"
+                      class="ms-auto text-subtitle"
+                      text="ปิด"
+                      @click="dialog = false"
+                    ></v-btn>
+                  </template>
+                </v-card>
+              </v-dialog>
+            </div>
+
+            <!-- <v-btn
               elevated
               color="#B2C573"
               class="mt-4 text-normal"
@@ -27,7 +56,7 @@
               @click="checkPage"
             >
               <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
-            </v-btn>
+            </v-btn> -->
           </v-col>
         </v-row>
       </div>
@@ -38,9 +67,21 @@
         align="center"
         class="text-center ma-auto"
       >
-        <v-col cols="12" md="" class="text-normal mb-10">
+        <v-col cols="12" md="" class="text-normal mt-5">
-          <div class="text-center text-white py-5">
+          <div class="text-center text-white pt-2">
-            <div class="text-title my-3">ใครสมัคร สว.ได้บ้าง</div>
+            <div
+              class="text-subtitle mx-10 text-center mt-10 box-order mx-auto my-5"
+              style="color: #ffffff"
+              v-if="
+                getUsername == '' ||
+                getUsername == null ||
+                getUsername == undefined
+              "
+            >
+              ขั้นตอนที่
+              <v-avatar color="#DD6C31" class="text-subtitle">1</v-avatar>
+            </div>
+            <div class="text-title m-3">ใครสมัคร สว.ได้บ้าง</div>
             <div>
               สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
               โดยมีคุณสมบัติดังนี้
@@ -48,13 +89,13 @@
             <div>เช็คคุณสมบัติกันเลย !</div>
             <!-- <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
         ตรวจสอบคุณสมบัติการเป็น  สว.
-      </v-btn> -->
+       </v-btn> -->
           </div>
           <div style="position: relative">
             <v-btn
               elevated
               color="#DD6C31"
-              class="text-normal"
+              class="text-normal mt-5"
               height="85"
               to="/check"
             >
@@ -120,6 +161,11 @@ export default {
   computed: {
     ...mapGetters(["getUsername"]),
   },
+  data() {
+    return {
+      dialog: false,
+    };
+  },
   methods: {
     checkPage() {
       this.$store.commit("setCheckPage", true);
@@ -147,10 +193,18 @@ export default {
   transform: translate(-50%, -50%);
 }
 .bg-curve {
-  padding-top: 90px;
+  background-size: cover;
+  padding-top: 50px;
   background-image: url("/src/assets/Path\ 14.png");
-  height: 465px;
+  height: 580px;
   background-position: center top;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
+.box-order {
+  margin: auto;
+  outline: 2px solid;
+  border-radius: 25px;
+  width: fit-content;
+  padding: 7px 10px;
+}
 </style>

src/components/MainVote.vue

@@ -2,7 +2,7 @@
   <div class="bg-main">
     <Header />
     <Section2Green />
-    <!-- <Section3Base /> -->
+    <Section3Base />
     <Section4White/>
     <Section5Green/>
     <Section6Base/>
@@ -14,7 +14,7 @@
 <script>
 import Header from "./HeaderHome.vue";
 import Section2Green from "./Section2Green.vue";
-// import Section3Base from "./Section3Base.vue";
+import Section3Base from "./Section3Base.vue";
 import Section4White from "./Section4White.vue";
 import Section5Green from "./Section5Green.vue";
 import Section6Base from "./Section6Base.vue";
@@ -25,7 +25,7 @@ export default {
   components: {
     Header,
     Section2Green,
-    // Section3Base,
+    Section3Base,
     Section4White,
     Section5Green,
     Section6Base,

src/components/Section2Green.vue

@@ -7,6 +7,10 @@
         getUsername == '' || getUsername == null || getUsername == undefined
       "
     >
+    <div class="text-subtitle mx-10 text-center  box-order mx-auto my-5"  style="color:#ffffff;">
+              ขั้นตอนที่
+              <v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
+            </div>
       <div class="text-title my-3">มาลองสร้างตัวตนก่อนลงสมัคร สว.</div>
       <div class="mb-8">
         ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น ก่อนลงสมัคร สว. รอบจริง
@@ -14,7 +18,7 @@
 
       <v-btn
         elevated
-        color="#DD6C31"
+        color="#f4c03f"
         class="text-normal btn-w"
         height="85"
         width="470"
@@ -65,10 +69,11 @@ export default {
 <style>
 .bg-green-curve {
   background-image: url("/src/assets/Rectangle\ 3.png");
-  min-height: 510px;
+  min-height: 520px;
   height: auto;
   background-position: center bottom;
   background-color: white;
+  background-size: cover; 
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
 .bg-green-black {

src/components/Section3Base.vue

@@ -1,21 +1,45 @@
 <template>
-  <div style="position: relative" class="text-normal mb-10">
+  <div style="position: relative;background-color: white;" class="text-normal pb-10" >
-    <div class="text-center txt-black py-5">
+    <div class="text-center txt-black py-8">
-      <div class="text-title my-3">ใครสมัคร สว.ได้บ้าง</div>
+      <div
-      <div>
+        class="text-subtitle mx-10 text-center  box-order mx-auto my-5 txt-black"
-        สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
+
-        โดยมีคุณสมบัติดังนี้
+        v-if="
+          getUsername == '' || getUsername == null || getUsername == undefined
+        "
+      >
+        ขั้นตอนที่
+        <v-avatar color="#b2c573" class="text-subtitle">3</v-avatar>
       </div>
-      <div>เช็คคุณสมบัติกันเลย !</div>
+      <div class="text-title my-3">เข้าสู่ระบบหากคุณได้แสดงตนสำเร็จแล้ว</div>
-      <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
+
-        ตรวจสอบคุณสมบัติการเป็น  สว.
+      <v-btn
+        elevated
+        color="#B2C573"
+        class="mt-4 text-normal"
+        style="color: #0f470f"
+        size="large"
+        height="80"
+        @click="checkPage"
+      >
+        <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
       </v-btn>
     </div>
   </div>
 </template>
 <script>
-export default {};
+import { mapGetters } from "vuex";
-</script>
-<style>
 
-</style>
+export default {
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
+  methods: {
+    checkPage() {
+      this.$store.commit("setCheckPage", true);
+      this.$router.push("/login");
+    },
+  },
+};
+</script>
+<style></style>

src/components/Section4White.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative" class="bg-white text-normal pb-10">
+  <div style="position: relative" class="text-normal pb-10">
     <div class="text-center txt-black py-5 ma-auto" style="width: 90%">
       <div class="text-title my-3">หน้าที่ของ สว.</div>
       <v-row align="center" justify="center">

src/components/edit/FormSteperEdit.vue

@@ -271,61 +271,14 @@
               class="text-sub2"
             >
               <div>ช่วงที่ 3</div>
-              <div class="text-subtitle">
+              <!-- <div class="text-subtitle">
                 จุดยืนในฐานะสมาชิกรัฐสภา ( สว.)
                 <hr class="my-3" />
-              </div>
+              </div> -->
               <v-row>
-                <v-col class="text-sub" cols="12">
-                  คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
-                </v-col>
-                <v-col cols="12" md="12">
-                  <!-- {{ opnitem1 }} -->
-                  <v-row>
-                    <v-col></v-col>
-                    <v-col>
-                      <v-row class="text-sub3 font-weight-medium">
-                        <v-col class="rot-box" cols="4">เห็นด้วย</v-col
-                        ><v-col class="rot-box" cols="4">ไม่เห็นด้วย</v-col
-                        ><v-col class="rot-box" cols="4">พิจารณา</v-col>
-                      </v-row>
-                    </v-col></v-row
-                  >
-                  <!-- {{ option1 }} -->
-                  <v-row
-                    v-for="(item, i) in option1"
-                    :key="i"
-                    align="center"
-                    justify="center"
-                    style="border-bottom: 1px solid #e4e4e4"
-                  >
-                    <v-col class="">
-                      {{ item.name }}
-                    </v-col>
-                    <v-col>
-                      <v-radio-group inline hide v-model="item.choice">
-                        <v-radio
-                          class="text-sub2"
-                          value="agree"
-                          @click="item.choice = 'agree'"
-                        ></v-radio>
-                        <v-radio
-                          class="text-sub2"
-                          value="disagree"
-                          @click="item.choice = 'disagree'"
-                        ></v-radio>
-                        <v-radio
-                          class="text-sub2"
-                          value="deciding"
-                          @click="item.choice = 'deciding'"
-                        ></v-radio>
-                      </v-radio-group>
-                    </v-col>
-                  </v-row>
-                </v-col>
                 <v-col>
                   <v-card>
-                    <div class="text-sub">
+                    <div class="text-subtitle">
                       คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
                     </div>
                     <hr class="my-3" />
@@ -351,11 +304,18 @@
                         {{ item.name }}
                       </v-col>
                       <v-col cols="12">
+                        <!-- {{ item.choice }} -->
                         <v-radio-group
                           inline
                           class="col4"
                           v-model="item.choice"
                         >
+                          <v-radio
+                            class="text-sub2"
+                            value="strongly agree"
+                            @click="item.choice = 'strongly agree'"
+                            label="เห็นด้วยอย่างยิ่ง"
+                          ></v-radio>
                           <v-radio
                             class="text-sub2"
                             value="agree"
@@ -370,9 +330,9 @@
                           ></v-radio>
                           <v-radio
                             class="text-sub2"
-                            value="deciding"
+                            value="strongly disagree"
-                            @click="item.choice = 'deciding'"
+                            @click="item.choice = 'strongly disagree'"
-                            label="พิจารณา"
+                            label="ไม่เห็นด้วยอย่างยิ่ง"
                           ></v-radio>
                           <v-radio
                             class="text-sub2"
@@ -385,17 +345,17 @@
                     </v-row>
                   </v-card>
                   <v-card class="mt-8">
-                    <div class="text-sub">
+                    <!-- <div class="text-sub">
                       คำอธิบายจุดยืนในฐานะสมาชิกรัฐสภาเพิ่มเติมที่ต้องการจะให้คนอื่นทราบ
                       *
                     </div>
-                    <hr class="my-3" />
+                    <hr class="my-3" /> -->
-                    <v-textarea
+                    <!-- <v-textarea
                       label=""
                       variant="solo"
                       bg-color="#F2EBD1"
                       v-model="payload.vision"
-                    ></v-textarea>
+                    ></v-textarea> -->
 
                     <div class="btn-next">
                       <v-btn @click="e1--" variant="text" class="float-left"
@@ -405,10 +365,7 @@
 
                       <v-btn
                         @click="e1++"
-                        :disabled="
+                        :disabled="!(checkOpt1.count == checkOpt1.checkcount)"
-                          !(checkOpt1.count == checkOpt1.checkcount) ||
-                          payload.vision == null
-                        "
                         variant="tonal"
                         class="float-right"
                         >next</v-btn
@@ -429,10 +386,10 @@
               <div>
                 <div>ช่วงที่ 4</div>
                 <div class="text-subtitle">
-                  คำถามอื่นเกี่ยวกับ สว.
+                  ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
                   <hr class="my-3" />
                 </div>
-                <v-card class="mt-8 text-sub">
+                <!-- <v-card class="mt-8 text-sub">
                   <div class="text-sub">
                     แนวทางการพิจารณาเห็นชอบผู้ดำรงตำแหน่งในองค์กรอิสระ.
                   </div>
@@ -442,11 +399,11 @@
                     bg-color="#F2EBD1"
                     v-model="payload.reason"
                   ></v-textarea>
-                </v-card>
+                </v-card> -->
                 <v-card class="mt-8 text-sub">
-                  <div class="text-sub">
+                  <!-- <div class="text-sub">
                     ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
-                  </div>
+                  </div> -->
                   <v-row>
                     <v-col cols="12" md="12">
                       <v-text-field
@@ -599,7 +556,7 @@ export default {
         : undefined;
     },
     checkOpt1() {
-      let dataOption = [...this.option1, ...this.option2];
+      let dataOption = [...this.option2];
       const filteredItems = dataOption.filter(
         (item) => item.choice !== null && item.choice !== undefined
       );

src/components/form/FormSteper.vue

@@ -268,75 +268,14 @@
               class="text-sub2"
             >
               <div>ช่วงที่ 3</div>
-              <div class="text-subtitle">
-                จุดยืนในฐานะสมาชิกรัฐสภา ( สว.)
-                <hr class="my-3" />
-              </div>
               <v-row>
-                <v-col class="text-sub" cols="12">
+                <v-col class="text-subtitle" cols="12">
                   คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
+                  <hr class="my-3" />
                 </v-col>
-                <v-col cols="12" md="12">
+
-                  <!-- {{ opnitem1 }} -->
-                  <v-row>
-                    <v-col></v-col>
-                    <v-col>
-                      <v-row class="text-sub3 font-weight-medium">
-                        <v-col class="rot-box" cols="4">เห็นด้วย</v-col
-                        ><v-col class="rot-box" cols="4">ไม่เห็นด้วย</v-col
-                        ><v-col class="rot-box" cols="4">พิจารณา</v-col>
-                      </v-row>
-                    </v-col></v-row
-                  >
-                  <!-- {{ option1 }} -->
-                  <v-row
-                    v-for="(item, i) in option1"
-                    :key="i"
-                    align="center"
-                    justify="center"
-                    style="border-bottom: 1px solid #e4e4e4"
-                  >
-                    <v-col class="">
-                      {{ item.name }}
-                    </v-col>
-                    <v-col>
-                      <v-radio-group inline hide>
-                        <v-radio
-                          class="text-sub2"
-                          value="agree"
-                          @click="item.choice = 'agree'"
-                        ></v-radio>
-                        <v-radio
-                          class="text-sub2"
-                          value="disagree"
-                          @click="item.choice = 'disagree'"
-                        ></v-radio>
-                        <v-radio
-                          class="text-sub2"
-                          value="deciding"
-                          @click="item.choice = 'deciding'"
-                        ></v-radio>
-                      </v-radio-group>
-                    </v-col>
-                  </v-row>
-                </v-col>
                 <v-col>
                   <v-card>
-                    <div class="text-sub">
-                      คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
-                    </div>
-                    <hr class="my-3" />
-                    <v-row>
-                      <v-col></v-col>
-                      <v-col>
-                        <!-- <v-row class="text-sub3 font-weight-bold ">
-                          <v-col class="rot-box" cols="3">เห็นด้วย</v-col><v-col class="rot-box" cols="3">ไม่เห็นด้วย</v-col
-                          ><v-col class="rot-box" cols="3">พิจารณา</v-col>
-                          <v-col class="rot-box" cols="3">ไม่แสดงความเห็น</v-col>
-                        </v-row> -->
-                      </v-col></v-row
-                    >
-                    <!-- {{option2}} -->
                     <v-row
                       v-for="(item, i) in option2"
                       :key="i"
@@ -349,6 +288,12 @@
                       </v-col>
                       <v-col cols="12">
                         <v-radio-group inline class="col4">
+                          <v-radio
+                            class="text-sub2"
+                            value="strongly agree"
+                            @click="item.choice = 'strongly agree'"
+                            label="เห็นด้วยอย่างยิ่ง"
+                          ></v-radio>
                           <v-radio
                             class="text-sub2"
                             value="agree"
@@ -363,9 +308,9 @@
                           ></v-radio>
                           <v-radio
                             class="text-sub2"
-                            value="deciding"
+                            value="strongly disagree"
-                            @click="item.choice = 'deciding'"
+                            @click="item.choice = 'strongly disagree'"
-                            label="พิจารณา"
+                            label="ไม่เห็นด้วยอย่างยิ่ง"
                           ></v-radio>
                           <v-radio
                             class="text-sub2"
@@ -378,7 +323,7 @@
                     </v-row>
                   </v-card>
                   <v-card class="mt-8">
-                    <div class="text-sub">
+                    <!-- <div class="text-sub">
                       คำอธิบายจุดยืนในฐานะสมาชิกรัฐสภาเพิ่มเติมที่ต้องการจะให้คนอื่นทราบ
                       *
                     </div>
@@ -388,7 +333,7 @@
                       variant="solo"
                       bg-color="#F2EBD1"
                       v-model="payload.vision"
-                    ></v-textarea>
+                    ></v-textarea> -->
 
                     <div class="btn-next">
                       <v-btn @click="e1--" variant="text" class="float-left"
@@ -398,10 +343,7 @@
 
                       <v-btn
                         @click="e1++"
-                        :disabled="
+                        :disabled="!(checkOpt1.count == checkOpt1.checkcount)"
-                          !(checkOpt1.count == checkOpt1.checkcount) ||
-                          payload.vision == null
-                        "
                         variant="tonal"
                         class="float-right"
                         >next</v-btn
@@ -421,11 +363,11 @@
             >
               <div>
                 <div>ช่วงที่ 4</div>
-                <div class="text-subtitle">
+                <!-- <div class="text-subtitle">
                   คำถามอื่นเกี่ยวกับ สว.
                   <hr class="my-3" />
-                </div>
+                </div> -->
-                <v-card class="mt-8 text-sub">
+                <!-- <v-card class="mt-8 text-sub">
                   <div class="text-sub">
                     แนวทางการพิจารณาเห็นชอบผู้ดำรงตำแหน่งในองค์กรอิสระ.
                   </div>
@@ -435,10 +377,11 @@
                     bg-color="#F2EBD1"
                     v-model="payload.reason"
                   ></v-textarea>
-                </v-card>
+                </v-card> -->
                 <v-card class="mt-8 text-sub">
-                  <div class="text-sub">
+                  <div class="text-subtitle">
                     ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
+                    <hr class="my-3" />
                   </div>
                   <v-row>
                     <v-col cols="12" md="12">
@@ -527,7 +470,7 @@
                     โดยยึดเอาหลักการประชาธิปไตยและประชาชนเป็นที่ตั้ง
                     หากข้าพเจ้าให้ความเท็จหรือกระทำการใดอันขัดต่อหลักประชาธิปไตยและสิทธิมนุษยชน
                     ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
-                    *ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น  สว.67
+                    *ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.67
                   </div>
                   <div class="text-center mb-5">
                     <v-btn
@@ -588,7 +531,7 @@ export default {
         : undefined;
     },
     checkOpt1() {
-      let dataOption = [...this.option1, ...this.option2];
+      let dataOption = [...this.option2];
       const filteredItems = dataOption.filter(
         (item) => item.choice !== null && item.choice !== undefined
       );
@@ -793,8 +736,9 @@ export default {
         body: formData,
       }).then(() => {
         client.user.confirmChangeImage.mutate();
-        alert("บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์");
+        alert(
-
+          "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
+        );
       });
       console.log("done");
     },
@@ -810,7 +754,6 @@ export default {
       if (filterOpt2.length) {
         this.payload.opinions = filterOpt2;
       }
-     
 
       // let payload = {
       //   firstName: "ธรรมนูญ2",
@@ -850,7 +793,9 @@ export default {
           if (this.file) {
             this.uploadImage();
           } else {
-            alert("บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์");
+            alert(
+              "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
+            );
           }
           this.getUser();
         })
@@ -877,15 +822,15 @@ export default {
       client.user.getSelf
         .mutate({})
         .then((data) => {
-          this.login({ cid: data.cid, phone: data.phone });
           localStorage.setItem("username", data.firstName);
+          console.log('data.image',data);
           localStorage.setItem("img", data.image);
           this.$store.commit("setUsername", data.firstName);
           this.$store.commit("setImg", data.image);
-
+          this.login({ cid: data.cid, phone: data.phone });
         })
         .catch((error) => {
-          alert("ไม่สามารถโหลดข้อมูลได้"+ error.message);
+          alert("ไม่สามารถโหลดข้อมูลได้" + error.message);
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },

src/views/CheckDetail.vue

@@ -240,7 +240,7 @@ export default {};
 </script>
 <style>
 .bline div {
-  margin: 15px 0px;
+  margin: 5px 0px;
 }
 .bg-yellow-page {
   background: #f7d278;