แก้ไข UI / UX ทำ function search ใหม่ ตามบรีฟพี่อาร์ม

src/App.vue

@@ -15,18 +15,68 @@
         <!-- {{ getUsernameFromLocalStorage }} -->
         <span
           ><v-btn
-            icon="mdi-home-variant-outline"
             variant="text"
             href="/"
-          ></v-btn
+            class="mr-3"
-          ><v-btn variant="text" v-if="getUsername" to="/profile">
+          >  <v-icon icon="mdi-home-variant-outline" size="30"></v-icon></v-btn
+          >
+          <!-- <v-btn variant="text" v-if="getUsername" to="/profile">
             <v-icon icon="mdi-account-outline"></v-icon>{{ getUsername }}</v-btn
+          > -->
+          <!-- <v-btn variant="text" v-if="getUsername" @click="logout" class="mr-2"
+            ><v-icon icon="mdi-logout"></v-icon> Logout
+          </v-btn> -->
+          <v-btn
+            variant="text"
+            class="mr-2"
+            v-if="
+              getUsername == '' ||
+              getUsername == null ||
+              getUsername == undefined
+            "
+            to="/login"
+            style="font-size: medium;"
           >
-          <v-btn variant="text" v-if="getUsername" @click="logout" class="mr-2"><v-icon icon="mdi-logout"></v-icon> Logout </v-btn>
+            <v-icon icon="mdi-login"  size="25"></v-icon> เข้าสู่ระบบ
-          <v-btn variant="text" class="mr-2" v-else to="/login" > <v-icon icon="mdi-login"></v-icon> Log In </v-btn>
+          </v-btn>
-
+          <v-menu transition="slide-x-transition" v-if="getUsername">
-          <v-btn elevated color="#F4C03F" to="/check" href="#started" > Get Started </v-btn></span
+            <template v-slot:activator="{ props }">
+              <v-btn elevated color="#F4C03F" v-bind="props" height="40">
+                <v-avatar
+                  color="#635d56"
+                  v-if="getImg"
+                  :image="getImg"
+                  size="30"
                 >
+                </v-avatar
+                ><v-avatar size="40" v-else>
+                  <v-icon
+                    icon="mdi-account-circle"
+                    color="white"
+                    size="30"
+                  ></v-icon>
+                </v-avatar>
+                <span class="ml-3" style="font-size: medium;">{{ getUsername }}</span>
+              </v-btn></template
+            >
+            <v-list>
+              <v-list-item
+                :key="0"
+                :value="0"
+                @click="$router.push('/profile')"
+              >
+                <v-list-item-title>
+                  <v-icon icon="mdi-account-edit"></v-icon> แก้ไขข้อมูลส่วนตัว
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item :key="1" :value="1" @click="logout">
+                <v-list-item-title>
+                  <v-icon icon="mdi-logout"></v-icon> ออกจากระบบ
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </span>
       </div>
       <router-view />
     </v-main>
@@ -41,20 +91,26 @@ import { mapGetters } from "vuex";
 export default {
   name: "App",
   computed: {
-    ...mapGetters(["getUsername"]),
+    ...mapGetters(["getUsername", "getImg"]),
   },
   components: {
     // MainVote,
   },
 
   data: () => ({
+    img: "",
     username: "",
+    items: [
+      { title: "แก้ไขข้อมูลส่วนตัว", icon: "mdi-account-edit", to: "/profile" },
+      { title: "ออกจากระบบ", icon: "mdi-logout", to: "/profile" },
+    ],
   }),
   methods: {
     logout() {
       localStorage.clear();
       // location.reload();
       this.$store.commit("setUsername", "");
+      this.$store.commit("setImg", "");
       this.$router.push("/");
     },
   },
@@ -66,10 +122,13 @@ export default {
     //   }
     // });
     this.username = localStorage.getItem("username");
+    this.img = localStorage.getItem("img");
     if (this.getUsername == "") {
       this.$store.commit("setUsername", this.username);
     }
-    
+    if (this.getImg == "") {
+      this.$store.commit("setImg", this.img);
+    }
   },
 };
 </script>

src/components/FooterPage.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="bg-curve-2">
+    </div>
+  </template>
+  <script>
+
+  export default {
+   
+  };
+  </script>
+  <style>
+
+  .bg-curve-2 {
+    padding-top: 90px;
+    background-image: url("/src/assets/Path\ 18.png");
+    height: 300px;
+    background-position: center top;
+    /* background: #2b2b26 0% 0% no-repeat padding-box; */
+  }
+  </style>
+  

src/components/HeaderHome.vue

