feat: 裁剪工具

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

@@ -38,7 +38,11 @@
 							{{ topImageTitleMap[type] }}
 						</div>
 						<div class="sketch-item flex flex-center" :class="type">
-							<div v-if="previewImageMap[type]" class="crop-tool flex flex-center">
+							<div
+								v-if="previewImageMap[type]"
+								class="crop-tool flex flex-center"
+								@click="handleClickCrop(previewImageMap[type])"
+							>
 								<SvgIcon name="CCrop" color="#fff" size="12" />
 							</div>
 							<img
@@ -119,7 +123,7 @@
 					</div>
 					<div class="sketch-list-container flex">
 						<div
-							v-for="(item, index) in sketchList"
+							v-for="(item, index) in selectList[currentIndex].sketchList"
 							:key="index"
 							class="sketch-element flex flex-center"
 						>
@@ -212,6 +216,13 @@
 			</div>
 		</div>
 	</div>
+	<ImageClipDialog
+		ref="imageClipDialogRef"
+		fixedBox
+		isProduct
+		:info="false"
+		:autoCropWidth="90"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -220,11 +231,14 @@ 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"
 })
@@ -290,7 +304,8 @@ const selectList = ref<ListingItem[]>([
 			{ url: testImg, selected: false },
 			{ url: testImg, selected: false },
 			{ url: testImg, selected: false }
-		]
+		],
+		sketchList: [{ url: testImg }]
 	},
 	{
 		sketch: testImg,
@@ -311,7 +326,8 @@ const selectList = ref<ListingItem[]>([
 			{ url: testImg, selected: false },
 			{ url: testImg, selected: false },
 			{ url: testImg, selected: false }
-		]
+		],
+		sketchList: [{ url: testImg }, { url: testImg }]
 	},
 	{
 		sketch: testImg,
@@ -332,13 +348,13 @@ const selectList = ref<ListingItem[]>([
 			{ 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 sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 const categoryOptions = computed(() => {
 	const gender = selectList.value[currentIndex.value].gender
 	return fallbackCategoryOptions[gender] || []
@@ -378,6 +394,17 @@ const handleSelectProdImg = (index: number) => {
 	}
 }
 
+const handleClickCrop = (data) => {
+	console.log(data)
+	imageClipDialogRef.value.open(
+		data,
+		(file) => {
+			selectList.value[currentIndex.value].sketch = URL.createObjectURL(file)
+		},
+		{ ratio: [9, 16], isPreview: true, title: "Crop Brand Banner" }
+	)
+}
+
 const handleClickMenu = (status: "draft" | "publish") => {
 	if (status === "draft") {
 		// save draft logic