From 66a5f632fbcd149958936244b2fe6c9a56607fcd Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 15 Apr 2026 10:54:21 +0800
Subject: [PATCH] feat: edit detail

---
 src/assets/images/seller/checked.png          | Bin 0 -> 479 bytes
 .../images/seller/image-placeholder.png       | Bin 0 -> 621 bytes
 src/lang/cn.ts                                |  13 +
 src/lang/en.ts                                |  13 +
 .../MyListings/EditDetail/index.vue           | 468 +++++++++++++++++-
 5 files changed, 483 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/images/seller/checked.png
 create mode 100644 src/assets/images/seller/image-placeholder.png

diff --git a/src/assets/images/seller/checked.png b/src/assets/images/seller/checked.png
new file mode 100644
index 0000000000000000000000000000000000000000..a512be2ef9e97cc7d42d9e47fc669f5ac1a6f322
GIT binary patch
literal 479
zcmV<50U-W~P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=00046Nkl<Zcmb`I0kMNH5JZuHgh)UF5|DrcaF93v2jC#z0TPf9
z2O!~oHqEtxlIfM{&FoAkq%R@2Y>FaNL{xh9Ue?RetMGgAYQ0n;tq9cHw(a9MQqwe~
zlp;KWs;UZO^E~rHS^`zrk+qh}vV6jF!h&%Dm)$)>`@a7OJj)o9hvNYzd<$h^LlIu4
zP(4l4Z72&z=*y%>aA?q7p)Y89*fnf(ceilJx~_*YI0-fdc!7QHK=*y8wrvmNVEOtB
zO~a&LK#OQWFaiD<logm)V08DYnG$FUc4r9u?3{c1lqFEi<D;-w%}e1@Xwtj|;2sva
zn#6D^6oPeO;gDu9buM)3x)ude;s|<X20lYHO!8;JZcV`zGx%1rv9#8Yrk#sp6BE9L
zc3mgSWW16jlyLSj(elvK0wKAv0PK@~@>mdK!!U4?nL`E(;3{623%y^aHeR$@;6J?h
V(hF8c8;Jk_002ovPDHLkV1kgm!o~mq

literal 0
HcmV?d00001

diff --git a/src/assets/images/seller/image-placeholder.png b/src/assets/images/seller/image-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..4cb809e5a07e4e6625f3492dc28273aedc149e8b
GIT binary patch
literal 621
zcmV-z0+RiSP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=0005#Nkl<Zcmb_eJ95G>5M7H5pN=CqGnBw2H?VKubPP>Qmohm4
z_ylkROa-NHVAG|fphy>T15)A6d27~*hVZcsZ$@anvfo>+RuTpYdcB^7ZfF?BLy{y-
zDvt<lwpc8Dey9lf5FI;Av^re}6U}M2+q7P<mj=jPIHoe_#c@0df?!J};5bgRR;#(l
z!dP533xqH%IN#>;`6MqHr<BvlHc}cOB^zyQgpRWkDJEy<ZnyI(CnTjIh{xPue~K?f
zy<SfP<p5OX%$pVvndnCH=%dZV9!a5)@B3SsS@Vtx0#P~mFy%p71|rJcv!pE2-&b@S
zB&P-n&j8V{#B?R{)RwWJkN}rmwOX~<R!Xh7QqUq0d$g|-S9{&lE9tBN6E_--DI#)o
zKZt!H;sy12J+fJ`@G-7`0#YShf+h&K8X`G5EQ#2{JGMl7ao?z8<h0-J8xTKY^F4vg
z#`8V<WGs|-FG8InN3->uiftDa(Pway{2CEmz&uA@Rzw%rTp}+cq6_3AFDjxAJ}87d
zB1&pK-CR@x$3*)5{==_8cDCRQf2EQ*6ai-_Ls12H=NHKi?Q}Zdtyb#;h^ZiO|8Be8
z?h@oL^mng&2LEbT+%1uwSrt)_WG1{0CY6M&=R4XU``hvZ!(0h@Ovz1^00000NkvXX
Hu0mjf#pwL}

literal 0
HcmV?d00001

diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index 0f775d20..37b6aaa2 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -1735,5 +1735,18 @@ export default {
 		step4Info: '发布后，你的设计将立即在市场上线。',
 		showAgain: '不再提示',
 		GetStarted: '开始体验',
+	},
+  SellerListEdit:{
+		saveDraft: "保存草稿",
+		publish: "发布",
+		sketch: "线稿图",
+		mainProductImage: "产品主图",
+		cover: "封面",
+    productImageDesc:'从产品图中选取',
+		cropDesc:'从主产品图或线稿图中裁剪',
+    productImageMainTitle:'产品图 ',
+		productImageSubTitle:' (来自设计集)',
+    apparelSketchTitle:'服装线稿图 ',
+		apparelSketchSubTitle:' (来自设计集)',
 	}
 }
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 239970ed..94fc69cb 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1786,5 +1786,18 @@ export default {
 		step4Info: 'Publish and your design goes live on the marketplace.',
 		showAgain: 'Don’t show me again',
 		GetStarted: 'Get Started',
+	},
+	SellerListEdit:{
+		saveDraft:'Save Draft',
+		publish:'Publish',
+		sketch:'Sketch',
+		mainProductImage:'Main Product Image',
+		cover:'Cover',
+		productImageDesc:'Choose from product image',
+		cropDesc:'Crop from main product image or sketch',
+		productImageMainTitle:'Product Image ',
+		productImageSubTitle:'(from design collection)',
+		apparelSketchTitle:'Apparel Sketch ',
+		apparelSketchSubTitle:'(from design collection)',
 	}
 }