@@ -8,6 +8,7 @@
               :aspect-ratio="1"
               src="../assets/logo-title.png"
               width="600"  
+              @click="$router.push('/')"
             ></v-img>
           </v-col>
           <v-col align-self="center" align="center">
@@ -19,42 +20,52 @@
             <v-btn
               elevated
               color="#B2C573"
-              class="mt-4"
+              class="mt-4 text-normal"
               style="color: #0f470f"
               size="large"
-              href="#started"
+              height="80"
+              to="/login"
             >
-              มาเริ่มกันเลย
+              <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
             </v-btn>
           </v-col>
         </v-row>
       </div>
     </div>
     <div style="position: relative" class="bg-curve" id="started">
-      <v-row style="height: 100%" align="center" class="text-center">
+      <v-row style="height: 100%;width: 90%;" align="center" class="text-center ma-auto" >
-        <v-col cols="12" md="">
+        <v-col cols="12" md="" class="text-normal mb-10">
+          <div class="text-center text-white py-5">
+            <div class="text-title my-3">ใครสมัคร สว.ได้บ้าง</div>
+            <div>
+              สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
+              โดยมีคุณสมบัติดังนี้
+            </div>
+            <div>เช็คคุณสมบัติกันเลย !</div>
+            <!-- <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
+        ตรวจสอบคุณสมบัติการเป็น  สว.
+      </v-btn> -->
+          </div>
           <div style="position: relative">
             <v-btn
               elevated
               color="#DD6C31"
               class="text-normal"
-              stacked
+              height="85"
-              height="110"
               to="/check"
             >
-              ตรวจสอบคุณสมบัติ
+              <span class="text-normal"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
-              <br />
-              การเป็น สว.
               <v-img
                 :aspect-ratio="1"
                 src="../assets/Group 9.png"
                 width="70"
-                style="position: absolute; bottom: -25px; left: -20px"
+                style="position: absolute; bottom: -27px; left: -30px"
               ></v-img>
             </v-btn>
           </div>
+          <br>
         </v-col>
-        <v-col cols="12" md="" class="mt-0 mt-md-10 mt-lg-10" v-if="getUsername==''||getUsername==null||getUsername==undefined">
+        <!-- <v-col cols="12" md="" class="mt-0 mt-md-10 mt-lg-10" >
           <v-btn
             elevated
             color="#DD6C31"
@@ -62,6 +73,7 @@
             stacked
             height="110"
             to="/forms"
+            :disabled="getUsername!==''||getUsername!==null||getUsername!==undefined"
           >
             <v-img
               :aspect-ratio="1"
@@ -72,8 +84,8 @@
             แสดงตนเป็นผู้สมัคร
           </v-btn>
         </v-col>
-        <!-- {{ getUsername }} -->
+
-        <v-col cols="12" md="" v-if="getUsername">
+        <v-col cols="12" md="">
           <v-btn
             elevated
             color="#DD6C31"
@@ -82,6 +94,7 @@
             width="300"
             height="110"
             to="/search"
+            :disabled="!getUsername"
           >
             <v-img
               :aspect-ratio="1"
@@ -91,7 +104,7 @@
             ></v-img>
             ค้นหาผู้สมัคร  สว.
           </v-btn>
-        </v-col>
+        </v-col> -->
       </v-row>
     </div>
   </div>
@@ -124,9 +137,9 @@ export default {
   transform: translate(-50%, -50%);
 }
 .bg-curve {
+  padding-top: 90px;
   background-image: url("/src/assets/Path\ 14.png");
-  height: 400px;
+  height: 465px;
-
   background-position: center top;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }

src/components/MainVote.vue

@@ -2,33 +2,36 @@
   <div class="bg-main">
     <Header />
     <Section2Green />
-    <Section3Base />
+    <!-- <Section3Base /> -->
     <Section4White/>
     <Section5Green/>
     <Section6Base/>
     <Section7GreenTab/>
     <Section8Base/>
+    <FooterPage/>
   </div>
 </template>
 <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";
 import Section7GreenTab from "./Section7GreenTab.vue";
 import Section8Base from "./Section8Base.vue";
