卖家ui

src/views/SellerDashboard/MyOrders/index.vue

@@ -16,8 +16,15 @@
 			</div>
 			<div class="right">
 				<div class="input">
-					<span class="icon"><svg-icon name="seller-search" size="20" /></span>
-					<input type="text" placeholder="Search by item name or order ID" />
+					<span class="icon"
+						><svg-icon name="seller-search" size="20" @click="getList(true)"
+					/></span>
+					<input
+						type="text"
+						v-model="nameOrId"
+						placeholder="Search by item name or order ID"
+						@keydown.enter.prevent="getList(true)"
+					/>
 				</div>
 			</div>
 		</div>
@@ -30,34 +37,42 @@
 				<div class="date">Date</div>
 			</div>
 			<div class="body">
-				<div class="item" v-for="v in 10" :key="v">
-					<div class="order-id">SP897772698</div>
+				<div class="item" v-for="v in list" :key="v.orderId">
+					<div class="order-id">{{ v.orderId }}</div>
 					<div class="item">
 						<div class="images">
-							<img src="http://118.31.39.42:3000/falls/o-1.png" />
-							<img src="http://118.31.39.42:3000/falls/o-2.png" />
-							<span>+1 more</span>
+							<img
+								v-for="(v, i) in v.item.slice(0, maxItemNum)"
+								:key="i"
+								:src="v.url"
+							/>
+							<span v-if="v.item.length > maxItemNum"
+								>+{{ v.item.length - maxItemNum }} more</span
+							>
 						</div>
 						<div class="titles">
-							<div>North Outfit Set</div>
-							<div>Heritage Layered Set</div>
-							<span>...</span>
+							<div v-for="(v, i) in v.item.slice(0, maxItemNum)" :key="i">
+								{{ v.title }}
+							</div>
+							<span v-if="v.item.length > maxItemNum">...</span>
 						</div>
 					</div>
-					<div class="price">HK$ 100.00</div>
-					<div class="buyer-username">@liuyuchen</div>
+					<div class="price">{{ v.price }}</div>
+					<div class="buyer-username">{{ v.username }}</div>
 					<div class="date">
-						<div>Mar 17, 2026</div>
-						<div>10:15 AM</div>
+						<div>{{ v.date }}</div>
+						<div>{{ v.time }}</div>
 					</div>
 				</div>
 			</div>
+			<div class="placeholder" ref="placeholderRef" v-show="!loading"></div>
+			<div class="footer" v-if="!finish"><a-spin :delay="0.5" v-show="loading" /></div>
 		</div>
 	</div>
 </template>
 
 <script setup>
-	import { ref } from "vue"
+	import { ref, onMounted, onBeforeUnmount } from "vue"
 	const totals = ref([
 		{
 			icon: "seller-qiandaizi",
@@ -75,6 +90,86 @@
 			value: "4,982"
 		}
 	])
+	const maxItemNum = ref(2)
+	const loading = ref(false)
+	const finish = ref(false)
+	const total = ref(30)
+	const page = ref(1)
+	const size = ref(10)
+	const nameOrId = ref("")
+	const list = ref([])
+	const getList = (isReload = false) => {
+		loading.value = true
+		if (isReload) {
+			list.value = []
+			page.value = 1
+			finish.value = false
+		}
+		const data = {
+			page: page.value,
+			size: size.value,
+			nameOrId: nameOrId.value
+		}
+		console.log(data)
+		setTimeout(() => {
+			for (let i = 0; i < size.value; i++) {
+				let { date, time, dateTime } = formatTimestamp(new Date(2026, 4, 20, 13, 14).getTime())
+				list.value.push({
+					orderId: "SP" + Math.random().toString().substring(2, 10),
+					price: "HK$ " + (Math.random() * 500).toFixed(2),
+					username: "@liuyuchen",
+					date: date,
+					time: time,
+					item: [
+						{
+							url: "http://118.31.39.42:3000/falls/o-1.png",
+							title: "North Outfit Set"
+						},
+						{
+							url: "http://118.31.39.42:3000/falls/o-2.png",
+							title: "Heritage Layered Set"
+						},
+						{},
+						{}
+					]
+				})
+			}
+			page.value++
+			finish.value = page.value > total.value / 10
+			loading.value = false
+		}, 1000)
+	}
+	getList(true)
+	const placeholderRef = ref(null)
+	const observer = new IntersectionObserver(
+		(entries) => {
+			if (!entries[0].intersectionRatio || loading.value || finish.value) return
+			getList()
+		},
+		{ root: document.body }
+	)
+	onMounted(() => {
+		observer.observe(placeholderRef.value)
+	})
+	onBeforeUnmount(() => {
+		observer.disconnect()
+	})
+	const formatTimestamp = (ts) => {
+		const d = new Date(ts)
+		const h = d.getHours()
+		const m = d.getMinutes()
+		const date = `${d.toLocaleString("en-US", {
+			month: "long"
+		})} ${d.getDate()}, ${d.getFullYear()}`
+		const time = `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")} ${
+			h >= 12 ? "PM" : "AM"
+		}`
+		return {
+			date,
+			time,
+			dateTime: `${date}\n${time}`
+		}
+	}
 </script>
 <style scoped lang="less">
 	.my-orders-index {
@@ -171,7 +266,7 @@
 					flex: 1;
 				}
 				> .order-id {
-					flex: 2;
+					flex: 1.5;
 				}
 				> .item {
 					flex: 3;
@@ -249,6 +344,16 @@
 					}
 				}
 			}
+			> .footer {
+				min-height: 10rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			> .placeholder {
+				width: 100%;
+				height: 1px;
+			}
 		}
 	}
 </style>