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.popupTypeCd === 'image'">
<button type="button" class="img-link" ref="imageWrap" @click="fnMove">
<img
:src="$replaceImagePath(fileList[0].ablstPathNm)"
:alt="fileList[0].fileNm + '.' + fileList[0].extnNm"
class="popup-img"/>
</button>
</div>
<div
class="iframe-container content cusor"
v-else-if="popup.popupTypeCd === 'video'"
>
<YouTube :src="popup.vdoUrlAddr" 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) {
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(this.$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 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시스템관리자에게 문의하세요.");
// }
// },
fnMove() {
window.open(this.popup.linkUrlAddr, '_blank')
// window.opener.location = this.popup.linkUrlAddr;
this.fnClose();
},
},
};
</script>