Commit @79c7e41bcc94254c53e46ce02493c5ba9e41e99f

김하영 2023-12-06

231206 김하영

@79c7e41bcc94254c53e46ce02493c5ba9e41e99f

2da8ba1

79c7e41

client/views/pages/user/mypage/MatchingManager.vue

--- client/views/pages/user/mypage/MatchingManager.vue

+++ client/views/pages/user/mypage/MatchingManager.vue


                             </div>
                             <div v-if="pickDispatchList.length === 0" class="matching-box-text"> 발신된 Pick이 없습니다.</div>
                             <div v-else class="inbox-sub">
-                                <div class="inbox-img" v-for="(item, idx) in pickDispatchList" :key="idx">
+                                <div class="inbox-img" v-for="(item, idx) in displayedItems2" :key="idx">
                                     <h4>{{ item.company_nm }}</h4>
                                     <div class="img-wrap">
 

                                     </div>
                                 </div>
                             </div>
+                            <div class="mat-user-button">
+                                <button v-if="pickDispatchList.length > 4 && !showMore2" @click="showMore2 = true"
+                                    class=" small-btn">
+                                    더보기
+                                </button>
+                                <button v-if="showMore2" @click="showMore2 = false" class="small-btn">
+                                    숨기기
+                                </button>
+                            </div>
                         </section>
 
                         <section class="matching-section-box">

                             <h2>완료</h2>
                             <div v-if="pickCompleteList.length === 0" class="matching-box-text"> 완료된 Pick이 없습니다.</div>
                             <div v-else class="inbox-sub">
-                                <div class="inbox-img" v-for="(item, idx) in pickCompleteList" :key="idx">
+                                <div class="inbox-img" v-for="(item, idx) in displayedItems3" :key="idx">
                                     <h4>{{ item.company_nm }}</h4>
                                     <div class="img-wrap">
                                         <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"

                                         <button @click="cardView(item)" class="red-border-btn small-btn">명함 보기</button>
                                     </div>
                                 </div>
+                            </div>
+                            <div class="mat-user-button">
+                                <button v-if="pickCompleteList.length > 4 && !showMore3" @click="showMore3 = true"
+                                    class=" small-btn">
+                                    더보기
+                                </button>
+                                <button v-if="showMore3" @click="showMore3 = false" class="small-btn">
+                                    숨기기
+                                </button>
                             </div>
                         </section>
                     </div>

                             <div v-if="matchingReceptionList.length === 0" class="matching-box-text"> 수신된 Macthing이 없습니다.
                             </div>
                             <div v-else class="inbox-sub">
-                                <div class="inbox-img" v-for="(item, idx) in matchingReceptionList" :key="idx">
+                                <div class="inbox-img" v-for="(item, idx) in displayedItems4" :key="idx">
                                     <h4>{{ item.company_nm }}</h4>
                                     <div class="img-wrap">
                                         <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"

                                     </div>
                                 </div>
                             </div>
+                            <div class="mat-user-button">
+                                <button v-if="matchingReceptionList.length > 4 && !showMore4" @click="showMore4 = true"
+                                    class=" small-btn">
+                                    더보기
+                                </button>
+                                <button v-if="showMore4" @click="showMore4 = false" class="small-btn">
+                                    숨기기
+                                </button>
+                            </div>
                         </section>
                         <section class="matching-section-box">
                             <div>

                             <div v-if="matchingDispatchList.length === 0" class="matching-box-text"> 발신된 Macthing이 없습니다.
                             </div>
                             <div v-else class="inbox-sub">
-                                <div class="inbox-img" v-for="(item, idx) in matchingDispatchList" :key="idx">
+                                <div class="inbox-img" v-for="(item, idx) in displayedItems5" :key="idx">
                                     <h4>{{ item.company_nm }}</h4>
                                     <div class="img-wrap">
                                         <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"

                                     </div>
                                 </div>
                             </div>
+                            <div class="mat-user-button">
+                                <button v-if="matchingDispatchList.length > 4 && !showMore5" @click="showMore5 = true"
+                                    class=" small-btn">
+                                    더보기
+                                </button>
+                                <button v-if="showMore5" @click="showMore5 = false" class="small-btn">
+                                    숨기기
+                                </button>
+                            </div>
                         </section>
                         <section class="matching-section-box">
                             <h2>완료</h2>
                             <div v-if="matchingCompleteList.length === 0" class="matching-box-text"> 완료된 Macthing이 없습니다.
                             </div>
                             <div v-else class="inbox-sub">
-                                <div class="inbox-img inbox-img-logo" v-for="(item, idx) in matchingCompleteList"
+                                <div class="inbox-img inbox-img-logo" v-for="(item, idx) in displayedItems6"
                                     :key="idx">
                                     <h4>{{ item.company_nm }}</h4>
                                     <div class="img-wrap">

                                         <button class="dark-gray-btn">매칭취소됨</button>
                                     </div>
                                 </div>