+import FooterPage from "./FooterPage.vue";
 export default {
   components: {
     Header,
     Section2Green,
-    Section3Base,
+    // Section3Base,
     Section4White,
     Section5Green,
     Section6Base,
     Section7GreenTab,
-    Section8Base
+    Section8Base,
+    FooterPage
 
 
   },

src/components/Section2Green.vue

@@ -1,46 +1,80 @@
 <template>
   <div style="position: relative" class="bg-green-curve text-normal " >
-    <div class="text-center text-white py-5">
+    <div
-      <div class="text-title my-3">มาศึกษาก่อนจะเป็น สว.</div>
+     style="width: 90%"
-      <v-row>
+      class="text-center text-white py-10 pb-20 ma-auto"
-        <v-col class="border-green" cols="12" md="">
+      v-if="
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+        getUsername == '' || getUsername == null || getUsername == undefined
-          <div>ใครสมัครสว.ได้บ้าง</div>
+      "
-        </v-col>
+    >
-        <v-col class="border-green" cols="12" md="">
+      <div class="text-title my-3">มาลองสร้างตัวตนก่อนลงสมัคร สว.</div>
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+      <div class="mb-8">
+        ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น ก่อนลงสมัคร สว. รอบจริง
+      </div>
 
-          <div>หน้าที่ของสว.</div>
+      <v-btn
-        </v-col>
+        elevated
-        <v-col cols="12" md="">
+        color="#DD6C31"
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+        class="text-normal btn-w"
-
+        height="85"
-          <div>กระบวนการเลือก สมาชิกวุฒิสภา</div>
+        width="470"
-        </v-col>
+        to="/forms"
-      </v-row>
+      >
-      <v-row>
+        <v-img
-        <v-col cols="12" md="">
+          :aspect-ratio="1"
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+          src="../assets/Group 23.png"
-          <div>ขั้นตอนการเลือกสว.</div>
+          width="80"
-        </v-col>
+          style="position: absolute; bottom: -40px; right: 0"
-        <v-col cols="12" md="">
+        ></v-img>
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+        <span class="text-normal"> แสดงตนเป็นผู้สมัคร</span>
-
+      </v-btn>
-          <div>กลุ่มอาชีพ ผู้สมัครรับเลือกสว.</div>
+    </div>
-        </v-col>
+    <div class="text-center text-white py-10 pb-20" v-if="getUsername">
-      </v-row>
+      <div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
+      <div class="mb-8">
+        ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
+        ที่ตัวเองเป็นผู้แสดงตน
+      </div>
+      <v-btn
+        elevated
+        color="#DD6C31"
+        class="text-normal btn-w"
+        height="85"
+        width="470"
+        to="/search"
+      >
+        <v-img
+          :aspect-ratio="1"
+          src="../assets/search.png"
+          width="100"
+          style="position: absolute; bottom: -20px; right: 0px"
+        ></v-img>
+        <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
+      </v-btn>
     </div>
   </div>
 </template>
 <script>
-export default {};
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
+};
 </script>
 <style>
 .bg-green-curve {
   background-image: url("/src/assets/Rectangle\ 3.png");
-  min-height: 600px;
+  min-height: 510px;
   height: auto;
   background-position: center bottom;
+  background-color: white;
+  /* background: #2b2b26 0% 0% no-repeat padding-box; */
+}
+.bg-green-black {
+  /* min-height: 600px; */
+  height: auto;
+  background-color: #4c884c;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
 .border-green {
@@ -48,8 +82,11 @@ export default {};
 }
 @media only screen and (min-width: 0px) and (max-width: 700px) {
   .bg-green-curve {
-  min-height: 700px;
+    min-height: 420px;
-  
+    background-position: center bottom;
+  }
+  .btn-w.v-btn {
+    width: 370px !important;
   }
 }
 </style>

src/components/Section4White.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="position: relative" class="bg-white text-normal pb-10">
-    <div class="text-center txt-black py-10 ma-auto" style="width: 90%">
+    <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">
         <v-col

src/components/Section6Base.vue

@@ -17,7 +17,7 @@
                 </div>
                 <div class="text-sub2">
                   ภายใน 5 วันนับตั้งแต่วันที่พระราชกฤษฎีกาให้มีการเลือก สว.
-                  ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกอระดับอำเภอ ระดับจังหวัด
+                  ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกระดับอำเภอ ระดับจังหวัด
                   ระดับประเทศ
                 </div>
                 <!-- <br> -->
@@ -104,7 +104,7 @@
                   <div style="color: #4c884c; font-weight: 500">
                     การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                   </div>
-                  ผู้ได้คะแนนสูงสุดลำดับ 3 ลำดับแรก ของแต่ละกลุ่ม
+                  ผู้ได้คะแนนสูงสุด 3 ลำดับแรก ของแต่ละกลุ่ม
                   เป็นผู้ได้รับเลือกระดับอำเภอ สำหรับกลุ่มนั้น
                 </div>
               </div>
@@ -133,7 +133,7 @@
                   <div style="color: #dd6c31; font-weight: 500">
                     การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                   </div>
-                  ผู้ได้คะแนนสูงสุดลำดับ 2 ลำดับแรก ของแต่ละกลุ่ม
+                  ผู้ได้คะแนนสูงสุด 2 ลำดับแรก ของแต่ละกลุ่ม
                   เป็นผู้ได้รับเลือกระดับจังหวัด สำหรับกลุ่มนั้น
                 </div>
               </div>

src/components/Section8Base.vue

@@ -10,11 +10,29 @@
             <div class="text-title">กลุ่มอาชีพผู้สมัครรับเลือก สว.</div>
             <br />
             <div>
-              ทุกคนที่มีคุณสมบัติและไม่มีลักษนะต้องห้าม
+              ทุกคนที่มีคุณสมบัติและไม่มีลักษนะต้องห้าม มีสิทธิสมัครรับเลือกเป็น
-              มีสิทธิสมัครรับเลือกเปนสว. ในกลุ่มใดกลุ่มหนึง ในกลุ่มอาชีพ 20
+              สว. ในกลุ่มใดกลุ่มหนึ่ง ในกลุ่มอาชีพ 20 กลุ่ม ดังนี้.
-              กลุ่ม ดังนี้.
             </div>
           </div>
+          <v-btn
+            variant="text"
+            append
+            color="#168fb3"
+            size="lg"
+            class="mt-10"
+            to="/detail"
+            ><div
+              class="text-wrap text-sub"
+              style="
+                width: 100%;
+                text-decoration: underline;
+                text-decoration-color: #168fb3;
+                margin: auto;
+              "
+            >
+              คู่มือตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
+            </div></v-btn
+          >
         </v-col>
         <v-col cols="12" md="6">
           <v-card
@@ -45,7 +63,6 @@
               icon="mdi-skip-next"
               rounded="circle"
               size="xl"
-            
               color="#4c884c"
             ></v-btn>
           </v-card>
@@ -106,7 +123,7 @@ export default {
       { text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
       { text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
       {
-        text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
+        text: "กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
         idx: 13,
       },
       { text: "กลุ่มสตรี", idx: 14 },

src/components/check/CheckList.vue

@@ -31,22 +31,25 @@
       class="mx-auto"
       src="@/assets/Group 51.png"
       width="230"
-  
     ></v-img>
     <v-btn variant="text" append color="#168fb3" size="lg" to="/detail"
-      ><div class="text-wrap text-sub" style="width: 100%; margin: auto">
+      ><div
-        ตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
+        class="text-wrap text-sub"
+        style="
+          width: 100%;
+          text-decoration: underline;
+          text-decoration-color: #168fb3;
+          margin: auto;
+        "
+      >
+        คู่มือตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
       </div></v-btn
     >
   </v-container>
 </template>
 
 <script>
-export default {
+export default {};
-
-}
 </script>
 
-<style>
+<style></style>
-
-</style>

src/components/check/QuestionList.vue

@@ -3,8 +3,6 @@
     style="height: auto; min-height: 100vh"
     class="d-flex justify-center parent-container"
   >
-    <!-- {{ model }} -->
-    <!-- {{ slides }} -->
     <v-btn
       @click="model++"
       style="z-index: 999"
@@ -15,7 +13,7 @@
       v-if="model < 17"
       ><v-icon icon="mdi-menu-right" size="70" color="#F4C03F"></v-icon
     ></v-btn>
-    <!-- v-if="model > 0" -->
+
     <v-btn
       v-if="model > 0"
       @click="model--"
@@ -27,7 +25,6 @@
       ><v-icon icon="mdi-menu-left" size="70" color="#F4C03F"></v-icon
     ></v-btn>
 
-    <!-- hide-delimiters -->
     <v-carousel
       style="height: auto; min-height: 100vh"
       progress="#f4c03f"
@@ -58,6 +55,8 @@
               <div class="border-white my-2"></div>
               <br />
               <p class="text-title">{{ slide.txt }}</p>
+
+              <p class="text-normal mt-3">{{ slide.subtxt }}</p>
               <a
                 :href="slide.link"
                 target="_blank"
@@ -66,7 +65,6 @@
               >
                 {{ slide.link }}</a
               >
-              <p class="text-normal">{{ slide.subtxt }}</p>
 
               <br />
               <div class="d-flex justify-center align-center">
@@ -163,14 +161,8 @@
               </div>
             </div>
           </v-container>
+          <!-- {{ checkNull.length }} -->
 
-          <div
-            v-if="model > 16 && checkNull.length == 17"
-            class="text-sub text-white py-8 d-block"
-          >
-            <v-icon icon="mdi-alert-circle-outline"></v-icon>
-            กรุณาตอบคำถามให้ครบ
-          </div>
           <div
             class="py-7 parent-container"
             v-if="model > 16 && checkPass.length == 17"
@@ -226,7 +218,11 @@
                   height="60"
                   to="/forms"
                   class="mt-4 mr-2"
-                  v-if="getUsername==''||getUsername==null||getUsername==undefined"
+                  v-if="
+                    getUsername == '' ||
+                    getUsername == null ||
+                    getUsername == undefined
+                  "
                 >
                   <span class="text-sub">แสดงตนเป็นผู้สมัคร</span>
                 </v-btn>
@@ -234,13 +230,39 @@
             </v-container>
           </div>
 
-          <div class="py-7 text-center" v-if="model > 16 && alertList.length">
+          <div
-            <v-container class="text-black">
+            class="py-7 text-center"
+            v-if="
+              (model > 16 && checkNull.length > 0) ||
+              (model > 16 && alertList.length)
+            "
+          >
+            <v-container class="txt-black">
               <div class="text-title mb-2">สรุปผล</div>
               <div class="border-white mb-5"></div>
-              <v-icon icon="mdi-close-circle" size="60" color="red"></v-icon>
+
+      
+                <div class="text-sub py-8 d-block" v-if="checkNull.length > 0">
+                  <v-icon icon="mdi-alert-circle-outline mr-2"     color="white"></v-icon>
+                  กรุณาตอบคำถามให้ครบ
+                  <div class="text-sub2">
+                    ไม่ได้ตอบข้อ
+                    <span v-for="(choice, i) in checkNull" :key="i"
+                      >{{ choice.idx }} ,
+                    </span>
+                  </div>
+                </div>  
+
+              <div v-if="model > 16 && alertList.length">
+                <v-card  class="mx-auto my-10" elevation="6" rounded="xl">
+                <v-card-item>
+                  <br>
+                <v-icon
+                  icon="mdi-close-circle"
+                  size="60"
+                  color="#ca2234"
+                ></v-icon>
                 <div class="text-sub">มีคุณสมบัติที่ไม่ผ่าน</div>
-              <!-- {{ alertList }} -->
                 <div
                   v-for="(txt, i) in alertList"
                   :key="i"
@@ -252,9 +274,13 @@
 
                   {{ txt.not }}
                 </div>
+                <br>
+                </v-card-item>
+                </v-card>
+              </div>
               <v-btn
                 elevated
-                color="#DD6C31"
+                color="#1B76BA"
                 class="mt-4"
                 stacked
                 height="60"
@@ -411,7 +437,7 @@ export default {
           vmodel: null,
         },
         {
-          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
+          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส.  สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกจากตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
           color: "#8aa042",
           not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส.  สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น",
           check: null,
@@ -427,7 +453,8 @@ export default {
           vmodel: null,
         },
         {
-          txt: "คุณถูกจำกัดสิทธิสมัคร สว. 2567 เนื่องจากไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 (เฉพาะเขตที่มีการเลือกตั้งซ่อม) และไม่ได้แจ้งเหตุไม่ไปใช้สิทธิเลือกตั้งตรวจสอบว่าถูกจำกัดสิทธิหรือไม่ ได้ทาง",
+          txt: "คุณถูกจำกัดสิทธิสมัคร  สว. 2567 เนื่องจากไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือ ไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 (เฉพาะเขตที่มีการเลือกตั้งซ่อม) และไม่ได้แจ้งเหตุไม่ไปใช้สิทธิเลือกตั้ง  ",
+          subtxt: "ตรวจสอบว่าถูกจำกัดสิทธิหรือไม่ ได้ทาง",
           link: "https://boraservices.bora.dopa.go.th/election/absvote/",
           color: "#8aa042",
           not: "ไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 โดยไม่ได้แจ้งเหตุ",

src/components/edit/FormMainEdit.vue

@@ -6,7 +6,7 @@
               :aspect-ratio="1"
               src="@/assets/logo-title.png"
               width="200" 
-    
+              @click="$router.push('/')"
             ></v-img>
             <div class="text-title txt-black">
                 ข้อมูลส่วนตัว

src/components/edit/FormSteperEdit.vue

@@ -616,7 +616,12 @@ export default {
       form3: false,
       form4: false,
       rules: {
-        files: [(files)=> !files || !files.some(file => file.size > 3_097_152) || 'Avatar size should be less than 3 MB!'],
+        files: [
+          (files) =>
+            !files ||
+            !files.some((file) => file.size > 3_097_152) ||
+            "Avatar size should be less than 3 MB!",
+        ],
         space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
         username: (v) =>
           /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%&*|']*$/.test(v) ||
@@ -804,7 +809,7 @@ export default {
         });
         this.option1 = mappedData.filter((item) => item.name !== null);
         this.option2 = mappedData2.filter((item) => item.name !== null);
-        console.log("mappedData", mappedData, opinions1);
+        // console.log("mappedData", mappedData, opinions1);
       }
     },
     onFileChanged(event) {
@@ -823,9 +828,20 @@ export default {
         this.url = null;
       }
     },
+    getUserAfterEdit() {
+      client.user.getSelf.mutate({}).then((data) => {
+        localStorage.setItem("username", data.firstName);
+        localStorage.setItem("img", data.image);
+        this.$store.commit("setUsername", data.firstName);
+        this.$store.commit("setImg", data.image);
+        alert("บันทึกข้อมูลสำเร็จ");
+        this.$router.push("/");
+      });
+    },
 
     async uploadImage() {
       if (!this.file) {
+        this.getUserAfterEdit();
         return;
       }
       let request = await client.user.requestChangeImage.mutate({
@@ -837,7 +853,9 @@ export default {
         method: "POST",
         body: formData,
       }).then(() => {
-        client.user.confirmChangeImage.mutate();
+        client.user.confirmChangeImage.mutate().then(() => {
+          this.getUserAfterEdit();
+        });
         // alert("บันทึกข้อมูลสำเร็จ");
       });
       console.log("done");
@@ -860,12 +878,6 @@ export default {
         };
       });
 
-      // const filterOpt2 = filterOpt.filter((item) => item.choice !== null);
-      // if (filterOpt2.length) {
-      //   this.payload.opinions = filterOpt2;
-      // }
-      console.log("opppp", dataOption, checkOption, changedChoices, filterOpt);
-      // let data1 =this.checkdata
       let data2 = this.payload;
       // data1.group =data1.group.id
       // data1.zone =data1.zone.id
@@ -876,8 +888,8 @@ export default {
       filterOpt.map((x) => {
         client.user.changeOpinion
           .mutate(x)
-          .then((data) => {
+          .then(() => {
-            console.log("data", data);
+            this.getUser();
           })
           .catch((error) => {
             alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
@@ -887,12 +899,14 @@ export default {
 
       client.user.updateUser
         .mutate(data2)
-        .then((data) => {
+        .then(() => {
-          console.log("data", data);
+          // console.log("data", data);
           this.uploadImage();
-          this.getUser();
+          // if (!this.file) {
-          alert("บันทึกข้อมูลสำเร็จ");
+          //   this.getUser("to");
-          this.$router.push("/");
+          // } else {
+          //   this.uploadImage();
+          // }
         })
         .catch((error) => {
           alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
@@ -923,6 +937,7 @@ export default {
           this.optMapData();
           this.url = data.image;
           this.$store.commit("setUsername", data.firstName);
+          this.$store.commit("setImg", data.image);
         })
         .catch((error) => {
           alert("ไม่สามารถโหลดข้อมูลได้");

src/components/form/FormMain.vue

@@ -6,7 +6,7 @@
               :aspect-ratio="1"
               src="@/assets/logo-title.png"
               width="250"
-    
+              @click="$router.push('/')"
             ></v-img>
             <div class="text-title txt-black">
                 แสดงตนเป็นผู้สมัคร

src/components/form/FormSteper.vue

@@ -879,8 +879,10 @@ export default {
         .then((data) => {
           this.login({ cid: data.cid, phone: data.phone });
           localStorage.setItem("username", data.firstName);
+          localStorage.setItem("img", data.image);
           this.$store.commit("setUsername", data.firstName);
-          // this.$store.dispatch('setLocalStorageValue',data.firstName)
+          this.$store.commit("setImg", data.image);
+
         })
         .catch((error) => {
           alert("ไม่สามารถโหลดข้อมูลได้"+ error.message);

src/components/search/SearchMain.vue

@@ -8,10 +8,24 @@
         width="250"
       ></v-img>
       <div class="text-title txt-black">ค้นหาผู้สมัคร สว.</div>
+      <div class="my-5 text-sub2">
+        สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
+        ที่ตัวเองเป็นผู้แสดงตน
+      </div>
       <v-container>
+        <!-- {{ checkdata }} -->
         <v-row>
           <v-col cols="12" md="4">
-            <v-autocomplete
+            <v-text-field
+              v-if="province"
+              label="จังหวัด"
+              variant="solo"
+              v-model="province"
+              :value="province.name"
+              readonly
+            ></v-text-field>
+
+            <!-- <v-autocomplete
               clearable
               label="จังหวัด"
               :items="provinceItems"
@@ -23,9 +37,18 @@
               @update:modelValue="filterData"
               hide-details
             ></v-autocomplete
-          ></v-col>
+          > -->
+          </v-col>
           <v-col cols="12" md="4">
-            <v-autocomplete
+            <v-text-field
+              v-if="province"
+              label="อำเภอ / เขต"
+              variant="solo"
+              v-model="district"
+              :value="district.name"
+              readonly
+            ></v-text-field>
+            <!-- <v-autocomplete
               clearable
               label="อำเภอ / เขต"
               :items="districtItems"
@@ -37,7 +60,8 @@
               hide-details
               :disabled="province == null"
             ></v-autocomplete
-          ></v-col>
+          > -->
+          </v-col>
           <v-col cols="12" md="4">
             <v-autocomplete
               clearable
@@ -84,6 +108,7 @@
 
       <div class="text-center">
         <v-pagination
+          v-if="count > 0"
           v-model="page"
           :length="Math.ceil(count / 10)"
           rounded="circle"
@@ -105,6 +130,7 @@ export default {
   },
   data() {
     return {
+      checkdata: "",
       show: false,
       load: false,
       result: [],
@@ -126,28 +152,22 @@ export default {
       if (offset == 0) {
         this.page = 1;
       }
-      // this.offset = (this.page - 1) * 10;
       let data = {
         offset: offset,
         limit: 10,
-        // group: this.group,
-        // zone: this.district,
       };
       if (this.province) {
-        data.province = this.province;
+        data.province = this.province.id;
+        // data.province = this.province;
       }
       if (this.group) {
         data.group = this.group;
       }
       if (this.district) {
-        data.zone = this.district;
+        data.zone = this.district.id;
       }
-      // for (const key in data) {
+
-      //   if (data[key] === null) {
+      // console.log(data);
-      //     delete data[key];
-      //   }
-      // }
-      console.log(data);
       client.user.getAllUser
         .query(data)
         .then((rs) => {
@@ -177,20 +197,19 @@ export default {
       let data = {
         offset: offset,
         limit: 10,
-        // group: this.group,
-        // zone: this.district,
       };
       if (this.province) {
-        data.province = this.province;
+        data.province = this.province.id;
+        // data.province = this.province;
       }
       if (this.group) {
         data.group = this.group;
       }
       if (this.district) {
-        data.zone = this.district;
+        data.zone = this.district.id;
       }
 
-      console.log(data);
+      // console.log(data);
       client.user.getAllUserCount
         .query(data)
         .then((rs) => {
@@ -235,6 +254,20 @@ export default {
           });
       }
     },
+    getUser(datap) {
+      client.user.getSelf
+        .mutate({})
+        .then((data) => {
+          let province = datap.filter((x) => x.id === data.zone.province);
+          this.province = province[0];
+          this.district = data.zone;
+          this.checkdata = { ...data };
+        })
+        .catch((error) => {
+          alert("ไม่สามารถโหลดข้อมูลได้");
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
   },
   mounted() {
     client.info.getAllGroups
@@ -251,6 +284,7 @@ export default {
       .query({})
       .then((data) => {
         this.provinceItems = data;
+        this.getUser(data);
       })
       .catch((error) => {
         alert("ไม่สามารถโหลดข้อมูลได้");

src/store/index.js

@@ -2,17 +2,24 @@ import { createStore } from "vuex";
 
 export default createStore({
   state: {
-    username:""
+    username:"",
+    img:""
   },
   getters: {
     getUsername: (state) => {
       return state.username
     },
+    getImg: (state) => {
+      return state.img
+    },
   },
   mutations: {
     setUsername: (state, payload) => {
       state.username = payload;
     },
+    setImg: (state, payload) => {
+      state.img = payload;
+    },
   },
   actions: {
     setLocalStorageValue(data) {

src/views/CheckDetail.vue

@@ -106,7 +106,7 @@
           </div>
           <div>
             <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
-            อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกต้ังไม่ว่าคดีนั้นจะถึงที่สุดแล้วหรือไม่
+            อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกตั้งไม่ว่าคดีนั้นจะถึงที่สุดแล้วหรือไม่
           </div>
           <div>
             <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
@@ -167,7 +167,7 @@
           </div>
           <div>
             <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
-            เป็นพนักงานหรือลูกจ้างของหน่วยราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจ
+            เป็นพนักงานหรือลูกจ้างของหน่วยงานราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจ
             หรือเป็นเจ้าหน้าที่อื่นของรัฐ
           </div>
           <div>
@@ -219,13 +219,13 @@
           </div>
           <div>
             <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
-            เป็นหรือเคยเป็นสมาชิกสภาท้องถิ่นหรอืผู้บริหารท้องถิ่น เว้นแต่
+            เป็นหรือเคยเป็นสมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น เว้นแต่
             ได้พ้นจากการเป็นสมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่นมาแล้ว
             ไม่น้อยกว่าห้าปีนับถึงวันสมัครรับเลือก
           </div>
           <div>
             <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
-            เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตาแหน่งสมาชิกสภา ผู้แทนราษฎร
+            เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตำแหน่งสมาชิกสภา ผู้แทนราษฎร
             สมาชิกวุฒิสภา ข้าราชการการเมืองสมาชิกสภาท้องถิ่น
             หรือผู้บริหารท้องถิ่น ผู้สมัครรับเลือกเป็นสมาชิกวุฒิสภาในคราว
             เดียวกัน หรือผู้ดำรงตำแหน่งใดในศาลรัฐธรรมนูญหรือองค์กรอิสระ

src/views/CheckSurvey.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-
   <MainCheckVue/>
   </div>
 </template>

src/views/LoginForm.vue

@@ -1,5 +1,11 @@
 <template>
   <div>
+    <div
+      n
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+    >
       <v-img
         class="mx-auto"
         :aspect-ratio="1"
@@ -74,10 +80,51 @@
         </v-form>
       </v-card>
     </div>
+    <div v-if="getUsername" class="text-normal text-center py-10">
+      <v-icon
+        icon="mdi-alert-circle-outline"
+        size="35"
+        color="#4c884c"
+      ></v-icon>
+      คุณเข้าสู่ระบบอยู่แล้ว
+
+      <div class="mt-10">
+        <v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/">
+          <span class="text-normal"> กลับหน้าหลัก</span>
+
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/logo.png"
+            width="85"
+            style="position: absolute; bottom: -40px; left: -30px"
+          ></v-img>
+        </v-btn>
+        <v-btn
+          elevated
+          color="#DD6C31"
+          class="text-normal btn-w ma-6"
+          height="85"
+          to="/search"
+        >
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/search.png"
+            width="90"
+            style="position: absolute; bottom: -45px; right: 0px"
+          ></v-img>
+          <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
+        </v-btn>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
+import { mapGetters } from "vuex";
 import { client } from "@/utils/trpc";
 export default {
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
   data: () => ({
     form1: false,
     visible: false,
@@ -99,7 +146,9 @@ export default {
         .mutate({})
         .then((data) => {
           localStorage.setItem("username", data.firstName);
+          localStorage.setItem("img", data.image);
           this.$store.commit("setUsername", data.firstName);
+          this.$store.commit("setImg", data.image);
           //   this.$emitter.emit("loginUser", data.firstName );
 
           this.$router.push("/");

src/views/ProfileUser.vue

@@ -1,13 +1,26 @@
 <template lang="">
   <div>
-      <FormMain />
+    <FormMain v-if="getUsername" />
+    <div
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ กรุณาเข้าสู่ระบบ
+    </div>
   </div>
 </template>
 <script>
 import FormMain from "../components/edit/FormMainEdit.vue";
+import { mapGetters } from "vuex";
+
 export default {
   components: { FormMain },
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
 };
 </script>
 <style lang=""></style>
-  

src/views/RegisterForm.vue

@@ -1,12 +1,26 @@
 <template lang="">
   <div>
-    <FormMain />
+    <FormMain v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "/>
+      <div
+      v-if="
+        getUsername"
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ คุณลงทะเบียนแสดงตัวตนแล้ว 
+    </div>
   </div>
 </template>
 <script>
+import { mapGetters } from "vuex";
 import FormMain from "../components/form/FormMain.vue";
 export default {
   components: { FormMain },
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
 };
 </script>
 <style lang=""></style>

src/views/SearchUser.vue

@@ -1,11 +1,24 @@
 <template>
   <div>
-    <FormMain />
+    <FormMain v-if="getUsername" />
+    <div
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ กรุณาเข้าสู่ระบบ
+    </div>
   </div>
 </template>
 <script>
 import FormMain from "../components/search/SearchMain.vue";
+import { mapGetters } from "vuex";
 export default {
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
   components: {
     FormMain,
   },