File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="container">
<div class="page-titleZone flex justify-between align-center" style="width: 25%; margin: 0 auto">
<p class="main-title flex80">내정보 관리</p>
</div>
<br />
<div class="row form-box" style="width: 25%; margin: 0 auto">
<div class="content-titleZone">
<p class="box-title">내정보 수정</p>
</div>
<div class="table-zone">
<table class="form-table2">
<colgroup>
<col style="width: 30%" />
<col style="width: 70%" />
</colgroup>
<tbody>
<tr>
<th>아이디</th>
<td>{{ userEditData.userId }}</td>
</tr>
<tr>
<th>이름</th>
<td>
<input type="text" class="full-input" id="userNm" v-model="userEditData.userNm" />
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input type="text" class="full-input" id="email" v-model="userEditData.userEmail" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-end">
<button class="blue-btn small-btn" @click="updateUserData">저장</button>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import store from "../AppStore";
export default {
data() {
return {
userId: store.state.loginUser.user_id,
userEditData: {
userId: null,
userPassword: null,
userNm: null,
userEmail: null,
},
userOriginData: {},
changePw: null,
changePwConfirm: null,
};
},
mounted() {
this.getUserData();
},
methods: {
getUserData: function () {
var vm = this;
axios({
url: "/mypage/" + vm.userId,
method: "get",
headers: { "Content-Type": "application/json; charset=UTF-8" },
})
.then(function (response) {
vm.userEditData = response.data.resultData.selectUserData;
vm.userOriginData = Object.assign({}, vm.userEditData);
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
updateUserData: async function () {
var vm = this;
if (
JSON.stringify(vm.userEditData) === JSON.stringify(vm.userOriginData)
) {
vm.$showAlert("내정보 수정", "수정된 정보가 없습니다.");
return;
}
if (vm.$isEmpty(vm.userEditData.userNm)) {
vm.$showAlert("내정보 수정", "이름을 입력해주세요.");
document.getElementById("userNm").focus();
return;
}
if (vm.$isEmpty(vm.userEditData.userEmail)) {
vm.$showAlert("내정보 수정", "이메일을 입력해주세요.");
document.getElementById("email").focus();
return;
}
if (vm.userEditData.userEmail && !vm.$email(vm.userEditData.userEmail)) {
vm.$showAlert("내정보 수정", "이메일 형식이 올바르지 않습니다.");
document.getElementById("email").focus();
return false;
}
axios
.put("/mypage", vm.userEditData)
.then(function (response) {
vm.$showAlert("내정보 수정", "내정보가 수정되었습니다.");
console.log("before: ", vm.$store.state.loginUser);
let loginUser = vm.$store.state.loginUser;
loginUser.user_name = vm.userEditData.userNm;
loginUser.user_email = vm.userEditData.userEmail;
// 변경된 내용 스토어에 반영
vm.$store.commit("setLoginUser", loginUser);
console.log("after: ", vm.$store.state.loginUser);
vm.getUserData();
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
},
};
</script>