Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

.prettierrc.js

@@ -1,33 +0,0 @@
-/** @type {import('prettier').Config} */
-module.exports = {
-  // 打印宽度
-  printWidth: 100,
-  // 使用 4 空格缩进
-  tabWidth: 4,
-  // 使用 4 空格缩进，不使用制表符
-  useTabs: true,
-  // 行尾使用 LF (Unix 风格)
-  endOfLine: 'lf',
-  // 语句末尾使用分号
-  semi: false,
-  // 使用单引号
-  singleQuote: false,
-  // 对象和数组末尾不添加尾随逗号
-  trailingComma: 'none',
-  // JSX 引号使用单引号
-  jsxSingleQuote: false,
-  // 括号内侧空格
-  bracketSpacing: true,
-  // JSX 标签不换行
-  bracketSameLine: false,
-  // 箭头函数参数始终使用括号
-  arrowParens: 'always',
-  // HTML、Vue、Angular 和 Markdown 使用 LF
-  htmlWhitespaceSensitivity: 'css',
-  // Vue 文件脚本和样式缩进
-  vueIndentScriptAndStyle: false,
-  // 行注释位置在注释上方，不加空格
-  proseWrap: 'preserve',
-  // 根据文件类型自动推断
-  embeddedLanguageFormatting: 'auto',
-};

.prettierrc.json

@@ -0,0 +1,17 @@
+{
+	"printWidth": 100,
+	"tabWidth": 4,
+	"useTabs": true,
+	"endOfLine": "lf",
+	"semi": false,
+	"singleQuote": false,
+	"trailingComma": "none",
+	"jsxSingleQuote": false,
+	"bracketSpacing": true,
+	"bracketSameLine": false,
+	"arrowParens": "always",
+	"htmlWhitespaceSensitivity": "css",
+	"vueIndentScriptAndStyle": true,
+	"proseWrap": "preserve",
+	"embeddedLanguageFormatting": "auto"
+}

src/lang/cn.ts

