Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

src/component/Administrator/allUser.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="admin_page">
-        <div class="admin_table_search"  :style="{height:isAwayOrUnfold?'7rem':''}">
+		<div class="admin_table_search" :style="{ height: isAwayOrUnfold ? '7rem' : '' }">
 			<div class="admin_state">
 				<div class="admin_state_item">
 					<span>Create Time:</span>
@@ -8,16 +8,11 @@
 						style="width: 250px"
 						class="range_picker"
 						v-model:value="rangePickerValue"
-                        :placeholder="[
+						:placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
-                            $t('HistoryPage.StartDate'),
-                            $t('HistoryPage.EndDate'),
-                        ]"
 						valueFormat="YYYY-MM-DD"
 					>
 						<template #suffixIcon>
-                            <span
+							<span class="icon iconfont range_picker_icon icon-rili"></span>
-                                class="icon iconfont range_picker_icon icon-rili"
-                            ></span>
 						</template>
 					</a-range-picker>
 				</div>
@@ -63,38 +58,50 @@
 						show-search
 					></a-select>
 				</div>
+				<div class="admin_state_item">
+					<span>Orgnization:</span>
+					<a-select
+						v-model:value="organizationId"
+						placeholder="Select the organization"
+						allow-clear
+						style="width: 250px"
+						@popupScroll="handleOrganizationScroll"
+					>
+						<a-select-option
+							v-for="item in organizationOptions"
+							:key="item.id"
+							:value="item.id"
+						>
+							{{ item.name }}
+						</a-select-option>
+					</a-select>
+				</div>
 			</div>
 			<div class="admin_search">
-                <div class="admin_search_item" @click="searchHistoryList" :style="{height:isAwayOrUnfold?'4rem':''}">
+				<div
+					class="admin_search_item"
+					@click="searchHistoryList"
+					:style="{ height: isAwayOrUnfold ? '4rem' : '' }"
+				>
 					Search
 				</div>
-                <div class="admin_search_item" @click="addhHistoryList">
+				<div class="admin_search_item" @click="addhHistoryList">Add</div>
-                    Add
-                </div>
 			</div>
 			<div class="admin_state_list">
-                <div
+				<div class="admin_state_list_item" @click="lastGeTrialList('year')">
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('year')"
-                >
 					Nearly a year
 				</div>
-                <div
+				<div class="admin_state_list_item" @click="lastGeTrialList('month')">
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('month')"
-                >
 					Last month
 				</div>
-                <div
+				<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('week')"
-                >
-                    Last week
 			</div>
 		</div>
-        </div>
+		<div class="awayOrUnfold" :class="{ active: isAwayOrUnfold }">
-		<div class="awayOrUnfold" :class="{active:isAwayOrUnfold}">
+			<span
-			<span class="icon iconfont menu_icon icon-xiala" @click="()=>isAwayOrUnfold = !isAwayOrUnfold"></span>
+				class="icon iconfont menu_icon icon-xiala"
+				@click="() => (isAwayOrUnfold = !isAwayOrUnfold)"
+			></span>
 		</div>
 		<div class="admin_table_content" ref="historyTable">
 			<a-table
@@ -104,24 +111,19 @@
 				:data-source="dataList"
 				:scroll="{ y: historyTableHeight }"
 				@change="changePage"
-				:showSorterTooltip='false'
+				:showSorterTooltip="false"
 				:pagination="{
 					showSizeChanger: true,
 					current: currentPage,
 					pageSize: pageSize,
 					total: total,
 					showQuickJumper: true,
-                    bordered: false,
+					bordered: false
 				}"
 			>
 				<template #bodyCell="{ column, text, record, index }">
 					<div class="operate_list" v-if="column?.Operations">
-                        <div
+						<div class="operate_item" @click="setAagree(record)">Edit</div>
-                            class="operate_item"
-                            @click="setAagree(record)"
-                        >
-                            Edit
-                        </div>
 						<!-- <div
 							class="operate_item"
 							@click="deleteGroup(record, index)"
@@ -132,34 +134,29 @@
 				</template>
 			</a-table>
 		</div>
-		<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue>
+		<allUserPoerationsVue
+			ref="allUserPoerationsVue"
+			@searchHistoryList="searchHistoryList"
+		/>
 	</div>
 </template>
 <script lang="ts">
