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="popup-wrap">
<div class="popup-container">
<div class="content" v-if="popup.popupType === 'image'">
<button type="button" class="img-link" ref="imageWrap" @click="fnMove" :title="fileList[0].fileNm + 'page 이동'">
<img
:src="imageUrl"
:alt="fileList[0].fileNm + '.' + fileList[0].extnNm"
class="popup-img" />
</button>
</div>
<div
class="iframe-container content cusor"
v-else-if="popup.popupType === 'video'"
>
<YouTube :src="popup.vdoUrl" ref="youtube" @ready="onReady" />
</div>
</div>
<div class="popup-btn flex justify-end align-center pd10 border-t">
<div class="flex align-center mr10">
<label for="today" class="detail-text cusor">
<input
type="checkbox"
name="today"
id="today"
v-model="isNoShowToday"
/>
오늘 하루 보지 않기
</label>
</div>
<div class="mr10">|</div>
<div class="flex align-center">
<button type="button" class="detail-text" title="닫기" @click="fnClose">닫기</button>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import YouTube from "vue3-youtube";
// API
import { sysDetailProc } from "../../../resources/api/popup";
export default {
components: {
YouTube,
},
data() {
return {
popupId: null, // 팝업 아이디
// 팝업 객체
popup: {},
codeList: [],
fileList: [],
// 오늘 하루 보지 않기 체크 여부
isNoShowToday: false,
// 이미지 주소
imageUrl: null,
};
},
created() {
let urlParams = new URLSearchParams(window.location.search);
this.popupId = decodeURIComponent(urlParams.get("popupId"));
this.fnViewDetail();
},
methods: {
// 영상 자동 재생
onReady() {
this.$refs.youtube.playVideo();
},
// 팝업 조회(상세)
fnViewDetail() {
let data = {
popupId: this.popupId,
};
this.axiosViewDetail(data);
},
async axiosViewDetail(data) {
const vm = this;
try {
const response = await sysDetailProc(data);
this.popup = response.data["data"]["popupVO"];
this.codeList = response.data["data"]["codeList"];
this.fileList = response.data["data"]["fileList"];
if (this.popup.popupType == "image") {
this.downloadFile();
}
} catch (error) {
// alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
alert(vm.$getCmmnMessage('err005'));
}
},
// 팝업 닫기
fnClose() {
if (this.isNoShowToday) {
const today = new Date().toDateString();
this.$cookies.set(this.popupId, today, "1d");
}
if (this.popup.popupType == "image") {
window.URL.revokeObjectURL(this.imageUrl);
}
window.close();
},
// axios: 첨부파일 다운로드
async downloadFile() {
const vm = this;
const file = this.fileList[0];
try {
const response = await axios({
url: "/file/fileDownload.json", // URL 경로 확인
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
Authorization: this.$store.state.authorization,
},
data: file.fileId,
responseType: "blob",
});
this.imageUrl = window.URL.createObjectURL(
new Blob([response.data], { type: "image/" + file.extnNm })
);
} catch (error) {
// alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
alert(vm.$getCmmnMessage('err005'));
}
},
fnMove() {
window.opener.location = this.popup.linkUrl;
this.fnClose();
},
},
};
</script>