aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
李志鹏
2026-04-09 13:48:46 +08:00
parent 3a7ba636f2
commit 5e1d43b5a0
4 changed files with 159 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/views/SellerDashboard/BrandProfile/brand-info.vue
View File

@@ -1,26 +1,33 @@
<template> <template>
<div class="brand-info"> <div class="brand-info">
<a-form :model="formData" :rules="formRules" layout="vertical" ref="formRef"> <a-form :model="formData" :rules="isEdit ? formRules : {}" layout="vertical" ref="formRef">
<a-form-item label="Store Name" name="storeName"> <div class="form-group">
<a-input <a-form-item label="Store Name" name="storeName">
v-model:value="formData.storeName" <a-input
placeholder="Enter the store name" v-model:value="formData.storeName"
:maxlength="80" placeholder="Enter the store name"
/> :maxlength="80"
<span class="tip-length">{{ formData.storeName.length }}/80</span> :readonly="!isEdit"
</a-form-item> />
<a-form-item label="Owner’s Full Name" name="fullName"> <span v-show="isEdit" class="tip-length"
<a-input >{{ formData.storeName.length }}/80</span
v-model:value="formData.fullName" >
placeholder="Enter store owner's full name" </a-form-item>
/> <a-form-item label="Owner’s Full Name" name="fullName">
</a-form-item> <a-input
v-model:value="formData.fullName"
placeholder="Enter store owner's full name"
:readonly="!isEdit"
/>
</a-form-item>
</div>
<div class="form-group"> <div class="form-group">
<a-form-item label="Email" name="email"> <a-form-item label="Email" name="email">
<a-input <a-input
type="email" type="email"
v-model:value="formData.email" v-model:value="formData.email"
placeholder="Enter email" placeholder="Enter email"
:readonly="!isEdit"
/> />
</a-form-item> </a-form-item>
<a-form-item label="Phone Number" name="phoneNumber"> <a-form-item label="Phone Number" name="phoneNumber">
@@ -28,55 +35,61 @@
type="tel" type="tel"
v-model:value="formData.phoneNumber" v-model:value="formData.phoneNumber"
placeholder="Enter phone number" placeholder="Enter phone number"
:readonly="!isEdit"
/> />
</a-form-item> </a-form-item>
</div> </div>
<a-form-item label="Store Description" name="description"> <div class="form-group">
<a-textarea <a-form-item label="Portfoilo/Social Media Links">
v-model:value="formData.description" <a-input
placeholder="Briefly describe your design style and store features..." placeholder="https://"
:maxlength="500" v-for="(v, i) in formData.links"
/> :key="i"
<span class="tip-length">{{ formData.description.length }}/500</span> v-model:value="formData.links[i]"
</a-form-item> :readonly="!isEdit"
<a-form-item label="Portfoilo/Social Media Links"> >
<a-input <template #prefix>Link {{ i + 1 }}</template>
placeholder="https://" </a-input>
v-for="(v, i) in formData.links" <a-input
:key="i" placeholder="https://"
v-model:value="formData.links[i]" v-model:value="newLink"
> @keyup.enter.prevent="addLink"
<template #prefix>Link {{ i + 1 }}</template> v-if="isEdit"
</a-input> >
<a-input <template #prefix>
placeholder="https://" <span @click="addLink" style="cursor: pointer">
v-model:value="newLink" <svg-icon name="seller-add" size="20" />
@keyup.enter.prevent="addLink" </span>
> </template>
<template #prefix> </a-input>
<span @click="addLink" style="cursor: pointer"> </a-form-item>
<svg-icon name="seller-add" size="20" /> <a-form-item label="Store Description" name="description">
</span> <a-textarea
</template> v-model:value="formData.description"
</a-input> placeholder="Briefly describe your design style and store features..."
</a-form-item> :maxlength="500"
:readonly="!isEdit"
/>
<span v-show="isEdit" class="tip-length"
>{{ formData.description.length }}/500</span
>
</a-form-item>
</div>
</a-form> </a-form>
<div class="btns">
<button class="cancel" @click="onCancel">Cancel</button>
<button class="submit" :disabled="!isAgreement" @click="onSubmit">
Submit Application
</button>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive } from "vue" import { ref, reactive, watch } from "vue"
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router"
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const emit = defineEmits(["submit"]) const props = defineProps({
isEdit: {
type: Boolean,
default: false
}
})
const formRules = { const formRules = {
storeName: [{ required: true, message: "Enter the store name" }], storeName: [{ required: true, message: "Enter the store name" }],
fullName: [{ required: true, message: "Enter store owner's full name" }], fullName: [{ required: true, message: "Enter store owner's full name" }],
@@ -84,6 +97,7 @@
phoneNumber: [{ required: true, message: "Enter phone number" }], phoneNumber: [{ required: true, message: "Enter phone number" }],
description: [{ required: true, message: "Enter store description" }] description: [{ required: true, message: "Enter store description" }]
} }
const formRef = ref(null) const formRef = ref(null)
const formData = reactive({ const formData = reactive({
storeName: "", storeName: "",
@@ -93,26 +107,26 @@
description: "", description: "",
links: ["", ""] links: ["", ""]
}) })
const isAgreement = ref(false)
const newLink = ref("") const newLink = ref("")
const addLink = () => { const addLink = () => {
formData.links.push(newLink.value) formData.links.push(newLink.value)
newLink.value = "" newLink.value = ""
} }
const onCancel = () => { watch(
router.back() () => props.isEdit,
} (v) => (v ? edit() : cancel())
const onSubmit = () => { )
formRef.value const edit = () => {}
.validate() const cancel = () => {}
.then(() => { const submit = async () => {
console.log(formData) const valid = await formRef.value.validate()
emit("submit") if (!valid) return Promise.reject(false)
}) console.log(valid)
.catch(() => { return valid
console.log("validate failed")
})
} }
defineExpose({
submit
})
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "@/assets/style/ant-from-style.less"; @import "@/assets/style/ant-from-style.less";
@@ -121,34 +135,5 @@
// height: 100%; // height: 100%;
// overflow: hidden; // overflow: hidden;
// padding: 0 10rem; // padding: 0 10rem;
> .btns {
margin-top: 3.9rem;
display: flex;
justify-content: flex-end;
gap: 1.6rem;
> button {
height: 6rem;
border-radius: 6rem;
padding: 0 4rem;
background-color: #000;
color: #fff;
font-size: 1.6rem;
border: none;
cursor: pointer;
&:active:not(:disabled) {
opacity: 0.8;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
> .cancel {
background-color: #fff;
color: #000;
border: 0.15rem solid #000;
}
}
} }
</style> </style>

