|
|
@@ -1,197 +1,129 @@
|
|
|
<template>
|
|
|
<div class="mypage-container">
|
|
|
- <!-- 헤더 섹션 -->
|
|
|
- <div class="mypage-header">
|
|
|
- <div class="header-content">
|
|
|
- <div class="profile-section">
|
|
|
+ <!-- 프로필 섹션 -->
|
|
|
+ <div class="profile-section">
|
|
|
+ <div class="profile-card">
|
|
|
+ <div class="profile-header">
|
|
|
<div class="profile-avatar">
|
|
|
- <div class="avatar-placeholder">
|
|
|
- <i class="mdi mdi-account"></i>
|
|
|
- </div>
|
|
|
+ {{ getMemberTypeName(userInfo.memberType) === "인플루언서" ? '❤️' : '💜' }}
|
|
|
</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 class="user-stats">
|
|
|
- <div class="stat-item">
|
|
|
- <span class="stat-number">{{ csList.length }}</span>
|
|
|
- <span class="stat-label">문의 내역</span>
|
|
|
- </div>
|
|
|
- <div class="stat-item">
|
|
|
- <span class="stat-number">{{ completedInquiries }}</span>
|
|
|
- <span class="stat-label">답변 완료</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <h2>{{ userInfo.name }}</h2>
|
|
|
+ <span class="member-type-badge">{{ getMemberTypeName(userInfo.memberType) }}</span>
|
|
|
</div>
|
|
|
+ <button
|
|
|
+ class="edit-btn"
|
|
|
+ @click="toggleEditMode"
|
|
|
+ :class="{ active: isEditMode }"
|
|
|
+ >
|
|
|
+ {{ isEditMode ? '취소' : '수정' }}
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 대시보드 섹션 -->
|
|
|
- <div class="dashboard-section">
|
|
|
- <div class="dashboard-cards">
|
|
|
- <!-- 빠른 액션 카드 -->
|
|
|
- <div class="dashboard-card quick-actions">
|
|
|
- <div class="card-header">
|
|
|
- <h3>빠른 작업</h3>
|
|
|
- <i class="mdi mdi-lightning-bolt"></i>
|
|
|
- </div>
|
|
|
- <div class="card-content">
|
|
|
- <div class="action-buttons">
|
|
|
- <v-btn class="action-btn" @click="addLocated()">
|
|
|
- <i class="mdi mdi-plus-circle"></i>
|
|
|
- <span>문의 등록</span>
|
|
|
- </v-btn>
|
|
|
- <v-btn class="action-btn" @click="goToCS()">
|
|
|
- <i class="mdi mdi-headset"></i>
|
|
|
- <span>고객센터</span>
|
|
|
- </v-btn>
|
|
|
- <v-btn class="action-btn" @click="goToProfile()">
|
|
|
- <i class="mdi mdi-account-edit"></i>
|
|
|
- <span>프로필 수정</span>
|
|
|
- </v-btn>
|
|
|
+ <!-- 정보 표시/수정 폼 -->
|
|
|
+ <div class="profile-content">
|
|
|
+ <div v-if="!isEditMode" class="info-display">
|
|
|
+ <div class="info-row">
|
|
|
+ <label>이름</label>
|
|
|
+ <span>{{ userInfo.name }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 최근 문의 카드 -->
|
|
|
- <div class="dashboard-card recent-inquiries">
|
|
|
- <div class="card-header">
|
|
|
- <h3>최근 문의 내역</h3>
|
|
|
- <i class="mdi mdi-message-text"></i>
|
|
|
- </div>
|
|
|
- <div class="card-content">
|
|
|
- <div class="inquiry-list">
|
|
|
- <div v-if="recentInquiries.length > 0">
|
|
|
- <div
|
|
|
- v-for="item in recentInquiries"
|
|
|
- :key="item.SEQ"
|
|
|
- class="inquiry-item"
|
|
|
- @click="toItemDetail(item.SEQ)"
|
|
|
- >
|
|
|
- <div class="inquiry-info">
|
|
|
- <h4>{{ item.TITLE }}</h4>
|
|
|
- <p>{{ formatDate(item.REGDATE) }}</p>
|
|
|
- </div>
|
|
|
- <div class="inquiry-status">
|
|
|
- <span :class="getStatusClass(item.STATUS)">
|
|
|
- {{ item.STATUS == '0' ? '답변대기' : '답변완료' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else class="no-inquiries">
|
|
|
- <i class="mdi mdi-message-outline"></i>
|
|
|
- <p>등록된 문의가 없습니다</p>
|
|
|
- </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <label>이메일</label>
|
|
|
+ <span>{{ userInfo.email }}</span>
|
|
|
</div>
|
|
|
- <div class="view-all">
|
|
|
- <v-btn variant="text" @click="goToCS()">전체 보기</v-btn>
|
|
|
+ <div class="info-row" v-if="userInfo.memberType !== 'INFLUENCER'">
|
|
|
+ <label>회사명</label>
|
|
|
+ <span>{{ userInfo.companyName }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 알림 카드 -->
|
|
|
- <div class="dashboard-card notifications">
|
|
|
- <div class="card-header">
|
|
|
- <h3>알림</h3>
|
|
|
- <i class="mdi mdi-bell"></i>
|
|
|
- </div>
|
|
|
- <div class="card-content">
|
|
|
- <div class="notification-list">
|
|
|
- <div class="notification-item">
|
|
|
- <div class="notification-icon">
|
|
|
- <i class="mdi mdi-information"></i>
|
|
|
- </div>
|
|
|
- <div class="notification-content">
|
|
|
- <h4>서비스 업데이트</h4>
|
|
|
- <p>새로운 기능이 추가되었습니다!</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <label>전화번호</label>
|
|
|
+ <span>{{ userInfo.phone || '미등록' }}</span>
|
|
|
</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 v-else class="info-edit">
|
|
|
<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>
|
|
|
+ <label>이름 *</label>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="editForm.name"
|
|
|
+ placeholder="이름을 입력하세요"
|
|
|
+ class="form-input"
|
|
|
+ />
|
|
|
</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>
|
|
|
+ <label>이메일 *</label>
|
|
|
+ <input
|
|
|
+ type="email"
|
|
|
+ v-model="editForm.email"
|
|
|
+ placeholder="이메일을 입력하세요"
|
|
|
+ class="form-input"
|
|
|
+ />
|
|
|
</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 class="form-group" v-if="userInfo.memberType !== 'INFLUENCER'">
|
|
|
+ <label>회사명</label>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="editForm.companyName"
|
|
|
+ placeholder="회사명을 입력하세요"
|
|
|
+ class="form-input"
|
|
|
+ />
|
|
|
</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>
|
|
|
+ <label>전화번호</label>
|
|
|
+ <input
|
|
|
+ type="tel"
|
|
|
+ v-model="editForm.phone"
|
|
|
+ placeholder="전화번호를 입력하세요"
|
|
|
+ class="form-input"
|
|
|
+ />
|
|
|
</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 class="form-actions">
|
|
|
+ <button
|
|
|
+ class="btn-save"
|
|
|
+ @click="saveProfile"
|
|
|
+ :disabled="isSaving"
|
|
|
+ >
|
|
|
+ {{ isSaving ? '저장중...' : '저장' }}
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="btn-cancel"
|
|
|
+ @click="cancelEdit"
|
|
|
+ >
|
|
|
+ 취소
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 추가 정보 섹션 -->
|
|
|
+ <div class="additional-info">
|
|
|
+ <div class="info-card">
|
|
|
+ <h3>계정 정보</h3>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">회원 타입</span>
|
|
|
+ <span class="info-value">{{ getMemberTypeName(userInfo.memberType) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">계정 ID</span>
|
|
|
+ <span class="info-value">{{ userInfo.id }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">가입일</span>
|
|
|
+ <span class="info-value">{{ formatDate(userInfo.regDate) || '정보 없음' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import "@vuepic/vue-datepicker/dist/main.css";
|
|
|
-import dayjs from 'dayjs';
|
|
|
/************************************************************************
|
|
|
| 레이아웃
|
|
|
************************************************************************/
|
|
|
@@ -215,55 +147,30 @@ import dayjs from 'dayjs';
|
|
|
/************************************************************************
|
|
|
| 전역
|
|
|
************************************************************************/
|
|
|
- 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([]);
|
|
|
|
|
|
- // 대시보드 관련 computed
|
|
|
- const completedInquiries = computed(() => {
|
|
|
- return csList.value.filter(item => item.STATUS === '1').length;
|
|
|
- });
|
|
|
-
|
|
|
- const recentInquiries = computed(() => {
|
|
|
- return csList.value.slice(0, 3); // 최근 3개만 표시
|
|
|
+ // 사용자 정보
|
|
|
+ const userInfo = ref({
|
|
|
+ id: useAtStore.auth.id,
|
|
|
+ name: useAtStore.auth.name,
|
|
|
+ email: useAtStore.auth.email,
|
|
|
+ companyName: useAtStore.auth.companyName,
|
|
|
+ companyNumber: useAtStore.auth.companyNumber,
|
|
|
+ phone: useAtStore.auth.phone,
|
|
|
+ memberType: useAtStore.auth.memberType,
|
|
|
+ regDate: null
|
|
|
});
|
|
|
|
|
|
- // 문의 등록 팝업 관련
|
|
|
- const showInquiryModal = ref(false);
|
|
|
- const isSubmitting = ref(false);
|
|
|
- const inquiryForm = ref({
|
|
|
- category: '',
|
|
|
- title: '',
|
|
|
- content: '',
|
|
|
- attachments: []
|
|
|
+ // 편집 모드
|
|
|
+ const isEditMode = ref(false);
|
|
|
+ const isSaving = ref(false);
|
|
|
+ const editForm = ref({
|
|
|
+ name: '',
|
|
|
+ email: '',
|
|
|
+ companyName: '',
|
|
|
+ phone: ''
|
|
|
});
|
|
|
- const categoryOptions = ref([
|
|
|
- { title: '기능문의', value: 'D' },
|
|
|
- { title: '기타문의', value: 'E' }
|
|
|
- ]);
|
|
|
|
|
|
/* eslint-disable */
|
|
|
/* prettier-ignore */
|
|
|
@@ -272,140 +179,92 @@ import dayjs from 'dayjs';
|
|
|
| 함수(METHODS)
|
|
|
************************************************************************/
|
|
|
|
|
|
- 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 getMemberTypeName = (type) => {
|
|
|
+ switch(type) {
|
|
|
+ case 'INFLUENCER': return '인플루언서';
|
|
|
+ case 'VENDOR': return '벤더사';
|
|
|
+ case 'BRAND': return '브랜드사';
|
|
|
+ default: return '사용자';
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- const addLocated = () => {
|
|
|
- showInquiryModal.value = true;
|
|
|
- };
|
|
|
-
|
|
|
- const goToCS = () => {
|
|
|
- router.push('/view/common/cs');
|
|
|
- };
|
|
|
-
|
|
|
- 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;
|
|
|
+ // 편집 모드 토글
|
|
|
+ const toggleEditMode = () => {
|
|
|
+ if (isEditMode.value) {
|
|
|
+ // 편집 취소
|
|
|
+ isEditMode.value = false;
|
|
|
+ } else {
|
|
|
+ // 편집 시작 - 현재 값으로 폼 초기화
|
|
|
+ editForm.value = {
|
|
|
+ name: userInfo.value.name,
|
|
|
+ email: userInfo.value.email,
|
|
|
+ companyName: userInfo.value.companyName,
|
|
|
+ phone: userInfo.value.phone
|
|
|
+ };
|
|
|
+ isEditMode.value = true;
|
|
|
}
|
|
|
+ };
|
|
|
|
|
|
- await useAxios()
|
|
|
- .post("/cs/list", _req)
|
|
|
- .then((res) => {
|
|
|
- csList.value = res.data;
|
|
|
- });
|
|
|
+ // 편집 취소
|
|
|
+ const cancelEdit = () => {
|
|
|
+ isEditMode.value = false;
|
|
|
};
|
|
|
|
|
|
- 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;
|
|
|
+ // 프로필 저장
|
|
|
+ const saveProfile = async () => {
|
|
|
+ // 유효성 검사
|
|
|
+ if (!editForm.value.name.trim()) {
|
|
|
+ $toast.error('이름을 입력해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!editForm.value.email.trim()) {
|
|
|
+ $toast.error('이메일을 입력해주세요.');
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- useAxios()
|
|
|
- .post("/cs/search", _req)
|
|
|
- .then((res) => {
|
|
|
- csList.value = res.data;
|
|
|
- currentPage.value = 1; // 검색 후 첫 페이지로 이동
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error('검색 실패:', error);
|
|
|
- $toast.error('검색에 실패했습니다.');
|
|
|
- });
|
|
|
- };
|
|
|
+ isSaving.value = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const updateData = {
|
|
|
+ USER_SEQ: useAtStore.auth.seq,
|
|
|
+ NAME: editForm.value.name,
|
|
|
+ EMAIL: editForm.value.email,
|
|
|
+ PHONE: editForm.value.phone
|
|
|
+ };
|
|
|
+
|
|
|
+ // 회사 정보는 벤더사, 브랜드사만
|
|
|
+ if (userInfo.value.memberType !== 'INFLUENCER') {
|
|
|
+ updateData.COMPANY_NAME = editForm.value.companyName;
|
|
|
+ }
|
|
|
|
|
|
+ // TODO: 실제 API 호출 (현재는 임시로 로컬 업데이트)
|
|
|
+ // const response = await useAxios().post('/user/update', updateData);
|
|
|
+
|
|
|
+ // 임시로 로컬 데이터 업데이트
|
|
|
+ userInfo.value.name = editForm.value.name;
|
|
|
+ userInfo.value.email = editForm.value.email;
|
|
|
+ userInfo.value.phone = editForm.value.phone;
|
|
|
+ if (userInfo.value.memberType !== 'INFLUENCER') {
|
|
|
+ userInfo.value.companyName = editForm.value.companyName;
|
|
|
+ }
|
|
|
|
|
|
- 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 || ''
|
|
|
+ // 스토어도 업데이트
|
|
|
+ useAtStore.auth.name = editForm.value.name;
|
|
|
+ useAtStore.auth.email = editForm.value.email;
|
|
|
+ useAtStore.auth.phone = editForm.value.phone;
|
|
|
+ if (userInfo.value.memberType !== 'INFLUENCER') {
|
|
|
+ useAtStore.auth.companyName = editForm.value.companyName;
|
|
|
}
|
|
|
- });
|
|
|
- };
|
|
|
|
|
|
- const getStatusClass = (status) => {
|
|
|
- switch(status) {
|
|
|
- case '0':
|
|
|
- return 'status-waiting';
|
|
|
- case '1':
|
|
|
- return 'status-completed';
|
|
|
+ $toast.success('프로필이 성공적으로 수정되었습니다.');
|
|
|
+ isEditMode.value = false;
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('프로필 수정 실패:', error);
|
|
|
+ $toast.error('프로필 수정에 실패했습니다.');
|
|
|
+ } finally {
|
|
|
+ isSaving.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -418,83 +277,262 @@ import dayjs from 'dayjs';
|
|
|
return `${year}.${month}.${day}`;
|
|
|
};
|
|
|
|
|
|
- // 팝업 관련 함수들
|
|
|
- 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;
|
|
|
+ /************************************************************************
|
|
|
+| WATCH
|
|
|
+************************************************************************/
|
|
|
+ // 사용자 상세 정보 로드
|
|
|
+ const fnDetail = () => {
|
|
|
+ let req = {
|
|
|
+ MEMBER_TYPE: useAtStore.auth.memberType,
|
|
|
+ MEMBER_SEQ: useAtStore.auth.seq
|
|
|
}
|
|
|
|
|
|
- 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);
|
|
|
- });
|
|
|
- }
|
|
|
+ console.warn(req)
|
|
|
|
|
|
- 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;
|
|
|
- }
|
|
|
+ useAxios()
|
|
|
+ .post(`/mypage/detail`, req)
|
|
|
+ .then((res) => {
|
|
|
+ console.error(res)
|
|
|
+ userInfo.value = {
|
|
|
+ id: userData.ID,
|
|
|
+ name: userData.NAME,
|
|
|
+ email: userData.EMAIL,
|
|
|
+ companyName: userData.COMPANY_NAME,
|
|
|
+ companyNumber: userData.COMPANY_NUMBER,
|
|
|
+ phone: userData.PHONE,
|
|
|
+ memberType: userData.MEMBER_TYPE,
|
|
|
+ nickName: userData.NICK_NAME,
|
|
|
+ introduction: userData.INTRODUCTION,
|
|
|
+ regDate: userData.REGDATE
|
|
|
+ };
|
|
|
+ })
|
|
|
};
|
|
|
|
|
|
- /************************************************************************
|
|
|
-| WATCH
|
|
|
-************************************************************************/
|
|
|
onMounted(() => {
|
|
|
- csListGet();
|
|
|
-
|
|
|
- // 날짜 초기화
|
|
|
- const today = dayjs();
|
|
|
- searchEndDate.value = today.format('YYYY-MM-DD');
|
|
|
+ fnDetail();
|
|
|
});
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.mypage-container {
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-header {
|
|
|
+ margin-bottom: 32px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.page-header h1 {
|
|
|
+ font-size: 2.5rem;
|
|
|
+ color: #1a237e;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-header p {
|
|
|
+ color: #666;
|
|
|
+ font-size: 1.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-section {
|
|
|
+ margin-bottom: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 20px;
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32px;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-avatar {
|
|
|
+ font-size: 3rem;
|
|
|
+ margin-right: 24px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ width: 96px;
|
|
|
+ height: 96px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-info {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-info h2 {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 1.8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.member-type-badge {
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 0.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+.edit-btn {
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.3);
|
|
|
+ color: white;
|
|
|
+ padding: 12px 24px;
|
|
|
+ border-radius: 25px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.edit-btn:hover, .edit-btn.active {
|
|
|
+ background: white;
|
|
|
+ color: #667eea;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-content {
|
|
|
+ padding: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 정보 표시 스타일 */
|
|
|
+.info-display .info-row {
|
|
|
+ display: flex;
|
|
|
+ padding: 16px 0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+.info-display .info-row:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.info-display label {
|
|
|
+ width: 120px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.info-display span {
|
|
|
+ flex: 1;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+/* 편집 폼 스타일 */
|
|
|
+.form-group {
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-group label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 16px;
|
|
|
+ border: 2px solid #e0e0e0;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 1rem;
|
|
|
+ transition: border-color 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #667eea;
|
|
|
+}
|
|
|
+
|
|
|
+.form-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-save {
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 12px 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-save:hover:not(:disabled) {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-save:disabled {
|
|
|
+ opacity: 0.6;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-cancel {
|
|
|
+ background: #f5f5f5;
|
|
|
+ color: #666;
|
|
|
+ border: none;
|
|
|
+ padding: 12px 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-cancel:hover {
|
|
|
+ background: #e0e0e0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 추가 정보 섹션 */
|
|
|
+.additional-info {
|
|
|
+ margin-top: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 32px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.info-card h3 {
|
|
|
+ margin: 0 0 24px 0;
|
|
|
+ color: #1a237e;
|
|
|
+ font-size: 1.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.info-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
|
+ gap: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ padding: 16px;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-label {
|
|
|
+ display: block;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-value {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ font-size: 1rem;
|
|
|
+}
|
|
|
+</style>
|
DESKTOP-T61HUSC\user