-import {
+import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue"
-    defineComponent,
+import { formatTime } from "@/tool/util"
-    ref,
+import { useStore } from "vuex"
-    createVNode,
+import { Https } from "@/tool/https"
-    computed,
+import allUserPoerationsVue from "./allUserPoerations.vue"
-    reactive,
+import SelectUser from "@/component/common/SelectUser.vue"
-    toRefs,
-    onMounted,
-} from "vue";
-import { formatTime } from "@/tool/util";
-import { useStore } from "vuex";
-import { Https } from "@/tool/https";
-import allUserPoerationsVue from "./allUserPoerations.vue";
-import SelectUser from '@/component/common/SelectUser.vue'
 export default defineComponent({
-    components: {allUserPoerationsVue,SelectUser},
+	components: { allUserPoerationsVue, SelectUser },
 	setup() {
-        const store:any = useStore()
+		const store: any = useStore()
 		let filter: any = reactive({
 			dataList: [],
 			tableLoading: false,
-			allCountry:[],
+			allCountry: [],
-			isAwayOrUnfold:false
+			isAwayOrUnfold: false
-        });
+		})
 		let filterData: any = reactive({
 			rangePickerValue: [],
 			currentPage: 1,
@@ -172,40 +169,41 @@ export default defineComponent({
 			occupation: "",
 			systemUser: "",
 			order: "", //'Ascending  升序 Descending 降序'
-			orderBy:'',
+			orderBy: "",
 			userName: "",
-        });
+			organizationId: null
+		})
 		let state: any = ref([
 			{
 				label: "all",
-                value: "",
+				value: ""
 			},
 			{
-				label:'visitor',
+				label: "visitor",
-				value:'0',
+				value: "0"
 			},
 			{
-				label:'yearly',
+				label: "yearly",
-				value:'1',
+				value: "1"
 			},
 			{
-				label:'monthly',
+				label: "monthly",
-				value:'2',
+				value: "2"
 			},
 			{
-				label:'trial',
+				label: "trial",
-				value:'3',
+				value: "3"
 			},
 			{
 				label: "userInEvent",
-                value: "4",
+				value: "4"
 			},
 			{
 				label: "Edu Admin",
-                value: "7",
+				value: "7"
-            },
+			}
-        ]);
+		])
-        let renameData: any = ref({}); //修改名字选中的数据
+		let renameData: any = ref({}) //修改名字选中的数据
 		const columns: any = computed(() => {
 			return [
 				{
@@ -213,25 +211,25 @@ export default defineComponent({
 					align: "center",
 					dataIndex: "id",
 					key: "id",
-					width:100,
+					width: 100,
 					fixed: "left",
-					sorter: true,
+					sorter: true
 				},
 				{
 					title: "Email",
 					align: "center",
 					dataIndex: "userEmail",
 					key: "userEmail",
-					width:200,
+					width: 200,
-					ellipsis:true
+					ellipsis: true
 				},
 				{
 					title: "User Name",
 					align: "center",
 					dataIndex: "userName",
 					key: "userName",
-					width:150,
+					width: 150,
-					ellipsis:true
+					ellipsis: true
 					// customRender: (record: any) => {
 					//     let time = formatTime(
 					//         record.text / 1000,
@@ -245,77 +243,77 @@ export default defineComponent({
 					align: "center",
 					dataIndex: "language",
 					key: "language",
-					width:100,
+					width: 100,
-					ellipsis:true,
+					ellipsis: true
 				},
 				{
 					title: "Valid Start Time",
 					align: "center",
 					dataIndex: "validStartTime",
 					key: "validstartTime",
-					width:200,
+					width: 200,
-					ellipsis:true,
+					ellipsis: true,
 					customRender: (record: any) => {
-						let time = ''
+						let time = ""
-						if(record.text){
+						if (record.text) {
-							time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+							time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
 						}
 						return time
-                    },
+					}
 				},
 				{
 					title: "Valid End Time",
 					align: "center",
 					dataIndex: "validEndTime",
 					key: "validendTime",
-					width:200,
+					width: 200,
-					ellipsis:true,
+					ellipsis: true,
 					customRender: (record: any) => {
-						let time = ''
+						let time = ""
-						if(record.text){
+						if (record.text) {
-							time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+							time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
 						}
 						return time
-                    },
+					}
 				},
 				{
 					title: "Country or Region",
 					align: "center",
 					dataIndex: "country",
 					key: "country",
-					width:200,
+					width: 200
 				},
 				{
 					title: "Create Date",
 					align: "center",
 					dataIndex: "createDate",
 					key: "createDate",
-					width:200,
+					width: 200,
-					sorter: true,
+					sorter: true
 				},
 				{
 					title: "Is Beginner",
 					align: "center",
 					dataIndex: "isBeginner",
 					key: "isBeginner",
-					width:80,
+					width: 80,
-					ellipsis:true,
+					ellipsis: true,
 					customRender: (record: any) => {
-                        let str;
+						let str
 						if (record.value == 1) {
-                            str = "Yes";
+							str = "Yes"
 						} else {
-                            str = "No";
+							str = "No"
+						}
+						return str
 					}
-                        return str;
-                    },
 				},
 				{
-                    title: 'Machine Room Ip',
+					title: "Machine Room Ip",
 					align: "center",
 					dataIndex: "browserIdentifiers",
 					key: "browserIdentifiers",
-					width:200,
+					width: 200
 				},
 				{
 					title: "Credits",
@@ -326,11 +324,11 @@ export default defineComponent({
 					// resizable: true,
 					dataIndex: "credits",
 					key: "credits",
-					width:100,
+					width: 100,
-					sorter: true,
+					sorter: true
 				},
 				{
-                    title: 'User Type',
+					title: "User Type",
 					align: "center",
 					// width: 150,
 					// minWidth: 100,
@@ -338,84 +336,84 @@ export default defineComponent({
 					// resizable: true,
 					dataIndex: "systemUser",
 					key: "systemUser",
-					width:100,
+					width: 100,
 					customRender: (record: any) => {
-                        let str;
+						let str
 						if (record.value == 0) {
-                            str = "visitor";
+							str = "visitor"
 						} else if (record.value == 1) {
-                            str = "yearly";
+							str = "yearly"
 						} else if (record.value == 2) {
-                            str = "monthly";
+							str = "monthly"
 						} else if (record.value == 3) {
-                            str = "trial";
+							str = "trial"
 						} else if (record.value == 4) {
-                            str = "userInEvent";
+							str = "userInEvent"
 						} else if (record.value == 7) {
-                            str = "Edu Admin";
+							str = "Edu Admin"
+						}
+						return str
 					}
-                        return str;
-                    },
 				},
 				{
 					title: "Operations",
 					key: "operation",
-					width:120,
+					width: 120,
 					align: "center",
 					fixed: "right",
 					// slots:{customRender:'action'}
-                    Operations: true,
+					Operations: true
-                },
+				}
-            ];
+			]
-        });
+		})
 		//改变页码
-        let changePage = (e: any, filters:any, sorter:any) => {
+		let changePage = (e: any, filters: any, sorter: any) => {
-            filterData.currentPage = e.current;
+			filterData.currentPage = e.current
-            filterData.pageSize = e.pageSize;
+			filterData.pageSize = e.pageSize
-			if(sorter.order){
+			if (sorter.order) {
-				if(sorter.columnKey == 'id'){
+				if (sorter.columnKey == "id") {
-					filterData.orderBy = 'id'
+					filterData.orderBy = "id"
-				}else if(sorter.columnKey == "createDate"){
+				} else if (sorter.columnKey == "createDate") {
-					filterData.orderBy = 'time'
+					filterData.orderBy = "time"
-				}else if(sorter.columnKey == "credits"){
+				} else if (sorter.columnKey == "credits") {
-					filterData.orderBy = 'credits'
+					filterData.orderBy = "credits"
 				}
 			}
-			if(sorter.order){
+			if (sorter.order) {
-				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
+				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending"
-			}else{
+			} else {
-				filterData.order = ''
+				filterData.order = ""
+			}
+			gettrialList()
 		}
-            gettrialList();
-        };
 
 		//查询列表
 		let searchHistoryList = () => {
-            filterData.currentPage = 1;
+			filterData.currentPage = 1
-            gettrialList();
+			gettrialList()
-        };
+		}
 		let clearHistoryList = () => {
-            filterData.rangePickerValue = [],
+			;((filterData.rangePickerValue = []),
-			filterData.currentPage = 1,
+				(filterData.currentPage = 1),
-			filterData.pageSize = 10,
+				(filterData.pageSize = 10),
-			filterData.total = 0,
+				(filterData.total = 0),
-			filterData.country = "",
+				(filterData.country = ""),
-			filterData.email = "",
+				(filterData.email = ""),
-			filterData.userType = "",
+				(filterData.userType = ""),
-			filterData.ids = [],
+				(filterData.ids = []),
-			filterData.occupation = "",
+				(filterData.occupation = ""),
-			filterData.order = "", //'Ascending  升序 Descending 降序'
+				(filterData.order = ""), //'Ascending  升序 Descending 降序'
-			filterData.orderBy = "", //'Ascending  升序 Descending 降序'
+				(filterData.orderBy = ""), //'Ascending  升序 Descending 降序'
-			filterData.systemUser = "",
+				(filterData.systemUser = ""),
-			filterData.userName = "";
+				(filterData.userName = ""))
-        };
+		}
 		let setHistoryListData = () => {
 			let startDate: any = filterData.rangePickerValue?.[0]
 				? filterData.rangePickerValue[0] + " " + "00:00:00"
-                : "";
+				: ""
 			let endDate: any = filterData.rangePickerValue?.[1]
 				? filterData.rangePickerValue[1] + " " + "23:59:59"
-                : "";
+				: ""
 			let data = {
 				endTime: endDate,
 				startTime: startDate,
@@ -430,63 +428,118 @@ export default defineComponent({
 				order: filterData.order,
 				orderBy: filterData.orderBy,
 				userName: filterData.userName,
-            };
+				organizationId: filterData.organizationId
-            return data;
+			}
-        };
+			return data
+		}
 		//获取列表
 		let gettrialList = () => {
-            filter.tableLoading = true;
+			filter.tableLoading = true
-            let data = setHistoryListData();
+			let data = setHistoryListData()
-            Https.axiosPost(Https.httpUrls.getUserInfo, data).then(
+			Https.axiosPost(Https.httpUrls.getUserInfo, data).then((rv: any) => {
-                (rv: any) => {
 				if (rv) {
 					// this.dataList = rv
-                        filter.dataList = rv.records;
+					filter.dataList = rv.records
-                        filterData.total = rv.total;
+					filterData.total = rv.total
-                        filter.tableLoading = false;
+					filter.tableLoading = false
 
 					// this.workspaceItem.position = this.singleTypeList[0].label
 				}
+			})
 		}
-            );
-        };
 		let lastGeTrialList = (str: string) => {
-            clearHistoryList();
+			clearHistoryList()
-            let currentDate = new Date();
+			let currentDate = new Date()
-            let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
+			let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
 			// 计算30天前的时间戳
-            let thirtyDaysAgoTimestamp;
+			let thirtyDaysAgoTimestamp
 			if (str == "year") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
 			} else if (str == "month") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
 			} else if (str == "week") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60
+			}
+			filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp, "YYYY-MM-DD")
+			gettrialList()
 		}
-            filterData.rangePickerValue[0] = formatTime(
-                thirtyDaysAgoTimestamp,
-                "YYYY-MM-DD"
-            );
-            gettrialList();
-        };
 		let filterOption = (input: any, option: any) => {
 			// 使用 option.label 进行搜索
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+			return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        };
+		}
 		let addhHistoryList = () => {
-			allUserPoerationsVue.value.init('Add','')
+			allUserPoerationsVue.value.init("Add", "")
-		};
+		}
 		let allUserPoerationsVue = ref()