diff --git a/src/views/SellerDashboard/MyListings/EditDetail/index.vue b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
index bc113730..72204ee6 100644
--- a/src/views/SellerDashboard/MyListings/EditDetail/index.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
@@ -1,6 +1,7 @@
 <template>
-	<div class="edit-detail-wrapper">
+	<div class="edit-detail-wrapper flex-1">
 		<seller-header
+			class="edit-detail-header"
 			title="Edit Listing Details"
 			:breadcrumbs="[
 				{ title: 'My Listings', name: 'myListingsIndex' },
@@ -12,11 +13,11 @@
 			<template #right>
 				<div class="operate-menu flex">
 					<div class="menu-btn flex align-center save">
-						<span>Save Draft</span>
+						<span>{{ $t("SellerListEdit.saveDraft") }}</span>
 						<SvgIcon name="CSave" color="#000000" size="16" />
 					</div>
 					<div class="menu-btn flex align-center publish">
-						<span>Publish</span>
+						<span>{{ $t("SellerListEdit.publish") }}</span>
 						<SvgIcon name="CPublish" color="#ffffff" size="16" />
 					</div>
 				</div>
@@ -25,7 +26,141 @@
 		<div class="edit-detail-content flex space-between">
 			<div class="left">
 				<div class="main-image-container flex">
