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
2024-11-19
<template>
<Header_t></Header_t>
<div class="main-wrap">
<div class="title-box flex justify-between mb20">
<p class="title">우리 아이 사진첩</p>
</div>
<div class="myphoto mb30">
<div>
<div class="title-box flex justify-end mb40">
<p class="class-p">반</p>
<select @change="handleClassChange">
<option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId">
{{ classItem.sclsNm }}
</option>
</select>
</div>
<div class="btnGroup" style="display: flex; flex-direction: column">
<button
v-for="n in totalPages"
:key="n"
@click="changePage(n)"
type="button"
title="페이지 버튼"
class="tab-btn"
>
<img v-if="currentPage !== n" src="../../../resources/img/new_img/photobook/page.png" alt="" />
<img v-else src="../../../resources/img/new_img/photobook/page_click.png" alt="" />
<p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
</button>
</div>
<div v-if="selectedTab === 'tab1'" class="tab-box">
<div class="flex justify-between" style="margin-right: -82px; margin-left: -47px">
<!-- 왼쪽에 4개의 사진 -->
<div class="left-side">
<div
v-for="(photo, index) in (photoList?.result || []).slice(0, 4)"
:key="index"
class="photo"
:style="{ transform: getRotation(index) }"
@click="buttonSearch(photo)"
>
<div class="class">
<div class="box">
<div class="photo-container">
<img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" />
</div>
</div>
<div class="photo-text mt20 ml30">
<div class="member ml30">{{ photo.likeData }}</div>
<div class="title2-photo">{{ photo.unitName }}</div>
</div>
</div>
</div>
</div>
<!-- 오른쪽에 4개의 사진 -->
<div class="right-side">
<div
v-for="(photo, index) in (photoList?.result || []).slice(4, 8)"
:key="index + 4"
class="photo"
:style="{ transform: getRotation(index + 4) }"
style="width: fit-content"
@click="buttonSearch(photo)"
>
<div class="class" style="width: 24rem; height: 21rem">
<div class="box">
<div class="photo-container">
<img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" />
</div>
</div>
<div class="photo-text mt20 ml30">
<div class="member ml30">{{ photo.likeData }}</div>
<div class="title2-photo">{{ photo.unitName }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="popup-wrap" v-show="searchOpen">
<div class="popup-box">
<div class="flex mb10 justify-between">
<p class="popup-title">알림</p>
<button type="button" class="popup-close-btn" @click="closeBtn">
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
</button>
</div>
<div class="photo-modal flex justify-between mt20" v-if="photoData.length > 0">
<div class="box">
<div>
<img
:src="fetchImage(photoData[0].fileRpath)"
alt=""
style="width: 640px; height: 480px"
/>
</div>
</div>
<div class="photo-title-container">
<div class="title1">
{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em
>친구
</div>
<p class="title2 date">{{ photoData[0].photoDate }}</p>
</div>
</div>
<div class="text flex justify-between mt20" v-else>
<span class="title1">데이터를 불러올 수 없습니다.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
import { mdilArrowRight } from '@mdi/light-js';
import ProgressBar from '../../component/ProgressBar.vue';
import axios from 'axios';
import Header_t from '../../layout/Header_t.vue';
export default {
data() {
return {
classList: [],
photoList: [],
photoData: [],
currentPage: 1,
pageSize: 8,
totalPages: 1,
mdiWindowClose: mdiWindowClose,
selectedTab: 'tab1',
mdiMagnify: mdiMagnify,
mdilArrowRight: mdilArrowRight,
timer: '00:00',
progress: 20,
showModal: false,
searchOpen: false,
searchOpen2: false,
selectedSclsId: null,
};
},
methods: {
stdClassesSelectList: function () {
const vm = this;
axios({
url: '/classes/selectClass.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
userId: '1',
},
})
.then(function (response) {
console.log('classList - response : ', response.data);
vm.classList = response.data.data;
vm.currentPage = 1;
vm.selectedSclsId = vm.classList[0].sclsId;
vm.stdPhotoSelectList();
})
.catch(function (error) {
console.log('classList - error : ', error);
alert('학생 반 조회에 오류가 발생했습니다.');
});
},
handleClassChange(event) {
this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
this.currentPage = 1; // 페이지 초기화
this.stdPhotoSelectList(); // 함수 호출
},
stdPhotoSelectList: function (scsId) {
const vm = this;
axios({
url: '/photo/stdPhotoList.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
stdId: '1',
sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
page: vm.currentPage,
pageSize: vm.pageSize,
},
})
.then(function (response) {
console.log('photoList - response : ', response.data);
vm.photoList = response.data;
vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
})
.catch(function (error) {
console.log('photoList - error : ', error);
alert('반별 내 사진 조회에 오류가 발생했습니다.');
});
},
getRotation(index) {
const rotations = [2, -1, 1, -2, 1, -1];
return `rotate(${rotations[index]}deg)`;
},
changePage(pageNumber) {
this.currentPage = pageNumber;
this.stdPhotoSelectList(this.selectedClassId);
},
closeModal() {
this.showModal = false;
},
buttonSearch(photo) {
if (!photo) return;
const vm = this;
this.searchOpen = true;
axios({
url: '/photo/photoDetail.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
photoId: photo.photoId,
},
})
.then(function (response) {
console.log('photoData - response : ', response.data);
vm.photoData = response.data;
})
.catch(function (error) {
console.log('photoData - error : ', error);
alert('사진 조회에 오류가 발생했습니다.');
});
},
closeBtn() {
this.searchOpen = false;
},
goToPage(page) {
this.$router.push({ name: page });
},
increaseProgress() {
if (this.progress < 100) {
this.progress += 10;
}
},
showConfirm(type) {
let message = '';
if (type === 'cancel') {
message = '삭제하시겠습니까?';
} else if (type === 'reset') {
message = '초기화하시겠습니까?';
} else if (type === 'save') {
message = '등록하시겠습니까?';
}
if (confirm(message)) {
this.goBack();
}
},
// 사진 경로 불러오기
imageSearch(photo) {
if (!photo) return;
const vm = this;
this.searchOpen = true;
axios({
url: '/photo/photoDetail.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
photoId: photo.photoId,
},
})
.then(function (response) {
console.log('photoData - response : ', response.data);
vm.photoData = response.data;
})
.catch(function (error) {
console.log('photoData - error : ', error);
alert('사진 조회에 오류가 발생했습니다.');
});
},
fetchImage(fileRpath) {
return 'http://165.229.169.113:9080/' + fileRpath;
},
},
watch: {},
computed: {
currentPhotos() {
// 현재 페이지에 해당하는 사진들만 반환
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.photoList.result.slice(start, end);
},
},
components: {
Header_t: Header_t,
SvgIcon,
ProgressBar,
},
mounted() {
console.log('Main2 mounted');
this.stdClassesSelectList();
},
};
</script>
<style scoped>
.btnGroup button {
cursor: pointer;
z-index: 100000;
}
.popup-wrap {
z-index: 10000000;
}
.popup-box {
top: 500px;
width: 950px;
height: 650px;
left: 55rem;
}
.class {
width: 260px;
height: 200px;
background-repeat: no-repeat;
}
.photo-container {
text-align: center;
}
.photo-container img {
width: 150px;
height: 110px;
height: 105px;
position: relative;
top: 23px;
}
.photo-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.photo-modal {
flex-direction: column;
}
.photo-modal .box {
text-align: center;
}
.photo-title-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
select {
border-radius: 16px;
position: absolute;
top: 42px;
right: 33px;
}
.class-p {
font-size: 23px;
position: absolute;
top: 52px;
right: 218px;
}
.left-side,
.right-side {
width: 48%; /* 좌우로 나눔 */
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.title2-photo {
font-size: 15px;
font-weight: bold;
font-family: 'ONEMobileOTF-Regular';
max-width: 175px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-wrap {
width: 134rem; /* 기존 크기 유지 */
height: 70rem; /* 기존 크기 유지 */
background-color: #ffffffa6;
border-radius: 10px;
position: absolute;
right: calc(50% - 67rem); /* 너비의 절반을 뺀 값으로 중앙 배치 */
top: calc(50% - 35rem); /* 높이의 절반을 뺀 값으로 중앙 배치 */
z-index: 1;
}
</style>