-		let setAagree = (data:any) =>{
+		let setAagree = (data: any) => {
-			allUserPoerationsVue.value.init('Edit',data)
+			allUserPoerationsVue.value.init("Edit", data)
 		}
+
+		const organizationOptions = ref([])
+		const organizationParams = reactive({
+			page: 1,
+			size: 10,
+			total: 0
+		})
+		const organizationLoading = ref(false)
+		const getOrganizationList = async (isLoadMore = false) => {
+			console.log("111111")
+			if (organizationLoading.value) return
+			if (isLoadMore) {
+				const loaded = organizationParams.page * organizationParams.size
+				if (organizationParams.total && loaded >= organizationParams.total) return
+				organizationParams.page += 1
+			} else {
+				organizationParams.page = 1
+				organizationOptions.value = []
+			}
+			organizationLoading.value = true
+			try {
+				const { total, ...requestParams } = organizationParams
+				const rv: any = await Https.axiosPost(
+					Https.httpUrls.queryOrganization,
+					requestParams
+				)
+				if (rv) {
+					const newRecords = rv.records || []
+					// 遍历新数据，如果已存在则覆盖，不存在则追加
+					newRecords.forEach((newOrg: any) => {
+						const newOrgId = String(newOrg.id)
+						const existingIndex = organizationOptions.value.findIndex(
+							(org: any) => String(org.id) === newOrgId
+						)
+						if (existingIndex !== -1) {
+							// 如果已存在，用新数据覆盖旧项
+							organizationOptions.value[existingIndex] = newOrg
+						} else {
+							// 如果不存在，追加到末尾
+							organizationOptions.value.push(newOrg)
+						}
+					})
+					organizationParams.total = rv.total || 0
+				}
+			} finally {
+				organizationLoading.value = false
+			}
+		}
+
+		const handleOrganizationScroll = (e: any) => {
+			const target = e?.target
+			if (!target) return
+			const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
+			if (nearBottom) {
+				getOrganizationList(true)
+			}
+		}
+
 		onMounted(() => {
-			let allCountry: any = sessionStorage.getItem("allCountry");
+			let allCountry: any = sessionStorage.getItem("allCountry")
 			if (allCountry) {
-                filter.allCountry = JSON.parse(allCountry);
+				filter.allCountry = JSON.parse(allCountry)
 			}
-            gettrialList();
+			gettrialList()
-        });
+			getOrganizationList()
+		})
 		return {
 			...toRefs(filter),
 			...toRefs(filterData),
@@ -501,29 +554,32 @@ export default defineComponent({
 			filterOption,
 			allUserPoerationsVue,
 			setAagree,
-        };
+			handleOrganizationScroll,
+			getOrganizationList,
+			organizationOptions,
+			organizationParams
+		}
 	},
 	data() {
 		return {
 			historyTableHeight: 0,
 			handleResizeColumn: (w: any, col: any) => {
-                col.width = w;
+				col.width = w
-            },
+			}
-        };
+		}
 	},
 	mounted() {
-        let historyTable: any = this.$refs.historyTable;
+		let historyTable: any = this.$refs.historyTable
-        this.historyTableHeight = historyTable.clientHeight - 200;
+		this.historyTableHeight = historyTable.clientHeight - 200
 	},
-    methods: {},
+	methods: {}
-});
+})
 </script>
 <style lang="less" scoped>
 .admin_page .admin_table_search .admin_state {
 	display: flex;
 	flex-wrap: wrap;
 }
-.admin_page{
+.admin_page {
-	
 }
 </style>

src/lang/cn.ts

@@ -1737,7 +1737,7 @@ export default {
 		GetStarted: '开始体验',
 	},
   SellerListEdit:{
-		saveDraft: "保存草稿",
+		saveDraft: "全部保存",
 		publish: "发布",
 		sketch: "线稿图",
 		mainProductImage: "产品主图",

src/lang/en.ts

@@ -1788,7 +1788,7 @@ export default {
 		GetStarted: 'Get Started',
 	},
 	SellerListEdit:{
-		saveDraft:'Save Draft',
+		saveDraft:'Save All New',
 		publish:'Publish',
 		sketch:'Sketch',
 		mainProductImage:'Main Product Image',

src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue

@@ -144,7 +144,6 @@ const open = (url, callback, options, origin) => {
 		coverOrigin.value = origin
 		data.url = origin[0].url
 	}
-	console.log("-------", origin)
 	show.value = true
 }
 const onCancel = () => {

src/views/SellerDashboard/BrandProfile/image-clip.vue

@@ -204,23 +204,23 @@
 				.cropper-box-canvas {
 					background-color: #ffffff;
 
-					img {
+					// img {
-						height: 100%;
+					// 	height: 100%;
-					}
+					// }
 				}
 			}
 			&.is-cover {
 				:deep(.vue-cropper) {
 					overflow: hidden;
 				}
-				:deep(.cropper-box-canvas) {
+				// :deep(.cropper-box-canvas) {
-					width: 31.1rem !important;
+				// 	width: 31.1rem !important;
-					left: 50% !important;
+				// 	left: 50% !important;
-					transform: translateX(-50%) !important;
+				// 	transform: translateX(-50%) !important;
-					img {
+				// 	img {
-						display: none;
+				// 		display: none;
-					}
+				// 	}
-				}
+				// }
 			}
 		}
 

src/views/SellerDashboard/MyListings/EditDetail/components/ApparelSketchList.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ListingItem } from "../types"
+
+defineProps<{
+	sketchList: ListingItem["sketchList"]
+}>()
+
+const emit = defineEmits<{
+	(e: "crop", data: string | null, type: "apparel", index?: number): void
+}>()
+</script>
+
+<template>
+	<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 || ''" alt="" />
+				<div class="crop-tool flex flex-center" @click="emit('crop', item.url, 'apparel', index)">
+					<SvgIcon name="CCrop" color="#fff" size="12" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.apparel-container {
+	margin-top: 3rem;
+
+	.title {
+		font-size: 1.4rem;
+		margin-bottom: 0.8rem;
+
+		.main-title {
+			font-weight: 400;
+			font-style: bold;
+
+			&::after {
+				content: "*";
+				color: #df2b2c;
+			}
+		}
+
+		.sub-title {
+			font-size: 1.2rem;
+			color: #999;
+		}
+	}
+
+	.sketch-list-container {
+		column-gap: 1rem;
+		flex-wrap: wrap;
+
+		.sketch-element {
+			width: 10rem;
+			height: 14.6rem;
+			border: 0.15rem solid #c7c7c7;
+			border-radius: 1.2rem;
+			position: relative;
+			overflow: hidden;
+
+			.img-src {
+				width: 100%;
+			}
+
+			.crop-tool {
+				position: absolute;
+				top: 0.4rem;
+				right: 0.4rem;
+				width: 2rem;
+				height: 2rem;
+				border-radius: 50%;
+				background-color: #000000;
+			}
+		}
+	}
+}
+</style>

