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="title-box flex justify-between mb20">
<p class="title">내 사진첩</p>
</div>
<div class="myphoto mb30">
<div>
<div class="title-box flex justify-end mb40">
<select name="" id="">
<option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="currentPage = 1; stdPhotoSelectList(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/btn49_15s_normal.png" alt="">
<img v-else src="../../../resources/img/btn49_15s_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">
<div v-for="(photo, index) in (photoList?.result || []).slice(0, 3)" :key="index" class="photo" :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
<div class="class">
<div class="box">
<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
</div>
<div class="text flex justify-between mt20">
<span class="member ml30">{{ photo.likeData }}</span>
<p class="title2">{{ photo.unitName }}</p>
</div>
</div>
</div>
</div>
<div class="flex justify-between mt50">
<div v-for="(photo, index) in (photoList?.result || []).slice(3, 6)" :key="index + 3" class="photo" :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
<div class="class">
<div class="box">
<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
</div>
<div class="text flex justify-between mt20">
<span class="member ml30">{{ photo.likeData }}</span>
<p class="title2">{{ photo.unitName }}</p>
</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="box">
<div><img src="../../../resources/img/img184_91t.png" alt=""></div>
</div>
<div class="text flex justify-between mt20" v-if="photoData.length > 0">
<span class="title1">{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em>친구</span>
<p class="title2 date">{{ photoData[0].photoDate }}</p>
</div>
<div class="text flex justify-between mt20" v-else>
<span class="title1">데이터를 불러올 수 없습니다.</span>
</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";
export default {
data() {
return {
classList: [],
photoList: [],
photoData: [],
currentPage: 1,
pageSize: 6,
totalPages: 1,
mdiWindowClose: mdiWindowClose,
selectedTab: 'tab1',
mdiMagnify: mdiMagnify,
mdilArrowRight: mdilArrowRight,
timer: "00:00",
progress: 20,
showModal: false,
searchOpen: false,
searchOpen2: false,
}
},
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;
})
.catch(function (error) {
console.log("classList - error : ", error);
alert("학생 반 조회에 오류가 발생했습니다.");
});
},
stdPhotoSelectList: function (sclsId) {
const vm = this;
axios({
url: "/photo/stdPhotoList.json",
method: "post",
headers:{
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"stdId":"1",
"sclsId":"1", // 여기에 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();
}
},
},
watch: {
},
computed: {
currentPhotos() {
// 현재 페이지에 해당하는 사진들만 반환
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.photoList.result.slice(start, end);
}
},
components: {
SvgIcon,
ProgressBar
},
mounted() {
console.log('Main2 mounted');
this.stdClassesSelectList();
this.stdPhotoSelectList();
}
}
</script>
<style>
.btnGroup button {
cursor: pointer;
z-index: 100000;
}
</style>