@@ -1756,6 +1756,8 @@ export default {
     categoryTips:'请选择所有适用选项',
     policy:'默认情况下，所有销售均遵循平台的许可政策——买家在下载后将获得使用许可',
     learnMore:'了解更多',
+    requiredFieldTips:'请填写{field}',
+    requiredFieldTipsWithPage:'第 {index} 个商品：请填写{field}',
     draftSaved: '草稿已保存',
 		draftDesc: '您的商品已保存为草稿。\n您可以继续编辑，或稍后在“我的商品”中发布。',
 		listingLive:'商品已上架',

src/lang/en.ts

@@ -1807,6 +1807,8 @@ export default {
 		categoryTips:'select all that apply',
 		policy:'By default, all sales follow the platform\'s licensing policy — buyers will receive a usage license upon download.',
 		learnMore:'Learn more',
+		requiredFieldTips:'Please fill in {field}',
+		requiredFieldTipsWithPage:'Listing {index}: Please fill in {field}',
 		draftSaved: 'Draft Saved',
 		draftDesc: 'Your listing has been saved as a draft. \nYou can continue editing or publish it later from My Listings.',
 		listingLive:'Listing Live',

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

@@ -14,7 +14,26 @@
 		<div class="image-clip-dialog-box">
 			<div class="header" :class="{ 'is-product': data.isProduct }">
 				<div class="title">{{ data.title }}</div>
-				<div class="right">
+				<div class="right flex">
+					<div v-if="coverOrigin.length > 1" class="origin-container flex align-center">
+						<span>Crop from: </span>
+						<div class="origin-select flex align-center">
+							<div
+								class="origin-item sketch"
+								:class="{ selected: currentOrigin === 'sketch' }"
+								@click="handleChangeOrigin('sketch')"
+							>
+								Sketch
+							</div>
+							<div
+								class="origin-item product"
+								:class="{ selected: currentOrigin === 'mainProducImage' }"
+								@click="handleChangeOrigin('mainProductImage')"
+							>
+								Main product image
+							</div>
+						</div>
+					</div>
 					<div class="submit" v-if="!data.isPreview" @click="onSubmit">
 						<svg-icon name="seller-dui" size="24" />
 					</div>
@@ -28,7 +47,7 @@
 						ref="imageClipRef"
 						v-bind="$attrs"
 						:ratio="data.ratio"
-						:fixedBox="data.isProduct ? type !== 'apparel' : false"
+						:isProduct="isProduct"
 						:url="data.url"
 						:type="type"
 						@change="(v) => (data.preview_url = v)"
@@ -60,13 +79,17 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue"
+import { ref, reactive, computed } from "vue"
 import ImageClip from "./image-clip.vue"
 
 const props = defineProps({
 	type: {
 		type: String,
 		default: () => false
+	},
+	isProduct: {
+		type: Boolean,
+		default: () => false
 	}
 })
 
@@ -94,9 +117,19 @@ const data = reactive({
 	callback: null,
 	isProduct: false // 是否商品编辑
 })
+
+const currentOrigin = ref("sketch")
+const coverOrigin = ref([])
+const handleChangeOrigin = (type) => {
+	currentOrigin.value = type
+	data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
+}
+
 const show = ref(false)
-const open = (url, callback, options) => {
+const open = (url, callback, options, origin) => {
+	if (!props.isProduct) {
 		if (!url || !callback) return
+	}
 	data.url = url
 	data.callback = callback
 	data.ratio = options.ratio || [1, 1]
@@ -107,6 +140,11 @@ const open = (url, callback, options) => {
 		if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
 		data.isProduct = options.isProduct
 	}
+	if (origin?.length) {
+		coverOrigin.value = origin
+		data.url = origin[0].url
+	}
+	console.log("-------", origin)
 	show.value = true
 }
 const onCancel = () => {
@@ -169,6 +207,34 @@ defineExpose({
 				font-size: 1.6rem;
 				color: #000;
 			}
+			.origin-container {
+				font-weight: 400;
+				color: #000;
+				font-size: 1.4rem;
+				.origin-select {
+					margin-left: 1.2rem;
+					height: 4.8rem;
+					border: 1px solid #c7c7c7;
+					border-radius: 3rem;
+					column-gap: 1.2rem;
+					padding: 0.8rem;
+					.origin-item {
+						height: 3.2rem;
+						line-height: 3.2rem;
+						border-radius: 2rem;
+						&.selected {
+							background-color: #000;
+							color: #fff;
+						}
+						&.sketch {
+							padding: 0 1.9rem;
+						}
+						&.product {
+							padding: 0 2.5rem;
+						}
+					}
+				}
+			}
 		}
 	}
 	> .content {
@@ -248,7 +314,7 @@ defineExpose({
 				}
 				&.is-cover {
 					> .preview-image > img {
-						// width: 29.7rem;
+						width: 29.7rem;
 						height: 37.5rem;
 					}
 				}

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

@@ -7,13 +7,11 @@
 				crossOrigin="Anonymous"
 				:autoCrop="true"
 				:fixedNumber="ratio"
-				:fixed="type !== 'apparel'"
+				:fixed="isProduct ? type !== 'apparel' : true"
 				movable
 				centerBox
-				:fixedBox="fixedBox"
 				@realTime="onChange"
 				outputType="png"
-				v-bind="bindProps"
 			></VueCropper>
 		</div>
 		<div class="clip_opterate">
@@ -70,17 +68,6 @@
 		return height
 	})
 
-	const bindProps = computed(() => {
-		// :autoCropWidth="isProduct ? undefined : type === 'cover' ? 297 : 242"
-		// 		:autoCropHeight="isProduct ? undefined : autoCropHeight"
-		if (props.isProduct) {
-			return {
-				autoCropHeight: autoCropHeight.value,
-				autoCropWidth: props.type === "cover" ? 297 : 242
-			}
-		}
-	})
-
 	const onChange = (data) => {
 		if (attrs.onChange) {
 			getCropUrl().then((url) => attrs.onChange(url))
@@ -104,7 +91,8 @@
 		label.textContent = text
 		label.style.top = top
 		label.style.left = className === "label-v" ? "50%" : "0"
-		label.style.transform = className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
+		label.style.transform =
+			className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
 		return label
 	}
 
@@ -310,13 +298,22 @@
 			&[data-crop-type="cover"] {
 				.image-clip-body {
 					:deep(.vue-cropper .cropper-view-box::after) {
-						background-image: linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+						background-image:
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
 							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
 							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
 							linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
 						background-repeat: repeat-x, repeat-x, repeat-x, repeat-y;
-						background-size: 8px 1px, 8px 1px, 8px 1px, 1px 8px;
-						background-position: 0 2.67%, 0 63.47%, 0 92.8%, 50% 0;
+						background-size:
+							8px 1px,
+							8px 1px,
+							8px 1px,
+							1px 8px;
+						background-position:
+							0 2.67%,
+							0 63.47%,
+							0 92.8%,
+							50% 0;
 					}
 				}
 			}
@@ -325,12 +322,19 @@
 			&[data-crop-type="sketch"] {
 				.image-clip-body {
 					:deep(.vue-cropper .cropper-view-box::after) {
-						background-image: linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+						background-image:
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
 							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
 							linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
 						background-repeat: repeat-x, repeat-x, repeat-y;
-						background-size: 8px 1px, 8px 1px, 1px 8px;
-						background-position: 0 2.67%, 0 97.6%, 50% 0;
+						background-size:
+							8px 1px,
+							8px 1px,
+							1px 8px;
+						background-position:
+							0 2.67%,
+							0 97.6%,
+							50% 0;
 					}
 				}
 			}

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

@@ -1,9 +1,20 @@
 import { Https } from "@/tool/https"
 
+// 编辑时根据ID获取信息
+export const fetchListingDetailById = (id) => {
+	return Https.axiosGet("/seller/listing/detail", { params: { id } })
+}
+
 interface SketchIDs {
 	designItemIds: Array
 }
-export const fetchSketchDetail = (data: SketchIDs) => {
+interface DetailReturns {
+	clothes: string[]
+	designItemId: number
+	toProductImageUrls: string[]
+}
+// 获取designItemId对应的产品图
+export const fetchSketchDetail = (data: SketchIDs): Array<DetailReturns> => {
 	let params = "?"
 	data.forEach((id, index) => {
 		if (index === data.length - 1) {
@@ -15,10 +26,40 @@ export const fetchSketchDetail = (data: SketchIDs) => {
 	return Https.axiosGet(`/api/seller/sketchDetail${params}`)
 }
 
+interface ImageObj {
+	id: number // 图片id,有值会更新,没有会自动新增
+	category: "cover" | "main_product" | "product" | "sketch" | "apparel" // 图片类型
+}
+interface DetailData {
+	id: number | string // 商品Id
+	title: string // 商品名
+	description: string // 商品描述
+	price: number // 价格
+	stock?: number // 库存
+	viewCount?: number // 浏览量
+	status: 0 | 1 | 2 // 0草稿 1发布 2删除
+	images: ImageObj[]
+	designFor: "male" | "female"
+	productCategory: "outwear" | "trousers" | "blouse" | "dress" | "skirt" | "accessories"
+}
+// 保存/更新表单
+export const fetchUpdateListing = (data: DetailData) => {
+	return Https.axiosPost("/seller/listing/batch", data)
+}
+
+interface StatusData {
+	id: number | string
+	status: 0 | 1 | 2 // 0草稿 1发布 2删除
+}
+// 设置商品状态
+export const fetchChangeStatus = (data: StatusData) => {
+	return Https.axiosPut("/seller/listing/status", data)
+}
+
 export const uploadFile = (file) => {
 	const formData = new FormData()
 	formData.append("file", file)
-	return Https.axiosPost("/seller/file/ upload", formData, {
+	return Https.axiosPost("/seller/file/upload", formData, {
 		headers: { "Content-Type": "multipart/form-data", Accept: "*/*" }
 	})
 }

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

@@ -20,45 +20,45 @@
 </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
 		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 selectedValues = computed(() => {
 		if (!multiple) {
-		return typeof props.modelValue === 'undefined' || props.modelValue === null
+			return typeof props.modelValue === "undefined" || props.modelValue === null
 				? []
 				: [props.modelValue]
 		}
 
 		return Array.isArray(props.modelValue) ? props.modelValue : []
-})
+	})
 
-const selectOption = (value: any) => {
+	const selectOption = (value: any) => {
 		if (multiple) {
 			const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
 			const index = current.indexOf(value)
 			if (index >= 0) {
 				current.splice(index, 1)
 			} else {
-			current.push(value)
+				current.push(value.toLocaleLowerCase)
 			}
 			emit("update:modelValue", current)
 			return
@@ -67,17 +67,17 @@ const selectOption = (value: any) => {
 		if (props.modelValue !== value) {
 			emit("update:modelValue", value)
 		}
-}
+	}
 </script>
 
 <style lang="less" scoped>
-.radio-button-group {
+	.radio-button-group {
 		display: flex;
 		gap: 8px;
 		flex-wrap: wrap;
-}
+	}
 
-.radio-button {
+	.radio-button {
 		border: 1px solid #d9d9d9;
 		height: 3.2rem;
 		min-width: 8rem;
@@ -89,16 +89,16 @@ const selectOption = (value: any) => {
 		background-color: #fff;
 		font-size: 1.2rem;
 		transition: all 0.2s ease;
-}
+	}
 
-.radio-button:hover {
+	.radio-button:hover {
 		border-color: #000;
-}
+	}
 
-.radio-button.is-active {
+	.radio-button.is-active {
 		color: #fff;
 		background-color: #000;
 		border-color: #000;
 		font-family: pingfang_medium;
-}
+	}
 </style>

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

@@ -35,7 +35,7 @@
 						:class="`main-image-item flex flex-col align-center ${type}`"
 					>
 						<div class="title" :class="{ required: type !== 'mainProductImage' }">
-							{{ topImageTitleMap[type] }}
+							{{ $t(topImageTitleMap[type]) }}
 						</div>
 						<div class="sketch-item flex flex-center" :class="type">
 							<div
@@ -49,11 +49,15 @@
 								v-if="previewImageMap[type]"
 								:src="previewImageMap[type]"
 								class="sketch-img"
-								:class="{ cover: type === 'cover' }"
+								:class="type"
 								alt=""
 							/>
 							<div v-else class="trigger flex flex-col align-center">
-								<template v-if="type === 'cover'">
+								<div
+									v-if="type === 'cover'"
+									class="cover-trigger flex flex-col align-center"
+									@click="handleClickCrop(null, 'cover')"
+								>
 									<SvgIcon
 										class="trigger-icon"
 										name="CCrop"
@@ -63,7 +67,7 @@
 									<div class="trigger-tips">
 										{{ $t("SellerListEdit.cropDesc") }}
 									</div>
-								</template>
+								</div>
 								<template v-else>
 									<div class="trigger-img placeholder"></div>
 									<div class="trigger-tips">
@@ -194,7 +198,11 @@
 							<span class="help-text">{{ $t("SellerListEdit.categoryTips") }}</span>
 						</div>
 						<div class="form-item-value no-border">
-							<Radio :options="categoryOptions" v-model="currentListing.category" />
+							<Radio
+								multiple
+								:options="categoryOptions"
+								v-model="currentListing.category"
+							/>
 						</div>
 					</div>
 					<div class="license-note flex align-center">
@@ -205,7 +213,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="page-control flex align-center">
+				<div class="page-control flex align-center" v-if="selectList.length > 1">
 					<a-pagination
 						v-model:current="currentPage"
 						:total="selectList.length"
@@ -230,32 +238,40 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, defineOptions,onMounted } from "vue"
-import { useRouter } from "vue-router"
-import SellerHeader from "../../seller-header.vue"
-import testImg from "@/assets/images/test.png"
-import Radio from "./components/Radio.vue"
-import ImageClipDialog from "../../BrandProfile/image-clip-dialog.vue"
-import { useStore } from "vuex"
-import { fetchSketchDetail, uploadFile } from "./api"
+	import { computed, ref, watch, 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 { useStore } from "vuex"
+	import {
+		fetchSketchDetail,
+		uploadFile,
+		fetchListingDetailById,
+		fetchUpdateListing
+	} from "./api"
 
-const ROUTER = useRouter()
+	const ROUTER = useRouter()
+	const { t } = useI18n()
 
-const imageClipDialogRef = ref<InstanceType<typeof ImageClipDialog> | null>(null)
+	const imageClipDialogRef = ref<InstanceType<typeof ImageClipDialog> | null>(null)
 
-defineOptions({
+	defineOptions({
 		name: "EditDetail"
-})
+	})
 
-const STORE = useStore()
+	const STORE = useStore()
 
-type CategoryOption = {
+	type CategoryOption = {
 		label: string
 		value: string
-}
+	}
 
-type ListingItem = {
-	sketch: string
+	type ListingItem = {
+		designItemId: number | string | null
+		sketch: string | null
 		mainProductImage: string
 		cover: string
 		productImage: string[]
@@ -264,123 +280,75 @@ type ListingItem = {
 		price: string
 		desc: string
 		gender: string
-	category: string
+		category: string[]
 		prodImageList: Array<{
 			url: string
-		selected: boolean
+			selected?: boolean
 		}>
-}
+		sketchList: Array<{ url: string | null }>
+	}
+	type StatusType = "draft" | "publish"
 
-const topImageList = ["sketch", "mainProductImage", "cover"] as const
-const topImageTitleMap: Record<(typeof topImageList)[number], string> = {
-	sketch: "Sketch",
-	mainProductImage: "Main Product Image",
-	cover: "Cover"
-}
-
-const genderOptions = STORE.state.UserHabit?.sex.value || []
-
-const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
-	MALE: STORE.state.UserHabit?.MalePosition || [],
-	FEMALE: STORE.state.UserHabit?.FemalePosition || []
-}
-
-const currentPage = ref(1)
-const currentIndex = computed(() => currentPage.value - 1)
-
-const selectList = ref<ListingItem[]>([
-	{
-		sketch: testImg,
+	const createListingItem = (
+		sketch: string | null = null,
+		designItemId: number | string | null = null
+	): ListingItem => ({
+		designItemId,
+		sketch,
 		mainProductImage: "",
 		cover: "",
 		productImage: [],
 		apparelSketch: [],
 		productName: "",
-		price: "12",
+		price: "",
 		desc: "",
 		gender: "FEMALE",
-		category: "",
-		prodImageList: [
-			{ 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 }
-		],
-		sketchList: [{ url: testImg }]
-	},
-	{
-		sketch: testImg,
-		mainProductImage: "",
-		cover: "",
-		productImage: [],
-		apparelSketch: [],
-		productName: "",
-		price: "12",
-		desc: "",
-		gender: "",
-		category: "",
-		prodImageList: [
-			{ 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 }
-		],
-		sketchList: [{ url: testImg }, { url: testImg }]
-	},
-	{
-		sketch: testImg,
-		mainProductImage: "",
-		cover: "",
-		productImage: [],
-		apparelSketch: [],
-		productName: "",
-		price: "12",
-		desc: "",
-		gender: "",
-		category: "",
-		prodImageList: [
-			{ 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 }
-		],
-		sketchList: [{ url: testImg }, { url: testImg }, { url: testImg }]
+		category: null,
+		prodImageList: [],
+		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 prodImgList = computed(() => currentListing.value.prodImageList || [])
+	const genderOptions = STORE.state.UserHabit?.sex.value || []
 
-const categoryOptions = computed(() => {
+	const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
+		MALE: STORE.state.UserHabit?.MalePosition || [],
+		FEMALE: STORE.state.UserHabit?.FemalePosition || []
+	}
+
+	const currentPage = ref(1)
+	const currentIndex = computed(() => currentPage.value - 1)
+
+	const itemId = ref("")
+	const selectList = ref<ListingItem[]>([createListingItem()])
+
+	const prodImgList = computed(() => currentListing.value.prodImageList || [])
+
+	const categoryOptions = computed(() => {
 		const gender = selectList.value[currentIndex.value].gender
 		return fallbackCategoryOptions[gender] || []
-})
+	})
 
-const currentListing = computed(() => selectList.value[currentIndex.value])
+	const currentListing = computed(() => selectList.value[currentIndex.value])
 
-const previewImageMap = computed(() => ({
+	const previewImageMap = computed(() => ({
 		sketch: currentListing.value.sketch,
 		mainProductImage: currentListing.value.mainProductImage,
-	cover:
-		currentListing.value.cover ||
-		currentListing.value.mainProductImage ||
-		currentListing.value.sketch
-}))
+		cover: currentListing.value.cover
+	}))
 
-const firstSelectedIndex = ref(null) //显示main标签的图片索引
-const selectedProdImgs = computed(() => {
+	const firstSelectedIndex = ref(null) //显示main标签的图片索引
+	const selectedProdImgs = computed(() => {
 		return prodImgList.value.filter((item) => item.selected).length
-})
+	})
 
-const handleSelectProdImg = (index: number) => {
+	const handleSelectProdImg = (index: number) => {
 		const target = prodImgList.value[index]
 
 		const willSelect = !target.selected
@@ -396,18 +364,28 @@ const handleSelectProdImg = (index: number) => {
 			firstSelectedIndex.value = null
 			currentListing.value.mainProductImage = ""
 		}
-}
+	}
 
-const cropType = ref("")
-const handleClickCrop = (data, type) => {
+	const cropType = ref("")
+	const handleClickCrop = (data, type, list = []) => {
 		// console.log(data, type)
+		// console.log(selectList.value[currentIndex.value])
+		let origin = []
+		const currentItem = selectList.value[currentIndex.value]
+		if (currentItem.sketch) {
+			origin.push({ type: "sketch", url: currentItem.sketch })
+		}
+		if (currentItem.mainProductImage) {
+			origin.push({ type: "mainProductImage", url: currentItem.mainProductImage })
+		}
+		if (type !== "cover") origin = []
 		const titleList = {
 			sketch: "Crop Sketch",
 			mainProductImage: "Crop Main Product Image",
 			cover: "Crop Cover",
 			apparel: "Crop Apparel Sketch"
 		}
-	const ratio = type === "apparel" ? [4, 5] : [9, 16]
+		const ratio = type === "cover" ? [4, 5] : [9, 16]
 		cropType.value = type
 		imageClipDialogRef.value.open(
 			data,
@@ -415,40 +393,156 @@ const handleClickCrop = (data, type) => {
 				// console.log(file)
 				uploadFile(file).then((res) => {
 					console.log(res)
-				selectList.value[currentIndex.value].sketch = res
+					selectList.value[currentIndex.value][type] = res
 				})
 			},
-		{ ratio, isPreview: true, title: titleList[type], isProduct: true }
+			{ ratio, isPreview: true, title: titleList[type], isProduct: true },
+			origin
 		)
-}
+	}
 
-const handleClickMenu = (status: "draft" | "publish") => {
+	const hasValue = (value: unknown) =>
+		value !== null && value !== undefined && String(value).trim() !== ""
+
+	const getMissingRequiredField = (item: ListingItem) => {
+		const cover = item.cover || item.mainProductImage || item.sketch
+		const requiredFields = [
+			{ value: item.sketch, label: t("SellerListEdit.sketch") },
+			{ value: cover, label: t("SellerListEdit.cover") },
+			{ value: item.productName, label: t("SellerListEdit.productName") },
+			{ value: item.price, label: t("SellerListEdit.price") },
+			{ value: item.desc, label: t("SellerListEdit.productDescription") },
+			{ value: item.gender, label: t("SellerListEdit.designFor") },
+			{ value: item.category, label: t("SellerListEdit.productCategory") }
+		]
+		const missingField = requiredFields.find((field) => !hasValue(field.value))
+		if (missingField) return missingField.label
+
+		const missingSketchIndex = item.sketchList.findIndex((sketch) => !hasValue(sketch.url))
+		if (item.sketchList.length === 0 || missingSketchIndex !== -1) {
+			return `${t("SellerListEdit.apparelSketchTitle").trim()} ${
+				missingSketchIndex === -1 ? 1 : missingSketchIndex + 1
+			}`
+		}
+
+		return ""
+	}
+
+	const validatePublishRequired = () => {
+		for (let index = 0; index < selectList.value.length; index += 1) {
+			const field = getMissingRequiredField(selectList.value[index])
+			if (!field) continue
+
+			currentPage.value = index + 1
+			message.warning(
+				t(
+					selectList.value.length > 1
+						? "SellerListEdit.requiredFieldTipsWithPage"
+						: "SellerListEdit.requiredFieldTips",
+					{ index: index + 1, field }
+				)
+			)
+			return false
+		}
+
+		return true
+	}
+
+	const handleSaveForm = async (type: StatusType) => {
+		const paramsList = []
+		selectList.value.forEach((item) => {
+			const params = {
+				id: null,
+				title: selectList.value[currentIndex.value].productName,
+				description: selectList.value[currentIndex.value].desc,
+				price: selectList.value[currentIndex.value].price,
+				status: type === "draft" ? 0 : 1,
+				images: [],
+				designFor: selectList.value[currentIndex.value].gender.toLowerCase,
+				productCategory: selectList.value[currentIndex.value].category
+			}
+			//
+			topImageList.forEach((el) => {
+				params.images.push({
+					category: el,
+					imageUrl: selectList.value[currentIndex.value][el],
+					isSelected: 1
+				})
+			})
+			selectList.value[currentIndex.value].prodImageList.forEach((item) => {
+				if (item.selected) {
+					params.images.push({
+						category: "main_product",
+						imageUrl: item.url,
+						isSelected: Number(item.selected)
+					})
+				}
+			})
+			selectList.value[currentIndex.value].sketchList.forEach((item) => {
+				params.images.push({
+					category: "apparel",
+					imageUrl: item.url,
+					isSelected: 1
+				})
+			})
+			paramsList.push(params)
+		})
+		console.log(paramsList)
+		fetchUpdateListing(paramsList)
+	}
+	const handleClickMenu = async (status: StatusType) => {
+		if (status === "publish" && !validatePublishRequired()) return
+
+		await handleSaveForm(status)
 		if (status === "draft") {
 			// save draft logic
-		console.log("Saving draft...", currentListing.value)
+			// console.log("Saving draft...", currentListing.value)
 			ROUTER.push({ name: "Status", params: { status: "draft" } })
 		} else if (status === "publish") {
 			// publish logic
-		console.log("Publishing...", currentListing.value)
+			// console.log("Publishing...", currentListing.value)
 			ROUTER.push({ name: "Status", params: { status: "publish" } })
 		}
-}
+	}
 
-onMounted(() => {
-	fetchSketchDetail([666163, 666164]).then(res => {
+	const handleFetchItemDetial = (list) => {
+		fetchSketchDetail(list).then((res) => {
 			console.log(res)
+			res.forEach((item, index) => {
+				if (!selectList.value[index]) return
+				selectList.value[index].sketchList = item.clothes.map((el) => ({ url: el }))
+				selectList.value[index].prodImageList = item.toProductImageUrls.map((el) => ({
+					url: el
+				}))
 			})
-})
+		})
+		// fetchListingDetailById(itemId.value).then(res => {
+		// 	console.log('iddetail',res)
+		// })
+	}
 
+	onMounted(() => {
+		const designItemIds = history.state?.designItemIds || []
+		itemId.value = history.state?.id || ""
+		if (!designItemIds.length) return
+
+		currentPage.value = 1
+		selectList.value = designItemIds.map((item) =>
+			createListingItem(item.designOutfitUrl, item.designItemId)
+		)
+		const list = designItemIds.map((el) => el.designItemId)
+		console.log("list", list.length, list)
+		handleFetchItemDetial(list)
+	})
 </script>
 
 <style lang="less" scoped>
-.c-svg {
+	.c-svg {
 		width: initial;
 		height: initial;
-}
+	}
 
-.edit-detail-wrapper {
+	.edit-detail-wrapper {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
@@ -495,9 +589,9 @@ onMounted(() => {
 			// color: #ffffff;
 			// }
 		}
-}
+	}
 
-.edit-detail-content {
+	.edit-detail-content {
 		flex: 1;
 		min-height: 0;
 		overflow-y: auto;
@@ -522,7 +616,7 @@ onMounted(() => {
 
 			.main-image-container {
 				// max-width: 80.2rem;
-
+				column-gap: 3.5rem;
 				.main-image-item {
 					flex-shrink: 0;
 
@@ -561,13 +655,20 @@ onMounted(() => {
 
 						.sketch-img {
 							height: 100%;
+							&.sketch {
+								height: initial;
+								width: 100%;
+							}
 						}
 
 						.trigger {
-						row-gap: 1.2rem;
 							cursor: pointer;
 							height: 100%;
 							padding: 6rem 2rem 0;
+							&,
+							.cover-trigger {
+								row-gap: 1.2rem;
+							}
 
 							.placeholder {
 								width: 2.4rem;
@@ -728,7 +829,8 @@ onMounted(() => {
 						overflow: hidden;
 
 						.img-src {
-						height: 100%;
+							// height: 100%;
+							width: 100%;
 						}
 
 						.crop-tool {
@@ -861,5 +963,5 @@ onMounted(() => {
 				margin-top: 4rem;
 			}
 		}
-}
+	}
 </style>

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

@@ -41,7 +41,7 @@ const chooseItem = (item:any)=>{
 
 const next = ()=>{
 	if(chooseList.value.length == 0)return
-	let designItemIds = chooseList.value.map((item:any)=>({designOutfitUrl:item.designOutfitUrl,designItemId:item.id}))
+	let designItemIds = chooseList.value.map((item:any)=>({designOutfitUrl:item.designOutfitUrl,designItemId:item.designItemId}))
 	router.push({	
 		path:'/home/seller/myListings/edit',
 		state: {