src/views/SellerDashboard/MyListings/EditDetail/components/ListingForm.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import Radio from "./Radio.vue"
+import type { RadioOption } from "../types"
+
+defineProps<{
+	productName: string
+	price: string
+	desc: string
+	gender: string
+	category: string[] | null
+	genderOptions: RadioOption[]
+	categoryOptions: RadioOption[]
+}>()
+
+const emit = defineEmits<{
+	(e: "update:productName", value: string): void
+	(e: "update:price", value: string): void
+	(e: "update:desc", value: string): void
+	(e: "update:gender", value: string): void
+	(e: "update:category", value: string[] | null): void
+}>()
+</script>
+
+<template>
+	<div class="form-container flex flex-col">
+		<div class="form-item">
+			<div class="form-item-label required">
+				{{ $t("SellerListEdit.productName") }}
+			</div>
+			<div class="form-item-value product-name">
+				<a-input
+					:value="productName"
+					show-count
+					placeholder="Enter product name"
+					:bordered="false"
+					:maxlength="60"
+					@update:value="emit('update:productName', $event)"
+				/>
+			</div>
+		</div>
+		<div class="form-item">
+			<div class="form-item-label required">{{ $t("SellerListEdit.price") }}</div>
+			<div class="form-item-value price flex align-center">
+				<span>HK$</span>
+				<a-input
+					:value="price"
+					placeholder="0.00"
+					:bordered="false"
+					@update:value="emit('update:price', $event)"
+				/>
+			</div>
+		</div>
+		<div class="form-item">
+			<div class="form-item-label required">
+				{{ $t("SellerListEdit.productDescription") }}
+			</div>
+			<div class="form-item-value desc">
+				<a-textarea
+					:value="desc"
+					show-count
+					:rows="4"
+					placeholder="Enter product description"
+					:bordered="false"
+					:maxlength="500"
+					@update:value="emit('update:desc', $event)"
+				/>
+			</div>
+		</div>
+		<div class="form-item">
+			<div class="form-item-label required">
+				{{ $t("SellerListEdit.designFor") }}
+			</div>
+			<div class="form-item-value no-border">
+				<Radio
+					:options="genderOptions"
+					:model-value="gender"
+					@update:model-value="emit('update:gender', $event)"
+				/>
+			</div>
+		</div>
+		<div class="form-item">
+			<div class="form-item-label with-tip">
+				<span class="required">{{ $t("SellerListEdit.productCategory") }}</span>
+				<span class="help-text">{{ $t("SellerListEdit.categoryTips") }}</span>
+			</div>
+			<div class="form-item-value no-border">
+				<Radio
+					multiple
+					:options="categoryOptions"
+					:model-value="category"
+					@update:model-value="emit('update:category', $event)"
+				/>
+			</div>
+		</div>
+		<div class="license-note flex align-center">
+			<img src="@/assets/images/seller/tips.png" class="info-icon" />
+			<div class="note-copy">
+				{{ $t("SellerListEdit.policy") }}
+				<a href="javascript:void(0)">{{ $t("SellerListEdit.learnMore") }}</a>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.required {
+	&::after {
+		content: "*";
+		color: #df2b2c;
+		margin-left: 0.4rem;
+	}
+}
+
+.form-container {
+	row-gap: 3rem;
+
+	.form-item {
+		.form-item-label {
+			font-size: 1.4rem;
+			font-weight: 400;
+			font-style: bold;
+			margin-bottom: 0.6rem;
+			line-height: 1.5;
+
+			&.with-tip {
+				display: flex;
+				align-items: center;
+				column-gap: 0.8rem;
+			}
+
+			.help-text {
+				font-size: 1rem;
+				color: #999;
+			}
+		}
+
+		.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;
+			color: #000;
+
+			&.no-border {
+				border: none;
+				padding: 0;
+			}
+
+			&.price {
+				column-gap: 0.6rem;
+			}
+
+			:deep(.ant-input),
+			:deep(.ant-input-affix-wrapper),
+			:deep(.ant-input-textarea textarea) {
+				border: none;
+				padding: 0;
+				font-size: 1.2rem;
+				color: #000;
+				box-shadow: none;
+			}
+
+			:deep(.ant-input) {
+				line-height: 1.5;
+			}
+
+			:deep(.ant-input-show-count-suffix) {
+				color: #df2c2c;
+				font-size: 1rem;
+			}
+
+			:deep(textarea.ant-input) {
+				resize: none;
+				min-height: 5.4rem;
+				padding-bottom: 1.8rem;
+				line-height: 1.5;
+			}
+
+			:deep(.ant-input-textarea-show-count) {
+				position: relative;
+
+				&::after {
+					float: none;
+					position: absolute;
+					color: #df2c2c;
+					bottom: 0;
+					right: 1.6rem;
+				}
+			}
+		}
+	}
+}
+
+.license-note {
+	padding: 1.6rem;
+	column-gap: 1.6rem;
+	background: #f7f7f7;
+	border-radius: 0.8rem;
+
+	.info-icon {
+		width: 2.4rem;
+		height: 2.4rem;
+		flex-shrink: 0;
+	}
+
+	.note-copy {
+		font-size: 1.2rem;
+		line-height: 1.5;
+		color: #000;
+		font-weight: 400;
+		font-style: medium;
+
+		a {
+			color: #0080ed;
+			text-decoration: underline;
+			margin-left: 0.4rem;
+		}
+	}
+}
+</style>

src/views/SellerDashboard/MyListings/EditDetail/components/ProductImageList.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { ListingItem } from "../types"
+
+const props = defineProps<{
+	imageList: ListingItem["prodImageList"]
+	firstSelectedIndex: number | null
+}>()
+
+const emit = defineEmits<{
+	(e: "select", index: number): void
+}>()
+
+const selectedCount = computed(() => props.imageList.filter((item) => item.selected).length)
+</script>
+
+<template>
+	<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">{{ selectedCount }}/{{ imageList.length }} selected</div>
+		</div>
+		<div class="product-image-list flex">
+			<div
+				v-for="(item, index) in imageList"
+				:key="index"
+				class="product-image-item flex flex-center"
+				:class="{ selected: item.selected }"
+				@click="emit('select', index)"
+			>
+				<img
+					v-if="item.selected"
+					src="@/assets/images/seller/checked.png"
+					class="checked"
+					alt=""
+				/>
+				<img class="img-src" :src="item.url" alt="" />
+				<div v-if="item.selected && index === firstSelectedIndex" class="main-pic">
+					main
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.product-image-list-container {
+	margin-top: 3rem;
+
+	.title {
+		font-size: 1.4rem;
+		margin-bottom: 1.2rem;
+
+		.main-title {
+			font-weight: 400;
+			font-style: bold;
+		}
+
+		.sub-title {
+			font-size: 1.2rem;
+			color: #999;
+		}
+
+		.title-right {
+			color: #585858;
+			font-size: 1.4rem;
+		}
+	}
+
+	.product-image-list {
+		overflow-x: auto;
+		overflow-y: hidden;
+		column-gap: 0.8rem;
+		max-width: 80.2rem;
+		padding-bottom: 1.2rem;
+
+		&::-webkit-scrollbar {
+			height: 0.8rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: #d9d9d9;
+			border-radius: 0.8rem;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: #000000;
+			border-radius: 0.8rem;
+		}
+
+		.product-image-item {
+			width: 11.6rem;
+			height: 20.6rem;
+			border-radius: 1rem;
+			border: 0.15rem solid #c7c7c7;
+			position: relative;
+			cursor: pointer;
+			overflow: hidden;
+			flex-shrink: 0;
+
+			&::after {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				content: "";
+				background-color: #fcfcfc;
+				opacity: 0.7;
+				border-radius: 1rem;
+			}
+
+			&.selected {
+				border-color: #000;
+
+				&::after {
+					display: none;
+				}
+			}
+
+			.checked {
+				width: 2rem;
+				height: 2rem;
+				position: absolute;
+				top: 0.8rem;
+				right: 0.8rem;
+				z-index: 1;
+			}
+
+			.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: rgba(0, 0, 0, 0.8);
+				color: #fff;
+				font-size: 1.4rem;
+				border-radius: 1.2rem;
+				text-align: center;
+			}
+		}
+	}
+}
+</style>

src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue

@@ -8,7 +8,7 @@
 				'radio-button',
 				{
 					'is-active': multiple
-						? selectedValues.includes(item.key)
+						? selectedValues.includes(normalizeValue(item.key))
 						: modelValue === item.key
 				}
 			]"
@@ -20,54 +20,73 @@
 </template>
 
 <script setup lang="ts">
-	import { computed } from "vue"
+import { computed } from "vue"
 
-	interface Option {
+interface Option {
 	name: string | number
 	value: string | number | boolean
 	key: string
 	optype: boolean
-	}
+}
 
-	const props = defineProps<{
+const props = defineProps<{
-		modelValue: string | number | boolean | Array<string | number | boolean> | null
+	modelValue:
+		| string
+		| number
+		| boolean
+		| Array<string | number | boolean | null | undefined>
+		| null
 	options: Option[] // 按钮选项数组
 	multiple?: boolean // 是否支持多选，默认为 false
-	}>()
+}>()
 
-	const emit = defineEmits<{
+const emit = defineEmits<{
 	(e: "update:modelValue", value: any): void
-	}>()
+}>()
 
-	const multiple = props.multiple === true
+const multiple = props.multiple === true
 
