上传头像

src/store/seller/index.ts

@@ -49,8 +49,11 @@ const seller: Module<Seller, RootState> = {
 		},
 		set_designerInfo(state: Seller, value: DesignerInfo) {
 			state.designerInfo = {
+				...state.designerInfo,
 				...value,
-				socialLinks: JSON.parse(value.socialLinks)
+			}
+			if (value.socialLinks) {
+				state.designerInfo.socialLinks = JSON.parse(value.socialLinks)
 			}
 		},
 	},

src/tool/https.js

@@ -474,6 +474,7 @@ export const Https = {
 
 
 		// 卖家端接口
+		sellerUploadFile: '/seller/file/upload', // 卖家上传文件
 		checkSellerDesigner: '/seller/designer/check', // 检查卖家是否为设计师
 		getSellerApplyStatus: '/seller/designer/apply/status', // 获取卖家申请状态
 		submitSellerApply: '/seller/designer/apply', // 提交卖家申请

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

@@ -7,7 +7,7 @@
 				crossOrigin="Anonymous"
 				:autoCrop="true"
 				:fixedNumber="ratio"
-				:fixed="type !== 'apparel' && isProduct"
+				:fixed="type !== 'apparel'"
 				movable
 				centerBox
 				:fixedBox="fixedBox"
@@ -36,361 +36,345 @@
 	</div>
 </template>
 <script setup>
-import { ref, useAttrs, onMounted, onBeforeUnmount, computed, nextTick, watch } from "vue"
+	import { ref, useAttrs, onMounted, onBeforeUnmount, computed, nextTick, watch } from "vue"
-import "vue-cropper/dist/index.css"
+	import "vue-cropper/dist/index.css"
-import { VueCropper } from "vue-cropper"
+	import { VueCropper } from "vue-cropper"
-const props = defineProps({
+	const props = defineProps({
-	url: {
+		url: {
-		type: String,
+			type: String,
-		default: ""
+			default: ""
-	},
+		},
-	ratio: {
+		ratio: {
-		type: Array,
+			type: Array,
-		default: () => [1, 1]
+			default: () => [1, 1]
-	},
+		},
-	isProduct: {
+		isProduct: {
-		type: Boolean,
+			type: Boolean,
-		default: false
+			default: false
-	},
+		},
-	fixedBox: {
+		fixedBox: {
-		type: Boolean,
+			type: Boolean,
-		default: true
+			default: true
-	},
+		},
-	type: {
+		type: {
-		type: String,
+			type: String,
-		default: () => ""
+			default: () => ""
-	}
-})
-const attrs = useAttrs()
-
-const autoCropHeight = computed(() => {
-	let height = 426
-	if (props.type === "cover") height = 375
-	else if (props.type === "apparel") height = 320
-	return height
-})
-
-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
-		}
-	}
-})
-
-const onChange = (data) => {
-	if (attrs.onChange) {
-		getCropUrl().then((url) => attrs.onChange(url))
-	}
-}
-const cropper = ref(null)
-const imageClipBody = ref(null)
-let injectLabelFrame = 0
-const observer = new ResizeObserver((entries) => {
-	refreshCrop()
-})
-
-const clearCropLabels = (cropperBox) => {
-	if (!cropperBox) return
-	cropperBox.querySelectorAll(".cropper-line-label").forEach((node) => node.remove())
-}
-
-const createCropLabel = ({ text, top, className }) => {
-	const label = document.createElement("div")
-	label.className = `cropper-line-label ${className}`
-	label.textContent = text
-	label.style.top = top
-	label.style.left = className === "label-v" ? "50%" : "0"
-	label.style.transform = className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
-	return label
-}
-
-const cropLabelMap = {
-	cover: [
-		{ text: "crown", top: "2.67%", className: "label-h" },
-		{ text: "hip line", top: "63.47%", className: "label-h" },
-		{ text: "mid-thigh", top: "92.8%", className: "label-h" },
-		{ text: "center", top: "0", className: "label-v" }
-	],
-	mainProductImage: [
-		{ text: "crown", top: "2.67%", className: "label-h" },
-		{ text: "footbase", top: "97.6%", className: "label-h" },
-		{ text: "center", top: "0", className: "label-v" }
-	],
-	sketch: [
-		{ text: "crown", top: "2.67%", className: "label-h" },
-		{ text: "footbase", top: "97.6%", className: "label-h" },
-		{ text: "center", top: "0", className: "label-v" }
-	],
-	apparel: [{ text: "center", top: "0", className: "label-v" }]
-}
-
-const injectCropLabel = () => {
-	const cropperBox = imageClipBody.value?.querySelector(".cropper-view-box")
-
-	if (!cropperBox) return false
-
-	clearCropLabels(cropperBox)
-	;(cropLabelMap[props.type] || []).forEach((config) => {
-		cropperBox.appendChild(createCropLabel(config))
-	})
-
-	return true
-}
-
-const scheduleInjectCropLabel = (retry = 0) => {
-	cancelAnimationFrame(injectLabelFrame)
-	injectLabelFrame = requestAnimationFrame(() => {
-		if (!injectCropLabel() && retry < 10) {
-			scheduleInjectCropLabel(retry + 1)
 		}
 	})
-}
+	const attrs = useAttrs()
 
