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

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

@@ -20,7 +20,22 @@
</span>
</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>
</template>
@@ -29,6 +44,22 @@
import BrandInfo from "./brand-info.vue"
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 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>
<style scoped lang="less">
.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>

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

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

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

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