-	const selectedValues = computed(() => {
+const normalizeValue = (value: any) =>
+	typeof value === "string" ? value.toLocaleLowerCase() : value
+
+const selectedValues = computed(() => {
 	if (!multiple) {
 		return typeof props.modelValue === "undefined" || props.modelValue === null
 			? []
 			: [props.modelValue]
 	}
 
-		return Array.isArray(props.modelValue) ? props.modelValue : []
+	return Array.isArray(props.modelValue)
-	})
+		? props.modelValue
+				.filter((value) => value !== null && typeof value !== "undefined")
+				.map(normalizeValue)
+		: []
+})
 
-	const selectOption = (value: any) => {
+const selectOption = (value: any) => {
 	if (multiple) {
-			const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+		const selectedValue = normalizeValue(value)
-			const index = current.indexOf(value)
+		const current = Array.isArray(props.modelValue)
+			? props.modelValue
+					.filter((item) => item !== null && typeof item !== "undefined")
+					.map(normalizeValue)
+			: []
+		const index = current.indexOf(selectedValue)
+
 		if (index >= 0) {
 			current.splice(index, 1)
 		} else {
-				current.push(value.toLocaleLowerCase)
+			current.push(selectedValue)
 		}
-			emit("update:modelValue", current)
+
+		emit("update:modelValue", current.length ? current : null)
 		return
 	}
 
 	if (props.modelValue !== value) {
 		emit("update:modelValue", value)
 	}
-	}
+}
 </script>
 
 <style lang="less" scoped>

src/views/SellerDashboard/MyListings/EditDetail/components/TopImageSection.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { TopImageType } from "../types"
+
+defineProps<{
+	images: Record<TopImageType, string | null>
+}>()
+
+const emit = defineEmits<{
+	(e: "crop", data: string | null, type: TopImageType): void
+}>()
+
+const topImageList: TopImageType[] = ["sketch", "mainProductImage", "cover"]
+const topImageTitleMap: Record<TopImageType, string> = {
+	sketch: "SellerListEdit.sketch",
+	mainProductImage: "SellerListEdit.mainProductImage",
+	cover: "SellerListEdit.cover"
+}
+</script>
+
+<template>
+	<div class="main-image-container flex">
+		<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(topImageTitleMap[type]) }}
+			</div>
+			<div class="sketch-item flex flex-center" :class="type">
+				<div
+					v-if="images[type]"
+					class="crop-tool flex flex-center"
+					@click="emit('crop', images[type], type)"
+				>
+					<SvgIcon name="CCrop" color="#fff" size="12" />
+				</div>
+				<img
+					v-if="images[type]"
+					:src="images[type] || ''"
+					class="sketch-img"
+					:class="type"
+					alt=""
+				/>
+				<div v-else class="trigger flex flex-col align-center">
+					<div
+						v-if="type === 'cover'"
+						class="cover-trigger flex flex-col align-center"
+						@click="emit('crop', null, 'cover')"
+					>
+						<SvgIcon class="trigger-icon" name="CCrop" color="#585858" size="24" />
+						<div class="trigger-tips">
+							{{ $t("SellerListEdit.cropDesc") }}
+						</div>
+					</div>
+					<template v-else>
+						<div class="trigger-img placeholder"></div>
+						<div class="trigger-tips">
+							{{ $t("SellerListEdit.productImageDesc") }}
+						</div>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.c-svg {
+	width: initial;
+	height: initial;
+}
+
+.required {
+	&::after {
+		content: "*";
+		color: #df2b2c;
+		margin-left: 0.4rem;
+	}
+}
+
+.main-image-container {
+	column-gap: 3.5rem;
+
+	.main-image-item {
+		flex-shrink: 0;
+
+		.title {
+			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;
+			overflow: hidden;
+
+			&.cover {
+				width: 16.2rem;
+				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' rx='11' ry='11' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='8%2c 5' stroke-linecap='square'/%3e%3c/svg%3e");
+				border: none;
+			}
+
+			.crop-tool {
+				position: absolute;
+				top: 0.8rem;
+				right: 0.8rem;
+				width: 2rem;
+				height: 2rem;
+				border-radius: 50%;
+				background-color: #000000;
+				z-index: 1;
+				cursor: pointer;
+			}
+
+			.sketch-img {
+				height: 100%;
+
+				&.sketch {
+					height: initial;
+					width: 100%;
+				}
+			}
+
+			.trigger {
+				cursor: pointer;
+				height: 100%;
+				padding: 6rem 2rem 0;
+
+				&,
+				.cover-trigger {
+					row-gap: 1.2rem;
+				}
+
+				.placeholder {
+					width: 2.4rem;
+					height: 2.4rem;
+					border-radius: 0.6rem;
+					background: linear-gradient(135deg, #efefef 0%, #cdcdcd 100%);
+				}
+
+				.trigger-tips {
+					font-size: 1.2rem;
+					text-align: center;
+					color: #585858;
+					line-height: 1.3;
+				}
+			}
+		}
+	}
+}
+</style>

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

@@ -28,191 +28,32 @@
 		</seller-header>
 		<div class="edit-detail-content flex">
 			<div class="left">
-				<div class="main-image-container flex">
+				<TopImageSection :images="previewImageMap" @crop="handleClickCrop" />
-					<div
+				<ProductImageList
-						v-for="type in topImageList"
+					:image-list="prodImgList"
-						:key="type"
+					:first-selected-index="firstSelectedIndex"
-						:class="`main-image-item flex flex-col align-center ${type}`"
+					@select="handleSelectProdImg"
-					>
-						<div class="title" :class="{ required: type !== 'mainProductImage' }">
-							{{ $t(topImageTitleMap[type]) }}
-						</div>
-						<div class="sketch-item flex flex-center" :class="type">
-							<div
-								v-if="previewImageMap[type]"
-								class="crop-tool flex flex-center"
-								@click="handleClickCrop(previewImageMap[type], type)"
-							>
-								<SvgIcon name="CCrop" color="#fff" size="12" />
-							</div>
-							<img
-								v-if="previewImageMap[type]"
-								:src="previewImageMap[type]"
-								class="sketch-img"
-								:class="type"
-								alt=""
 				/>
-							<div v-else class="trigger flex flex-col align-center">
+				<ApparelSketchList
-								<div
+					:sketch-list="currentListing.sketchList"
-									v-if="type === 'cover'"
+					@crop="handleClickCrop"
-									class="cover-trigger flex flex-col align-center"
-									@click="handleClickCrop(null, 'cover')"
-								>
-									<SvgIcon
-										class="trigger-icon"
-										name="CCrop"
-										color="#585858"
-										size="24"
 				/>
-									<div class="trigger-tips">
-										{{ $t("SellerListEdit.cropDesc") }}
-									</div>
-								</div>
-								<template v-else>
-									<div class="trigger-img placeholder"></div>
-									<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"
-							:key="index"
-							class="product-image-item flex flex-center"
-							:class="{ selected: item.selected }"
-							@click="handleSelectProdImg(index)"
-						>
-							<img
-								v-if="item.selected"
-								src="@/assets/images/seller/checked.png"
-								class="checked"
-								alt=""
-							/>
-							<img class="img-src" :src="item.url" alt="" />
-							<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 selectList[currentIndex].sketchList"
-							:key="index"
-							class="sketch-element flex flex-center"
-						>
-							<img class="img-src" :src="item.url" alt="" />
-							<div
-								class="crop-tool flex flex-center"
-								@click="handleClickCrop(item.url, 'apparel')"
-							>
-								<SvgIcon name="CCrop" color="#fff" size="12" />
-							</div>
-						</div>
-					</div>
-				</div>
 			</div>
 			<div class="right">
-				<div class="form-container flex flex-col">
+				<ListingForm
-					<div class="form-item">
+					:product-name="currentListing.productName"
-						<div class="form-item-label required">
+					:price="currentListing.price"
-							{{ $t("SellerListEdit.productName") }}
+					:desc="currentListing.desc"
-						</div>
+					:gender="currentListing.gender"
-						<div class="form-item-value product-name">
+					:category="currentListing.category"
-							<a-input
+					:gender-options="genderOptions"
-								v-model:value="currentListing.productName"
+					:category-options="categoryOptions"
-								show-count
+					@update:product-name="currentListing.productName = $event"
-								placeholder="Enter product name"
+					@update:price="currentListing.price = $event"
-								:bordered="false"
+					@update:desc="currentListing.desc = $event"
-								:maxlength="60"
+					@update:gender="currentListing.gender = $event"
+					@update:category="currentListing.category = $event"
 				/>
-						</div>
-					</div>
-					<div class="form-item">
-						<div class="form-item-label required">{{ $t("SellerListEdit.price") }}</div>
-						<div class="form-item-value price flex align-center">
-							<span>HK$</span>
-							<a-input
-								v-model:value="currentListing.price"
-								placeholder="0.00"
-								:bordered="false"
-							/>
-						</div>
-					</div>
-					<div class="form-item">
-						<div class="form-item-label required">
-							{{ $t("SellerListEdit.productDescription") }}
-						</div>
-						<div class="form-item-value desc">
-							<a-textarea
-								v-model:value="currentListing.desc"
-								show-count
-								:rows="4"
-								placeholder="Enter product description"
-								:bordered="false"
-								:maxlength="500"
-							/>
-						</div>
-					</div>
-					<div class="form-item">
-						<div class="form-item-label required">
-							{{ $t("SellerListEdit.designFor") }}
-						</div>
-						<div class="form-item-value no-border">
-							<Radio :options="genderOptions" v-model="currentListing.gender" />
-						</div>
-					</div>
-					<div class="form-item">
-						<div class="form-item-label with-tip">
-							<span class="required">{{ $t("SellerListEdit.productCategory") }}</span>
-							<span class="help-text">{{ $t("SellerListEdit.categoryTips") }}</span>
-						</div>
-						<div class="form-item-value no-border">
-							<Radio
-								multiple
-								:options="categoryOptions"
-								v-model="currentListing.category"
-							/>
-						</div>
-					</div>
-					<div class="license-note flex align-center">
-						<img src="@/assets/images/seller/tips.png" class="info-icon" />
-						<div class="note-copy">
-							{{ $t("SellerListEdit.policy") }}
-							<a href="javascript:void(0)">{{ $t("SellerListEdit.learnMore") }}</a>
-						</div>
-					</div>
-				</div>
 				<div class="page-control flex align-center" v-if="selectList.length > 1">
 					<a-pagination
 						v-model:current="currentPage"
@@ -238,13 +79,16 @@
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, watch, onMounted } from "vue"
+	import { computed, ref, onMounted } from "vue"
 	import { useRouter } from "vue-router"
 	import { useI18n } from "vue-i18n"
 	import { message } from "ant-design-vue"
 	import SellerHeader from "../../seller-header.vue"
