File name
Commit message
Commit date
05-22
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
File name
Commit message
Commit date
<template>
<div class="content pt50 pb50">
<div class=" w1400">
<div class="page-title point-font mb30">
<p>내 정보</p>
</div>
<UserInfoView :pageId="pageId" @child-mbrVO="mbrVO = $event"/>
<div>
<p>SNS 계정 연동 설정</p>
</div>
<div>
<div v-for="link in linkList" :key="link.id" class="sns-link-item">
<div v-if="linkList.length > 1 && link.lgnOffrType !== 'S'">
<div class="sns-link-info">
<span>{{ convertOffrType(link.lgnOffrType) }}</span>
<!-- <span>{{ link.snsEml }}</span> -->
</div>
<div class="switch-container">
<label class="switch">
<input type="checkbox" v-model="link.linkVtlzYn" @change="toggleLink(link)">
<span class="slider"></span>
</label>
<p>{{ link.linkVtlzYn ? '연동' : '해제' }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import pageAuthMixin from "../../../../../../views/common/pageAuthMixin.js";
import { findAllLink, unlinkAccount, reLinkAccount, setPrimaryProfile } from "../../../../../../resources/api/unified.js";
// COMPONENETS
import UserInfoView from "../../../../../component/userInfo/UserInfoView.vue";
export default {
mixins: [pageAuthMixin],
components: {
UserInfoView,
},
data() {
return {
pageId: this.$store.state.mbrId, // 페이지 아이디
linkList: [], // 연동된 계정 목록
mbrVO: {},
};
},
created() {
this.findAllLink(); // 연동된 계정 목록 조회
},
methods: {
// 연동된 계정 목록 조회
async findAllLink() {
try {
const res = await findAllLink();
if (res.status == 200) {
this.linkList = res.data.data;
}
} catch (error) {
const errorData = error.response?.data;
if (errorData?.message != null && errorData?.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 연동 버튼 클릭
async toggleLink(link) {
const checked = link.linkVtlzYn;
if (!confirm(checked ? "연동을 설정하시겠습니까?" : "연동을 해제하시겠습니까?")) {
link.linkVtlzYn = !checked; // 체크박스 상태 되돌리기
return;
}
const proc = checked ? reLinkAccount : unlinkAccount;
try {
const res = await proc({ lgnOffrType: link.lgnOffrType });
if (res.status == 200) {
alert(res.data.message);
}
} catch (error) {
const errorData = error.response?.data;
if (errorData?.message != null && errorData?.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// SNS 계정 타입 변환
convertOffrType(code) {
switch (code) {
case 'G': return '구글';
case 'K': return '카카오';
case 'N': return '네이버';
case 'S': return '시스템';
default: return '기타';
}
}
},
};
</script>
<style scoped>
.switch-container {
display: flex;
align-items: center;
gap: 10px;
font-family: Arial, sans-serif;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
/* Checked 상태일 때 */
input:checked+.slider {
background-color: #4caf50;
}
input:checked+.slider:before {
transform: translateX(22px);
}
</style>