feat: 提交页面

src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue

@@ -15,14 +15,19 @@
 			<div class="header" :class="{ 'is-product': data.isProduct }">
 				<div class="title">{{ data.title }}</div>
 				<div class="right flex">
-					<div v-if="coverOrigin.length" class="origin-container flex align-center">
+					<div v-if="coverOrigin.length > 1" 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')">
+							<div
+								class="origin-item sketch"
+								:class="{ selected: currentOrigin === 'sketch' }"
+								@click="handleChangeOrigin('sketch')"
+							>
 								Sketch
 							</div>
 							<div
-								class="origin-item product selected"
+								class="origin-item product"
+								:class="{ selected: currentOrigin === 'mainProducImage' }"
 								@click="handleChangeOrigin('mainProductImage')"
 							>
 								Main product image
@@ -42,7 +47,7 @@
 						ref="imageClipRef"
 						v-bind="$attrs"
 						:ratio="data.ratio"
-						:fixedBox="data.isProduct ? type !== 'apparel' : false"
+						:isProduct="isProduct"
 						:url="data.url"
 						:type="type"
 						@change="(v) => (data.preview_url = v)"
@@ -112,8 +117,11 @@ const data = reactive({
 	callback: null,
 	isProduct: false // 是否商品编辑
 })
+
+const currentOrigin = ref("sketch")
 const coverOrigin = ref([])
 const handleChangeOrigin = (type) => {
+	currentOrigin.value = type
 	data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
 }
 
@@ -132,7 +140,10 @@ const open = (url, callback, options, origin) => {
 		if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
 		data.isProduct = options.isProduct
 	}
-	if (origin) coverOrigin.value = origin
+	if (origin?.length) {
+		coverOrigin.value = origin
+		data.url = origin[0].url
+	}
 	console.log("-------", origin)
 	show.value = true
 }
@@ -303,7 +314,7 @@ defineExpose({
 				}
 				&.is-cover {
 					> .preview-image > img {
-						// width: 29.7rem;
+						width: 29.7rem;
 						height: 37.5rem;
 					}
 				}

src/views/SellerDashboard/BrandProfile/image-clip.vue

@@ -7,10 +7,9 @@
 				crossOrigin="Anonymous"
 				:autoCrop="true"
 				:fixedNumber="ratio"
-				:fixed="type !== 'apparel' && isProduct"
+				:fixed="isProduct ? type !== 'apparel' : true"
 				movable
 				centerBox
-				:fixedBox="fixedBox"
 				@realTime="onChange"
 				outputType="png"
 				v-bind="bindProps"
@@ -52,10 +51,6 @@ const props = defineProps({
 		type: Boolean,
 		default: false
 	},
-	fixedBox: {
-		type: Boolean,
-		default: true
-	},
 	type: {
 		type: String,
 		default: () => ""
@@ -73,12 +68,12 @@ const autoCropHeight = computed(() => {
 const bindProps = computed(() => {
 	// :autoCropWidth="isProduct ? undefined : type === 'cover' ? 297 : 242"
 	// 		:autoCropHeight="isProduct ? undefined : autoCropHeight"
-	if (props.isProduct) {
-		return {
-			autoCropHeight: autoCropHeight.value,
-			autoCropWidth: props.type === "cover" ? 297 : 242
-		}
-	}
+	// if (props.isProduct) {
+	// 	return {
+	// 		autoCropHeight: autoCropHeight.value,
+	// 		autoCropWidth: props.type === "cover" ? 297 : 242
+	// 	}
+	// }
 })
 
 const onChange = (data) => {