feat: 接口

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,21 @@
 		<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" class="origin-container flex align-center">
+						<span>Crop from: </span>
+						<div class="origin-select flex align-center">
+							<div class="origin-item sketch" @click="handleChangeOrigin('sketch')">
+								Sketch
+							</div>
+							<div
+								class="origin-item product selected"
+								@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>
@@ -60,13 +74,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 +112,16 @@ const data = reactive({
 	callback: null,
 	isProduct: false // 是否商品编辑
 })
+const coverOrigin = ref([])
+const handleChangeOrigin = (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 +132,8 @@ const open = (url, callback, options) => {
 		if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
 		data.isProduct = options.isProduct
 	}
+	if (origin) coverOrigin.value = origin
+	console.log("-------", origin)
 	show.value = true
 }
 const onCancel = () => {
@@ -169,6 +196,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 {

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/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">
@@ -205,7 +209,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,16 +234,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, defineOptions,onMounted } from "vue"
+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 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 { fetchSketchDetail, uploadFile, fetchListingDetailById, fetchChangeStatus } from "./api"
 
 const ROUTER = useRouter()
+const { t } = useI18n()
 
 const imageClipDialogRef = ref<InstanceType<typeof ImageClipDialog> | null>(null)
 
@@ -255,7 +261,7 @@ type CategoryOption = {
 }
 
 type ListingItem = {
-	sketch: string
+	sketch: string | null
 	mainProductImage: string
 	cover: string
 	productImage: string[]
@@ -267,15 +273,17 @@ type ListingItem = {
 	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",
+	sketch: "SellerListEdit.sketch",
-	mainProductImage: "Main Product Image",
+	mainProductImage: "SellerListEdit.mainProductImage",
-	cover: "Cover"
+	cover: "SellerListEdit.cover"
 }
 
 const genderOptions = STORE.state.UserHabit?.sex.value || []
@@ -288,72 +296,21 @@ const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
 const currentPage = ref(1)
 const currentIndex = computed(() => currentPage.value - 1)
 
+const itemId = ref("")
 const selectList = ref<ListingItem[]>([
 	{
-		sketch: testImg,
+		sketch: null,
 		mainProductImage: "",
 		cover: "",
 		productImage: [],
 		apparelSketch: [],
 		productName: "",
-		price: "12",
+		price: "",
 		desc: "",
 		gender: "FEMALE",
 		category: "",
-		prodImageList: [
+		prodImageList: [],
-			{ url: testImg, selected: false },
+		sketchList: [{ url: null }]
-			{ 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 }]
 	}
 ])
 
@@ -369,10 +326,7 @@ const currentListing = computed(() => selectList.value[currentIndex.value])
 const previewImageMap = computed(() => ({
 	sketch: currentListing.value.sketch,
 	mainProductImage: currentListing.value.mainProductImage,
-	cover:
+	cover: currentListing.value.cover
-		currentListing.value.cover ||
-		currentListing.value.mainProductImage ||
-		currentListing.value.sketch
 }))
 
 const firstSelectedIndex = ref(null) //显示main标签的图片索引
@@ -399,8 +353,18 @@ const handleSelectProdImg = (index: number) => {
 }
 
 const cropType = ref("")
-const handleClickCrop = (data, type) => {
+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",
@@ -418,11 +382,66 @@ const handleClickCrop = (data, type) => {
 				selectList.value[currentIndex.value].sketch = res
 			})
 		},
-		{ ratio, isPreview: true, title: titleList[type], isProduct: true }
+		{ ratio, isPreview: true, title: titleList[type], isProduct: true },
+		origin
 	)
 }
 
-const handleClickMenu = (status: "draft" | "publish") => {
+const handleSetStatus = (type: StatusType) => {
+	// fetchChangeStatus()
+}
+
+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 handleClickMenu = async (status: StatusType) => {
+	if (status === "publish" && !validatePublishRequired()) return
+
+	await handleSetStatus(status)
 	if (status === "draft") {
 		// save draft logic
 		console.log("Saving draft...", currentListing.value)
@@ -434,12 +453,30 @@ const handleClickMenu = (status: "draft" | "publish") => {
 	}
 }
 
-onMounted(() => {
+const handleFetchItemDetial = (list) => {
-	fetchSketchDetail([666163, 666164]).then(res => {
+	fetchSketchDetail(list).then((res) => {
 		console.log(res)
+		res.forEach((item, index) => {
+			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(() => {
+	itemId.value = history.state.id
+	history.state.designItemIds.forEach((item, index) => {
+		selectList.value[index].sketch = item.designOutfitUrl
+	})
+	const list = history.state.designItemIds.map((el) => el.designItemId)
+	console.log("list", list.length, list)
+	handleFetchItemDetial(list)
+})
 </script>
 
 <style lang="less" scoped>
@@ -522,7 +559,7 @@ onMounted(() => {
 
 		.main-image-container {
 			// max-width: 80.2rem;
-
+			column-gap: 3.5rem;
 			.main-image-item {
 				flex-shrink: 0;
 
@@ -561,13 +598,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 +772,8 @@ onMounted(() => {
 					overflow: hidden;
 
 					.img-src {
-						height: 100%;
+						// height: 100%;
+						width: 100%;
 					}
 
 					.crop-tool {

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: {