店铺信息

src/views/SellerDashboard/BrandProfile/brand-info.vue

@@ -2,20 +2,20 @@
 	<div class="brand-info">
 		<a-form :model="formData" :rules="isEdit ? formRules : {}" layout="vertical" ref="formRef">
 			<div class="form-group">
-				<a-form-item label="Store Name" name="storeName">
+				<a-form-item label="Store Name" name="shopName">
 					<a-input
-						v-model:value="formData.storeName"
+						v-model:value="formData.shopName"
 						placeholder="Enter the store name"
 						:maxlength="80"
 						:readonly="!isEdit"
 					/>
 					<span v-show="isEdit" class="tip-length"
-						>{{ formData.storeName.length }}/80</span
+						>{{ formData.shopName.length }}/80</span
 					>
 				</a-form-item>
-				<a-form-item label="Owner’s Full Name" name="fullName">
+				<a-form-item label="Owner’s Full Name" name="ownerName">
 					<a-input
-						v-model:value="formData.fullName"
+						v-model:value="formData.ownerName"
 						placeholder="Enter store owner's full name"
 						:readonly="!isEdit"
 					/>
@@ -30,10 +30,10 @@
 						:readonly="!isEdit"
 					/>
 				</a-form-item>
-				<a-form-item label="Phone Number" name="phoneNumber">
+				<a-form-item label="Phone Number" name="mobile">
 					<a-input
 						type="tel"
-						v-model:value="formData.phoneNumber"
+						v-model:value="formData.mobile"
 						placeholder="Enter phone number"
 						:readonly="!isEdit"
 					/>
@@ -43,9 +43,9 @@
 				<a-form-item label="Portfoilo/Social Media Links">
 					<a-input
 						placeholder="https://"
-						v-for="(v, i) in formData.links"
-						:key="v + i"
-						v-model:value="formData.links[i]"
+						v-for="(v, i) in formData.socialLinks"
+						:key="i"
+						v-model:value="formData.socialLinks[i]"
 						:readonly="!isEdit"
 					>
 						<template #prefix>Link {{ i + 1 }}</template>
@@ -82,6 +82,9 @@
 <script setup>
 	import { ref, reactive, watch } from "vue"
 	import { useRoute, useRouter } from "vue-router"
+	import { useStore } from "vuex"
+	const store = useStore()
+	const designerInfo = computed(() => store.state.seller.designerInfo)
 	const route = useRoute()
 	const router = useRouter()
 	const props = defineProps({
@@ -91,42 +94,49 @@
 		}
 	})
 	const formRules = {
-		storeName: [{ required: true, message: "Enter the store name" }],
-		fullName: [{ required: true, message: "Enter store owner's full name" }],
+		shopName: [{ required: true, message: "Enter the store name" }],
+		ownerName: [{ required: true, message: "Enter store owner's full name" }],
 		email: [{ required: true, message: "Enter email" }],
-		phoneNumber: [{ required: true, message: "Enter phone number" }],
+		mobile: [{ required: true, message: "Enter phone number" }],
 		description: [{ required: true, message: "Enter store description" }]
 	}
 
 	const formRef = ref(null)
 	const formData = reactive({
-		storeName: "",
-		fullName: "",
+		shopName: "",
+		ownerName: "",
 		email: "",
-		phoneNumber: "",
+		mobile: "",
 		description: "",
-		links: ["", ""]
+		socialLinks: ["", ""]
 	})
 	const newLink = ref("")
 	const addLink = () => {
-		formData.links.push(newLink.value)
+		formData.socialLinks.push(newLink.value)
 		newLink.value = ""
 	}
+	watch(
+		() => designerInfo.value,
+		(v) => updateFormData()
+	)
+	const updateFormData = () => {
+		formData.shopName = designerInfo.value.shopName
+		formData.ownerName = designerInfo.value.ownerName
+		formData.email = designerInfo.value.email
+		formData.mobile = designerInfo.value.mobile
+		formData.description = designerInfo.value.description
+		formData.socialLinks = JSON.parse(JSON.stringify(designerInfo.value.socialLinks))
+	}
+	updateFormData()
+
 	watch(
 		() => props.isEdit,
 		(v) => (v ? edit() : cancel())
 	)
