111
This commit is contained in:
李志鹏
88
src/assets/css/ant-from-style.css
Normal file
88
src/assets/css/ant-from-style.css
Normal file
@@ -0,0 +1,88 @@
|
||||
:deep(.ant-form) .form-group {
|
||||
display: flex;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
:deep(.ant-form) .form-group .ant-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item {
|
||||
margin-bottom: 1.6rem;
|
||||
position: relative;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item .tip-length {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1.6rem;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1rem;
|
||||
color: #df2c2c;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item .ant-form-item-explain,
|
||||
:deep(.ant-form) .ant-form-item .ant-form-item-explain-connected {
|
||||
min-height: 0;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item .ant-form-item-explain-error {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-label {
|
||||
display: flex;
|
||||
padding: 0 0 0.6rem 0;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-label > label {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
|
||||
content: "";
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional):after {
|
||||
display: inline-block;
|
||||
color: #df2c2c;
|
||||
font-size: 1.4rem;
|
||||
content: "*";
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-control-input .ant-input-affix-wrapper,
|
||||
:deep(.ant-form) .ant-form-item-control-input textarea,
|
||||
:deep(.ant-form) .ant-form-item-control-input input {
|
||||
border-radius: 1.2rem;
|
||||
border: 0.16rem solid #d1d1d1;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
padding: 1.6rem;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-control-input .ant-input-affix-wrapper::placeholder,
|
||||
:deep(.ant-form) .ant-form-item-control-input textarea::placeholder,
|
||||
:deep(.ant-form) .ant-form-item-control-input input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-control-input .ant-input-affix-wrapper {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-control-input .ant-input-affix-wrapper:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-control-input .ant-input-affix-wrapper .ant-input-prefix {
|
||||
width: 5.2rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
color: #000;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-control-input .ant-input-affix-wrapper input {
|
||||
border: none;
|
||||
height: 100%;
|
||||
padding: 0 1.6rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-control-input input {
|
||||
height: 5rem;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-control-input textarea {
|
||||
height: 11rem;
|
||||
resize: none;
|
||||
}
|
||||
0
src/assets/css/ant-from.css
Normal file
0
src/assets/css/ant-from.css
Normal file
11
src/assets/icons/seller/camera.svg
Normal file
11
src/assets/icons/seller/camera.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1572_2304)">
|
||||
<path d="M19 4H18.492L16.308 1.168C16.0265 0.805806 15.6663 0.512417 15.2547 0.310054C14.843 0.107691 14.3907 0.00166304 13.932 0L10.068 0C9.6093 0.00166304 9.15699 0.107691 8.74533 0.310054C8.33368 0.512417 7.97347 0.805806 7.692 1.168L5.508 4H5C3.67441 4.00159 2.40356 4.52888 1.46622 5.46622C0.528882 6.40356 0.00158786 7.67441 0 9L0 19C0.00158786 20.3256 0.528882 21.5964 1.46622 22.5338C2.40356 23.4711 3.67441 23.9984 5 24H19C20.3256 23.9984 21.5964 23.4711 22.5338 22.5338C23.4711 21.5964 23.9984 20.3256 24 19V9C23.9984 7.67441 23.4711 6.40356 22.5338 5.46622C21.5964 4.52888 20.3256 4.00159 19 4ZM9.276 2.39C9.36967 2.26905 9.48969 2.17106 9.62693 2.10348C9.76418 2.0359 9.91502 2.00051 10.068 2H13.932C14.085 2.00066 14.2357 2.03611 14.373 2.10368C14.5102 2.17125 14.6302 2.26916 14.724 2.39L15.966 4H8.034L9.276 2.39ZM22 19C22 19.7956 21.6839 20.5587 21.1213 21.1213C20.5587 21.6839 19.7956 22 19 22H5C4.20435 22 3.44129 21.6839 2.87868 21.1213C2.31607 20.5587 2 19.7956 2 19V9C2 8.20435 2.31607 7.44129 2.87868 6.87868C3.44129 6.31607 4.20435 6 5 6H19C19.7956 6 20.5587 6.31607 21.1213 6.87868C21.6839 7.44129 22 8.20435 22 9V19Z" fill="white"/>
|
||||
<path d="M12 8C10.8133 8 9.65328 8.35189 8.66658 9.01118C7.67989 9.67047 6.91085 10.6075 6.45673 11.7039C6.0026 12.8003 5.88378 14.0067 6.11529 15.1705C6.3468 16.3344 6.91825 17.4035 7.75736 18.2426C8.59648 19.0818 9.66558 19.6532 10.8295 19.8847C11.9933 20.1162 13.1997 19.9974 14.2961 19.5433C15.3925 19.0892 16.3295 18.3201 16.9888 17.3334C17.6481 16.3467 18 15.1867 18 14C17.9984 12.4092 17.3658 10.884 16.2409 9.75911C15.116 8.63424 13.5908 8.00159 12 8ZM12 18C11.2089 18 10.4355 17.7654 9.77772 17.3259C9.11993 16.8864 8.60723 16.2616 8.30448 15.5307C8.00173 14.7998 7.92252 13.9956 8.07686 13.2196C8.2312 12.4437 8.61217 11.731 9.17158 11.1716C9.73099 10.6122 10.4437 10.2312 11.2196 10.0769C11.9956 9.92252 12.7998 10.0017 13.5307 10.3045C14.2616 10.6072 14.8864 11.1199 15.3259 11.7777C15.7654 12.4355 16 13.2089 16 14C16 15.0609 15.5786 16.0783 14.8284 16.8284C14.0783 17.5786 13.0609 18 12 18Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1572_2304">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
11
src/assets/icons/seller/picture.svg
Normal file
11
src/assets/icons/seller/picture.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1572_2553)">
|
||||
<path d="M47.5 0H12.5C9.18601 0.00396964 6.00889 1.3222 3.66555 3.66555C1.3222 6.00889 0.00396964 9.18601 0 12.5L0 47.5C0.00396964 50.814 1.3222 53.9911 3.66555 56.3345C6.00889 58.6778 9.18601 59.996 12.5 60H47.5C50.814 59.996 53.9911 58.6778 56.3345 56.3345C58.6778 53.9911 59.996 50.814 60 47.5V12.5C59.996 9.18601 58.6778 6.00889 56.3345 3.66555C53.9911 1.3222 50.814 0.00396964 47.5 0ZM12.5 5H47.5C49.4891 5 51.3968 5.79018 52.8033 7.1967C54.2098 8.60322 55 10.5109 55 12.5V47.5C54.9957 48.6137 54.7393 49.712 54.25 50.7125L31.3425 27.805C30.1817 26.6439 28.8036 25.7229 27.2868 25.0945C25.77 24.4661 24.1443 24.1427 22.5025 24.1427C20.8607 24.1427 19.235 24.4661 17.7182 25.0945C16.2014 25.7229 14.8233 26.6439 13.6625 27.805L5 36.465V12.5C5 10.5109 5.79018 8.60322 7.1967 7.1967C8.60322 5.79018 10.5109 5 12.5 5ZM12.5 55C10.5109 55 8.60322 54.2098 7.1967 52.8033C5.79018 51.3968 5 49.4891 5 47.5V43.535L17.195 31.34C17.8915 30.6431 18.7185 30.0902 19.6288 29.713C20.539 29.3358 21.5147 29.1416 22.5 29.1416C23.4853 29.1416 24.461 29.3358 25.3712 29.713C26.2815 30.0902 27.1085 30.6431 27.805 31.34L50.7125 54.25C49.712 54.7393 48.6137 54.9957 47.5 55H12.5Z" fill="#D0D0D0"/>
|
||||
<path d="M40 26.25C41.7306 26.25 43.4223 25.7368 44.8612 24.7754C46.3002 23.8139 47.4217 22.4473 48.0839 20.8485C48.7462 19.2496 48.9195 17.4903 48.5819 15.793C48.2443 14.0956 47.4109 12.5365 46.1872 11.3128C44.9635 10.0891 43.4044 9.25575 41.707 8.91813C40.0097 8.58051 38.2504 8.75379 36.6515 9.41606C35.0527 10.0783 33.6861 11.1998 32.7246 12.6388C31.7632 14.0777 31.25 15.7694 31.25 17.5C31.25 19.8206 32.1719 22.0462 33.8128 23.6872C35.4538 25.3281 37.6794 26.25 40 26.25ZM40 13.75C40.7417 13.75 41.4667 13.9699 42.0834 14.382C42.7001 14.794 43.1807 15.3797 43.4645 16.0649C43.7484 16.7502 43.8226 17.5042 43.6779 18.2316C43.5333 18.959 43.1761 19.6272 42.6516 20.1517C42.1272 20.6761 41.459 21.0333 40.7316 21.1779C40.0042 21.3226 39.2502 21.2484 38.5649 20.9646C37.8797 20.6807 37.294 20.2001 36.882 19.5834C36.4699 18.9667 36.25 18.2417 36.25 17.5C36.25 16.5054 36.6451 15.5516 37.3483 14.8484C38.0516 14.1451 39.0054 13.75 40 13.75Z" fill="#D0D0D0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1572_2553">
|
||||
<rect width="60" height="60" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
4
src/assets/icons/seller/user.svg
Normal file
4
src/assets/icons/seller/user.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 24C26.3734 24 28.6935 23.2962 30.6668 21.9776C32.6402 20.6591 34.1783 18.7849 35.0866 16.5922C35.9948 14.3995 36.2324 11.9867 35.7694 9.65892C35.3064 7.33115 34.1635 5.19295 32.4853 3.51472C30.8071 1.83649 28.6689 0.693605 26.3411 0.230582C24.0133 -0.232441 21.6005 0.00519943 19.4078 0.913451C17.2151 1.8217 15.3409 3.35977 14.0224 5.33316C12.7038 7.30655 12 9.62663 12 12C12.0032 15.1816 13.2685 18.232 15.5182 20.4818C17.768 22.7315 20.8184 23.9968 24 24ZM24 4.00001C25.5823 4.00001 27.129 4.4692 28.4446 5.34825C29.7602 6.2273 30.7855 7.47673 31.391 8.93854C31.9965 10.4003 32.155 12.0089 31.8463 13.5607C31.5376 15.1126 30.7757 16.538 29.6569 17.6569C28.538 18.7757 27.1126 19.5376 25.5607 19.8463C24.0089 20.155 22.4003 19.9965 20.9385 19.391C19.4767 18.7855 18.2273 17.7602 17.3482 16.4446C16.4692 15.129 16 13.5823 16 12C16 9.87827 16.8429 7.84344 18.3431 6.34315C19.8434 4.84286 21.8783 4.00001 24 4.00001Z" fill="#BBBBBB"/>
|
||||
<path d="M24 28C19.2277 28.0053 14.6524 29.9034 11.2779 33.2779C7.90342 36.6524 6.00529 41.2277 6 46C6 46.5304 6.21071 47.0391 6.58579 47.4142C6.96086 47.7893 7.46957 48 8 48C8.53043 48 9.03914 47.7893 9.41421 47.4142C9.78929 47.0391 10 46.5304 10 46C10 42.287 11.475 38.726 14.1005 36.1005C16.726 33.475 20.287 32 24 32C27.713 32 31.274 33.475 33.8995 36.1005C36.525 38.726 38 42.287 38 46C38 46.5304 38.2107 47.0391 38.5858 47.4142C38.9609 47.7893 39.4696 48 40 48C40.5304 48 41.0391 47.7893 41.4142 47.4142C41.7893 47.0391 42 46.5304 42 46C41.9947 41.2277 40.0966 36.6524 36.7221 33.2779C33.3476 29.9034 28.7723 28.0053 24 28Z" fill="#BBBBBB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
110
src/assets/style/ant-from-style.less
Normal file
110
src/assets/style/ant-from-style.less
Normal file
@@ -0,0 +1,110 @@
|
||||
:deep(.ant-form) {
|
||||
.form-group {
|
||||
display: flex;
|
||||
gap: 1.6rem;
|
||||
|
||||
.ant-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 1.6rem;
|
||||
position: relative;
|
||||
|
||||
.tip-length {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1.6rem;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1rem;
|
||||
color: #df2c2c;
|
||||
}
|
||||
|
||||
.ant-form-item-explain,
|
||||
.ant-form-item-explain-connected {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ant-form-item-explain-error {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item-label {
|
||||
display: flex;
|
||||
padding: 0 0 0.6rem 0;
|
||||
|
||||
>label {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
|
||||
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: #df2c2c;
|
||||
font-size: 1.4rem;
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item-control-input {
|
||||
|
||||
.ant-input-affix-wrapper,
|
||||
textarea,
|
||||
input {
|
||||
border-radius: 1.2rem;
|
||||
border: 0.16rem solid #d1d1d1;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
padding: 1.6rem;
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
margin-bottom: 0.6rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-input-prefix {
|
||||
width: 5.2rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
color: #000;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
height: 100%;
|
||||
padding: 0 1.6rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 11rem;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,13 +5,7 @@
|
||||
<div class="title">Brand Information</div>
|
||||
<div class="tip">Share a few details to set up your seller profile</div>
|
||||
<div class="form">
|
||||
<a-form
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
layout="vertical"
|
||||
class="my-form"
|
||||
ref="formRef"
|
||||
>
|
||||
<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"
|
||||
@@ -154,6 +148,7 @@
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/style/ant-from-style.less";
|
||||
.seller-apply {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -257,97 +252,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.my-form) {
|
||||
.form-group {
|
||||
display: flex;
|
||||
gap: 1.6rem;
|
||||
.ant-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 1.6rem;
|
||||
position: relative;
|
||||
.tip-length {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1.6rem;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1rem;
|
||||
color: #df2c2c;
|
||||
}
|
||||
.ant-form-item-explain,
|
||||
.ant-form-item-explain-connected {
|
||||
min-height: 0;
|
||||
}
|
||||
.ant-form-item-explain-error {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.ant-form-item-label {
|
||||
display: flex;
|
||||
padding: 0 0 0.6rem 0;
|
||||
> label {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
|
||||
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: #df2c2c;
|
||||
font-size: 1.4rem;
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-input {
|
||||
.ant-input-affix-wrapper,
|
||||
textarea,
|
||||
input {
|
||||
border-radius: 1.2rem;
|
||||
border: 0.16rem solid #d1d1d1;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
padding: 1.6rem;
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
margin-bottom: 0.6rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-input-prefix {
|
||||
width: 5.2rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
color: #000;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
border: none;
|
||||
height: 100%;
|
||||
padding: 0 1.6rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
input {
|
||||
height: 5rem;
|
||||
}
|
||||
textarea {
|
||||
height: 11rem;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
154
src/views/SellerDashboard/BrandProfile/brand-info.vue
Normal file
154
src/views/SellerDashboard/BrandProfile/brand-info.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<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>
|
||||
<div class="form-group">
|
||||
<a-form-item label="Email" name="email">
|
||||
<a-input
|
||||
type="email"
|
||||
v-model:value="formData.email"
|
||||
placeholder="Enter email"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Phone Number" name="phoneNumber">
|
||||
<a-input
|
||||
type="tel"
|
||||
v-model:value="formData.phoneNumber"
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
</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>
|
||||
</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 { useRoute, useRouter } from "vue-router"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(["submit"])
|
||||
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 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")
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/style/ant-from-style.less";
|
||||
.brand-info {
|
||||
// width: 100%;
|
||||
// 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>
|
||||
@@ -1,13 +1,112 @@
|
||||
<template>
|
||||
<div class="brand-profile-index">brand-profile-index</div>
|
||||
<div class="brand-profile-index">
|
||||
<div class="header">
|
||||
<div class="bg">
|
||||
<img v-if="banner" :src="banner" />
|
||||
<div v-else class="null">
|
||||
<span class="icon"><svg-icon name="seller-picture" size="60" /></span>
|
||||
<span class="tip">Your brand banner has not been set up yet.</span>
|
||||
</div>
|
||||
<button>Change Brand Banner</button>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<div class="avatar">
|
||||
<img v-if="avatar" :src="avatar" />
|
||||
<div v-else class="null">
|
||||
<svg-icon name="seller-user" size="48" />
|
||||
</div>
|
||||
<span class="icon">
|
||||
<svg-icon name="seller-camera" size="24" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<brand-info />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
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")
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.seller-dashboard-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.brand-profile-index {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 8rem;
|
||||
margin: 0 7rem;
|
||||
> .header {
|
||||
position: relative;
|
||||
margin-bottom: 6rem;
|
||||
> .bg {
|
||||
position: relative;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 1.2rem;
|
||||
}
|
||||
> .null {
|
||||
width: 100%;
|
||||
height: 23rem;
|
||||
border-radius: 1.2rem;
|
||||
border: 1px dashed #b0b0b0;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .tip {
|
||||
margin-top: 1.2rem;
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: rgba(153, 153, 153, 0.6);
|
||||
}
|
||||
}
|
||||
> button {
|
||||
position: absolute;
|
||||
bottom: 1.6rem;
|
||||
right: 1.6rem;
|
||||
padding: 0 2.7rem;
|
||||
border-radius: 4rem;
|
||||
height: 4.5rem;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: 0.2rem 0.2rem 1.2rem 0 rgba(0, 0, 0, 0.1);
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .avatar {
|
||||
position: absolute;
|
||||
left: 6rem;
|
||||
bottom: -4rem;
|
||||
> img,
|
||||
> .null {
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
border-radius: 1.2rem;
|
||||
border: 0.15rem solid #919191;
|
||||
}
|
||||
> .null {
|
||||
background-color: #f2f1f1;
|
||||
}
|
||||
> .icon {
|
||||
position: absolute;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(146, 146, 146, 0.96);
|
||||
right: -1.6rem;
|
||||
bottom: -1.6rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,17 +12,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<toolTipBox v-model:visible="visible" @close="()=>{}"></toolTipBox>
|
||||
<router-view></router-view>
|
||||
<toolTipBox v-model:visible="visible" @close="() => {}"></toolTipBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import toolTipBox from './toolTipBox.vue'
|
||||
import toolTipBox from "./toolTipBox.vue"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const visible = ref(false)
|
||||
@@ -58,7 +56,6 @@
|
||||
.seller-dashboard-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -67,6 +64,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3.6rem;
|
||||
margin-bottom: 4rem;
|
||||
> div {
|
||||
width: 18rem;
|
||||
height: 6rem;
|
||||
@@ -100,9 +98,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> .view {
|
||||
margin-top: 4rem;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<style scoped lang="less">
|
||||
.seller-header {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2.4rem;
|
||||
|
||||
Reference in New Issue
Block a user