126 lines
4.4 KiB
Vue
126 lines
4.4 KiB
Vue
<template>
|
|
<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex justify-content-between">
|
|
<div class="card-title mb-0">
|
|
<h5 class="mb-1 me-2">투표진행</h5>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="p-0 m-0">
|
|
<li class="d-flex mb-1" v-for="item in voteList" :key="item.LOCVOTSEQ">
|
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
|
<div class="me-2 mb-3">
|
|
<small class="card-subtitle">{{ item.localVote.formatted_LOCVOTEDT }}</small>
|
|
<div class="d-flex flex-wrap align-items-center">
|
|
<div class="avatar flex-shrink-0 me-1">
|
|
<img
|
|
style="cursor: auto;"
|
|
class="rounded-circle user-avatar"
|
|
:src="getProfileImage(item.localVote.MEMBERPRF)"
|
|
alt="최초 작성자"
|
|
:style="{ borderColor: item.localVote.usercolor }"
|
|
@error="setDefaultImage"
|
|
/>
|
|
</div>
|
|
<div class="timeline-event ps-1" style="cursor: pointer;" @click="goVoteList()" >
|
|
<div class="timeline-header ">
|
|
<small ><strong>{{ truncateTitle(item.localVote.LOCVOTTTL) }}</strong></small>
|
|
</div>
|
|
<small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-warning me-1">
|
|
</span> {{ getDaysAgo(item.localVote.formatted_LOCVOTEDT) }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 모달 푸터: 더보기 버튼 오른쪽 정렬 -->
|
|
<div class="modal-foote d-flex">
|
|
<router-link
|
|
to="/voteboard"
|
|
class="btn btn-primary mr-1 pe-1 ps-1 ms-auto my-auto h-50"
|
|
>
|
|
more
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import router from '@/router';
|
|
import $api from '@api';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
// 프로필 이미지
|
|
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
|
|
const defaultProfile = "/img/icons/icon.png";
|
|
const getProfileImage = (profilePath) => {
|
|
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
|
|
};
|
|
const setDefaultImage = (event) => {
|
|
event.target.src = defaultProfile;
|
|
};
|
|
|
|
const currentPage = ref(1);
|
|
const voteset = ref(0);
|
|
const voteList= ref([]);
|
|
onMounted(() => {
|
|
getvoteList();
|
|
});
|
|
|
|
//투표목록
|
|
const getvoteList = () => {
|
|
$api.get('vote/getVoteList',{
|
|
//목록조회시 파라미터 전달
|
|
params:
|
|
{
|
|
page: 1
|
|
,voteset:'2' //투표중
|
|
,myVote:'2' //내가한 투표표
|
|
}
|
|
}).then(res => {
|
|
voteList.value = res.data.data.list;
|
|
voteList.value = res.data.data.list.slice(0, 5);
|
|
})
|
|
};
|
|
|
|
// 제목이 14글자 넘어가면 ... 처리하는 함수
|
|
const truncateTitle = title => {
|
|
return title.length > 10 ? title.slice(0, 10) + '...' : title;
|
|
};
|
|
|
|
//투표이동
|
|
const goVoteList = () =>{
|
|
router.push({
|
|
path: '/voteboard',
|
|
query: {
|
|
voteset: '2',
|
|
}
|
|
});
|
|
}
|
|
//종료 ㅇㅇ 일 전
|
|
const getDaysAgo = (dateString) => {
|
|
const inputDate = new Date(dateString); // 문자열을 Date 객체로 변환
|
|
const today = new Date(); // 현재 날짜 가져오기
|
|
|
|
// 날짜 차이 계산 (밀리초 기준)
|
|
const timeDiff = today - inputDate;
|
|
const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))+1; // 일 단위 변환
|
|
|
|
// 오늘 날짜인 경우 "오늘" 반환
|
|
if (dayDiff === 0) return "금일 종료";
|
|
|
|
return `종료 ${Math.abs(dayDiff)}일 전`;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-avatar {
|
|
border: 3px solid;
|
|
padding: 0.1px;
|
|
}
|
|
</style>
|