1

src/views/SellerDashboard/MyOrders/index.vue

@@ -65,7 +65,9 @@
 					</div>
 				</div>
 			</div>
-			<div class="null" v-show="list.length === 0 && !loading && finish">no data</div>
+			<div class="null" v-show="list.length === 0 && !loading && finish">
+				<img src="@/assets/images/homePage/null_img.png" alt="" />
+			</div>
 			<div class="placeholder" ref="placeholderRef" v-show="!loading"></div>
 			<div class="footer" :class="{ null: list.length === 0 }" v-if="!finish">
 				<a-spin :delay="0.5" v-show="loading" />
@@ -120,28 +122,33 @@
 			size: size.value
 		}
 		if (nameOrId.value) data.keyword = nameOrId.value
-		Https.axiosGet(Https.httpUrls.getSellerOrderList, { params: data }).then((res) => {
-			res.content?.forEach((v) => {
-				const obj = {
-					orderId: v.orderId,
-					items: v.items.map((item) => ({
-						id: item.productId,
-						url: item.thumbnailUrl,
-						title: item.productName
-					})),
-					price: "HK$ " + v.price,
-					username: v.buyerUsername,
-					date: v.date,
-					time: v.date
-				}
-				list.value.push(obj)
-			})
+		Https.axiosGet(Https.httpUrls.getSellerOrderList, { params: data })
+			.then((res) => {
+				res.content?.forEach((v) => {
+					const obj = {
+						orderId: v.orderId,
+						items: v.items.map((item) => ({
+							id: item.productId,
+							url: item.thumbnailUrl,
+							title: item.productName
+						})),
+						price: "HK$ " + v.price,
+						username: v.buyerUsername,
+						date: v.date,
+						time: v.date
+					}
+					list.value.push(obj)
+				})
 
-			total.value = res.total
-			page.value++
-			finish.value = page.value > total.value / size.value
-			loading.value = false
-		})
+				total.value = res.total
+				page.value++
+				finish.value = page.value > total.value / size.value
+				loading.value = false
+			})
+			.catch(() => {
+				finish.value = true
+				loading.value = false
+			})
 	}
 	const getSummary = () => {
 		Https.axiosGet(Https.httpUrls.getSellerOrderSummary).then((res) => {
@@ -360,8 +367,14 @@
 			}
 			> .null {
 				margin-top: 10rem;
-				text-align: center;
-				color: #999;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				> img {
+					width: 30rem;
+					height: auto;
+				}
 			}
 			> .footer {
 				min-height: 10rem;