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

<template>
	<a-modal
		class="image-clip-dialog generalModel"
		v-model:visible="show"
		:footer="null"
		width="70%"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		wrapClassName="#app"
		:keyboard="false"
	>
		<div class="image-clip-dialog-box">
			<div class="header">
				<div class="title">{{ data.title }}</div>
				<div class="right">
					<div class="submit" v-if="!data.isPreview" @click="onSubmit">
						<svg-icon name="seller-dui" size="24" />
					</div>
					<button @click="onCancel">Cancel</button>
				</div>
			</div>
			<div class="content">
				<image-clip
					ref="imageClipRef"
					v-bind="$attrs"
					:ratio="data.ratio"
					:url="data.url"
					@change="(v) => (data.preview_url = v)"
				/>
				<div class="preview" v-if="data.isPreview">
					<div class="title">
						<span class="icon"><svg-icon name="seller-preview" size="24" /></span>
						<span class="label">Crop Preview</span>
					</div>
					<img :src="data.preview_url" />
					<div class="submit" @click="onSubmit">
						<svg-icon name="seller-dui" size="24" />
					</div>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<script setup>
	import { ref } from "vue"
	import ImageClip from "./image-clip.vue"
	const data = reactive({
		url: "",
		title: "Crop Image",
		preview_url: "",
		ratio: [1, 1],
		isPreview: true,
		callback: null
	})
	const show = ref(false)
	const open = (url, callback, options) => {
		if (!url || !callback) return
		data.url = url
		data.callback = callback
		data.ratio = [1, 1]
		data.isPreview = true
		data.preview_url = ""
		data.title = "Crop Image"
		if (options) {
			if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
			if (options.hasOwnProperty("ratio")) data.ratio = options.ratio
			if (options.hasOwnProperty("title")) data.title = options.title
		}
		show.value = true
	}
	const onCancel = () => {
		show.value = false
	}
	const imageClipRef = ref(null)
	const onSubmit = () => {
		imageClipRef.value.getCropBlob().then((blob) => {
			if (data.callback) data.callback(blobToFile(blob, "image.png"))
			onCancel()
		})
	}
	// 将blob转换为file对象
	const blobToFile = (blob, fileName) => {
		return new File([blob], fileName, { type: blob.type })
	}
	defineExpose({
		open
	})
</script>
<style scoped lang="less">
	.image-clip-dialog-box {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.submit {
			width: 4rem;
			height: 4rem;
			border-radius: 50%;
			background: #262626;
			color: #fff;
			cursor: pointer;
		}
		> .header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 5rem;
			> .title {
				font-family: pingfang_heavy;
				font-size: 2.4rem;
				color: #595959;
			}
			> .right {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 2rem;
				> button {
					width: 10rem;
					height: 4.8rem;
					border-radius: 4rem;
					border: none;
					background: #e4e5eb;
					font-family: pingfang_heavy;
					font-size: 1.6rem;
					color: #000;
				}
			}
		}
		> .content {
			flex: 1;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			> .image-clip {
				flex: 1;
			}
			> .preview {
				margin-left: 6rem;
				width: 28rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 2.4rem;
				> .title {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 1.2rem;
					> .label {
						font-family: pingfang_heavy;
						font-size: 1.6rem;
					}
				}
				> img {
					width: 100%;
					height: auto;
					margin-bottom: 3rem;
				}
			}
		}
	}
</style>