-					<div class="sketch"></div>
+					<div
+						v-for="type in topImageList"
+						:key="type"
+						:class="`main-image-item flex flex-col align-center ${type}`"
+					>
+						<div class="title" :class="{ required: type !== 'mainProductImage' }">
+							{{ $t(`SellerListEdit.${type}`) }}
+						</div>
+						<div class="sketch-item flex flex-center" :class="type">
+							<div
+								v-show="selectList[currentIndex][type]"
+								class="crop-tool flex flex-center"
+							>
+								<SvgIcon name="CCrop" color="#fff" size="12" />
+							</div>
+							<img
+								v-show="selectList[currentIndex][type]"
+								:src="selectList[currentIndex][type]"
+								class="sketch-img"
+								alt=""
+							/>
+							<div
+								class="trigger flex flex-col align-center"
+								v-show="!selectList[currentIndex][type]"
+							>
+								<template v-if="type === 'cover'">
+									<SvgIcon
+										class="trigger-icon"
+										name="CCrop"
+										color="#585858"
+										size="24"
+									/>
+									<div class="trigger-tips">
+										{{ $t("SellerListEdit.cropDesc") }}
+									</div>
+								</template>
+								<template v-else>
+									<img
+										src="@/assets/images/seller/image-placeholder.png"
+										class="trigger-img"
+									/>
+									<div class="trigger-tips">
+										{{ $t("SellerListEdit.productImageDesc") }}
+									</div>
+								</template>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="product-image-list-container">
+					<div class="title flex align-center space-between">
+						<div class="title-left">
+							<span class="main-title">{{
+								$t("SellerListEdit.productImageMainTitle")
+							}}</span>
+							<span class="sub-title">{{
+								$t("SellerListEdit.productImageSubTitle")
+							}}</span>
+						</div>
+						<div class="title-right">
+							{{ selectedProdImgs }}/{{ prodImgList.length }} selected
+						</div>
+					</div>
+					<div class="product-image-list flex">
+						<div
+							v-for="(item, index) in prodImgList"
+							class="product-image-item flex flex-center"
+							:class="{ selected: item.selected }"
+							:key="index"
+							@click="handleSelectProdImg(index)"
+						>
+							<img
+								v-show="item.selected"
+								src="@/assets/images/seller/checked.png"
+								class="checked"
+							/>
+							<img class="img-src" :src="item.url" />
+							<div
+								v-if="item.selected && index === firstSelectedIndex"
+								class="main-pic"
+							>
+								main
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="apparel-container">
+					<div class="title">
+						<span class="main-title">{{
+							$t("SellerListEdit.apparelSketchTitle")
+						}}</span>
+						<span class="sub-title">
+							{{ $t("SellerListEdit.apparelSketchSubTitle") }}</span
+						>
+					</div>
+					<div class="sketch-list-container flex">
+						<div
+							v-for="(item, index) in sketchList"
+							:key="index"
+							class="sketch-element flex flex-center"
+						>
+							<img class="img-src" :src="item.url" />
+							<div class="crop-tool flex flex-center">
+								<SvgIcon name="CCrop" color="#fff" size="12" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="right">
+				<div class="form-container flex flex-col">
+					<div class="form-item">
+						<div class="form-item-label required">Product Name</div>
+						<div class="form-item-value product-name">
+							<a-input
+								v-model:value="selectList[currentIndex].productName"
+								show-count
+								:rows="2"
+								placeholder="Enter product name"
+								:bordered="false"
+								:maxlength="60"
+							/>
+						</div>
+					</div>
+					<div class="form-item">
+						<div class="form-item-label required">Price</div>
+						<div class="form-item-value price flex align-center">
+							<span>HK$</span>
+							<a-input
+								v-model:value="selectList[currentIndex].desc"
+								placeholder="0.00"
+								:bordered="false"
+							/>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -33,32 +168,99 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, computed } from "vue"
 import SellerHeader from "../../seller-header.vue"
+import testImg from "@/assets/images/test.png"
+import { ElInput } from "element-plus"
 
+const topImageList = ["sketch", "mainProductImage", "cover"]
 const currentIndex = ref(0)
 const selectList = ref([
 	{
-		sketch: "",
+		sketch: testImg,
 		mainProductImage: "",
 		cover: "",
 		productImage: [],
 		apparelSketch: [],
 		productName: "",
 		price: "",
-		desc: '',
-		gender: '',
-		category:''
+		desc: "",
+		gender: "",
+		category: ""
 	}
 ])