+                            </div>
+                            <div class="mat-user-button">
+                                <button v-if="matchingCompleteList.length > 4 && !showMore6" @click="showMore6 = true"
+                                    class=" small-btn">
+                                    더보기
+                                </button>
+                                <button v-if="showMore6" @click="showMore6 = false" class="small-btn">
+                                    숨기기
+                                </button>
                             </div>
                         </section>
                     </div>

             isVisible: false,
             company_nm: null,
             cardFullPath: null,
-            showMore: false
+            showMore: false,
+            showMore2:false,
+            showMore3:false,
+            showMore4:false,
+            showMore5:false,
+            showMore6:false
         }
     },
     methods: {

             } else {
                 return this.pickReceptionList.slice(0, 4);
             }
+        },
+        displayedItems2() {
+            if (this.showMore2) {
+                return this.pickDispatchList;
+            } else {
+                return this.pickDispatchList.slice(0, 4);
+            }
+        },
+        displayedItems3() {
+            if (this.showMore3) {
+                return this.pickCompleteList;
+            } else {
+                return this.pickCompleteList.slice(0, 4);
+            }
+        },
+        displayedItems4() {
+            if (this.showMore4) {
+                return this.matchingReceptionList;
+            } else {
+                return this.matchingReceptionList.slice(0, 4);
+            }
+        },
+        displayedItems5() {
+            if (this.showMore5) {
+                return this.matchingDispatchList;
+            } else {
+                return this.matchingDispatchList.slice(0, 4);
+            }
+        },
+        displayedItems6() {
+            if (this.showMore6) {
+                return this.matchingCompleteList;
+            } else {
+                return this.matchingCompleteList.slice(0, 4);
+            }
         }
     }
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -78,7 +78,7 @@
78	78	</div>
79	79	<div v-if="pickDispatchList.length === 0" class="matching-box-text"> 발신된 Pick이 없습니다.</div>
80	80	<div v-else class="inbox-sub">
81		- <div class="inbox-img" v-for="(item, idx) in pickDispatchList" :key="idx">
	81	+ <div class="inbox-img" v-for="(item, idx) in displayedItems2" :key="idx">
82	82	<h4>{{ item.company_nm }}</h4>
83	83	<div class="img-wrap">
84	84
...	...	@@ -94,6 +94,15 @@
94	94	</div>
95	95	</div>
96	96	</div>
	97	+ <div class="mat-user-button">
	98	+ <button v-if="pickDispatchList.length > 4 && !showMore2" @click="showMore2 = true"
	99	+ class=" small-btn">
	100	+ 더보기
	101	+ </button>
	102	+ <button v-if="showMore2" @click="showMore2 = false" class="small-btn">
	103	+ 숨기기
	104	+ </button>
	105	+ </div>
97	106	</section>
98	107
99	108	<section class="matching-section-box">
...	...	@@ -101,7 +110,7 @@
101	110	<h2>완료</h2>
102	111	<div v-if="pickCompleteList.length === 0" class="matching-box-text"> 완료된 Pick이 없습니다.</div>
103	112	<div v-else class="inbox-sub">
104		- <div class="inbox-img" v-for="(item, idx) in pickCompleteList" :key="idx">
	113	+ <div class="inbox-img" v-for="(item, idx) in displayedItems3" :key="idx">
105	114	<h4>{{ item.company_nm }}</h4>
106	115	<div class="img-wrap">
107	116	<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
...	...	@@ -114,6 +123,15 @@
114	123	<button @click="cardView(item)" class="red-border-btn small-btn">명함 보기</button>
115	124	</div>
116	125	</div>
	126	+ </div>
	127	+ <div class="mat-user-button">
	128	+ <button v-if="pickCompleteList.length > 4 && !showMore3" @click="showMore3 = true"
	129	+ class=" small-btn">
	130	+ 더보기
	131	+ </button>
	132	+ <button v-if="showMore3" @click="showMore3 = false" class="small-btn">
	133	+ 숨기기
	134	+ </button>
117	135	</div>
118	136	</section>
119	137	</div>
...	...	@@ -129,7 +147,7 @@
129	147	<div v-if="matchingReceptionList.length === 0" class="matching-box-text"> 수신된 Macthing이 없습니다.
130	148	</div>
131	149	<div v-else class="inbox-sub">
132		- <div class="inbox-img" v-for="(item, idx) in matchingReceptionList" :key="idx">
	150	+ <div class="inbox-img" v-for="(item, idx) in displayedItems4" :key="idx">
