上传头像

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,10 +36,10 @@
 	</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: {
 			type: String,
 			default: ""
@@ -60,17 +60,17 @@ const props = defineProps({
 			type: String,
 			default: () => ""
 		}
-})
+	})
-const attrs = useAttrs()
+	const attrs = useAttrs()
 
-const autoCropHeight = computed(() => {
+	const autoCropHeight = computed(() => {
 		let height = 426
 		if (props.type === "cover") height = 375
 		else if (props.type === "apparel") height = 320
 		return height
-})
+	})
 
-const bindProps = computed(() => {
+	const bindProps = computed(() => {
 		// :autoCropWidth="isProduct ? undefined : type === 'cover' ? 297 : 242"
 		// 		:autoCropHeight="isProduct ? undefined : autoCropHeight"
 		if (props.isProduct) {
@@ -79,26 +79,26 @@ const bindProps = computed(() => {
 				autoCropWidth: props.type === "cover" ? 297 : 242
 			}
 		}
-})
+	})
 
-const onChange = (data) => {
+	const onChange = (data) => {
 		if (attrs.onChange) {
 			getCropUrl().then((url) => attrs.onChange(url))
 		}
-}
+	}
-const cropper = ref(null)
+	const cropper = ref(null)
-const imageClipBody = ref(null)
+	const imageClipBody = ref(null)
-let injectLabelFrame = 0
+	let injectLabelFrame = 0
-const observer = new ResizeObserver((entries) => {
+	const observer = new ResizeObserver((entries) => {
 		refreshCrop()
-})
+	})
 
-const clearCropLabels = (cropperBox) => {
+	const clearCropLabels = (cropperBox) => {
 		if (!cropperBox) return
 		cropperBox.querySelectorAll(".cropper-line-label").forEach((node) => node.remove())
-}
+	}
 
-const createCropLabel = ({ text, top, className }) => {
+	const createCropLabel = ({ text, top, className }) => {
 		const label = document.createElement("div")
 		label.className = `cropper-line-label ${className}`
 		label.textContent = text
@@ -106,9 +106,9 @@ const createCropLabel = ({ text, top, className }) => {
 		label.style.left = className === "label-v" ? "50%" : "0"
 		label.style.transform = className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
 		return label
-}
+	}
 
-const cropLabelMap = {
+	const cropLabelMap = {
 		cover: [
 			{ text: "crown", top: "2.67%", className: "label-h" },
 			{ text: "hip line", top: "63.47%", className: "label-h" },
@@ -126,9 +126,9 @@ const cropLabelMap = {
 			{ text: "center", top: "0", className: "label-v" }
 		],
 		apparel: [{ text: "center", top: "0", className: "label-v" }]
-}
+	}
 
-const injectCropLabel = () => {
+	const injectCropLabel = () => {
 		const cropperBox = imageClipBody.value?.querySelector(".cropper-view-box")
 
 		if (!cropperBox) return false
@@ -139,64 +139,64 @@ const injectCropLabel = () => {
 		})
 
 		return true
-}
+	}
 
-const scheduleInjectCropLabel = (retry = 0) => {
+	const scheduleInjectCropLabel = (retry = 0) => {
 		cancelAnimationFrame(injectLabelFrame)
 		injectLabelFrame = requestAnimationFrame(() => {
 			if (!injectCropLabel() && retry < 10) {
 				scheduleInjectCropLabel(retry + 1)
 			}
 		})
-}
+	}
 
-onMounted(() => {
+	onMounted(() => {
 		observer.observe(imageClipBody.value)
 		scheduleInjectCropLabel()
-})
+	})
-onBeforeUnmount(() => {
+	onBeforeUnmount(() => {
 		observer.disconnect()
 		cancelAnimationFrame(injectLabelFrame)
-})
+	})
-const rotateLeft = () => {
+	const rotateLeft = () => {
 		cropper.value.rotateLeft()
-}
+	}
-const rotateRight = () => {
+	const rotateRight = () => {
 		cropper.value.rotateRight()
-}
+	}
-const refreshCrop = () => {
+	const refreshCrop = () => {
 		cropper.value.refresh()
-}
+	}
-const changeScale = (num = 1) => {
+	const changeScale = (num = 1) => {
 		cropper.value.changeScale(num)
-}
+	}
-const getCropUrl = () => {
+	const getCropUrl = () => {
 		return new Promise((resolve, reject) => {
 			cropper.value.getCropData(resolve)
 		})
-}
+	}
-const getCropBlob = () => {
+	const getCropBlob = () => {
 		return new Promise((resolve, reject) => {
 			cropper.value.getCropBlob(resolve)
 		})
-}
+	}
 
-watch(
+	watch(
 		[() => props.type, () => props.url],
 		async () => {
 			await nextTick()
 			scheduleInjectCropLabel()
 		},
 		{ flush: "post" }
-)
+	)
 
-defineExpose({
+	defineExpose({
 		getCropUrl,
 		getCropBlob
-})
+	})
 </script>
 <style lang="less" scoped>
-.image-clip {
+	.image-clip {
 		width: 100%;
 		height: 100%;
 		display: flex;
@@ -310,22 +310,13 @@ defineExpose({
 			&[data-crop-type="cover"] {
 				.image-clip-body {
 					:deep(.vue-cropper .cropper-view-box::after) {
-					background-image:
+						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 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:
+						background-size: 8px 1px, 8px 1px, 8px 1px, 1px 8px;
-						8px 1px,
+						background-position: 0 2.67%, 0 63.47%, 0 92.8%, 50% 0;
-						8px 1px,
-						8px 1px,
-						1px 8px;
-					background-position:
-						0 2.67%,
-						0 63.47%,
-						0 92.8%,
-						50% 0;
 					}
 				}
 			}
@@ -334,19 +325,12 @@ defineExpose({
 			&[data-crop-type="sketch"] {
 				.image-clip-body {
 					:deep(.vue-cropper .cropper-view-box::after) {
-					background-image:
+						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-y;
-					background-size:
+						background-size: 8px 1px, 8px 1px, 1px 8px;
-						8px 1px,
+						background-position: 0 2.67%, 0 97.6%, 50% 0;
-						8px 1px,
-						1px 8px;
-					background-position:
-						0 2.67%,
-						0 97.6%,
-						50% 0;
 					}
 				}
 			}
@@ -362,11 +346,11 @@ defineExpose({
 				}
 			}
 		}
-}
+	}
 </style>
 
 <style lang="less">
-.cropper-line-label {
+	.cropper-line-label {
 		position: absolute;
 		color: #4ba5ff; /* 统一颜色 */
 		font-size: 11px;
@@ -378,19 +362,19 @@ defineExpose({
 		pointer-events: none;
 		z-index: 10;
 		line-height: 1.2;
-}
+	}
 
-/* 水平线名称：放在线段上方 2px */
+	/* 水平线名称：放在线段上方 2px */
-.label-h {
+	.label-h {
 		transform: translateY(-100%);
 		margin-top: -2px;
 		left: 4px;
-}
+	}
 
-/* 垂直线名称：放在裁剪框顶部边缘上方 */
+	/* 垂直线名称：放在裁剪框顶部边缘上方 */
-.label-v {
+	.label-v {
 		transform: translateX(-50%);
 		top: -20px;
 		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