공개페이지 수정
This commit is contained in:
@@ -56,22 +56,18 @@
|
|||||||
<!-- 신규 게스트 추가 입력폼 -->
|
<!-- 신규 게스트 추가 입력폼 -->
|
||||||
<div v-if="selectedMember && selectedMember.isNewGuest" class="w-full border p-3 rounded bg-gray-50 mt-2">
|
<div v-if="selectedMember && selectedMember.isNewGuest" class="w-full border p-3 rounded bg-gray-50 mt-2">
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<label>이름</label>
|
<label>이름*</label>
|
||||||
<InputText v-model="newGuest.name" class="w-full" />
|
<InputText v-model="newGuest.name" class="w-full" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label>성별*</label>
|
||||||
|
<Select v-model="newGuest.gender" :options="GENDER_OPTIONS" optionLabel="name" optionValue="value" placeholder="성별 선택" class="w-full" />
|
||||||
|
</div>
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<label>연락처</label>
|
<label>연락처</label>
|
||||||
<InputText v-model="newGuest.phone" class="w-full" />
|
<InputText v-model="newGuest.phone" class="w-full" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-2">
|
<Button label="게스트 추가" class="mt-1" @click="addNewGuest" :disabled="!newGuest.name || !newGuest.gender" />
|
||||||
<label>성별</label>
|
|
||||||
<Select v-model="newGuest.gender" :options="GENDER_OPTIONS" optionLabel="label" optionValue="value" placeholder="성별 선택" class="w-full" />
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label>에버리지</label>
|
|
||||||
<InputText v-model="newGuest.average" class="w-full" />
|
|
||||||
</div>
|
|
||||||
<Button label="게스트 추가" class="mt-1" @click="addNewGuest" :disabled="!newGuest.name || !newGuest.phone || !newGuest.gender" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -80,8 +76,8 @@
|
|||||||
<label>참가 상태</label>
|
<label>참가 상태</label>
|
||||||
<Select
|
<Select
|
||||||
v-model="status"
|
v-model="status"
|
||||||
:options="STATUS_OPTIONS"
|
:options="PARTICIPANT_STATUS_OPTIONS"
|
||||||
optionLabel="label"
|
optionLabel="name"
|
||||||
optionValue="value"
|
optionValue="value"
|
||||||
placeholder="상태를 선택하세요"
|
placeholder="상태를 선택하세요"
|
||||||
checkmark
|
checkmark
|
||||||
@@ -89,13 +85,13 @@
|
|||||||
/>
|
/>
|
||||||
<small v-if="submitted && !status" class="p-error">참가 상태를 선택해주세요.</small>
|
<small v-if="submitted && !status" class="p-error">참가 상태를 선택해주세요.</small>
|
||||||
</div>
|
</div>
|
||||||
<!-- 회비 납부 상태 -->
|
<!-- 납부 상태 -->
|
||||||
<div class="flex-1 min-w-[200px]">
|
<div class="flex-1 min-w-[200px]">
|
||||||
<label>회비 납부 상태</label>
|
<label>납부 상태</label>
|
||||||
<Select
|
<Select
|
||||||
v-model="paymentStatus"
|
v-model="paymentStatus"
|
||||||
:options="paymentStatusOptions"
|
:options="PAYMENT_STATUS_OPTIONS"
|
||||||
optionLabel="label"
|
optionLabel="name"
|
||||||
optionValue="value"
|
optionValue="value"
|
||||||
placeholder="납부 상태를 선택하세요"
|
placeholder="납부 상태를 선택하세요"
|
||||||
checkmark
|
checkmark
|
||||||
@@ -119,13 +115,11 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import {
|
||||||
STATUS_OPTIONS,
|
|
||||||
GENDER_OPTIONS,
|
GENDER_OPTIONS,
|
||||||
|
PARTICIPANT_STATUS_OPTIONS,
|
||||||
PAYMENT_STATUS_OPTIONS,
|
PAYMENT_STATUS_OPTIONS,
|
||||||
getGenderLabel,
|
getGenderLabel,
|
||||||
getMemberTypeLabel,
|
getMemberTypeLabel
|
||||||
getStatusLabel,
|
|
||||||
getPaymentStatusLabel
|
|
||||||
} from '@/utils/enumMappings';
|
} from '@/utils/enumMappings';
|
||||||
import { ref, computed, watch } from 'vue';
|
import { ref, computed, watch } from 'vue';
|
||||||
import Tag from 'primevue/tag';
|
import Tag from 'primevue/tag';
|
||||||
@@ -178,7 +172,7 @@ const memberOptions = computed(() => {
|
|||||||
const nameB = b.name || '';
|
const nameB = b.name || '';
|
||||||
return nameA.localeCompare(nameB, 'ko');
|
return nameA.localeCompare(nameB, 'ko');
|
||||||
});
|
});
|
||||||
if (props.eventStatus === '준비') {
|
if (props.eventStatus === 'ready') {
|
||||||
baseOptions.push({ name: '신규 게스트 추가', isNewGuest: true });
|
baseOptions.push({ name: '신규 게스트 추가', isNewGuest: true });
|
||||||
}
|
}
|
||||||
return baseOptions;
|
return baseOptions;
|
||||||
@@ -206,32 +200,22 @@ const paymentStatus = ref('');
|
|||||||
const error = ref('');
|
const error = ref('');
|
||||||
const submitted = ref(false);
|
const submitted = ref(false);
|
||||||
|
|
||||||
const statusOptions = [
|
|
||||||
{ label: getStatusLabel('참가예정'), value: '참가예정' },
|
|
||||||
{ label: getStatusLabel('참가확정'), value: '참가확정' },
|
|
||||||
{ label: getStatusLabel('취소'), value: '취소' }
|
|
||||||
];
|
|
||||||
const paymentStatusOptions = [
|
|
||||||
{ label: getPaymentStatusLabel('미납'), value: '미납' },
|
|
||||||
{ label: getPaymentStatusLabel('납부완료'), value: '납부완료' }
|
|
||||||
];
|
|
||||||
const newGuest = ref({ name: '', phone: '', gender: '' });
|
const newGuest = ref({ name: '', phone: '', gender: '' });
|
||||||
|
|
||||||
import PublicEventService from '@/services/PublicEventService';
|
import PublicEventService from '@/services/PublicEventService';
|
||||||
|
|
||||||
async function addNewGuest() {
|
async function addNewGuest() {
|
||||||
error.value = '';
|
error.value = '';
|
||||||
if (!newGuest.value.name || !newGuest.value.phone || !newGuest.value.gender) {
|
if (!newGuest.value.name || !newGuest.value.gender) {
|
||||||
error.value = '이름, 연락처, 성별을 모두 입력하세요.';
|
error.value = '이름, 성별을 모두 입력하세요.';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
// 실제 API 경로/파라미터는 상황에 맞게 수정 필요
|
// 실제 API 경로/파라미터는 상황에 맞게 수정 필요
|
||||||
const res = await PublicEventService.createGuest(props.publicHash, {
|
const res = await PublicEventService.createGuest(props.publicHash, {
|
||||||
name: newGuest.value.name,
|
name: newGuest.value.name,
|
||||||
phone: newGuest.value.phone,
|
phone: newGuest.value.phone || null,
|
||||||
gender: newGuest.value.gender,
|
gender: newGuest.value.gender
|
||||||
average: newGuest.value.average
|
|
||||||
});
|
});
|
||||||
if (!res || !res.data || !res.data.memberId) throw new Error('게스트 등록 실패');
|
if (!res || !res.data || !res.data.memberId) throw new Error('게스트 등록 실패');
|
||||||
|
|
||||||
@@ -242,8 +226,8 @@ async function addNewGuest() {
|
|||||||
id: res.data.participantId,
|
id: res.data.participantId,
|
||||||
participantId: res.data.participantId,
|
participantId: res.data.participantId,
|
||||||
memberId: res.data.memberId,
|
memberId: res.data.memberId,
|
||||||
status: res.data.status || '참가예정', // 참가 확정 상태 추가
|
status: res.data.status || 'pending', // 참가 확정 상태 추가
|
||||||
paymentStatus: res.data.paymentStatus || '미납', // 결제 상태 추가
|
paymentStatus: res.data.paymentStatus || 'unpaid', // 결제 상태 추가
|
||||||
Member: {
|
Member: {
|
||||||
name: newGuest.value.name,
|
name: newGuest.value.name,
|
||||||
gender: newGuest.value.gender,
|
gender: newGuest.value.gender,
|
||||||
@@ -284,13 +268,12 @@ async function addNewGuest() {
|
|||||||
selectedMemberId.value = guest.memberId;
|
selectedMemberId.value = guest.memberId;
|
||||||
|
|
||||||
// 참가 상태와 회비 납부 상태 자동 선택
|
// 참가 상태와 회비 납부 상태 자동 선택
|
||||||
console.log(guest);
|
|
||||||
status.value = guest.status;
|
status.value = guest.status;
|
||||||
paymentStatus.value = guest.paymentStatus;
|
paymentStatus.value = guest.paymentStatus;
|
||||||
comment.value = guest.comment || '';
|
comment.value = guest.comment || '';
|
||||||
|
|
||||||
// 입력폼 초기화
|
// 입력폼 초기화
|
||||||
newGuest.value = { name: '', phone: '', gender: '', average: '' };
|
newGuest.value = { name: '', phone: '', gender: '' };
|
||||||
|
|
||||||
// 부모 컴포넌트에 이벤트 발생
|
// 부모 컴포넌트에 이벤트 발생
|
||||||
emits('guest-added', guest);
|
emits('guest-added', guest);
|
||||||
|
|||||||
@@ -82,9 +82,7 @@ export const EVENT_TYPE_LABELS = EVENT_TYPE_OPTIONS.reduce(
|
|||||||
|
|
||||||
export const PAYMENT_STATUS_OPTIONS = [
|
export const PAYMENT_STATUS_OPTIONS = [
|
||||||
{ name: '미납', value: 'unpaid' },
|
{ name: '미납', value: 'unpaid' },
|
||||||
{ name: '납부완료', value: 'paid' },
|
{ name: '납부완료', value: 'paid' }
|
||||||
{ name: '대기', value: 'pending' },
|
|
||||||
{ name: '취소', value: 'canceled' }
|
|
||||||
];
|
];
|
||||||
export const PAYMENT_STATUS_LABELS = PAYMENT_STATUS_OPTIONS.reduce(
|
export const PAYMENT_STATUS_LABELS = PAYMENT_STATUS_OPTIONS.reduce(
|
||||||
(acc, cur) => ({ ...acc, [cur.value]: cur.name }),
|
(acc, cur) => ({ ...acc, [cur.value]: cur.name }),
|
||||||
|
|||||||
Reference in New Issue
Block a user