卖家ui

src/views/SellerDashboard/BrandProfile/index.vue

@@ -7,7 +7,7 @@
 					<span class="icon"><svg-icon name="seller-picture" size="60" /></span>
 					<span class="tip">Your brand banner has not been set up yet.</span>
 				</div>
-				<button>Change Brand Banner</button>
+				<button @click="onChangeBanner">Change Brand Banner</button>
 			</div>
 			<!-- 头像 -->
 			<div class="avatar">
@@ -15,7 +15,7 @@
 				<div v-else class="null">
 					<svg-icon name="seller-user" size="48" />
 				</div>
-				<span class="icon">
+				<span class="icon" @click="onChangeAvatar">
 					<svg-icon name="seller-camera" size="24" />
 				</span>
 			</div>
@@ -37,15 +37,56 @@
 			<p class="tip">&nbsp;</p>
 		</template>
 	</div>
+	<image-clip-dialog ref="imageClipDialogRef" />
 </template>
 
 <script setup>
 	import { ref } from "vue"
 	import BrandInfo from "./brand-info.vue"
-	const banner = ref("http://118.31.39.42:3000/falls/5bd8065cbb396eb5a8ef0a142605139358734e57.png")
-	const avatar = ref("http://118.31.39.42:3000/falls/20251024140128_10355_1.jpg")
+	import ImageClipDialog from "./image-clip-dialog.vue"
+	const banner = ref("")
+	const avatar = ref("")
 	const isEdit = ref(false)
 	const brandInfoRef = ref(null)
+	const imageClipDialogRef = ref(null)
+
+	// 选择本机图片
+	const uploadImg = (onChange) => {
+		const input = document.createElement("input")
+		input.type = "file"
+		input.accept = "image/*"
+		// 监听文件输入框的变化事件
+		input.addEventListener("change", (event) => {
+			event.preventDefault()
+			const file = event.target.files[0]
+			const url = URL.createObjectURL(file)
+			onChange({ url, file })
+		})
+		input.click()
+	}
+
+	const onChangeBanner = () => {
+		uploadImg(({ url }) => {
+			imageClipDialogRef.value.open(
+				url,
+				(file) => {
+					banner.value = URL.createObjectURL(file)
+				},
+				{ ratio: [40, 7], isPreview: false, title: "Crop Brand Banner" }
+			)
+		})
+	}
+	const onChangeAvatar = () => {
+		uploadImg(({ url }) => {
+			imageClipDialogRef.value.open(
+				url,
+				(file) => {
+					avatar.value = URL.createObjectURL(file)
+				},
+				{ ratio: [1, 1], isPreview: true, title: "Crop Avatar" }
+			)
+		})
+	}
 	const onEdit = () => {
 		isEdit.value = true
 	}