133	151	<h4>{{ item.company_nm }}</h4>
134	152	<div class="img-wrap">
135	153	<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
...	...	@@ -144,6 +162,15 @@
144	162	</div>
145	163	</div>
146	164	</div>
	165	+ <div class="mat-user-button">
	166	+ <button v-if="matchingReceptionList.length > 4 && !showMore4" @click="showMore4 = true"
	167	+ class=" small-btn">
	168	+ 더보기
	169	+ </button>
	170	+ <button v-if="showMore4" @click="showMore4 = false" class="small-btn">
	171	+ 숨기기
	172	+ </button>
	173	+ </div>
147	174	</section>
148	175	<section class="matching-section-box">
149	176	<div>
...	...	@@ -152,7 +179,7 @@
152	179	<div v-if="matchingDispatchList.length === 0" class="matching-box-text"> 발신된 Macthing이 없습니다.
153	180	</div>
154	181	<div v-else class="inbox-sub">
155		- <div class="inbox-img" v-for="(item, idx) in matchingDispatchList" :key="idx">
	182	+ <div class="inbox-img" v-for="(item, idx) in displayedItems5" :key="idx">
156	183	<h4>{{ item.company_nm }}</h4>
157	184	<div class="img-wrap">
158	185	<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
...	...	@@ -167,13 +194,22 @@
167	194	</div>
168	195	</div>
169	196	</div>
	197	+ <div class="mat-user-button">
	198	+ <button v-if="matchingDispatchList.length > 4 && !showMore5" @click="showMore5 = true"
	199	+ class=" small-btn">
	200	+ 더보기
	201	+ </button>
	202	+ <button v-if="showMore5" @click="showMore5 = false" class="small-btn">
	203	+ 숨기기
	204	+ </button>
	205	+ </div>
170	206	</section>
171	207	<section class="matching-section-box">
172	208	<h2>완료</h2>
173	209	<div v-if="matchingCompleteList.length === 0" class="matching-box-text"> 완료된 Macthing이 없습니다.
174	210	</div>
175	211	<div v-else class="inbox-sub">
176		- <div class="inbox-img inbox-img-logo" v-for="(item, idx) in matchingCompleteList"
	212	+ <div class="inbox-img inbox-img-logo" v-for="(item, idx) in displayedItems6"
177	213	:key="idx">
178	214	<h4>{{ item.company_nm }}</h4>
179	215	<div class="img-wrap">
...	...	@@ -188,6 +224,15 @@
188	224	<button class="dark-gray-btn">매칭취소됨</button>
189	225	</div>
190	226	</div>
	227	+ </div>
	228	+ <div class="mat-user-button">
	229	+ <button v-if="matchingCompleteList.length > 4 && !showMore6" @click="showMore6 = true"
	230	+ class=" small-btn">
	231	+ 더보기
	232	+ </button>
	233	+ <button v-if="showMore6" @click="showMore6 = false" class="small-btn">
	234	+ 숨기기
	235	+ </button>
191	236	</div>
192	237	</section>
193	238	</div>
...	...	@@ -297,7 +342,12 @@
297	342	isVisible: false,
298	343	company_nm: null,
299	344	cardFullPath: null,
300		- showMore: false
	345	+ showMore: false,
	346	+ showMore2:false,
	347	+ showMore3:false,
	348	+ showMore4:false,
	349	+ showMore5:false,
	350	+ showMore6:false
301	351	}
302	352	},
303	353	methods: {
...	...	@@ -669,6 +719,41 @@
669	719	} else {
670	720	return this.pickReceptionList.slice(0, 4);
671	721	}
	722	+ },
	723	+ displayedItems2() {
	724	+ if (this.showMore2) {
	725	+ return this.pickDispatchList;
	726	+ } else {
	727	+ return this.pickDispatchList.slice(0, 4);
	728	+ }
	729	+ },
	730	+ displayedItems3() {
	731	+ if (this.showMore3) {
	732	+ return this.pickCompleteList;
	733	+ } else {
	734	+ return this.pickCompleteList.slice(0, 4);
	735	+ }
	736	+ },
	737	+ displayedItems4() {
	738	+ if (this.showMore4) {
	739	+ return this.matchingReceptionList;
	740	+ } else {
	741	+ return this.matchingReceptionList.slice(0, 4);
	742	+ }
	743	+ },
	744	+ displayedItems5() {
	745	+ if (this.showMore5) {
	746	+ return this.matchingDispatchList;
	747	+ } else {
	748	+ return this.matchingDispatchList.slice(0, 4);
	749	+ }
	750	+ },
	751	+ displayedItems6() {
	752	+ if (this.showMore6) {
	753	+ return this.matchingCompleteList;
	754	+ } else {
	755	+ return this.matchingCompleteList.slice(0, 4);
	756	+ }
672	757	}
673	758	}
674	759	}

Delete comment