Compare commits
33 Commits
ab71ccdaec
...
StableVers
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3ed5a37e5b | ||
|
|
5546c71ec0 | ||
|
|
8a7776a4b6 | ||
|
|
a1281c8e3f | ||
|
|
9a40e69081 | ||
|
|
e27b43dc67 | ||
|
|
b6a55a8124 | ||
| 6cace08a51 | |||
| 6207095221 | |||
|
|
7bb38bf2e5 | ||
|
|
743fc762d6 | ||
| 7297e4e7a4 | |||
| 3bff1ebb66 | |||
| 0d1656ee0a | |||
| 7d0873d874 | |||
| 82941bca7c | |||
| 949ff9292d | |||
|
|
11c9de8ced | ||
|
|
fd518ad9b3 | ||
|
|
a2b45e2041 | ||
|
|
da64b57c1c | ||
|
|
7c14b1d831 | ||
|
|
8966b52430 | ||
|
|
5fa049f73d | ||
|
|
575445f767 | ||
|
|
f43c56236b | ||
|
|
4352f7c2f4 | ||
|
|
c6b1bdbdf1 | ||
|
|
f16aa6ea14 | ||
|
|
a25abeb527 | ||
|
|
d359cd7763 | ||
| 23085d9a9b | |||
|
|
35c6dfe29c |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M19.1667 9.16667H10.8333V0.833333C10.8333 0.61232 10.7455 0.400358 10.5893 0.244078C10.433 0.0877974 10.221 0 10 0C9.77899 0 9.56702 0.0877974 9.41074 0.244078C9.25446 0.400358 9.16667 0.61232 9.16667 0.833333V9.16667H0.833333C0.61232 9.16667 0.400358 9.25446 0.244078 9.41074C0.0877974 9.56702 0 9.77899 0 10C0 10.221 0.0877974 10.433 0.244078 10.5893C0.400358 10.7455 0.61232 10.8333 0.833333 10.8333H9.16667V19.1667C9.16667 19.3877 9.25446 19.5996 9.41074 19.7559C9.56702 19.9122 9.77899 20 10 20C10.221 20 10.433 19.9122 10.5893 19.7559C10.7455 19.5996 10.8333 19.3877 10.8333 19.1667V10.8333H19.1667C19.3877 10.8333 19.5996 10.7455 19.7559 10.5893C19.9122 10.433 20 10.221 20 10C20 9.77899 19.9122 9.56702 19.7559 9.41074C19.5996 9.25446 19.3877 9.16667 19.1667 9.16667Z" fill="#B0B0B0"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 906 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 4.46552C9.66667 4.85042 9.66667 5.81267 9 6.19757L1.5 10.5277C0.833332 10.9126 -1.90735e-06 10.4315 -1.90735e-06 9.66167V1.00142C-1.90735e-06 0.231615 0.833331 -0.24951 1.5 0.13539L9 4.46552Z" fill="#999999"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 325 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M10.3489 24C10.2173 24.0008 10.0869 23.9755 9.96503 23.9258C9.84319 23.876 9.73238 23.8027 9.63894 23.71L1.46894 15.54C1.00331 15.0755 0.633877 14.5238 0.381813 13.9163C0.129748 13.3089 0 12.6577 0 12C0 11.3423 0.129748 10.6911 0.381813 10.0837C0.633877 9.47621 1.00331 8.92446 1.46894 8.46L9.63894 0.290002C9.73218 0.196764 9.84287 0.122803 9.96469 0.0723426C10.0865 0.0218822 10.2171 -0.00408935 10.3489 -0.00408936C10.4808 -0.00408936 10.6114 0.0218822 10.7332 0.0723426C10.855 0.122803 10.9657 0.196764 11.0589 0.290002C11.1522 0.383241 11.2261 0.493931 11.2766 0.615753C11.3271 0.737575 11.353 0.868143 11.353 1C11.353 1.13186 11.3271 1.26243 11.2766 1.38425C11.2261 1.50607 11.1522 1.61676 11.0589 1.71L2.88894 9.88C2.32714 10.4425 2.01158 11.205 2.01158 12C2.01158 12.795 2.32714 13.5575 2.88894 14.12L11.0589 22.29C11.1527 22.383 11.2271 22.4936 11.2778 22.6154C11.3286 22.7373 11.3547 22.868 11.3547 23C11.3547 23.132 11.3286 23.2627 11.2778 23.3846C11.2271 23.5064 11.1527 23.617 11.0589 23.71C10.9655 23.8027 10.8547 23.876 10.7328 23.9258C10.611 23.9755 10.4805 24.0008 10.3489 24Z" fill="black"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,35 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
||||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
|
||||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
|
|
||||||
preserveAspectRatio="xMidYMid meet">
|
|
||||||
|
|
||||||
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
|
||||||
fill="#000000" stroke="none">
|
|
||||||
<path d="M92 5103 c-66 -32 -101 -105 -87 -180 6 -33 52 -84 376 -408 l369
|
|
||||||
-370 -75 -684 c-41 -377 -75 -716 -75 -753 0 -147 53 -312 140 -436 53 -76
|
|
||||||
1977 -1988 2079 -2067 298 -229 717 -269 1051 -100 126 64 198 127 611 542
|
|
||||||
446 447 493 503 560 665 57 137 73 226 73 393 -1 130 -4 164 -27 250 -34 127
|
|
||||||
-100 259 -177 355 -70 88 -2000 1999 -2068 2049 -63 45 -193 107 -267 126
|
|
||||||
-129 34 -199 31 -920 -44 l-680 -71 -365 364 c-201 201 -378 370 -393 376 -40
|
|
||||||
14 -87 12 -125 -7z m2380 -924 c29 -6 82 -25 118 -42 59 -29 152 -118 1062
|
|
||||||
-1020 918 -910 1034 -1030 1081 -1122 66 -129 83 -342 38 -485 -39 -127 -82
|
|
||||||
-192 -230 -345 -311 -322 -650 -659 -701 -699 -124 -97 -248 -139 -410 -140
|
|
||||||
-128 -1 -187 13 -309 71 l-94 45 -634 626 c-1451 1434 -1388 1370 -1423 1443
|
|
||||||
-60 127 -60 131 4 724 32 292 60 550 63 573 l6 44 127 -127 128 -127 -19 -54
|
|
||||||
c-77 -217 25 -464 232 -568 169 -85 340 -71 493 39 112 81 180 200 193 341 23
|
|
||||||
244 -161 471 -410 507 -63 9 -87 8 -149 -7 -40 -9 -84 -19 -98 -22 -21 -4 -43
|
|
||||||
13 -150 120 -118 119 -123 126 -95 127 17 0 255 24 530 54 552 58 571 60 647
|
|
||||||
44z m-685 -649 c42 -18 77 -61 89 -108 18 -66 -37 -153 -109 -173 -177 -47
|
|
||||||
-271 206 -104 282 53 23 71 23 124 -1z"/>
|
|
||||||
<path d="M3697 2450 c-26 -5 -76 -22 -110 -38 -54 -25 -95 -62 -312 -283 -516
|
|
||||||
-524 -522 -530 -557 -605 -31 -65 -33 -75 -33 -179 0 -105 2 -114 34 -180 29
|
|
||||||
-60 61 -97 230 -266 164 -165 206 -201 261 -228 148 -71 332 -53 450 45 19 16
|
|
||||||
197 193 396 394 325 329 364 372 395 435 33 67 34 74 34 185 0 174 -7 186
|
|
||||||
-262 442 -221 222 -259 250 -370 273 -75 16 -86 16 -156 5z m295 -498 c176
|
|
||||||
-175 178 -178 178 -221 0 -43 0 -43 -314 -364 -416 -427 -405 -417 -458 -417
|
|
||||||
-42 0 -45 3 -220 178 -162 162 -178 181 -178 212 0 19 9 49 20 65 10 17 173
|
|
||||||
186 362 378 l343 347 45 0 c44 0 45 -1 222 -178z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.1 KiB |
@@ -1,24 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
||||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
|
||||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="512.000000pt" height="488.000000pt" viewBox="0 0 512.000000 488.000000"
|
|
||||||
preserveAspectRatio="xMidYMid meet">
|
|
||||||
|
|
||||||
<g transform="translate(0.000000,488.000000) scale(0.100000,-0.100000)"
|
|
||||||
fill="#000000" stroke="none">
|
|
||||||
<path d="M2425 4873 c-518 -70 -923 -535 -929 -1063 0 -80 3 -102 21 -137 70
|
|
||||||
-131 234 -159 337 -57 45 46 58 81 67 190 17 195 89 349 218 466 120 108 254
|
|
||||||
161 411 161 184 0 307 -51 441 -183 71 -70 94 -100 127 -170 54 -112 85 -262
|
|
||||||
80 -381 -6 -131 -39 -191 -192 -345 -276 -277 -500 -453 -1656 -1307 -733
|
|
||||||
-541 -1115 -829 -1155 -871 -75 -78 -128 -167 -162 -271 -23 -69 -27 -98 -27
|
|
||||||
-205 -1 -90 4 -143 17 -189 55 -200 190 -362 372 -446 138 -64 -7 -60 2170
|
|
||||||
-60 1895 0 1993 1 2054 18 233 66 413 250 478 488 13 46 18 98 17 189 -1 107
|
|
||||||
-4 137 -27 205 -36 109 -89 196 -167 275 -40 40 -436 339 -1032 779 -533 393
|
|
||||||
-968 718 -968 722 0 3 64 62 142 130 347 301 481 474 539 694 41 154 25 417
|
|
||||||
-38 620 -121 387 -448 677 -838 740 -83 14 -229 18 -300 8z m1152 -3229 c549
|
|
||||||
-405 1015 -753 1037 -773 52 -49 76 -103 76 -176 0 -103 -58 -194 -147 -232
|
|
||||||
-44 -18 -3893 -20 -3954 -2 -93 28 -159 126 -159 234 0 73 24 127 76 176 74
|
|
||||||
69 2047 1520 2060 1515 8 -3 462 -337 1011 -742z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,22 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
||||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
|
||||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="96.000000pt" height="96.000000pt" viewBox="0 0 96.000000 96.000000"
|
|
||||||
preserveAspectRatio="xMidYMid meet">
|
|
||||||
|
|
||||||
<g transform="translate(0.000000,96.000000) scale(0.100000,-0.100000)"
|
|
||||||
fill="#000000" stroke="none">
|
|
||||||
<path d="M207 953 c-4 -3 -7 -21 -7 -39 0 -31 -2 -33 -37 -36 l-38 -3 -3 -378
|
|
||||||
c-3 -418 -1 -429 60 -467 31 -19 46 -20 306 -18 l274 3 34 37 34 38 0 395 0
|
|
||||||
395 -40 0 -40 0 0 41 0 40 -37 -3 c-36 -3 -38 -5 -41 -40 -3 -36 -5 -38 -37
|
|
||||||
-38 -32 0 -34 2 -37 38 -3 36 -4 37 -43 37 -40 0 -40 0 -40 -38 0 -36 -1 -37
|
|
||||||
-37 -37 -38 0 -38 0 -38 40 l0 40 -40 0 -40 0 0 -40 0 -40 -40 0 -40 0 0 40
|
|
||||||
c0 39 -1 40 -33 40 -19 0 -37 -3 -40 -7z m543 -496 c0 -253 -3 -346 -12 -355
|
|
||||||
-9 -9 -79 -12 -254 -12 -133 0 -249 3 -258 6 -14 5 -16 46 -16 355 l0 349 270
|
|
||||||
0 270 0 0 -343z"/>
|
|
||||||
<path d="M280 640 l0 -40 198 2 197 3 3 38 3 37 -200 0 -201 0 0 -40z"/>
|
|
||||||
<path d="M280 485 l0 -45 198 2 197 3 0 40 0 40 -197 3 -198 2 0 -45z"/>
|
|
||||||
<path d="M280 330 l0 -40 120 0 120 0 0 40 0 40 -120 0 -120 0 0 -40z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13.9797 13.2649C14.0637 13.5764 13.8788 13.896 13.5673 13.9794C13.5166 13.9928 13.4658 13.9998 13.4157 13.9998C13.1584 13.9998 12.9228 13.8277 12.8528 13.5676C12.6451 12.7918 11.9171 12.25 11.083 12.25C10.2489 12.25 9.52088 12.7918 9.31322 13.5676C9.22922 13.8785 8.90956 14.0634 8.59866 13.98C8.28717 13.8966 8.10225 13.5769 8.18625 13.2655C8.53099 11.9805 9.72212 11.0834 11.083 11.0834C12.4439 11.0834 13.635 11.9805 13.9797 13.2655V13.2649ZM11.083 7.58318C10.2786 7.58318 9.62471 8.23704 9.62471 9.04138C9.62471 9.84572 10.2786 10.4996 11.083 10.4996C11.8874 10.4996 12.5413 9.84572 12.5413 9.04138C12.5413 8.23704 11.8874 7.58318 11.083 7.58318ZM2.33326 8.74974H2.91658C3.61656 8.74974 4.23837 8.4336 4.66653 7.94365C5.09468 8.4336 5.71649 8.74974 6.41647 8.74974H7.5831C7.85026 8.74974 8.11217 8.70483 8.36125 8.61617C8.66515 8.50826 8.82382 8.17521 8.7159 7.87132C8.60741 7.56744 8.27375 7.40995 7.97159 7.51669C7.84793 7.56044 7.71668 7.5826 7.5831 7.5826H6.41647C5.77308 7.5826 5.24984 7.0594 5.24984 6.41605C5.24984 6.09408 4.98852 5.83277 4.66653 5.83277C4.34454 5.83277 4.08321 6.09408 4.08321 6.41605C4.08321 7.0594 3.55998 7.5826 2.91658 7.5826H2.33326C1.70445 7.5826 1.19055 7.08273 1.16721 6.45921L1.83569 2.40602C2.0591 1.67517 2.74275 1.16655 3.50981 1.16655H4.08321V2.91638C4.08321 3.23835 4.34454 3.49966 4.66653 3.49966C4.98852 3.49966 5.24984 3.23835 5.24984 2.91638V1.16655H8.74973V2.91638C8.74973 3.23835 9.01048 3.49966 9.33305 3.49966C9.65562 3.49966 9.91637 3.23835 9.91637 2.91638V1.16655H10.4892C11.2557 1.16655 11.9399 1.67459 12.1633 2.40602L12.8318 6.45921C12.8271 6.57761 12.8049 6.69369 12.7659 6.80509C12.6585 7.10898 12.8184 7.44203 13.1217 7.54935C13.4262 7.65726 13.7587 7.49744 13.866 7.19356C13.9535 6.94391 13.999 6.68202 13.999 6.41605C13.999 6.38397 13.2996 2.13654 13.2932 2.11496C12.9374 0.869666 11.7836 0 10.4886 0H3.50981C2.21485 0.000583277 1.06163 0.870249 0.705229 2.11555C0.698812 2.13713 0 6.38455 0 6.41663C0 7.00282 0.224577 7.53302 0.583316 7.94365V11.6661C0.583316 12.9528 1.62978 13.9992 2.91658 13.9992H6.41647C6.73846 13.9992 6.99979 13.7379 6.99979 13.416C6.99979 13.094 6.73846 12.8327 6.41647 12.8327H2.91658C2.27318 12.8327 1.74995 12.3095 1.74995 11.6661V8.66691C1.93777 8.71591 2.13085 8.74974 2.33326 8.74974Z" fill="#585858"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.4 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M29.75 0.5C30.2139 0.50007 30.6592 0.684683 30.9873 1.0127C31.3153 1.34085 31.499 1.78607 31.499 2.25C31.499 2.71394 31.3153 3.15919 30.9873 3.4873L18.4746 16L30.9873 28.5127C31.3153 28.8409 31.499 29.2861 31.499 29.75C31.499 30.2139 31.3153 30.6592 30.9873 30.9873C30.6592 31.3153 30.2139 31.499 29.75 31.499C29.2861 31.499 28.8409 31.3153 28.5127 30.9873L16 18.4746L3.4873 30.9873C3.15919 31.3153 2.71394 31.499 2.25 31.499C1.78607 31.499 1.34085 31.3153 1.0127 30.9873C0.684683 30.6592 0.50007 30.2139 0.5 29.75C0.5 29.286 0.684623 28.8409 1.0127 28.5127L13.5254 16L1.0127 3.4873C0.684684 3.15919 0.500071 2.71394 0.5 2.25C0.5 1.78596 0.684621 1.34087 1.0127 1.0127C1.34087 0.684621 1.78596 0.5 2.25 0.5C2.71394 0.500071 3.15919 0.684684 3.4873 1.0127L16 13.5254L28.5127 1.0127C28.8409 0.684623 29.286 0.5 29.75 0.5Z" fill="black" stroke="black"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 963 B |
@@ -1,27 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
||||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
|
||||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="96.000000pt" height="96.000000pt" viewBox="0 0 96.000000 96.000000"
|
|
||||||
preserveAspectRatio="xMidYMid meet">
|
|
||||||
|
|
||||||
<g transform="translate(0.000000,96.000000) scale(0.100000,-0.100000)"
|
|
||||||
fill="#000000" stroke="none">
|
|
||||||
<path d="M235 946 c-30 -13 -85 -69 -85 -86 0 -5 -30 -10 -66 -12 -51 -2 -70
|
|
||||||
-7 -78 -20 -21 -34 4 -52 77 -58 62 -5 67 -7 89 -40 27 -40 79 -70 123 -70 42
|
|
||||||
0 96 31 123 71 l23 34 251 5 c225 4 252 7 262 23 8 12 8 22 0 35 -10 15 -36
|
|
||||||
17 -267 20 l-255 2 -6 25 c-15 60 -125 101 -191 71z m103 -82 c47 -33 16 -124
|
|
||||||
-43 -124 -31 0 -75 41 -75 70 0 28 43 70 72 70 13 0 34 -7 46 -16z"/>
|
|
||||||
<path d="M600 611 c-19 -10 -45 -33 -58 -52 l-23 -34 -251 -5 c-225 -4 -252
|
|
||||||
-7 -262 -22 -8 -13 -8 -23 0 -35 10 -16 36 -18 267 -21 l255 -2 6 -25 c3 -13
|
|
||||||
23 -37 43 -52 29 -22 47 -28 89 -28 59 0 95 21 129 73 18 28 25 31 84 34 48 2
|
|
||||||
67 7 75 21 21 33 -4 51 -77 57 -62 5 -67 7 -89 40 -44 65 -122 87 -188 51z
|
|
||||||
m115 -86 c14 -13 25 -33 25 -45 0 -28 -43 -70 -72 -70 -40 0 -68 27 -68 66 0
|
|
||||||
68 68 97 115 49z"/>
|
|
||||||
<path d="M235 286 c-30 -13 -85 -69 -85 -86 0 -5 -30 -10 -66 -12 -51 -2 -70
|
|
||||||
-7 -78 -20 -21 -34 4 -52 77 -58 62 -5 67 -7 89 -40 27 -40 79 -70 123 -70 42
|
|
||||||
0 96 31 123 71 l23 34 251 5 c225 4 252 7 262 23 8 12 8 22 0 35 -10 15 -36
|
|
||||||
17 -267 20 l-255 2 -6 25 c-15 60 -125 101 -191 71z m103 -82 c47 -33 16 -124
|
|
||||||
-43 -124 -30 0 -75 41 -75 68 0 11 9 31 21 46 24 30 63 34 97 10z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 17 KiB |
@@ -9,6 +9,11 @@
|
|||||||
"id": 2,
|
"id": 2,
|
||||||
"title": "AiDA X SFT AI Fashion Award 2024",
|
"title": "AiDA X SFT AI Fashion Award 2024",
|
||||||
"imgUrl": "/image/events/Fashion-Award-2024.png"
|
"imgUrl": "/image/events/Fashion-Award-2024.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"title": "AiDA Global Design Awards 2026",
|
||||||
|
"imgUrl": "/image/events/award-poster.gif"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"eventsItem": [
|
"eventsItem": [
|
||||||
@@ -16,18 +21,19 @@
|
|||||||
"id": 3,
|
"id": 3,
|
||||||
"title": "AiDA Global Design Awards 2026",
|
"title": "AiDA Global Design Awards 2026",
|
||||||
"imgUrl": "/image/events/award-poster.gif",
|
"imgUrl": "/image/events/award-poster.gif",
|
||||||
|
"tips": "For inquiries: awards2026@code-create.com.hk",
|
||||||
"textList": [
|
"textList": [
|
||||||
{
|
{
|
||||||
"paragraph": [
|
"paragraph": [
|
||||||
{
|
{
|
||||||
"text": "Click the “View Details” button for more information and to join the competition! The AiDA Global Design Award 2026 is an international design competition hosted by Code‑Create, a globally leading AI fashion solutions provider, celebrating the future of creativity powered by artificial intelligence. Open to designers from Hong Kong, China, Singapore, South Korea, and beyond, the competition brings together global talent, empowering AI as a creative partner—pushing fashion beyond traditional boundaries and unlocking new possibilities where technology amplifies human imagination."
|
"text": "Click the “View Details” button for more information and to join the competition! The AiDA Global Design Award 2026 is an international design competition hosted by Code‑Create, a globally leading AI fashion solutions provider, celebrating the future of creativity powered by artificial intelligence. Open to designers worldwide the competition brings together global talent, empowering AI as a creative partner—pushing fashion beyond traditional boundaries and unlocking new possibilities where technology amplifies human imagination."
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"paragraph": [
|
"paragraph": [
|
||||||
{
|
{
|
||||||
"text": "Participants have the opportunity to compete for cash prizes totaling up to US$9,000, gain global media exposure showcased by top international platforms, and connect with designers and industry leaders worldwide. Finalists will also attend an exclusive award ceremony in Hong Kong, with travel support provided, allowing them to showcase their talent, network with professionals, and celebrate their achievements on an international stage."
|
"text": "Participants have the opportunity to compete for cash prizes totaling up to US$9,000, gain global media exposure showcased by top international platforms, and connect with designers and industry leaders worldwide. Finalists will also attend an exclusive award ceremony in Hong Kong, with travel allowance, allowing them to showcase their talent, network with professionals, and celebrate their achievements on an international stage."
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,6 +9,11 @@
|
|||||||
"id": 2,
|
"id": 2,
|
||||||
"title": "AiDA X SFT AI时尚设计比赛2024",
|
"title": "AiDA X SFT AI时尚设计比赛2024",
|
||||||
"imgUrl": "/image/events/Fashion-Award-2024.png"
|
"imgUrl": "/image/events/Fashion-Award-2024.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"title": "AiDA全球设计奖 2026",
|
||||||
|
"imgUrl": "/image/events/award-poster-zh.gif"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"eventsItem": [
|
"eventsItem": [
|
||||||
@@ -16,18 +21,19 @@
|
|||||||
"id": 3,
|
"id": 3,
|
||||||
"title": "AiDA全球设计奖 2026",
|
"title": "AiDA全球设计奖 2026",
|
||||||
"imgUrl": "/image/events/award-poster-zh.gif",
|
"imgUrl": "/image/events/award-poster-zh.gif",
|
||||||
|
"tips": "如有疑问,请联系:awards2026@code-create.com.hk",
|
||||||
"textList": [
|
"textList": [
|
||||||
{
|
{
|
||||||
"paragraph": [
|
"paragraph": [
|
||||||
{
|
{
|
||||||
"text": "秉承推动 AI 赋能创意设计的初衷,Code‑Create 举办了「AiDA 全球设计大奖 2026」,面向来自香港、中国、新加坡、韩国及全球的设计师,鼓励大家探索 AI 与时尚设计的无限可能,突破传统界限,释放科技与想象力的创新潜能。点击“查看详情”按钮获取更多比赛信息,抓住成为 AI 时尚先锋的机会吧!"
|
"text": "秉承推动 AI 赋能创意设计的初衷,Code‑Create 举办了「AiDA 全球设计大奖 2026」,面向来全球的设计师,鼓励大家探索 AI 与时尚设计的无限可能,突破传统界限,释放科技与想象力的创新潜能。点击“查看详情”按钮获取更多比赛信息,抓住成为 AI 时尚先锋的机会吧!"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"paragraph": [
|
"paragraph": [
|
||||||
{
|
{
|
||||||
"text": "参赛者将有机会赢取总奖金 9,000 美元,作品还将获得国际媒体展示机会,并与全球设计师和行业领袖建立联系。入围决赛者将受邀参加在香港举办的 专属颁奖典礼,主办方提供差旅支持,让设计师在国际舞台展示才华、拓展人脉,并共同庆祝创意成果。"
|
"text": "参赛者将有机会赢取总奖金 9,000 美元,作品还将获得国际媒体展示机会,并与全球设计师和行业领袖建立联系。入围决赛者将受邀参加在香港举办的 专属颁奖典礼,主办方提供差旅津贴,让设计师在国际舞台展示才华、拓展人脉,并共同庆祝创意成果。"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2386,16 +2386,6 @@ textarea:focus{
|
|||||||
// background: #ffffff;
|
// background: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 迷你滚动条
|
|
||||||
.mini-scrollbar {
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 0.4rem;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//蒙层样式
|
//蒙层样式
|
||||||
.mark_loading{
|
.mark_loading{
|
||||||
|
|||||||
@@ -2,21 +2,36 @@
|
|||||||
<div class="account_systemMessage">
|
<div class="account_systemMessage">
|
||||||
<div class="account_generalMessage_title modal_title_text">
|
<div class="account_generalMessage_title modal_title_text">
|
||||||
<!-- <span>系统消息</span> -->
|
<!-- <span>系统消息</span> -->
|
||||||
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
|
<div class="account_generalMessage_title_setting" @click="allRead">
|
||||||
|
{{ $t("account.AllRead") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
</div>
|
||||||
|
<div
|
||||||
|
class="account_generalMessage_item modal_title_text"
|
||||||
|
v-for="item in dataList"
|
||||||
|
:key="item.id"
|
||||||
|
@click="setRead(item)"
|
||||||
|
>
|
||||||
<a-badge :dot="item.isRead == 0"></a-badge>
|
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||||
<div class="account_generalMessage_item_title">
|
<div class="account_generalMessage_item_title">
|
||||||
<div class="account_generalMessage_item_title_text" :title="item.content">{{ item.content.title }}</div>
|
<div class="account_generalMessage_item_title_text" :title="item.content">
|
||||||
|
{{ item.content.title }}
|
||||||
|
</div>
|
||||||
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_title_text_intro">
|
<div class="modal_title_text_intro">
|
||||||
{{ item.content.content }}
|
{{ item.content.content }}
|
||||||
<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
|
<span v-if="item.content.link" class="account_generalMessage_item_link">{{
|
||||||
|
item.content.link
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="account_generalMessage_item modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
<div
|
||||||
{{$t('account.dataNull')}}
|
class="account_generalMessage_item modal_title_text"
|
||||||
|
style="display: flex; justify-content: center"
|
||||||
|
v-if="dataList.length == 0 && isNoData"
|
||||||
|
>
|
||||||
|
{{ $t("account.dataNull") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="page_loading_box" v-show="!isNoData">
|
<div class="page_loading_box" v-show="!isNoData">
|
||||||
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||||
@@ -27,117 +42,135 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
import {
|
||||||
import { Https } from "@/tool/https";
|
defineComponent,
|
||||||
import { useRouter,useRoute } from 'vue-router'
|
computed,
|
||||||
import { useStore } from "vuex";
|
ref,
|
||||||
import { useI18n } from 'vue-i18n'
|
reactive,
|
||||||
|
nextTick,
|
||||||
|
toRefs,
|
||||||
|
createVNode,
|
||||||
|
onMounted
|
||||||
|
} from "vue"
|
||||||
|
import { Https } from "@/tool/https"
|
||||||
|
import { useRouter, useRoute } from "vue-router"
|
||||||
|
import { useStore } from "vuex"
|
||||||
|
import { useI18n } from "vue-i18n"
|
||||||
|
import { isValidUrl } from "@/tool/util"
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components: {},
|
||||||
},
|
|
||||||
// emits:['putListData'],
|
// emits:['putListData'],
|
||||||
props:['setReadStatus','setAllmessage','getHistory'],
|
props: ["setReadStatus", "setAllmessage", "getHistory"],
|
||||||
setup(prop,{emit}) {
|
setup(prop, { emit }) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const store = useStore();
|
const store = useStore()
|
||||||
let accountMessage = reactive({
|
let accountMessage = reactive({
|
||||||
dataList: [],
|
dataList: [],
|
||||||
page:1,
|
page: 1,
|
||||||
size:10,
|
size: 10,
|
||||||
isNoData: false,
|
isNoData: false,
|
||||||
isShowMark: false,
|
isShowMark: false
|
||||||
})
|
})
|
||||||
let loadingDom:any = ref(null)
|
let loadingDom: any = ref(null)
|
||||||
let setmessageList = ()=>{
|
let setmessageList = () => {
|
||||||
accountMessage.isShowMark = true
|
accountMessage.isShowMark = true
|
||||||
let data = {
|
let data = {
|
||||||
page: accountMessage.page,
|
page: accountMessage.page,
|
||||||
size: accountMessage.size,
|
size: accountMessage.size
|
||||||
}
|
}
|
||||||
prop.getHistory(data).then((rv:any)=>{
|
prop.getHistory(data)
|
||||||
|
.then((rv: any) => {
|
||||||
accountMessage.isShowMark = false
|
accountMessage.isShowMark = false
|
||||||
|
|
||||||
if(rv.content.length == 0) {
|
if (rv.content.length == 0) {
|
||||||
accountMessage.isNoData = true
|
accountMessage.isNoData = true
|
||||||
}else{
|
} else {
|
||||||
rv.content.forEach((item:any) => {
|
rv.content.forEach((item: any) => {
|
||||||
item.content = JSON.parse(item.content)
|
item.content = JSON.parse(item.content)
|
||||||
});
|
})
|
||||||
accountMessage.dataList.push(...rv.content)
|
accountMessage.dataList.push(...rv.content)
|
||||||
}
|
}
|
||||||
}).catch(() => {
|
})
|
||||||
|
.catch(() => {
|
||||||
accountMessage.isShowMark = false
|
accountMessage.isShowMark = false
|
||||||
accountMessage.isNoData = true
|
accountMessage.isNoData = true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
let setRead = (item:any)=>{
|
let setRead = (item: any) => {
|
||||||
prop.setReadStatus(item).then((rv:any)=>{
|
let content = item.content.content
|
||||||
item.isRead = 1
|
if (isValidUrl(content)) {
|
||||||
}).catch((err:any)=>{
|
if (import.meta.env.VITE_APP_BASE_URL === "https://develop.api.aida.com.hk") {
|
||||||
})
|
content += "&env=dev"
|
||||||
}
|
}
|
||||||
let allRead = ()=>{
|
window.open(content, "_blank")
|
||||||
// emit('setAllmessage')
|
}
|
||||||
prop.setAllmessage().then(()=>{
|
|
||||||
accountMessage.dataList.forEach((item:any)=>{
|
prop.setReadStatus(item)
|
||||||
|
.then((rv: any) => {
|
||||||
item.isRead = 1
|
item.isRead = 1
|
||||||
})
|
})
|
||||||
}).catch((err:any)=>{
|
.catch((err: any) => {})
|
||||||
|
}
|
||||||
|
let allRead = () => {
|
||||||
|
// emit('setAllmessage')
|
||||||
|
prop.setAllmessage()
|
||||||
|
.then(() => {
|
||||||
|
accountMessage.dataList.forEach((item: any) => {
|
||||||
|
item.isRead = 1
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
.catch((err: any) => {})
|
||||||
}
|
}
|
||||||
// provide('exhibitionList',exhibitionList)
|
// provide('exhibitionList',exhibitionList)
|
||||||
onMounted (()=>{
|
onMounted(() => {
|
||||||
accountMessage.isNoData = false
|
accountMessage.isNoData = false
|
||||||
accountMessage.page = 0
|
accountMessage.page = 0
|
||||||
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
let imgParent: any = document.querySelector(".account_systemMessage .page_loading")
|
||||||
new IntersectionObserver(
|
new IntersectionObserver(
|
||||||
(entries, observer) => {
|
(entries, observer) => {
|
||||||
// 如果不是相交,则直接返回
|
// 如果不是相交,则直接返回
|
||||||
// console.log(entries[0]);
|
// console.log(entries[0]);
|
||||||
if (!entries[0].intersectionRatio) return;
|
if (!entries[0].intersectionRatio) return
|
||||||
accountMessage.page+=1
|
accountMessage.page += 1
|
||||||
setmessageList()
|
setmessageList()
|
||||||
},
|
}
|
||||||
// { root:worksPage }
|
// { root:worksPage }
|
||||||
).observe(loadingDom.value);
|
).observe(loadingDom.value)
|
||||||
})
|
})
|
||||||
return{
|
return {
|
||||||
...toRefs(accountMessage),
|
...toRefs(accountMessage),
|
||||||
setmessageList,
|
setmessageList,
|
||||||
setRead,
|
setRead,
|
||||||
allRead,
|
allRead,
|
||||||
loadingDom,
|
loadingDom
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data() {
|
||||||
return{
|
return {}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.account_systemMessage{
|
.account_systemMessage {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.account_generalMessage_item{
|
.account_generalMessage_item {
|
||||||
font-size: var(--aida-fsize1-6);
|
font-size: var(--aida-fsize1-6);
|
||||||
.account_generalMessage_item_title{
|
.account_generalMessage_item_title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
.account_generalMessage_item_title_text{
|
.account_generalMessage_item_title_text {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.modal_title_text_intro{
|
.modal_title_text_intro {
|
||||||
margin-left: 4rem;
|
margin-left: 4rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.modal_title_text_intro{
|
.modal_title_text_intro {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="admin_page">
|
<div class="admin_page">
|
||||||
<div class="admin_table_search" :style="{height:isAwayOrUnfold?'7rem':''}">
|
<div class="admin_table_search" :style="{ height: isAwayOrUnfold ? '7rem' : '' }">
|
||||||
<div class="admin_state">
|
<div class="admin_state">
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>Create Time:</span>
|
<span>Create Time:</span>
|
||||||
@@ -8,16 +8,11 @@
|
|||||||
style="width: 250px"
|
style="width: 250px"
|
||||||
class="range_picker"
|
class="range_picker"
|
||||||
v-model:value="rangePickerValue"
|
v-model:value="rangePickerValue"
|
||||||
:placeholder="[
|
:placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
|
||||||
$t('HistoryPage.StartDate'),
|
|
||||||
$t('HistoryPage.EndDate'),
|
|
||||||
]"
|
|
||||||
valueFormat="YYYY-MM-DD"
|
valueFormat="YYYY-MM-DD"
|
||||||
>
|
>
|
||||||
<template #suffixIcon>
|
<template #suffixIcon>
|
||||||
<span
|
<span class="icon iconfont range_picker_icon icon-rili"></span>
|
||||||
class="icon iconfont range_picker_icon icon-rili"
|
|
||||||
></span>
|
|
||||||
</template>
|
</template>
|
||||||
</a-range-picker>
|
</a-range-picker>
|
||||||
</div>
|
</div>
|
||||||
@@ -63,38 +58,50 @@
|
|||||||
show-search
|
show-search
|
||||||
></a-select>
|
></a-select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="admin_state_item">
|
||||||
|
<span>Orgnization:</span>
|
||||||
|
<a-select
|
||||||
|
v-model:value="organizationId"
|
||||||
|
placeholder="Select the organization"
|
||||||
|
allow-clear
|
||||||
|
style="width: 250px"
|
||||||
|
@popupScroll="handleOrganizationScroll"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in organizationOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:value="item.id"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_search">
|
<div class="admin_search">
|
||||||
<div class="admin_search_item" @click="searchHistoryList" :style="{height:isAwayOrUnfold?'4rem':''}">
|
<div
|
||||||
|
class="admin_search_item"
|
||||||
|
@click="searchHistoryList"
|
||||||
|
:style="{ height: isAwayOrUnfold ? '4rem' : '' }"
|
||||||
|
>
|
||||||
Search
|
Search
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_search_item" @click="addhHistoryList">
|
<div class="admin_search_item" @click="addhHistoryList">Add</div>
|
||||||
Add
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_state_list">
|
<div class="admin_state_list">
|
||||||
<div
|
<div class="admin_state_list_item" @click="lastGeTrialList('year')">
|
||||||
class="admin_state_list_item"
|
|
||||||
@click="lastGeTrialList('year')"
|
|
||||||
>
|
|
||||||
Nearly a year
|
Nearly a year
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="admin_state_list_item" @click="lastGeTrialList('month')">
|
||||||
class="admin_state_list_item"
|
|
||||||
@click="lastGeTrialList('month')"
|
|
||||||
>
|
|
||||||
Last month
|
Last month
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
|
||||||
class="admin_state_list_item"
|
|
||||||
@click="lastGeTrialList('week')"
|
|
||||||
>
|
|
||||||
Last week
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="awayOrUnfold" :class="{ active: isAwayOrUnfold }">
|
||||||
<div class="awayOrUnfold" :class="{active:isAwayOrUnfold}">
|
<span
|
||||||
<span class="icon iconfont menu_icon icon-xiala" @click="()=>isAwayOrUnfold = !isAwayOrUnfold"></span>
|
class="icon iconfont menu_icon icon-xiala"
|
||||||
|
@click="() => (isAwayOrUnfold = !isAwayOrUnfold)"
|
||||||
|
></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_table_content" ref="historyTable">
|
<div class="admin_table_content" ref="historyTable">
|
||||||
<a-table
|
<a-table
|
||||||
@@ -104,24 +111,19 @@
|
|||||||
:data-source="dataList"
|
:data-source="dataList"
|
||||||
:scroll="{ y: historyTableHeight }"
|
:scroll="{ y: historyTableHeight }"
|
||||||
@change="changePage"
|
@change="changePage"
|
||||||
:showSorterTooltip='false'
|
:showSorterTooltip="false"
|
||||||
:pagination="{
|
:pagination="{
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
current: currentPage,
|
current: currentPage,
|
||||||
pageSize: pageSize,
|
pageSize: pageSize,
|
||||||
total: total,
|
total: total,
|
||||||
showQuickJumper: true,
|
showQuickJumper: true,
|
||||||
bordered: false,
|
bordered: false
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #bodyCell="{ column, text, record, index }">
|
<template #bodyCell="{ column, text, record, index }">
|
||||||
<div class="operate_list" v-if="column?.Operations">
|
<div class="operate_list" v-if="column?.Operations">
|
||||||
<div
|
<div class="operate_item" @click="setAagree(record)">Edit</div>
|
||||||
class="operate_item"
|
|
||||||
@click="setAagree(record)"
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</div>
|
|
||||||
<!-- <div
|
<!-- <div
|
||||||
class="operate_item"
|
class="operate_item"
|
||||||
@click="deleteGroup(record, index)"
|
@click="deleteGroup(record, index)"
|
||||||
@@ -132,34 +134,29 @@
|
|||||||
</template>
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
</div>
|
</div>
|
||||||
<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue>
|
<allUserPoerationsVue
|
||||||
|
ref="allUserPoerationsVue"
|
||||||
|
@searchHistoryList="searchHistoryList"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {
|
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue"
|
||||||
defineComponent,
|
import { formatTime } from "@/tool/util"
|
||||||
ref,
|
import { useStore } from "vuex"
|
||||||
createVNode,
|
import { Https } from "@/tool/https"
|
||||||
computed,
|
import allUserPoerationsVue from "./allUserPoerations.vue"
|
||||||
reactive,
|
import SelectUser from "@/component/common/SelectUser.vue"
|
||||||
toRefs,
|
|
||||||
onMounted,
|
|
||||||
} from "vue";
|
|
||||||
import { formatTime } from "@/tool/util";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import allUserPoerationsVue from "./allUserPoerations.vue";
|
|
||||||
import SelectUser from '@/component/common/SelectUser.vue'
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {allUserPoerationsVue,SelectUser},
|
components: { allUserPoerationsVue, SelectUser },
|
||||||
setup() {
|
setup() {
|
||||||
const store:any = useStore()
|
const store: any = useStore()
|
||||||
let filter: any = reactive({
|
let filter: any = reactive({
|
||||||
dataList: [],
|
dataList: [],
|
||||||
tableLoading: false,
|
tableLoading: false,
|
||||||
allCountry:[],
|
allCountry: [],
|
||||||
isAwayOrUnfold:false
|
isAwayOrUnfold: false
|
||||||
});
|
})
|
||||||
let filterData: any = reactive({
|
let filterData: any = reactive({
|
||||||
rangePickerValue: [],
|
rangePickerValue: [],
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
@@ -172,40 +169,41 @@ export default defineComponent({
|
|||||||
occupation: "",
|
occupation: "",
|
||||||
systemUser: "",
|
systemUser: "",
|
||||||
order: "", //'Ascending 升序 Descending 降序'
|
order: "", //'Ascending 升序 Descending 降序'
|
||||||
orderBy:'',
|
orderBy: "",
|
||||||
userName: "",
|
userName: "",
|
||||||
});
|
organizationId: null
|
||||||
|
})
|
||||||
let state: any = ref([
|
let state: any = ref([
|
||||||
{
|
{
|
||||||
label: "all",
|
label: "all",
|
||||||
value: "",
|
value: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'visitor',
|
label: "visitor",
|
||||||
value:'0',
|
value: "0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'yearly',
|
label: "yearly",
|
||||||
value:'1',
|
value: "1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'monthly',
|
label: "monthly",
|
||||||
value:'2',
|
value: "2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'trial',
|
label: "trial",
|
||||||
value:'3',
|
value: "3"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "userInEvent",
|
label: "userInEvent",
|
||||||
value: "4",
|
value: "4"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Edu Admin",
|
label: "Edu Admin",
|
||||||
value: "7",
|
value: "7"
|
||||||
},
|
}
|
||||||
]);
|
])
|
||||||
let renameData: any = ref({}); //修改名字选中的数据
|
let renameData: any = ref({}) //修改名字选中的数据
|
||||||
const columns: any = computed(() => {
|
const columns: any = computed(() => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -213,25 +211,25 @@ export default defineComponent({
|
|||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
key: "id",
|
key: "id",
|
||||||
width:100,
|
width: 100,
|
||||||
fixed: "left",
|
fixed: "left",
|
||||||
sorter: true,
|
sorter: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Email",
|
title: "Email",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "userEmail",
|
dataIndex: "userEmail",
|
||||||
key: "userEmail",
|
key: "userEmail",
|
||||||
width:200,
|
width: 200,
|
||||||
ellipsis:true
|
ellipsis: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "User Name",
|
title: "User Name",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "userName",
|
dataIndex: "userName",
|
||||||
key: "userName",
|
key: "userName",
|
||||||
width:150,
|
width: 150,
|
||||||
ellipsis:true
|
ellipsis: true
|
||||||
// customRender: (record: any) => {
|
// customRender: (record: any) => {
|
||||||
// let time = formatTime(
|
// let time = formatTime(
|
||||||
// record.text / 1000,
|
// record.text / 1000,
|
||||||
@@ -245,77 +243,77 @@ export default defineComponent({
|
|||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "language",
|
dataIndex: "language",
|
||||||
key: "language",
|
key: "language",
|
||||||
width:100,
|
width: 100,
|
||||||
ellipsis:true,
|
ellipsis: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Valid Start Time",
|
title: "Valid Start Time",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "validStartTime",
|
dataIndex: "validStartTime",
|
||||||
key: "validstartTime",
|
key: "validstartTime",
|
||||||
width:200,
|
width: 200,
|
||||||
ellipsis:true,
|
ellipsis: true,
|
||||||
customRender: (record: any) => {
|
customRender: (record: any) => {
|
||||||
let time = ''
|
let time = ""
|
||||||
if(record.text){
|
if (record.text) {
|
||||||
time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
|
||||||
}
|
}
|
||||||
return time
|
return time
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Valid End Time",
|
title: "Valid End Time",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "validEndTime",
|
dataIndex: "validEndTime",
|
||||||
key: "validendTime",
|
key: "validendTime",
|
||||||
width:200,
|
width: 200,
|
||||||
ellipsis:true,
|
ellipsis: true,
|
||||||
customRender: (record: any) => {
|
customRender: (record: any) => {
|
||||||
let time = ''
|
let time = ""
|
||||||
if(record.text){
|
if (record.text) {
|
||||||
time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
|
||||||
}
|
}
|
||||||
return time
|
return time
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Country or Region",
|
title: "Country or Region",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "country",
|
dataIndex: "country",
|
||||||
key: "country",
|
key: "country",
|
||||||
width:200,
|
width: 200
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Create Date",
|
title: "Create Date",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "createDate",
|
dataIndex: "createDate",
|
||||||
key: "createDate",
|
key: "createDate",
|
||||||
width:200,
|
width: 200,
|
||||||
sorter: true,
|
sorter: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Is Beginner",
|
title: "Is Beginner",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "isBeginner",
|
dataIndex: "isBeginner",
|
||||||
key: "isBeginner",
|
key: "isBeginner",
|
||||||
width:80,
|
width: 80,
|
||||||
ellipsis:true,
|
ellipsis: true,
|
||||||
customRender: (record: any) => {
|
customRender: (record: any) => {
|
||||||
let str;
|
let str
|
||||||
if (record.value == 1) {
|
if (record.value == 1) {
|
||||||
str = "Yes";
|
str = "Yes"
|
||||||
} else {
|
} else {
|
||||||
str = "No";
|
str = "No"
|
||||||
|
}
|
||||||
|
return str
|
||||||
}
|
}
|
||||||
return str;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Machine Room Ip',
|
title: "Machine Room Ip",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "browserIdentifiers",
|
dataIndex: "browserIdentifiers",
|
||||||
key: "browserIdentifiers",
|
key: "browserIdentifiers",
|
||||||
width:200,
|
width: 200
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Credits",
|
title: "Credits",
|
||||||
@@ -326,11 +324,11 @@ export default defineComponent({
|
|||||||
// resizable: true,
|
// resizable: true,
|
||||||
dataIndex: "credits",
|
dataIndex: "credits",
|
||||||
key: "credits",
|
key: "credits",
|
||||||
width:100,
|
width: 100,
|
||||||
sorter: true,
|
sorter: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'User Type',
|
title: "User Type",
|
||||||
align: "center",
|
align: "center",
|
||||||
// width: 150,
|
// width: 150,
|
||||||
// minWidth: 100,
|
// minWidth: 100,
|
||||||
@@ -338,84 +336,84 @@ export default defineComponent({
|
|||||||
// resizable: true,
|
// resizable: true,
|
||||||
dataIndex: "systemUser",
|
dataIndex: "systemUser",
|
||||||
key: "systemUser",
|
key: "systemUser",
|
||||||
width:100,
|
width: 100,
|
||||||
customRender: (record: any) => {
|
customRender: (record: any) => {
|
||||||
let str;
|
let str
|
||||||
if (record.value == 0) {
|
if (record.value == 0) {
|
||||||
str = "visitor";
|
str = "visitor"
|
||||||
} else if (record.value == 1) {
|
} else if (record.value == 1) {
|
||||||
str = "yearly";
|
str = "yearly"
|
||||||
} else if (record.value == 2) {
|
} else if (record.value == 2) {
|
||||||
str = "monthly";
|
str = "monthly"
|
||||||
} else if (record.value == 3) {
|
} else if (record.value == 3) {
|
||||||
str = "trial";
|
str = "trial"
|
||||||
} else if (record.value == 4) {
|
} else if (record.value == 4) {
|
||||||
str = "userInEvent";
|
str = "userInEvent"
|
||||||
} else if (record.value == 7) {
|
} else if (record.value == 7) {
|
||||||
str = "Edu Admin";
|
str = "Edu Admin"
|
||||||
|
}
|
||||||
|
return str
|
||||||
}
|
}
|
||||||
return str;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Operations",
|
title: "Operations",
|
||||||
key: "operation",
|
key: "operation",
|
||||||
width:120,
|
width: 120,
|
||||||
align: "center",
|
align: "center",
|
||||||
fixed: "right",
|
fixed: "right",
|
||||||
// slots:{customRender:'action'}
|
// slots:{customRender:'action'}
|
||||||
Operations: true,
|
Operations: true
|
||||||
},
|
}
|
||||||
];
|
]
|
||||||
});
|
})
|
||||||
//改变页码
|
//改变页码
|
||||||
let changePage = (e: any, filters:any, sorter:any) => {
|
let changePage = (e: any, filters: any, sorter: any) => {
|
||||||
filterData.currentPage = e.current;
|
filterData.currentPage = e.current
|
||||||
filterData.pageSize = e.pageSize;
|
filterData.pageSize = e.pageSize
|
||||||
if(sorter.order){
|
if (sorter.order) {
|
||||||
if(sorter.columnKey == 'id'){
|
if (sorter.columnKey == "id") {
|
||||||
filterData.orderBy = 'id'
|
filterData.orderBy = "id"
|
||||||
}else if(sorter.columnKey == "createDate"){
|
} else if (sorter.columnKey == "createDate") {
|
||||||
filterData.orderBy = 'time'
|
filterData.orderBy = "time"
|
||||||
}else if(sorter.columnKey == "credits"){
|
} else if (sorter.columnKey == "credits") {
|
||||||
filterData.orderBy = 'credits'
|
filterData.orderBy = "credits"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(sorter.order){
|
if (sorter.order) {
|
||||||
filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
|
filterData.order = sorter.order == "descend" ? "Descending" : "Ascending"
|
||||||
}else{
|
} else {
|
||||||
filterData.order = ''
|
filterData.order = ""
|
||||||
|
}
|
||||||
|
gettrialList()
|
||||||
}
|
}
|
||||||
gettrialList();
|
|
||||||
};
|
|
||||||
|
|
||||||
//查询列表
|
//查询列表
|
||||||
let searchHistoryList = () => {
|
let searchHistoryList = () => {
|
||||||
filterData.currentPage = 1;
|
filterData.currentPage = 1
|
||||||
gettrialList();
|
gettrialList()
|
||||||
};
|
}
|
||||||
let clearHistoryList = () => {
|
let clearHistoryList = () => {
|
||||||
filterData.rangePickerValue = [],
|
;((filterData.rangePickerValue = []),
|
||||||
filterData.currentPage = 1,
|
(filterData.currentPage = 1),
|
||||||
filterData.pageSize = 10,
|
(filterData.pageSize = 10),
|
||||||
filterData.total = 0,
|
(filterData.total = 0),
|
||||||
filterData.country = "",
|
(filterData.country = ""),
|
||||||
filterData.email = "",
|
(filterData.email = ""),
|
||||||
filterData.userType = "",
|
(filterData.userType = ""),
|
||||||
filterData.ids = [],
|
(filterData.ids = []),
|
||||||
filterData.occupation = "",
|
(filterData.occupation = ""),
|
||||||
filterData.order = "", //'Ascending 升序 Descending 降序'
|
(filterData.order = ""), //'Ascending 升序 Descending 降序'
|
||||||
filterData.orderBy = "", //'Ascending 升序 Descending 降序'
|
(filterData.orderBy = ""), //'Ascending 升序 Descending 降序'
|
||||||
filterData.systemUser = "",
|
(filterData.systemUser = ""),
|
||||||
filterData.userName = "";
|
(filterData.userName = ""))
|
||||||
};
|
}
|
||||||
let setHistoryListData = () => {
|
let setHistoryListData = () => {
|
||||||
let startDate: any = filterData.rangePickerValue?.[0]
|
let startDate: any = filterData.rangePickerValue?.[0]
|
||||||
? filterData.rangePickerValue[0] + " " + "00:00:00"
|
? filterData.rangePickerValue[0] + " " + "00:00:00"
|
||||||
: "";
|
: ""
|
||||||
let endDate: any = filterData.rangePickerValue?.[1]
|
let endDate: any = filterData.rangePickerValue?.[1]
|
||||||
? filterData.rangePickerValue[1] + " " + "23:59:59"
|
? filterData.rangePickerValue[1] + " " + "23:59:59"
|
||||||
: "";
|
: ""
|
||||||
let data = {
|
let data = {
|
||||||
endTime: endDate,
|
endTime: endDate,
|
||||||
startTime: startDate,
|
startTime: startDate,
|
||||||
@@ -430,63 +428,118 @@ export default defineComponent({
|
|||||||
order: filterData.order,
|
order: filterData.order,
|
||||||
orderBy: filterData.orderBy,
|
orderBy: filterData.orderBy,
|
||||||
userName: filterData.userName,
|
userName: filterData.userName,
|
||||||
};
|
organizationId: filterData.organizationId
|
||||||
return data;
|
}
|
||||||
};
|
return data
|
||||||
|
}
|
||||||
//获取列表
|
//获取列表
|
||||||
let gettrialList = () => {
|
let gettrialList = () => {
|
||||||
filter.tableLoading = true;
|
filter.tableLoading = true
|
||||||
let data = setHistoryListData();
|
let data = setHistoryListData()
|
||||||
Https.axiosPost(Https.httpUrls.getUserInfo, data).then(
|
Https.axiosPost(Https.httpUrls.getUserInfo, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
// this.dataList = rv
|
// this.dataList = rv
|
||||||
filter.dataList = rv.records;
|
filter.dataList = rv.records
|
||||||
filterData.total = rv.total;
|
filterData.total = rv.total
|
||||||
filter.tableLoading = false;
|
filter.tableLoading = false
|
||||||
|
|
||||||
// this.workspaceItem.position = this.singleTypeList[0].label
|
// this.workspaceItem.position = this.singleTypeList[0].label
|
||||||
}
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
);
|
|
||||||
};
|
|
||||||
let lastGeTrialList = (str: string) => {
|
let lastGeTrialList = (str: string) => {
|
||||||
clearHistoryList();
|
clearHistoryList()
|
||||||
let currentDate = new Date();
|
let currentDate = new Date()
|
||||||
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
|
let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
|
||||||
// 计算30天前的时间戳
|
// 计算30天前的时间戳
|
||||||
let thirtyDaysAgoTimestamp;
|
let thirtyDaysAgoTimestamp
|
||||||
if (str == "year") {
|
if (str == "year") {
|
||||||
thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
|
thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
|
||||||
} else if (str == "month") {
|
} else if (str == "month") {
|
||||||
thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
|
thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
|
||||||
} else if (str == "week") {
|
} else if (str == "week") {
|
||||||
thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
|
thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60
|
||||||
|
}
|
||||||
|
filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp, "YYYY-MM-DD")
|
||||||
|
gettrialList()
|
||||||
}
|
}
|
||||||
filterData.rangePickerValue[0] = formatTime(
|
|
||||||
thirtyDaysAgoTimestamp,
|
|
||||||
"YYYY-MM-DD"
|
|
||||||
);
|
|
||||||
gettrialList();
|
|
||||||
};
|
|
||||||
let filterOption = (input: any, option: any) => {
|
let filterOption = (input: any, option: any) => {
|
||||||
// 使用 option.label 进行搜索
|
// 使用 option.label 进行搜索
|
||||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
};
|
}
|
||||||
let addhHistoryList = () => {
|
let addhHistoryList = () => {
|
||||||
allUserPoerationsVue.value.init('Add','')
|
allUserPoerationsVue.value.init("Add", "")
|
||||||
};
|
}
|
||||||
let allUserPoerationsVue = ref()
|
let allUserPoerationsVue = ref()
|
||||||
let setAagree = (data:any) =>{
|
let setAagree = (data: any) => {
|
||||||
allUserPoerationsVue.value.init('Edit',data)
|
allUserPoerationsVue.value.init("Edit", data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const organizationOptions = ref([])
|
||||||
|
const organizationParams = reactive({
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
})
|
||||||
|
const organizationLoading = ref(false)
|
||||||
|
const getOrganizationList = async (isLoadMore = false) => {
|
||||||
|
console.log("111111")
|
||||||
|
if (organizationLoading.value) return
|
||||||
|
if (isLoadMore) {
|
||||||
|
const loaded = organizationParams.page * organizationParams.size
|
||||||
|
if (organizationParams.total && loaded >= organizationParams.total) return
|
||||||
|
organizationParams.page += 1
|
||||||
|
} else {
|
||||||
|
organizationParams.page = 1
|
||||||
|
organizationOptions.value = []
|
||||||
|
}
|
||||||
|
organizationLoading.value = true
|
||||||
|
try {
|
||||||
|
const { total, ...requestParams } = organizationParams
|
||||||
|
const rv: any = await Https.axiosPost(
|
||||||
|
Https.httpUrls.queryOrganization,
|
||||||
|
requestParams
|
||||||
|
)
|
||||||
|
if (rv) {
|
||||||
|
const newRecords = rv.records || []
|
||||||
|
// 遍历新数据,如果已存在则覆盖,不存在则追加
|
||||||
|
newRecords.forEach((newOrg: any) => {
|
||||||
|
const newOrgId = String(newOrg.id)
|
||||||
|
const existingIndex = organizationOptions.value.findIndex(
|
||||||
|
(org: any) => String(org.id) === newOrgId
|
||||||
|
)
|
||||||
|
if (existingIndex !== -1) {
|
||||||
|
// 如果已存在,用新数据覆盖旧项
|
||||||
|
organizationOptions.value[existingIndex] = newOrg
|
||||||
|
} else {
|
||||||
|
// 如果不存在,追加到末尾
|
||||||
|
organizationOptions.value.push(newOrg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
organizationParams.total = rv.total || 0
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
organizationLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleOrganizationScroll = (e: any) => {
|
||||||
|
const target = e?.target
|
||||||
|
if (!target) return
|
||||||
|
const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
|
||||||
|
if (nearBottom) {
|
||||||
|
getOrganizationList(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
let allCountry: any = sessionStorage.getItem("allCountry");
|
let allCountry: any = sessionStorage.getItem("allCountry")
|
||||||
if (allCountry) {
|
if (allCountry) {
|
||||||
filter.allCountry = JSON.parse(allCountry);
|
filter.allCountry = JSON.parse(allCountry)
|
||||||
}
|
}
|
||||||
gettrialList();
|
gettrialList()
|
||||||
});
|
getOrganizationList()
|
||||||
|
})
|
||||||
return {
|
return {
|
||||||
...toRefs(filter),
|
...toRefs(filter),
|
||||||
...toRefs(filterData),
|
...toRefs(filterData),
|
||||||
@@ -501,29 +554,32 @@ export default defineComponent({
|
|||||||
filterOption,
|
filterOption,
|
||||||
allUserPoerationsVue,
|
allUserPoerationsVue,
|
||||||
setAagree,
|
setAagree,
|
||||||
};
|
handleOrganizationScroll,
|
||||||
|
getOrganizationList,
|
||||||
|
organizationOptions,
|
||||||
|
organizationParams
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
historyTableHeight: 0,
|
historyTableHeight: 0,
|
||||||
handleResizeColumn: (w: any, col: any) => {
|
handleResizeColumn: (w: any, col: any) => {
|
||||||
col.width = w;
|
col.width = w
|
||||||
},
|
}
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let historyTable: any = this.$refs.historyTable;
|
let historyTable: any = this.$refs.historyTable
|
||||||
this.historyTableHeight = historyTable.clientHeight - 200;
|
this.historyTableHeight = historyTable.clientHeight - 200
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {}
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.admin_page .admin_table_search .admin_state {
|
.admin_page .admin_table_search .admin_state {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.admin_page{
|
.admin_page {
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -321,6 +321,7 @@ export default defineComponent({
|
|||||||
data = setEditData()
|
data = setEditData()
|
||||||
if (!data.userName || !data.userEmail || !data.validEndTime || !data.systemUser)
|
if (!data.userName || !data.userEmail || !data.validEndTime || !data.systemUser)
|
||||||
return message.warning('Please check the input box marked with *')
|
return message.warning('Please check the input box marked with *')
|
||||||
|
delete data.userName
|
||||||
Https.axiosPost(Https.httpUrls.modifyUser, {}, { params: data }).then(rv => {
|
Https.axiosPost(Https.httpUrls.modifyUser, {}, { params: data }).then(rv => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
cancelDsign()
|
cancelDsign()
|
||||||
|
|||||||
99
src/component/Administrator/globalAwardPopularity.vue
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
<template>
|
||||||
|
<div class="admin_page globalAwardPopularity" ref="adminPage">
|
||||||
|
<div class="admin_table_search">
|
||||||
|
<div class="admin_state">
|
||||||
|
<div class="admin_state_item">
|
||||||
|
<span>Current Time:</span>
|
||||||
|
<span>{{ currentTimeStr }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="admin_state_item">
|
||||||
|
<span>Raw Visi Count:</span>
|
||||||
|
<span>{{ rawVisitCount }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="admin_state_item">
|
||||||
|
<span>Unique Visit Count:</span>
|
||||||
|
<span>{{ uniqueVisitCount }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="admin_search">
|
||||||
|
<div class="admin_search_item" @click="getGlobalAwardPopularity">
|
||||||
|
<i class="fi fi-br-refresh"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="admin_table_content" ref="questionnaireTable">
|
||||||
|
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, createVNode,toRefs, computed,reactive, onMounted, nextTick } from "vue";
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import type { TableColumnsType } from 'ant-design-vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {},
|
||||||
|
setup() {
|
||||||
|
const currentTime = ref(new Date())
|
||||||
|
const currentTimeStr = computed(()=>{
|
||||||
|
return currentTime.value.toLocaleString()
|
||||||
|
})
|
||||||
|
const rawVisitCount = ref(0)
|
||||||
|
const uniqueVisitCount = ref(0)
|
||||||
|
const getGlobalAwardPopularity = () => {
|
||||||
|
Https.axiosGet(Https.httpUrls.getGlobalAwardPopularity,).then((rv)=>{
|
||||||
|
currentTime.value = new Date()
|
||||||
|
rawVisitCount.value = rv.rawVisitCount
|
||||||
|
uniqueVisitCount.value = rv.uniqueVisitCount
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
getGlobalAwardPopularity()
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
currentTimeStr,
|
||||||
|
getGlobalAwardPopularity,
|
||||||
|
rawVisitCount,
|
||||||
|
uniqueVisitCount,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.admin_page.globalAwardPopularity{
|
||||||
|
.admin_table_search{
|
||||||
|
// flex: 1;
|
||||||
|
width: min-content;
|
||||||
|
justify-content: flex-start;
|
||||||
|
border-radius: 2rem;
|
||||||
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
|
||||||
|
margin-left: 2rem;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
.admin_state{
|
||||||
|
flex-direction: column;
|
||||||
|
width: auto;
|
||||||
|
cursor: auto;
|
||||||
|
.admin_state_item{
|
||||||
|
> span{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.admin_search{
|
||||||
|
i{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -55,6 +55,7 @@ commandManager.setChangeCallback((info) => {
|
|||||||
emit("undo-redo-status-changed", {
|
emit("undo-redo-status-changed", {
|
||||||
canUndo: canUndo.value,
|
canUndo: canUndo.value,
|
||||||
canRedo: canRedo.value,
|
canRedo: canRedo.value,
|
||||||
|
type: info.type,
|
||||||
commandManager,
|
commandManager,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -907,7 +907,8 @@
|
|||||||
}
|
}
|
||||||
emit("changeCanvas", commandData)
|
emit("changeCanvas", commandData)
|
||||||
canvasManager.changeCanvas()
|
canvasManager.changeCanvas()
|
||||||
if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
|
const type = command.type
|
||||||
|
if (props.enabledRedGreenMode && (type === "undo" || type === "redo")) {
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
try {
|
try {
|
||||||
const imageData = await canvasManager.exportImage({
|
const imageData = await canvasManager.exportImage({
|
||||||
@@ -1040,6 +1041,7 @@
|
|||||||
},
|
},
|
||||||
// 导出图片
|
// 导出图片
|
||||||
exportImage: async ({
|
exportImage: async ({
|
||||||
|
isFrontBackUpdata = false, // 更新红绿图时候需要用,直接更新红绿图
|
||||||
isContainBg = false, // 是否包含背景图层
|
isContainBg = false, // 是否包含背景图层
|
||||||
isContainFixed = false, // 是否包含固定图层
|
isContainFixed = false, // 是否包含固定图层
|
||||||
isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
|
isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
|
||||||
@@ -1056,6 +1058,10 @@
|
|||||||
} = {}) => {
|
} = {}) => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
canvasManager?.canvas?.discardActiveObject()
|
canvasManager?.canvas?.discardActiveObject()
|
||||||
|
if (isFrontBackUpdata) {
|
||||||
|
await canvasManager?.setSpecialCliptInfo(true, true)
|
||||||
|
canvasManager.canvas.renderAll()
|
||||||
|
}
|
||||||
var base64 = await canvasManager.exportImage({
|
var base64 = await canvasManager.exportImage({
|
||||||
isContainBg,
|
isContainBg,
|
||||||
isContainFixed,
|
isContainFixed,
|
||||||
|
|||||||
@@ -409,7 +409,7 @@ export class BrushIndicator {
|
|||||||
// this.show(e.e);
|
// this.show(e.e);
|
||||||
this._mouseEnterHandler && this._mouseEnterHandler(e)
|
this._mouseEnterHandler && this._mouseEnterHandler(e)
|
||||||
} else {
|
} else {
|
||||||
// requestIdleCallback(() => {
|
// setTimeout(() => {
|
||||||
// this.updatePosition(e.e);
|
// this.updatePosition(e.e);
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ import { getObjectAlphaToCanvas } from "../utils/objectHelper";
|
|||||||
import { AddLayerCommand, RemoveLayerCommand, ToggleChildLayerVisibilityCommand } from "../commands/LayerCommands";
|
import { AddLayerCommand, RemoveLayerCommand, ToggleChildLayerVisibilityCommand } from "../commands/LayerCommands";
|
||||||
import { fa, id } from "element-plus/es/locales.mjs";
|
import { fa, id } from "element-plus/es/locales.mjs";
|
||||||
import i18n from "@/lang/index.ts";
|
import i18n from "@/lang/index.ts";
|
||||||
const {t} = i18n.global;
|
const { t } = i18n.global;
|
||||||
|
|
||||||
export class CanvasManager {
|
export class CanvasManager {
|
||||||
constructor(canvasElement, options) {
|
constructor(canvasElement, options) {
|
||||||
@@ -70,7 +70,7 @@ export class CanvasManager {
|
|||||||
this.handleCanvasInit = null; // 画布初始化回调函数
|
this.handleCanvasInit = null; // 画布初始化回调函数
|
||||||
this.partManager = options.partManager || null;
|
this.partManager = options.partManager || null;
|
||||||
this.props = options.props || {};
|
this.props = options.props || {};
|
||||||
this.emit = options.emit || (() => {});
|
this.emit = options.emit || (() => { });
|
||||||
this.awaitCanvasRun = null;
|
this.awaitCanvasRun = null;
|
||||||
this.canvasChangeing = false;
|
this.canvasChangeing = false;
|
||||||
// 初始化画布
|
// 初始化画布
|
||||||
@@ -176,9 +176,9 @@ export class CanvasManager {
|
|||||||
// 添加笔刷图像转换处理回调
|
// 添加笔刷图像转换处理回调
|
||||||
this.canvas.onBrushImageConverted = async (fabricImage) => {
|
this.canvas.onBrushImageConverted = async (fabricImage) => {
|
||||||
const activeTool = this.toolManager?.activeTool?.value;
|
const activeTool = this.toolManager?.activeTool?.value;
|
||||||
if(activeTool === OperationType.PART_BRUSH){
|
if (activeTool === OperationType.PART_BRUSH) {
|
||||||
this.partManager?.addDrawPartImage(fabricImage);
|
this.partManager?.addDrawPartImage(fabricImage);
|
||||||
}else{
|
} else {
|
||||||
await this.addImageToLayer({ fabricImage, targetLayerId: null });
|
await this.addImageToLayer({ fabricImage, targetLayerId: null });
|
||||||
}
|
}
|
||||||
// 返回false表示使用默认行为(直接添加到画布)
|
// 返回false表示使用默认行为(直接添加到画布)
|
||||||
@@ -203,7 +203,7 @@ export class CanvasManager {
|
|||||||
// 可以在这里保存状态到命令管理器
|
// 可以在这里保存状态到命令管理器
|
||||||
const affectedObjects = e.targets || [];
|
const affectedObjects = e.targets || [];
|
||||||
const activeTool = this.toolManager?.activeTool?.value;
|
const activeTool = this.toolManager?.activeTool?.value;
|
||||||
if(activeTool === OperationType.PART_ERASER){
|
if (activeTool === OperationType.PART_ERASER) {
|
||||||
return this.partManager?.onErasingEnd(affectedObjects);
|
return this.partManager?.onErasingEnd(affectedObjects);
|
||||||
}
|
}
|
||||||
const command = this.eraserStateManager.endErasing(affectedObjects);
|
const command = this.eraserStateManager.endErasing(affectedObjects);
|
||||||
@@ -461,7 +461,7 @@ export class CanvasManager {
|
|||||||
// this.canvas.renderAll();
|
// this.canvas.renderAll();
|
||||||
}
|
}
|
||||||
// 重置画布大小参照固定图层
|
// 重置画布大小参照固定图层
|
||||||
async resetCanvasSizeByFixedLayer(){
|
async resetCanvasSizeByFixedLayer() {
|
||||||
// 重置画布大小为固定图层的大小
|
// 重置画布大小为固定图层的大小
|
||||||
const fixedLayerObj = this.getFixedLayerObject();
|
const fixedLayerObj = this.getFixedLayerObject();
|
||||||
const backgroundObject = this.getBackgroundLayerObject();
|
const backgroundObject = this.getBackgroundLayerObject();
|
||||||
@@ -475,10 +475,10 @@ export class CanvasManager {
|
|||||||
fixedLayerObj.height,
|
fixedLayerObj.height,
|
||||||
fixedLayerObj.scaleY,
|
fixedLayerObj.scaleY,
|
||||||
backgroundObject.width,
|
backgroundObject.width,
|
||||||
backgroundObject.scaleX,
|
backgroundObject.scaleX,
|
||||||
backgroundObject.height,
|
backgroundObject.height,
|
||||||
backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
backgroundObject.scaleY, 'CanvasManager resetCanvasSizeByFixedLayer')
|
||||||
if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return;
|
if (Math.abs(fwidth / bwidth - fheight / bheight) < 0.1) return;
|
||||||
this.canvasWidth.value = fwidth
|
this.canvasWidth.value = fwidth
|
||||||
this.canvasHeight.value = fheight
|
this.canvasHeight.value = fheight
|
||||||
backgroundObject.set({
|
backgroundObject.set({
|
||||||
@@ -489,7 +489,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
width: this.canvasWidth.value,
|
width: this.canvasWidth.value,
|
||||||
height: this.canvasHeight.value,
|
height: this.canvasHeight.value,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 重置视图变换,使元素回到原始位置
|
* 重置视图变换,使元素回到原始位置
|
||||||
* @private
|
* @private
|
||||||
@@ -623,17 +623,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
this.updateMaskPosition(backgroundObject);
|
this.updateMaskPosition(backgroundObject);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新颜色层信息
|
this.setSpecialCliptInfo(false, true)
|
||||||
// const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
|
|
||||||
// if(colorObject){
|
|
||||||
// await this.setObjecCliptInfo(colorObject);
|
|
||||||
// }
|
|
||||||
const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
|
|
||||||
if(groupLayer){
|
|
||||||
const groupRect = new fabric.Rect({});
|
|
||||||
await this.setObjecCliptInfo(groupRect);
|
|
||||||
groupLayer.clippingMask = groupRect.toObject();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重新渲染画布
|
// 重新渲染画布
|
||||||
this.canvas.renderAll();
|
this.canvas.renderAll();
|
||||||
@@ -868,7 +858,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
|
|
||||||
return layerObjectByLayerId;
|
return layerObjectByLayerId;
|
||||||
}
|
}
|
||||||
getObjectsByIdOrLayerId(ids){
|
getObjectsByIdOrLayerId(ids) {
|
||||||
const objects = this.canvas.getObjects().filter((obj) => {
|
const objects = this.canvas.getObjects().filter((obj) => {
|
||||||
return ids.includes(obj.id) || ids.includes(obj.layerId);
|
return ids.includes(obj.id) || ids.includes(obj.layerId);
|
||||||
});
|
});
|
||||||
@@ -1035,16 +1025,16 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
|
|
||||||
// 处理特殊图层的显示状态
|
// 处理特殊图层的显示状态
|
||||||
const ptlids = [];
|
const ptlids = [];
|
||||||
if(!enhancedOptions.isPrintTrimsNoRepeat || !enhancedOptions.isPrintTrimsRepeat){
|
if (!enhancedOptions.isPrintTrimsNoRepeat || !enhancedOptions.isPrintTrimsRepeat) {
|
||||||
let layers = this.layers?.value?.find((layer) => layer.isPrintTrimsGroup)?.children || [];
|
let layers = this.layers?.value?.find((layer) => layer.isPrintTrimsGroup)?.children || [];
|
||||||
for(let layer of layers){
|
for (let layer of layers) {
|
||||||
if(!layer.visible) continue;
|
if (!layer.visible) continue;
|
||||||
let repeat = layer.fabricObjects?.[0]?.fill?.repeat || "no-repeat";
|
let repeat = layer.fabricObjects?.[0]?.fill?.repeat || "no-repeat";
|
||||||
if(typeof repeat !== "string") repeat = "no-repeat";
|
if (typeof repeat !== "string") repeat = "no-repeat";
|
||||||
if(repeat === "no-repeat"){
|
if (repeat === "no-repeat") {
|
||||||
if(enhancedOptions.isPrintTrimsNoRepeat) continue;
|
if (enhancedOptions.isPrintTrimsNoRepeat) continue;
|
||||||
}else{
|
} else {
|
||||||
if(enhancedOptions.isPrintTrimsRepeat) continue;
|
if (enhancedOptions.isPrintTrimsRepeat) continue;
|
||||||
}
|
}
|
||||||
ptlids.push(layer.id);
|
ptlids.push(layer.id);
|
||||||
const command = new ToggleChildLayerVisibilityCommand({
|
const command = new ToggleChildLayerVisibilityCommand({
|
||||||
@@ -1059,8 +1049,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
}
|
}
|
||||||
const res = await this.exportManager.exportImage(enhancedOptions);
|
const res = await this.exportManager.exportImage(enhancedOptions);
|
||||||
// 恢复特殊图层的显示状态
|
// 恢复特殊图层的显示状态
|
||||||
if(ptlids.length > 0){
|
if (ptlids.length > 0) {
|
||||||
for(let id of ptlids){
|
for (let id of ptlids) {
|
||||||
const command = new ToggleChildLayerVisibilityCommand({
|
const command = new ToggleChildLayerVisibilityCommand({
|
||||||
canvas: this.canvas,
|
canvas: this.canvas,
|
||||||
layers: this.layers,
|
layers: this.layers,
|
||||||
@@ -1086,7 +1076,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
// 导出颜色图层信息
|
// 导出颜色图层信息
|
||||||
const color = await this.exportColorLayer().catch(() => (null));
|
const color = await this.exportColorLayer().catch(() => (null));
|
||||||
// 导出印花和元素图层信息
|
// 导出印花和元素图层信息
|
||||||
const printTrimsData = await this.exportPrintTrimsLayers().catch(() => ({prints: null, trims: null}));
|
const printTrimsData = await this.exportPrintTrimsLayers().catch(() => ({ prints: null, trims: null }));
|
||||||
|
|
||||||
const obj = {
|
const obj = {
|
||||||
color,
|
color,
|
||||||
@@ -1106,7 +1096,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
return Promise.reject("颜色图层不存在");
|
return Promise.reject("颜色图层不存在");
|
||||||
}
|
}
|
||||||
const object = this.getLayerObjectById(SpecialLayerId.COLOR);
|
const object = this.getLayerObjectById(SpecialLayerId.COLOR);
|
||||||
if(!object){
|
if (!object) {
|
||||||
console.warn("颜色图层不存在,请确保已添加颜色图层");
|
console.warn("颜色图层不存在,请确保已添加颜色图层");
|
||||||
return Promise.reject("颜色图层不存在");
|
return Promise.reject("颜色图层不存在");
|
||||||
}
|
}
|
||||||
@@ -1137,7 +1127,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
});
|
});
|
||||||
canvas.clear();
|
canvas.clear();
|
||||||
const color = object.originColor;
|
const color = object.originColor;
|
||||||
return {css, base64, color};
|
return { css, base64, color };
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -1145,11 +1135,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
*/
|
*/
|
||||||
async exportPrintTrimsLayers() {
|
async exportPrintTrimsLayers() {
|
||||||
const glayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
|
const glayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
|
||||||
if(!glayer) return Promise.reject("印花和元素图层组不存在");
|
if (!glayer) return Promise.reject("印花和元素图层组不存在");
|
||||||
const ids = glayer.children.map((v) => v.id);
|
const ids = glayer.children.map((v) => v.id);
|
||||||
const objects = this.getObjectsByIdOrLayerId(ids);
|
const objects = this.getObjectsByIdOrLayerId(ids);
|
||||||
const fixedLayerObj = this.getFixedLayerObject();
|
const fixedLayerObj = this.getFixedLayerObject();
|
||||||
if(!fixedLayerObj) return Promise.reject("固定图层不存在");
|
if (!fixedLayerObj) return Promise.reject("固定图层不存在");
|
||||||
const flWidth = fixedLayerObj.width
|
const flWidth = fixedLayerObj.width
|
||||||
const flHeight = fixedLayerObj.height
|
const flHeight = fixedLayerObj.height
|
||||||
const flTop = fixedLayerObj.top
|
const flTop = fixedLayerObj.top
|
||||||
@@ -1161,7 +1151,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
objects.forEach((v, i) => {
|
objects.forEach((v, i) => {
|
||||||
const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id));
|
const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id));
|
||||||
const sourceData = label?.metadata?.sourceData;
|
const sourceData = label?.metadata?.sourceData;
|
||||||
if(!sourceData) return;
|
if (!sourceData) return;
|
||||||
const obj = {
|
const obj = {
|
||||||
ifSingle: typeof v.fill === "string",
|
ifSingle: typeof v.fill === "string",
|
||||||
level2Type: sourceData.level2Type,
|
level2Type: sourceData.level2Type,
|
||||||
@@ -1173,7 +1163,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
angle: v.angle,
|
angle: v.angle,
|
||||||
name: sourceData.name,
|
name: sourceData.name,
|
||||||
priority: i + 1,
|
priority: i + 1,
|
||||||
object:{
|
object: {
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
scaleX: 0,//对象的缩放比例
|
scaleX: 0,//对象的缩放比例
|
||||||
@@ -1192,8 +1182,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
let top = (v.top - (flTop - flHeight * flScaleY / 2));
|
let top = (v.top - (flTop - flHeight * flScaleY / 2));
|
||||||
let width = (v.width * v.scaleX);
|
let width = (v.width * v.scaleX);
|
||||||
let height = (v.height * v.scaleY);
|
let height = (v.height * v.scaleY);
|
||||||
if(v.originX === "center" && v.originY === "center") {
|
if (v.originX === "center" && v.originY === "center") {
|
||||||
let {x:cx, y:cy} = calculateTopLeftPoint(width, height, left, top, v.angle);
|
let { x: cx, y: cy } = calculateTopLeftPoint(width, height, left, top, v.angle);
|
||||||
left = cx;
|
left = cx;
|
||||||
top = cy;
|
top = cy;
|
||||||
}
|
}
|
||||||
@@ -1205,18 +1195,18 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
obj.object.left = oX;
|
obj.object.left = oX;
|
||||||
obj.object.scaleX = oScaleX;
|
obj.object.scaleX = oScaleX;
|
||||||
obj.object.scaleY = oScaleY;
|
obj.object.scaleY = oScaleY;
|
||||||
if(obj.ifSingle){
|
if (obj.ifSingle) {
|
||||||
// 单个的是从中心计算的
|
// 单个的是从中心计算的
|
||||||
let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
|
let { x: cx, y: cy } = calculateCenterPoint(width, height, left, top, v.angle);
|
||||||
let oX = (cx-width/2) / flScaleX;
|
let oX = (cx - width / 2) / flScaleX;
|
||||||
let oY = (cy-height/2) / flScaleY;
|
let oY = (cy - height / 2) / flScaleY;
|
||||||
obj.location = [oX, oY];
|
obj.location = [oX, oY];
|
||||||
obj.scale = [oScaleX, oScaleY];
|
obj.scale = [oScaleX, oScaleY];
|
||||||
}else{
|
} else {
|
||||||
let fill = v.fill;
|
let fill = v.fill;
|
||||||
let fill_ = v.fill_;
|
let fill_ = v.fill_;
|
||||||
if(!fill || !fill_) return console.warn("印花元素不存在fill或fill_属性");
|
if (!fill || !fill_) return console.warn("印花元素不存在fill或fill_属性");
|
||||||
let {scale, angle} = getTransformScaleAngle(fill.patternTransform);
|
let { scale, angle } = getTransformScaleAngle(fill.patternTransform);
|
||||||
let scaleX = scale * 5 * v.fill_.width / flWidth;
|
let scaleX = scale * 5 * v.fill_.width / flWidth;
|
||||||
let scaleY = scale * 5 * v.fill_.height / flHeight;
|
let scaleY = scale * 5 * v.fill_.height / flHeight;
|
||||||
let scaleXY = flWidth > flHeight ? scaleX : scaleY;
|
let scaleXY = flWidth > flHeight ? scaleX : scaleY;
|
||||||
@@ -1231,16 +1221,16 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
obj.object.gapY = fill_.gapY;
|
obj.object.gapY = fill_.gapY;
|
||||||
obj.object.fill_repeat = fill.repeat;
|
obj.object.fill_repeat = fill.repeat;
|
||||||
}
|
}
|
||||||
if(sourceData.type === "print"){
|
if (sourceData.type === "print") {
|
||||||
prints.push(obj);
|
prints.push(obj);
|
||||||
}else if(sourceData.type === "trims"){
|
} else if (sourceData.type === "trims") {
|
||||||
trims.push(obj);
|
trims.push(obj);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// prints.sort((a, b) => a.ifSingle ? 1 : -1);
|
// prints.sort((a, b) => a.ifSingle ? 1 : -1);
|
||||||
// prints.forEach((v, i) => v.priority = i + 1);
|
// prints.forEach((v, i) => v.priority = i + 1);
|
||||||
// trims.forEach((v, i) => v.priority = i + 1);
|
// trims.forEach((v, i) => v.priority = i + 1);
|
||||||
return {prints, trims};
|
return { prints, trims };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -1283,7 +1273,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
// 排除颜色图层和特殊组图层
|
// 排除颜色图层和特殊组图层
|
||||||
const excludedLayers = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
|
const excludedLayers = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
|
||||||
this.layers.value.forEach((layer) => {
|
this.layers.value.forEach((layer) => {
|
||||||
if(excludedLayers.includes(layer.id)){
|
if (excludedLayers.includes(layer.id)) {
|
||||||
excludedLayers.push(...layer.children?.map((child) => child.id));
|
excludedLayers.push(...layer.children?.map((child) => child.id));
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -1465,16 +1455,16 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
/** 修复JSON数据中的ID丢失问题 */
|
/** 修复JSON数据中的ID丢失问题 */
|
||||||
FixJsonIdLoss(json){
|
FixJsonIdLoss(json) {
|
||||||
const layerIds = [];
|
const layerIds = [];
|
||||||
const layers = json?.layers || [];
|
const layers = json?.layers || [];
|
||||||
const objects = json?.canvas?.objects || [];
|
const objects = json?.canvas?.objects || [];
|
||||||
layers.forEach((layer) => {
|
layers.forEach((layer) => {
|
||||||
layerIds.push(layer.id);
|
layerIds.push(layer.id);
|
||||||
layer.children?.forEach((child) => layerIds.push(child.id));
|
layer.children?.forEach((child) => layerIds.push(child.id));
|
||||||
if(!layer.fabricObjects?.[0]?.id && !layer.fabricObject?.id){
|
if (!layer.fabricObjects?.[0]?.id && !layer.fabricObject?.id) {
|
||||||
const obj = objects?.find((o) => o.layerId === layer.id);
|
const obj = objects?.find((o) => o.layerId === layer.id);
|
||||||
if(obj) {
|
if (obj) {
|
||||||
layer.fabricObjects = [{
|
layer.fabricObjects = [{
|
||||||
id: obj.id,
|
id: obj.id,
|
||||||
type: obj.type,
|
type: obj.type,
|
||||||
@@ -1491,11 +1481,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
const excludedObjects = [SpecialLayerId.PART_SELECTOR];
|
const excludedObjects = [SpecialLayerId.PART_SELECTOR];
|
||||||
json.canvas.objects = objects.filter((v) => {
|
json.canvas.objects = objects.filter((v) => {
|
||||||
// 指定ID排除
|
// 指定ID排除
|
||||||
if(excludedObjects.includes(v.id)) return false;
|
if (excludedObjects.includes(v.id)) return false;
|
||||||
|
|
||||||
if(v.isBackground || v.isFixed) return true;
|
if (v.isBackground || v.isFixed) return true;
|
||||||
// 当前图层不存在当前对象
|
// 当前图层不存在当前对象
|
||||||
if(!layerIds.includes(v.layerId)) return false;
|
if (!layerIds.includes(v.layerId)) return false;
|
||||||
return true
|
return true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -1507,22 +1497,22 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
*/
|
*/
|
||||||
async createOtherLayers(otherData) {
|
async createOtherLayers(otherData) {
|
||||||
if (!otherData) return console.warn("otherData 为空不需要添加");
|
if (!otherData) return console.warn("otherData 为空不需要添加");
|
||||||
let resolve = ()=>{};
|
let resolve = () => { };
|
||||||
this.awaitCanvasRun = ()=>(new Promise((v) => resolve = v))
|
this.awaitCanvasRun = () => (new Promise((v) => resolve = v))
|
||||||
const otherData_ = JSON.parse(JSON.stringify(otherData));
|
const otherData_ = JSON.parse(JSON.stringify(otherData));
|
||||||
console.log("==========创建其他图层", otherData_);
|
console.log("==========创建其他图层", otherData_);
|
||||||
|
|
||||||
// 删除颜色图层和特殊组图层
|
// 删除颜色图层和特殊组图层
|
||||||
const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
|
const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
|
||||||
this.layers.value = this.layers.value.filter((layer) => {
|
this.layers.value = this.layers.value.filter((layer) => {
|
||||||
if(ids.includes(layer.id)){
|
if (ids.includes(layer.id)) {
|
||||||
ids.push(...layer.children?.map((child) => child.id));
|
ids.push(...layer.children?.map((child) => child.id));
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
})
|
})
|
||||||
this.canvas.getObjects().forEach((v) => {
|
this.canvas.getObjects().forEach((v) => {
|
||||||
if(ids.includes(v.id) || ids.includes(v.layerId)){
|
if (ids.includes(v.id) || ids.includes(v.layerId)) {
|
||||||
this.canvas.remove(v)
|
this.canvas.remove(v)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -1536,18 +1526,18 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
otherData_.printObject?.prints?.forEach((print, index) => {// 印花
|
otherData_.printObject?.prints?.forEach((print, index) => {// 印花
|
||||||
print.name = t("Canvas.Print") + (index + 1);
|
print.name = t("Canvas.Print") + (index + 1);
|
||||||
print.type = "print";
|
print.type = "print";
|
||||||
if(print.ifSingle){
|
if (print.ifSingle) {
|
||||||
printTrimsLayers.unshift({...print});
|
printTrimsLayers.unshift({ ...print });
|
||||||
}else{
|
} else {
|
||||||
singleLayers.unshift({...print});
|
singleLayers.unshift({ ...print });
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
otherData_.trims?.prints?.forEach((trims, index) => {// 元素
|
otherData_.trims?.prints?.forEach((trims, index) => {// 元素
|
||||||
trims.name = t("Canvas.Elements") + (index + 1);
|
trims.name = t("Canvas.Elements") + (index + 1);
|
||||||
trims.type = "trims";
|
trims.type = "trims";
|
||||||
printTrimsLayers.unshift({...trims});
|
printTrimsLayers.unshift({ ...trims });
|
||||||
})
|
})
|
||||||
if(printTrimsLayers.length || singleLayers.length){
|
if (printTrimsLayers.length || singleLayers.length) {
|
||||||
await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
|
await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
|
||||||
}
|
}
|
||||||
await this.changeCanvas();
|
await this.changeCanvas();
|
||||||
@@ -1556,10 +1546,30 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
this.awaitCanvasRun = null;
|
this.awaitCanvasRun = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//设置印花元素颜色的裁剪信息
|
||||||
|
async setSpecialCliptInfo(isColor = true, isGroup = true) {
|
||||||
|
// 更新颜色层信息
|
||||||
|
if (isColor) {
|
||||||
|
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
|
||||||
|
if (colorObject) {
|
||||||
|
await this.setObjecCliptInfo(colorObject);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
// 更新特殊组图层信息
|
||||||
|
if (isGroup) {
|
||||||
|
const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
|
||||||
|
if (groupLayer) {
|
||||||
|
const groupRect = new fabric.Rect({});
|
||||||
|
await this.setObjecCliptInfo(groupRect);
|
||||||
|
groupLayer.clippingMask = groupRect.toObject();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
// 设置画布对象的裁剪信息
|
// 设置画布对象的裁剪信息
|
||||||
async setObjecCliptInfo(tagObject, data){
|
async setObjecCliptInfo(tagObject, data) {
|
||||||
const fixedLayerObj = this.getFixedLayerObject();
|
const fixedLayerObj = this.getFixedLayerObject();
|
||||||
if(!fixedLayerObj) return console.warn("固定图层为空");
|
if (!fixedLayerObj) return console.warn("固定图层为空");
|
||||||
tagObject.set({
|
tagObject.set({
|
||||||
top: fixedLayerObj.top,
|
top: fixedLayerObj.top,
|
||||||
left: fixedLayerObj.left,
|
left: fixedLayerObj.left,
|
||||||
@@ -1572,7 +1582,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
});
|
});
|
||||||
var object = fixedLayerObj;
|
var object = fixedLayerObj;
|
||||||
const imageUrl = this.props.clothingImageUrl2;
|
const imageUrl = this.props.clothingImageUrl2;
|
||||||
if(imageUrl){
|
if (imageUrl) {
|
||||||
object = await new Promise((resolve, reject) => {
|
object = await new Promise((resolve, reject) => {
|
||||||
fabric.Image.fromURL(imageUrl, (imgObject) => {
|
fabric.Image.fromURL(imageUrl, (imgObject) => {
|
||||||
tagObject.set({
|
tagObject.set({
|
||||||
@@ -1592,8 +1602,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
});
|
});
|
||||||
tagObject.set('clipPath', transparentMask);
|
tagObject.set('clipPath', transparentMask);
|
||||||
}
|
}
|
||||||
async createColorLayer(color_){
|
async createColorLayer(color_) {
|
||||||
const color = color_ || {r:0,g:0,b:0,a:0};
|
const color = color_ || { r: 0, g: 0, b: 0, a: 0 };
|
||||||
// if(findLayer(this.layers.value, SpecialLayerId.COLOR)) {
|
// if(findLayer(this.layers.value, SpecialLayerId.COLOR)) {
|
||||||
// return console.warn("画布中已存在颜色图层");
|
// return console.warn("画布中已存在颜色图层");
|
||||||
// }
|
// }
|
||||||
@@ -1637,7 +1647,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 创建印花和元素图层
|
// 创建印花和元素图层
|
||||||
async createPrintTrimsLayers(printTrimsLayers, singleLayers){
|
async createPrintTrimsLayers(printTrimsLayers, singleLayers) {
|
||||||
// if(findLayer(this.layers.value, SpecialLayerId.SPECIAL_GROUP)) {
|
// if(findLayer(this.layers.value, SpecialLayerId.SPECIAL_GROUP)) {
|
||||||
// return console.warn("画布中已存在印花和元素组图层");
|
// return console.warn("画布中已存在印花和元素组图层");
|
||||||
// }
|
// }
|
||||||
@@ -1651,12 +1661,12 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
const flScaleY = fixedLayerObj.scaleY
|
const flScaleY = fixedLayerObj.scaleY
|
||||||
const children = [];
|
const children = [];
|
||||||
// 添加印花和元素图层
|
// 添加印花和元素图层
|
||||||
for(let index = 0; index < printTrimsLayers.length; index++){
|
for (let index = 0; index < printTrimsLayers.length; index++) {
|
||||||
let item = printTrimsLayers[index];
|
let item = printTrimsLayers[index];
|
||||||
let id = generateId("layer_image_");
|
let id = generateId("layer_image_");
|
||||||
let name = item.name;
|
let name = item.name;
|
||||||
let image = await new Promise(resolve => {
|
let image = await new Promise(resolve => {
|
||||||
fabric.Image.fromURL(item.path, (fabricImage)=>{
|
fabric.Image.fromURL(item.path, (fabricImage) => {
|
||||||
resolve(fabricImage);
|
resolve(fabricImage);
|
||||||
}, { crossOrigin: "anonymous" });
|
}, { crossOrigin: "anonymous" });
|
||||||
})
|
})
|
||||||
@@ -1664,7 +1674,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
let top = flTop - flHeight * flScaleY / 2 + (item.location?.[1] || 0) * flScaleY
|
let top = flTop - flHeight * flScaleY / 2 + (item.location?.[1] || 0) * flScaleY
|
||||||
let scaleX = flWidth * (item.scale?.[0] || 1) / image.width * flScaleX
|
let scaleX = flWidth * (item.scale?.[0] || 1) / image.width * flScaleX
|
||||||
let scaleY = flHeight * (item.scale?.[1] || 1) / image.height * flScaleY
|
let scaleY = flHeight * (item.scale?.[1] || 1) / image.height * flScaleY
|
||||||
let {x, y} = calculateRotatedTopLeftDeg(
|
let { x, y } = calculateRotatedTopLeftDeg(
|
||||||
image.width * scaleX,
|
image.width * scaleX,
|
||||||
image.height * scaleY,
|
image.height * scaleY,
|
||||||
left,
|
left,
|
||||||
@@ -1679,11 +1689,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
let flipY = false;
|
let flipY = false;
|
||||||
let blendMode = BlendMode.NORMAL;
|
let blendMode = BlendMode.NORMAL;
|
||||||
// if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
|
// if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
|
||||||
if(item.object){
|
if (item.object) {
|
||||||
opacity = item.object.opacity
|
opacity = item.object.opacity
|
||||||
flipX = item.object.flipX
|
flipX = item.object.flipX
|
||||||
flipY = item.object.flipY
|
flipY = item.object.flipY
|
||||||
if(item.object.blendMode) blendMode = item.object.blendMode;
|
if (item.object.blendMode) blendMode = item.object.blendMode;
|
||||||
}
|
}
|
||||||
image.set({
|
image.set({
|
||||||
left: x,
|
left: x,
|
||||||
@@ -1714,18 +1724,18 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
isPrintTrims: true,
|
isPrintTrims: true,
|
||||||
blendMode: blendMode,
|
blendMode: blendMode,
|
||||||
fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
|
fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
|
||||||
metadata: {sourceData: item},
|
metadata: { sourceData: item },
|
||||||
object: image,
|
object: image,
|
||||||
})
|
})
|
||||||
children.push(layer);
|
children.push(layer);
|
||||||
};
|
};
|
||||||
// 添加平铺图层
|
// 添加平铺图层
|
||||||
for(let index = 0; index < singleLayers.length; index++){
|
for (let index = 0; index < singleLayers.length; index++) {
|
||||||
let item = singleLayers[index];
|
let item = singleLayers[index];
|
||||||
let id = generateId("layer_image_");
|
let id = generateId("layer_image_");
|
||||||
let name = item.name;
|
let name = item.name;
|
||||||
let image = await new Promise(resolve => {
|
let image = await new Promise(resolve => {
|
||||||
fabric.Image.fromURL(item.path, (fabricImage)=>{
|
fabric.Image.fromURL(item.path, (fabricImage) => {
|
||||||
const imgElement = fabricImage.getElement();
|
const imgElement = fabricImage.getElement();
|
||||||
const tcanvas = document.createElement('canvas');
|
const tcanvas = document.createElement('canvas');
|
||||||
tcanvas.width = imgElement.width;
|
tcanvas.width = imgElement.width;
|
||||||
@@ -1754,7 +1764,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
let flipY = false;
|
let flipY = false;
|
||||||
let blendMode = BlendMode.NORMAL;
|
let blendMode = BlendMode.NORMAL;
|
||||||
let fill_repeat = "repeat"
|
let fill_repeat = "repeat"
|
||||||
if(item.object){
|
if (item.object) {
|
||||||
top += item.object.top * flScaleY
|
top += item.object.top * flScaleY
|
||||||
left += item.object.left * flScaleX
|
left += item.object.left * flScaleX
|
||||||
scaleX *= item.object.scaleX
|
scaleX *= item.object.scaleX
|
||||||
@@ -1763,11 +1773,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
angle = item.object.angle
|
angle = item.object.angle
|
||||||
flipX = item.object.flipX
|
flipX = item.object.flipX
|
||||||
flipY = item.object.flipY
|
flipY = item.object.flipY
|
||||||
if(item.object.blendMode) blendMode = item.object.blendMode;
|
if (item.object.blendMode) blendMode = item.object.blendMode;
|
||||||
gapX = item.object.gapX
|
gapX = item.object.gapX
|
||||||
gapY = item.object.gapY
|
gapY = item.object.gapY
|
||||||
fillSource = imageAddGapToCanvas(image, gapX, gapY);
|
fillSource = imageAddGapToCanvas(image, gapX, gapY);
|
||||||
if(item.object.fill_repeat) fill_repeat = item.object.fill_repeat;
|
if (item.object.fill_repeat) fill_repeat = item.object.fill_repeat;
|
||||||
}
|
}
|
||||||
let rect = new fabric.Rect({
|
let rect = new fabric.Rect({
|
||||||
id: id,
|
id: id,
|
||||||
@@ -1791,7 +1801,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
offsetX: offsetX, // 水平偏移
|
offsetX: offsetX, // 水平偏移
|
||||||
offsetY: offsetY, // 垂直偏移
|
offsetY: offsetY, // 垂直偏移
|
||||||
}),
|
}),
|
||||||
fill_ : {
|
fill_: {
|
||||||
source: item.path,
|
source: item.path,
|
||||||
gapX: gapX,
|
gapX: gapX,
|
||||||
gapY: gapY,
|
gapY: gapY,
|
||||||
@@ -1811,7 +1821,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
isPrintTrims: true,
|
isPrintTrims: true,
|
||||||
blendMode: blendMode,
|
blendMode: blendMode,
|
||||||
fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
|
fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
|
||||||
metadata: {sourceData: item},
|
metadata: { sourceData: item },
|
||||||
object: rect,
|
object: rect,
|
||||||
})
|
})
|
||||||
children.push(layer);
|
children.push(layer);
|
||||||
@@ -1828,9 +1838,9 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
// })
|
// })
|
||||||
// children.push(layer);
|
// children.push(layer);
|
||||||
// }
|
// }
|
||||||
if(children.length === 0) return;
|
if (children.length === 0) return;
|
||||||
// 印花元素排序
|
// 印花元素排序
|
||||||
if(new Set(children.map(v => v.metadata.sourceData.priority)).size === children.length){
|
if (new Set(children.map(v => v.metadata.sourceData.priority)).size === children.length) {
|
||||||
children.sort((a, b) => b.metadata.sourceData.priority - a.metadata.sourceData.priority);
|
children.sort((a, b) => b.metadata.sourceData.priority - a.metadata.sourceData.priority);
|
||||||
}
|
}
|
||||||
children.forEach(layer => {
|
children.forEach(layer => {
|
||||||
@@ -1858,21 +1868,21 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
/**
|
/**
|
||||||
* 画布事件变更后
|
* 画布事件变更后
|
||||||
*/
|
*/
|
||||||
async changeCanvas(fids = [], isBeforeChange = false){
|
async changeCanvas(fids = [], isBeforeChange = false) {
|
||||||
if(!isBeforeChange) this.canvasChangeing = false;
|
if (!isBeforeChange) this.canvasChangeing = false;
|
||||||
const fixedLayerObj = this.getFixedLayerObject();
|
const fixedLayerObj = this.getFixedLayerObject();
|
||||||
if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
|
if (!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
|
||||||
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
|
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
|
||||||
if(colorObject){
|
if (colorObject) {
|
||||||
const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP).filter(id => !fids.includes(id));
|
const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP).filter(id => !fids.includes(id));
|
||||||
if(ids.length === 0){
|
if (ids.length === 0) {
|
||||||
ids.unshift(SpecialLayerId.SPECIAL_GROUP);
|
ids.unshift(SpecialLayerId.SPECIAL_GROUP);
|
||||||
await this.setObjecCliptInfo(colorObject);
|
await this.setObjecCliptInfo(colorObject);
|
||||||
this.canvas.renderAll();
|
this.canvas.renderAll();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const base64 = await this.exportManager.exportImage({layerIdArray2: ids, isEnhanceImg: true});
|
const base64 = await this.exportManager.exportImage({ layerIdArray2: ids, isEnhanceImg: true });
|
||||||
if(!base64) return console.warn("导出图片失败", base64)
|
if (!base64) return console.warn("导出图片失败", base64)
|
||||||
const canvas = await base64ToCanvas(base64, fixedLayerObj.scaleX * 2, true);
|
const canvas = await base64ToCanvas(base64, fixedLayerObj.scaleX * 2, true);
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
const width = fixedLayerObj.width;
|
const width = fixedLayerObj.width;
|
||||||
@@ -1885,15 +1895,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
/** 画布变更之前 */
|
/** 画布变更之前 */
|
||||||
async beforeChangeCanvas(objects){
|
async beforeChangeCanvas(objects) {
|
||||||
if(this.canvasChangeing) return;
|
if (this.canvasChangeing) return;
|
||||||
const ids = objects.filter(v => {
|
const ids = objects.filter(v => {
|
||||||
return v.isPrintTrims && v.globalCompositeOperation && v.globalCompositeOperation !== BlendMode.NORMAL
|
return v.isPrintTrims && v.globalCompositeOperation && v.globalCompositeOperation !== BlendMode.NORMAL
|
||||||
}).map(v => v.layerId);
|
}).map(v => v.layerId);
|
||||||
if(ids.length > 0){
|
if (ids.length > 0) {
|
||||||
this.canvasChangeing = true;
|
this.canvasChangeing = true;
|
||||||
this.canvas.getObjects().forEach(v => {
|
this.canvas.getObjects().forEach(v => {
|
||||||
if(ids.includes(v.layerId)){
|
if (ids.includes(v.layerId)) {
|
||||||
v.globalCompositeOperation_ = v.globalCompositeOperation;
|
v.globalCompositeOperation_ = v.globalCompositeOperation;
|
||||||
v.globalCompositeOperation = BlendMode.NORMAL;
|
v.globalCompositeOperation = BlendMode.NORMAL;
|
||||||
}
|
}
|
||||||
@@ -2103,13 +2113,13 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
moveActiveObject(direction, step = 1) {
|
moveActiveObject(direction, step = 1) {
|
||||||
const objects = [];
|
const objects = [];
|
||||||
const activeObject = this.canvas.getActiveObject();
|
const activeObject = this.canvas.getActiveObject();
|
||||||
if(!activeObject) return;
|
if (!activeObject) return;
|
||||||
const initPos = {
|
const initPos = {
|
||||||
id: activeObject.id,
|
id: activeObject.id,
|
||||||
left: activeObject.left,
|
left: activeObject.left,
|
||||||
top: activeObject.top,
|
top: activeObject.top,
|
||||||
};
|
};
|
||||||
switch(direction) {
|
switch (direction) {
|
||||||
case "up":
|
case "up":
|
||||||
activeObject.top -= step;
|
activeObject.top -= step;
|
||||||
break;
|
break;
|
||||||
@@ -2123,7 +2133,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
activeObject.left += step;
|
activeObject.left += step;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if(!activeObject.id) return this.canvas.renderAll();
|
if (!activeObject.id) return this.canvas.renderAll();
|
||||||
const cmd = new ObjectMoveCommand({
|
const cmd = new ObjectMoveCommand({
|
||||||
canvas: this.canvas,
|
canvas: this.canvas,
|
||||||
initPos,
|
initPos,
|
||||||
|
|||||||
@@ -606,7 +606,9 @@ export class ExportManager {
|
|||||||
imageSmoothingEnabled: true,
|
imageSmoothingEnabled: true,
|
||||||
});
|
});
|
||||||
// tempFabricCanvas.setZoom(1);
|
// tempFabricCanvas.setZoom(1);
|
||||||
console.log("==========", fixedLayerObject)
|
const ox = fixedLayerObject.left - fixedLayerObject.width * fixedLayerObject.scaleX / 2
|
||||||
|
const oy = fixedLayerObject.top - fixedLayerObject.height * fixedLayerObject.scaleY / 2
|
||||||
|
// console.log("==========", fixedLayerObject, ox, oy)
|
||||||
try {
|
try {
|
||||||
// 克隆并添加所有对象到临时画布,需要调整位置相对于固定图层
|
// 克隆并添加所有对象到临时画布,需要调整位置相对于固定图层
|
||||||
for (let i = 0; i < objectsToExport.length; i++) {
|
for (let i = 0; i < objectsToExport.length; i++) {
|
||||||
@@ -616,15 +618,20 @@ export class ExportManager {
|
|||||||
restoreOpacityInRedGreen && true
|
restoreOpacityInRedGreen && true
|
||||||
);
|
);
|
||||||
if (cloned) {
|
if (cloned) {
|
||||||
|
let scaleX = cloned.scaleX / fixedLayerObject.scaleX
|
||||||
|
let scaleY = cloned.scaleY / fixedLayerObject.scaleY
|
||||||
|
let top = (cloned.top - oy) * scaleY
|
||||||
|
let left = (cloned.left - ox) * scaleX
|
||||||
|
if (cloned.originX === "center" && cloned.originY === "center") {
|
||||||
|
top = canvasHeight / 2
|
||||||
|
left = canvasWidth / 2
|
||||||
|
}
|
||||||
cloned.set({
|
cloned.set({
|
||||||
left: canvasWidth / 2,
|
left: left,
|
||||||
top: canvasHeight / 2,
|
top: top,
|
||||||
scaleX: cloned.scaleX / fixedLayerObject.scaleX,
|
scaleX: scaleX,
|
||||||
scaleY: cloned.scaleY / fixedLayerObject.scaleY,
|
scaleY: scaleY,
|
||||||
originX: "center",
|
|
||||||
originY: "center",
|
|
||||||
});
|
});
|
||||||
console.log("==========", {...cloned})
|
|
||||||
// 更新对象坐标
|
// 更新对象坐标
|
||||||
cloned.setCoords();
|
cloned.setCoords();
|
||||||
tempFabricCanvas.add(cloned);
|
tempFabricCanvas.add(cloned);
|
||||||
|
|||||||
@@ -391,8 +391,8 @@ export class PartManager {
|
|||||||
this.canvas.loading.value = true;
|
this.canvas.loading.value = true;
|
||||||
});
|
});
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const user_id = store.state.UserHabit.userDetail.userId;
|
// const user_id = store.state.UserHabit.userDetail.userId;
|
||||||
// const user_id = 24299;
|
const user_id = 24299;
|
||||||
const data = {
|
const data = {
|
||||||
image_path: this.props.clothingMinIOPath,
|
image_path: this.props.clothingMinIOPath,
|
||||||
user_id,
|
user_id,
|
||||||
|
|||||||
@@ -133,11 +133,12 @@ export class RedGreenModeManager {
|
|||||||
this.canvas.on("mouse:up", (event) => {
|
this.canvas.on("mouse:up", (event) => {
|
||||||
// 可以在这里添加更多逻辑,比如生成图片或更新状态
|
// 可以在这里添加更多逻辑,比如生成图片或更新状态
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
requestIdleCallback(async () => {
|
setTimeout(async () => {
|
||||||
if (!this.isInitialized) {
|
if (!this.isInitialized) {
|
||||||
console.warn("红绿图模式未初始化,无法处理鼠标事件");
|
console.warn("红绿图模式未初始化,无法处理鼠标事件");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
console.log("鼠标抬起事件触发", this.onImageGenerated);
|
||||||
if (this.onImageGenerated) {
|
if (this.onImageGenerated) {
|
||||||
const imageData = await this.canvasManager.exportImage({
|
const imageData = await this.canvasManager.exportImage({
|
||||||
restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
|
restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
|
||||||
|
|||||||
@@ -37,7 +37,6 @@ export class ThumbnailManager {
|
|||||||
|
|
||||||
// 延迟执行,避免阻塞UI
|
// 延迟执行,避免阻塞UI
|
||||||
fabricObjects.length > 0 &&
|
fabricObjects.length > 0 &&
|
||||||
requestIdleCallback(() => {
|
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
const base64 = await this._generateLayerThumbnailNow(fabricObjects, layer);
|
const base64 = await this._generateLayerThumbnailNow(fabricObjects, layer);
|
||||||
// this.layerThumbnails.set(layerId, base64);
|
// this.layerThumbnails.set(layerId, base64);
|
||||||
@@ -55,7 +54,6 @@ export class ThumbnailManager {
|
|||||||
console.error("生成图层缩略图时出错:", error);
|
console.error("生成图层缩略图时出错:", error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -65,7 +63,7 @@ export class ThumbnailManager {
|
|||||||
generateAllLayerThumbnails(layers) {
|
generateAllLayerThumbnails(layers) {
|
||||||
if (!layers || !Array.isArray(layers)) return;
|
if (!layers || !Array.isArray(layers)) return;
|
||||||
|
|
||||||
requestIdleCallback(() => {
|
setTimeout(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
layers.forEach((layer) => {
|
layers.forEach((layer) => {
|
||||||
if (layer && layer.id) {
|
if (layer && layer.id) {
|
||||||
|
|||||||
@@ -180,7 +180,7 @@ export class CommandManager {
|
|||||||
this._recordPerformance("execute", command.constructor.name, duration);
|
this._recordPerformance("execute", command.constructor.name, duration);
|
||||||
|
|
||||||
// 通知状态变化
|
// 通知状态变化
|
||||||
this._notifyStateChange();
|
this._notifyStateChange("execute");
|
||||||
|
|
||||||
console.log(`✅ 命令执行成功: ${command.constructor.name}`);
|
console.log(`✅ 命令执行成功: ${command.constructor.name}`);
|
||||||
return result;
|
return result;
|
||||||
@@ -219,7 +219,7 @@ export class CommandManager {
|
|||||||
this._recordPerformance("undo", command.constructor.name, duration);
|
this._recordPerformance("undo", command.constructor.name, duration);
|
||||||
|
|
||||||
// 通知状态变化
|
// 通知状态变化
|
||||||
this._notifyStateChange();
|
this._notifyStateChange("undo");
|
||||||
|
|
||||||
console.log(`✅ 命令撤销成功: ${command.constructor.name}`);
|
console.log(`✅ 命令撤销成功: ${command.constructor.name}`);
|
||||||
return result;
|
return result;
|
||||||
@@ -258,7 +258,7 @@ export class CommandManager {
|
|||||||
this._recordPerformance("redo", command.constructor.name, duration);
|
this._recordPerformance("redo", command.constructor.name, duration);
|
||||||
|
|
||||||
// 通知状态变化
|
// 通知状态变化
|
||||||
this._notifyStateChange();
|
this._notifyStateChange("redo");
|
||||||
|
|
||||||
console.log(`✅ 命令重做成功: ${command.constructor.name}`);
|
console.log(`✅ 命令重做成功: ${command.constructor.name}`);
|
||||||
return result;
|
return result;
|
||||||
@@ -298,7 +298,7 @@ export class CommandManager {
|
|||||||
|
|
||||||
this.undoStack = [];
|
this.undoStack = [];
|
||||||
this.redoStack = [];
|
this.redoStack = [];
|
||||||
this._notifyStateChange();
|
this._notifyStateChange("clear");
|
||||||
// console.log("📝 命令历史已清空");
|
// console.log("📝 命令历史已清空");
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -417,10 +417,12 @@ export class CommandManager {
|
|||||||
* 通知状态变化
|
* 通知状态变化
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_notifyStateChange() {
|
_notifyStateChange(type) {
|
||||||
if (this.onStateChange) {
|
if (this.onStateChange) {
|
||||||
try {
|
try {
|
||||||
this.onStateChange(this.getState());
|
const obj = this.getState();
|
||||||
|
obj.type = type;
|
||||||
|
this.onStateChange(obj);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("状态变化回调执行失败:", error);
|
console.error("状态变化回调执行失败:", error);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ export class LiquifyRealTimeUpdater {
|
|||||||
|
|
||||||
if (isDrawing && this.config.useDirectUpdate) {
|
if (isDrawing && this.config.useDirectUpdate) {
|
||||||
// 拖拽过程中使用快速更新(降低质量以提高性能)
|
// 拖拽过程中使用快速更新(降低质量以提高性能)
|
||||||
this._fastUpdate(imageData);
|
await this._fastUpdate(imageData);
|
||||||
} else {
|
} else {
|
||||||
// 拖拽结束后使用完整更新(最高质量)
|
// 拖拽结束后使用完整更新(最高质量)
|
||||||
await this._fullUpdate(imageData);
|
await this._fullUpdate(imageData);
|
||||||
@@ -124,7 +124,7 @@ export class LiquifyRealTimeUpdater {
|
|||||||
* @param {ImageData} imageData 图像数据
|
* @param {ImageData} imageData 图像数据
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_fastUpdate(imageData) {
|
async _fastUpdate(imageData) {
|
||||||
if (!this.targetObject || !this.targetObject._element) {
|
if (!this.targetObject || !this.targetObject._element) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -138,12 +138,14 @@ export class LiquifyRealTimeUpdater {
|
|||||||
|
|
||||||
// 直接更新fabric对象的图像源(使用PNG格式保持质量)
|
// 直接更新fabric对象的图像源(使用PNG格式保持质量)
|
||||||
const targetElement = this.targetObject._element;
|
const targetElement = this.targetObject._element;
|
||||||
|
|
||||||
// 方案1: 直接设置src属性(最高性能)
|
// 方案1: 直接设置src属性(最高性能)
|
||||||
const dataURL = this.tempCanvas.toDataURL("image/png", quality);
|
const dataURL = this.tempCanvas.toDataURL("image/png", quality);
|
||||||
|
|
||||||
if (targetElement.src !== dataURL) {
|
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对象为脏状态,但不立即渲染
|
// 关键优化:直接设置fabric对象为脏状态,但不立即渲染
|
||||||
// this.targetObject.dirty = false; // 标记为不需要立即渲染
|
// this.targetObject.dirty = false; // 标记为不需要立即渲染
|
||||||
@@ -153,7 +155,7 @@ export class LiquifyRealTimeUpdater {
|
|||||||
// 使用requestAnimationFrame进行批量渲染优化
|
// 使用requestAnimationFrame进行批量渲染优化
|
||||||
// if (!this.renderingScheduled && !this.config.skipRenderDuringDrag) {
|
// if (!this.renderingScheduled && !this.config.skipRenderDuringDrag) {
|
||||||
// this.renderingScheduled = true;
|
// this.renderingScheduled = true;
|
||||||
// requestIdleCallback(() => {
|
// setTimeout(() => {
|
||||||
// this.canvas.renderAll();
|
// this.canvas.renderAll();
|
||||||
// this.renderingScheduled = false;
|
// this.renderingScheduled = false;
|
||||||
// });
|
// });
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import { canvasConfig } from "../config/canvasConfig";
|
|||||||
export const createCanvas = (elementId, options = {}) => {
|
export const createCanvas = (elementId, options = {}) => {
|
||||||
// Create the canvas instance
|
// Create the canvas instance
|
||||||
const canvas = new fabric.Canvas(elementId, {
|
const canvas = new fabric.Canvas(elementId, {
|
||||||
controlsAboveOverlay: true,// 控制面板在图层之上
|
|
||||||
enableRetinaScaling: canvasConfig.enableRetinaScaling,
|
enableRetinaScaling: canvasConfig.enableRetinaScaling,
|
||||||
renderOnAddRemove: false,
|
renderOnAddRemove: false,
|
||||||
preserveObjectStacking: true, // 保持对象堆叠顺序
|
preserveObjectStacking: true, // 保持对象堆叠顺序
|
||||||
|
|||||||
@@ -447,6 +447,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</CanvasEditor>
|
</CanvasEditor>
|
||||||
</div>
|
</div>
|
||||||
|
<img src="" alt="" id="canvas-test-dom">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
@@ -458,6 +459,13 @@
|
|||||||
height: 600px !important;
|
height: 600px !important;
|
||||||
z-index: 99999999;
|
z-index: 99999999;
|
||||||
}
|
}
|
||||||
|
#canvas-test-dom{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999999999;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
* {
|
* {
|
||||||
|
|||||||
@@ -331,7 +331,6 @@ export default defineComponent({
|
|||||||
store.commit('DesignDetail/setCurrentDetailType',str)
|
store.commit('DesignDetail/setCurrentDetailType',str)
|
||||||
}
|
}
|
||||||
const setClothes = async (list:any,str:string)=>{
|
const setClothes = async (list:any,str:string)=>{
|
||||||
console.log(JSON.parse(JSON.stringify(list)))
|
|
||||||
let clothesList:any = []
|
let clothesList:any = []
|
||||||
if(detailData.isEditPattern.value == 'editSketch')await detailDom.canvasBox.submitBase64Data().then((rv)=>{
|
if(detailData.isEditPattern.value == 'editSketch')await detailDom.canvasBox.submitBase64Data().then((rv)=>{
|
||||||
detailData.selectDetail.sketchString = rv
|
detailData.selectDetail.sketchString = rv
|
||||||
@@ -369,7 +368,6 @@ export default defineComponent({
|
|||||||
// }else if(isCurrent){
|
// }else if(isCurrent){
|
||||||
|
|
||||||
// }
|
// }
|
||||||
console.log(JSON.parse(JSON.stringify(detailData.selectDetail.color)),'=====')
|
|
||||||
color = list[i].color?.rgba?.r != null?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
|
color = list[i].color?.rgba?.r != null?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
|
||||||
gradient = list[i].gradient
|
gradient = list[i].gradient
|
||||||
if((detailData.currentDetailType == 'sketch' && newData?.sketch) || detailData.isEditPattern.value == 'editSketch'){
|
if((detailData.currentDetailType == 'sketch' && newData?.sketch) || detailData.isEditPattern.value == 'editSketch'){
|
||||||
@@ -565,11 +563,14 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
//走画布合成图片并且直接分割
|
//走画布合成图片并且直接分割
|
||||||
|
if(detailData.isEditPattern.value !== 'canvasEditor' && detailData.isEditPattern.value !== 'redGreenExample'){
|
||||||
if(detailData.isEditPattern.value !== 'canvasEditor'){
|
if(detailData.isEditPattern.value !== 'canvasEditor'){
|
||||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||||
|
}
|
||||||
let otherData = await updateOtherLayers('single')
|
let otherData = await updateOtherLayers('single')
|
||||||
await detailDom.canvasBox.updateOtherLayers(otherData)
|
await detailDom.canvasBox.updateOtherLayers(otherData)
|
||||||
}
|
}
|
||||||
|
|
||||||
await detailDom.canvasBox.privewDetail()
|
await detailDom.canvasBox.privewDetail()
|
||||||
await upDateFrontBackSketch()
|
await upDateFrontBackSketch()
|
||||||
await uploadSelectDetail()
|
await uploadSelectDetail()
|
||||||
@@ -625,7 +626,7 @@ export default defineComponent({
|
|||||||
if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
|
if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
|
||||||
// await detailDom.canvasBox.saveCanvas()
|
// await detailDom.canvasBox.saveCanvas()
|
||||||
await (detailDom.canvasBox as any).privewDetail()
|
await (detailDom.canvasBox as any).privewDetail()
|
||||||
if(detailData.isEditPattern.value == 'canvasEditor')await uploadSelectDetail()
|
if(detailData.isEditPattern.value == 'canvasEditor' || detailData.isEditPattern.value == 'redGreenExample')await uploadSelectDetail()
|
||||||
detailData.isEditPattern.value = ''
|
detailData.isEditPattern.value = ''
|
||||||
}else{
|
}else{
|
||||||
// if(detailData.isEditPattern.value && (str == 'canvasEditor' || str == 'redGreenExample')){
|
// if(detailData.isEditPattern.value && (str == 'canvasEditor' || str == 'redGreenExample')){
|
||||||
@@ -780,8 +781,7 @@ export default defineComponent({
|
|||||||
color.gradient = canvasColor.gradient
|
color.gradient = canvasColor.gradient
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if(detailData.isEditPattern.value == 'canvasEditor' || detailData.isEditPattern.value == 'redGreenExample'){
|
||||||
if(detailData.isEditPattern.value == 'canvasEditor'){
|
|
||||||
delete detailData.selectDetail.newDetail
|
delete detailData.selectDetail.newDetail
|
||||||
detailData.selectDetail.trims.prints = allInfo.trims || []
|
detailData.selectDetail.trims.prints = allInfo.trims || []
|
||||||
detailData.selectDetail.printObject.prints = allInfo.prints || []
|
detailData.selectDetail.printObject.prints = allInfo.prints || []
|
||||||
@@ -804,7 +804,6 @@ export default defineComponent({
|
|||||||
if(detailData.currentDetailType == 'color'){
|
if(detailData.currentDetailType == 'color'){
|
||||||
detailData.detailLeftColorKey++
|
detailData.detailLeftColorKey++
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
const canvasReload = async ()=>{
|
const canvasReload = async ()=>{
|
||||||
if(detailData.isEditPattern.value){
|
if(detailData.isEditPattern.value){
|
||||||
|
|||||||
@@ -163,7 +163,6 @@ export default defineComponent({
|
|||||||
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
||||||
// if(!detailDom.editCanvas)return
|
// if(!detailDom.editCanvas)return
|
||||||
return new Promise(async (res,reject)=>{
|
return new Promise(async (res,reject)=>{
|
||||||
console.log(detailDom.editCanvas)
|
|
||||||
await detailDom.editCanvas.exportImage({
|
await detailDom.editCanvas.exportImage({
|
||||||
isContainFixed:true,
|
isContainFixed:true,
|
||||||
width:props.sketchSize.width,
|
width:props.sketchSize.width,
|
||||||
@@ -245,17 +244,27 @@ export default defineComponent({
|
|||||||
|
|
||||||
|
|
||||||
const frontBackChange = async (value:any)=>{
|
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){
|
if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
|
||||||
await privewDetail()
|
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 full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath || detailData.selectDetail.path
|
||||||
let size = {
|
let size = {
|
||||||
...detailData.canvasConfig,
|
...detailData.canvasConfig,
|
||||||
}
|
}
|
||||||
store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
|
||||||
segmentImage(value,full,size).then(async (rv)=>{
|
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?.oldImageUrl)front.oldImageUrl = front.imageUrl
|
||||||
if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
|
if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
|
||||||
if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
|
if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
|
||||||
@@ -267,7 +276,6 @@ export default defineComponent({
|
|||||||
back.imageUrl = rv.targetBackUrl
|
back.imageUrl = rv.targetBackUrl
|
||||||
// store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
// store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const editSketchCanvasInit = async (value:any)=>{
|
const editSketchCanvasInit = async (value:any)=>{
|
||||||
detailData.canvasInstance = value
|
detailData.canvasInstance = value
|
||||||
|
|||||||
@@ -393,8 +393,8 @@ export default defineComponent({
|
|||||||
angle: 0,
|
angle: 0,
|
||||||
flipX: false,
|
flipX: false,
|
||||||
flipY: false,
|
flipY: false,
|
||||||
// blendMode: "multiply",
|
blendMode: "multiply",
|
||||||
blendMode: "source-over",
|
// blendMode: "source-over",
|
||||||
gapX: 0,
|
gapX: 0,
|
||||||
gapY: 0,
|
gapY: 0,
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -124,7 +124,11 @@ export default defineComponent({
|
|||||||
const handleResize = ()=>{
|
const handleResize = ()=>{
|
||||||
clearTimeout(time)
|
clearTimeout(time)
|
||||||
time = setTimeout(()=>{
|
time = setTimeout(()=>{
|
||||||
store.commit('DesignDetail/setDesignDetail',getDetailListData.designDetail)
|
let data = {
|
||||||
|
...getDetailListData.designDetail,
|
||||||
|
fromType:'resize',
|
||||||
|
}
|
||||||
|
store.commit('DesignDetail/setDesignDetail',data)
|
||||||
getDetailListDom.position?.updataPosition?.()
|
getDetailListDom.position?.updataPosition?.()
|
||||||
getDetailListDom.modelNav?.setItemPosition?.()
|
getDetailListDom.modelNav?.setItemPosition?.()
|
||||||
getDetailListDom.position?.updateRect?.()
|
getDetailListDom.position?.updateRect?.()
|
||||||
|
|||||||
@@ -189,11 +189,11 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
return { scaleX, scaleY, rotate };
|
return { scaleX, scaleY, rotate };
|
||||||
}
|
}
|
||||||
const initMoveableForSelected = () => {
|
const initMoveableForSelected = async (isDestroy:boolean = false) => {
|
||||||
// 销毁旧的实例
|
// 销毁旧的实例
|
||||||
if(selectItem.imgDomIndex == -1)return
|
if(selectItem.imgDomIndex == -1)return
|
||||||
if (moveableInstance.value) {
|
if (moveableInstance?.value?.destroy && !isDestroy) {
|
||||||
moveableInstance.value.destroy();
|
moveableInstance?.value?.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectedEl = elementRefs.value[selectItem.imgDomIndex];
|
const selectedEl = elementRefs.value[selectItem.imgDomIndex];
|
||||||
@@ -509,7 +509,7 @@ export default defineComponent({
|
|||||||
watch(()=>detailData.frontBack.front.length,(newValue,oldValue)=>{
|
watch(()=>detailData.frontBack.front.length,(newValue,oldValue)=>{
|
||||||
if(selectItem.selectDetail?.id)selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == selectItem.selectDetail?.id)
|
if(selectItem.selectDetail?.id)selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == selectItem.selectDetail?.id)
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
initMoveableForSelected()
|
initMoveableForSelected(oldValue == 0)
|
||||||
},100)
|
},100)
|
||||||
})
|
})
|
||||||
const setRevocation = async ()=>{
|
const setRevocation = async ()=>{
|
||||||
|
|||||||
@@ -21,7 +21,11 @@
|
|||||||
{{ $t("event.detail") }}
|
{{ $t("event.detail") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_title_text content" v-for="item in eventsDetail.textList">
|
<div
|
||||||
|
class="modal_title_text content"
|
||||||
|
v-for="item in eventsDetail.textList"
|
||||||
|
:class="{ award: eventsDetail.id === 3 }"
|
||||||
|
>
|
||||||
<div class="eventsDetail_content_right_btn_box">
|
<div class="eventsDetail_content_right_btn_box">
|
||||||
<div
|
<div
|
||||||
class="eventsDetail_content_right_btn"
|
class="eventsDetail_content_right_btn"
|
||||||
@@ -43,6 +47,7 @@
|
|||||||
v-detailText="introItem.text"
|
v-detailText="introItem.text"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tips" v-if="eventsDetail.tips">{{ eventsDetail.tips }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -120,8 +125,13 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const openDetail = () => {
|
const openDetail = () => {
|
||||||
let language = locale.value === "ENGLISH" ? "en" : "zh"
|
let language = locale.value === "ENGLISH" ? "en" : "cn"
|
||||||
let url = `https://aida-global-design-awards.com.hk/${language}`
|
let url = `https://aida-global-design-awards.com.hk/${language}`
|
||||||
|
// 如果是dev环境把域名换成http://192.168.31.198
|
||||||
|
|
||||||
|
if (import.meta.env.VITE_APP_BASE_URL === "https://develop.api.aida.com.hk") {
|
||||||
|
url += "?env=dev"
|
||||||
|
}
|
||||||
window.open(url, "_blank")
|
window.open(url, "_blank")
|
||||||
|
|
||||||
// router.push("/award/index")
|
// router.push("/award/index")
|
||||||
@@ -233,7 +243,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.eventsDetail_content_right {
|
.eventsDetail_content_right {
|
||||||
.modal_title_text {
|
.modal_title_text {
|
||||||
letter-spacing: 0.4rem;
|
letter-spacing: 0.3rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
&-header {
|
&-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -265,18 +275,21 @@ export default defineComponent({
|
|||||||
.eventsDetail_content_right_btn_box {
|
.eventsDetail_content_right_btn_box {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
.eventsDetail_content_right_btn {
|
// .eventsDetail_content_right_btn {
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
// .modal_title_text:last-child {
|
||||||
.modal_title_text:last-child {
|
// }
|
||||||
}
|
|
||||||
.modal_title_text:last-child::after {
|
.modal_title_text:last-child::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
border-top: 3px solid;
|
border-top: 3px solid;
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
}
|
}
|
||||||
|
.modal_title_text.award:last-child:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -293,4 +306,13 @@ export default defineComponent({
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.tips{
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
font-size: var(--aida-fsize1-4);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.3rem;
|
||||||
|
}
|
||||||
|
.modal_title_text.content.award{
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -531,7 +531,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
const setSpeed = (item: any) => {
|
const setSpeed = (item: any) => {
|
||||||
speed.speedData = item
|
speed.speedData = {...item}
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.msg == 'Sketchboard') {
|
if (props.msg == 'Sketchboard') {
|
||||||
@@ -734,6 +734,8 @@ export default defineComponent({
|
|||||||
let maxImg = 8
|
let maxImg = 8
|
||||||
if (this.type_.type2 == 'Sketchboard') {
|
if (this.type_.type2 == 'Sketchboard') {
|
||||||
maxImg = 20
|
maxImg = 20
|
||||||
|
}else if(this.type_.type2 == 'Printboard'){
|
||||||
|
maxImg = 16
|
||||||
}
|
}
|
||||||
let parent: any = this.$parent
|
let parent: any = this.$parent
|
||||||
if (parent.isUseGenerate) {
|
if (parent.isUseGenerate) {
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
:get-container="() => $refs.upgradePlan"
|
:get-container="() => $refs.upgradePlan"
|
||||||
width="35%"
|
width="35%"
|
||||||
height="auto"
|
height="auto"
|
||||||
:zIndex="9999999"
|
zIndex="9999999"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
:closable="false"
|
:closable="false"
|
||||||
|
|||||||
@@ -205,7 +205,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="payment">
|
<div class="payment">
|
||||||
<div class="allocation">
|
<div class="allocation">
|
||||||
<div class="selectType">
|
<!-- <div class="selectType">
|
||||||
<div class="text">{{ $t('Renew.Payment') }}:</div>
|
<div class="text">{{ $t('Renew.Payment') }}:</div>
|
||||||
<label>
|
<label>
|
||||||
<input
|
<input
|
||||||
@@ -227,7 +227,7 @@
|
|||||||
/>
|
/>
|
||||||
{{ $t('Renew.Alipay') }}
|
{{ $t('Renew.Alipay') }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="gallery_btn gallery_btn_radius" @click="payment">
|
<div class="gallery_btn gallery_btn_radius" @click="payment">
|
||||||
{{ $t('upgradePlan.Continue') }}
|
{{ $t('upgradePlan.Continue') }}
|
||||||
|
|||||||
@@ -77,17 +77,10 @@ export default defineComponent({
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%,-50%);
|
||||||
width: 80%;
|
|
||||||
height: auto;
|
|
||||||
max-height: 80vh;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: max-content;
|
|
||||||
video{
|
video{
|
||||||
width: 100%;
|
max-height:80vh;
|
||||||
max-height: 80vh;
|
max-width:80vw;
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
width: max-content;
|
|
||||||
}
|
}
|
||||||
.general_video_btn{
|
.general_video_btn{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
0
src/component/home/design/childModel.vue
Normal file
@@ -745,6 +745,12 @@ export default defineComponent({
|
|||||||
"userLikeId": likeItem.id
|
"userLikeId": likeItem.id
|
||||||
}
|
}
|
||||||
arrData.push(obj)
|
arrData.push(obj)
|
||||||
|
designData.selectLikeDesign.forEach((v:any)=>{
|
||||||
|
if(v.id === likeItem.id){
|
||||||
|
v.oldSort = v.sort
|
||||||
|
v.sort = likeItem.sort
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
let data = {
|
let data = {
|
||||||
"userLikeGroupId": userGroupId.value,
|
"userLikeGroupId": userGroupId.value,
|
||||||
@@ -1304,9 +1310,9 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
|
const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design').filter((item:any) => likeDesignCollectionList.value.some((v:any) => (v.id === item.id)));
|
||||||
parents.map((parent:any) => {
|
parents.map((parent:any) => {
|
||||||
parent.sort = parent.oldSort||parent.sort
|
parent.sort = likeDesignCollectionList.value.find((v:any) => v.id === parent.id)?.sort || parent.oldSort||parent.sort
|
||||||
delete parent.oldSort
|
delete parent.oldSort
|
||||||
return {
|
return {
|
||||||
...parent,
|
...parent,
|
||||||
@@ -1533,7 +1539,7 @@ export default defineComponent({
|
|||||||
this.observerData.time = setTimeout(()=>{
|
this.observerData.time = setTimeout(()=>{
|
||||||
|
|
||||||
this.setSystemDesigner(0)
|
this.setSystemDesigner(0)
|
||||||
this.setDesignItemStyle()
|
// this.setDesignItemStyle()
|
||||||
},100)
|
},100)
|
||||||
// const { width } = entry.contentRect;
|
// const { width } = entry.contentRect;
|
||||||
}
|
}
|
||||||
@@ -1931,6 +1937,7 @@ export default defineComponent({
|
|||||||
this.disLikeLoading = true;
|
this.disLikeLoading = true;
|
||||||
Https.axiosPost(Https.httpUrls.designDislike, data)
|
Https.axiosPost(Https.httpUrls.designDislike, data)
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
|
console.log(rv)
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.recycleDomHidden = true
|
this.recycleDomHidden = true
|
||||||
this.store.commit("addDesignCollectionList", [design]);
|
this.store.commit("addDesignCollectionList", [design]);
|
||||||
|
|||||||
@@ -41,10 +41,10 @@
|
|||||||
<div class="center">{{ selectObject?.styleName?selectObject?.styleName:$t('Header.All') }}</div>
|
<div class="center">{{ selectObject?.styleName?selectObject?.styleName:$t('Header.All') }}</div>
|
||||||
<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="style brand marginBottom">
|
<!-- <div class="style brand marginBottom">
|
||||||
<div class="text">{{$t('Habit.Brand')}}:</div>
|
<div class="text">{{$t('Habit.Brand')}}:</div>
|
||||||
<div class="gallery_btn" @click="setBrandDNA">{{ $t('Habit.Select') }}</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="brandImg" v-if="selectObject.userBrandDna"><img :src="selectObject.userBrandDnaImg"></div>
|
||||||
<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
|
<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
|
||||||
<div class="text" style="font-size: 1.6rem;">
|
<div class="text" style="font-size: 1.6rem;">
|
||||||
|
|||||||
@@ -258,6 +258,7 @@ methods: {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content_bottom_item:nth-child(4n){
|
.content_bottom_item:nth-child(4n){
|
||||||
|
|||||||
@@ -24,8 +24,6 @@ export default {
|
|||||||
SubscribeNow: '立即订阅',
|
SubscribeNow: '立即订阅',
|
||||||
TaskList: '任务列表',
|
TaskList: '任务列表',
|
||||||
ViewOrders: '查询订单',
|
ViewOrders: '查询订单',
|
||||||
BecomeSeller: '成为卖家',
|
|
||||||
SellerDashboard: '卖家中心',
|
|
||||||
toolsToProduct: '转产品图',
|
toolsToProduct: '转产品图',
|
||||||
toolsRelight: '产品图编辑',
|
toolsRelight: '产品图编辑',
|
||||||
toolsToTransferPose: '产品图视频',
|
toolsToTransferPose: '产品图视频',
|
||||||
@@ -1721,19 +1719,5 @@ export default {
|
|||||||
IncorrectEmailFormat: '请输入正确的邮箱格式',
|
IncorrectEmailFormat: '请输入正确的邮箱格式',
|
||||||
CompleteVerificationCode: '请输入完整的验证码',
|
CompleteVerificationCode: '请输入完整的验证码',
|
||||||
PleaseEnterYourAccountNumberOrPassword: '请输入您的账号或密码'
|
PleaseEnterYourAccountNumberOrPassword: '请输入您的账号或密码'
|
||||||
},
|
|
||||||
SellerToolTip: {
|
|
||||||
title: '如何上架你的设计',
|
|
||||||
titleInfo: '按照以下4个步骤将你的设计发布到市场。',
|
|
||||||
step1Title: '选择系列',
|
|
||||||
step1Info: '选择你要上架的设计系列。',
|
|
||||||
step2Title: '选择草图',
|
|
||||||
step2Info: '挑选你要上架的草图,可同时选择多个。',
|
|
||||||
step3Title: '编辑草图详情',
|
|
||||||
step3Info: '详情信息已从AiDA自动填充,请检查并补充任何缺失的信息。',
|
|
||||||
step4Title: '上架发布',
|
|
||||||
step4Info: '发布后,你的设计将立即在市场上线。',
|
|
||||||
showAgain: '不再提示',
|
|
||||||
GetStarted: '开始体验',
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,8 +24,6 @@ export default {
|
|||||||
SubscribeNow: 'Subscribe now',
|
SubscribeNow: 'Subscribe now',
|
||||||
TaskList: 'Task List',
|
TaskList: 'Task List',
|
||||||
ViewOrders: 'View Orders',
|
ViewOrders: 'View Orders',
|
||||||
BecomeSeller: 'Become a Seller',
|
|
||||||
SellerDashboard: 'Seller Dashboard',
|
|
||||||
toolsToProduct: 'To product image',
|
toolsToProduct: 'To product image',
|
||||||
toolsRelight: 'Edit product image',
|
toolsRelight: 'Edit product image',
|
||||||
toolsToTransferPose: 'To product video',
|
toolsToTransferPose: 'To product video',
|
||||||
@@ -1772,19 +1770,5 @@ export default {
|
|||||||
IncorrectEmailFormat: 'The email format is incorrect',
|
IncorrectEmailFormat: 'The email format is incorrect',
|
||||||
CompleteVerificationCode: 'Please enter the complete verification code.',
|
CompleteVerificationCode: 'Please enter the complete verification code.',
|
||||||
PleaseEnterYourAccountNumberOrPassword: 'Please enter your account number or password'
|
PleaseEnterYourAccountNumberOrPassword: 'Please enter your account number or password'
|
||||||
},
|
|
||||||
SellerToolTip: {
|
|
||||||
title: 'How to List your Design',
|
|
||||||
titleInfo: 'Follow these 4 steps to publish your design to the marketplace.',
|
|
||||||
step1Title: 'Select Collection',
|
|
||||||
step1Info: 'Choose the design collection you want to list from.',
|
|
||||||
step2Title: 'Select Sketch',
|
|
||||||
step2Info: 'Pick the sketch you want to list. You can select multiple at a time.',
|
|
||||||
step3Title: 'Edit Sketch Details',
|
|
||||||
step3Info: 'Details are pre-filled from AiDA. Review and complete any missing information.',
|
|
||||||
step4Title: 'Listing Live',
|
|
||||||
step4Info: 'Publish and your design goes live on the marketplace.',
|
|
||||||
showAgain: 'Don’t show me again',
|
|
||||||
GetStarted: 'Get Started',
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -169,69 +169,6 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: "otherUsers",
|
name: "otherUsers",
|
||||||
meta: { enter: "all" },
|
meta: { enter: "all" },
|
||||||
component: () => import("@/component/Account/otherUsers.vue"),
|
component: () => import("@/component/Account/otherUsers.vue"),
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "becomeSeller",
|
|
||||||
name: "becomeSeller",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
component: () => import("@/views/SellerDashboard/BecomeSeller/index.vue"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "seller",
|
|
||||||
name: "seller",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
component: () => import("@/views/SellerDashboard/index.vue"),
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
path: "brandProfile",
|
|
||||||
name: "brandProfile",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
component: () => import("@/views/SellerDashboard/BrandProfile/index.vue"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "myListings",
|
|
||||||
name: "myListings",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
path: "",
|
|
||||||
name: "myListingsChild",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
redirect: "/home/seller/myListings/index",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "index",
|
|
||||||
name: "myListingsIndex",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
component: () => import("@/views/SellerDashboard/MyListings/main/index.vue"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "select",
|
|
||||||
name: "myListingsSelect",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
component: () => import("@/views/SellerDashboard/MyListings/createSelect/index.vue"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "select/:id",
|
|
||||||
name: "myListingsSelectItem",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
component: () => import("@/views/SellerDashboard/MyListings/createSelectItem/index.vue"),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "myOrders",
|
|
||||||
name: "myOrders",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
component: () => import("@/views/SellerDashboard/BrandProfile/index.vue"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "settings",
|
|
||||||
name: "settings",
|
|
||||||
meta: { enter: "all" },
|
|
||||||
component: () => import("@/views/SellerDashboard/BrandProfile/index.vue"),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@@ -241,6 +178,12 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
meta: { enter: "all" },
|
meta: { enter: "all" },
|
||||||
component: () => import("@/views/HomeRecommend.vue"),
|
component: () => import("@/views/HomeRecommend.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/Square/:lang",
|
||||||
|
name: "HomeRecommendLang",
|
||||||
|
meta: { enter: "all" },
|
||||||
|
component: () => import("@/views/HomeRecommend.vue"),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/administrator",
|
path: "/administrator",
|
||||||
name: "administrator",
|
name: "administrator",
|
||||||
@@ -394,6 +337,13 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
meta: { enter: 3 },
|
meta: { enter: 3 },
|
||||||
component: () =>
|
component: () =>
|
||||||
import("@/component/Administrator/SE/getGenerateFrequency/index.vue"),
|
import("@/component/Administrator/SE/getGenerateFrequency/index.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "globalAwardPopularity",
|
||||||
|
name: "globalAwardPopularity",
|
||||||
|
meta: { enter: 3 },
|
||||||
|
component: () =>
|
||||||
|
import("@/component/Administrator/globalAwardPopularity.vue"),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -87,8 +87,10 @@ const DesignDetail : Module<DesignDetail,RootState> = {
|
|||||||
left:0,
|
left:0,
|
||||||
top:0,
|
top:0,
|
||||||
}
|
}
|
||||||
|
if(data?.fromType !== 'resize'){
|
||||||
v.maskMinioUrl = v.layersObject?.[0]?.maskMinioUrl
|
v.maskMinioUrl = v.layersObject?.[0]?.maskMinioUrl
|
||||||
v.maskUrl = v.layersObject?.[0]?.maskUrl
|
v.maskUrl = v.layersObject?.[0]?.maskUrl
|
||||||
|
}
|
||||||
v.layersObject[i].designOpenrtionBtn = false
|
v.layersObject[i].designOpenrtionBtn = false
|
||||||
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
|
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
|
||||||
front[index] = v.layersObject[i]
|
front[index] = v.layersObject[i]
|
||||||
|
|||||||
@@ -198,6 +198,13 @@ const all = (t)=>{
|
|||||||
route: '/administrator/subscriptionPlan',
|
route: '/administrator/subscriptionPlan',
|
||||||
key: 'sub14',
|
key: 'sub14',
|
||||||
isShow: true
|
isShow: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Global Award Popularity',
|
||||||
|
icon: 'usetime',
|
||||||
|
route: '/administrator/globalAwardPopularity',
|
||||||
|
key: 'sub15',
|
||||||
|
isShow: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -346,6 +346,7 @@ export const Https = {
|
|||||||
switchSubscribePlan: '/api/subscription_plan/switchSubscriptionPlan', // 切换管理员订阅计划
|
switchSubscribePlan: '/api/subscription_plan/switchSubscriptionPlan', // 切换管理员订阅计划
|
||||||
switchSubAccountSubscribePlan:
|
switchSubAccountSubscribePlan:
|
||||||
'/api/subscription_plan/switchSubAccSubscriptionPlan', // 切换子账号订阅计划
|
'/api/subscription_plan/switchSubAccSubscriptionPlan', // 切换子账号订阅计划
|
||||||
|
getGlobalAwardPopularity: '/api/global-award/page/visit/count', // 获取global award流量
|
||||||
|
|
||||||
//云生成
|
//云生成
|
||||||
designCloud: `/api/design/designCloud`, //创建云生成
|
designCloud: `/api/design/designCloud`, //创建云生成
|
||||||
|
|||||||
@@ -340,12 +340,12 @@ const navTypeList = (t)=>{
|
|||||||
value:'Models',
|
value:'Models',
|
||||||
router:'library=Models'
|
router:'library=Models'
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
icon:'fi-ss-gem',
|
// icon:'fi-ss-gem',
|
||||||
label:t('LibraryPage.brandDNA'),
|
// label:t('LibraryPage.brandDNA'),
|
||||||
value:'MyBrand',
|
// value:'MyBrand',
|
||||||
router:'library=MyBrand'
|
// router:'library=MyBrand'
|
||||||
},
|
// },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// history:{
|
// history:{
|
||||||
|
|||||||
@@ -672,6 +672,17 @@ function sketchToMask(sketchImage) {
|
|||||||
img.src = sketchImage;
|
img.src = sketchImage;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isValidUrl(string) {
|
||||||
|
try {
|
||||||
|
const url = new URL(string)
|
||||||
|
// 通常我们只需要 http 或 https 协议
|
||||||
|
return url.protocol === "http:" || url.protocol === "https:"
|
||||||
|
} catch (err) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
isEmail,
|
isEmail,
|
||||||
getUploadUrl,
|
getUploadUrl,
|
||||||
@@ -695,5 +706,6 @@ export {
|
|||||||
calculateGradientCoordinate,
|
calculateGradientCoordinate,
|
||||||
segmentImage,
|
segmentImage,
|
||||||
UrlToFile,
|
UrlToFile,
|
||||||
sketchToMask
|
sketchToMask,
|
||||||
|
isValidUrl
|
||||||
}
|
}
|
||||||
@@ -373,15 +373,6 @@
|
|||||||
<i class="fi fi-rs-notebook"></i>
|
<i class="fi fi-rs-notebook"></i>
|
||||||
<span class="select_item_des">{{ $t('Header.ViewOrders') }}</span>
|
<span class="select_item_des">{{ $t('Header.ViewOrders') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="select_item" @click="onBecomeSeller">
|
|
||||||
<span class="icon"><svg-icon name="seller-sellerIndex" /></span>
|
|
||||||
<span class="select_item_des">{{ $t('Header.BecomeSeller') }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="select_item" @click="onSellerDashboard">
|
|
||||||
<span class="icon"><svg-icon name="seller-sellerIndex" /></span>
|
|
||||||
<span class="select_item_des">{{ $t('Header.SellerDashboard') }}</span>
|
|
||||||
<a-badge :dot="true"></a-badge>
|
|
||||||
</div>
|
|
||||||
<router-link
|
<router-link
|
||||||
class="select_item"
|
class="select_item"
|
||||||
v-if="userDetail.systemList.indexOf(3) >= 0"
|
v-if="userDetail.systemList.indexOf(3) >= 0"
|
||||||
@@ -409,7 +400,7 @@
|
|||||||
<a href="https://www.facebook.com/CodeCreateAI" target="_blank" >
|
<a href="https://www.facebook.com/CodeCreateAI" target="_blank" >
|
||||||
<img src="@/assets/images/socialMediaLogo/faceBookIcon.svg" alt="">
|
<img src="@/assets/images/socialMediaLogo/faceBookIcon.svg" alt="">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.youtube.com/@AiDA-3.1" target="_blank" >
|
<a href="https://www.youtube.com/@Code-Create_AiDA" target="_blank" >
|
||||||
<img src="@/assets/images/socialMediaLogo/socialIcons.svg" alt="">
|
<img src="@/assets/images/socialMediaLogo/socialIcons.svg" alt="">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.linkedin.com/company/code-create-limited" target="_blank" >
|
<a href="https://www.linkedin.com/company/code-create-limited" target="_blank" >
|
||||||
@@ -1254,12 +1245,6 @@ export default defineComponent({
|
|||||||
let payOrder = this.$refs.payOrder
|
let payOrder = this.$refs.payOrder
|
||||||
payOrder.init()
|
payOrder.init()
|
||||||
},
|
},
|
||||||
onBecomeSeller(){
|
|
||||||
this.$router.push({ name: 'becomeSeller' })
|
|
||||||
},
|
|
||||||
onSellerDashboard(){
|
|
||||||
this.$router.push({ name: 'brandProfile' })
|
|
||||||
},
|
|
||||||
//教程
|
//教程
|
||||||
getTutorial() {
|
getTutorial() {
|
||||||
let url = 'https://aida-user-manual-chinese.super.site/'
|
let url = 'https://aida-user-manual-chinese.super.site/'
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
|||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
import { setLang } from '@/tool/guide'
|
import { setLang } from '@/tool/guide'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
import { gsap, TweenMax } from 'gsap'
|
import { gsap, TweenMax } from 'gsap'
|
||||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@@ -71,6 +71,7 @@ export default defineComponent({
|
|||||||
const {t, locale} = useI18n()
|
const {t, locale} = useI18n()
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
let registerModel = ref()
|
let registerModel = ref()
|
||||||
let data = reactive({})
|
let data = reactive({})
|
||||||
|
|
||||||
@@ -117,7 +118,14 @@ export default defineComponent({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('resize', updataIsMoblie)
|
window.addEventListener('resize', updataIsMoblie)
|
||||||
// 初始化语言设置
|
// 初始化语言设置
|
||||||
const savedLang = localStorage.getItem('loginLanguage')
|
let savedLang = localStorage.getItem('loginLanguage')
|
||||||
|
if(route?.params?.lang == 'cn'){
|
||||||
|
savedLang = 'CHINESE_SIMPLIFIED'
|
||||||
|
localStorage.setItem('loginLanguage', savedLang)
|
||||||
|
}{
|
||||||
|
savedLang = 'ENGLISH'
|
||||||
|
localStorage.setItem('loginLanguage', savedLang)
|
||||||
|
}
|
||||||
if (savedLang) {
|
if (savedLang) {
|
||||||
isChinese.value = savedLang === 'CHINESE_SIMPLIFIED'
|
isChinese.value = savedLang === 'CHINESE_SIMPLIFIED'
|
||||||
locale.value = savedLang
|
locale.value = savedLang
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="become-seller">
|
|
||||||
<seller-header
|
|
||||||
title="Apply to Become a Seller"
|
|
||||||
tip="Join the Stylish Parade and start selling your design work"
|
|
||||||
/>
|
|
||||||
<div class="content">
|
|
||||||
<seller-review v-if="isSubmit" />
|
|
||||||
<seller-apply v-else @submit="isSubmit = true" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from "vue"
|
|
||||||
import sellerHeader from "../seller-header.vue"
|
|
||||||
import sellerReview from "./sellerReview.vue"
|
|
||||||
import sellerApply from "./sellerApply.vue"
|
|
||||||
const isSubmit = ref(false)
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.become-seller {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> .content {
|
|
||||||
margin-top: 4rem;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,353 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seller-apply">
|
|
||||||
<div class="session">
|
|
||||||
<div class="content mini-scrollbar">
|
|
||||||
<div class="title">Brand Information</div>
|
|
||||||
<div class="tip">Share a few details to set up your seller profile</div>
|
|
||||||
<div class="form">
|
|
||||||
<a-form
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
layout="vertical"
|
|
||||||
class="my-form"
|
|
||||||
ref="formRef"
|
|
||||||
>
|
|
||||||
<a-form-item label="Store Name" name="storeName">
|
|
||||||
<a-input
|
|
||||||
v-model:value="formData.storeName"
|
|
||||||
placeholder="Enter the store name"
|
|
||||||
:maxlength="80"
|
|
||||||
/>
|
|
||||||
<span class="tip-length">{{ formData.storeName.length }}/80</span>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="Owner’s Full Name" name="fullName">
|
|
||||||
<a-input
|
|
||||||
v-model:value="formData.fullName"
|
|
||||||
placeholder="Enter store owner's full name"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<div class="form-group">
|
|
||||||
<a-form-item label="Email" name="email">
|
|
||||||
<a-input
|
|
||||||
type="email"
|
|
||||||
v-model:value="formData.email"
|
|
||||||
placeholder="Enter email"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="Phone Number" name="phoneNumber">
|
|
||||||
<a-input
|
|
||||||
type="tel"
|
|
||||||
v-model:value="formData.phoneNumber"
|
|
||||||
placeholder="Enter phone number"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
</div>
|
|
||||||
<a-form-item label="Store Description" name="description">
|
|
||||||
<a-textarea
|
|
||||||
v-model:value="formData.description"
|
|
||||||
placeholder="Briefly describe your design style and store features..."
|
|
||||||
:maxlength="500"
|
|
||||||
/>
|
|
||||||
<span class="tip-length">{{ formData.description.length }}/500</span>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="Portfoilo/Social Media Links">
|
|
||||||
<a-input
|
|
||||||
placeholder="https://"
|
|
||||||
v-for="(v, i) in formData.links"
|
|
||||||
:key="i"
|
|
||||||
v-model:value="formData.links[i]"
|
|
||||||
>
|
|
||||||
<template #prefix>Link {{ i + 1 }}</template>
|
|
||||||
</a-input>
|
|
||||||
<a-input
|
|
||||||
placeholder="https://"
|
|
||||||
v-model:value="newLink"
|
|
||||||
@keyup.enter.prevent="addLink"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<span @click="addLink" style="cursor: pointer">
|
|
||||||
<svg-icon name="seller-add" size="20" />
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</a-input>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="session">
|
|
||||||
<div class="content">
|
|
||||||
<div class="title">Brand Information</div>
|
|
||||||
<div class="tip">Share a few details to set up your seller profile</div>
|
|
||||||
<div class="agreement">
|
|
||||||
<div class="title">AiDA Seller Agreement</div>
|
|
||||||
<div class="tip">
|
|
||||||
By checking the box below, you agree to comply with the following terms:
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>Provide accurate and truthful personal and store information</li>
|
|
||||||
<li>Only sell original designs or content with proper licensing</li>
|
|
||||||
<li>Maintain high quality standards for all products</li>
|
|
||||||
<li>Respond to customer inquiries within 48 hours</li>
|
|
||||||
<li>Ship orders within promised timeframes</li>
|
|
||||||
<li>Comply with AiDA's terms of service and community guidelines</li>
|
|
||||||
<li>Pay applicable platform fees and transaction charges</li>
|
|
||||||
<li>Handle customer disputes professionally and fairly</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<a-checkbox class="agree-agreement" v-model:checked="isAgreement">
|
|
||||||
I have read and agree to the Seller Agreement, understanding my responsibilities
|
|
||||||
and obligations as a seller on the AiDA platform.
|
|
||||||
</a-checkbox>
|
|
||||||
</div>
|
|
||||||
<div class="btns">
|
|
||||||
<button class="cancel" @click="onCancel">Cancel</button>
|
|
||||||
<button class="submit" :disabled="!isAgreement" @click="onSubmit">
|
|
||||||
Submit Application
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive } from "vue"
|
|
||||||
import { useRoute, useRouter } from "vue-router"
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
const emit = defineEmits(["submit"])
|
|
||||||
const formRules = {
|
|
||||||
storeName: [{ required: true, message: "Enter the store name" }],
|
|
||||||
fullName: [{ required: true, message: "Enter store owner's full name" }],
|
|
||||||
email: [{ required: true, message: "Enter email" }],
|
|
||||||
phoneNumber: [{ required: true, message: "Enter phone number" }],
|
|
||||||
description: [{ required: true, message: "Enter store description" }]
|
|
||||||
}
|
|
||||||
const formRef = ref(null)
|
|
||||||
const formData = reactive({
|
|
||||||
storeName: "",
|
|
||||||
fullName: "",
|
|
||||||
email: "",
|
|
||||||
phoneNumber: "",
|
|
||||||
description: "",
|
|
||||||
links: ["", ""]
|
|
||||||
})
|
|
||||||
const isAgreement = ref(false)
|
|
||||||
const newLink = ref("")
|
|
||||||
const addLink = () => {
|
|
||||||
formData.links.push(newLink.value)
|
|
||||||
newLink.value = ""
|
|
||||||
}
|
|
||||||
const onCancel = () => {
|
|
||||||
router.back()
|
|
||||||
}
|
|
||||||
const onSubmit = () => {
|
|
||||||
formRef.value
|
|
||||||
.validate()
|
|
||||||
.then(() => {
|
|
||||||
console.log(formData)
|
|
||||||
emit("submit")
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
console.log("validate failed")
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.seller-apply {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 10rem;
|
|
||||||
display: flex;
|
|
||||||
gap: 6rem;
|
|
||||||
> .session {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
> .content {
|
|
||||||
max-height: 100%;
|
|
||||||
padding: 2.4rem;
|
|
||||||
border: 1px solid #b0b0b0;
|
|
||||||
border-radius: 2.4rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
> .title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
line-height: 130%;
|
|
||||||
color: #000;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
}
|
|
||||||
> .tip {
|
|
||||||
font-family: pingfang_regular;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 150%;
|
|
||||||
color: #b0b0b0;
|
|
||||||
}
|
|
||||||
> .form {
|
|
||||||
margin-top: 1.6rem;
|
|
||||||
}
|
|
||||||
> .agreement {
|
|
||||||
padding: 1.6rem;
|
|
||||||
border-radius: 1.2rem;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
margin-bottom: 2.4rem;
|
|
||||||
> .title {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: #000;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
> ul > li,
|
|
||||||
> .tip {
|
|
||||||
font-family: pingfang_medium;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: #737373;
|
|
||||||
}
|
|
||||||
> ul {
|
|
||||||
margin-top: 3rem;
|
|
||||||
padding-left: 2.5rem;
|
|
||||||
> li {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:deep(.agree-agreement) {
|
|
||||||
align-items: flex-start;
|
|
||||||
span {
|
|
||||||
font-family: pingfang_medium;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
.ant-checkbox-inner,
|
|
||||||
.ant-checkbox-input {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
.ant-checkbox-inner {
|
|
||||||
border-color: #000 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .btns {
|
|
||||||
margin-top: 3.9rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 1.6rem;
|
|
||||||
> button {
|
|
||||||
height: 6rem;
|
|
||||||
border-radius: 6rem;
|
|
||||||
padding: 0 4rem;
|
|
||||||
background-color: #000;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
&:active:not(:disabled) {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .cancel {
|
|
||||||
background-color: #fff;
|
|
||||||
color: #000;
|
|
||||||
border: 0.15rem solid #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.my-form) {
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.6rem;
|
|
||||||
.ant-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-form-item {
|
|
||||||
margin-bottom: 1.6rem;
|
|
||||||
position: relative;
|
|
||||||
.tip-length {
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
right: 1.6rem;
|
|
||||||
font-family: pingfang_regular;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #df2c2c;
|
|
||||||
}
|
|
||||||
.ant-form-item-explain,
|
|
||||||
.ant-form-item-explain-connected {
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
.ant-form-item-explain-error {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-form-item-label {
|
|
||||||
display: flex;
|
|
||||||
padding: 0 0 0.6rem 0;
|
|
||||||
> label {
|
|
||||||
font-family: pingfang_medium;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 150%;
|
|
||||||
|
|
||||||
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
display: inline-block;
|
|
||||||
color: #df2c2c;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
content: "*";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-form-item-control-input {
|
|
||||||
.ant-input-affix-wrapper,
|
|
||||||
textarea,
|
|
||||||
input {
|
|
||||||
border-radius: 1.2rem;
|
|
||||||
border: 0.16rem solid #d1d1d1;
|
|
||||||
font-family: pingfang_regular;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: #000;
|
|
||||||
padding: 1.6rem;
|
|
||||||
&::placeholder {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-input-affix-wrapper {
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.ant-input-prefix {
|
|
||||||
width: 5.2rem;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 150%;
|
|
||||||
color: #000;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
border: none;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 1.6rem;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
height: 5rem;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
height: 11rem;
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seller-review">
|
|
||||||
<img class="success" src="@/assets/images/seller/success-1.png" />
|
|
||||||
<div class="title">Application Submitted</div>
|
|
||||||
<div class="tip">
|
|
||||||
Our team will review your application and get back to you within 1–3 business days.
|
|
||||||
You'll receive a notification in your email once a decision has been made.
|
|
||||||
</div>
|
|
||||||
<div class="step-list">
|
|
||||||
<div v-for="v in list" :key="v.title" class="step-item">
|
|
||||||
<img v-show="!v.active" src="@/assets/images/seller/success-0.png" />
|
|
||||||
<img v-show="v.active" src="@/assets/images/seller/success-1.png" />
|
|
||||||
<div class="content">
|
|
||||||
<div class="title">{{ v.title }}</div>
|
|
||||||
<div class="tip">{{ v.tip }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="home-btn" @click="onBackToHome">Back to Homepage</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from "vue"
|
|
||||||
import { useRoute, useRouter } from "vue-router"
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
const list = ref([
|
|
||||||
{
|
|
||||||
title: "Step 1: Submit Application",
|
|
||||||
tip: "Fill out the seller information form and agree to our terms",
|
|
||||||
active: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Step 2: Review & Verification",
|
|
||||||
tip: "Our team will review your application (typically 1-3 business days)",
|
|
||||||
active: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Step 3: Start Selling",
|
|
||||||
tip: "Once approved, access your seller dashboard and start listing products ",
|
|
||||||
active: false
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const onBackToHome = () => {
|
|
||||||
router.push({ name: "home" })
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.seller-review {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 60rem;
|
|
||||||
height: 90%;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2.4rem;
|
|
||||||
> .success {
|
|
||||||
width: 10rem;
|
|
||||||
height: 10rem;
|
|
||||||
padding: 1.2rem;
|
|
||||||
}
|
|
||||||
> .title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
line-height: 130%;
|
|
||||||
text-align: center;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
> .tip {
|
|
||||||
font-family: pingfang_medium;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
line-height: 170%;
|
|
||||||
text-align: center;
|
|
||||||
color: #585858;
|
|
||||||
}
|
|
||||||
> .step-list {
|
|
||||||
margin: 2.6rem 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1.6rem;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.4rem;
|
|
||||||
border-radius: 1.2rem;
|
|
||||||
> .step-item {
|
|
||||||
display: flex;
|
|
||||||
> img {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
margin: 0.2rem;
|
|
||||||
margin-right: 1.2rem;
|
|
||||||
}
|
|
||||||
> .content {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
> .title {
|
|
||||||
font-style: Bold;
|
|
||||||
color: #000;
|
|
||||||
line-height: 150%;
|
|
||||||
}
|
|
||||||
> .tip {
|
|
||||||
font-family: "pingfang_medium";
|
|
||||||
line-height: 170%;
|
|
||||||
color: #737373;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .home-btn {
|
|
||||||
width: 31rem;
|
|
||||||
height: 6rem;
|
|
||||||
border-radius: 4rem;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #000;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
&:active {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="brand-profile-index">brand-profile-index</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.seller-dashboard-index {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
||||||
import sellerHeader from "../../seller-header.vue"
|
|
||||||
|
|
||||||
//const props = defineProps({
|
|
||||||
//})
|
|
||||||
//const emit = defineEmits([
|
|
||||||
//])
|
|
||||||
let data = reactive({
|
|
||||||
})
|
|
||||||
onMounted(()=>{
|
|
||||||
})
|
|
||||||
onUnmounted(()=>{
|
|
||||||
})
|
|
||||||
defineExpose({})
|
|
||||||
const {} = toRefs(data);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="myListings-seller">
|
|
||||||
<seller-header
|
|
||||||
title="Select Collection"
|
|
||||||
:breadcrumbs="[
|
|
||||||
{title:'My Listings', name:'myListingsIndex'},
|
|
||||||
{title:'Select Collection', name: 'myListingsSelect' }
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
</seller-header>
|
|
||||||
<div class="content">
|
|
||||||
1231222aaa
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.myListings-seller {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> .content {
|
|
||||||
margin-top: 2rem;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
||||||
import sellerHeader from "../../seller-header.vue"
|
|
||||||
|
|
||||||
//const props = defineProps({
|
|
||||||
//})
|
|
||||||
//const emit = defineEmits([
|
|
||||||
//])
|
|
||||||
let data = reactive({
|
|
||||||
})
|
|
||||||
onMounted(()=>{
|
|
||||||
})
|
|
||||||
onUnmounted(()=>{
|
|
||||||
})
|
|
||||||
defineExpose({})
|
|
||||||
const {} = toRefs(data);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="myListings-seller">
|
|
||||||
<seller-header
|
|
||||||
title="Select Collection"
|
|
||||||
:breadcrumbs="[
|
|
||||||
{title:'My Listings', name:'myListingsIndex'},
|
|
||||||
{title:'Select Collection', name: 'myListingsSelect' },
|
|
||||||
{title:'Select Sketch', name: 'myListingsSelectItem' }
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
</seller-header>
|
|
||||||
<div class="content">
|
|
||||||
1231222aaa
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.myListings-seller {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> .content {
|
|
||||||
margin-top: 2rem;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
||||||
import sellerHeader from "../../seller-header.vue"
|
|
||||||
|
|
||||||
//const props = defineProps({
|
|
||||||
//})
|
|
||||||
//const emit = defineEmits([
|
|
||||||
//])
|
|
||||||
let data = reactive({
|
|
||||||
})
|
|
||||||
onMounted(()=>{
|
|
||||||
})
|
|
||||||
onUnmounted(()=>{
|
|
||||||
})
|
|
||||||
defineExpose({})
|
|
||||||
const {} = toRefs(data);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="myListings-seller">
|
|
||||||
<seller-header
|
|
||||||
title="My Listings"
|
|
||||||
tip="Active listings and unpublished inventory."
|
|
||||||
>
|
|
||||||
<template #right>
|
|
||||||
<div class="button">
|
|
||||||
<span>New Listing</span>
|
|
||||||
<div class="icon">
|
|
||||||
<i class="fi fi-br-plus"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</seller-header>
|
|
||||||
<div class="content">
|
|
||||||
123122222s
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.myListings-seller {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
.button {
|
|
||||||
width: 16rem;
|
|
||||||
line-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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seller-dashboard-index">
|
|
||||||
<div class="nav">
|
|
||||||
<div
|
|
||||||
v-for="v in list"
|
|
||||||
:key="v.path"
|
|
||||||
:class="{ active: v.path === activePath }"
|
|
||||||
@click="handleClick(v.path)"
|
|
||||||
>
|
|
||||||
<div class="icon"><svg-icon :name="v.icon" size="20" /></div>
|
|
||||||
<span class="layer">{{ v.layer }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="view">
|
|
||||||
<router-view></router-view>
|
|
||||||
</div>
|
|
||||||
<toolTipBox v-model:visible="visible" @close="()=>{}"></toolTipBox>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from "vue"
|
|
||||||
import { useRoute, useRouter } from "vue-router"
|
|
||||||
import toolTipBox from './toolTipBox.vue'
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
const visible = ref(false)
|
|
||||||
const list = ref([
|
|
||||||
{
|
|
||||||
icon: "seller-brandProfile",
|
|
||||||
layer: "Brand Profile",
|
|
||||||
path: "/home/seller/brandProfile"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: "seller-myListings",
|
|
||||||
layer: "My Listings",
|
|
||||||
path: "/home/seller/myListings"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: "seller-myOrders",
|
|
||||||
layer: "My Orders",
|
|
||||||
path: "/home/seller/myOrders"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: "seller-settings",
|
|
||||||
layer: "Settings",
|
|
||||||
path: "/home/seller/settings"
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const activePath = computed(() => route.path)
|
|
||||||
const handleClick = (path) => {
|
|
||||||
if (path === activePath.value) return
|
|
||||||
router.push(path)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.seller-dashboard-index {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> .nav {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 3.6rem;
|
|
||||||
> div {
|
|
||||||
width: 18rem;
|
|
||||||
height: 6rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
> .icon {
|
|
||||||
margin-right: 1rem;
|
|
||||||
color: #b0b0b0;
|
|
||||||
}
|
|
||||||
> .layer {
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
> .icon,
|
|
||||||
> .layer {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 0.4rem;
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .view {
|
|
||||||
margin-top: 4rem;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seller-header">
|
|
||||||
<div class="back" @click="() => router.back()">
|
|
||||||
<svg-icon name="seller-back" size="24" />
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<span class="title" v-show="title">{{ title }}</span>
|
|
||||||
<span class="tip" v-show="tip">{{ tip }}</span>
|
|
||||||
<div class="breadcrumbs" v-show="breadcrumbs.length > 0">
|
|
||||||
<template v-for="(v, i) in breadcrumbs" :key="i">
|
|
||||||
<span
|
|
||||||
class="title"
|
|
||||||
:class="{
|
|
||||||
last: i === breadcrumbs.length - 1
|
|
||||||
}"
|
|
||||||
@click="() => router.push({ name: v.name })"
|
|
||||||
>{{ v.title }}</span
|
|
||||||
>
|
|
||||||
<span class="icon" v-show="i < breadcrumbs.length - 1">
|
|
||||||
<svg-icon name="seller-arrow_right_solid" size="10" />
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<slot name="right"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from "vue"
|
|
||||||
import { useRoute, useRouter } from "vue-router"
|
|
||||||
const props = defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ""
|
|
||||||
},
|
|
||||||
tip: {
|
|
||||||
type: String,
|
|
||||||
default: ""
|
|
||||||
},
|
|
||||||
breadcrumbs: {
|
|
||||||
type: Array, // { title: string, name: string }
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
.seller-header {
|
|
||||||
width: 100%;
|
|
||||||
height: 6rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2.4rem;
|
|
||||||
> .back {
|
|
||||||
width: 5rem;
|
|
||||||
height: 5rem;
|
|
||||||
border-radius: 1.2rem;
|
|
||||||
border: 1px solid #d7d7d7;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
> .content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> .title {
|
|
||||||
line-height: 130%;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
> .tip {
|
|
||||||
font-family: "pingfang_medium";
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 150%;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
> .breadcrumbs {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
> .title {
|
|
||||||
font-family: "pingfang_regular";
|
|
||||||
color: #999;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
cursor: pointer;
|
|
||||||
&:not(.last) {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,265 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
||||||
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'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const emit = defineEmits([
|
|
||||||
'update:visible','close'
|
|
||||||
])
|
|
||||||
const {t} = useI18n()
|
|
||||||
let data = reactive({
|
|
||||||
visible: props.visible,
|
|
||||||
stepList: [
|
|
||||||
{
|
|
||||||
img: sellerToolTipImg1,
|
|
||||||
title: t('SellerToolTip.step1Title'),
|
|
||||||
info: t('SellerToolTip.step1Info'),
|
|
||||||
},{
|
|
||||||
img: sellerToolTipImg2,
|
|
||||||
title: t('SellerToolTip.step2Title'),
|
|
||||||
info: t('SellerToolTip.step2Info'),
|
|
||||||
},{
|
|
||||||
img: sellerToolTipImg3,
|
|
||||||
title: t('SellerToolTip.step3Title'),
|
|
||||||
info: t('SellerToolTip.step3Info'),
|
|
||||||
},{
|
|
||||||
title: t('SellerToolTip.step4Title'),
|
|
||||||
info: t('SellerToolTip.step4Info'),
|
|
||||||
}
|
|
||||||
],
|
|
||||||
showAgain: false,
|
|
||||||
})
|
|
||||||
let toolTipBoxRef = ref(null)
|
|
||||||
|
|
||||||
const cleardata = ()=>{
|
|
||||||
emit('update:visible', false)
|
|
||||||
emit('close', data.showAgain)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(()=>{
|
|
||||||
})
|
|
||||||
onUnmounted(()=>{
|
|
||||||
})
|
|
||||||
defineExpose({})
|
|
||||||
const { showAgain } = toRefs(data);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div ref="toolTipBoxRef" class="toolTipBox" v-if="visible">
|
|
||||||
<a-modal
|
|
||||||
class="collection generalModel"
|
|
||||||
v-model:visible="data.visible"
|
|
||||||
:footer="null"
|
|
||||||
:get-container="() => toolTipBoxRef"
|
|
||||||
width="126.2rem"
|
|
||||||
: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="titleBox">
|
|
||||||
<div class="title">
|
|
||||||
{{t('SellerToolTip.title')}}
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
{{t('SellerToolTip.titleInfo')}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stepBox">
|
|
||||||
<div class="step" v-for="(item, index) in data.stepList" :key="index" :class="{'active': index === 2}">
|
|
||||||
<div class="stepNum">
|
|
||||||
<div class="num">
|
|
||||||
{{index}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="title">
|
|
||||||
{{item.title}}
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
{{item.info}}
|
|
||||||
</div>
|
|
||||||
<div class="imgBox" v-if="item.img">
|
|
||||||
<img :src="item.img" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="showAgain">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model="showAgain">
|
|
||||||
{{t('SellerToolTip.showAgain')}}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="gallery_btn" @click="cleardata()">
|
|
||||||
{{t('SellerToolTip.GetStarted')}}
|
|
||||||
<i class="fi fi-rr-arrow-small-right"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-modal>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.toolTipBox{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
:deep(.generalModel){
|
|
||||||
height: auto;
|
|
||||||
.ant-modal-body{
|
|
||||||
padding: 6.2rem 8rem;
|
|
||||||
.generalModel_btn{
|
|
||||||
.generalModel_closeIcon{
|
|
||||||
transform: translate(0%, 0%);
|
|
||||||
top: 4rem;
|
|
||||||
right: 4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.titleBox{
|
|
||||||
margin-bottom: 5.2rem;
|
|
||||||
.title{
|
|
||||||
font-size: 3.2rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color:#000000;
|
|
||||||
line-height: 130%;
|
|
||||||
font-family: 'pingfang_semibold';
|
|
||||||
margin-bottom: 1.2rem;
|
|
||||||
}
|
|
||||||
.info{
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
line-height: 130%;
|
|
||||||
color: #979797;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.stepBox{
|
|
||||||
margin: 0 1.3rem;
|
|
||||||
display: flex;
|
|
||||||
gap: 7rem;
|
|
||||||
margin-bottom: 9.7rem;
|
|
||||||
.step{
|
|
||||||
--itemWidth: 21.2rem;
|
|
||||||
--textColor: #585858;
|
|
||||||
--indexBgColor: #f6f6f6;
|
|
||||||
--indexTextColor: #000000;
|
|
||||||
--indexBorderColor: #C7C7C7;
|
|
||||||
&:hover{
|
|
||||||
--textColor: #000;
|
|
||||||
--indexBgColor: #000;
|
|
||||||
--indexTextColor: #fff;
|
|
||||||
--indexBorderColor: #000;
|
|
||||||
}
|
|
||||||
width: var(--itemWidth);
|
|
||||||
> div{
|
|
||||||
transition: all .3s;
|
|
||||||
}
|
|
||||||
&.active{
|
|
||||||
--itemWidth: 23.2rem;
|
|
||||||
}
|
|
||||||
.stepNum{
|
|
||||||
width: 6.4rem;
|
|
||||||
height: 6.4rem;
|
|
||||||
margin-bottom: 2.6rem;
|
|
||||||
position: relative;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 2.8rem;
|
|
||||||
> .num{
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
color: var(--indexTextColor);
|
|
||||||
background-color: var(--indexBgColor);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid var(--indexBorderColor);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: all .3s;
|
|
||||||
}
|
|
||||||
&::after{
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: calc(var(--itemWidth) + 8px);
|
|
||||||
height: 1.5px;
|
|
||||||
background-color: #C7C7C7;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 100%;
|
|
||||||
transform: translate(0%,-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child .stepNum::after{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
line-height: 130%;
|
|
||||||
color: var(--textColor);
|
|
||||||
margin-bottom: 2.6rem;
|
|
||||||
}
|
|
||||||
.info{
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
line-height: 120%;
|
|
||||||
letter-spacing: -1%;
|
|
||||||
color: var(--textColor);
|
|
||||||
margin-bottom: 2.6rem;
|
|
||||||
}
|
|
||||||
.imgBox{
|
|
||||||
width: 21.2rem;
|
|
||||||
img{
|
|
||||||
width: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom{
|
|
||||||
display: flex;
|
|
||||||
margin: 0 1.3rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
.showAgain{
|
|
||||||
> label{
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: pingfang_regular;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 150%;
|
|
||||||
letter-spacing: -1%;
|
|
||||||
display: flex;
|
|
||||||
gap: 1.1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .gallery_btn{
|
|
||||||
padding: 0 3rem;
|
|
||||||
display: flex;
|
|
||||||
> i{
|
|
||||||
margin-left: 1.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||