Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite
This commit is contained in:
@@ -36,7 +36,7 @@
|
||||
line-height: 150%;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-form) .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional):after {
|
||||
display: inline-block;
|
||||
|
||||
@@ -2477,6 +2477,15 @@ textarea:focus {
|
||||
border-radius: 0.4rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.mosaic-bg {
|
||||
--mosaic-bg-size: 1rem;
|
||||
--mosaic-bg-color1: #efefef;
|
||||
--mosaic-bg-color2: #fff;
|
||||
background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
|
||||
background-repeat: repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
|
||||
}
|
||||
.mark_loading {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
3
src/assets/icons/seller/download.svg
Normal file
3
src/assets/icons/seller/download.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.4167 14H0.583333C0.2625 14 0 13.7375 0 13.4167C0 13.0958 0.2625 12.8333 0.583333 12.8333H13.4167C13.7375 12.8333 14 13.0958 14 13.4167C14 13.7375 13.7375 14 13.4167 14ZM8.61583 11.0017L12.32 7.06417C12.8275 6.55667 12.9733 5.83333 12.6992 5.17417C12.425 4.515 11.8125 4.10083 11.095 4.095H9.8875L9.87 2.31583C9.87 1.03833 8.83167 0 7.55417 0H6.39917C5.12167 0 4.08333 1.03833 4.08333 2.32167V4.08333H2.8875C2.17 4.08333 1.5575 4.4975 1.28333 5.1625C1.00917 5.82167 1.155 6.55083 1.65083 7.04083L5.34333 11.0075C5.7925 11.4567 6.3875 11.6842 6.9825 11.6842C7.5775 11.6842 8.16667 11.4567 8.62167 11.0075L8.61583 11.0017ZM4.66667 5.25C4.82417 5.25 4.97 5.18583 5.08083 5.08083C5.19167 4.97 5.25 4.82417 5.25 4.66667V2.31583C5.25 1.68 5.76333 1.16667 6.39917 1.16667H7.55417C8.19 1.16667 8.70333 1.68583 8.70333 2.32167L8.72083 4.68417C8.72083 5.005 8.98333 5.26167 9.30417 5.26167H11.0833C11.4392 5.26167 11.5792 5.53583 11.6083 5.6175C11.6433 5.69917 11.7367 5.99083 11.4683 6.25333L7.77583 10.1792C7.32667 10.6225 6.60333 10.6167 6.17167 10.185L2.47917 6.21833C2.22833 5.9675 2.32167 5.67583 2.35667 5.59417C2.39167 5.5125 2.53167 5.23833 2.88167 5.23833H4.66667V5.25Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
11
src/assets/icons/seller/draft.svg
Normal file
11
src/assets/icons/seller/draft.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1622_6669)">
|
||||
<path d="M15.9998 13.3334C14.945 13.3334 13.9139 13.6462 13.0368 14.2322C12.1597 14.8182 11.4761 15.6512 11.0725 16.6257C10.6688 17.6003 10.5632 18.6726 10.769 19.7072C10.9748 20.7418 11.4827 21.6921 12.2286 22.4379C12.9745 23.1838 13.9248 23.6918 14.9594 23.8976C15.9939 24.1034 17.0663 23.9977 18.0408 23.5941C19.0154 23.1904 19.8483 22.5068 20.4343 21.6297C21.0204 20.7527 21.3332 19.7215 21.3332 18.6667C21.3332 17.2522 20.7713 15.8957 19.7711 14.8955C18.7709 13.8953 17.4143 13.3334 15.9998 13.3334ZM15.9998 21.3334C15.4724 21.3334 14.9569 21.177 14.5183 20.884C14.0798 20.5909 13.738 20.1745 13.5362 19.6872C13.3343 19.1999 13.2815 18.6637 13.3844 18.1465C13.4873 17.6292 13.7413 17.154 14.1142 16.7811C14.4872 16.4081 14.9623 16.1542 15.4796 16.0513C15.9969 15.9484 16.5331 16.0012 17.0203 16.203C17.5076 16.4049 17.9241 16.7467 18.2171 17.1852C18.5101 17.6237 18.6665 18.1393 18.6665 18.6667C18.6665 19.374 18.3856 20.0522 17.8855 20.5523C17.3854 21.0524 16.7071 21.3334 15.9998 21.3334Z" fill="white"/>
|
||||
<path d="M30.048 5.49603L26.504 1.95203C25.8865 1.33115 25.1519 0.838932 24.3429 0.503869C23.5338 0.168806 22.6664 -0.00244608 21.7907 2.6395e-05H6.66667C4.89921 0.00214354 3.20474 0.705202 1.95496 1.95499C0.705176 3.20477 0.00211714 4.89923 0 6.66669L0 25.3334C0.00211714 27.1008 0.705176 28.7953 1.95496 30.0451C3.20474 31.2949 4.89921 31.9979 6.66667 32H25.3333C27.1008 31.9979 28.7953 31.2949 30.045 30.0451C31.2948 28.7953 31.9979 27.1008 32 25.3334V10.2094C32.0025 9.33368 31.8312 8.4662 31.4962 7.65715C31.1611 6.8481 30.6689 6.11355 30.048 5.49603ZM22.6667 2.77336V4.00003C22.6667 5.06089 22.2452 6.07831 21.4951 6.82845C20.7449 7.5786 19.7275 8.00003 18.6667 8.00003H13.3333C12.2725 8.00003 11.2551 7.5786 10.5049 6.82845C9.75476 6.07831 9.33333 5.06089 9.33333 4.00003V2.66669H21.7907C22.0857 2.66931 22.3796 2.70509 22.6667 2.77336ZM29.3333 25.3334C29.3333 26.3942 28.9119 27.4116 28.1618 28.1618C27.4116 28.9119 26.3942 29.3334 25.3333 29.3334H6.66667C5.6058 29.3334 4.58839 28.9119 3.83824 28.1618C3.08809 27.4116 2.66667 26.3942 2.66667 25.3334V6.66669C2.66667 5.60583 3.08809 4.58841 3.83824 3.83827C4.58839 3.08812 5.6058 2.66669 6.66667 2.66669V4.00003C6.66878 5.76749 7.37184 7.46195 8.62163 8.71173C9.87141 9.96152 11.5659 10.6646 13.3333 10.6667H18.6667C20.3433 10.6615 21.9562 10.0236 23.1828 8.88051C24.4095 7.73745 25.1594 6.17348 25.2827 4.50136L28.1627 7.38136C28.9099 8.13319 29.3306 9.14935 29.3333 10.2094V25.3334Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1622_6669">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
3
src/assets/icons/seller/dui.svg
Normal file
3
src/assets/icons/seller/dui.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.77 16.402C7.37319 16.4028 6.98013 16.3253 6.61339 16.1737C6.24666 16.0222 5.91348 15.7997 5.633 15.519L0 9.886L1.424 8.461L7.057 14.094C7.24602 14.2829 7.50229 14.389 7.7695 14.389C8.03671 14.389 8.29298 14.2829 8.482 14.094L22.576 0L24 1.425L9.906 15.519C9.62571 15.7997 9.2927 16.0222 8.92613 16.1737C8.55956 16.3252 8.16666 16.4028 7.77 16.402Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 479 B |
11
src/assets/icons/seller/edit.svg
Normal file
11
src/assets/icons/seller/edit.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1571_1813)">
|
||||
<path d="M24.8745 1.24001L8.61853 17.496C7.99765 18.1135 7.50544 18.8481 7.17037 19.6571C6.83531 20.4662 6.66406 21.3337 6.66653 22.2093V24C6.66653 24.3536 6.80701 24.6928 7.05705 24.9428C7.3071 25.1929 7.64624 25.3333 7.99986 25.3333H9.79053C10.6662 25.3358 11.5337 25.1646 12.3427 24.8295C13.1518 24.4944 13.8863 24.0022 14.5039 23.3813L30.7599 7.12535C31.5391 6.34424 31.9766 5.28598 31.9766 4.18268C31.9766 3.07938 31.5391 2.02112 30.7599 1.24001C29.9674 0.48254 28.9134 0.0598145 27.8172 0.0598145C26.721 0.0598145 25.667 0.48254 24.8745 1.24001ZM28.8745 5.24002L12.6185 21.496C11.8667 22.2433 10.8505 22.6639 9.79053 22.6667H9.3332V22.2093C9.33598 21.1493 9.75662 20.1332 10.5039 19.3813L26.7599 3.12535C27.0446 2.85329 27.4233 2.70147 27.8172 2.70147C28.2111 2.70147 28.5897 2.85329 28.8745 3.12535C29.1545 3.40603 29.3116 3.78627 29.3116 4.18268C29.3116 4.57909 29.1545 4.95933 28.8745 5.24002Z" fill="white"/>
|
||||
<path d="M30.6667 11.972C30.313 11.972 29.9739 12.1125 29.7239 12.3625C29.4738 12.6126 29.3333 12.9517 29.3333 13.3053V20H24C22.9391 20 21.9217 20.4214 21.1716 21.1716C20.4214 21.9217 20 22.9391 20 24V29.3333H6.66667C5.6058 29.3333 4.58839 28.9119 3.83824 28.1618C3.08809 27.4116 2.66667 26.3942 2.66667 25.3333V6.66667C2.66667 5.6058 3.08809 4.58839 3.83824 3.83824C4.58839 3.08809 5.6058 2.66667 6.66667 2.66667H18.7227C19.0763 2.66667 19.4154 2.52619 19.6655 2.27614C19.9155 2.02609 20.056 1.68696 20.056 1.33333C20.056 0.979711 19.9155 0.640573 19.6655 0.390524C19.4154 0.140476 19.0763 0 18.7227 0L6.66667 0C4.89921 0.00211714 3.20474 0.705176 1.95496 1.95496C0.705176 3.20474 0.00211714 4.89921 0 6.66667L0 25.3333C0.00211714 27.1008 0.705176 28.7953 1.95496 30.045C3.20474 31.2948 4.89921 31.9979 6.66667 32H21.7907C22.6666 32.0025 23.5342 31.8313 24.3435 31.4962C25.1528 31.1612 25.8876 30.6689 26.5053 30.048L30.0467 26.504C30.6677 25.8865 31.1601 25.152 31.4953 24.3429C31.8306 23.5339 32.0022 22.6664 32 21.7907V13.3053C32 12.9517 31.8595 12.6126 31.6095 12.3625C31.3594 12.1125 31.0203 11.972 30.6667 11.972ZM24.62 28.1627C24.084 28.6973 23.4062 29.0675 22.6667 29.2293V24C22.6667 23.6464 22.8071 23.3072 23.0572 23.0572C23.3072 22.8071 23.6464 22.6667 24 22.6667H29.2333C29.0684 23.4047 28.6987 24.0812 28.1667 24.6187L24.62 28.1627Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1571_1813">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
11
src/assets/icons/seller/eye.svg
Normal file
11
src/assets/icons/seller/eye.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1696_371)">
|
||||
<path d="M17.4527 7.06427C16.2894 5.16977 13.6434 1.99127 8.99943 1.99127C4.35543 1.99127 1.70943 5.16977 0.546178 7.06427C0.186574 7.6459 -0.00390625 8.3162 -0.00390625 9.00002C-0.00390625 9.68384 0.186574 10.3541 0.546178 10.9358C1.70943 12.8303 4.35543 16.0088 8.99943 16.0088C13.6434 16.0088 16.2894 12.8303 17.4527 10.9358C17.8123 10.3541 18.0028 9.68384 18.0028 9.00002C18.0028 8.3162 17.8123 7.6459 17.4527 7.06427ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5088 8.99943 14.5088C5.08518 14.5088 2.82393 11.775 1.82493 10.1505C1.61128 9.80481 1.49812 9.40643 1.49812 9.00002C1.49812 8.59362 1.61128 8.19524 1.82493 7.84952C2.82393 6.22502 5.08518 3.49127 8.99943 3.49127C12.9137 3.49127 15.1749 6.22202 16.1739 7.84952C16.3876 8.19524 16.5007 8.59362 16.5007 9.00002C16.5007 9.40643 16.3876 9.80481 16.1739 10.1505Z" fill="black"/>
|
||||
<path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34967C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1696_371">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
11
src/assets/icons/seller/gouwudai.svg
Normal file
11
src/assets/icons/seller/gouwudai.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1696_334)">
|
||||
<path d="M17.252 14.2499H15.752V12.7499C15.752 12.551 15.6729 12.3603 15.5323 12.2196C15.3916 12.079 15.2009 11.9999 15.002 11.9999C14.803 11.9999 14.6123 12.079 14.4716 12.2196C14.331 12.3603 14.252 12.551 14.252 12.7499V14.2499H12.752C12.553 14.2499 12.3623 14.329 12.2216 14.4696C12.081 14.6103 12.002 14.801 12.002 14.9999C12.002 15.1989 12.081 15.3896 12.2216 15.5303C12.3623 15.6709 12.553 15.7499 12.752 15.7499H14.252V17.2499C14.252 17.4489 14.331 17.6396 14.4716 17.7803C14.6123 17.9209 14.803 17.9999 15.002 17.9999C15.2009 17.9999 15.3916 17.9209 15.5323 17.7803C15.6729 17.6396 15.752 17.4489 15.752 17.2499V15.7499H17.252C17.4509 15.7499 17.6416 15.6709 17.7823 15.5303C17.9229 15.3896 18.002 15.1989 18.002 14.9999C18.002 14.801 17.9229 14.6103 17.7823 14.4696C17.6416 14.329 17.4509 14.2499 17.252 14.2499Z" fill="black"/>
|
||||
<path d="M15.75 4.5H13.5C13.5 3.30653 13.0259 2.16193 12.182 1.31802C11.3381 0.474106 10.1935 0 9 0C7.80653 0 6.66193 0.474106 5.81802 1.31802C4.97411 2.16193 4.5 3.30653 4.5 4.5H2.25C1.65326 4.5 1.08097 4.73705 0.65901 5.15901C0.237053 5.58097 0 6.15326 0 6.75L0 14.25C0.00119089 15.2442 0.396661 16.1973 1.09966 16.9003C1.80267 17.6033 2.7558 17.9988 3.75 18H10.5C10.6989 18 10.8897 17.921 11.0303 17.7803C11.171 17.6397 11.25 17.4489 11.25 17.25C11.25 17.0511 11.171 16.8603 11.0303 16.7197C10.8897 16.579 10.6989 16.5 10.5 16.5H3.75C3.15326 16.5 2.58097 16.2629 2.15901 15.841C1.73705 15.419 1.5 14.8467 1.5 14.25V6.75C1.5 6.55109 1.57902 6.36032 1.71967 6.21967C1.86032 6.07902 2.05109 6 2.25 6H4.5V7.5C4.5 7.69891 4.57902 7.88968 4.71967 8.03033C4.86032 8.17098 5.05109 8.25 5.25 8.25C5.44891 8.25 5.63968 8.17098 5.78033 8.03033C5.92098 7.88968 6 7.69891 6 7.5V6H12V7.5C12 7.69891 12.079 7.88968 12.2197 8.03033C12.3603 8.17098 12.5511 8.25 12.75 8.25C12.9489 8.25 13.1397 8.17098 13.2803 8.03033C13.421 7.88968 13.5 7.69891 13.5 7.5V6H15.75C15.9489 6 16.1397 6.07902 16.2803 6.21967C16.421 6.36032 16.5 6.55109 16.5 6.75V10.5C16.5 10.6989 16.579 10.8897 16.7197 11.0303C16.8603 11.171 17.0511 11.25 17.25 11.25C17.4489 11.25 17.6397 11.171 17.7803 11.0303C17.921 10.8897 18 10.6989 18 10.5V6.75C18 6.15326 17.7629 5.58097 17.341 5.15901C16.919 4.73705 16.3467 4.5 15.75 4.5ZM6 4.5C6 3.70435 6.31607 2.94129 6.87868 2.37868C7.44129 1.81607 8.20435 1.5 9 1.5C9.79565 1.5 10.5587 1.81607 11.1213 2.37868C11.6839 2.94129 12 3.70435 12 4.5H6Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1696_334">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
3
src/assets/icons/seller/preview.svg
Normal file
3
src/assets/icons/seller/preview.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 7V5C0 2.243 2.243 0 5 0H7C7.552 0 8 0.448 8 1C8 1.552 7.552 2 7 2H5C3.346 2 2 3.346 2 5V7C2 7.552 1.552 8 1 8C0.448 8 0 7.552 0 7ZM12 10C10.895 10 10 10.895 10 12C10 13.105 10.895 14 12 14C13.105 14 14 13.105 14 12C14 10.895 13.105 10 12 10ZM7 22H5C3.346 22 2 20.654 2 19V17C2 16.448 1.552 16 1 16C0.448 16 0 16.448 0 17V19C0 21.757 2.243 24 5 24H7C7.552 24 8 23.552 8 23C8 22.448 7.552 22 7 22ZM19 0H17C16.448 0 16 0.448 16 1C16 1.552 16.448 2 17 2H19C20.654 2 22 3.346 22 5V7C22 7.552 22.448 8 23 8C23.552 8 24 7.552 24 7V5C24 2.243 21.757 0 19 0ZM12 18C7.423 18 4.479 13.979 3.941 12.903C3.654 12.33 3.654 11.673 3.941 11.098C4.478 10.021 7.421 6 12 6C16.579 6 19.522 10.021 20.059 11.098C20.344 11.67 20.344 12.327 20.059 12.9C19.521 13.978 16.578 17.999 11.999 17.999L12 18ZM18.27 11.992C17.942 11.335 15.534 8 12 8C8.466 8 6.058 11.335 5.73 11.992C6.058 12.666 8.467 16 12 16C15.533 16 17.942 12.648 18.27 11.992ZM23 16C22.448 16 22 16.448 22 17V19C22 20.654 20.654 22 19 22H17C16.448 22 16 22.448 16 23C16 23.552 16.448 24 17 24H19C21.757 24 24 21.757 24 19V17C24 16.448 23.552 16 23 16Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
src/assets/icons/seller/qiandaizi.svg
Normal file
3
src/assets/icons/seller/qiandaizi.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.236 4.11975C10.8907 3.594 11.565 2.8875 11.907 2.028C12.0855 1.5795 12.0278 1.07025 11.7533 0.666C11.4705 0.249 11.0017 0 10.5 0H6C5.49825 0 5.0295 0.249 4.74675 0.666C4.47225 1.07025 4.41525 1.5795 4.593 2.028C4.935 2.88675 5.60925 3.594 6.264 4.11975C2.772 5.41575 0 9.86925 0 13.5C0 15.9818 2.01825 18 4.5 18H12C14.4818 18 16.5 15.9818 16.5 13.5C16.5 9.86925 13.728 5.41575 10.236 4.11975ZM10.5128 1.47375C10.1258 2.4465 8.94225 3.2685 8.2485 3.65625C7.55625 3.2715 6.37725 2.45625 5.99925 1.5L10.5128 1.47375ZM11.9993 16.5H4.5C2.8455 16.5 1.5 15.1545 1.5 13.5C1.5 9.56775 5.0325 5.25 8.25 5.25C11.4675 5.25 15 9.56775 15 13.5C15 15.1545 13.6538 16.5 11.9993 16.5ZM8.24925 16.5C7.83525 16.5 7.49925 16.164 7.49925 15.75V15H7.29825C6.49725 15 5.751 14.5695 5.34975 13.8757C5.14275 13.5173 5.265 13.059 5.6235 12.8512C5.9805 12.6435 6.44025 12.7657 6.648 13.125C6.7815 13.356 7.03125 13.5 7.29825 13.5H8.99925C9.4125 13.5 9.74925 13.1632 9.74925 12.75C9.74925 12.4665 9.546 12.2265 9.26625 12.18L6.98475 11.7997C5.979 11.6325 5.2485 10.77 5.2485 9.75C5.2485 8.5095 6.258 7.5 7.4985 7.5V6.75C7.4985 6.336 7.8345 6 8.2485 6C8.6625 6 8.9985 6.336 8.9985 6.75V7.5H9.1995C9.99975 7.5 10.7467 7.93125 11.148 8.625C11.355 8.9835 11.2327 9.44175 10.8742 9.6495C10.5165 9.85725 10.0575 9.735 9.84975 9.37575C9.7155 9.144 9.4665 9.00075 9.1995 9.00075H7.4985C7.08525 9.00075 6.7485 9.3375 6.7485 9.75075C6.7485 10.0343 6.95175 10.2743 7.2315 10.3207L9.513 10.701C10.5188 10.8682 11.2492 11.7307 11.2492 12.7507C11.2492 13.9913 10.2397 15.0007 8.99925 15.0007V15.7507C8.99925 16.1647 8.66325 16.5 8.24925 16.5Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
3
src/assets/icons/seller/search.svg
Normal file
3
src/assets/icons/seller/search.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.7663 18.5889L14.7962 13.6188C16.1506 11.9623 16.8165 9.84866 16.6562 7.71497C16.4959 5.58128 15.5216 3.59083 13.9349 2.15534C12.3482 0.719841 10.2704 -0.0508742 8.13136 0.00260835C5.99233 0.0560909 3.95568 0.929679 2.44268 2.44268C0.929679 3.95568 0.0560909 5.99233 0.00260835 8.13136C-0.0508742 10.2704 0.719841 12.3482 2.15534 13.9349C3.59083 15.5216 5.58128 16.4959 7.71497 16.6562C9.84866 16.8165 11.9623 16.1506 13.6188 14.7962L18.5889 19.7663C18.7459 19.9179 18.9563 20.0019 19.1746 20C19.3929 19.9981 19.6017 19.9105 19.7561 19.7561C19.9105 19.6017 19.9981 19.3929 20 19.1746C20.0019 18.9563 19.9179 18.7459 19.7663 18.5889ZM8.35314 15.0143C7.03568 15.0143 5.74781 14.6237 4.65238 13.8917C3.55695 13.1598 2.70317 12.1194 2.199 10.9023C1.69483 9.6851 1.56292 8.34575 1.81994 7.05361C2.07697 5.76146 2.71138 4.57455 3.64297 3.64297C4.57455 2.71138 5.76146 2.07697 7.05361 1.81994C8.34575 1.56292 9.6851 1.69483 10.9023 2.199C12.1194 2.70317 13.1598 3.55695 13.8917 4.65238C14.6237 5.74781 15.0143 7.03568 15.0143 8.35314C15.0124 10.1192 14.3099 11.8123 13.0611 13.0611C11.8123 14.3099 10.1192 15.0124 8.35314 15.0143Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
src/assets/icons/seller/share.svg
Normal file
3
src/assets/icons/seller/share.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28 16H24C22.5293 16 21.3333 17.196 21.3333 18.6667C21.3333 20.1373 20.1373 21.3333 18.6667 21.3333H13.3333C11.8627 21.3333 10.6667 20.1373 10.6667 18.6667C10.6667 17.196 9.47067 16 8 16H4C1.79467 16 0 17.7947 0 20V25.3333C0 29.0093 2.99067 32 6.66667 32H25.3333C29.0093 32 32 29.0093 32 25.3333V20C32 17.7947 30.2053 16 28 16ZM29.3333 25.3333C29.3333 27.5387 27.5387 29.3333 25.3333 29.3333H6.66667C4.46133 29.3333 2.66667 27.5387 2.66667 25.3333V20C2.66667 19.264 3.264 18.6667 4 18.6667L8 18.664V18.6667C8 21.608 10.392 24 13.3333 24H18.6667C21.608 24 24 21.608 24 18.6667H28C28.736 18.6667 29.3333 19.264 29.3333 20V25.3333ZM9.724 7.05733C9.20267 6.536 9.20267 5.69333 9.724 5.172L14.1147 0.781333C14.6293 0.266667 15.3053 0.008 15.9813 0.004L16 0L16.0187 0.004C16.696 0.008 17.3707 0.266667 17.8853 0.781333L22.276 5.172C22.7973 5.69333 22.7973 6.536 22.276 7.05733C22.016 7.31733 21.6747 7.448 21.3333 7.448C20.992 7.448 20.6507 7.31733 20.3907 7.05733L17.3333 4V13.3333C17.3333 14.0707 16.7373 14.6667 16 14.6667C15.2627 14.6667 14.6667 14.0707 14.6667 13.3333V4L11.6093 7.05733C11.088 7.57867 10.2453 7.57867 9.724 7.05733Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/seller/setting/alipay-chinese.png
Normal file
BIN
src/assets/images/seller/setting/alipay-chinese.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/images/seller/setting/alipay-hk.png
Normal file
BIN
src/assets/images/seller/setting/alipay-hk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/assets/images/seller/setting/paypal.png
Normal file
BIN
src/assets/images/seller/setting/paypal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/images/seller/setting/stripe.png
Normal file
BIN
src/assets/images/seller/setting/stripe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
@@ -44,7 +44,7 @@
|
||||
|
||||
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
|
||||
&::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
||||
@@ -2397,6 +2397,16 @@ textarea:focus{
|
||||
}
|
||||
}
|
||||
|
||||
.mosaic-bg{
|
||||
--mosaic-bg-size: 1rem;
|
||||
--mosaic-bg-color1: #efefef;
|
||||
--mosaic-bg-color2: #fff;
|
||||
background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
|
||||
background-repeat: repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
|
||||
}
|
||||
|
||||
//蒙层样式
|
||||
.mark_loading{
|
||||
position: fixed;
|
||||
|
||||
@@ -266,9 +266,11 @@ export default defineComponent({
|
||||
.account_page{
|
||||
height: 100%;
|
||||
// overflow-y: auto;
|
||||
padding: 0 26rem;
|
||||
// padding: 0 26rem;
|
||||
// padding: 0 7rem;
|
||||
padding-top: 4rem;
|
||||
max-width: 100rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.account_page_titleImg{
|
||||
|
||||
@@ -55,6 +55,7 @@ commandManager.setChangeCallback((info) => {
|
||||
emit("undo-redo-status-changed", {
|
||||
canUndo: canUndo.value,
|
||||
canRedo: canRedo.value,
|
||||
type: info.type,
|
||||
commandManager,
|
||||
});
|
||||
});
|
||||
|
||||
@@ -907,7 +907,8 @@
|
||||
}
|
||||
emit("changeCanvas", commandData)
|
||||
canvasManager.changeCanvas()
|
||||
if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
|
||||
const type = command.type
|
||||
if (props.enabledRedGreenMode && (type === "undo" || type === "redo")) {
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
const imageData = await canvasManager.exportImage({
|
||||
@@ -1040,6 +1041,7 @@
|
||||
},
|
||||
// 导出图片
|
||||
exportImage: async ({
|
||||
isFrontBackUpdata = false, // 更新红绿图时候需要用，直接更新红绿图
|
||||
isContainBg = false, // 是否包含背景图层
|
||||
isContainFixed = false, // 是否包含固定图层
|
||||
isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
|
||||
@@ -1056,6 +1058,10 @@
|
||||
} = {}) => {
|
||||
loading.value = true
|
||||
canvasManager?.canvas?.discardActiveObject()
|
||||
if (isFrontBackUpdata) {
|
||||
await canvasManager?.setSpecialCliptInfo(true, true)
|
||||
canvasManager.canvas.renderAll()
|
||||
}
|
||||
var base64 = await canvasManager.exportImage({
|
||||
isContainBg,
|
||||
isContainFixed,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -180,7 +180,7 @@ export class CommandManager {
|
||||
this._recordPerformance("execute", command.constructor.name, duration);
|
||||
|
||||
// 通知状态变化
|
||||
this._notifyStateChange();
|
||||
this._notifyStateChange("execute");
|
||||
|
||||
console.log(`✅ 命令执行成功: ${command.constructor.name}`);
|
||||
return result;
|
||||
@@ -219,7 +219,7 @@ export class CommandManager {
|
||||
this._recordPerformance("undo", command.constructor.name, duration);
|
||||
|
||||
// 通知状态变化
|
||||
this._notifyStateChange();
|
||||
this._notifyStateChange("undo");
|
||||
|
||||
console.log(`✅ 命令撤销成功: ${command.constructor.name}`);
|
||||
return result;
|
||||
@@ -258,7 +258,7 @@ export class CommandManager {
|
||||
this._recordPerformance("redo", command.constructor.name, duration);
|
||||
|
||||
// 通知状态变化
|
||||
this._notifyStateChange();
|
||||
this._notifyStateChange("redo");
|
||||
|
||||
console.log(`✅ 命令重做成功: ${command.constructor.name}`);
|
||||
return result;
|
||||
@@ -298,7 +298,7 @@ export class CommandManager {
|
||||
|
||||
this.undoStack = [];
|
||||
this.redoStack = [];
|
||||
this._notifyStateChange();
|
||||
this._notifyStateChange("clear");
|
||||
// console.log("📝 命令历史已清空");
|
||||
}
|
||||
|
||||
@@ -417,10 +417,12 @@ export class CommandManager {
|
||||
* 通知状态变化
|
||||
* @private
|
||||
*/
|
||||
_notifyStateChange() {
|
||||
_notifyStateChange(type) {
|
||||
if (this.onStateChange) {
|
||||
try {
|
||||
this.onStateChange(this.getState());
|
||||
const obj = this.getState();
|
||||
obj.type = type;
|
||||
this.onStateChange(obj);
|
||||
} catch (error) {
|
||||
console.error("状态变化回调执行失败:", error);
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@ export class LiquifyRealTimeUpdater {
|
||||
|
||||
if (isDrawing && this.config.useDirectUpdate) {
|
||||
// 拖拽过程中使用快速更新（降低质量以提高性能）
|
||||
this._fastUpdate(imageData);
|
||||
await this._fastUpdate(imageData);
|
||||
} else {
|
||||
// 拖拽结束后使用完整更新（最高质量）
|
||||
await this._fullUpdate(imageData);
|
||||
@@ -124,7 +124,7 @@ export class LiquifyRealTimeUpdater {
|
||||
* @param {ImageData} imageData 图像数据
|
||||
* @private
|
||||
*/
|
||||
_fastUpdate(imageData) {
|
||||
async _fastUpdate(imageData) {
|
||||
if (!this.targetObject || !this.targetObject._element) {
|
||||
return;
|
||||
}
|
||||
@@ -138,12 +138,14 @@ export class LiquifyRealTimeUpdater {
|
||||
|
||||
// 直接更新fabric对象的图像源（使用PNG格式保持质量）
|
||||
const targetElement = this.targetObject._element;
|
||||
|
||||
// 方案1: 直接设置src属性（最高性能）
|
||||
const dataURL = this.tempCanvas.toDataURL("image/png", quality);
|
||||
|
||||
if (targetElement.src !== dataURL) {
|
||||
targetElement.src = dataURL;
|
||||
// targetElement.src = dataURL;
|
||||
const image = new Image();
|
||||
image.src = dataURL;
|
||||
await image.decode();
|
||||
this.targetObject.setElement(image);
|
||||
|
||||
// 关键优化：直接设置fabric对象为脏状态，但不立即渲染
|
||||
// this.targetObject.dirty = false; // 标记为不需要立即渲染
|
||||
|
||||
@@ -447,6 +447,7 @@
|
||||
</template>
|
||||
</CanvasEditor>
|
||||
</div>
|
||||
<img src="" alt="" id="canvas-test-dom">
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
@@ -458,6 +459,13 @@
|
||||
height: 600px !important;
|
||||
z-index: 99999999;
|
||||
}
|
||||
#canvas-test-dom{
|
||||
position: fixed;
|
||||
z-index: 9999999999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
* {
|
||||
|
||||
@@ -163,7 +163,6 @@ export default defineComponent({
|
||||
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
||||
// if(!detailDom.editCanvas)return
|
||||
return new Promise(async (res,reject)=>{
|
||||
console.log(detailDom.editCanvas)
|
||||
await detailDom.editCanvas.exportImage({
|
||||
isContainFixed:true,
|
||||
width:props.sketchSize.width,
|
||||
@@ -245,17 +244,27 @@ export default defineComponent({
|
||||
|
||||
|
||||
const frontBackChange = async (value:any)=>{
|
||||
let front = detailData.frontBack.front[detailData.imgDomIndex]
|
||||
let back = detailData.frontBack.back[detailData.imgDomIndex]
|
||||
store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
||||
await nextTick()
|
||||
if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
|
||||
await privewDetail()
|
||||
}else{
|
||||
await detailDom.editCanvas.exportImage({
|
||||
isFrontBackUpdata: true,
|
||||
isContainFixed:true,
|
||||
width:props.sketchSize.width,
|
||||
height:props.sketchSize.height,
|
||||
}).then((rv)=>{
|
||||
if(detailData.selectDetail?.partialDesign)detailData.selectDetail.partialDesign.partialDesignBase64 = rv
|
||||
})
|
||||
}
|
||||
let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath || detailData.selectDetail.path
|
||||
let size = {
|
||||
...detailData.canvasConfig,
|
||||
}
|
||||
store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
||||
segmentImage(value,full,size).then(async (rv)=>{
|
||||
let front = detailData.frontBack.front[detailData.imgDomIndex]
|
||||
let back = detailData.frontBack.back[detailData.imgDomIndex]
|
||||
if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
|
||||
if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
|
||||
if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
|
||||
@@ -267,7 +276,6 @@ export default defineComponent({
|
||||
back.imageUrl = rv.targetBackUrl
|
||||
// store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
||||
})
|
||||
|
||||
}
|
||||
const editSketchCanvasInit = async (value:any)=>{
|
||||
detailData.canvasInstance = value
|
||||
|
||||
@@ -393,8 +393,8 @@ export default defineComponent({
|
||||
angle: 0,
|
||||
flipX: false,
|
||||
flipY: false,
|
||||
// blendMode: "multiply",
|
||||
blendMode: "source-over",
|
||||
blendMode: "multiply",
|
||||
// blendMode: "source-over",
|
||||
gapX: 0,
|
||||
gapY: 0,
|
||||
}
|
||||
|
||||
@@ -531,7 +531,7 @@ export default defineComponent({
|
||||
}
|
||||
)
|
||||
const setSpeed = (item: any) => {
|
||||
speed.speedData = item
|
||||
speed.speedData = {...item}
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.msg == 'Sketchboard') {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<!-- <div class="newPosted_generalMessage_title_setting pointer" @click="allRead">全部已读</div> -->
|
||||
</div>
|
||||
<div class="newPosted_generalMessage_center modal_title_text">
|
||||
<div class="newPosted_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
||||
<div class="newPosted_generalMessage_item" v-for="item in dataList" :key="item.id">
|
||||
<!-- <a-badge :dot="item.isRead == 0"></a-badge> -->
|
||||
<div class="newPosted_generalMessage_item_right">
|
||||
<div class="newPosted_generalMessage_item_img pointer" @click="openOtherUsers(item)">
|
||||
|
||||
@@ -205,7 +205,7 @@
|
||||
</div>
|
||||
<div class="payment">
|
||||
<div class="allocation">
|
||||
<div class="selectType">
|
||||
<!-- <div class="selectType">
|
||||
<div class="text">{{ $t('Renew.Payment') }}:</div>
|
||||
<label>
|
||||
<input
|
||||
@@ -227,7 +227,7 @@
|
||||
/>
|
||||
{{ $t('Renew.Alipay') }}
|
||||
</label>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="payment">
|
||||
{{ $t('upgradePlan.Continue') }}
|
||||
|
||||
@@ -77,17 +77,10 @@ export default defineComponent({
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 80%;
|
||||
height: auto;
|
||||
max-height: 80vh;
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
video{
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
width: max-content;
|
||||
max-height:80vh;
|
||||
max-width:80vw;
|
||||
}
|
||||
.general_video_btn{
|
||||
color: #fff;
|
||||
|
||||
@@ -41,10 +41,10 @@
|
||||
<div class="center">{{ selectObject?.styleName?selectObject?.styleName:$t('Header.All') }}</div>
|
||||
<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||||
</div>
|
||||
<div class="style brand marginBottom">
|
||||
<!-- <div class="style brand marginBottom">
|
||||
<div class="text">{{$t('Habit.Brand')}}:</div>
|
||||
<div class="gallery_btn" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="brandImg" v-if="selectObject.userBrandDna"><img :src="selectObject.userBrandDnaImg"></div>
|
||||
<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
|
||||
<div class="text" style="font-size: 1.6rem;">
|
||||
|
||||
@@ -227,13 +227,13 @@ const routes: Array<RouteRecordRaw> = [
|
||||
path: "myOrders",
|
||||
name: "myOrders",
|
||||
meta: { enter: "all" },
|
||||
component: () => import("@/views/SellerDashboard/BrandProfile/index.vue")
|
||||
component: () => import("@/views/SellerDashboard/MyOrders/index.vue")
|
||||
},
|
||||
{
|
||||
path: "settings",
|
||||
name: "settings",
|
||||
meta: { enter: "all" },
|
||||
component: () => import("@/views/SellerDashboard/BrandProfile/index.vue")
|
||||
component: () => import("@/views/SellerDashboard/Settings/index.vue")
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -340,12 +340,12 @@ const navTypeList = (t)=>{
|
||||
value:'Models',
|
||||
router:'library=Models'
|
||||
},
|
||||
{
|
||||
icon:'fi-ss-gem',
|
||||
label:t('LibraryPage.brandDNA'),
|
||||
value:'MyBrand',
|
||||
router:'library=MyBrand'
|
||||
},
|
||||
// {
|
||||
// icon:'fi-ss-gem',
|
||||
// label:t('LibraryPage.brandDNA'),
|
||||
// value:'MyBrand',
|
||||
// router:'library=MyBrand'
|
||||
// },
|
||||
]
|
||||
},
|
||||
// history:{
|
||||
|
||||
@@ -116,8 +116,18 @@
|
||||
() => props.isEdit,
|
||||
(v) => (v ? edit() : cancel())
|
||||
)
|
||||
const edit = () => {}
|
||||
const 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 () => {
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return Promise.reject(false)
|
||||
|
||||
166
src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
Normal file
166
src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="image-clip-dialog generalModel"
|
||||
v-model:visible="show"
|
||||
:footer="null"
|
||||
width="70%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="image-clip-dialog-box">
|
||||
<div class="header">
|
||||
<div class="title">{{ data.title }}</div>
|
||||
<div class="right">
|
||||
<div class="submit" v-if="!data.isPreview" @click="onSubmit">
|
||||
<svg-icon name="seller-dui" size="24" />
|
||||
</div>
|
||||
<button @click="onCancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<image-clip
|
||||
ref="imageClipRef"
|
||||
:ratio="data.ratio"
|
||||
:url="data.url"
|
||||
@change="(v) => (data.preview_url = v)"
|
||||
/>
|
||||
<div class="preview" v-if="data.isPreview">
|
||||
<div class="title">
|
||||
<span class="icon"><svg-icon name="seller-preview" size="24" /></span>
|
||||
<span class="label">Crop Preview</span>
|
||||
</div>
|
||||
<img :src="data.preview_url" />
|
||||
<div class="submit" @click="onSubmit">
|
||||
<svg-icon name="seller-dui" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import ImageClip from "./image-clip.vue"
|
||||
const data = reactive({
|
||||
url: "",
|
||||
title: "Crop Image",
|
||||
preview_url: "",
|
||||
ratio: [1, 1],
|
||||
isPreview: true,
|
||||
callback: null
|
||||
})
|
||||
const show = ref(false)
|
||||
const open = (url, callback, options) => {
|
||||
if (!url || !callback) return
|
||||
data.url = url
|
||||
data.callback = callback
|
||||
data.ratio = [1, 1]
|
||||
data.isPreview = true
|
||||
data.preview_url = ""
|
||||
data.title = "Crop Image"
|
||||
if (options) {
|
||||
if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
|
||||
if (options.hasOwnProperty("ratio")) data.ratio = options.ratio
|
||||
if (options.hasOwnProperty("title")) data.title = options.title
|
||||
}
|
||||
show.value = true
|
||||
}
|
||||
const onCancel = () => {
|
||||
show.value = false
|
||||
}
|
||||
const imageClipRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
imageClipRef.value.getCropBlob().then((blob) => {
|
||||
if (data.callback) data.callback(blobToFile(blob, "image.png"))
|
||||
onCancel()
|
||||
})
|
||||
}
|
||||
// 将blob转换为file对象
|
||||
const blobToFile = (blob, fileName) => {
|
||||
return new File([blob], fileName, { type: blob.type })
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.image-clip-dialog-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.submit {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 50%;
|
||||
background: #262626;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5rem;
|
||||
> .title {
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 2.4rem;
|
||||
color: #595959;
|
||||
}
|
||||
> .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
> button {
|
||||
width: 10rem;
|
||||
height: 4.8rem;
|
||||
border-radius: 4rem;
|
||||
border: none;
|
||||
background: #e4e5eb;
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .image-clip {
|
||||
flex: 1;
|
||||
}
|
||||
> .preview {
|
||||
margin-left: 6rem;
|
||||
width: 28rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2.4rem;
|
||||
> .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.2rem;
|
||||
> .label {
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/views/SellerDashboard/BrandProfile/image-clip.vue
Normal file
157
src/views/SellerDashboard/BrandProfile/image-clip.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="image-clip">
|
||||
<div class="image-clip-body" ref="imageClipBody">
|
||||
<VueCropper
|
||||
ref="cropper"
|
||||
:img="url"
|
||||
crossOrigin="Anonymous"
|
||||
:autoCrop="true"
|
||||
:fixedNumber="ratio"
|
||||
fixed
|
||||
movable
|
||||
centerBox
|
||||
@realTime="onChange"
|
||||
></VueCropper>
|
||||
</div>
|
||||
<div class="clip_opterate">
|
||||
<div class="item" @click="rotateLeft()">
|
||||
<span class="icon iconfont icon-chexiao operate_icon"></span>
|
||||
</div>
|
||||
<div class="item" @click="rotateRight()">
|
||||
<span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span>
|
||||
</div>
|
||||
<div class="item" @click="changeScale(-0.1)">
|
||||
<span class="operate_icon icon_font">-</span>
|
||||
</div>
|
||||
<div class="item" @click="changeScale(0.1)">
|
||||
<span class="operate_icon icon_font">+</span>
|
||||
</div>
|
||||
<div class="item" @click="refreshCrop()">
|
||||
<span class="icon iconfont icon-shuaxin operate_icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, useAttrs, onMounted, onBeforeUnmount } from "vue"
|
||||
import "vue-cropper/dist/index.css"
|
||||
import { VueCropper } from "vue-cropper"
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
ratio: {
|
||||
type: Array,
|
||||
default: () => [1, 1]
|
||||
}
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
|
||||
const onChange = (data) => {
|
||||
if (attrs.onChange) {
|
||||
getCropUrl().then((url) => attrs.onChange(url))
|
||||
}
|
||||
}
|
||||
const cropper = ref(null)
|
||||
const imageClipBody = ref(null)
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
refreshCrop()
|
||||
})
|
||||
onMounted(() => {
|
||||
observer.observe(imageClipBody.value)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
observer.disconnect()
|
||||
})
|
||||
const rotateLeft = () => {
|
||||
cropper.value.rotateLeft()
|
||||
}
|
||||
const rotateRight = () => {
|
||||
cropper.value.rotateRight()
|
||||
}
|
||||
const refreshCrop = () => {
|
||||
cropper.value.refresh()
|
||||
}
|
||||
const changeScale = (num = 1) => {
|
||||
cropper.value.changeScale(num)
|
||||
}
|
||||
const getCropUrl = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
cropper.value.getCropData(resolve)
|
||||
})
|
||||
}
|
||||
const getCropBlob = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
cropper.value.getCropBlob(resolve)
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
getCropUrl,
|
||||
getCropBlob
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.image-clip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: 100%;
|
||||
background: #fff;
|
||||
border-radius: calc(2rem * 1.2);
|
||||
padding: calc(1.3rem * 1.2) calc(1.3rem * 1.2) calc(2rem * 1.2);
|
||||
box-sizing: border-box;
|
||||
|
||||
.image-clip-body {
|
||||
width: 100%;
|
||||
height: calc(40rem * 1.2);
|
||||
// height: 53rem;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.clip_opterate {
|
||||
margin: calc(2.7rem * 1.2) auto 0;
|
||||
border-radius: calc(1.6rem * 1.2);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e2e4;
|
||||
width: calc(24rem * 1.2);
|
||||
|
||||
.item {
|
||||
width: calc(4.7rem * 1.2);
|
||||
height: calc(4rem * 1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 0.1rem solid #e6e8ea;
|
||||
cursor: pointer;
|
||||
|
||||
.icon_chexiao_sec {
|
||||
transform: rotateY(180deg); /* 垂直镜像翻转 */
|
||||
}
|
||||
|
||||
.operate_icon {
|
||||
font-size: calc(1.8rem * 1.2);
|
||||
color: rgba(102, 102, 102, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon_font {
|
||||
font-size: calc(2.5rem * 1.2);
|
||||
position: relative;
|
||||
top: calc(-0.3rem * 1.2);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.icon-shuaxin {
|
||||
font-size: calc(1.4rem * 1.2);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="brand-profile-index">
|
||||
<div class="brand-profile-index mini-scrollbar">
|
||||
<div class="header">
|
||||
<div class="bg">
|
||||
<img v-if="banner" :src="banner" />
|
||||
@@ -7,7 +7,7 @@
|
||||
<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>
|
||||
<button @click="onChangeBanner">Change Brand Banner</button>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<div class="avatar">
|
||||
@@ -15,7 +15,7 @@
|
||||
<div v-else class="null">
|
||||
<svg-icon name="seller-user" size="48" />
|
||||
</div>
|
||||
<span class="icon">
|
||||
<span class="icon" @click="onChangeAvatar">
|
||||
<svg-icon name="seller-camera" size="24" />
|
||||
</span>
|
||||
</div>
|
||||
@@ -37,15 +37,56 @@
|
||||
<p class="tip"> </p>
|
||||
</template>
|
||||
</div>
|
||||
<image-clip-dialog ref="imageClipDialogRef" />
|
||||
</template>
|
||||
|
||||
<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")
|
||||
import ImageClipDialog from "./image-clip-dialog.vue"
|
||||
const banner = ref("")
|
||||
const avatar = ref("")
|
||||
const isEdit = ref(false)
|
||||
const brandInfoRef = ref(null)
|
||||
const imageClipDialogRef = ref(null)
|
||||
|
||||
// 选择本机图片
|
||||
const uploadImg = (onChange) => {
|
||||
const input = document.createElement("input")
|
||||
input.type = "file"
|
||||
input.accept = "image/*"
|
||||
// 监听文件输入框的变化事件
|
||||
input.addEventListener("change", (event) => {
|
||||
event.preventDefault()
|
||||
const file = event.target.files[0]
|
||||
const url = URL.createObjectURL(file)
|
||||
onChange({ url, file })
|
||||
})
|
||||
input.click()
|
||||
}
|
||||
|
||||
const onChangeBanner = () => {
|
||||
uploadImg(({ url }) => {
|
||||
imageClipDialogRef.value.open(
|
||||
url,
|
||||
(file) => {
|
||||
banner.value = URL.createObjectURL(file)
|
||||
},
|
||||
{ ratio: [40, 7], isPreview: false, title: "Crop Brand Banner" }
|
||||
)
|
||||
})
|
||||
}
|
||||
const onChangeAvatar = () => {
|
||||
uploadImg(({ url }) => {
|
||||
imageClipDialogRef.value.open(
|
||||
url,
|
||||
(file) => {
|
||||
avatar.value = URL.createObjectURL(file)
|
||||
},
|
||||
{ ratio: [1, 1], isPreview: true, title: "Crop Avatar" }
|
||||
)
|
||||
})
|
||||
}
|
||||
const onEdit = () => {
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
@@ -0,0 +1,227 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
const emit = defineEmits([
|
||||
'selectCollectionItem',
|
||||
])
|
||||
const current = ref(1)
|
||||
const list = ref([
|
||||
{
|
||||
imgList:[
|
||||
{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},
|
||||
],
|
||||
type:'Series',
|
||||
name:'Christmas',
|
||||
sketchNum: 7,
|
||||
date: 'today',
|
||||
id:'1',
|
||||
},{
|
||||
imgList:[
|
||||
{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},
|
||||
],
|
||||
type:'Series',
|
||||
name:'Christmas',
|
||||
sketchNum: 7,
|
||||
date: 'today',
|
||||
id:'2',
|
||||
},{
|
||||
imgList:[
|
||||
{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},
|
||||
],
|
||||
type:'Series',
|
||||
name:'Christmas',
|
||||
sketchNum: 7,
|
||||
date: 'today',
|
||||
id:'1',
|
||||
},{
|
||||
imgList:[
|
||||
{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},
|
||||
],
|
||||
type:'Series',
|
||||
name:'Christmas',
|
||||
sketchNum: 7,
|
||||
date: 'today',
|
||||
id:'1',
|
||||
},
|
||||
])
|
||||
|
||||
const selectCollectionItem = (item:any)=>{
|
||||
emit('selectCollectionItem',item)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
</script>
|
||||
<template>
|
||||
<div class="historyList">
|
||||
<div class="list">
|
||||
<div v-for="(item,index) in list" :key="index" class="item" @click="selectCollectionItem(item)">
|
||||
<div class="imgList">
|
||||
<div v-for="(img,index) in item.imgList" :key="index" class="img">
|
||||
<img :src="img.url" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="name">{{item.name}}</div>
|
||||
<div class="bottom">
|
||||
<div>{{item.sketchNum}} sketchs</div>
|
||||
<div>{{item.date}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type" :class="item.type">
|
||||
{{item.type}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<a-pagination v-model:current="current" :pageSize="6" :showSizeChanger="false" show-quick-jumper :total="100" show-less-items />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.historyList{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 3rem;
|
||||
> .list{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
row-gap: 2.4rem; /* 垂直间距 3px */
|
||||
column-gap: 3.2rem; /* 横向间距 2px */
|
||||
align-content: start;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
> .item{
|
||||
width: 42.6rem;
|
||||
height: auto;
|
||||
// height: 27.6rem;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 2rem;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
> .imgList{
|
||||
background-color: #eaeaea;
|
||||
height: 19.2rem;
|
||||
padding: 1rem 1.3rem;
|
||||
display: flex;
|
||||
gap: .4rem;
|
||||
> .img{
|
||||
width: 9.7rem;
|
||||
height: 17.2rem;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
> img{
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .detail{
|
||||
padding: 2rem 2.4rem;
|
||||
> .name{
|
||||
font-family: pingfang_heavy;
|
||||
font-weight: 400;
|
||||
font-size: 1.797rem;
|
||||
line-height: 1;
|
||||
}
|
||||
> .bottom{
|
||||
display: flex;
|
||||
margin-top: .8rem;
|
||||
justify-content: space-between;
|
||||
> div{
|
||||
font-size: 1.2rem;
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
color: #585858;
|
||||
}
|
||||
> div:nth-child(2){
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .type{
|
||||
width: 7.6rem;
|
||||
height: 3rem;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid #727070;
|
||||
background: #7E7C7C;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.Series{
|
||||
|
||||
}
|
||||
&.Single{
|
||||
background-color: #ffffff;
|
||||
color: #727070;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 1.5px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .pagination{
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
import historyList from "./historyList.vue"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
})
|
||||
const searchType = ref('all')
|
||||
const searchText = ref('')
|
||||
|
||||
const historyListRef = ref(null)
|
||||
const handleSearch = () => {
|
||||
}
|
||||
const selectCollectionItem = (item:any) => {
|
||||
router.push({path:'/home/seller/myListings/select/'+item.id})
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -26,7 +38,27 @@ const {} = toRefs(data);
|
||||
>
|
||||
</seller-header>
|
||||
<div class="content">
|
||||
1231222aaa
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div :class="{active:searchType == 'all'}" @click="searchType = 'all'">All</div>
|
||||
<div :class="{active:searchType == 'series'}" @click="searchType = 'series'">Series Design</div>
|
||||
<div :class="{active:searchType == 'single'}" @click="searchType = 'single'">Single Design</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="search_input flex flex-align-center">
|
||||
<input
|
||||
class="search_input_inner"
|
||||
v-model="searchText"
|
||||
:bordered="false"
|
||||
@keydown.enter="handleSearch"
|
||||
placeholder="123123"
|
||||
/>
|
||||
<!-- <SearchOutlined class="search_input_icon" @click="handleSearch" /> -->
|
||||
<SvgIcon name="CSearch" size="20" class="search_input_icon" @click="handleSearch" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<historyList ref="historyListRef" @selectCollectionItem="selectCollectionItem"></historyList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -42,6 +74,71 @@ const {} = toRefs(data);
|
||||
margin-top: 2rem;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 2.4rem 3rem;
|
||||
background-color: #f9fafa;
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
> div{
|
||||
min-width: 9rem;
|
||||
padding: .4rem 2.6rem;
|
||||
background-color: #fff;
|
||||
border-radius: 4rem;
|
||||
border: 1px solid #000000;
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
}
|
||||
> .active{
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
.search_input {
|
||||
height: 3.2rem;
|
||||
width: 27rem; // 默认宽度
|
||||
background-color: #fff;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3rem;
|
||||
// column-gap: 3rem;
|
||||
padding: 0 2rem;
|
||||
.search_input_inner {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: calc(100% - 2rem);
|
||||
padding: .6rem 0;
|
||||
font-size: 1.2rem;
|
||||
&::placeholder {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
&::-webkit-input-placeholder{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.search_input_icon {
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
import { VueDraggable } from "vue-draggable-plus"
|
||||
import selectMenu from '@/component/modules/selectMenu.vue'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -8,7 +10,101 @@ import sellerHeader from "../../seller-header.vue"
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const domSize = ref('Small')
|
||||
const domSizeList = ref([
|
||||
{
|
||||
label:'Small',
|
||||
value:'Small',
|
||||
},
|
||||
{
|
||||
label:'Medium',
|
||||
value:'Medium',
|
||||
},
|
||||
{
|
||||
label:'Large',
|
||||
value:'Large',
|
||||
},
|
||||
])
|
||||
const list = ref([
|
||||
{ id: "1" },
|
||||
{ id: "2" },
|
||||
{ id: "3" },
|
||||
{ id: "4" },
|
||||
{ id: "5" },
|
||||
{ id: "6" },
|
||||
{ id: "7" },
|
||||
{ id: "8" },
|
||||
{ id: "9" },
|
||||
{ id: "10" }
|
||||
])
|
||||
const chooseList = ref([])
|
||||
const chooseItem = (item:any)=>{
|
||||
chooseList.value.push(item)
|
||||
}
|
||||
|
||||
const next = ()=>{
|
||||
if(chooseList.value.length == 0)return
|
||||
}
|
||||
|
||||
const config = ref({
|
||||
"data-container-type": "root",
|
||||
"data-parent-id": "null",
|
||||
animation: 250,
|
||||
handle: ".item", // 可拖动的元素
|
||||
"ghost-class": "ghost", // 拖动时的类名
|
||||
"chosen-class": "chosen", // 选中时的类名
|
||||
"drag-class": "drag", // 拖动时的类名
|
||||
"swap-threshold": 0.5,
|
||||
"empty-insert-threshold": 5,
|
||||
"force-fallback": false,
|
||||
"fallback-tolerance": 3,
|
||||
"scroll-sensitivity": 100,
|
||||
"scroll-speed": 10,
|
||||
onEnd: (e) => {}
|
||||
})
|
||||
|
||||
|
||||
let resizeObserver = null as any
|
||||
|
||||
const gap = ref({
|
||||
Small: '16px',
|
||||
Medium: '24px',
|
||||
Large: '30px',
|
||||
})
|
||||
//根据宽度设置列表宽度
|
||||
let upDataDomWidthTime = null as any
|
||||
const listingsBoxRef = ref(null) as any
|
||||
const setDomSize = (width: number)=>{
|
||||
if(!listingsBoxRef.value)return
|
||||
let listDom = listingsBoxRef.value.querySelector('.list')
|
||||
let listItemDom = listDom.querySelector('.item')
|
||||
let offsetWidth = listItemDom.getBoundingClientRect().width
|
||||
let lineNum = Math.floor(width / offsetWidth)
|
||||
let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
|
||||
listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
|
||||
}
|
||||
|
||||
const changeDomSize = ()=>{
|
||||
setTimeout(()=>{
|
||||
setDomSize(listingsBoxRef.value.clientWidth)
|
||||
},350)
|
||||
}
|
||||
onMounted(()=>{
|
||||
// 创建观察器
|
||||
nextTick(()=>{
|
||||
resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
// 获取元素尺寸
|
||||
const width = entry.contentRect.width
|
||||
if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
|
||||
upDataDomWidthTime = setTimeout(()=>{
|
||||
setDomSize(width)
|
||||
},200)
|
||||
}
|
||||
})
|
||||
// 开始监听
|
||||
if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
@@ -25,9 +121,95 @@ const {} = toRefs(data);
|
||||
{title:'Select Sketch', name: 'myListingsSelectItem' }
|
||||
]"
|
||||
>
|
||||
<template #right>
|
||||
<div class="header-right">
|
||||
<div class="chooseNum">
|
||||
{{ chooseList.length }} sketches selected
|
||||
</div>
|
||||
<div class="button" @click="next">
|
||||
<span>Next</span>
|
||||
<div class="icon">
|
||||
<i class="fi fi-rr-arrow-small-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</seller-header>
|
||||
<div class="content">
|
||||
1231222aaa
|
||||
<div class="content" ref="listingsBoxRef">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<span>Active Listings</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="generalModel_state">
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'border-right':'2px solid rgba(0,0,0,.2)',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Filter') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Size') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VueDraggable
|
||||
v-model="list"
|
||||
class="list"
|
||||
:class="domSize"
|
||||
v-bind="config"
|
||||
:style="{gap: gap[domSize] || '1.6rem'}"
|
||||
:group="{
|
||||
name: 'sortable',
|
||||
pull: false,
|
||||
put: true
|
||||
}"
|
||||
>
|
||||
<div v-for="v in list" :key="v.id"
|
||||
:draging="true"
|
||||
class="item"
|
||||
@click="chooseItem(v)"
|
||||
:class="{'active':chooseList.some(item => item.id === v.id)}"
|
||||
>
|
||||
<div class="choose">
|
||||
<i class="fi fi-rr-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -39,10 +221,143 @@ const {} = toRefs(data);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header-right{
|
||||
display: flex;
|
||||
.chooseNum{
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 140%;
|
||||
margin-right: 2rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
.button {
|
||||
width: 12.3rem;
|
||||
height: 6rem;
|
||||
border-radius: 4rem;
|
||||
display: flex;
|
||||
border: 1.5px solid #000000;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
transition: all .3s;
|
||||
gap: .8rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
i{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
i{
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .content {
|
||||
margin-top: 2rem;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 2.4rem 3rem;
|
||||
background-color: #f9fafa;
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
> .left{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: pingfang_heavy;
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
line-height: 130%;
|
||||
letter-spacing: 0%;
|
||||
gap: 1.2rem;
|
||||
> i{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&.Small{
|
||||
--itemWidth: 17rem;
|
||||
--itemHeight: 26.1rem;
|
||||
--iconFS: 1.4rem;
|
||||
--iconWH: 2.4rem;
|
||||
--iconTR: 1.2rem;
|
||||
}
|
||||
&.Medium{
|
||||
--itemWidth: 22.6rem;
|
||||
--itemHeight: 34.6rem;
|
||||
--iconFS: 1.6rem;
|
||||
--iconWH: 3rem;
|
||||
--iconTR: 1.4rem;
|
||||
}
|
||||
&.Large{
|
||||
--itemWidth: 29.2rem;
|
||||
--itemHeight: 44.8rem;
|
||||
--iconFS: 2.2rem;
|
||||
--iconWH: 4rem;
|
||||
--iconTR: 1.62rem;
|
||||
}
|
||||
> .item{
|
||||
width: var(--itemWidth);
|
||||
height: var(--itemHeight);
|
||||
border-radius: 2rem;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
// transition: all .3s;
|
||||
position: relative;
|
||||
> .choose{
|
||||
display: flex;
|
||||
width: var(--iconWH);
|
||||
height: var(--iconWH);
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: var(--iconTR);
|
||||
right: var(--iconTR);
|
||||
> i{
|
||||
color: #fff;
|
||||
font-size: var(--iconFS);
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
border: 1.5px solid #000;
|
||||
> .choose{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 1.5px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { VueDraggable } from "vue-draggable-plus"
|
||||
import contentItem from "./contentItem.vue"
|
||||
import selectMenu from '@/component/modules/selectMenu.vue'
|
||||
import deleteDrafts from './deleteDrafts.vue'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -19,11 +22,6 @@ const list = ref([
|
||||
{ id: "7" },
|
||||
{ id: "8" },
|
||||
{ id: "9" },
|
||||
{ id: "9" },
|
||||
{ id: "9" },
|
||||
{ id: "9" },
|
||||
{ id: "9" },
|
||||
{ id: "9" },
|
||||
{ id: "10" }
|
||||
])
|
||||
const list2 = ref([
|
||||
@@ -54,9 +52,99 @@ const config = ref({
|
||||
"scroll-speed": 10,
|
||||
onEnd: (e) => {}
|
||||
})
|
||||
const domSize = ref('Small')
|
||||
const domSizeList = ref([
|
||||
{
|
||||
label:'Small',
|
||||
value:'Small',
|
||||
},
|
||||
{
|
||||
label:'Medium',
|
||||
value:'Medium',
|
||||
},
|
||||
{
|
||||
label:'Large',
|
||||
value:'Large',
|
||||
},
|
||||
])
|
||||
|
||||
const visible = ref(false)
|
||||
const deleteDraftsRef = ref(null)
|
||||
|
||||
const deleteDraft = (item: any)=>{
|
||||
deleteDraftsRef.value.open(()=>{
|
||||
list2.value = list2.value.filter((v: any)=>v.id != item.id)
|
||||
})
|
||||
}
|
||||
|
||||
const draftListing = (item: any)=>{
|
||||
//数组前面添加item
|
||||
list2.value.unshift(item)
|
||||
list.value = list.value.filter((v: any)=>v.id != item.id)
|
||||
}
|
||||
|
||||
const publishListing = (item: any)=>{
|
||||
list.value.unshift(item)
|
||||
list2.value = list2.value.filter((v: any)=>v.id != item.id)
|
||||
}
|
||||
|
||||
const editListing = (item: any)=>{
|
||||
}
|
||||
|
||||
|
||||
const listingsBoxRef = ref(null) as any
|
||||
let resizeObserver = null as any
|
||||
|
||||
const gap = ref({
|
||||
Small: '16px',
|
||||
Medium: '24px',
|
||||
Large: '30px',
|
||||
})
|
||||
|
||||
//根据宽度设置列表宽度
|
||||
let upDataDomWidthTime = null
|
||||
const setDomSize = (width: number)=>{
|
||||
if(!listingsBoxRef.value)return
|
||||
let listDom = listingsBoxRef.value.querySelector('.list')
|
||||
let listItemDom = listDom.querySelector('.item')
|
||||
let offsetWidth = listItemDom.getBoundingClientRect().width
|
||||
let lineNum = Math.floor(width / offsetWidth)
|
||||
let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
|
||||
listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
|
||||
}
|
||||
|
||||
const changeDomSize = ()=>{
|
||||
setTimeout(()=>{
|
||||
setDomSize(listingsBoxRef.value.clientWidth)
|
||||
},350)
|
||||
}
|
||||
|
||||
const unfoldDrafits = ()=>{
|
||||
data.showDrafts = !data.showDrafts
|
||||
}
|
||||
onMounted(()=>{
|
||||
// 创建观察器
|
||||
nextTick(()=>{
|
||||
resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
// 获取元素尺寸
|
||||
const width = entry.contentRect.width
|
||||
const height = entry.contentRect.height
|
||||
const borderBoxSize = entry.borderBoxSize[0] // 包含边框
|
||||
const contentBoxSize = entry.contentBoxSize[0] // 内容区域
|
||||
if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
|
||||
upDataDomWidthTime = setTimeout(()=>{
|
||||
setDomSize(width)
|
||||
},200)
|
||||
}
|
||||
})
|
||||
// 开始监听
|
||||
if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
// 停止监听
|
||||
if(listingsBoxRef?.value)resizeObserver?.unobserve(listingsBoxRef?.value)
|
||||
})
|
||||
defineExpose({})
|
||||
const { showDrafts } = toRefs(data);
|
||||
@@ -64,19 +152,62 @@ const { showDrafts } = toRefs(data);
|
||||
<template>
|
||||
<div class="listings">
|
||||
<div class="listingsBox listingsBox1">
|
||||
<div class="box">
|
||||
<div class="box" :class="domSize" ref="listingsBoxRef">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<span>Active Listings</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
||||
<div class="generalModel_state">
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'border-right':'2px solid rgba(0,0,0,.2)',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Filter') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Size') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VueDraggable
|
||||
v-model="list"
|
||||
class="list"
|
||||
:style="{gap: gap[domSize] || '1.6rem'}"
|
||||
v-bind="config"
|
||||
:group="{
|
||||
name: 'sortable',
|
||||
@@ -84,20 +215,33 @@ const { showDrafts } = toRefs(data);
|
||||
put: true
|
||||
}"
|
||||
>
|
||||
<div class="item" v-for="v in list" :key="v.id" :draging="true">
|
||||
{{ v.id }}
|
||||
</div>
|
||||
|
||||
<contentItem
|
||||
v-for="v in list"
|
||||
:key="v.id"
|
||||
:item="v"
|
||||
type="listings"
|
||||
:domSize="domSize"
|
||||
@draftListing="draftListing"
|
||||
@editListing="editListing"
|
||||
/>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="showDrafts = !showDrafts">
|
||||
<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="unfoldDrafits">
|
||||
<span class="icon iconfont icon-xiala"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
|
||||
<div class="box">
|
||||
<div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
|
||||
<div class="box Small">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<span>Drafts</span>
|
||||
</div>
|
||||
</div>
|
||||
<VueDraggable
|
||||
v-model="list2"
|
||||
class="list"
|
||||
class="list2"
|
||||
v-bind="config"
|
||||
:group="{
|
||||
name: 'sortable',
|
||||
@@ -105,12 +249,20 @@ const { showDrafts } = toRefs(data);
|
||||
put: true
|
||||
}"
|
||||
>
|
||||
<div class="item" v-for="v in list" :key="v.id" :draging="true">
|
||||
{{ v.id }}
|
||||
</div>
|
||||
<contentItem
|
||||
v-for="v in list2"
|
||||
:key="v.id"
|
||||
:item="v"
|
||||
domSize="Small"
|
||||
type="drafts"
|
||||
@deleteDraft="deleteDraft"
|
||||
@editListing="editListing"
|
||||
@publishListing="publishListing"
|
||||
/>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<deleteDrafts ref="deleteDraftsRef" v-model:visible="visible"></deleteDrafts>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
@@ -123,16 +275,19 @@ const { showDrafts } = toRefs(data);
|
||||
.listingsBox{
|
||||
background-color: #f9fafa;
|
||||
border-radius: 2rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
// overflow: hidden;
|
||||
display: flex;
|
||||
transition: all .3s;
|
||||
.box{
|
||||
width: 100%;
|
||||
padding: 2.4rem 4rem;
|
||||
padding: 2.4rem 0;
|
||||
padding-bottom: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2.4rem 4rem;
|
||||
> .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -148,6 +303,7 @@ const { showDrafts } = toRefs(data);
|
||||
line-height: 130%;
|
||||
letter-spacing: 0%;
|
||||
gap: 1.2rem;
|
||||
align-content: flex-start;
|
||||
> i{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -156,34 +312,32 @@ const { showDrafts } = toRefs(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
.list2{
|
||||
gap: 1.6rem;
|
||||
width: 100%;
|
||||
.item{
|
||||
width: 19.2rem;
|
||||
}
|
||||
}
|
||||
.list,.list2{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
.item{
|
||||
width: 197px;
|
||||
height: 249px;
|
||||
border-radius: 20px;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
&:hover{
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
// flex: 1;
|
||||
margin: 0 auto;
|
||||
align-items: flex-start;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.listingsBox1{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.box{
|
||||
.list{
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.listingsBox2{
|
||||
width: 48.8rem;
|
||||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
&.active{
|
||||
width: 0;
|
||||
|
||||
225
src/views/SellerDashboard/MyListings/main/contentItem.vue
Normal file
225
src/views/SellerDashboard/MyListings/main/contentItem.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
domSize: {
|
||||
type: String,
|
||||
default: 'Small'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'listings'
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'deleteDraft',
|
||||
'editListing',
|
||||
'draftListing',
|
||||
'publishListing'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="item" :draging="true" :class="domSize">
|
||||
<div class="imgBox">
|
||||
<img src="" alt="">
|
||||
<div class="maskBtn">
|
||||
<div @click="$emit('editListing',item)">
|
||||
<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Edit</div>
|
||||
</div>
|
||||
<div v-if="type == 'listings'" @click="$emit('draftListing',item)">
|
||||
<svgIcon name="seller-draft" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Draft</div>
|
||||
</div>
|
||||
<div v-else-if="type == 'drafts'" @click="$emit('publishListing',item)">
|
||||
<svgIcon name="seller-share" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Publish</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="left">
|
||||
<div class="name">item name</div>
|
||||
<div class="price">$1123</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="detailItem" v-if="type == 'listings'">
|
||||
<div class="shopping1">
|
||||
<i class="fi fi-rr-shopping-bag-add"></i>
|
||||
</div>
|
||||
<span>123</span>
|
||||
</div>
|
||||
<div class="detailItem" v-if="type == 'listings'">
|
||||
<div class="eye1">
|
||||
<i class="fi fi-rs-eye"></i>
|
||||
</div>
|
||||
<span>123</span>
|
||||
</div>
|
||||
<div class="detailItem drafts" v-if="type == 'drafts'" @click="$emit('deleteDraft',item)">
|
||||
<div class="">
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.item{
|
||||
// height: 30.2rem;
|
||||
&.Small{
|
||||
--itemWidth: 19.7rem;
|
||||
--itemImgHeight: 24.9rem;
|
||||
--maskBtnGap: .8rem;
|
||||
--maskBtnWidth: 6rem;
|
||||
--maskBtnFS: 1.6rem;
|
||||
--detailPadding: .8rem 1.2rem;
|
||||
--detailLeftNameSize: 1.4rem;
|
||||
--detailLeftPriceSize: 1.2rem;
|
||||
--detailRightGap: .8rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 1.6rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
&.Medium{
|
||||
--itemWidth: 25.4rem;
|
||||
--itemImgHeight: 32.2rem;
|
||||
--maskBtnGap: 1rem;
|
||||
--maskBtnWidth: 7.6rem;
|
||||
--maskBtnFS: 2.07rem;
|
||||
--detailPadding: 1.2rem 1.4rem;
|
||||
--detailLeftNameSize: 1.6rem;
|
||||
--detailLeftPriceSize: 1.4rem;
|
||||
--detailRightGap: 1rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 2rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
&.Large{
|
||||
--itemWidth: 31.4rem;
|
||||
--itemImgHeight: 39.8rem;
|
||||
--maskBtnGap: 1.2rem;
|
||||
--maskBtnWidth: 7.6rem;
|
||||
--maskBtnFS: 2.56rem;
|
||||
--detailPadding: 1.2rem 1.6rem;
|
||||
--detailLeftNameSize: 1.98rem;
|
||||
--detailLeftPriceSize: 1.73rem;
|
||||
--detailRightGap: 1.2rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 2.6rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
width: var(--itemWidth);
|
||||
border-radius: 2rem;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
overflow: hidden;
|
||||
.imgBox{
|
||||
position: relative;
|
||||
height: var(--itemImgHeight);
|
||||
width: 100%;
|
||||
> .maskBtn{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #00000066;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--maskBtnGap);
|
||||
> div{
|
||||
font-family: pingfang_bold;
|
||||
font-weight: 400;
|
||||
font-size: var(--maskBtnFS);
|
||||
line-height: 150%;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
width: var(--maskBtnWidth);
|
||||
text-align: center;
|
||||
> div{
|
||||
margin-top: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
padding: var(--detailPadding);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
--rightColor: #979797;
|
||||
.left{
|
||||
gap: var(--detailRightItemGap);
|
||||
.name{
|
||||
font-weight: 500;
|
||||
font-size: var(--detailLeftNameSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
.price{
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: var(--detailLeftPriceSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
gap: var(--detailRightGap);
|
||||
.detailItem{
|
||||
display: flex;
|
||||
gap: var(--detailRightItemGap);
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
> div{
|
||||
color: var(--rightColor);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> i{
|
||||
font-size: var(--detailRightItemIcon);
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
> span{
|
||||
color: var(--rightColor);
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: var(--detailLeftPriceSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
&.drafts{
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
> div{
|
||||
> i{
|
||||
font-size: var(--detailRightItemDraftsIcon);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 1.5px solid #000000;
|
||||
.imgBox{
|
||||
> .maskBtn{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
--rightColor: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
219
src/views/SellerDashboard/MyListings/main/deleteDrafts.vue
Normal file
219
src/views/SellerDashboard/MyListings/main/deleteDrafts.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:visible'
|
||||
])
|
||||
const router = useRouter()
|
||||
const {t} = useI18n()
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const fun = ref(null)
|
||||
|
||||
let deleteDraftsRef = ref(null)
|
||||
|
||||
const open = (fun)=>{
|
||||
fun.value = fun
|
||||
emit('update:visible', true)
|
||||
}
|
||||
|
||||
const deleteDrafts = ()=>{
|
||||
if(fun.value){
|
||||
fun?.value()
|
||||
}
|
||||
cleardata()
|
||||
}
|
||||
|
||||
|
||||
|
||||
const cleardata = ()=>{
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({open})
|
||||
const { showAgain } = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div ref="deleteDraftsRef" class="deleteDrafts" v-if="visible">
|
||||
<a-modal
|
||||
class="collection generalModel"
|
||||
v-model:visible="props.visible"
|
||||
:footer="null"
|
||||
:get-container="() => deleteDraftsRef"
|
||||
width="76.4rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="false"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cleardata()">
|
||||
<SvgIcon name="seller-sellerToolTipClose" size="30"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deleteTitle">
|
||||
<div class="icon">
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
<div class="titleText">
|
||||
<h1>Delete this listing?</h1>
|
||||
<p>Your listing and its details will be permanently removed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deleteContent">
|
||||
<div class="img">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="name">Item Name</div>
|
||||
<div class="price">HK$392.00 · Draft</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnBox">
|
||||
<div class="btn" @click.stop="cleardata()">Cancel</div>
|
||||
<div class="btn" @click.stop="deleteDrafts()">Delete</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.deleteDrafts{
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
position: absolute;
|
||||
:deep(.generalModel){
|
||||
height: auto;
|
||||
.ant-modal-body{
|
||||
padding: 6rem 5.5rem;
|
||||
.generalModel_btn{
|
||||
.generalModel_closeIcon{
|
||||
transform: translate(0%, 0%);
|
||||
top: 4rem;
|
||||
right: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.deleteTitle{
|
||||
margin-bottom: 4rem;
|
||||
display: flex;
|
||||
> .icon{
|
||||
width: 10rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 10rem;
|
||||
background-color: #fceaea;
|
||||
margin-right: 3.2rem;
|
||||
> i{
|
||||
display: flex;
|
||||
font-size: 3.7rem;
|
||||
color: #DF2C2C;
|
||||
}
|
||||
}
|
||||
> .titleText{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> h1{
|
||||
font-size: 2.4rem;
|
||||
font-family: pingfang_heavy;
|
||||
font-weight: 400;
|
||||
line-height: 130%;
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
> p{
|
||||
font-weight: 400;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 2rem;
|
||||
line-height: 130%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.deleteContent{
|
||||
width: 100%;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 1.2rem;
|
||||
padding: 1.2rem;
|
||||
margin-bottom: 4rem;
|
||||
display: flex;
|
||||
> .img{
|
||||
width: 9.8rem;
|
||||
height: 15rem;
|
||||
border-radius: 1.2rem;
|
||||
margin-right: 3.6rem;
|
||||
overflow: hidden;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
> .detail{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> .name{
|
||||
margin-bottom: .8rem;
|
||||
font-family: pingfang_heavy;
|
||||
font-weight: 400;
|
||||
font-size: 2.4rem;
|
||||
line-height: 130%;
|
||||
}
|
||||
> .price{
|
||||
font-weight: 400;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 2rem;
|
||||
line-height: 130%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnBox{
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
> .btn{
|
||||
width: 16rem;
|
||||
height: 6rem;
|
||||
border-radius: 4rem;
|
||||
font-weight: 400;
|
||||
font-size: 2.2rem;
|
||||
line-height: 130%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
&:nth-child(1){
|
||||
color: #999999;
|
||||
background-color: #fff;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
}
|
||||
&:nth-child(2){
|
||||
margin-left: 2rem;
|
||||
color: #fff;
|
||||
background-color: #df2c2c;
|
||||
border: 1.5px solid #df2c2c;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
import sellerContent from "./content.vue"
|
||||
import myEvent from "@/tool/myEvents.js"
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -9,6 +10,9 @@ import sellerContent from "./content.vue"
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const newListing = ()=>{
|
||||
myEvent.emit('newListing')
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -23,7 +27,7 @@ const {} = toRefs(data);
|
||||
tip="Active listings and unpublished inventory."
|
||||
>
|
||||
<template #right>
|
||||
<div class="button">
|
||||
<div class="button" @click="newListing">
|
||||
<span>New Listing</span>
|
||||
<div class="icon">
|
||||
<i class="fi fi-br-plus"></i>
|
||||
|
||||
360
src/views/SellerDashboard/MyOrders/index.vue
Normal file
360
src/views/SellerDashboard/MyOrders/index.vue
Normal file
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<div class="my-orders-index mini-scrollbar">
|
||||
<div class="total-box">
|
||||
<div class="total-item" v-for="v in totals" :key="v.title">
|
||||
<div class="title">
|
||||
<span class="icon"><svg-icon :name="v.icon" size="18" /></span>
|
||||
<span class="label">{{ v.title }}</span>
|
||||
</div>
|
||||
<div class="value">{{ v.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-box">
|
||||
<div class="left">
|
||||
<div class="title">All Invoice</div>
|
||||
<div class="tip">A summary of all completed transactions.</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="input">
|
||||
<span class="icon"
|
||||
><svg-icon name="seller-search" size="20" @click="getList(true)"
|
||||
/></span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="nameOrId"
|
||||
placeholder="Search by item name or order ID"
|
||||
@keydown.enter.prevent="getList(true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div class="order-id">Order ID</div>
|
||||
<div class="item">Item</div>
|
||||
<div class="price">Price</div>
|
||||
<div class="buyer-username">Buyer Username</div>
|
||||
<div class="date">Date</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="item" v-for="v in list" :key="v.orderId">
|
||||
<div class="order-id">{{ v.orderId }}</div>
|
||||
<div class="item">
|
||||
<div class="images">
|
||||
<img
|
||||
v-for="(v, i) in v.item.slice(0, maxItemNum)"
|
||||
:key="i"
|
||||
:src="v.url"
|
||||
/>
|
||||
<span v-if="v.item.length > maxItemNum"
|
||||
>+{{ v.item.length - maxItemNum }} more</span
|
||||
>
|
||||
</div>
|
||||
<div class="titles">
|
||||
<div v-for="(v, i) in v.item.slice(0, maxItemNum)" :key="i">
|
||||
{{ v.title }}
|
||||
</div>
|
||||
<span v-if="v.item.length > maxItemNum">...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">{{ v.price }}</div>
|
||||
<div class="buyer-username">{{ v.username }}</div>
|
||||
<div class="date">
|
||||
<div>{{ v.date }}</div>
|
||||
<div>{{ v.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placeholder" ref="placeholderRef" v-show="!loading"></div>
|
||||
<div class="footer" v-if="!finish"><a-spin :delay="0.5" v-show="loading" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue"
|
||||
const totals = ref([
|
||||
{
|
||||
icon: "seller-qiandaizi",
|
||||
title: "Total Revenue",
|
||||
value: "HK$ 54,32.00"
|
||||
},
|
||||
{
|
||||
icon: "seller-gouwudai",
|
||||
title: "Total Purchases",
|
||||
value: "128"
|
||||
},
|
||||
{
|
||||
icon: "seller-eye",
|
||||
title: "Total Views",
|
||||
value: "4,982"
|
||||
}
|
||||
])
|
||||
const maxItemNum = ref(2)
|
||||
const loading = ref(false)
|
||||
const finish = ref(false)
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const size = ref(10)
|
||||
const nameOrId = ref("")
|
||||
const list = ref([])
|
||||
const getList = (isReload = false) => {
|
||||
loading.value = true
|
||||
if (isReload) {
|
||||
list.value = []
|
||||
page.value = 1
|
||||
finish.value = false
|
||||
}
|
||||
const data = {
|
||||
page: page.value,
|
||||
size: size.value
|
||||
}
|
||||
if (nameOrId.value) data.nameOrId = nameOrId.value
|
||||
console.log(data)
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < size.value; i++) {
|
||||
let { date, time, dateTime } = formatTimestamp(new Date(2026, 4, 20, 13, 14).getTime())
|
||||
list.value.push({
|
||||
orderId: "SP" + Math.random().toString().substring(2, 10),
|
||||
price: "HK$ " + (Math.random() * 500).toFixed(2),
|
||||
username: "@liuyuchen",
|
||||
date: date,
|
||||
time: time,
|
||||
item: [
|
||||
{
|
||||
url: "http://118.31.39.42:3000/falls/o-1.png",
|
||||
title: "North Outfit Set"
|
||||
},
|
||||
{
|
||||
url: "http://118.31.39.42:3000/falls/o-2.png",
|
||||
title: "Heritage Layered Set"
|
||||
},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
})
|
||||
}
|
||||
total.value = 30
|
||||
page.value++
|
||||
finish.value = page.value > total.value / 10
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
getList(true)
|
||||
const placeholderRef = ref(null)
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (!entries[0].intersectionRatio || loading.value || finish.value) return
|
||||
getList()
|
||||
},
|
||||
{ root: document.body }
|
||||
)
|
||||
onMounted(() => {
|
||||
observer.observe(placeholderRef.value)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
observer.disconnect()
|
||||
})
|
||||
const formatTimestamp = (ts) => {
|
||||
const d = new Date(ts)
|
||||
const h = d.getHours()
|
||||
const m = d.getMinutes()
|
||||
const date = `${d.toLocaleString("en-US", {
|
||||
month: "long"
|
||||
})} ${d.getDate()}, ${d.getFullYear()}`
|
||||
const time = `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")} ${
|
||||
h >= 12 ? "PM" : "AM"
|
||||
}`
|
||||
return {
|
||||
date,
|
||||
time,
|
||||
dateTime: `${date}\n${time}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.my-orders-index {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 3rem;
|
||||
margin: 0 3rem;
|
||||
gap: 4rem;
|
||||
> .total-box {
|
||||
display: flex;
|
||||
gap: 1.8rem;
|
||||
> .total-item {
|
||||
flex: 1;
|
||||
padding: 2.4rem;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 1.2rem;
|
||||
> .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.2rem;
|
||||
gap: 1.2rem;
|
||||
> .icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
border: 0.08rem solid #e4e4e4;
|
||||
}
|
||||
> .label {
|
||||
font-size: 2rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
> .value {
|
||||
font-family: "pingfang_heavy";
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .filter-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
> .left {
|
||||
> .title {
|
||||
font-family: "pingfang_heavy";
|
||||
font-size: 2.4rem;
|
||||
color: #000;
|
||||
}
|
||||
> .tip {
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
> .input {
|
||||
width: 30rem;
|
||||
height: 4rem;
|
||||
border-bottom: 0.15rem solid #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
> input {
|
||||
padding: 0 2rem;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
height: 100%;
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
&::placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .table {
|
||||
width: 100%;
|
||||
> .body > .item,
|
||||
> .header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
padding: 0 1.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
> .order-id {
|
||||
flex: 1.5;
|
||||
}
|
||||
> .item {
|
||||
flex: 3;
|
||||
}
|
||||
> .buyer-username {
|
||||
flex: 1.5;
|
||||
}
|
||||
}
|
||||
> .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #f6f6f6;
|
||||
height: 5.6rem;
|
||||
border-width: 0.15rem 0 0.15rem 0;
|
||||
border-style: solid;
|
||||
border-color: #eaeaea;
|
||||
> div {
|
||||
font-size: 2rem;
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
> .body {
|
||||
> .item {
|
||||
padding-top: 1.6rem;
|
||||
padding-bottom: 1.6rem;
|
||||
border-bottom: 0.1rem solid #f6f6f6;
|
||||
color: #000;
|
||||
> .order-id {
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
> .price {
|
||||
font-family: "pingfang_medium";
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
> .buyer-username {
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.8rem;
|
||||
color: #666;
|
||||
}
|
||||
> .date {
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.6rem;
|
||||
color: #666;
|
||||
}
|
||||
> .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
> .images {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.2rem;
|
||||
> img {
|
||||
width: auto;
|
||||
height: 10rem;
|
||||
border-radius: 0.8rem;
|
||||
border: 0.1rem solid #e9e9e9;
|
||||
}
|
||||
> span {
|
||||
font-family: "pingfang_medium";
|
||||
font-size: 1.4rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
> .titles {
|
||||
font-family: "pingfang_medium";
|
||||
font-size: 1.8rem;
|
||||
color: #000;
|
||||
> span {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .footer {
|
||||
min-height: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
> .placeholder {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
323
src/views/SellerDashboard/Settings/index.vue
Normal file
323
src/views/SellerDashboard/Settings/index.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="settings-index">
|
||||
<div>
|
||||
<div class="notification">
|
||||
<div class="header">Notifications</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="title">New order notification</div>
|
||||
<div class="tip">Receive an inbox message when a new order is placed.</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a-switch v-model:checked="checked" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payout">
|
||||
<div class="header">Payout</div>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div class="title">Payment Providers</div>
|
||||
<div class="tip">Select how you want to receive payments.</div>
|
||||
</div>
|
||||
<div class="pay-item" v-for="v in payList" :key="v.type">
|
||||
<div class="left">
|
||||
<img :src="v.icon" />
|
||||
<div class="value">{{ v.value || "Unbound" }}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button v-if="v.value" class="manage">Manage</button>
|
||||
<button v-else class="bind-now">Bind Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<div class="title">Payment Currency</div>
|
||||
<div class="tip">HKD - Hong Kong Dollar</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button>Fixed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="data-privacy">
|
||||
<div class="header">Data & Privacy</div>
|
||||
<div class="content">
|
||||
<div class="title">Copyright licence</div>
|
||||
<div class="tip">
|
||||
A licence certificate is automatically included with every purchase
|
||||
download. View the default licensing terms applied to your listings.
|
||||
</div>
|
||||
<div class="tip">
|
||||
This licence is issued by Code-Create and is legally binding upon purchase.
|
||||
It certifies the buyer's right to use the purchased design asset in
|
||||
accordance with the terms below.
|
||||
</div>
|
||||
<div class="tip">
|
||||
For custom licensing arrangements, <span>contact us</span>.
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button>
|
||||
<span class="icon"><svg-icon name="seller-download" size="14" /></span>
|
||||
<span class="label">Download to View</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stop">
|
||||
<div class="header">Stop Selling</div>
|
||||
<div class="content">
|
||||
<div class="title">Deactivate seller account</div>
|
||||
<div class="tip">
|
||||
Permanently deactivate your seller account. All listings and invoice records
|
||||
will be deleted. You may re-register as a seller in the future, but your
|
||||
previous sales data cannot be recovered.
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button>Deactivate</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import paypal from "@/assets/images/seller/setting/paypal.png"
|
||||
import stripe from "@/assets/images/seller/setting/stripe.png"
|
||||
import alipayHk from "@/assets/images/seller/setting/alipay-hk.png"
|
||||
import alipayChinese from "@/assets/images/seller/setting/alipay-chinese.png"
|
||||
const checked = ref(true)
|
||||
const payList = ref([
|
||||
{
|
||||
type: "paypal",
|
||||
icon: paypal,
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
type: "stripe",
|
||||
icon: stripe,
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
type: "alipay-hk",
|
||||
icon: alipayHk,
|
||||
value: "123123"
|
||||
},
|
||||
{
|
||||
type: "alipay-chinese",
|
||||
icon: alipayChinese,
|
||||
value: "123123"
|
||||
}
|
||||
])
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.settings-index {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin: 0 16rem;
|
||||
display: flex;
|
||||
gap: 4.2rem;
|
||||
> div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4.2rem;
|
||||
> div {
|
||||
border-radius: 1.2rem;
|
||||
overflow: hidden;
|
||||
border: 0.15rem solid #d1d1d1;
|
||||
> .header {
|
||||
line-height: 5rem;
|
||||
background-color: #f6f6f6;
|
||||
padding-left: 2.4rem;
|
||||
font-size: 2rem;
|
||||
color: #666;
|
||||
}
|
||||
> .content {
|
||||
padding: 2.4rem;
|
||||
}
|
||||
}
|
||||
> .stop {
|
||||
border-color: rgba(223, 44, 44, 0.2);
|
||||
> .header {
|
||||
background-color: rgba(223, 44, 44, 0.2);
|
||||
}
|
||||
}
|
||||
> .notification > .content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
> .left {
|
||||
> .title {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
}
|
||||
> .tip {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
.ant-switch {
|
||||
width: 4.8rem;
|
||||
height: 2.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .payout > .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
> .header {
|
||||
> .title {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
}
|
||||
> .tip {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
> .pay-item {
|
||||
padding: 1.7rem 2.4rem;
|
||||
border-radius: 0.8rem;
|
||||
border: 0.06rem solid #c4c4c4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
> .left {
|
||||
> img {
|
||||
width: auto;
|
||||
height: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
> .value {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.2rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
> button {
|
||||
width: 10rem;
|
||||
height: 3.8rem;
|
||||
border-radius: 2rem;
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
background: #000000;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
> .manage {
|
||||
background: #fff;
|
||||
border: 0.1rem solid #000000;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .footer {
|
||||
margin-top: 2rem;
|
||||
border-top: 0.1rem solid #c4c4c4;
|
||||
padding: 1.4rem 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
> .left {
|
||||
> .title {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
}
|
||||
> .tip {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.2rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
> button {
|
||||
width: 10rem;
|
||||
height: 3.8rem;
|
||||
border-radius: 2rem;
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.2rem;
|
||||
color: #bdbdbd;
|
||||
background: #f6f6f6;
|
||||
border: none;
|
||||
// cursor: pointer;
|
||||
// &:active {
|
||||
// opacity: 0.8;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .stop > .content,
|
||||
> .data-privacy > .content {
|
||||
> .title {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
> .tip {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
margin-bottom: 3rem;
|
||||
> span {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: #0080ed;
|
||||
}
|
||||
}
|
||||
> .btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1.2rem;
|
||||
> button {
|
||||
padding: 0 2.4rem;
|
||||
height: 4rem;
|
||||
border-radius: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
background: #000000;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .stop > .content {
|
||||
> .btns {
|
||||
> button {
|
||||
background: #df2c2c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
<div
|
||||
v-for="v in list"
|
||||
:key="v.path"
|
||||
:class="{ active: v.path === activePath }"
|
||||
:class="{ active: new RegExp(`^${v.path}`).test(activePath) }"
|
||||
@click="handleClick(v.path)"
|
||||
>
|
||||
<div class="icon"><svg-icon :name="v.icon" size="20" /></div>
|
||||
@@ -21,6 +21,7 @@
|
||||
import { ref, computed } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import toolTipBox from "./toolTipBox.vue"
|
||||
import myEvent from "@/tool/myEvents.js"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const visible = ref(false)
|
||||
@@ -51,6 +52,14 @@
|
||||
if (path === activePath.value) return
|
||||
router.push(path)
|
||||
}
|
||||
onMounted(()=>{
|
||||
myEvent.add('newListing',()=>{
|
||||
visible.value = true
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
myEvent.remove('newListing')
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.seller-dashboard-index {
|
||||
|
||||
@@ -13,7 +13,12 @@
|
||||
:class="{
|
||||
last: i === breadcrumbs.length - 1
|
||||
}"
|
||||
@click="() => router.push({ name: v.name })"
|
||||
@click="
|
||||
() => {
|
||||
const index = -(breadcrumbs.length - i - 1)
|
||||
if (index < 0) router.go(index)
|
||||
}
|
||||
"
|
||||
>{{ v.title }}</span
|
||||
>
|
||||
<span class="icon" v-show="i < breadcrumbs.length - 1">
|
||||
|
||||
@@ -4,7 +4,7 @@ import sellerToolTipImg1 from '@/assets/images/seller/sellerToolTip-1.png'
|
||||
import sellerToolTipImg2 from '@/assets/images/seller/sellerToolTip-2.png'
|
||||
import sellerToolTipImg3 from '@/assets/images/seller/sellerToolTip-3.png'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useRouter } from 'vue-router'
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
@@ -14,9 +14,9 @@ const props = defineProps({
|
||||
const emit = defineEmits([
|
||||
'update:visible','close'
|
||||
])
|
||||
const router = useRouter()
|
||||
const {t} = useI18n()
|
||||
let data = reactive({
|
||||
visible: props.visible,
|
||||
stepList: [
|
||||
{
|
||||
img: sellerToolTipImg1,
|
||||
@@ -44,6 +44,12 @@ const cleardata = ()=>{
|
||||
emit('close', data.showAgain)
|
||||
}
|
||||
|
||||
const getStarted = ()=>{
|
||||
emit('update:visible', false)
|
||||
router.push({path:'/home/seller/myListings/select'})
|
||||
}
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -55,7 +61,7 @@ const { showAgain } = toRefs(data);
|
||||
<div ref="toolTipBoxRef" class="toolTipBox" v-if="visible">
|
||||
<a-modal
|
||||
class="collection generalModel"
|
||||
v-model:visible="data.visible"
|
||||
v-model:visible="props.visible"
|
||||
:footer="null"
|
||||
:get-container="() => toolTipBoxRef"
|
||||
width="126.2rem"
|
||||
@@ -105,7 +111,7 @@ const { showAgain } = toRefs(data);
|
||||
{{t('SellerToolTip.showAgain')}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="gallery_btn" @click="cleardata()">
|
||||
<div class="gallery_btn" @click="getStarted">
|
||||
{{t('SellerToolTip.GetStarted')}}
|
||||
<i class="fi fi-rr-arrow-small-right"></i>
|
||||
</div>
|
||||
@@ -116,9 +122,9 @@ const { showAgain } = toRefs(data);
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.toolTipBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: relative;
|
||||
:deep(.generalModel){
|
||||
height: auto;
|
||||
.ant-modal-body{
|
||||
|
||||
Reference in New Issue
Block a user