-	const edit = () => {
-		formData.storeName = "测试"
-		formData.fullName = "测试"
-		formData.email = "测试"
-		formData.phoneNumber = "测试"
-		formData.description = "测试"
-		formData.links = ["https://www.baidu.com", "https://www.taobao.com"]
-	}
+	const edit = () => {}
 	const cancel = () => {
 		formRef.value.clearValidate()
-		edit()
+		updateFormData()
 	}
 	const submit = async () => {
 		await formRef.value.validate()

src/views/SellerDashboard/BrandProfile/index.vue

@@ -41,11 +41,15 @@
 </template>
 
 <script setup>
-	import { ref } from "vue"
+	import { Https } from "@/tool/https"
+	import { ref, computed } from "vue"
 	import BrandInfo from "./brand-info.vue"
 	import ImageClipDialog from "./image-clip-dialog.vue"
-	const banner = ref("")
-	const avatar = ref("")
+	import { useStore } from "vuex"
+	const store = useStore()
+	const designerInfo = computed(() => store.state.seller.designerInfo)
+	const avatar = computed(() => designerInfo.value.avatar)
+	const banner = computed(() => designerInfo.value.brandBanner)
 	const isEdit = ref(false)
 	const brandInfoRef = ref(null)
 	const imageClipDialogRef = ref(null)
@@ -70,7 +74,8 @@
 			imageClipDialogRef.value.open(
 				url,
 				(file) => {
-					banner.value = URL.createObjectURL(file)
+					// banner.value = URL.createObjectURL(file)
+					console.log(URL.createObjectURL(file))
 				},
 				{ ratio: [40, 7], isPreview: false, title: "Crop Brand Banner" }
 			)
@@ -81,7 +86,8 @@
 			imageClipDialogRef.value.open(
 				url,
 				(file) => {
-					avatar.value = URL.createObjectURL(file)
+					// avatar.value = URL.createObjectURL(file)
+					console.log(URL.createObjectURL(file))
 				},
 				{ ratio: [1, 1], isPreview: true, title: "Crop Avatar" }
 			)
@@ -93,14 +99,17 @@
 	const onCancel = () => {
 		isEdit.value = false
 	}
-	const onSubmit = () => {
-		brandInfoRef.value
-			.submit()
-			.then((res) => {
-				console.log(res)
-				isEdit.value = false
-			})
-			.catch(() => {})
+	const onSubmit = async () => {
+		const res = await brandInfoRef.value.submit()
+		const data = {
+			...designerInfo.value,
+			...res,
+			socialLinks: JSON.stringify(res.socialLinks)
+		}
+		Https.axiosPut(Https.httpUrls.updateDesignerInfo, data).then((res) => {
+			isEdit.value = false
+			store.commit("seller/set_designerInfo", data)
+		})
 	}
 </script>
 <style scoped lang="less">

src/views/SellerDashboard/index.vue

@@ -19,10 +19,13 @@
 
 <script setup>
 	import { Https } from "@/tool/https"
-	import { ref, computed,onMounted,onUnmounted } from "vue"
+	import { ref, computed, onMounted, onUnmounted } from "vue"
 	import { useRoute, useRouter } from "vue-router"
 	import toolTipBox from "./toolTipBox.vue"
 	import myEvent from "@/tool/myEvents.js"
+	import { useStore } from "vuex"
+	const store = useStore()
+	store.dispatch("seller/get_designerInfo")
 	const route = useRoute()
 	const router = useRouter()
 	const visible = ref(false)
@@ -53,13 +56,13 @@
 		if (path === activePath.value) return
 		router.push(path)
 	}
-	onMounted(()=>{
-		myEvent.add('newListing',()=>{
+	onMounted(() => {
+		myEvent.add("newListing", () => {
 			visible.value = true
 		})
 	})
-	onUnmounted(()=>{
-		myEvent.remove('newListing')
+	onUnmounted(() => {
+		myEvent.remove("newListing")
 	})
 </script>
 <style scoped lang="less">