feat: 草稿编辑

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

@@ -287,6 +287,24 @@
 		}>
 		sketchList: Array<{ url: string | null }>
 	}
+
+	type ListingDetailImage = {
+		category?: string | null
+		imageUrl?: string | null
+		isSelected?: boolean | number | string | null
+		sortOrder?: number | null
+	}
+
+	type ListingDetailResponse = {
+		id?: number | string | null
+		title?: string | null
+		description?: string | null
+		price?: number | string | null
+		designFor?: string | null
+		productCategory?: string | string[] | null
+		images?: ListingDetailImage[] | null
+	}
+
 	type StatusType = "draft" | "publish"
 
 	const createListingItem = (
@@ -343,21 +361,99 @@
 		cover: currentListing.value.cover
 	}))
 
-	const firstSelectedIndex = ref(null) //显示main标签的图片索引
+	const firstSelectedIndex = ref<number | null>(null) //显示main标签的图片索引
 	const selectedProdImgs = computed(() => {
 		return prodImgList.value.filter((item) => item.selected).length
 	})
 
+	const getSortedDetailImages = (images: ListingDetailImage[] = []) => {
+		return [...images].sort((prev, next) => (prev.sortOrder ?? 0) - (next.sortOrder ?? 0))
+	}
+
+	const getImageSelected = (value: ListingDetailImage["isSelected"]) =>
+		value === true || value === 1 || value === "1"
+
+	const normalizeDetailGender = (value: ListingDetailResponse["designFor"]) => {
+		const gender = String(value || "").toUpperCase()
+		return gender === "MALE" || gender === "FEMALE" ? gender : "FEMALE"
+	}
+
+	const normalizeDetailCategory = (
+		value: ListingDetailResponse["productCategory"]
+	): ListingItem["category"] => {
+		const categories = Array.isArray(value) ? value : value ? [value] : []
+		const normalized = categories
+			.filter((category) => category !== null && typeof category !== "undefined")
+			.map((category) => String(category).toLowerCase())
+
+		return normalized.length ? normalized : null
+	}
+
+	const createListingItemFromDetail = (detail: ListingDetailResponse): ListingItem => {
+		const listing = createListingItem()
+
+		listing.productName = detail.title || ""
+		listing.price =
+			detail.price === null || typeof detail.price === "undefined" ? "" : String(detail.price)
+		listing.desc = detail.description || ""
+		listing.gender = normalizeDetailGender(detail.designFor)
+		listing.category = normalizeDetailCategory(detail.productCategory)
+
+		getSortedDetailImages(detail.images || []).forEach((image) => {
+			const imageUrl = image.imageUrl || ""
+			if (!imageUrl) return
+
+			if (image.category === "cover") {
+				listing.cover = imageUrl
+				return
+			}
+
+			if (image.category === "sketch") {
+				listing.sketch = imageUrl
+				return
+			}
+
+			if (image.category === "mainProductImage") {
+				listing.mainProductImage = imageUrl
+				return
+			}
+
+			if (image.category === "main_product" || image.category === "product") {
+				listing.prodImageList.push({
+					url: imageUrl,
+					selected: getImageSelected(image.isSelected)
+				})
+				return
+			}
+
+			if (image.category === "apparel") {
+				listing.sketchList.push({ url: imageUrl })
+			}
+		})
+
+		if (!listing.mainProductImage) {
+			listing.mainProductImage =
+				listing.prodImageList.find((item) => item.selected)?.url || ""
+		}
+
+		listing.productImage = listing.prodImageList.map((item) => item.url)
+		listing.apparelSketch = listing.sketchList
+			.map((item) => item.url)
+			.filter((url): url is string => Boolean(url))
+
+		return listing
+	}
+
 	const handleSelectProdImg = (index: number) => {
 		const target = prodImgList.value[index]
-
 		const willSelect = !target.selected
 
 		target.selected = willSelect
 
-		if (willSelect && !currentListing.value.mainProductImage) {
+		if (willSelect && firstSelectedIndex.value === null) {
 			currentListing.value.mainProductImage = target.url
 			firstSelectedIndex.value = index
+			return
 		}
 
 		if (!willSelect && currentListing.value.mainProductImage === target.url) {
@@ -392,7 +488,6 @@
 			(file) => {
 				// console.log(file)
 				uploadFile(file).then((res) => {
-					console.log(res)
 					selectList.value[currentIndex.value][type] = res
 				})
 			},
@@ -450,35 +545,40 @@
 
 	const handleSaveForm = async (type: StatusType) => {
 		const paramsList = []
-		selectList.value.forEach((item) => {
+		selectList.value.forEach((item: ListingItem) => {
 			const params = {
 				id: null,
-				title: selectList.value[currentIndex.value].productName,
-				description: selectList.value[currentIndex.value].desc,
-				price: selectList.value[currentIndex.value].price,
+				title: item.productName,
+				description: item.desc,
+				price: item.price,
 				status: type === "draft" ? 0 : 1,
 				images: [],
-				designFor: selectList.value[currentIndex.value].gender.toLowerCase,
-				productCategory: selectList.value[currentIndex.value].category
+				designFor: item.gender.toLowerCase,
+				productCategory: item.category
 			}
-			//
-			topImageList.forEach((el) => {
+
+			;["sketch", "cover"].forEach((el) => {
 				params.images.push({
 					category: el,
-					imageUrl: selectList.value[currentIndex.value][el],
+					imageUrl: item[el],
 					isSelected: 1
 				})
 			})
-			selectList.value[currentIndex.value].prodImageList.forEach((item) => {
-				if (item.selected) {
-					params.images.push({
-						category: "main_product",
-						imageUrl: item.url,
-						isSelected: Number(item.selected)
-					})
-				}
+			if (item.mainProductImage) {
+				params.images.push({
+					category: 'main_product',
+					imageUrl: item.mainProductImage,
+					isSeleted:1
+				})
+			}
+			item.prodImageList.forEach((item) => {
+				params.images.push({
+					category: "product",
+					imageUrl: item.url,
+					isSelected: Number(!!item.selected)
+				})
 			})
-			selectList.value[currentIndex.value].sketchList.forEach((item) => {
+			item.sketchList.forEach((item) => {
 				params.images.push({
 					category: "apparel",
 					imageUrl: item.url,
@@ -488,7 +588,8 @@
 			paramsList.push(params)
 		})
 		console.log(paramsList)
-		fetchUpdateListing(paramsList)
+		debugger
+		await fetchUpdateListing(paramsList)
 	}
 	const handleClickMenu = async (status: StatusType) => {
 		if (status === "draft" && !selectList.value[currentIndex.value].cover) {
@@ -520,23 +621,37 @@
 				}))
 			})
 		})
-		// fetchListingDetailById(itemId.value).then(res => {
-		// 	console.log('iddetail',res)
-		// })
+	}
+
+	const handleGetDetailById = () => {
+		fetchListingDetailById(itemId.value).then((res: ListingDetailResponse) => {
+			const listing = createListingItemFromDetail(res)
+			const selectedIndex = listing.prodImageList.findIndex((item) => item.selected)
+
+			currentPage.value = 1
+			selectList.value = [listing]
+			firstSelectedIndex.value = selectedIndex === -1 ? null : selectedIndex
+		})
 	}
 
 	onMounted(() => {
-		const designItemIds = history.state?.designItemIds || []
-		itemId.value = history.state?.id || ""
-		if (!designItemIds.length) return
+		const data = history.state
+		if (data?.type === "edit") {
+			itemId.value = history.state?.id || ""
+			handleGetDetailById()
+		} else {
+			const designItemIds = history.state?.designItemIds || []
 
-		currentPage.value = 1
-		selectList.value = designItemIds.map((item) =>
-			createListingItem(item.designOutfitUrl, item.designItemId)
-		)
-		const list = designItemIds.map((el) => el.designItemId)
-		console.log("list", list.length, list)
-		handleFetchItemDetial(list)
+			if (!designItemIds.length) return
+
+			currentPage.value = 1
+			selectList.value = designItemIds.map((item) =>
+				createListingItem(item.designOutfitUrl, item.designItemId)
+			)
+			const list = designItemIds.map((el) => el.designItemId)
+			// console.log("list", list.length, list)
+			handleFetchItemDetial(list)
+		}
 	})
 </script>