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

<template>
	<div class="edit-detail-wrapper flex-1">
		<seller-header
			class="edit-detail-header"
			title="Edit Listing Details"
			:breadcrumbs="[
				{ title: 'My Listings', name: 'myListingsIndex' },
				{ title: 'Select Collection', name: 'myListingsSelect' },
				{ title: 'Select Sketch', name: 'myListingsSelectItem' },
				{ title: 'Edit Listing Details', name: 'EditDetail' }
			]"
		>
			<template #right>
				<div class="operate-menu flex">
					<div class="menu-btn flex align-center save" @click="handleClickMenu('draft')">
						<span>{{ $t("SellerListEdit.saveDraft") }}</span>
						<SvgIcon name="CSave" size="16" />
					</div>
					<div
						class="menu-btn flex align-center publish"
						@click="handleClickMenu('publish')"
					>
						<span>{{ $t("SellerListEdit.publish") }}</span>
						<SvgIcon name="CPublish" size="16" />
					</div>
				</div>
			</template>
		</seller-header>
		<div class="edit-detail-content flex">
			<div class="left">
				<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' }">
							{{ 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="{ cover: type === 'cover' }"
								alt=""
							/>
							<div v-else class="trigger flex flex-col align-center">
								<template v-if="type === 'cover'">
									<SvgIcon
										class="trigger-icon"
										name="CCrop"
										color="#585858"
										size="24"
									/>
									<div class="trigger-tips">
										{{ $t("SellerListEdit.cropDesc") }}
									</div>
								</template>
								<template v-else>
									<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">
					<div class="form-item">
						<div class="form-item-label required">
							{{ $t("SellerListEdit.productName") }}
						</div>
						<div class="form-item-value product-name">
							<a-input
								v-model:value="currentListing.productName"
								show-count
								placeholder="Enter product name"
								:bordered="false"
								:maxlength="60"
							/>
						</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 :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">
					<a-pagination
						v-model:current="currentPage"
						:total="selectList.length"
						:page-size="1"
						showQuickJumper
						showLessItems
						responsive
						:showSizeChanger="false"
					/>
				</div>
			</div>
		</div>
	</div>
	<ImageClipDialog
		ref="imageClipDialogRef"
		fixedBox
		isProduct
		:info="false"
		:autoCropWidth="90"
		v-bind="$attrs"
		:type="cropType"
	/>
</template>

<script setup lang="ts">
import { computed, ref, watch, defineOptions } 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 { Https } from "@/tool/https"
import { useStore } from "vuex"

const ROUTER = useRouter()

const imageClipDialogRef = ref<InstanceType<typeof ImageClipDialog> | null>(null)

defineOptions({
	name: "EditDetail"
})

const STORE = useStore()

type CategoryOption = {
	label: string
	value: string
}

type ListingItem = {
	sketch: string
	mainProductImage: string
	cover: string
	productImage: string[]
	apparelSketch: string[]
	productName: string
	price: string
	desc: string
	gender: string
	category: string
	prodImageList: Array<{
		url: string
		selected: boolean
	}>
}

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,
		mainProductImage: "",
		cover: "",
		productImage: [],
		apparelSketch: [],
		productName: "",
		price: "12",
		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 }]
	}
])

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 previewImageMap = computed(() => ({
	sketch: currentListing.value.sketch,
	mainProductImage: currentListing.value.mainProductImage,
	cover:
		currentListing.value.cover ||
		currentListing.value.mainProductImage ||
		currentListing.value.sketch
}))

const firstSelectedIndex = ref(null) //显示main标签的图片索引
const selectedProdImgs = computed(() => {
	return prodImgList.value.filter((item) => item.selected).length
})

const handleSelectProdImg = (index: number) => {
	const target = prodImgList.value[index]

	const willSelect = !target.selected

	target.selected = willSelect

	if (willSelect && !currentListing.value.mainProductImage) {
		currentListing.value.mainProductImage = target.url
		firstSelectedIndex.value = index
	}

	if (!willSelect && currentListing.value.mainProductImage === target.url) {
		firstSelectedIndex.value = null
		currentListing.value.mainProductImage = ""
	}
}

const cropType = ref("")
const handleClickCrop = (data, type) => {
	console.log(data, type)
	const titleList = {
		sketch: "Crop Sketch",
		mainProductImage: "Crop Main Product Image",
		cover: "Crop Cover"
	}
	cropType.value = type
	imageClipDialogRef.value.open(
		data,
		(file) => {
			selectList.value[currentIndex.value].sketch = URL.createObjectURL(file)
		},
		{ ratio: [9, 16], isPreview: true, title: titleList[type], isProduct: true }
	)
}

const handleClickMenu = (status: "draft" | "publish") => {
	if (status === "draft") {
		// save draft logic
		console.log("Saving draft...", currentListing.value)
		ROUTER.push({ name: "Status", params: { status: "draft" } })
	} else if (status === "publish") {
		// publish logic
		console.log("Publishing...", currentListing.value)
		ROUTER.push({ name: "Status", params: { status: "publish" } })
	}
}
</script>

<style lang="less" scoped>
.c-svg {
	width: initial;
	height: initial;
}

.edit-detail-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	margin-top: -1rem;
	overflow: hidden;

	&::-webkit-scrollbar {
		display: none;
	}

	.menu-btn {
		height: 6rem;
		border: 0.15rem solid #000000;
		border-radius: 4rem;
		text-align: center;
		line-height: 6rem;
		padding: 0 2rem;
		font-size: 1.6rem;
		column-gap: 0.8rem;
		cursor: pointer;
		transition: all 0.25s ease;

		&:hover {
			background: #000;
			color: #fff;
		}

		// &.publish:hover {
		// 	background: #fff;
		// 	color: #000;
		// }
	}

	.edit-detail-header {
		margin-bottom: 2rem;
	}

	.operate-menu {
		column-gap: 2rem;

		// .publish {
		// background-color: #000000;
		// color: #ffffff;
		// }
	}
}

.edit-detail-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	justify-content: space-between;

	&::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.required {
		&::after {
			content: "*";
			color: #df2b2c;
			margin-left: 0.4rem;
		}
	}

	.left {
		// flex: 1;
		// min-width: 0;

		.main-image-container {
			// max-width: 80.2rem;

			.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%;
					}

					.trigger {
						row-gap: 1.2rem;
						cursor: pointer;
						height: 100%;
						padding: 6rem 2rem 0;

						.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%;
					}

					.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;
		}
	}
}
</style>