-	import Radio from "./components/Radio.vue"
 	import ImageClipDialog from "../../BrandProfile/image-clip-dialog.vue"
+	import ApparelSketchList from "./components/ApparelSketchList.vue"
+	import ListingForm from "./components/ListingForm.vue"
+	import ProductImageList from "./components/ProductImageList.vue"
+	import TopImageSection from "./components/TopImageSection.vue"
 	import { useStore } from "vuex"
 	import {
 		fetchSketchDetail,
@@ -252,6 +96,13 @@
 		fetchListingDetailById,
 		fetchUpdateListing
 	} from "./api"
+	import type {
+		ListingDetailImage,
+		ListingDetailResponse,
+		ListingItem,
+		RadioOption,
+		StatusType
+	} from "./types"
 
 	const ROUTER = useRouter()
 	const { t } = useI18n()
@@ -264,31 +115,6 @@
 
 	const STORE = useStore()
 
-	type CategoryOption = {
-		label: string
-		value: string
-	}
-
-	type ListingItem = {
-		designItemId: number | string | null
-		sketch: string | null
-		mainProductImage: string
-		cover: string
-		productImage: string[]
-		apparelSketch: string[]
-		productName: string
-		price: string
-		desc: string
-		gender: string
-		category: string[]
-		prodImageList: Array<{
-			url: string
-			selected?: boolean
-		}>
-		sketchList: Array<{ url: string | null }>
-	}
-	type StatusType = "draft" | "publish"
-
 	const createListingItem = (
 		sketch: string | null = null,
 		designItemId: number | string | null = null
@@ -308,16 +134,9 @@
 		sketchList: []
 	})
 
-	const topImageList = ["sketch", "mainProductImage", "cover"] as const
-	const topImageTitleMap: Record<(typeof topImageList)[number], string> = {
-		sketch: "SellerListEdit.sketch",
-		mainProductImage: "SellerListEdit.mainProductImage",
-		cover: "SellerListEdit.cover"
-	}
-
 	const genderOptions = STORE.state.UserHabit?.sex.value || []
 
-	const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
+	const fallbackCategoryOptions: Record<string, RadioOption[]> = {
 		MALE: STORE.state.UserHabit?.MalePosition || [],
 		FEMALE: STORE.state.UserHabit?.FemalePosition || []
 	}
@@ -343,21 +162,96 @@
 		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) {
@@ -367,7 +261,12 @@
 	}
 
 	const cropType = ref("")
-	const handleClickCrop = (data, type, list = []) => {
+	const handleClickCrop = (data: any, type: string, paramThree: any = []) => {
+		// 处理来自TopImageSection的调用: (data, type, list)
+		// 处理来自ApparelSketchList的调用: (data, type, index)
+		const index = typeof paramThree === 'number' ? paramThree : undefined
+		const list = Array.isArray(paramThree) ? paramThree : []
+
 		// console.log(data, type)
 		// console.log(selectList.value[currentIndex.value])
 		let origin = []
@@ -392,8 +291,11 @@
 			(file) => {
 				// console.log(file)
 				uploadFile(file).then((res) => {
-					console.log(res)
+					if (type === "apparel" && typeof index !== "undefined") {
+						selectList.value[currentIndex.value].sketchList[index].url = res
+					} else {
 						selectList.value[currentIndex.value][type] = res
+					}
 				})
 			},
 			{ ratio, isPreview: true, title: titleList[type], isProduct: true },
@@ -450,35 +352,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,
+				title: item.productName,
-				description: selectList.value[currentIndex.value].desc,
+				description: item.desc,
-				price: selectList.value[currentIndex.value].price,
+				price: item.price,
 				status: type === "draft" ? 0 : 1,
 				images: [],
-				designFor: selectList.value[currentIndex.value].gender.toLowerCase,
+				designFor: item.gender.toLowerCase,
-				productCategory: selectList.value[currentIndex.value].category
+				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.mainProductImage) {
-				if (item.selected) {
 				params.images.push({
-						category: "main_product",
+					category: 'main_product',
-						imageUrl: item.url,
+					imageUrl: item.mainProductImage,
-						isSelected: Number(item.selected)
+					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,9 +395,14 @@
 			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) {
+			message.error("请先完成封面制作")
+			return
+		}
 		if (status === "publish" && !validatePublishRequired()) return
 
 		await handleSaveForm(status)
@@ -516,14 +428,27 @@
 				}))
 			})
 		})
-		// 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 || []
+		const data = history.state
+		if (data?.type === "edit") {
 			itemId.value = history.state?.id || ""
+			handleGetDetailById()
+		} else {
+			const designItemIds = history.state?.designItemIds || []
+
 			if (!designItemIds.length) return
 
 			currentPage.value = 1
@@ -531,8 +456,9 @@
 				createListingItem(item.designOutfitUrl, item.designItemId)
 			)
 			const list = designItemIds.map((el) => el.designItemId)
-		console.log("list", list.length, list)
+			// console.log("list", list.length, list)
 			handleFetchItemDetial(list)
+		}
 	})
 </script>
 
@@ -602,362 +528,10 @@
 			height: 0;
 		}
 
