feat: 视频显示到列表

src/views/SellerDashboard/MyListings/EditDetail/index.vue

@@ -91,7 +91,10 @@
 		ListingDetailImage,
 		ListingDetailResponse,
 		ListingItem,
+		ProductMediaItem,
 		RadioOption,
+		SketchDetailResponse,
+		SketchDetailVideo,
 		StatusType
 	} from "./types"
 
@@ -127,12 +130,7 @@
 	})
 
 	const genderOptions = computed(() => {
-		return (
-			STORE.state.UserHabit?.sex.value.map((el) => ({
-				...el,
-				// name: el.key.toLowerCase()
-			})) || []
-		)
+		return STORE.state.UserHabit?.sex.value
 	})
 
 	const fallbackCategoryOptions: Record<string, RadioOption[]> = {
@@ -249,6 +247,23 @@
 		return listing
 	}
 
+	const createProductVideoItem = (video: SketchDetailVideo): ProductMediaItem | null => {
+		const firstFrameUrl = video?.firstFrameUrl || ""
+		const gifUrl = video?.gifUrl || ""
+		const videoUrl = video?.videoUrl || ""
+
+		if (!firstFrameUrl || !videoUrl) return null
+
+		return {
+			url: firstFrameUrl,
+			firstFrameUrl,
+			gifUrl,
+			videoUrl,
+			isVideo: true,
+			selected: false
+		}
+	}
+
 	const handleSelectProdImg = (index: number) => {
 		const listing = currentListing.value
 		const target = prodImgList.value[index]
@@ -257,6 +272,10 @@
 		target.selected = willSelect
 
 		if (willSelect && listing.firstSelectedIndex === null) {
+			if (target.isVideo) {
+				message.warning("The first selected item is the main product image. Videos cannot be used.")
+				return
+			}
 			listing.mainProductImage = target.url
 			listing.firstSelectedIndex = index
 			return
@@ -438,13 +457,18 @@
 	}
 
 	const handleFetchItemDetial = (list) => {
-		fetchSketchDetail(list).then((res) => {
+		fetchSketchDetail(list).then((res: SketchDetailResponse[]) => {
 			res.forEach((item, index) => {
 				if (!selectList.value[index]) return
-				selectList.value[index].sketchList = item.clothes.map((el) => ({ url: el }))
-				selectList.value[index].prodImageList = item.toProductImageUrls.map((el) => ({
-					url: el
+				selectList.value[index].sketchList = (item.clothes || []).map((el) => ({ url: el }))
+				const imageItems = (item.toProductImageUrls || []).map((el) => ({
+					url: el,
+					selected: false
 				}))
+				const videoItems = (item.videos || [])
+					.map((video) => createProductVideoItem(video))
+					.filter((video): video is ProductMediaItem => Boolean(video))
+				selectList.value[index].prodImageList = [...imageItems, ...videoItems]
 			})
 		})
 	}