上传头像

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"
@@ -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;
 					}
 				}
 			}

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