From 98692176885a6b835ea7c2529f375336a901bf35 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 4 Jun 2026 14:37:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=A7=E5=93=81=E4=B8=BB=E5=9B=BE?=
 =?UTF-8?q?=E5=92=8C=E5=B0=81=E9=9D=A2=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/CTrash.svg                   |  5 ++++
 .../EditDetail/components/TopImageSection.vue | 28 +++++++++++++++----
 .../MyListings/EditDetail/index.vue           | 18 +++++++++++-
 3 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/icons/CTrash.svg

diff --git a/src/assets/icons/CTrash.svg b/src/assets/icons/CTrash.svg
new file mode 100644
index 00000000..cdb97690
--- /dev/null
+++ b/src/assets/icons/CTrash.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2503 2.33333H10.442C10.3066 1.67499 9.94839 1.08345 9.42772 0.658419C8.90706 0.233386 8.25578 0.000848473 7.58366 0L6.41699 0C5.74487 0.000848473 5.0936 0.233386 4.57293 0.658419C4.05226 1.08345 3.69405 1.67499 3.55866 2.33333H1.75033C1.59562 2.33333 1.44724 2.39479 1.33785 2.50419C1.22845 2.61358 1.16699 2.76196 1.16699 2.91667C1.16699 3.07138 1.22845 3.21975 1.33785 3.32915C1.44724 3.43854 1.59562 3.5 1.75033 3.5H2.33366V11.0833C2.33459 11.8566 2.64217 12.5979 3.18895 13.1447C3.73573 13.6915 4.47706 13.9991 5.25033 14H8.75033C9.52359 13.9991 10.2649 13.6915 10.8117 13.1447C11.3585 12.5979 11.6661 11.8566 11.667 11.0833V3.5H12.2503C12.405 3.5 12.5534 3.43854 12.6628 3.32915C12.7722 3.21975 12.8337 3.07138 12.8337 2.91667C12.8337 2.76196 12.7722 2.61358 12.6628 2.50419C12.5534 2.39479 12.405 2.33333 12.2503 2.33333ZM6.41699 1.16667H7.58366C7.94549 1.16711 8.29832 1.27947 8.59377 1.48834C8.88922 1.69721 9.11282 1.99237 9.23391 2.33333H4.76674C4.88783 1.99237 5.11143 1.69721 5.40688 1.48834C5.70234 1.27947 6.05517 1.16711 6.41699 1.16667ZM10.5003 11.0833C10.5003 11.5475 10.316 11.9926 9.98776 12.3208C9.65957 12.649 9.21445 12.8333 8.75033 12.8333H5.25033C4.7862 12.8333 4.34108 12.649 4.01289 12.3208C3.6847 11.9926 3.50033 11.5475 3.50033 11.0833V3.5H10.5003V11.0833Z" fill="currentColor"/>
+<path d="M5.83333 10.5002C5.98804 10.5002 6.13642 10.4387 6.24581 10.3293C6.35521 10.2199 6.41667 10.0715 6.41667 9.91683V6.41683C6.41667 6.26212 6.35521 6.11375 6.24581 6.00435C6.13642 5.89495 5.98804 5.8335 5.83333 5.8335C5.67862 5.8335 5.53025 5.89495 5.42085 6.00435C5.31146 6.11375 5.25 6.26212 5.25 6.41683V9.91683C5.25 10.0715 5.31146 10.2199 5.42085 10.3293C5.53025 10.4387 5.67862 10.5002 5.83333 10.5002Z" fill="currentColor"/>
+<path d="M8.16634 10.5002C8.32105 10.5002 8.46942 10.4387 8.57882 10.3293C8.68822 10.2199 8.74967 10.0715 8.74967 9.91683V6.41683C8.74967 6.26212 8.68822 6.11375 8.57882 6.00435C8.46942 5.89495 8.32105 5.8335 8.16634 5.8335C8.01163 5.8335 7.86326 5.89495 7.75386 6.00435C7.64447 6.11375 7.58301 6.26212 7.58301 6.41683V9.91683C7.58301 10.0715 7.64447 10.2199 7.75386 10.3293C7.86326 10.4387 8.01163 10.5002 8.16634 10.5002Z" fill="currentColor"/>
+</svg>
diff --git a/src/views/SellerDashboard/MyListings/EditDetail/components/TopImageSection.vue b/src/views/SellerDashboard/MyListings/EditDetail/components/TopImageSection.vue
index 22db6171..054e30f9 100644
--- a/src/views/SellerDashboard/MyListings/EditDetail/components/TopImageSection.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/TopImageSection.vue
@@ -16,6 +16,13 @@
 				>
 					<SvgIcon name="CCrop" color="#fff" size="12" />
 				</div>