73
src/views/SellerDashboard/BrandProfile/index.vue
View File

@@ -20,7 +20,22 @@
</span> </span>
</div> </div>
</div> </div>
<brand-info /> <brand-info :is-edit="isEdit" ref="brandInfoRef" />
</div>
<div class="and-profile-footer">
<template v-if="isEdit">
<div class="btns">
<button class="cancel" @click="onCancel">Cancel</button>
<button class="submit" @click="onSubmit">Save Change</button>
</div>
<p class="tip">Changes will be reflected on your Stylish Parade brand page.</p>
</template>
<template v-else>
<div class="btns">
<button class="edit" @click="onEdit">Edit</button>
</div>
<p class="tip">&nbsp;</p>
</template>
</div> </div>
</template> </template>
@@ -29,6 +44,22 @@
import BrandInfo from "./brand-info.vue" import BrandInfo from "./brand-info.vue"
const banner = ref("http://118.31.39.42:3000/falls/5bd8065cbb396eb5a8ef0a142605139358734e57.png") 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") const avatar = ref("http://118.31.39.42:3000/falls/20251024140128_10355_1.jpg")
const isEdit = ref(false)
const brandInfoRef = ref(null)
const onEdit = () => {
isEdit.value = true
}
const onCancel = () => {
isEdit.value = false
}
const onSubmit = () => {
brandInfoRef.value
.submit()
.then(() => {
isEdit.value = false
})
.catch(() => {})
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.brand-profile-index { .brand-profile-index {
@@ -109,4 +140,44 @@
} }
} }
} }
.and-profile-footer {
margin: 0 15rem;
> .btns {
margin-top: 3rem;
display: flex;
justify-content: flex-end;
padding-right: 1.6rem;
gap: 1.3rem;
> button {
height: 6rem;
border-radius: 6rem;
padding: 0 4rem;
background-color: #000;
color: #fff;
font-size: 1.6rem;
border: none;
cursor: pointer;
&:active:not(:disabled) {
opacity: 0.8;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
> .cancel {
background-color: #fff;
color: #000;
border: 0.15rem solid #000;
}
}
> .tip {
padding-right: 1.6rem;
margin-top: 0.7rem;
font-family: pingfang_regular;
font-size: 1.4rem;
text-align: right;
color: #999;
}
}
</style> </style>

7
src/views/SellerDashboard/MyListings/main/content.vue
View File

@@ -115,14 +115,17 @@ const { showDrafts } = toRefs(data);
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.listings{ .listings{
flex: 1; position: absolute;
position: relative; width: 100%;
height: 100%;
display: flex; display: flex;
gap: 2rem; gap: 2rem;
.listingsBox{ .listingsBox{
background-color: #f9fafa; background-color: #f9fafa;
border-radius: 2rem; border-radius: 2rem;
flex: 1;
position: relative; position: relative;
// overflow: hidden;
display: flex; display: flex;
.box{ .box{
width: 100%; width: 100%;

2
src/views/SellerDashboard/MyListings/main/index.vue
View File

@@ -73,7 +73,7 @@ const {} = toRefs(data);
> .content { > .content {
margin-top: 2rem; margin-top: 2rem;
flex: 1; flex: 1;
display: flex; position: relative;
} }
} }
</style> </style>