feat: 接口

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) => {
-	if (!url || !callback) return
+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 {