148 lines
3.8 KiB
Vue
148 lines
3.8 KiB
Vue
<template>
|
||
<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-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">
|
||
<a-input
|
||
type="tel"
|
||
v-model:value="formData.phoneNumber"
|
||
placeholder="Enter phone number"
|
||
:readonly="!isEdit"
|
||
/>
|
||
</a-form-item>
|
||
</div>
|
||
<div class="form-group">
|
||
<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]"
|
||
: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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, watch } from "vue"
|
||
import { useRoute, useRouter } from "vue-router"
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
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" }],
|
||
email: [{ required: true, message: "Enter email" }],
|
||
phoneNumber: [{ required: true, message: "Enter phone number" }],
|
||
description: [{ required: true, message: "Enter store description" }]
|
||
}
|
||
|
||
const formRef = ref(null)
|
||
const formData = reactive({
|
||
storeName: "",
|
||
fullName: "",
|
||
email: "",
|
||
phoneNumber: "",
|
||
description: "",
|
||
links: ["", ""]
|
||
})
|
||
const newLink = ref("")
|
||
const addLink = () => {
|
||
formData.links.push(newLink.value)
|
||
newLink.value = ""
|
||
}
|
||
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 cancel = () => {
|
||
formRef.value.clearValidate()
|
||
edit()
|
||
}
|
||
const submit = async () => {
|
||
await formRef.value.validate()
|
||
return JSON.parse(JSON.stringify(formData))
|
||
}
|
||
defineExpose({
|
||
submit
|
||
})
|
||
</script>
|
||
<style scoped lang="less">
|
||
@import "@/assets/style/ant-from-style.less";
|
||
.brand-info {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// overflow: hidden;
|
||
// padding: 0 10rem;
|
||
}
|
||
</style>
|