-		.required {
-			&::after {
-				content: "*";
-				color: #df2b2c;
-				margin-left: 0.4rem;
-			}
-		}
-
-		.left {
-			// flex: 1;
-			// min-width: 0;
-
-			.main-image-container {
-				// max-width: 80.2rem;
-				column-gap: 3.5rem;
-				.main-image-item {
-					flex-shrink: 0;
-
-					.title {
-						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;
-						overflow: hidden;
-
-						&.cover {
-							width: 16.2rem;
-							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' rx='11' ry='11' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='8%2c 5' stroke-linecap='square'/%3e%3c/svg%3e");
-							border: none;
-						}
-
-						.crop-tool {
-							position: absolute;
-							top: 0.8rem;
-							right: 0.8rem;
-							width: 2rem;
-							height: 2rem;
-							border-radius: 50%;
-							background-color: #000000;
-							z-index: 1;
-							cursor: pointer;
-						}
-
-						.sketch-img {
-							height: 100%;
-							&.sketch {
-								height: initial;
-								width: 100%;
-							}
-						}
-
-						.trigger {
-							cursor: pointer;
-							height: 100%;
-							padding: 6rem 2rem 0;
-							&,
-							.cover-trigger {
-								row-gap: 1.2rem;
-							}
-
-							.placeholder {
-								width: 2.4rem;
-								height: 2.4rem;
-								border-radius: 0.6rem;
-								background: linear-gradient(135deg, #efefef 0%, #cdcdcd 100%);
-							}
-
-							.trigger-tips {
-								font-size: 1.2rem;
-								text-align: center;
-								color: #585858;
-								line-height: 1.3;
-							}
-						}
-					}
-				}
-			}
-
-			.product-image-list-container {
-				margin-top: 3rem;
-
-				.title {
-					font-size: 1.4rem;
-					margin-bottom: 1.2rem;
-
-					.main-title {
-						font-weight: 400;
-						font-style: bold;
-					}
-
-					.sub-title {
-						font-size: 1.2rem;
-						color: #999;
-					}
-
-					.title-right {
-						color: #585858;
-						font-size: 1.4rem;
-					}
-				}
-
-				.product-image-list {
-					overflow-x: auto;
-					overflow-y: hidden;
-					column-gap: 0.8rem;
-					max-width: 80.2rem;
-					padding-bottom: 1.2rem;
-
-					&::-webkit-scrollbar {
-						height: 0.8rem;
-					}
-
-					&::-webkit-scrollbar-track {
-						background: #d9d9d9;
-						border-radius: 0.8rem;
-					}
-
-					&::-webkit-scrollbar-thumb {
-						background: #000000;
-						border-radius: 0.8rem;
-					}
-
-					.product-image-item {
-						width: 11.6rem;
-						height: 20.6rem;
-						border-radius: 1rem;
-						border: 0.15rem solid #c7c7c7;
-						position: relative;
-						cursor: pointer;
-						overflow: hidden;
-						flex-shrink: 0;
-
-						&::after {
-							position: absolute;
-							top: 0;
-							left: 0;
-							width: 100%;
-							height: 100%;
-							content: "";
-							background-color: #fcfcfc;
-							opacity: 0.7;
-							border-radius: 1rem;
-						}
-
-						&.selected {
-							border-color: #000;
-
-							&::after {
-								display: none;
-							}
-						}
-
-						.checked {
-							width: 2rem;
-							height: 2rem;
-							position: absolute;
-							top: 0.8rem;
-							right: 0.8rem;
-							z-index: 1;
-						}
-
-						.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: rgba(0, 0, 0, 0.8);
-							color: #fff;
-							font-size: 1.4rem;
-							border-radius: 1.2rem;
-							text-align: center;
-						}
-					}
-				}
-			}
-
-			.apparel-container {
-				margin-top: 3rem;
-
-				.title {
-					font-size: 1.4rem;
-					margin-bottom: 0.8rem;
-
-					.main-title {
-						font-weight: 400;
-						font-style: bold;
-
-						&::after {
-							content: "*";
-							color: #df2b2c;
-						}
-					}
-
-					.sub-title {
-						font-size: 1.2rem;
-						color: #999;
-					}
-				}
-
-				.sketch-list-container {
-					column-gap: 1rem;
-					flex-wrap: wrap;
-
-					.sketch-element {
-						width: 10rem;
-						height: 14.6rem;
-						border: 0.15rem solid #c7c7c7;
-						border-radius: 1.2rem;
-						position: relative;
-						overflow: hidden;
-
-						.img-src {
-							// height: 100%;
-							width: 100%;
-						}
-
-						.crop-tool {
-							position: absolute;
-							top: 0.4rem;
-							right: 0.4rem;
-							width: 2rem;
-							height: 2rem;
-							border-radius: 50%;
-							background-color: #000000;
-						}
-					}
-				}
-			}
-		}
-
 		.right {
 			width: 55.2rem;
 			flex-shrink: 0;
 
-			.form-container {
-				row-gap: 3rem;
-
-				.form-item {
-					.form-item-label {
-						font-size: 1.4rem;
-						font-weight: 400;
-						font-style: bold;
-						margin-bottom: 0.6rem;
-						line-height: 1.5;
-
-						&.with-tip {
-							display: flex;
-							align-items: center;
-							column-gap: 0.8rem;
-						}
-
-						.help-text {
-							font-size: 1rem;
-							color: #999;
-						}
-					}
-
-					.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;
-						color: #000;
-
-						&.no-border {
-							border: none;
-							padding: 0;
-						}
-
-						&.price {
-							column-gap: 0.6rem;
-						}
-
-						:deep(.ant-input),
-						:deep(.ant-input-affix-wrapper),
-						:deep(.ant-input-textarea textarea) {
-							border: none;
-							padding: 0;
-							font-size: 1.2rem;
-							color: #000;
-							box-shadow: none;
-						}
-
-						:deep(.ant-input) {
-							line-height: 1.5;
-						}
-
-						:deep(.ant-input-show-count-suffix) {
-							color: #df2c2c;
-							font-size: 1rem;
-						}
-
-						:deep(textarea.ant-input) {
-							resize: none;
-							min-height: 5.4rem;
-							padding-bottom: 1.8rem;
-							line-height: 1.5;
-						}
-
-						:deep(.ant-input-textarea-show-count) {
-							position: relative;
-							&::after {
-								float: none;
-								position: absolute;
-								color: #df2c2c;
-								bottom: 0;
-								right: 1.6rem;
-							}
-						}
-					}
-				}
-			}
-
-			.license-note {
-				padding: 1.6rem;
-				column-gap: 1.6rem;
-				background: #f7f7f7;
-				border-radius: 0.8rem;
-
-				.info-icon {
-					width: 2.4rem;
-					height: 2.4rem;
-					flex-shrink: 0;
-				}
-
-				.note-copy {
-					font-size: 1.2rem;
-					line-height: 1.5;
-					color: #000;
-					font-weight: 400;
-					font-style: medium;
-
-					a {
-						color: #0080ed;
-						text-decoration: underline;
-						margin-left: 0.4rem;
-					}
-				}
-			}
 			.page-control {
 				justify-content: flex-end;
 				margin-top: 4rem;

src/views/SellerDashboard/MyListings/EditDetail/types.ts

@@ -0,0 +1,47 @@
+export type RadioOption = {
+	name: string | number
+	value: string | number | boolean
+	key: string
+	optype: boolean
+}
+
+export type TopImageType = "sketch" | "mainProductImage" | "cover"
+export type CropType = TopImageType | "apparel"
+
+export type ListingItem = {
+	designItemId: number | string | null
+	sketch: string | null
+	mainProductImage: string
+	cover: string
+	productImage: string[]
+	apparelSketch: string[]
+	productName: string
+	price: string
+	desc: string
+	gender: string
+	category: string[] | null
+	prodImageList: Array<{
+		url: string
+		selected?: boolean
+	}>
+	sketchList: Array<{ url: string | null }>
+}
+
+export type ListingDetailImage = {
+	category?: string | null
+	imageUrl?: string | null
+	isSelected?: boolean | number | string | null
+	sortOrder?: number | null
+}
+
+export 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
+}
+
+export type StatusType = "draft" | "publish"

src/views/SellerDashboard/MyListings/createSelect/historyList.vue

