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>
<div class="content-wrap">
<div class="flex justify-center">
<div>
<div class="frame title-box">
<div class="photo" style="height: 100%">
<img :src="imageSrc" alt="" style="height: 100%" />
</div>
<p class="title mt20" style="color: #fff">{{ today }} 1단원 완료!</p>
</div>
<div class="btn-wrap flex justify-center mt40" style="gap: 40px">
<button class="login-btn" @click="recapture()">
<img src="../../../resources/img/btn07_s.png" alt="" />
<p>다시 찍기</p>
</button>
<button class="login-btn" type="submit" @click="insertPhoto()">
<img src="../../../resources/img/btn07_s.png" alt="" />
<p>완료</p>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items: [
{
imgSrc1: 'client/resources/img/btn20_75s_normal.png',
imgSrc2: 'client/resources/img/btn20_75s_click.png',
},
{
imgSrc1: 'client/resources/img/btn21_75s_normal.png',
imgSrc2: 'client/resources/img/btn21_75s_click.png',
},
],
timer: '00',
selectedIndex: 0,
imageSrc: '',
file: '',
fileId: '',
unit_id: '',
book_id: '',
today: '',
};
},
methods: {
recapture() {
this.$router.push({
name: 'Dashboard',
query: { reCapture: 'true', unit_id: this.unit_id, book_id: this.book_id },
});
},
async fetchImageAsFile(imageUrl, filename = 'image.jpg') {
try {
const response = await fetch(imageUrl);
const blob = await response.blob();
const file = new File([blob], filename, { type: blob.type });
return file;
} catch (error) {
console.error('이미지 변환 오류:', error);
throw new Error('이미지 변환에 실패했습니다.');
}
},
async fetchPhoto() {
const image = this.$route.query.image;
if (image) {
this.imageSrc = decodeURIComponent(image);
try {
this.file = await this.fetchImageAsFile(this.imageSrc, 'image.jpg');
} catch (error) {
console.error('파일 변환 오류:', error);
}
}
},
async uploadFiles(file) {
if (!file) {
console.error('파일이 없습니다.');
throw new Error('파일이 없습니다.');
}
const formData = new FormData();
formData.append('files', file);
try {
const response = await axios.post('http://165.229.169.113:9080/file/upload.json', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
return response.data.fileMngId; // 서버에서 반환된 파일 매니지 ID
} catch (error) {
console.error('파일 업로드 오류:', error);
throw new Error('파일 업로드에 실패했습니다.');
}
},
async insertPhoto() {
try {
this.fileId = await this.uploadFiles(this.file);
const response = await axios({
url: '/photo/insertPhoto.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
photoMngId: 'PHOTO_MNG_000000000000001', // 사진첩아이디 교체
likeData: '0',
unitId: this.unit_id,
stdId: '1', //학생아이디 교체
fileMngId: this.fileId,
},
});
this.$router.push({ name: 'Dashboard', query: { unit_id: this.unit_id, book_id: this.book_id } });
} catch (error) {
console.error('사진 삽입 오류:', error);
}
},
updateContent(index) {
this.selectedIndex = index;
},
goToPage(page) {
this.$router.push({ name: page });
},
},
watch: {},
computed: {},
created() {
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1 필요
const day = String(date.getDate()).padStart(2, '0');
this.today = `${year}.${month}.${day}`;
},
components: {},
mounted() {
this.book_id = this.$route.query.book_id;
this.unit_id = this.$route.query.unit_id;
this.fetchPhoto();
},
};
</script>
<style scoped>
.imgGroup {
width: fit-content;
}
.imgGroup button {
position: relative;
}
.imgGroup button p,
.textbox p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
background: #ffffffb8;
border-radius: 5px;
padding: 10px;
font-size: 48px;
font-family: 'ONEMobilePOP';
}
.pickGroup button {
position: relative;
margin-right: 30px;
}
.pickGroup button p {
font-size: 34px;
color: #c6c6c6;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pickGroup article img {
object-fit: contain;
width: -webkit-fill-available;
}
.pickGroup article > div > p {
font-size: 64px;
}
.popTxt {
width: 101px;
}
</style>