-onMounted(() => {
+	const autoCropHeight = computed(() => {
-	observer.observe(imageClipBody.value)
+		let height = 426
-	scheduleInjectCropLabel()
+		if (props.type === "cover") height = 375
-})
+		else if (props.type === "apparel") height = 320
-onBeforeUnmount(() => {
+		return height
-	observer.disconnect()
-	cancelAnimationFrame(injectLabelFrame)
-})
-const rotateLeft = () => {
-	cropper.value.rotateLeft()
-}
-const rotateRight = () => {
-	cropper.value.rotateRight()
-}
-const refreshCrop = () => {
-	cropper.value.refresh()
-}
-const changeScale = (num = 1) => {
-	cropper.value.changeScale(num)
-}
-const getCropUrl = () => {
-	return new Promise((resolve, reject) => {
-		cropper.value.getCropData(resolve)
 	})
-}
-const getCropBlob = () => {
-	return new Promise((resolve, reject) => {
-		cropper.value.getCropBlob(resolve)
-	})
-}
 
-watch(
+	const bindProps = computed(() => {
-	[() => props.type, () => props.url],
+		// :autoCropWidth="isProduct ? undefined : type === 'cover' ? 297 : 242"
-	async () => {
+		// 		:autoCropHeight="isProduct ? undefined : autoCropHeight"
-		await nextTick()
+		if (props.isProduct) {
+			return {
+				autoCropHeight: autoCropHeight.value,
+				autoCropWidth: props.type === "cover" ? 297 : 242
+			}
+		}
+	})
+
+	const onChange = (data) => {
+		if (attrs.onChange) {
+			getCropUrl().then((url) => attrs.onChange(url))
+		}
+	}
+	const cropper = ref(null)
+	const imageClipBody = ref(null)
+	let injectLabelFrame = 0
+	const observer = new ResizeObserver((entries) => {
+		refreshCrop()
+	})
+
+	const clearCropLabels = (cropperBox) => {
+		if (!cropperBox) return
+		cropperBox.querySelectorAll(".cropper-line-label").forEach((node) => node.remove())
+	}
+
+	const createCropLabel = ({ text, top, className }) => {
+		const label = document.createElement("div")
+		label.className = `cropper-line-label ${className}`
+		label.textContent = text
+		label.style.top = top
+		label.style.left = className === "label-v" ? "50%" : "0"
+		label.style.transform = className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
+		return label
+	}
+
+	const cropLabelMap = {
+		cover: [
+			{ text: "crown", top: "2.67%", className: "label-h" },
+			{ text: "hip line", top: "63.47%", className: "label-h" },
+			{ text: "mid-thigh", top: "92.8%", className: "label-h" },
+			{ text: "center", top: "0", className: "label-v" }
+		],
+		mainProductImage: [
+			{ text: "crown", top: "2.67%", className: "label-h" },
+			{ text: "footbase", top: "97.6%", className: "label-h" },
+			{ text: "center", top: "0", className: "label-v" }
+		],
+		sketch: [
+			{ text: "crown", top: "2.67%", className: "label-h" },
+			{ text: "footbase", top: "97.6%", className: "label-h" },
+			{ text: "center", top: "0", className: "label-v" }
+		],
+		apparel: [{ text: "center", top: "0", className: "label-v" }]
+	}
+
+	const injectCropLabel = () => {
+		const cropperBox = imageClipBody.value?.querySelector(".cropper-view-box")
+
+		if (!cropperBox) return false
+
+		clearCropLabels(cropperBox)
+		;(cropLabelMap[props.type] || []).forEach((config) => {
+			cropperBox.appendChild(createCropLabel(config))
+		})
+
+		return true
+	}
+
+	const scheduleInjectCropLabel = (retry = 0) => {
+		cancelAnimationFrame(injectLabelFrame)
+		injectLabelFrame = requestAnimationFrame(() => {
+			if (!injectCropLabel() && retry < 10) {
+				scheduleInjectCropLabel(retry + 1)
+			}
+		})
+	}
+
+	onMounted(() => {
+		observer.observe(imageClipBody.value)
 		scheduleInjectCropLabel()
-	},
+	})
-	{ flush: "post" }
+	onBeforeUnmount(() => {
-)
+		observer.disconnect()
+		cancelAnimationFrame(injectLabelFrame)
+	})
+	const rotateLeft = () => {
+		cropper.value.rotateLeft()
+	}
+	const rotateRight = () => {
+		cropper.value.rotateRight()
+	}
+	const refreshCrop = () => {
+		cropper.value.refresh()
+	}
+	const changeScale = (num = 1) => {
+		cropper.value.changeScale(num)
+	}
+	const getCropUrl = () => {
+		return new Promise((resolve, reject) => {
+			cropper.value.getCropData(resolve)
+		})
+	}
+	const getCropBlob = () => {
+		return new Promise((resolve, reject) => {
+			cropper.value.getCropBlob(resolve)
+		})
+	}
 
-defineExpose({
+	watch(
-	getCropUrl,
+		[() => props.type, () => props.url],
-	getCropBlob
+		async () => {
-})
+			await nextTick()
+			scheduleInjectCropLabel()
+		},
+		{ flush: "post" }
+	)
+
+	defineExpose({
+		getCropUrl,
+		getCropBlob
+	})
 </script>
 <style lang="less" scoped>
-.image-clip {
+	.image-clip {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	// height: 100%;
-	background: #fff;
-	border-radius: calc(2rem * 1.2);
-	padding: calc(1.3rem * 1.2) calc(1.3rem * 1.2) calc(2rem * 1.2);
-	box-sizing: border-box;
-
-	.image-clip-body {
 		width: 100%;
-		height: calc(40rem * 1.2);
+		height: 100%;
-		// height: 53rem;
-		background: yellow;
-		:deep(.cropper-box) {
-			.cropper-box-canvas {
-				background-color: #ffffff;
-
-				img {
-					height: 100%;
-				}
-			}
-		}
-		&.is-cover {
-			:deep(.vue-cropper) {
-				overflow: hidden;
-			}
-			:deep(.cropper-box-canvas) {
-				width: 31.1rem !important;
-				left: 50% !important;
-				transform: translateX(-50%) !important;
-				img {
-					display: none;
-				}
-			}
-		}
-	}
-
-	.clip_opterate {
-		margin: calc(2.7rem * 1.2) auto 0;
-		border-radius: calc(1.6rem * 1.2);
 		display: flex;
-		overflow: hidden;
+		flex-direction: column;
-		border: 1px solid #e2e2e4;
+		// height: 100%;
-		width: calc(24rem * 1.2);
+		background: #fff;
+		border-radius: calc(2rem * 1.2);
+		padding: calc(1.3rem * 1.2) calc(1.3rem * 1.2) calc(2rem * 1.2);
+		box-sizing: border-box;
 
-		.item {
-			width: calc(4.7rem * 1.2);
-			height: calc(4rem * 1.2);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-right: 0.1rem solid #e6e8ea;
-			cursor: pointer;
-
-			.icon_chexiao_sec {
-				transform: rotateY(180deg); /* 垂直镜像翻转 */
-			}
-
-			.operate_icon {
-				font-size: calc(1.8rem * 1.2);
-				color: rgba(102, 102, 102, 1);
-				font-weight: bold;
-			}
-
-			.icon_font {
-				font-size: calc(2.5rem * 1.2);
-				position: relative;
-				top: calc(-0.3rem * 1.2);
-				user-select: none;
-			}
-
-			.icon-shuaxin {
-				font-size: calc(1.4rem * 1.2);
-			}
-
-			&:last-child {
-				border: none;
-			}
-		}
-	}
-
-	&.is-product {
 		.image-clip-body {
-			width: 45.7rem;
+			width: 100%;
-			height: 45.7rem;
+			height: calc(40rem * 1.2);
-			:deep(.cropper-modal) {
+			// height: 53rem;
-				background: transparent;
+			background: yellow;
-			}
+			:deep(.cropper-box) {
-			:deep(.vue-cropper .cropper-view-box) {
+				.cropper-box-canvas {
-				position: relative;
+					background-color: #ffffff;
-				overflow: visible !important;
-				/* 原有的蓝色边框（outline）由组件控制，这里不干涉 */
-			}
 
-			:deep(.vue-cropper .cropper-view-box::after) {
+					img {
-				content: "";
+						height: 100%;
-				position: absolute;
+					}
-				top: 0;
+				}
-				left: 0;
-				width: 100%;
-				height: 100%;
-				pointer-events: none;
-				z-index: 9; /* 位于图片之上，但在控制点之下 */
-				background-image: none;
-				background-repeat: no-repeat;
 			}
-		}
+			&.is-cover {
-
+				:deep(.vue-cropper) {
-		&[data-crop-type="cover"] {
+					overflow: hidden;
-			.image-clip-body {
+				}
-				:deep(.vue-cropper .cropper-view-box::after) {
+				:deep(.cropper-box-canvas) {
-					background-image:
+					width: 31.1rem !important;
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+					left: 50% !important;
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+					transform: translateX(-50%) !important;
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+					img {
-						linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+						display: none;
-					background-repeat: repeat-x, repeat-x, repeat-x, repeat-y;
+					}
-					background-size:
-						8px 1px,
-						8px 1px,
-						8px 1px,
-						1px 8px;
-					background-position:
-						0 2.67%,
-						0 63.47%,
-						0 92.8%,
-						50% 0;
 				}
 			}
 		}
 
-		&[data-crop-type="mainProductImage"],
+		.clip_opterate {
-		&[data-crop-type="sketch"] {
+			margin: calc(2.7rem * 1.2) auto 0;
-			.image-clip-body {
+			border-radius: calc(1.6rem * 1.2);
-				:deep(.vue-cropper .cropper-view-box::after) {
+			display: flex;
-					background-image:
+			overflow: hidden;
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+			border: 1px solid #e2e2e4;
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+			width: calc(24rem * 1.2);
-						linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+
-					background-repeat: repeat-x, repeat-x, repeat-y;
+			.item {
-					background-size:
+				width: calc(4.7rem * 1.2);
-						8px 1px,
+				height: calc(4rem * 1.2);
-						8px 1px,
+				display: flex;
-						1px 8px;
+				align-items: center;
-					background-position:
+				justify-content: center;
-						0 2.67%,
+				border-right: 0.1rem solid #e6e8ea;
-						0 97.6%,
+				cursor: pointer;
-						50% 0;
+
+				.icon_chexiao_sec {
+					transform: rotateY(180deg); /* 垂直镜像翻转 */
+				}
+
+				.operate_icon {
+					font-size: calc(1.8rem * 1.2);
+					color: rgba(102, 102, 102, 1);
+					font-weight: bold;
+				}
+
+				.icon_font {
+					font-size: calc(2.5rem * 1.2);
+					position: relative;
+					top: calc(-0.3rem * 1.2);
+					user-select: none;
+				}
+
+				.icon-shuaxin {
+					font-size: calc(1.4rem * 1.2);
+				}
+
+				&:last-child {
+					border: none;
 				}
 			}
 		}
 
-		&[data-crop-type="apparel"] {
+		&.is-product {
 			.image-clip-body {
+				width: 45.7rem;
+				height: 45.7rem;
+				:deep(.cropper-modal) {
+					background: transparent;
+				}
+				:deep(.vue-cropper .cropper-view-box) {
+					position: relative;
+					overflow: visible !important;
+					/* 原有的蓝色边框（outline）由组件控制，这里不干涉 */
+				}
+
 				:deep(.vue-cropper .cropper-view-box::after) {
-					background-image: linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+					content: "";
-					background-repeat: repeat-y;
+					position: absolute;
-					background-size: 1px 8px;
+					top: 0;
-					background-position: 50% 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					pointer-events: none;
+					z-index: 9; /* 位于图片之上，但在控制点之下 */
+					background-image: none;
+					background-repeat: no-repeat;
+				}
+			}
+
+			&[data-crop-type="cover"] {
+				.image-clip-body {
+					:deep(.vue-cropper .cropper-view-box::after) {
+						background-image: linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+						background-repeat: repeat-x, repeat-x, repeat-x, repeat-y;
+						background-size: 8px 1px, 8px 1px, 8px 1px, 1px 8px;
+						background-position: 0 2.67%, 0 63.47%, 0 92.8%, 50% 0;
+					}
+				}
+			}
+
+			&[data-crop-type="mainProductImage"],
+			&[data-crop-type="sketch"] {
+				.image-clip-body {
+					:deep(.vue-cropper .cropper-view-box::after) {
+						background-image: linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+						background-repeat: repeat-x, repeat-x, repeat-y;
+						background-size: 8px 1px, 8px 1px, 1px 8px;
+						background-position: 0 2.67%, 0 97.6%, 50% 0;
+					}
+				}
+			}
+
+			&[data-crop-type="apparel"] {
+				.image-clip-body {
+					:deep(.vue-cropper .cropper-view-box::after) {
+						background-image: linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+						background-repeat: repeat-y;
+						background-size: 1px 8px;
+						background-position: 50% 0;
+					}
 				}
 			}
 		}
 	}
-}
 </style>
 
 <style lang="less">
-.cropper-line-label {
+	.cropper-line-label {
-	position: absolute;
+		position: absolute;
-	color: #4ba5ff; /* 统一颜色 */
+		color: #4ba5ff; /* 统一颜色 */
-	font-size: 11px;
+		font-size: 11px;
-	font-weight: bold;
+		font-weight: bold;
-	background: rgba(255, 255, 255); /* 浅色背景确保在深色图片上可见 */
+		background: rgba(255, 255, 255); /* 浅色背景确保在深色图片上可见 */
-	// padding: 0 4px;
+		// padding: 0 4px;
-	border-radius: 2px;
+		border-radius: 2px;
-	white-space: nowrap;
+		white-space: nowrap;
-	pointer-events: none;
+		pointer-events: none;
-	z-index: 10;
+		z-index: 10;
-	line-height: 1.2;
+		line-height: 1.2;
-}
+	}
 
-/* 水平线名称：放在线段上方 2px */
+	/* 水平线名称：放在线段上方 2px */
-.label-h {
+	.label-h {
-	transform: translateY(-100%);
+		transform: translateY(-100%);
-	margin-top: -2px;
+		margin-top: -2px;
-	left: 4px;
+		left: 4px;
-}
+	}
 
-/* 垂直线名称：放在裁剪框顶部边缘上方 */
+	/* 垂直线名称：放在裁剪框顶部边缘上方 */
-.label-v {
+	.label-v {
-	transform: translateX(-50%);
+		transform: translateX(-50%);
-	top: -20px;
+		top: -20px;
-	left: 50%;
+		left: 50%;
-}
+	}
 </style>

src/views/SellerDashboard/BrandProfile/index.vue

@@ -69,13 +69,25 @@
 		input.click()
 	}
 
+	const uploadFile = async (file) => {
+		const formData = new FormData()
+		formData.append("file", file)
+		return Https.axiosPost(Https.httpUrls.sellerUploadFile, formData, {
+			headers: {
+				"Content-Type": "multipart/form-data"
+			}
+		})
+	}
+
 	const onChangeBanner = () => {
 		uploadImg(({ url }) => {
 			imageClipDialogRef.value.open(
 				url,
-				(file) => {
+				async (file) => {
-					// banner.value = URL.createObjectURL(file)
+					store.commit("set_loading", true)
-					console.log(URL.createObjectURL(file))
+					const res = await uploadFile(file)
+					onSubmit({ brandBanner: res })
+					store.commit("set_loading", false)
 				},
 				{ ratio: [40, 7], isPreview: false, title: "Crop Brand Banner" }
 			)
@@ -85,9 +97,11 @@
 		uploadImg(({ url }) => {
 			imageClipDialogRef.value.open(
 				url,
-				(file) => {
+				async (file) => {
-					// avatar.value = URL.createObjectURL(file)
+					store.commit("set_loading", true)
-					console.log(URL.createObjectURL(file))
+					const res = await uploadFile(file)
+					onSubmit({ avatar: res })
+					store.commit("set_loading", false)
 				},
 				{ ratio: [1, 1], isPreview: true, title: "Crop Avatar" }
 			)
@@ -99,12 +113,16 @@
 	const onCancel = () => {
 		isEdit.value = false
 	}
-	const onSubmit = async () => {
+	const onSubmit = async (value = null) => {
-		const res = await brandInfoRef.value.submit()
+		const res = value ? value : await brandInfoRef.value.submit()
 		const data = {
 			...designerInfo.value,
-			...res,
+			...res
-			socialLinks: JSON.stringify(res.socialLinks)
+		}
+		try {
+			data.socialLinks = JSON.stringify(data.socialLinks)
+		} catch (error) {
+			data.socialLinks = JSON.stringify([])
 		}
 		Https.axiosPut(Https.httpUrls.updateDesignerInfo, data).then((res) => {
 			isEdit.value = false