feat: 图片裁剪组件

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

@@ -41,7 +41,7 @@
 							<div
 								v-if="previewImageMap[type]"
 								class="crop-tool flex flex-center"
-								@click="handleClickCrop(previewImageMap[type])"
+								@click="handleClickCrop(previewImageMap[type], type)"
 							>
 								<SvgIcon name="CCrop" color="#fff" size="12" />
 							</div>
@@ -128,7 +128,10 @@
 							class="sketch-element flex flex-center"
 						>
 							<img class="img-src" :src="item.url" alt="" />
-							<div class="crop-tool flex flex-center">
+							<div
+								class="crop-tool flex flex-center"
+								@click="handleClickCrop(item.url, 'apparel')"
+							>
 								<SvgIcon name="CCrop" color="#fff" size="12" />
 							</div>
 						</div>
@@ -222,6 +225,8 @@
 		isProduct
 		:info="false"
 		:autoCropWidth="90"
+		v-bind="$attrs"
+		:type="cropType"
 	/>
 </template>
 
@@ -394,14 +399,21 @@ const handleSelectProdImg = (index: number) => {
 	}
 }
 
-const handleClickCrop = (data) => {
-	console.log(data)
+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: "Crop Brand Banner" }
+		{ ratio: [9, 16], isPreview: true, title: titleList[type], isProduct: true }
 	)
 }