From ba0ed54e127849613c9df36fc6b75f66cc56875d Mon Sep 17 00:00:00 2001 From: Jarinya Date: Fri, 17 May 2024 20:16:57 +0700 Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20UI=20mob?= =?UTF-8?q?ile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 33 ++++++++ package.json | 1 + src/components/HeaderHome.vue | 14 +++- src/components/edit/FormSteperEdit.vue | 100 ++++++++++++++++++------- src/components/form/FormSteper.vue | 71 +++++++++++++----- src/config.js | 1 + src/main.js | 6 +- src/views/RegisterForm.vue | 6 +- 8 files changed, 184 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d21f8e..657b608 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "thai-id-validator": "^1.1.3", "vue": "^3.2.13", "vue-router": "^4.3.0", + "vue-sweetalert2": "^5.0.10", "vuetify": "^3.0.0-beta.0", "vuex": "^4.0.0", "webfontloader": "^1.0.0" @@ -12995,6 +12996,14 @@ "node": ">= 10" } }, + "node_modules/sweetalert2": { + "version": "11.4.4", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.4.tgz", + "integrity": "sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w==", + "funding": { + "url": "https://sweetalert2.github.io/#donations" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -13817,6 +13826,17 @@ "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", "dev": true }, + "node_modules/vue-sweetalert2": { + "version": "5.0.10", + "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.10.tgz", + "integrity": "sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==", + "dependencies": { + "sweetalert2": "11.4.4" + }, + "peerDependencies": { + "vue": "*" + } + }, "node_modules/vue-template-es2015-compiler": { "version": "1.9.1", "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", @@ -24924,6 +24944,11 @@ } } }, + "sweetalert2": { + "version": "11.4.4", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.4.tgz", + "integrity": "sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w==" + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -25565,6 +25590,14 @@ } } }, + "vue-sweetalert2": { + "version": "5.0.10", + "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.10.tgz", + "integrity": "sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==", + "requires": { + "sweetalert2": "11.4.4" + } + }, "vue-template-es2015-compiler": { "version": "1.9.1", "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", diff --git a/package.json b/package.json index de8ed76..19e86c8 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "thai-id-validator": "^1.1.3", "vue": "^3.2.13", "vue-router": "^4.3.0", + "vue-sweetalert2": "^5.0.10", "vuetify": "^3.0.0-beta.0", "vuex": "^4.0.0", "webfontloader": "^1.0.0" diff --git a/src/components/HeaderHome.vue b/src/components/HeaderHome.vue index 24bc00e..9b5246f 100644 --- a/src/components/HeaderHome.vue +++ b/src/components/HeaderHome.vue @@ -9,9 +9,14 @@ src="../assets/logo-title.png" width="600" @click="$router.push('/')" + class="logo-home" > - +
สว. ระบบใหม่ “แบ่งกลุ่มอาชีพ” และ “เลือกกันเอง” @@ -201,6 +206,13 @@ export default { padding: 7px 10px; } @media only screen and (min-width: 0px) and (max-width: 700px) { + #app > div > div > main > div:nth-child(2) > div > div:nth-child(1) > div.text-normal.mb-5 > div > div > div.v-col-sm-12.v-col-md.v-col-auto > div{ + height: 171px !important; + } + .logo-home{ + height: 300px !important; + width: auto; + } .bg-curve { height: 450px; position: relative; diff --git a/src/components/edit/FormSteperEdit.vue b/src/components/edit/FormSteperEdit.vue index c554c66..321caf9 100644 --- a/src/components/edit/FormSteperEdit.vue +++ b/src/components/edit/FormSteperEdit.vue @@ -52,7 +52,7 @@
กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123 - * ใช้เป็น username + * ชื่อผู้ใช้งาน (username)
กรอกโทรศัพท์ 10 หลัก เช่น 0812345678 - * ใช้เป็น password + * รหัสผ่าน (password)
ถัดไปถัดไป mdi-chevron-right @@ -283,7 +283,7 @@ class="float-left" size="large" variant="tonal" - >ก่อนหน้า mdi-chevron-left ก่อนหน้า @@ -297,7 +297,7 @@ size="large" variant="tonal" class="float-right" - >ถัดไปถัดไป mdi-chevron-right @@ -418,7 +418,7 @@ variant="tonal" class="float-right" size="large" - >ถัดไปถัดไป mdi-chevron-right @@ -561,7 +561,7 @@ class="float-left" size="large" variant="tonal" - >ก่อนหน้า mdi-chevron-left ก่อนหน้า @@ -585,7 +585,7 @@ import { mapGetters } from "vuex"; // client.info.getAllGroups.query({}).then(console.log); export default { - components: { }, + components: {}, watch: { image(val) { console.log(val); @@ -952,8 +952,16 @@ export default { this.$store.commit("setUsername", data.firstName); this.$store.commit("setImg", data.image); this.load = false; - alert("บันทึกข้อมูลสำเร็จ"); - this.$router.push("/"); + this.$swal + .fire({ + title: "บันทึกข้อมูลสำเร็จ", + icon: "success", + timer: 3000, + showConfirmButton: false, + }) + .then(() => { + this.$router.push("/"); + }); }); }, @@ -971,17 +979,17 @@ export default { method: "POST", body: formData, }).then(() => { - client.user.confirmChangeImage.mutate().then(() => { - this.getUserAfterEdit(); - }).catch((error) => { - - console.log('error.message',error.message); - alert( - "บันทึกรูปภาพไม่สำเร็จ!" - ); - this.getUserAfterEdit(); - // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message); - + client.user.confirmChangeImage + .mutate() + .then(() => { + this.getUserAfterEdit(); + }) + .catch((error) => { + this.load = false; + console.log("error.message", error.message); + alert("บันทึกรูปภาพไม่สำเร็จ!"); + this.getUserAfterEdit(); + // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message); }); // alert("บันทึกข้อมูลสำเร็จ"); }); @@ -1037,7 +1045,21 @@ export default { // } }) .catch((error) => { - alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message); + this.load = false; + console.log("eeee" + error.message); + if ( error.message == "Unable to create new user") { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: "บัญชีผู้ใช้งานซ้ำ", + icon: "error", + }); + } else { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: error.message, + icon: "error", + }); + } console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error); }); }, @@ -1051,7 +1073,21 @@ export default { this.$router.push("/"); }) .catch((error) => { - alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message); + this.load = false; + console.log("eeee" + error.message); + if ( error.message == "Unable to create new user") { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: "บัญชีผู้ใช้งานซ้ำ", + icon: "error", + }); + } else { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: error.message, + icon: "error", + }); + } console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error); }); }, @@ -1068,7 +1104,21 @@ export default { this.$store.commit("setImg", data.image); }) .catch((error) => { - alert("ไม่สามารถโหลดข้อมูลได้"); + this.load = false; + console.log("eeee" + error.message); + if ( error.message == "Unable to create new user") { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: "บัญชีผู้ใช้งานซ้ำ", + icon: "error", + }); + } else { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: error.message, + icon: "error", + }); + } console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error); }); }, diff --git a/src/components/form/FormSteper.vue b/src/components/form/FormSteper.vue index 3336061..88bc351 100644 --- a/src/components/form/FormSteper.vue +++ b/src/components/form/FormSteper.vue @@ -53,7 +53,7 @@
กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123 - * ใช้เป็น username + * ชื่อผู้ใช้งาน (username)
กรอกโทรศัพท์ 10 หลัก เช่น 0812345678 - * ใช้เป็น password + * รหัสผ่าน (password) ถัดไปถัดไป mdi-chevron-right @@ -396,7 +396,7 @@ variant="tonal" class="float-right" size="large" - >ถัดไปถัดไป mdi-chevron-right @@ -541,7 +541,7 @@ class="float-left" size="large" variant="tonal" - >ก่อนหน้า mdi-chevron-left ก่อนหน้า @@ -955,15 +955,26 @@ export default { if (this.file) { this.uploadImage(); } else { - alert( - "บันทึกรูปภาพไม่สำเร็จ!" - ); + alert("บันทึกรูปภาพไม่สำเร็จ!"); this.getUser(); - } }) .catch((error) => { - alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message); + this.load = false; + console.log("eeee" + error.message); + if ( error.message == "Unable to create new user") { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: "บัญชีผู้ใช้งานซ้ำ", + icon: "error", + }); + } else { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: error.message, + icon: "error", + }); + } console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error); }); }, @@ -974,10 +985,33 @@ export default { this.load = false; this.$store.commit("setCheckLogin", false); localStorage.setItem("token", data.token); - this.$router.push("/"); + this.$swal + .fire({ + title: "บันทึกข้อมูลสำเร็จ", + icon: "success", + timer: 3000, + showConfirmButton: false, + }) + .then(() => { + this.$router.push("/"); + }); }) .catch((error) => { - alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message); + this.load = false; + console.log("eeee" + error.message); + if ( error.message == "Unable to create new user") { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: "บัญชีผู้ใช้งานซ้ำ", + icon: "error", + }); + } else { + this.$swal.fire({ + title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ", + text: error, + icon: "error", + }); + } console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error); }); }, @@ -990,9 +1024,10 @@ export default { localStorage.setItem("img", data.image); this.$store.commit("setUsername", data.firstName); this.$store.commit("setImg", data.image); - alert( - "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์" - ); + + // alert( + // "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์" + // ); this.login({ cid: data.cid, phone: data.phone }); }) diff --git a/src/config.js b/src/config.js index 62170d8..7b781ca 100644 --- a/src/config.js +++ b/src/config.js @@ -1,3 +1,4 @@ export const CONFIG = { + // api_url: "http://178.128.18.156:3000", api_url: process.env.VUE_APP_API_URL || "http://localhost:3000", }; diff --git a/src/main.js b/src/main.js index 565f063..019ee51 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,10 @@ import store from "./store"; import vuetify from "./plugins/vuetify"; import { loadFonts } from "./plugins/webfontloader"; import router from './router' + +import VueSweetalert2 from 'vue-sweetalert2'; +import 'sweetalert2/dist/sweetalert2.min.css'; + loadFonts(); -createApp(App).use(store).use(vuetify).use(router).mount("#app"); +createApp(App).use(store).use(vuetify).use(VueSweetalert2).use(router).mount("#app"); diff --git a/src/views/RegisterForm.vue b/src/views/RegisterForm.vue index b3d149d..1a3bfa9 100644 --- a/src/views/RegisterForm.vue +++ b/src/views/RegisterForm.vue @@ -3,14 +3,14 @@ -
ไม่สามารถเข้าถึงได้ คุณลงทะเบียนแสดงตัวตนแล้ว -
+ -->