|
@@ -0,0 +1,685 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="mypage-container">
|
|
|
|
|
+ <!-- 헤더 섹션 -->
|
|
|
|
|
+ <div class="mypage-header">
|
|
|
|
|
+ <div class="header-content">
|
|
|
|
|
+ <div class="profile-section">
|
|
|
|
|
+ <div class="profile-avatar">
|
|
|
|
|
+ <div class="avatar-placeholder">
|
|
|
|
|
+ <i class="mdi mdi-account"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="profile-info">
|
|
|
|
|
+ <h1 class="user-name">{{ useAtStore.auth.nickName || useAtStore.auth.companyName || '사용자' }}</h1>
|
|
|
|
|
+ <p class="user-type">{{ memberType === 'INFLUENCER' ? '인플루언서' : memberType === 'VENDOR' ? '벤더사' : '브랜드사' }}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- 통계 요약 카드 -->
|
|
|
|
|
+ <div class="stats-overview">
|
|
|
|
|
+ <div class="stat-card">
|
|
|
|
|
+ <div class="stat-icon orders">
|
|
|
|
|
+ <i class="mdi mdi-cart"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>{{ recentOrdersCount }}</h3>
|
|
|
|
|
+ <p>최근 주문 (7일)</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="stat-card">
|
|
|
|
|
+ <div class="stat-icon items">
|
|
|
|
|
+ <i class="mdi mdi-package-variant"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>{{ activeItemsCount }}</h3>
|
|
|
|
|
+ <p>진행중인 공동구매</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="stat-card">
|
|
|
|
|
+ <div class="stat-icon sales">
|
|
|
|
|
+ <i class="mdi mdi-trending-up"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>{{ totalSalesCount }}</h3>
|
|
|
|
|
+ <p>총 주문 건수</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="stat-card">
|
|
|
|
|
+ <div class="stat-icon influencers">
|
|
|
|
|
+ <i class="mdi mdi-account-group"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>{{ activeInfluencersCount }}</h3>
|
|
|
|
|
+ <p>활성 인플루언서</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 대시보드 섹션 -->
|
|
|
|
|
+ <div class="dashboard-section">
|
|
|
|
|
+ <div class="dashboard-cards">
|
|
|
|
|
+ <!-- 최근 주문 현황 카드 -->
|
|
|
|
|
+ <div class="dashboard-card recent-orders">
|
|
|
|
|
+ <div class="card-header">
|
|
|
|
|
+ <h3>최근 들어온 주문</h3>
|
|
|
|
|
+ <i class="mdi mdi-cart-outline"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card-content">
|
|
|
|
|
+ <div class="order-list">
|
|
|
|
|
+ <div v-if="recentOrders.length > 0">
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="order in recentOrders"
|
|
|
|
|
+ :key="order.SEQ"
|
|
|
|
|
+ class="order-item"
|
|
|
|
|
+ @click="goToOrderDetail(order.ITEM_SEQ)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="order-info">
|
|
|
|
|
+ <h4>{{ order.ORDER_NUMB }}</h4>
|
|
|
|
|
+ <p class="buyer-name">{{ order.BUYER_NAME }}</p>
|
|
|
|
|
+ <p class="order-date">{{ formatDateTime(order.REGDATE) }}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="order-details">
|
|
|
|
|
+ <span class="quantity">{{ order.QTY }}개</span>
|
|
|
|
|
+ <span class="status-badge active">신규</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-else class="no-orders">
|
|
|
|
|
+ <i class="mdi mdi-cart-off"></i>
|
|
|
|
|
+ <p>최근 주문이 없습니다</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="view-all">
|
|
|
|
|
+ <v-btn variant="text" class="custom-btn btn-white" @click="goToOrders()">전체 보기</v-btn>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 진행중인 공동구매 카드 -->
|
|
|
|
|
+ <div class="dashboard-card active-items">
|
|
|
|
|
+ <div class="card-header">
|
|
|
|
|
+ <h3>진행중인 공동구매</h3>
|
|
|
|
|
+ <i class="mdi mdi-package-variant-closed"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card-content">
|
|
|
|
|
+ <div class="item-list">
|
|
|
|
|
+ <div v-if="activeItems.length > 0">
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="item in activeItems"
|
|
|
|
|
+ :key="item.SEQ"
|
|
|
|
|
+ class="item-card"
|
|
|
|
|
+ @click="goToItemDetail(item.SEQ)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="item-info">
|
|
|
|
|
+ <h4>{{ item.NAME }}</h4>
|
|
|
|
|
+ <p class="company-name">{{ item.COMPANY_NAME }}</p>
|
|
|
|
|
+ <div class="item-dates">
|
|
|
|
|
+ <span class="end-date">기간: {{ formatDate(item.ORDER_START_DATE) }} ~ {{ formatDate(item.ORDER_END_DATE) }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="item-stats">
|
|
|
|
|
+ <div class="order-count">주문: {{ item.ORDER_COUNT || 0 }}건</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-else class="no-items">
|
|
|
|
|
+ <i class="mdi mdi-package-variant-closed-remove"></i>
|
|
|
|
|
+ <p>진행중인 공동구매가 없습니다</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="view-all">
|
|
|
|
|
+ <v-btn variant="text" class="custom-btn btn-white" @click="goToItems()">전체 보기</v-btn>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 인플루언서별 판매 통계 카드 -->
|
|
|
|
|
+ <div class="dashboard-card influencer-stats">
|
|
|
|
|
+ <div class="card-header">
|
|
|
|
|
+ <h3>인플루언서별 주문 건수</h3>
|
|
|
|
|
+ <i class="mdi mdi-account-star"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card-content">
|
|
|
|
|
+ <div class="influencer-list">
|
|
|
|
|
+ <div v-if="influencerStats.length > 0">
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="(stat, index) in influencerStats"
|
|
|
|
|
+ :key="stat.INF_SEQ"
|
|
|
|
|
+ class="influencer-item"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="rank">{{ index + 1 }}</div>
|
|
|
|
|
+ <div class="influencer-info">
|
|
|
|
|
+ <h4>{{ stat.INF_NAME || '인플루언서' + stat.INF_SEQ }}</h4>
|
|
|
|
|
+ <p>{{ stat.ORDER_COUNT }}건의 주문</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="order-count-badge">
|
|
|
|
|
+ {{ stat.ORDER_COUNT }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-else class="no-stats">
|
|
|
|
|
+ <i class="mdi mdi-chart-line"></i>
|
|
|
|
|
+ <p>통계 데이터가 없습니다</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 문의 등록 팝업 -->
|
|
|
|
|
+ <v-dialog v-model="showInquiryModal" max-width="600px" persistent>
|
|
|
|
|
+ <v-card class="inquiry-modal">
|
|
|
|
|
+ <v-card-title class="modal-header">
|
|
|
|
|
+ <h3>문의 등록</h3>
|
|
|
|
|
+ <v-btn icon @click="closeModal" class="close-btn">
|
|
|
|
|
+ <v-icon>mdi-close</v-icon>
|
|
|
|
|
+ </v-btn>
|
|
|
|
|
+ </v-card-title>
|
|
|
|
|
+
|
|
|
|
|
+ <v-card-text class="modal-body">
|
|
|
|
|
+ <form @submit.prevent="submitInquiry">
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label>문의 유형 <span class="required">*</span></label>
|
|
|
|
|
+ <v-select
|
|
|
|
|
+ v-model="inquiryForm.category"
|
|
|
|
|
+ :items="categoryOptions"
|
|
|
|
|
+ variant="outlined"
|
|
|
|
|
+ placeholder="문의 유형을 선택하세요"
|
|
|
|
|
+ class="custom-select"
|
|
|
|
|
+ :rules="[v => !!v || '문의 유형을 선택해주세요']"
|
|
|
|
|
+ ></v-select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label>제목 <span class="required">*</span></label>
|
|
|
|
|
+ <v-text-field
|
|
|
|
|
+ v-model="inquiryForm.title"
|
|
|
|
|
+ variant="outlined"
|
|
|
|
|
+ placeholder="문의 제목을 입력하세요"
|
|
|
|
|
+ class="custom-input"
|
|
|
|
|
+ :rules="[v => !!v || '제목을 입력해주세요']"
|
|
|
|
|
+ ></v-text-field>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label>내용 <span class="required">*</span></label>
|
|
|
|
|
+ <v-textarea
|
|
|
|
|
+ v-model="inquiryForm.content"
|
|
|
|
|
+ variant="outlined"
|
|
|
|
|
+ placeholder="문의 내용을 상세히 입력해주세요"
|
|
|
|
|
+ rows="6"
|
|
|
|
|
+ class="custom-textarea"
|
|
|
|
|
+ :rules="[v => !!v || '내용을 입력해주세요']"
|
|
|
|
|
+ ></v-textarea>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label>첨부파일</label>
|
|
|
|
|
+ <v-file-input
|
|
|
|
|
+ v-model="inquiryForm.attachments"
|
|
|
|
|
+ variant="outlined"
|
|
|
|
|
+ placeholder="파일을 선택하세요"
|
|
|
|
|
+ hide-details=""
|
|
|
|
|
+ prepend-icon=""
|
|
|
|
|
+ append-inner-icon="mdi-paperclip"
|
|
|
|
|
+ class="custom-file-input mb--30"
|
|
|
|
|
+ accept="image/*,.pdf,.doc,.docx,.hwp"
|
|
|
|
|
+ multiple
|
|
|
|
|
+ show-size
|
|
|
|
|
+ ></v-file-input>
|
|
|
|
|
+ <p class="file-info">* 이미지, PDF, 문서 파일만 업로드 가능 (최대 10MB)</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ </v-card-text>
|
|
|
|
|
+
|
|
|
|
|
+ <v-card-actions class="modal-footer">
|
|
|
|
|
+ <v-btn @click="closeModal" class="cancel-btn">취소</v-btn>
|
|
|
|
|
+ <v-btn @click="submitInquiry" class="submit-btn" :loading="isSubmitting">등록하기</v-btn>
|
|
|
|
|
+ </v-card-actions>
|
|
|
|
|
+ </v-card>
|
|
|
|
|
+ </v-dialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import "@vuepic/vue-datepicker/dist/main.css";
|
|
|
|
|
+import dayjs from 'dayjs';
|
|
|
|
|
+ /************************************************************************
|
|
|
|
|
+| 레이아웃
|
|
|
|
|
+************************************************************************/
|
|
|
|
|
+ definePageMeta({
|
|
|
|
|
+ layout: "default",
|
|
|
|
|
+ });
|
|
|
|
|
+ /************************************************************************
|
|
|
|
|
+| PROPS
|
|
|
|
|
+ ************************************************************************/
|
|
|
|
|
+ const props = defineProps({
|
|
|
|
|
+ propsData: {
|
|
|
|
|
+ type: Object,
|
|
|
|
|
+ default: () => {},
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ /************************************************************************
|
|
|
|
|
+| 스토어
|
|
|
|
|
+ ************************************************************************/
|
|
|
|
|
+ const useDtStore = useDetailStore();
|
|
|
|
|
+ const useAtStore = useAuthStore();
|
|
|
|
|
+ /************************************************************************
|
|
|
|
|
+| 전역
|
|
|
|
|
+ ************************************************************************/
|
|
|
|
|
+ const memberType = useAtStore.auth.memberType;
|
|
|
|
|
+ const searchModel = ref("");
|
|
|
|
|
+ const selectedRange = ref('all');
|
|
|
|
|
+ const searchStartDate = ref("");
|
|
|
|
|
+ const searchEndDate = ref("");
|
|
|
|
|
+ const dateOptions = [
|
|
|
|
|
+ { label: '오늘', value: 'today' },
|
|
|
|
|
+ { label: '7일', value: '7d' },
|
|
|
|
|
+ { label: '1개월', value: '1m' },
|
|
|
|
|
+ { label: '3개월', value: '3m' },
|
|
|
|
|
+ { label: '전체', value: 'all' },
|
|
|
|
|
+ ]
|
|
|
|
|
+ const datePickerFormat = "yyyy-MM-dd";
|
|
|
|
|
+ const filter = ref("");
|
|
|
|
|
+ const filderArr = ref([
|
|
|
|
|
+ { title: "전체", value: "" },
|
|
|
|
|
+ { title: "제목", value: "title" },
|
|
|
|
|
+ { title: "내용", value: "content" },
|
|
|
|
|
+ { title: "작성자", value: "writer" }
|
|
|
|
|
+ ]);
|
|
|
|
|
+ const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
|
|
|
|
|
+ const router = useRouter();
|
|
|
|
|
+ const pageId = computed(() => {
|
|
|
|
|
+ return '대시보드';
|
|
|
|
|
+ });
|
|
|
|
|
+ const csList = ref([]);
|
|
|
|
|
+ const recentOrders = ref([]);
|
|
|
|
|
+ const activeItems = ref([]);
|
|
|
|
|
+ const influencerStats = ref([]);
|
|
|
|
|
+
|
|
|
|
|
+ // 대시보드 관련 computed
|
|
|
|
|
+ const completedInquiries = computed(() => {
|
|
|
|
|
+ return csList.value.filter(item => item.STATUS === '1').length;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const recentInquiries = computed(() => {
|
|
|
|
|
+ return csList.value.slice(0, 3);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 새로운 대시보드 통계
|
|
|
|
|
+ const recentOrdersCount = computed(() => {
|
|
|
|
|
+ const weekAgo = new Date();
|
|
|
|
|
+ weekAgo.setDate(weekAgo.getDate() - 7);
|
|
|
|
|
+ return recentOrders.value.filter(order =>
|
|
|
|
|
+ new Date(order.REGDATE) >= weekAgo
|
|
|
|
|
+ ).length;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const activeItemsCount = computed(() => {
|
|
|
|
|
+ return activeItems.value.length;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const totalSalesCount = computed(() => {
|
|
|
|
|
+ return recentOrders.value.length;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const activeInfluencersCount = computed(() => {
|
|
|
|
|
+ return influencerStats.value.filter(stat => stat.ORDER_COUNT > 0).length;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 문의 등록 팝업 관련
|
|
|
|
|
+ const showInquiryModal = ref(false);
|
|
|
|
|
+ const isSubmitting = ref(false);
|
|
|
|
|
+ const inquiryForm = ref({
|
|
|
|
|
+ category: '',
|
|
|
|
|
+ title: '',
|
|
|
|
|
+ content: '',
|
|
|
|
|
+ attachments: []
|
|
|
|
|
+ });
|
|
|
|
|
+ const categoryOptions = ref([
|
|
|
|
|
+ { title: '기능문의', value: 'D' },
|
|
|
|
|
+ { title: '기타문의', value: 'E' }
|
|
|
|
|
+ ]);
|
|
|
|
|
+
|
|
|
|
|
+ /* eslint-disable */
|
|
|
|
|
+ /* prettier-ignore */
|
|
|
|
|
+
|
|
|
|
|
+ /************************************************************************
|
|
|
|
|
+| 함수(METHODS)
|
|
|
|
|
+************************************************************************/
|
|
|
|
|
+
|
|
|
|
|
+ // 대시보드 데이터 로드 함수들
|
|
|
|
|
+ const loadRecentOrders = async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const _req = {
|
|
|
|
|
+ COMPANY_NUMBER: useAtStore.auth.companyNumber,
|
|
|
|
|
+ MEMBER_TYPE: useAtStore.auth.memberType,
|
|
|
|
|
+ MEMBER_SEQ: useAtStore.auth.seq,
|
|
|
|
|
+ LIMIT: 5
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const response = await useAxios().post('/dashboard/recentOrders', _req);
|
|
|
|
|
+ recentOrders.value = response.data;
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('최근 주문 로드 실패:', error);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const loadActiveItems = async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const _req = {
|
|
|
|
|
+ SHOW_YN: "Y",
|
|
|
|
|
+ TYPE: "G",
|
|
|
|
|
+ //INF_SEQ: useAtStore.auth.seq,
|
|
|
|
|
+ MEMBER_TYPE: memberType,
|
|
|
|
|
+ MEMBER_SEQ: useAtStore.auth.seq,
|
|
|
|
|
+ STATUS: 0,
|
|
|
|
|
+ COMPANY_NUMBER: useAtStore.auth.companyNumber,
|
|
|
|
|
+ COUNT: 5,
|
|
|
|
|
+ };
|
|
|
|
|
+ console.warn(_req)
|
|
|
|
|
+ const response = await useAxios().post('/item/list', _req);
|
|
|
|
|
+ console.error(response)
|
|
|
|
|
+ activeItems.value = response.data;
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('진행중인 공동구매 로드 실패:', error);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const loadInfluencerStats = async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const _req = {
|
|
|
|
|
+ COMPANY_NUMBER: useAtStore.auth.companyNumber,
|
|
|
|
|
+ MEMBER_TYPE: useAtStore.auth.memberType,
|
|
|
|
|
+ MEMBER_SEQ: useAtStore.auth.seq,
|
|
|
|
|
+ LIMIT: 5
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const response = await useAxios().post('/dashboard/influencerStats', _req);
|
|
|
|
|
+ influencerStats.value = response.data;
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('인플루언서 통계 로드 실패:', error);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const loadDashboardData = async () => {
|
|
|
|
|
+ await Promise.all([
|
|
|
|
|
+ loadRecentOrders(),
|
|
|
|
|
+ loadActiveItems(),
|
|
|
|
|
+ loadInfluencerStats(),
|
|
|
|
|
+ csListGet()
|
|
|
|
|
+ ]);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const isRecentUpdate = (dateStr) => {
|
|
|
|
|
+ const today = new Date();
|
|
|
|
|
+ const updateDate = new Date(dateStr);
|
|
|
|
|
+ const diffDays = (today - updateDate) / (1000 * 60 * 60 * 24);
|
|
|
|
|
+ // 업데이트 날짜가 오늘 날짜 기준 최근 7일인지 확인
|
|
|
|
|
+ return diffDays <= 7;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const paginatedItems = computed(() => {
|
|
|
|
|
+ const start = (currentPage.value - 1) * itemsPerPage;
|
|
|
|
|
+ return csList.value.slice(start, start + itemsPerPage);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const setDateRange = (range) => {
|
|
|
|
|
+ const today = dayjs();
|
|
|
|
|
+
|
|
|
|
|
+ switch(range) {
|
|
|
|
|
+ case 'today' :
|
|
|
|
|
+ searchStartDate.value = today.format('YYYY-MM-DD');
|
|
|
|
|
+ searchEndDate.value = today.format('YYYY-MM-DD');
|
|
|
|
|
+ selectedRange.value = 'today';
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '7d':
|
|
|
|
|
+ searchStartDate.value = today.subtract(7, 'day').format('YYYY-MM-DD');
|
|
|
|
|
+ searchEndDate.value = today.format('YYYY-MM-DD');
|
|
|
|
|
+ selectedRange.value = '7d';
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '1m':
|
|
|
|
|
+ searchStartDate.value = today.subtract(1, 'month').format('YYYY-MM-DD');
|
|
|
|
|
+ searchEndDate.value = today.format('YYYY-MM-DD');
|
|
|
|
|
+ selectedRange.value = '1m';
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '3m':
|
|
|
|
|
+ searchStartDate.value = today.subtract(3, 'month').format('YYYY-MM-DD');
|
|
|
|
|
+ searchEndDate.value = today.format('YYYY-MM-DD');
|
|
|
|
|
+ selectedRange.value = '3m';
|
|
|
|
|
+ break;
|
|
|
|
|
+ case 'all':
|
|
|
|
|
+ searchStartDate.value = "";
|
|
|
|
|
+ searchEndDate.value = today.format('YYYY-MM-DD');
|
|
|
|
|
+ selectedRange.value = 'all';
|
|
|
|
|
+ break
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const addLocated = () => {
|
|
|
|
|
+ showInquiryModal.value = true;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const goToCS = () => {
|
|
|
|
|
+ router.push('/view/common/cs');
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const goToItems = () => {
|
|
|
|
|
+ router.push('/view/common/item');
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const goToOrders = () => {
|
|
|
|
|
+ router.push('/view/common/item');
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const goToOrderDetail = (itemSeq) => {
|
|
|
|
|
+ useDtStore.boardInfo.seq = itemSeq;
|
|
|
|
|
+ useDtStore.boardInfo.pageType = "D";
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ path: "/view/common/item/detail",
|
|
|
|
|
+ query: { itemId: itemSeq }
|
|
|
|
|
+ });
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const goToItemDetail = (itemSeq) => {
|
|
|
|
|
+ useDtStore.boardInfo.seq = itemSeq;
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ path: "/view/common/item/detail",
|
|
|
|
|
+ query: { itemId: itemSeq }
|
|
|
|
|
+ });
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const goToProfile = () => {
|
|
|
|
|
+ $toast.info('프로필 수정 기능은 준비중입니다.');
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const toItemDetail = (__EVENT) => {
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ path: "/view/common/cs/detail",
|
|
|
|
|
+ });
|
|
|
|
|
+ useDtStore.boardInfo.seq = __EVENT;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const csListGet = async () => {
|
|
|
|
|
+ let _req = {
|
|
|
|
|
+ USER_SEQ : useAtStore.auth.seq,
|
|
|
|
|
+ keyword: '',
|
|
|
|
|
+ filter: '',
|
|
|
|
|
+ startDate: '',
|
|
|
|
|
+ endDate: ''
|
|
|
|
|
+ };
|
|
|
|
|
+ if(useAtStore.auth.seq == 2){
|
|
|
|
|
+ _req.USER_SEQ = 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ await useAxios()
|
|
|
|
|
+ .post("/cs/list", _req)
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ csList.value = res.data;
|
|
|
|
|
+ });
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const fnSearch = (__KEYWORD, __FILTER) => {
|
|
|
|
|
+ let _req = {
|
|
|
|
|
+ USER_SEQ: useAtStore.auth.seq,
|
|
|
|
|
+ filter: __FILTER,
|
|
|
|
|
+ keyword: __KEYWORD,
|
|
|
|
|
+ startDate: searchStartDate.value ? dayjs(searchStartDate.value).format('YYYY-MM-DD') : '',
|
|
|
|
|
+ endDate: searchEndDate.value ? dayjs(searchEndDate.value).format('YYYY-MM-DD') : ''
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 관리자인 경우 모든 문의 조회
|
|
|
|
|
+ if(useAtStore.auth.seq == 2){
|
|
|
|
|
+ _req.USER_SEQ = 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ useAxios()
|
|
|
|
|
+ .post("/cs/search", _req)
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ csList.value = res.data;
|
|
|
|
|
+ currentPage.value = 1; // 검색 후 첫 페이지로 이동
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch((error) => {
|
|
|
|
|
+ console.error('검색 실패:', error);
|
|
|
|
|
+ $toast.error('검색에 실패했습니다.');
|
|
|
|
|
+ });
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ const goToDeliveryDetail = (item) => {
|
|
|
|
|
+ // 제품 정보를 스토어에 저장
|
|
|
|
|
+ useDtStore.boardInfo.seq = item.SEQ;
|
|
|
|
|
+ useDtStore.boardInfo.pageType = "D";
|
|
|
|
|
+
|
|
|
|
|
+ // 배송 관리 페이지로 이동
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ path: "/view/common/deli/detail",
|
|
|
|
|
+ query: {
|
|
|
|
|
+ itemId: item.SEQ,
|
|
|
|
|
+ itemName: item.NAME,
|
|
|
|
|
+ price1: item.PRICE1,
|
|
|
|
|
+ price2: item.PRICE2 || item.PRICE1,
|
|
|
|
|
+ thumbFile: item.THUMB_FILE || ''
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const getStatusClass = (status) => {
|
|
|
|
|
+ switch(status) {
|
|
|
|
|
+ case '0':
|
|
|
|
|
+ return 'status-waiting';
|
|
|
|
|
+ case '1':
|
|
|
|
|
+ return 'status-completed';
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const formatDate = (dateStr) => {
|
|
|
|
|
+ if (!dateStr) return '';
|
|
|
|
|
+ const date = new Date(dateStr);
|
|
|
|
|
+ const year = date.getFullYear();
|
|
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
|
+ return `${year}.${month}.${day}`;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const formatDateTime = (dateStr) => {
|
|
|
|
|
+ if (!dateStr) return '';
|
|
|
|
|
+ const date = new Date(dateStr);
|
|
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
|
+ const hours = String(date.getHours()).padStart(2, '0');
|
|
|
|
|
+ const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
|
|
+ return `${month}.${day} ${hours}:${minutes}`;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const getDaysRemaining = (endDate) => {
|
|
|
|
|
+ if (!endDate) return 0;
|
|
|
|
|
+ const end = new Date(endDate);
|
|
|
|
|
+ const now = new Date();
|
|
|
|
|
+ const diffTime = end - now;
|
|
|
|
|
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
|
|
|
+ return Math.max(0, diffDays);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 팝업 관련 함수들
|
|
|
|
|
+ const closeModal = () => {
|
|
|
|
|
+ showInquiryModal.value = false;
|
|
|
|
|
+ resetForm();
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const resetForm = () => {
|
|
|
|
|
+ inquiryForm.value = {
|
|
|
|
|
+ category: '',
|
|
|
|
|
+ title: '',
|
|
|
|
|
+ content: '',
|
|
|
|
|
+ attachments: []
|
|
|
|
|
+ };
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const submitInquiry = async () => {
|
|
|
|
|
+ // 폼 유효성 검사
|
|
|
|
|
+ if (!inquiryForm.value.category) {
|
|
|
|
|
+ $toast.error('문의 유형을 선택해주세요.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!inquiryForm.value.title) {
|
|
|
|
|
+ $toast.error('제목을 입력해주세요.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!inquiryForm.value.content) {
|
|
|
|
|
+ $toast.error('내용을 입력해주세요.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ isSubmitting.value = true;
|
|
|
|
|
+
|
|
|
|
|
+ try {
|
|
|
|
|
+ const formData = new FormData();
|
|
|
|
|
+ formData.append('USER_SEQ', useAtStore.auth.seq);
|
|
|
|
|
+ formData.append('CATEGORY', inquiryForm.value.category);
|
|
|
|
|
+ formData.append('TITLE', inquiryForm.value.title);
|
|
|
|
|
+ formData.append('CONTENT', inquiryForm.value.content);
|
|
|
|
|
+
|
|
|
|
|
+ // 첨부파일 처리
|
|
|
|
|
+ if (inquiryForm.value.attachments && inquiryForm.value.attachments.length > 0) {
|
|
|
|
|
+ inquiryForm.value.attachments.forEach((file, index) => {
|
|
|
|
|
+ formData.append(`files[${index}]`, file);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ await useAxios()
|
|
|
|
|
+ .post("/cs/reg", formData, {
|
|
|
|
|
+ headers: {
|
|
|
|
|
+ 'Content-Type': 'multipart/form-data'
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ if (res.data.success) {
|
|
|
|
|
+ $toast.success('문의가 성공적으로 등록되었습니다.');
|
|
|
|
|
+ closeModal();
|
|
|
|
|
+ csListGet(); // 목록 새로고침
|
|
|
|
|
+ } else {
|
|
|
|
|
+ $toast.error('문의 등록에 실패했습니다.');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ $toast.error('문의 등록 중 오류가 발생했습니다.');
|
|
|
|
|
+ console.error('Error submitting inquiry:', error);
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ isSubmitting.value = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ /************************************************************************
|
|
|
|
|
+| WATCH
|
|
|
|
|
+************************************************************************/
|
|
|
|
|
+ onMounted(() => {
|
|
|
|
|
+ loadDashboardData();
|
|
|
|
|
+
|
|
|
|
|
+ // 날짜 초기화
|
|
|
|
|
+ const today = dayjs();
|
|
|
|
|
+ searchEndDate.value = today.format('YYYY-MM-DD');
|
|
|
|
|
+ });
|
|
|
|
|
+</script>
|