@@ -41,7 +41,10 @@ const getCreateList = ()=>{
 	})
 }
 const selectCollectionItem = (item:any)=>{
+	console.log(item)
+	if(item.userLikeGroupVO?.groupDetails?.length > 0){
 		emit('selectCollectionItem',item)
+	}
 }
 onMounted(()=>{
 	getCreateList()
@@ -55,9 +58,12 @@ defineExpose({getCreateList})
 		<div class="list">
 			<div v-for="(item,index) in list" :key="index" class="item" @click="selectCollectionItem(item)">
 				<div class="imgList">
-					<div v-for="(img,index) in item.userLikeGroupVO?.groupDetails" :key="index" class="img">
+					<div v-if="item.userLikeGroupVO?.groupDetails?.length > 0" v-for="(img,index) in item.userLikeGroupVO?.groupDetails" :key="index" class="img">
 						<img :src="img.url" alt="">
 					</div>
+					<div v-else class="img null">
+						<img src="@/assets/images/seller/selectCollectionNullStatus.png" alt="">
+					</div>
 				</div>
 				<div class="detail">
 					<div class="name">{{item.name}}</div>
@@ -123,6 +129,12 @@ defineExpose({getCreateList})
 						border-radius: 1rem;
 						overflow: hidden;
 						background-color: #fff;
+						&.null{
+							background-color: transparent;
+							> img{
+								object-fit: contain;
+							}
+						}
 						> img{
 							object-fit: cover;
 							height: 100%;

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

@@ -45,8 +45,8 @@ const next = ()=>{
 	router.push({	
 		path:'/home/seller/myListings/edit',
 		state: {
-			id:route.params.collectionId,
 			designItemIds,
+			type:'create'
 		}
 	})
 }
@@ -83,7 +83,7 @@ const setDomSize = (width: number)=>{
 	if(!listingsBoxRef.value)return
 	let listDom = listingsBoxRef.value.querySelector('.list')
 	let listItemDom = listDom.querySelector('.item')
-	let offsetWidth = listItemDom.getBoundingClientRect().width
+	let offsetWidth = listItemDom?.getBoundingClientRect?.()?.width 
 	let lineNum = Math.floor(width / offsetWidth)
 	let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
 	listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'

src/views/SellerDashboard/MyListings/main/content.vue

@@ -5,6 +5,8 @@ import contentItem from "./contentItem.vue"
 import selectMenu from '@/component/modules/selectMenu.vue'
 import deleteDrafts from './deleteDrafts.vue'
 import { Https } from '@/tool/https'
+import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
 
 //const props = defineProps({
 //})
@@ -63,11 +65,14 @@ const domSizeList = ref([
 
 const visible = ref(false)
 const deleteDraftsRef = ref(null)
+const router = useRouter()
 
 const deleteDraft = (item: any)=>{
-	deleteDraftsRef.value.open(()=>{
+	deleteDraftsRef.value.open(item,()=>{
+		putListingStatus(item,2).then(()=>{
 			list2.value = list2.value.filter((v: any)=>v.id != item.id)
 		})
+	})
 }
 
 const vObserve  = {
@@ -99,6 +104,7 @@ const getPublishedData = async ()=>{
 	}
 	await getPublishList(value).then((res)=>{
 		if(res.content.length == 0)publishData.isNoData = true
+		publishData.pageNum += 1
 		list.value.push(...res.content)
 	})
 	publishData.isShowMark = false
@@ -113,6 +119,7 @@ const getNoPublishedData = async ()=>{
 	}
 	await getPublishList(value).then((res)=>{
 		if(res.content.length == 0)noPublishData.isNoData = true
+		noPublishData.pageNum += 1
 		list2.value.push(...res.content)
 	})
 	noPublishData.isShowMark = false
@@ -127,28 +134,46 @@ const getPublishList = (data:any)=>{
 	})
 }
 
-const putListingStatus = ()=>{
+const putListingStatus = async (item,status:number)=>{
+	return new Promise<void>((resolve, reject) => {
 		let data = {
-		id:'',
+			id:item.id,
-		status:'',
+			status:status,
 		}
 		Https.axiosPut(Https.httpUrls.putListingStatus,data).then((res:any)=>{
+			resolve(res)
+		}).catch((err:any)=>{
+			reject(err)
+		})
 	})
 }
 
 
-const draftListing = (item: any)=>{
+const draftListing = async (item: any)=>{
 	//数组前面添加item
+	await putListingStatus(item,0).then(()=>{
 		list2.value.unshift(item)
 		list.value = list.value.filter((v: any)=>v.id != item.id)
+	})
+	message.success('Product moved to drafts and stats reset.')
 }
 
-const publishListing = (item: any)=>{
+const publishListing = async (item: any)=>{
+	await putListingStatus(item,1).then(()=>{
 		list.value.unshift(item)
 		list2.value = list2.value.filter((v: any)=>v.id != item.id)
+	})
+	message.success('Item is now live on the Marketplace.')
 }
 
 const editListing = (item: any)=>{
+	router.push({	
+		path:'/home/seller/myListings/edit',
+		state: {
+			id:item.id,
+			type:'edit'
+		}
+	})
 }
 
 
@@ -167,7 +192,7 @@ const setDomSize = (width: number)=>{
 	if(!listingsBoxRef.value)return
 	let listDom = listingsBoxRef.value.querySelector('.list')
 	let listItemDom = listDom.querySelector('.item')
-	let offsetWidth = listItemDom.getBoundingClientRect().width
+	let offsetWidth = listItemDom?.getBoundingClientRect?.()?.width
 	let lineNum = Math.floor(width / offsetWidth)
 	let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
 	listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'

src/views/SellerDashboard/MyListings/main/contentItem.vue

@@ -32,7 +32,7 @@ const {} = toRefs(data);
 <template>
 	<div class="item" :draging="true" :class="domSize">
 		<div class="imgBox">
-			<img src="" alt="">
+			<img :src="item.cover" alt="">
 			<div class="maskBtn">
 				<div @click="$emit('editListing',item)">
 					<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
@@ -50,21 +50,21 @@ const {} = toRefs(data);
 		</div>
 		<div class="detail">
 			<div class="left">
-				<div class="name">item name</div>
+				<div class="name">{{item.title}}</div>
-				<div class="price">$1123</div>
+				<div class="price">${{item.price}}</div>
 			</div>
 			<div class="right">
 				<div class="detailItem" v-if="type == 'listings'">
 					<div class="shopping1">
 						<i class="fi fi-rr-shopping-bag-add"></i>
 					</div>
-					<span>123</span>
+					<span>{{ item.salesVolume || 0 }}</span>
 				</div>
 				<div class="detailItem" v-if="type == 'listings'">
 					<div class="eye1">
 						<i class="fi fi-rs-eye"></i>
 					</div>
-					<span>123</span>
+					<span>{{ item.viewCount }}</span>
 				</div>
 				<div class="detailItem drafts" v-if="type == 'drafts'" @click="$emit('deleteDraft',item)">
 					<div class="">
@@ -128,6 +128,11 @@ const {} = toRefs(data);
 			position: relative;
 			height: var(--itemImgHeight);
 			width: 100%;
+			> img{
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
 			> .maskBtn{
 				position: absolute;
 				width: 100%;
@@ -182,6 +187,7 @@ const {} = toRefs(data);
 					gap: var(--detailRightItemGap);
 					flex-direction: column;
 					justify-content: space-between;
+					align-items: center;
 					> div{
 						color: var(--rightColor);
 						display: flex;

src/views/SellerDashboard/MyListings/main/deleteDrafts.vue

@@ -15,12 +15,13 @@ const router = useRouter()
 const {t} = useI18n()
 let data = reactive({
 })
-
+const item = ref<any>()
 const fun = ref(null)
 
 let deleteDraftsRef = ref(null)
 
-const open = (deleteFun)=>{
+const open = (data:any,deleteFun)=>{
+	item.value = data
 	fun.value = deleteFun
 	emit('update:visible', true)
 }
@@ -35,6 +36,7 @@ const deleteDrafts = ()=>{
 
 
 const cleardata = ()=>{
+	item.value = null
 	emit('update:visible', false)
 }
 
@@ -78,11 +80,11 @@ const { showAgain } = toRefs(data);
 			</div>
 			<div class="deleteContent">
 				<div class="img">
-					<img src="" alt="">
+					<img :src="item?.value?.cover" alt="">
 				</div>
 				<div class="detail">
-					<div class="name">Item Name</div>
+					<div class="name">{{ item?.value?.title }}</div>
-					<div class="price">HK$392.00 · Draft</div>
+					<div class="price">HK${{ item?.value?.price }} · Draft</div>
 				</div>
 			</div>
 			<div class="btnBox">