투표 컴포넌트 추가가
This commit is contained in:
parent
480ba2bd8a
commit
e5ccaa1a12
50
src/components/voteboard/voteCard.vue
Normal file
50
src/components/voteboard/voteCard.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="card mb-6">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-1"><div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
|
||||
<img src="/img/avatars/1.png" class="rounded-circle me-3 w-px-40" >
|
||||
<div class="w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="user-info">
|
||||
<h6 class="mb-1">공공이</h6>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<!-- 투표완료시 -->
|
||||
<i class="bx bxs-check-circle link-success"></i>
|
||||
<!-- 투표작성자만 수정/삭제/종료 가능 -->
|
||||
<button type="button" class="bx btn btn-danger">종료</button>
|
||||
<EditBtn />
|
||||
<DeleteBtn />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h5>
|
||||
<div class="mb-1">회식장소 고릅시다.</div>
|
||||
<div class="mb-1">24.12.12 11:02 ~ 24.12.12 16:02</div>
|
||||
<!-- 투표완료시-->
|
||||
<vote-revote-end />
|
||||
<!-- 투표안했을시-->
|
||||
<vote-card-check />
|
||||
<!-- 투표완/미완 인원 -->
|
||||
<vote-user-list />
|
||||
<!-- 투표 결과 -->
|
||||
<vote-result-list />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import EditBtn from '@c/button/EditBtn.vue';
|
||||
import DeleteBtn from '@c/button/DeleteBtn.vue';
|
||||
import voteUserList from '@c/voteboard/voteUserList.vue';
|
||||
import voteResultList from '@c/voteboard/voteResultList.vue';
|
||||
import voteCardCheck from '@c/voteboard/voteCardCheck.vue';
|
||||
import voteRevoteEnd from '@c/voteboard/voteRevoteEnd.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
27
src/components/voteboard/voteCardCheck.vue
Normal file
27
src/components/voteboard/voteCardCheck.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="card-text">
|
||||
<div class="demo-inline-spacing mt-4">
|
||||
<!-- 투표리스트 -->
|
||||
<vote-card-check-list />
|
||||
<div class="d-flex align-items-center">
|
||||
<PlusBtn/>
|
||||
<FormInput title="추가항목" name="addContent" :isLabel="false" :is-essential="true" :is-alert="titleAlert" @update:data="title = $event" />
|
||||
<button class="btn btn-primary ms-1">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm">투표하기</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PlusBtn from '@c/button/PlusBtn.vue';
|
||||
import FormInput from '@c/input/FormInput.vue';
|
||||
import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const titleAlert = ref(false);
|
||||
</script>
|
||||
|
||||
<style >
|
||||
|
||||
</style>
|
||||
16
src/components/voteboard/voteCardCheckList.vue
Normal file
16
src/components/voteboard/voteCardCheckList.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
case1
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
13
src/components/voteboard/voteCardList.vue
Normal file
13
src/components/voteboard/voteCardList.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<card />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import card from '@c/voteboard/voteCard.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
23
src/components/voteboard/voteCompleteUserList.vue
Normal file
23
src/components/voteboard/voteCompleteUserList.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class='bx bxs-user-check link-info'></i>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
|
||||
<div class="d-flex flex-wrap align-items-center">
|
||||
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
|
||||
<vote-complete-user-list-card />
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import voteCompleteUserListCard from '@c/voteboard/voteCompleteUserListCard.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
13
src/components/voteboard/voteCompleteUserListCard.vue
Normal file
13
src/components/voteboard/voteCompleteUserListCard.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
|
||||
<img class="rounded-circle" src="/img/avatars/1.png" alt="Avatar">
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
23
src/components/voteboard/voteInCompleteUserList.vue
Normal file
23
src/components/voteboard/voteInCompleteUserList.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class='bx bxs-user-x link-danger'></i>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
|
||||
<div class="d-flex flex-wrap align-items-center">
|
||||
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
|
||||
<vote-in-complete-user-list-card />
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import voteInCompleteUserListCard from '@c/voteboard/voteInCompleteUserListCard.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
13
src/components/voteboard/voteInCompleteUserListCard.vue
Normal file
13
src/components/voteboard/voteInCompleteUserListCard.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
|
||||
<img class="rounded-circle" src="/img/avatars/3.png" alt="Avatar">
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
25
src/components/voteboard/voteResultCard.vue
Normal file
25
src/components/voteboard/voteResultCard.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="timeline mb-0">
|
||||
<li class="timeline-item ps-6 ">
|
||||
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
||||
<i class="icon-base bx bx-check-circle"></i>
|
||||
</span>
|
||||
<div class="timeline-event ps-1">
|
||||
<div class="timeline-header">
|
||||
<small class="text-success text-uppercase">투표결과</small>
|
||||
</div>
|
||||
<h6 class="my-50">돼지고기 </h6>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
19
src/components/voteboard/voteResultList.vue
Normal file
19
src/components/voteboard/voteResultList.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="card mb-6 border border-2 border-primary rounded primary-shadow">
|
||||
<div class="card-body">
|
||||
<!-- 1위가 여러개일때 -->
|
||||
<vote-result-random />
|
||||
<!-- 1위가 하나일때-->
|
||||
<vote-result-card />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import voteResultRandom from '@c/voteboard/voteResultRandom.vue';
|
||||
import voteResultCard from '@c/voteboard/voteResultCard.vue';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
16
src/components/voteboard/voteResultRandom.vue
Normal file
16
src/components/voteboard/voteResultRandom.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<h6><i class="icon-base bx bx-error icon-lg link-warning"></i> 1위가 중복 되었습니다</h6>
|
||||
<!-- 중복된 1위 리스트 -->
|
||||
<vote-result-random-list />
|
||||
<div class="d-grid w-100 mt-6">
|
||||
<button class="btn btn-primary" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">랜덤 1위 뽑기</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import voteResultRandomList from "@c/voteboard/voteResultRandomList.vue"
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
19
src/components/voteboard/voteResultRandomList.vue
Normal file
19
src/components/voteboard/voteResultRandomList.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="list-unstyled g-2 my-6 ">
|
||||
<li class="mb-1 d-flex align-items-center ">
|
||||
<div 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> 돼지고기
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
16
src/components/voteboard/voteRevoteEnd.vue
Normal file
16
src/components/voteboard/voteRevoteEnd.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="user-status">
|
||||
<span class="badge badge-dot bg-warning"></span>
|
||||
<small>소고기 </small>
|
||||
<button class="btn btn-primary btn-sm">재투표</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
19
src/components/voteboard/voteUserList.vue
Normal file
19
src/components/voteboard/voteUserList.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<!--투표한 사람 목록 -->
|
||||
<vote-complete-user-list />
|
||||
<!-- 투표안한 사람 목록 -->
|
||||
<vote-in-complete-user-list />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import voteCompleteUserList from '@c/voteboard/voteCompleteUserList.vue';
|
||||
import voteInCompleteUserList from '@c/voteboard/voteInCompleteUserList.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 스타일 정의 */
|
||||
</style>
|
||||
63
src/views/voteboard/voteBoardList.vue
Normal file
63
src/views/voteboard/voteBoardList.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="row g-3">
|
||||
<div class="mt-8">
|
||||
<!-- 투표 작성 -->
|
||||
<router-link to="/voteboard/write"><WriteBtn /></router-link>
|
||||
|
||||
<!-- 내가한 투표 보기 -->
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="form-check me-3">
|
||||
<input class="form-check-input" type="checkbox" value="" id="deliveryAdd" checked="">
|
||||
<label class="form-check-label" for="deliveryAdd">내가 한 투표</label>
|
||||
</div>
|
||||
<!-- 투표마감/투표중 셀렉트 -->
|
||||
<FormSelect class="col-3" name="cate" :isLabel="false" title="투표상태" :data="categoryList" @update:data="category = $event" />
|
||||
</div>
|
||||
|
||||
<!-- <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event" :is-alert="true" />
|
||||
<button type="button" class="btn btn-primary ms-1" @click="registerContent"><i class="bx bx-check"></i></button> -->
|
||||
|
||||
<!-- 투표리스트 -->
|
||||
<vote-list />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div class="mt-8">
|
||||
<pagination />
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { getCurrentInstance, onMounted, ref } from 'vue';
|
||||
// import Pagination from '@/components/pagination/Pagination.vue';
|
||||
import router from '@/router';
|
||||
import FormSelect from '@c/input/FormSelect.vue';
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
import QEditor from '@c/editor/QEditor.vue';
|
||||
import $api from '@api';
|
||||
import BoardCard from '@c/list/BoardCard.vue';
|
||||
import Quill from 'quill';
|
||||
import WriteBtn from '@c/button/WriteBtn.vue';
|
||||
import voteList from '@c/voteboard/voteCardList.vue';
|
||||
|
||||
const toastStore = useToastStore();
|
||||
const category = ref('0');
|
||||
const categoryList = ['전체','투표마감', '투표중'];
|
||||
const boardList = ref([]);
|
||||
const titleAlert = ref(false);
|
||||
const addContent = ref('');
|
||||
|
||||
onMounted(()=>{
|
||||
getBoardList();
|
||||
})
|
||||
const getBoardList = () =>{
|
||||
$api.get('worddict/getWordList').then((res)=>{
|
||||
boardList.value = res.data.data.data;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Loading…
Reference in New Issue
Block a user