+				<div
+					v-if="images[type] && type !== 'sketch'"
+					class="delete-tool flex flex-center"
+					@click="emit('remove-image', type)"
+				>
+					<SvgIcon name="CTrash" color="#ffffff" size="14" />
+				</div>
 				<img
 					v-if="images[type]"
 					:src="images[type] || ''"
@@ -35,7 +42,7 @@
 						</div>
 					</div>
 					<template v-else>
-						 <SvgIcon name="picture" size="24" />
+						<SvgIcon name="picture" size="24" />
 						<div class="trigger-tips">
 							{{ $t("SellerListEdit.productImageDesc") }}
 						</div>
@@ -54,6 +61,7 @@
 
 	const emit = defineEmits<{
 		(e: "crop", data: string | null, type: TopImageType): void
+		(e: "remove-image", type: TopImageType): void
 	}>()
 
 	const topImageList: TopImageType[] = ["sketch", "mainProductImage", "cover"]
@@ -117,6 +125,18 @@
 					cursor: pointer;
 				}
 
+				.delete-tool {
+					position: absolute;
+					top: 3.4rem;
+					right: 0.8rem;
+					width: 2rem;
+					height: 2rem;
+					border-radius: 50%;
+					background-color: #9a9a9a;
+					// z-index: 1;
+					cursor: pointer;
+				}
+
 				.sketch-img {
 					height: 100%;
 					object-fit: contain;
@@ -136,8 +156,6 @@
 						row-gap: 1.2rem;
 					}
 
-					
-
 					.trigger-tips {
 						font-size: 1.2rem;
 						text-align: center;
@@ -145,8 +163,8 @@
 						line-height: 1.3;
 					}
 				}
-				&.mainProductImage{
-					.trigger-tips{
+				&.mainProductImage {
+					.trigger-tips {
 						margin: 0 -2rem;
 					}
 				}
diff --git a/src/views/SellerDashboard/MyListings/EditDetail/index.vue b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
index a274cd1d..52d5c5fa 100644
--- a/src/views/SellerDashboard/MyListings/EditDetail/index.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
@@ -19,7 +19,7 @@
 		</seller-header>
 		<div class="edit-detail-content flex" ref="editDetailContentRef">
 			<div class="left">
-				<TopImageSection :images="previewImageMap" @crop="handleClickCrop" />
+				<TopImageSection :images="previewImageMap" @crop="handleClickCrop" @remove-image="handleRemoveImage" />
 				<ProductImageList
 					:image-list="prodImgList"
 					:first-selected-index="currentListing.firstSelectedIndex"
@@ -94,6 +94,7 @@
 	import type {
 		CoverSourceType,
 		CropType,
+		TopImageType,
 		ListingDetailImage,
 		ListingDetailResponse,
 		ListingImageCategory,
@@ -391,6 +392,21 @@
 		return origin
 	}
 
+	const handleRemoveImage = (type: TopImageType) => {
+		const listing = currentListing.value
+		if (type === "mainProductImage") {
+			listing.prodImageList.forEach((item) => {
+				if (item.url === listing.mainProductImage && !item.isVideo) {
+					item.selected = false
+				}
+			})
+			listing.mainProductImage = ""
+			listing.firstSelectedIndex = null
+		} else if (type === "cover") {
+			listing.cover = ""
+		}
+	}
+
 	const cropType = ref<CropType | "">("")
 	const handleClickCrop = (
 		data: string | null,