From 45f150769eaede0573ab69a5f2ef7edc493a7b0a Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Tue, 28 Apr 2026 16:03:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8D=89=E7=A8=BF=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyListings/EditDetail/index.vue | 187 ++++++++++++++---- 1 file changed, 151 insertions(+), 36 deletions(-) diff --git a/src/views/SellerDashboard/MyListings/EditDetail/index.vue b/src/views/SellerDashboard/MyListings/EditDetail/index.vue index 6bd1a211..a58fcf1b 100644 --- a/src/views/SellerDashboard/MyListings/EditDetail/index.vue +++ b/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(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) + } })