+const prodImgList = ref([
+	{
+		url: testImg,
+		selected: false
+	},
+	{
+		url: testImg,
+		selected: false
+	},
+	{
+		url: testImg,
+		selected: false
+	},
+	{
+		url: testImg,
+		selected: false
+	},
+	{
+		url: testImg,
+		selected: false
+	},
+	{
+		url: testImg,
+		selected: false
+	},
+	{
+		url: testImg,
+		selected: false
+	},
+	{
+		url: testImg,
+		selected: false
+	}
+])
+
+const selectedProdImgs = computed(() => {
+	return prodImgList.value.filter((item) => item.selected).length
+})
+
+const firstSelectedIndex = ref(-1)
+
+const handleSelectProdImg = (index: number) => {
+	const item = prodImgList.value[index]
+	item.selected = !item.selected
+
+	if (item.selected) {
+		if (firstSelectedIndex.value === -1) {
+			firstSelectedIndex.value = index
+			selectList.value[currentIndex.value].mainProductImage = item.url
+		}
+	} else if (firstSelectedIndex.value === index) {
+		selectList.value[currentIndex.value].mainProductImage = null
+		firstSelectedIndex.value = -1
+	}
+}
+
+const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 </script>
 
 <style lang="less" scoped>
 .c-svg {
 	width: initial;
+	height: initial;
 }
 
 .edit-detail-wrapper {
+	overflow-y: auto;
+	// set the scollbar hidden
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
 	.menu-btn {
 		height: 6rem;
 		border: 0.15rem solid #000000;
@@ -72,6 +274,9 @@ const selectList = ref([
 		cursor: pointer;
 	}
 
+	.edit-detail-header {
+		margin-bottom: 2rem;
+	}
 	.operate-menu {
 		column-gap: 2rem;
 
@@ -80,9 +285,250 @@ const selectList = ref([
 			color: #ffffff;
 		}
 	}
+}
+.edit-detail-content {
+	padding-right: 6.4rem;
+	.required {
+		&::after {
+			content: "*";
+			color: #df2b2c;
+			margin-left: 0.4rem;
+		}
+	}
+	.left {
+		.main-image-container {
+			column-gap: 3.6rem;
+			.main-image-item {
+				.title {
+					font-weight: 400;
+					font-style: bold;
+					font-size: 1.4rem;
+					margin-bottom: 0.8rem;
+					text-align: center;
+				}
+				.sketch-item {
+					width: 11.6rem;
+					height: 20.4rem;
+					border: 0.15rem solid #d1d1d1;
+					border-radius: 1rem;
+					position: relative;
+					background-color: #f6f6f6;
+					&.cover {
+						width: 16.17rem;
+						// border-style: dashed;
+						border: none;
+						background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='13%2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+					}
+					.crop-tool {
+						position: absolute;
+						top: 0.4rem;
+						right: 0.4rem;
+						width: 2rem;
+						height: 2rem;
+						border-radius: 50%;
+						cursor: pointer;
+						background-color: #000000;
+					}
+					.sketch-img {
+						// width: 100%;
+						height: 100%;
+					}
+					.trigger {
+						row-gap: 1.2rem;
+						cursor: pointer;
+						height: 100%;
+						padding-top: 6.8rem;
+						.trigger-img {
+							width: 2.4rem;
+							height: 2.4rem;
+						}
+						.trigger-tips {
+							font-size: 1.2rem;
+							width: 9rem;
+							text-align: center;
+							color: #585858;
+						}
+					}
+				}
+			}
+		}
+		.product-image-list-container {
+			margin-top: 3rem;
+			.title {
+				font-weight: 400;
+				font-style: bold;
+				font-size: 1.4rem;
+				margin-bottom: 1.2rem;
+				.sub-title {
+					font-size: 1.2rem;
+					color: #999;
+				}
+				.title-right {
+					color: #585858;
+					font-size: 1.4rem;
+					font-weight: 400;
+				}
+			}
+			.product-image-list {
+				overflow-x: auto;
+				overflow-y: hidden;
+				column-gap: 0.8rem;
+				max-width: 80.2rem;
+				padding-bottom: 1.2rem;
 
-	.edit-detail-content {
-		padding-right: 6.4rem;
+				//滚动条高度0.8rem，背景色#D9D9D9,滚动条圆角0.4rem，小方块为黑色
+				&::-webkit-scrollbar {
+					height: 0.8rem;
+				}
+				&::-webkit-scrollbar-track {
+					background: #d9d9d9;
+					border-radius: 0.8rem;
+					height: 0.8rem;
+				}
+				&::-webkit-scrollbar-thumb {
+					background: #000000;
+					border-radius: 0.8rem;
+					height: 0.8rem;
+				}
+
+				.product-image-item {
+					width: 11.6rem;
+					height: 20.6rem;
+					border-radius: 1rem;
+					border: 0.15rem solid #c7c7c7;
+					position: relative;
+					cursor: pointer;
+					&::after {
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						content: "";
+						background-color: #fcfcfc;
+						opacity: 0.7;
+						border-radius: 1rem;
+					}
+					&.selected {
+						// border-color: #000000;
+						&::after {
+							display: none;
+						}
+					}
+					.checked {
+						width: 2rem;
+						height: 2rem;
+						position: absolute;
+						top: 0.8rem;
+						right: 0.8rem;
+					}
+					.img-src {
+						height: 100%;
+					}
+					.main-pic {
+						position: absolute;
+						height: 2.4rem;
+						line-height: 2.4rem;
+						left: 0.8rem;
+						right: 0.8rem;
+						bottom: 0.8rem;
+						z-index: 1;
+						background: #000000cc;
+						font-weight: 400;
+						color: #fff;
+						font-size: 1.4rem;
+						border-radius: 1.2rem;
+						text-align: center;
+					}
+				}
+			}
+		}
+		.apparel-container {
+			margin-top: 3rem;
+			.title {
+				font-weight: 400;
+				font-style: bold;
+				font-size: 1.4rem;
+				margin-bottom: 0.8rem;
+				.main-title {
+					&::after {
+						content: "*";
+						color: #df2b2c;
+					}
+				}
+				.sub-title {
+					font-size: 1.2rem;
+					color: #999;
+				}
+			}
+			.sketch-list-container {
+				column-gap: 1rem;
+				.sketch-element {
+					width: 10rem;
+					border: 0.15rem solid #c7c7c7;
+					border-radius: 1.2rem;
+					position: relative;
+					.img-src {
+						width: 100%;
+					}
+					.crop-tool {
+						position: absolute;
+						top: 0.4rem;
+						right: 0.4rem;
+						width: 2rem;
+						height: 2rem;
+						border-radius: 50%;
+						cursor: pointer;
+						background-color: #000000;
+					}
+				}
+			}
+		}
+	}
+	.right {
+		width: 55.2rem;
+		.form-container {
+			row-gap: 3rem;
+			.form-item {
+				.form-item-label {
+					font-size: 1.4rem;
+					font-weight: 400;
+					font-style: bold;
+					margin-bottom: 0.6rem;
+				}
+				.form-item-value {
+					border: 0.16rem solid #d1d1d1;
+					border-radius: 1.2rem;
+					position: relative;
+					padding: 1.6rem;
+					box-sizing: border-box;
+					font-size: 1.2rem;
+					font-weight: 400;
+					color: #000;
+					&.price {
+						column-gap: 0.6rem;
+					}
+
+					:deep(.ant-input) {
+						border: none;
+						padding: 0;
+						font-size: 1.2rem;
+						font-weight: 400;
+					}
+					:deep(.ant-input-affix-wrapper) {
+						padding: 0;
+						font-weight: 400;
+						input {
+							font-size: 1.2rem;
+						}
+					}
+					:deep(.ant-input-show-count-suffix) {
+						color: #df2c2c;
+						font-size: 1rem;
+					}
+				}
+			}
+		}
 	}
 }
 </style>