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>
<details open class="form-table-style mb30">
<summary class="point-font2">
<p class="summary-style pl10">기본정보</p>
</summary>
<div class="pt10 pb10">
<table class="form-table">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">아이디</label>
<input
type="text"
class="full-input"
v-model="mbrVO.lgnId"
disabled
/>
</div>
</td>
<td>
<div class="gd-12 pr0">
<label for="" class="form-title point-font2 mb10">이름</label>
<input
type="text"
class="full-input"
v-model="mbrVO.mbrNm"
disabled
/>
</div>
</td>
</tr>
<tr v-if="showOpt.isMblNo || showOpt.isTelNo">
<td>
<div v-if="showOpt.isMblNo" class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">
휴대폰번호
</label>
<input
type="text"
class="full-input"
v-model="mbrVO.mblTelno"
disabled
/>
</div>
</td>
<td>
<div v-if="showOpt.isTelNo" class="gd-12 pr0">
<label for="" class="point-font2 mb10">전화번호</label>
<input
type="text"
class="full-input"
v-model="mbrVO.telno"
disabled
/>
</div>
</td>
</tr>
<tr v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree">
<td>
<div v-if="showOpt.isEml" class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">이메일</label>
<div class="flex align-center">
<div class="gd-3 pl0">
<input
type="text"
class="full-input"
v-model="email.id"
disabled
/>
</div>
<div>@</div>
<div class="gd-3">
<select class="full-select" v-model="email.select" disabled>
<option value="">선택하세요</option>
<option value="self">직접입력</option>
<option value="naver.com">naver.com</option>
<option value="google.com">google.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="nate.com">nate.com</option>
<option value="kakao.com">kakao.com</option>
</select>
</div>
<div class="gd-3" v-show="email.select == 'self'">
<input
type="text"
class="full-input"
v-model="email.address"
disabled
/>
</div>
</div>
</div>
</td>
<td>
<div class="gd-12 pr0">
<div class="flex">
<div v-if="showOpt.isSmsAgree" class="gd-6 pl0 pr0">
<label for="" class="form-title point-font2 mb10">
문자수신
</label>
<div class="flex align-center no-gutters">
<div class="gd-4">
<input
type="radio"
name="smsRcptnAgreYn"
id="smsY"
class="mr5"
v-model="mbrVO.smsRcptnAgreYn"
value="Y"
disabled
/>
<label for="smsY">수신</label>
</div>
<div class="gd-4">
<input
type="radio"
name="smsRcptnAgreYn"
id="smsN"
class="mr5"
v-model="mbrVO.smsRcptnAgreYn"
value="N"
disabled
/>
<label for="smsN">미수신</label>
</div>
</div>
</div>
<div v-if="showOpt.isEmlAgree" class="gd-6 pl0 pr0">
<label for="" class="form-title point-font2 mb10">
이메일수신
</label>
<div class="flex align-center no-gutters">
<div class="gd-4">
<input
type="radio"
name="emlRcptnAgreYn"
id="y"
class="mr5"
v-model="mbrVO.emlRcptnAgreYn"
value="Y"
disabled
/>
<label for="y">수신</label>
</div>
<div class="gd-4">
<input
type="radio"
name="emlRcptnAgreYn"
id="n"
class="mr5"
v-model="mbrVO.emlRcptnAgreYn"
value="N"
disabled
/>
<label for="n">미수신</label>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<template v-if="showOpt.isAddr">
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">
우편번호
</label>
<div class="flex align-center">
<div class="gd-10 pl0 pr0">
<input
type="text"
class="full-input"
v-model="mbrVO.zip"
disabled
/>
</div>
</div>
</div>
</td>
<td>
<div class="gd-12 pr0">
<label for="" class="form-title point-font2 mb10">주소</label>
<input
type="text"
class="full-input"
v-model="mbrVO.addr"
disabled
/>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="gd-12 pl0 pr0">
<label for="" class="form-title point-font2 mb10">
상세주소
</label>
<input
type="text"
class="full-input"
v-model="mbrVO.daddr"
disabled
/>
</div>
</td>
</tr>
</template>
<tr v-if="showOpt.isStts && pageRole == 'adm'">
<td>
<div class="flex gd-12 pl0">
<div class="gd-6 pl0">
<label for="" class="form-title point-font2 mb10">
회원상태
</label>
<select class="full-select" v-model="mbrVO.mbrStts" disabled>
<option value="1">승인</option>
<option value="2">승인대기</option>
<option value="0">탈퇴</option>
<option value="3">차단</option>
</select>
</div>
<div class="gd-6 pr0">
<label for="" class="point-font2 mb10">차단일</label>
<input
type="date"
class="full-input"
v-model="mbrVO.cntrlDt"
disabled
/>
</div>
</div>
</td>
<td>
<div class="gd-12 pr0">
<label for="" class="point-font2 mb10">차단 사유</label>
<input
type="text"
class="full-input"
v-model="mbrVO.cntrlRsn"
disabled
/>
</div>
</td>
</tr>
<tr v-if="showOpt.isAuthor && pageRole == 'adm'">
<td colspan="2">
<UserAuthorList :mbrVO="mbrVO" editMode="view" />
</td>
</tr>
</table>
</div>
</details>
<div class="flex justify-end align-center no-gutters">
<div v-if="pageRole == 'adm'" class="gd-1 mr10">
<button class="large-btn gray-border-btn" @click="fnList">목록</button>
</div>
<div class="gd-1 mr10">
<button
v-if="pageAuth.mdfcnAuthrt == 'Y'"
:class="{
'large-btn': true,
'blue-border-btn': pageRole == 'adm',
'green-border-btn': pageRole == 'portal',
}"
@click="fnUpdate"
>
수정
</button>
</div>
<div v-if="pageRole == 'adm' && pageAuth.delAuthrt == 'Y'" class="gd-1">
<button class="large-btn red-border-btn" @click="fnDelete">삭제</button>
</div>
</div>
</template>
<script>
// RESOURCES
import {
defaultAdminInfoParams,
defaultUserInfoParams,
} from "../../../resources/js/defaultUserInfoParams";
// COMPONENT
import UserAuthorList from "./UserAuthorList.vue";
// API
import { mbrDetailProc } from "../../../resources/api/mbrInfo";
import { mbrDeleteProc } from "../../../resources/api/mbrInfo";
export default {
components: { UserAuthorList },
props: {
pageId: {
type: String,
},
pageNm: {
type: String,
default: "user",
},
},
data() {
return {
pageRole: this.$store.state.userType, // 유저 권한
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth, // 페이지 권한
mbrVO: {},
showOpt: { ...defaultUserInfoParams }, // 유저정보 표시 여부 객체
email: {
id: null,
select: "",
address: null,
},
};
},
created() {
this.fnMbrViewDetail();
if (this.pageNm == "adm" && this.pageRole == "adm") {
this.showOpt = defaultAdminInfoParams;
}
},
computed: {
routerPaths() {
return {
list: this.$store.state.path + "/list.page",
view: this.$store.state.path + "/view.page",
insert: this.$store.state.path + "/insert.page",
};
},
},
methods: {
// axios: 조회(상세)
async fnMbrViewDetail() {
// 데이터 세팅
const data = { mbrId: this.pageId };
// 실행
try {
const response = await mbrDetailProc(data);
if (this.pageRole == "portal") {
for (let author of response.data.data.authorList) {
if (author.authrtCd == "ROLE_ADMIN") {
this.showOpt = defaultAdminInfoParams;
}
}
}
this.mbrVO = response.data.data;
this.changeFormat(); // 휴대폰번호, 전화번호, 이메일 표기변경
} catch (error) {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
},
// 표기변경
changeFormat() {
// 휴대폰 번호
if (this.mbrVO.mblTelno != null) {
this.mbrVO["mblTelno"] = this.telnoReplace(this.mbrVO.mblTelno);
}
// 전화번호
if (this.mbrVO.telno != null) {
this.mbrVO["telno"] = this.telnoReplace(this.mbrVO.telno);
}
// 이메일
if (this.mbrVO.eml != null) {
const email = this.mbrVO.eml.split("@");
this.email.id = email[0];
switch (email[1]) {
case "naver.com":
case "google.com":
case "hanmail.net":
case "nate.com":
case "kakao.com":
this.email.select = email[1];
break;
default:
this.email.select = "self";
this.email.address = email[1];
break;
}
}
},
// 번호 표기변경(2,3-3,4-4)
telnoReplace(data) {
const number = data.replace(/[^0-9]/g, "");
return number.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
},
// 목록
fnList() {
this.$router.push({
path: this.routerPaths.list,
});
},
// 수정
fnUpdate() {
this.$router.push({
path: this.routerPaths.insert,
query: { pageId: this.pageId },
});
},
// 삭제
async fnDelete() {
var isDelete = confirm("해당 회원 정보를 삭제하시겠습니까?");
if (!isDelete) {
return;
}
// 데이터 세팅
let data = this.mbrVO;
// 실행
try {
const response = await mbrDeleteProc(data);
alert(response.data["message"]);
this.fnList();
} catch (error) {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
},
},
};
</script>