47 Commits

Author SHA1 Message Date
d5266937d7 feat: 价格限制最低4港币 2026-06-04 16:00:12 +08:00
9cd9d82077 Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite 2026-06-04 14:37:35 +08:00
9869217688 feat: 产品主图和封面添加删除按钮 2026-06-04 14:37:33 +08:00
X1627315083@163.com
768986af54 打开3d等功能入口 2026-06-04 10:08:26 +08:00
李志鹏
c58a2ed093 Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite 2026-06-03 17:33:15 +08:00
李志鹏
10b632572a 卖家红点 2026-06-03 17:33:13 +08:00
89d27ba206 Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite 2026-06-03 10:18:56 +08:00
bee0a66626 feat: 防抖 2026-06-03 10:18:54 +08:00
李志鹏
3519eeffd7 Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite 2026-06-02 15:59:45 +08:00
李志鹏
21a71aeffb id 2026-06-02 15:59:43 +08:00
82384b8488 Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite 2026-06-02 13:43:23 +08:00
3c53212c10 feat: 裁剪组件遮罩 2026-06-02 13:43:10 +08:00
李志鹏
4dd1eab217 1 2026-06-02 13:37:42 +08:00
李志鹏
70ddcb63d0 卖家头像裁剪不超出范围 2026-06-02 11:40:18 +08:00
李志鹏
6131cd2e96 订单触底加载 2026-06-02 10:44:30 +08:00
00bc9041ef Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite 2026-06-01 16:28:31 +08:00
436c472327 chore: 保存图标修改 2026-06-01 16:28:29 +08:00
X1627315083@163.com
d771785cf7 fix 2026-06-01 16:18:59 +08:00
ee274e07f4 bugfix: 重复属性 2026-06-01 15:49:07 +08:00
87f2c67ced Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite 2026-06-01 15:47:24 +08:00
bc83de1da6 bugfix: 商品编辑页样式 2026-06-01 15:47:00 +08:00
李志鹏
e3b2ca530c Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite 2026-06-01 13:55:42 +08:00
李志鹏
e3c889c58a 111 2026-06-01 13:55:39 +08:00
49e9ba423a Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite 2026-06-01 13:34:47 +08:00
d02061c407 bugfix: 参数传递改为用sessionStorage 2026-06-01 13:34:45 +08:00
X1627315083@163.com
c60458d1a0 fix 2026-06-01 11:39:56 +08:00
5a85ff0189 feat: 订阅计划结束时间可以修改为更靠前的日期 2026-05-22 09:49:31 +08:00
X1627315083@163.com
5eaa77596e fix 2026-05-13 16:36:23 +08:00
李志鹏
848e7b4692 更改卖家审批提示词 2026-05-12 11:23:18 +08:00
李志鹏
fd140ebc56 还原绑定 2026-05-12 11:08:18 +08:00
李志鹏
34094c8c92 Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite 2026-05-12 11:01:54 +08:00
李志鹏
e4dc2bf729 还原绑定 2026-05-12 11:01:53 +08:00
李志鹏
7f226179d9 绑定修改 2026-05-11 10:50:17 +08:00
李志鹏
3edff6b05c Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite 2026-05-11 10:01:19 +08:00
李志鹏
6fd1212298 修改 2026-05-11 10:01:18 +08:00
e093cccb8d bugfix: 没有产品主图时自动选中问题 2026-05-07 17:06:06 +08:00
b2c6c61515 bugfix: 封面必填校验 2026-05-07 15:53:47 +08:00
0219b1a2f4 docs: 商品编辑页面的agents.md 2026-05-07 13:53:06 +08:00
133433a260 feat: 视频保存 2026-05-07 13:15:21 +08:00
90a59a3dc5 feat: 视频显示到列表 2026-05-07 10:21:08 +08:00
c8a65ee2cb Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite 2026-05-06 16:33:32 +08:00
226918e941 style: 裁剪弹窗标题被遮挡问题 2026-05-06 16:33:31 +08:00
李志鹏
494bfd68ca 1 2026-05-06 16:13:34 +08:00
X1627315083@163.com
95b70792ba Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite 2026-05-06 16:06:56 +08:00
X1627315083@163.com
a0fffa5896 fix 2026-05-06 16:06:54 +08:00
李志鹏
06eaabc742 Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite 2026-05-06 13:45:29 +08:00
李志鹏
27da4739a6 语言适配 2026-05-06 13:45:28 +08:00
32 changed files with 2753 additions and 2130 deletions

View File

@@ -1,3 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1634_4311)">
<path d="M7.99968 6.6665C7.47226 6.6665 6.95669 6.8229 6.51816 7.11592C6.07962 7.40894 5.73783 7.82541 5.536 8.31268C5.33416 8.79995 5.28135 9.33613 5.38425 9.85341C5.48714 10.3707 5.74112 10.8458 6.11406 11.2188C6.487 11.5917 6.96215 11.8457 7.47943 11.9486C7.99672 12.0515 8.5329 11.9987 9.02017 11.7968C9.50743 11.595 9.92391 11.2532 10.2169 10.8147C10.5099 10.3762 10.6663 9.86059 10.6663 9.33317C10.6663 8.62593 10.3854 7.94765 9.88529 7.44755C9.3852 6.94746 8.70692 6.6665 7.99968 6.6665ZM7.99968 10.6665C7.73597 10.6665 7.47818 10.5883 7.25892 10.4418C7.03965 10.2953 6.86875 10.087 6.76784 9.84341C6.66692 9.59978 6.64052 9.33169 6.69196 9.07305C6.74341 8.81441 6.8704 8.57683 7.05687 8.39036C7.24334 8.20389 7.48091 8.0769 7.73956 8.02546C7.9982 7.97401 8.26629 8.00041 8.50992 8.10133C8.75356 8.20225 8.96179 8.37314 9.1083 8.59241C9.25481 8.81168 9.33301 9.06946 9.33301 9.33317C9.33301 9.68679 9.19253 10.0259 8.94248 10.276C8.69244 10.526 8.3533 10.6665 7.99968 10.6665Z" fill="currentColor"/>
<path d="M15.024 2.74801L13.252 0.976013C12.9432 0.665575 12.576 0.419466 12.1714 0.251935C11.7669 0.0844031 11.3332 -0.00122304 10.8953 1.31975e-05H3.33333C2.4496 0.00107177 1.60237 0.352601 0.97748 0.977493C0.352588 1.60239 0.00105857 2.44962 0 3.33335L0 12.6667C0.00105857 13.5504 0.352588 14.3976 0.97748 15.0225C1.60237 15.6474 2.4496 15.999 3.33333 16H12.6667C13.5504 15.999 14.3976 15.6474 15.0225 15.0225C15.6474 14.3976 15.9989 13.5504 16 12.6667V5.10468C16.0012 4.66684 15.9156 4.2331 15.7481 3.82858C15.5805 3.42405 15.3344 3.05678 15.024 2.74801ZM11.3333 1.38668V2.00001C11.3333 2.53045 11.1226 3.03915 10.7475 3.41423C10.3725 3.7893 9.86377 4.00001 9.33333 4.00001H6.66667C6.13623 4.00001 5.62753 3.7893 5.25245 3.41423C4.87738 3.03915 4.66667 2.53045 4.66667 2.00001V1.33335H10.8953C11.0429 1.33466 11.1898 1.35255 11.3333 1.38668ZM14.6667 12.6667C14.6667 13.1971 14.456 13.7058 14.0809 14.0809C13.7058 14.456 13.1971 14.6667 12.6667 14.6667H3.33333C2.8029 14.6667 2.29419 14.456 1.91912 14.0809C1.54405 13.7058 1.33333 13.1971 1.33333 12.6667V3.33335C1.33333 2.80291 1.54405 2.29421 1.91912 1.91913C2.29419 1.54406 2.8029 1.33335 3.33333 1.33335V2.00001C3.33439 2.88374 3.68592 3.73097 4.31081 4.35587C4.93571 4.98076 5.78294 5.33229 6.66667 5.33335H9.33333C10.1717 5.33074 10.9781 5.01179 11.5914 4.44026C12.2047 3.86872 12.5797 3.08674 12.6413 2.25068L14.0813 3.69068C14.455 4.0666 14.6653 4.57468 14.6667 5.10468V12.6667Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_1634_4311">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@@ -0,0 +1,5 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.2503 2.33333H10.442C10.3066 1.67499 9.94839 1.08345 9.42772 0.658419C8.90706 0.233386 8.25578 0.000848473 7.58366 0L6.41699 0C5.74487 0.000848473 5.0936 0.233386 4.57293 0.658419C4.05226 1.08345 3.69405 1.67499 3.55866 2.33333H1.75033C1.59562 2.33333 1.44724 2.39479 1.33785 2.50419C1.22845 2.61358 1.16699 2.76196 1.16699 2.91667C1.16699 3.07138 1.22845 3.21975 1.33785 3.32915C1.44724 3.43854 1.59562 3.5 1.75033 3.5H2.33366V11.0833C2.33459 11.8566 2.64217 12.5979 3.18895 13.1447C3.73573 13.6915 4.47706 13.9991 5.25033 14H8.75033C9.52359 13.9991 10.2649 13.6915 10.8117 13.1447C11.3585 12.5979 11.6661 11.8566 11.667 11.0833V3.5H12.2503C12.405 3.5 12.5534 3.43854 12.6628 3.32915C12.7722 3.21975 12.8337 3.07138 12.8337 2.91667C12.8337 2.76196 12.7722 2.61358 12.6628 2.50419C12.5534 2.39479 12.405 2.33333 12.2503 2.33333ZM6.41699 1.16667H7.58366C7.94549 1.16711 8.29832 1.27947 8.59377 1.48834C8.88922 1.69721 9.11282 1.99237 9.23391 2.33333H4.76674C4.88783 1.99237 5.11143 1.69721 5.40688 1.48834C5.70234 1.27947 6.05517 1.16711 6.41699 1.16667ZM10.5003 11.0833C10.5003 11.5475 10.316 11.9926 9.98776 12.3208C9.65957 12.649 9.21445 12.8333 8.75033 12.8333H5.25033C4.7862 12.8333 4.34108 12.649 4.01289 12.3208C3.6847 11.9926 3.50033 11.5475 3.50033 11.0833V3.5H10.5003V11.0833Z" fill="currentColor"/>
<path d="M5.83333 10.5002C5.98804 10.5002 6.13642 10.4387 6.24581 10.3293C6.35521 10.2199 6.41667 10.0715 6.41667 9.91683V6.41683C6.41667 6.26212 6.35521 6.11375 6.24581 6.00435C6.13642 5.89495 5.98804 5.8335 5.83333 5.8335C5.67862 5.8335 5.53025 5.89495 5.42085 6.00435C5.31146 6.11375 5.25 6.26212 5.25 6.41683V9.91683C5.25 10.0715 5.31146 10.2199 5.42085 10.3293C5.53025 10.4387 5.67862 10.5002 5.83333 10.5002Z" fill="currentColor"/>
<path d="M8.16634 10.5002C8.32105 10.5002 8.46942 10.4387 8.57882 10.3293C8.68822 10.2199 8.74967 10.0715 8.74967 9.91683V6.41683C8.74967 6.26212 8.68822 6.11375 8.57882 6.00435C8.46942 5.89495 8.32105 5.8335 8.16634 5.8335C8.01163 5.8335 7.86326 5.89495 7.75386 6.00435C7.64447 6.11375 7.58301 6.26212 7.58301 6.41683V9.91683C7.58301 10.0715 7.64447 10.2199 7.75386 10.3293C7.86326 10.4387 8.01163 10.5002 8.16634 10.5002Z" fill="currentColor"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4872 5.28094L9.06266 0.853126C8.51506 0.306793 7.7733 0 7 0C6.2267 0 5.48494 0.306793 4.93734 0.853126L0.512757 5.28094C0.349671 5.44308 0.220373 5.636 0.132355 5.84851C0.0443375 6.06102 -0.000647733 6.2889 7.04636e-06 6.51894V12.249C7.04636e-06 12.7134 0.184381 13.1587 0.51257 13.4871C0.840758 13.8155 1.28588 14 1.75001 14H12.25C12.7141 14 13.1592 13.8155 13.4874 13.4871C13.8156 13.1587 14 12.7134 14 12.249V6.51894C14.0006 6.2889 13.9557 6.06102 13.8676 5.84851C13.7796 5.636 13.6503 5.44308 13.4872 5.28094ZM8.75 12.8326H5.25V10.5364C5.25 10.072 5.43438 9.62663 5.76256 9.29825C6.09075 8.96986 6.53587 8.78538 7 8.78538C7.46413 8.78538 7.90925 8.96986 8.23744 9.29825C8.56562 9.62663 8.75 10.072 8.75 10.5364V12.8326ZM12.8333 12.249C12.8333 12.4038 12.7719 12.5522 12.6625 12.6617C12.5531 12.7711 12.4047 12.8326 12.25 12.8326H9.91666V10.5364C9.91666 9.76241 9.60937 9.0201 9.06239 8.47279C8.51541 7.92549 7.77355 7.61801 7 7.61801C6.22645 7.61801 5.48459 7.92549 4.93761 8.47279C4.39063 9.0201 4.08334 9.76241 4.08334 10.5364V12.8326H1.75001C1.5953 12.8326 1.44692 12.7711 1.33753 12.6617C1.22813 12.5522 1.16667 12.4038 1.16667 12.249V6.51894C1.16721 6.36425 1.22862 6.216 1.33759 6.10627L5.76217 1.6802C6.09099 1.35272 6.53605 1.16887 7 1.16887C7.46394 1.16887 7.90901 1.35272 8.23783 1.6802L12.6624 6.10802C12.771 6.21732 12.8323 6.36486 12.8333 6.51894V12.249Z" fill="#585858"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1634_3952)">
<path d="M19 0H5C3.67441 0.00158786 2.40356 0.528882 1.46622 1.46622C0.528882 2.40356 0.00158786 3.67441 0 5L0 19C0.00158786 20.3256 0.528882 21.5964 1.46622 22.5338C2.40356 23.4711 3.67441 23.9984 5 24H19C20.3256 23.9984 21.5964 23.4711 22.5338 22.5338C23.4711 21.5964 23.9984 20.3256 24 19V5C23.9984 3.67441 23.4711 2.40356 22.5338 1.46622C21.5964 0.528882 20.3256 0.00158786 19 0ZM5 2H19C19.7956 2 20.5587 2.31607 21.1213 2.87868C21.6839 3.44129 22 4.20435 22 5V19C21.9983 19.4455 21.8957 19.8848 21.7 20.285L12.537 11.122C12.0727 10.6576 11.5214 10.2892 10.9147 10.0378C10.308 9.78644 9.65772 9.65707 9.001 9.65707C8.34428 9.65707 7.69399 9.78644 7.08728 10.0378C6.48056 10.2892 5.92931 10.6576 5.465 11.122L2 14.586V5C2 4.20435 2.31607 3.44129 2.87868 2.87868C3.44129 2.31607 4.20435 2 5 2ZM5 22C4.20435 22 3.44129 21.6839 2.87868 21.1213C2.31607 20.5587 2 19.7956 2 19V17.414L6.878 12.536C7.1566 12.2572 7.4874 12.0361 7.85151 11.8852C8.21561 11.7343 8.60587 11.6566 9 11.6566C9.39413 11.6566 9.78439 11.7343 10.1485 11.8852C10.5126 12.0361 10.8434 12.2572 11.122 12.536L20.285 21.7C19.8848 21.8957 19.4455 21.9983 19 22H5Z" fill="#585858"/>
<path d="M16 10.5C16.6922 10.5 17.3689 10.2947 17.9445 9.91015C18.5201 9.52556 18.9687 8.97893 19.2336 8.33939C19.4985 7.69985 19.5678 6.99612 19.4327 6.31719C19.2977 5.63825 18.9644 5.01461 18.4749 4.52513C17.9854 4.03564 17.3617 3.7023 16.6828 3.56725C16.0039 3.4322 15.3001 3.50152 14.6606 3.76642C14.0211 4.03133 13.4744 4.47993 13.0899 5.05551C12.7053 5.63108 12.5 6.30777 12.5 7C12.5 7.92826 12.8687 8.8185 13.5251 9.47487C14.1815 10.1313 15.0717 10.5 16 10.5ZM16 5.5C16.2967 5.5 16.5867 5.58798 16.8334 5.7528C17.08 5.91762 17.2723 6.15189 17.3858 6.42598C17.4994 6.70007 17.5291 7.00167 17.4712 7.29264C17.4133 7.58361 17.2704 7.85088 17.0607 8.06066C16.8509 8.27044 16.5836 8.4133 16.2926 8.47118C16.0017 8.52906 15.7001 8.49935 15.426 8.38582C15.1519 8.27229 14.9176 8.08003 14.7528 7.83336C14.588 7.58668 14.5 7.29667 14.5 7C14.5 6.60218 14.658 6.22065 14.9393 5.93934C15.2206 5.65804 15.6022 5.5 16 5.5Z" fill="#585858"/>
</g>
<defs>
<clipPath id="clip0_1634_3952">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -572,10 +572,6 @@
}
const disableEndDate = (current: Dayjs) => {
if (isEditMode.value) {
const specificTime = dayjs(formState.currentPeriodEnd)
return current && current < dayjs(formState.currentPeriodEnd * 1000).startOf("day")
}
return disabledDate(current)
}
const range = (start: number, end: number) => {

File diff suppressed because it is too large Load Diff

View File

@@ -24,6 +24,7 @@ export default {
SubscribeNow: 'Subscribe now',
TaskList: 'Task List',
ViewOrders: 'View Orders',
PersonalCenter: 'Personal Center',
BecomeSeller: 'Become a Seller',
SellerDashboard: 'Seller Dashboard',
toolsToProduct: 'To product image',
@@ -1784,7 +1785,7 @@ export default {
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: 'Dont show me again',
showAgain: 'Dont show this again for 7 days',
GetStarted: 'Get Started',
},
SellerListEdit:{
@@ -1793,9 +1794,9 @@ export default {
sketch:'Sketch',
mainProductImage:'Main Product Image',
cover:'Cover',
productImageDesc:'Choose from product image',
productImageDesc:'Choose from product media',
cropDesc:'Crop from main product image or sketch',
productImageMainTitle:'Product Image ',
productImageMainTitle:'Product Media ',
productImageSubTitle:'(from design collection)',
apparelSketchTitle:'Apparel Sketch ',
apparelSketchSubTitle:'(from design collection)',
@@ -1809,6 +1810,7 @@ export default {
learnMore:'Learn more',
requiredFieldTips:'Please fill in {field}',
requiredFieldTipsWithPage:'Listing {index}: Please fill in {field}',
priceMinMessage: 'Price cannot be less than HK$4',
draftSaved: 'Draft Saved',
draftDesc: 'Your listing has been saved as a draft. \nYou can continue editing or publish it later from My Listings.',
listingLive:'Listing Live',
@@ -1862,6 +1864,7 @@ export default {
price: "Price",
buyerUsername: "Buyer Username",
date: "Date",
dateTimeFormat: 'SM D, YYYY<br/> h:mm A',
// 设置
notifications: "Notifications",
notificationsTitle: "New order notification",
@@ -1889,6 +1892,7 @@ export default {
draftMessage: 'Product moved to drafts and stats reset.',
publishMessage: 'Item is now live on the Marketplace.',
ActiveListings: 'Active Listings',
Praka: 'Praka',
Drafts: 'Drafts',
Cancel: 'Cancel',
Delete: 'Delete',
@@ -1908,5 +1912,36 @@ export default {
SelectCollection: 'Select Collection',
SelectSketch: 'Select Sketch',
EditListingDetails: 'Edit Listing Details',
VideoWarning:'The first selected item is the main product image. Videos cannot be used.',
selectSketchMaxNum: 'Select up to 9 sketches',
},
ApplySeller: {
applySellerTitle: 'Apply to Become a Seller',
applySellerDesc: 'Join the Stylish Parade and start selling your design work',
formTitle: 'Brand Information',
formTip: 'Share a few details to set up your seller profile',
termsTitle: 'Seller Terms',
termsTip: 'Please carefully read and agree to the following terms',
agreementTitle: 'AiDA Seller Agreement',
agreementTip: 'Please read and agree to the following agreement',
agreementItem1: "Provide accurate and truthful personal and store information",
agreementItem2: "Only sell original designs or content with proper licensing",
agreementItem3: "Maintain high quality standards for all products",
agreementItem4: "Respond to customer inquiries within 48 hours",
agreementItem5: "Ship orders within promised timeframes",
agreementItem6: "Comply with AiDA's terms of service and community guidelines",
agreementItem7: "Pay applicable platform fees and transaction charges",
agreementItem8: "Handle customer disputes professionally and fairly",
agreementAgreement: "I have read and agree to the Seller Agreement, understanding my responsibilities and obligations as a seller on the AiDA platform.",
submitApplication: "Submit Application",
applicationSubmitted: "Application Submitted",
applicationSubmittedTip: "Approval is expected shortly. Upon receipt, please ensure your payout account is linked under <span>Seller Dashboard > Settings</span> prior to listing any items.",
auditStatus1_title: "Step 1: Submit Application",
auditStatus1_tip: "Fill out the seller information form and agree to our terms",
auditStatus2_title: "Step 2: Review & Verification",
auditStatus2_tip: "Our team will review your application (typically 1-3 business days)",
auditStatus3_title: "Step 3: Start Selling",
auditStatus3_tip: "Once approved, access your seller dashboard and start listing products",
backToHomepage: "Back to Homepage",
}
}

View File

@@ -224,8 +224,8 @@ const routes: Array<RouteRecordRaw> = [
name: "becomeSeller",
meta: {
enter: "all",
sellerHeaderTitle: "Apply to Become a Seller",
sellerHeaderTip: "Join the Stylish Parade and start selling your design work"
sellerHeaderTitle: "ApplySeller.applySellerTitle",
sellerHeaderTip: "ApplySeller.applySellerDesc"
},
component: () => import("@/views/SellerDashboard/BecomeSeller/index.vue")
},
@@ -235,6 +235,11 @@ const routes: Array<RouteRecordRaw> = [
meta: { enter: "all" },
component: () => import("@/views/SellerDashboard/index.vue"),
children: [
{
path: "",
meta: { enter: "all" },
redirect: "/home/seller/brandProfile"
},
{
path: "brandProfile",
name: "brandProfile",
@@ -283,7 +288,7 @@ const routes: Array<RouteRecordRaw> = [
name: "myListingsSelectItem",
meta: {
enter: "all",
sellerHeaderTitleKey: "Seller.SelectCollection",
sellerHeaderTitleKey: "Seller.SelectSketch",
sellerBreadcrumbs: [
myListingsBreadcrumb,
selectCollectionBreadcrumb,

View File

@@ -19,12 +19,14 @@ interface Seller {
isSeller: boolean,
applyStatus: number | null,
designerInfo: DesignerInfo,
firstEnter: boolean,
}
const seller: Module<Seller, RootState> = {
namespaced: true,
state: {
isSeller: false,
firstEnter: false,
applyStatus: null,
designerInfo: {
shopName: "--",
@@ -38,6 +40,9 @@ const seller: Module<Seller, RootState> = {
},
},
mutations: {
set_firstEnter(state: Seller, value: boolean) {
state.firstEnter = value
},
set_isSeller(state: Seller, value: boolean) {
state.isSeller = value
},
@@ -77,7 +82,8 @@ const seller: Module<Seller, RootState> = {
actions: {
get_isSeller({ commit }) {
Https.axiosGet(Https.httpUrls.checkSellerDesigner).then(rv => {
commit('set_isSeller', !!rv)
commit('set_isSeller', !!rv.hasQualification)
commit('set_firstEnter', !rv.firstEnter)
})
},
async get_designerInfo({ commit }) {

View File

@@ -272,12 +272,12 @@ const navTypeList = (t)=>{
// },
// {
// icon:'fi fi-rr-puzzle-alt',
// value:'deReconstruction',
// label:t('Header.toolsDeReconstruction'),
// router:'tools=deReconstruction'
// },
{
icon:'fi fi-rr-puzzle-alt',
value:'deReconstruction',
label:t('Header.toolsDeReconstruction'),
router:'tools=deReconstruction'
},
{
icon:'fi fi-ss-box-open',
value:'toProduct',
@@ -294,18 +294,18 @@ const navTypeList = (t)=>{
label:t('Header.toolsToTransferPose'),
router:'tools=poseTransfer'
},
// {
// icon:'fi fi-rr-cubes',
// value:'patternMaking3D',
// label:t('Header.toolsPatternMaking'),
// router:'tools=patternMaking3D'
// },
// {
// icon:'fi fi-rr-pen-swirl',
// value:'canvasUpload',
// label:t('Header.toolsCanvas'),
// router:'tools=canvasUpload'
// },
{
icon:'fi fi-rr-cubes',
value:'patternMaking3D',
label:t('Header.toolsPatternMaking'),
router:'tools=patternMaking3D'
},
{
icon:'fi fi-rr-pen-swirl',
value:'canvasUpload',
label:t('Header.toolsCanvas'),
router:'tools=canvasUpload'
},
]
},
library:{

View File

@@ -709,3 +709,37 @@ export {
sketchToMask,
isValidUrl
}
/** 时间格式化-自定义格式
* @param value 时间对象|时间戳|时间字符串
* @param format 格式化字符串,默认值为 'YYYY-MM-DD HH:mm:ss'
* @returns 格式化后的时间字符串
*/
export function FormatDate(value, format = 'YYYY-MM-DD HH:mm:ss') {
const d = new Date(value);
if (!d || isNaN(d.getTime())) return 'Invalid Date';
const pad = (n) => String(n).padStart(2, '0');
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const tokens = {
YYYY: d.getFullYear(),
YY: String(d.getFullYear()).slice(-2),
MM: pad(d.getMonth() + 1),
M: d.getMonth() + 1,
SM: months[d.getMonth()],
DD: pad(d.getDate()),
D: d.getDate(),
HH: pad(d.getHours()),
H: d.getHours(),
hh: pad(d.getHours() % 12 || 12),
h: d.getHours() % 12 || 12,
mm: pad(d.getMinutes()),
m: d.getMinutes(),
ss: pad(d.getSeconds()),
s: d.getSeconds(),
A: d.getHours() < 12 ? 'AM' : 'PM',
a: d.getHours() < 12 ? 'am' : 'pm'
}
const reg = new RegExp(Object.keys(tokens).join('|'), 'g')
return format.replace(reg, match => tokens[match]);
}

View File

@@ -318,7 +318,7 @@
</div>
</div>
<div class="homeMain_user">
<div class="homeMain_user_icon" @click="openAccount">
<div class="homeMain_user_icon">
<img :src="userDetail.avatar" alt="" />
</div>
<div class="homeMain_user_detail">
@@ -373,6 +373,10 @@
<i class="fi fi-rs-notebook"></i>
<span class="select_item_des">{{ $t('Header.ViewOrders') }}</span>
</div>
<div class="select_item" @click="openAccount">
<span class="icon"><svg-icon name="home" /></span>
<span class="select_item_des">{{ $t('Header.PersonalCenter') }}</span>
</div>
<div class="select_item" @click="onBecomeSeller" v-if="!isSeller">
<span class="icon"><svg-icon name="seller-sellerIndex" /></span>
<span class="select_item_des">{{ $t('Header.BecomeSeller') }}</span>
@@ -380,7 +384,7 @@
<div class="select_item" @click="onSellerDashboard" v-else>
<span class="icon"><svg-icon name="seller-sellerIndex" /></span>
<span class="select_item_des">{{ $t('Header.SellerDashboard') }}</span>
<a-badge :dot="true"></a-badge>
<a-badge v-if="firstEnterSeller" :dot="true"></a-badge>
</div>
<router-link
class="select_item"
@@ -1076,10 +1080,14 @@ export default defineComponent({
const isSeller = computed(() => {
return store.state.seller.isSeller
})
const firstEnterSeller = computed(() => {
return store.state.seller.firstEnter
})
return {
store,
userDetail,
isSeller,
firstEnterSeller,
t,
...toRefs(homeMainData),
...toRefs(historyData),
@@ -1264,6 +1272,7 @@ export default defineComponent({
},
onSellerDashboard(){
this.$router.push({ name: 'brandProfile' })
this.store.commit('seller/set_firstEnter', false)
},
//教程
getTutorial() {

View File

@@ -2,56 +2,58 @@
<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="title">{{ $t("ApplySeller.formTitle") }}</div>
<div class="tip">{{ $t("ApplySeller.formTip") }}</div>
<div class="form">
<a-form :model="formData" :rules="formRules" layout="vertical" ref="formRef">
<a-form-item label="Store Name" name="storeName">
<a-form-item :label="$t('Seller.storeName')" name="storeName">
<a-input
v-model:value="formData.storeName"
placeholder="Enter the store name"
:placeholder="$t('Seller.storeNameDesc')"
:maxlength="80"
/>
<span class="tip-length">{{ formData.storeName.length }}/80</span>
</a-form-item>
<a-form-item label="Owners Full Name" name="fullName">
<a-form-item :label="$t('Seller.ownerName')" name="fullName">
<a-input
v-model:value="formData.fullName"
placeholder="Enter store owner's full name"
:placeholder="$t('Seller.ownerNameDesc')"
/>
</a-form-item>
<div class="form-group">
<a-form-item label="Email" name="email">
<a-form-item :label="$t('Seller.email')" name="email">
<a-input
type="email"
v-model:value="formData.email"
placeholder="Enter email"
:placeholder="$t('Seller.emailDesc')"
/>
</a-form-item>
<a-form-item label="Phone Number" name="phoneNumber">
<a-form-item :label="$t('Seller.mobile')" name="mobile">
<a-input
type="tel"
v-model:value="formData.phoneNumber"
placeholder="Enter phone number"
v-model:value="formData.mobile"
:placeholder="$t('Seller.mobileDesc')"
/>
</a-form-item>
</div>
<a-form-item label="Store Description" name="description">
<a-form-item :label="$t('Seller.storeDescription')" name="description">
<a-textarea
v-model:value="formData.description"
placeholder="Briefly describe your design style and store features..."
:placeholder="$t('Seller.storeDescriptionDesc')"
:maxlength="500"
/>
<span class="tip-length">{{ formData.description.length }}/500</span>
</a-form-item>
<a-form-item label="Portfoilo/Social Media Links">
<a-form-item :label="$t('Seller.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>
<template #prefix>{{
$t("Seller.link", { index: i + 1 })
}}</template>
</a-input>
<a-input
placeholder="https://"
@@ -71,33 +73,25 @@
</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="title">{{ $t("ApplySeller.termsTitle") }}</div>
<div class="tip">{{ $t("ApplySeller.termsTip") }}</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>
<div class="title">{{ $t("ApplySeller.agreementTitle") }}</div>
<div class="tip">{{ $t("ApplySeller.agreementTip") }}</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>
<li v-for="(v, i) in 8" :key="i">
{{ $t(`ApplySeller.agreementItem${i + 1}`) }}
</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.
{{ $t("ApplySeller.agreementAgreement") }}
</a-checkbox>
</div>
<div class="btns">
<button class="cancel" @click="onCancel">Cancel</button>
<button class="cancel" @click="onCancel">{{ $t("Seller.cancel") }}</button>
<button class="submit" :disabled="!isAgreement" @click="onSubmit">
Submit Application
{{ $t("ApplySeller.submitApplication") }}
</button>
</div>
</div>
@@ -106,24 +100,26 @@
<script setup>
import { ref, reactive } from "vue"
import { useI18n } from "vue-i18n"
const { t } = useI18n()
import { useRoute, useRouter } from "vue-router"
const route = useRoute()
const router = useRouter()
import { Https } from "@/tool/https"
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" }]
storeName: [{ required: true, message: t("Seller.storeNameDesc") }],
fullName: [{ required: true, message: t("Seller.ownerNameDesc") }],
email: [{ required: true, message: t("Seller.emailDesc") }],
mobile: [{ required: true, message: t("Seller.mobileDesc") }],
description: [{ required: true, message: t("Seller.storeDescriptionErr") }]
}
const formRef = ref(null)
const formData = reactive({
storeName: "",
fullName: "",
email: "",
phoneNumber: "",
mobile: "",
description: "",
links: ["", ""]
})
@@ -140,7 +136,6 @@
formRef.value
.validate()
.then(() => {
console.log(formData)
const data = {
// userId: 0,
shopName: formData.storeName,
@@ -148,7 +143,7 @@
// brandBanner: "",
ownerName: formData.fullName,
email: formData.email,
mobile: formData.phoneNumber,
mobile: formData.mobile,
description: formData.description,
socialLinks: JSON.stringify(formData.links.filter((v) => v))
}
@@ -173,12 +168,18 @@
> .session {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0.1rem;
> .content {
max-height: 100%;
padding: 2.4rem;
border: 1px solid #b0b0b0;
padding: 0.4rem 1.5rem;
border: 2rem solid transparent;
border-right-width: 0.4rem;
border-left-width: 0.4rem;
border-radius: 2.4rem;
overflow-y: auto;
box-shadow: 0 0 0 0.1rem #b0b0b0;
// margin: 0.2rem;
> .title {
font-size: 2.2rem;

View File

@@ -1,11 +1,11 @@
<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 13 business days.
You'll receive a notification in your email once a decision has been made.
</div>
<div class="title">{{ $t("ApplySeller.applicationSubmitted") }}</div>
<div
class="tip"
v-html="$t('ApplySeller.applicationSubmittedTip', { click: 'onPersonalCenter' })"
></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" />
@@ -16,7 +16,9 @@
</div>
</div>
</div>
<button class="home-btn" @click="onBackToHome">Back to Homepage</button>
<button class="home-btn" @click="onBackToHome">
{{ $t("ApplySeller.backToHomepage") }}
</button>
<div class="tip">ID: {{ userId }}</div>
</div>
</template>
@@ -26,6 +28,9 @@
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { ApplyStatus } from "@/store/seller/index.d"
import { useI18n } from "vue-i18n"
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const store = useStore()
@@ -33,29 +38,31 @@
const applyStatus = computed(() => store.state.seller.applyStatus)
const list = computed(() => [
{
title: "Step 1: Submit Application",
tip: "Fill out the seller information form and agree to our terms",
title: t("ApplySeller.auditStatus1_title"),
tip: t("ApplySeller.auditStatus1_tip"),
active: [ApplyStatus.Pending, ApplyStatus.Approved].includes(applyStatus.value)
},
{
title: "Step 2: Review & Verification",
tip: "Our team will review your application (typically 1-3 business days)",
title: t("ApplySeller.auditStatus2_title"),
tip: t("ApplySeller.auditStatus2_tip"),
active: applyStatus.value === ApplyStatus.Approved
},
{
title: "Step 3: Start Selling",
tip: "Once approved, access your seller dashboard and start listing products ",
title: t("ApplySeller.auditStatus3_title"),
tip: t("ApplySeller.auditStatus3_tip"),
active: applyStatus.value === ApplyStatus.Approved
}
])
const onBackToHome = () => {
router.push({ name: "home" })
}
window.onPersonalCenter = () => {
router.push("/home/account")
}
</script>
<style scoped lang="less">
.seller-review {
margin: 0 auto;
width: 60rem;
height: 90%;
overflow-y: auto;
display: flex;
@@ -75,15 +82,20 @@
color: #000;
}
> .tip {
font-family: pingfang_medium;
width: 66rem;
font-family: pingfang_regular;
font-size: 1.8rem;
line-height: 170%;
text-align: center;
color: #585858;
&:deep(span) {
color: #585858;
font-family: pingfang_heavy;
}
}
> .step-list {
width: 60rem;
margin: 2.6rem 0;
width: 100%;
padding: 1.6rem;
background-color: #f9f9f9;
display: flex;

View File

@@ -10,6 +10,7 @@
:closable="false"
wrapClassName="#app"
:keyboard="false"
:destroyOnClose="true"
>
<div class="image-clip-dialog-box">
<div class="header" :class="{ 'is-product': data.isProduct }">
@@ -123,8 +124,11 @@
const currentOrigin = ref("sketch")
const coverOrigin = ref([])
const handleChangeOrigin = (type) => {
const targetOrigin = coverOrigin.value.find((el) => el.type === type)
if (!targetOrigin) return
currentOrigin.value = type
data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
data.url = targetOrigin.url
}
const show = ref(false)
@@ -135,7 +139,7 @@
coverOrigin.value = []
data.url = null
currentOrigin.value = 'sketch'
currentOrigin.value = "sketch"
data.url = url
data.callback = callback
@@ -147,9 +151,11 @@
if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
data.isProduct = options.isProduct
}
if (origin?.length && !data.url) {
if (origin?.length) {
coverOrigin.value = origin
data.url = origin[0].url
const defaultOrigin = origin.find((el) => el.type === options?.coverFrom) || origin[0]
currentOrigin.value = defaultOrigin.type
data.url = defaultOrigin.url
}
show.value = true
}
@@ -159,7 +165,7 @@
const imageClipRef = ref(null)
const onSubmit = () => {
imageClipRef.value.getCropBlob().then((blob) => {
if (data.callback) data.callback(blobToFile(blob, "image.png"))
if (data.callback) data.callback(blobToFile(blob, "image.png"), currentOrigin.value)
onCancel()
})
}
@@ -253,6 +259,7 @@
.crop-wrapper {
width: 100%;
padding-top: 1.2rem;
.tips {
text-align: center;
color: #585858;

View File

@@ -9,9 +9,11 @@
:fixedNumber="ratio"
:fixed="isProduct ? type !== 'apparel' : true"
movable
:info="false"
@realTime="onChange"
outputType="png"
:full="true"
centerBox
></VueCropper>
</div>
<div class="clip_opterate">
@@ -205,24 +207,12 @@
:deep(.cropper-box) {
.cropper-box-canvas {
background-color: #ffffff;
// img {
// height: 100%;
// }
}
}
&.is-cover {
:deep(.vue-cropper) {
overflow: hidden;
}
// :deep(.cropper-box-canvas) {
// width: 31.1rem !important;
// left: 50% !important;
// transform: translateX(-50%) !important;
// img {
// display: none;
// }
// }
}
}
@@ -274,13 +264,15 @@
.image-clip-body {
width: 45.7rem;
height: 45.7rem;
:deep(.cropper-modal) {
background: transparent;
}
// :deep(.cropper-modal) {
// background: transparent;
// }
:deep(.vue-cropper .cropper-view-box) {
position: relative;
overflow: visible !important;
/* 原有的蓝色边框outline由组件控制这里不干涉 */
// overflow: visible !important;
img {
background: #fff;
}
}
:deep(.vue-cropper .cropper-view-box::after) {

View File

@@ -37,7 +37,7 @@
<p class="tip">&nbsp;</p>
</template>
</div>
<image-clip-dialog ref="imageClipDialogRef" />
<image-clip-dialog ref="imageClipDialogRef" centerBox />
</template>
<script setup>
@@ -123,7 +123,7 @@
...res
}
try {
data.socialLinks = JSON.stringify(data.socialLinks)
data.socialLinks = JSON.stringify(data.socialLinks.filter((v) => v))
} catch (error) {
data.socialLinks = JSON.stringify([])
}

View File

@@ -30,25 +30,67 @@ This directory owns the seller listing edit/create detail page.
Detail API images are mapped by `category`:
- `cover` -> `currentListing.cover`
- `cover_from` -> `currentListing.coverFrom`; `imageUrl` stores the source image URL, not the literal source key. Resolve it against `sketch` and `mainProductImage` when hydrating. Keep backward compatibility for old rows whose `imageUrl` is `sketch` or `mainProductImage`.
- `sketch` -> `currentListing.sketch`
- `mainProductImage` -> `currentListing.mainProductImage`
- `main_product` or `product` -> `currentListing.prodImageList`
- `mainProductImage` or `main_product` -> `currentListing.mainProductImage`
- `product` -> non-video entries in `currentListing.prodImageList`
- `firstFrame`, `gif`, and `video` -> one video entry in `currentListing.prodImageList` when the three rows share the same `sortOrder`
- `apparel` -> `currentListing.sketchList`
When saving, preserve the backend's expected image categories. Confirm backend naming before changing `main_product`, `product`, or `mainProductImage`.
When saving, preserve the backend's expected image categories. Confirm backend naming before changing `main_product`, `product`, `firstFrame`, `gif`, `video`, or `mainProductImage`.
中文补充:
- 详情接口返回的 `images` 要按 `category` 回填到页面状态,不要只按数组顺序猜类型。
- `cover_from` 不是封面图本身,而是记录封面裁剪来源。它的 `imageUrl` 传来源图片链接,回显时用这个 URL 和 `sketch``mainProductImage` 比较,恢复裁剪弹窗里的来源选择。
- `main_product` 表示页面右上方的主产品图 URL普通 `product` 只表示产品图列表里的非视频图片。
- 视频不要保存成 `product`。视频必须拆成 `firstFrame``gif``video` 三类,并在回显时按相同 `sortOrder` 合并成一个视频项。
## Product Image Rules
- The `main` badge represents the first selected product image, not the most recently selected one.
- `firstSelectedIndex` is stored on each `ListingItem` and passed to `ProductImageList.vue`.
- Hydrating detail data must only set `mainProductImage` from explicit `main_product` or `mainProductImage` rows. Never infer it from selected `product` rows.
- Selecting a product image should only set `mainProductImage` when no main image is currently tracked by that listing's `firstSelectedIndex`.
- Unselecting the current main product image clears `mainProductImage` and resets `firstSelectedIndex`.
- Videos can be selected and saved, but they cannot become `mainProductImage`, must not set `firstSelectedIndex`, and must not display the `main` badge.
中文补充:
- `main` 标识只给图片,不给视频。
- 数据回显时,只有接口明确返回 `main_product` / `mainProductImage` 才能设置主图。不要因为某个 `product` 是已选中状态,就自动把它当成 `mainProductImage` 或显示 `main`
- 第一次选择视频时可以弹 warning但视频本身仍然要保持选中只是不要把它写入 `mainProductImage`,也不要更新 `firstSelectedIndex`
- 如果先选中视频,再选中图片,图片仍然可以成为第一个主图。
- 如果取消的是当前主图图片,需要清空 `mainProductImage``firstSelectedIndex`;取消普通图片或视频不应影响主图。
## Save Image Ordering
- Every saved image row must include `sortOrder`.
- `sortOrder` is scoped per category; each category starts its own sequence.
- For `product` rows, save the image currently used as `mainProductImage` first, selected non-main images next, and unselected images last.
- Save video media as three rows with categories `firstFrame`, `gif`, and `video`. The three rows from the same video item must share the same `sortOrder`.
- When hydrating detail data, group `firstFrame`, `gif`, and `video` rows by matching `sortOrder` and restore the combined video item, including its selected state. Accept `isSelected`, old typo `isSeleted`, and `selected` from the API.
中文补充:
- `sortOrder` 是按 category 分开排的,不同 category 之间不要共用一个全局序号。
- `product` 的排序规则是:当前作为 `mainProductImage` 的图片第一,其他已选图片其次,未选图片最后。
- 同一个视频拆出的 `firstFrame``gif``video` 三条数据必须使用同一个 `sortOrder`。例如第一个视频三条都是 `sortOrder: 1`,第二个视频三条都是 `sortOrder: 2`
- 回显视频时,用相同 `sortOrder` 找回一组 `firstFrame/gif/video`。三条里任意一条带选中标记,都应恢复为这个视频已选中。
- 选中字段要兼容 `isSelected`、历史拼写 `isSeleted`、以及 `selected`
## Crop Flow
- `TopImageSection.vue` and `ApparelSketchList.vue` emit `crop`.
- `index.vue` handles `handleClickCrop`, opens `ImageClipDialog`, uploads with `uploadFile`, then writes the returned URL into the correct field/list item.
- Keep cover crop ratio at `[4, 5]`; other crop types use `[9, 16]`.
- Cover crop can be based on `sketch` or `mainProductImage`. Store the chosen source in `coverFrom`, save it via `cover_from.imageUrl` as the source image URL, and pass it back into `ImageClipDialog` so reopening cover crop restores the selected source.
中文补充:
- cover 裁剪弹窗会在 `sketch``mainProductImage` 之间切来源。用户保存 cover 时,父组件需要同时保存裁剪后的 cover URL 和本次使用的来源。
- 下次重新打开 cover 裁剪时,应该按 `coverFrom` 恢复来源选择,并用对应的原图作为裁剪图,不要直接拿已裁好的 cover 图再次裁。
- 如果只有一个来源图可用,就按可用来源打开;如果两个来源都可用,要显示来源切换。
## Form Flow

View File

@@ -1,20 +1,14 @@
import { Https } from "@/tool/https"
import type { ListingImageCategory, SketchDetailResponse } from "./types"
// 编辑时根据ID获取信息
export const fetchListingDetailById = (id) => {
return Https.axiosGet("/seller/listing/detail", { params: { id } })
}
interface SketchIDs {
designItemIds: Array
}
interface DetailReturns {
clothes: string[]
designItemId: number
toProductImageUrls: string[]
}
type SketchIDs = Array<number | string>
// 获取designItemId对应的产品图
export const fetchSketchDetail = (data: SketchIDs): Array<DetailReturns> => {
export const fetchSketchDetail = (data: SketchIDs): Promise<SketchDetailResponse[]> => {
let params = "?"
data.forEach((id, index) => {
if (index === data.length - 1) {
@@ -27,23 +21,26 @@ export const fetchSketchDetail = (data: SketchIDs): Array<DetailReturns> => {
}
interface ImageObj {
id: number // 图片id,有值会更新,没有会自动新增
category: "cover" | "main_product" | "product" | "sketch" | "apparel" // 图片类型
id?: number // 图片id,有值会更新,没有会自动新增
category: ListingImageCategory // 图片类型
imageUrl?: string | null
isSelected?: number
sortOrder?: number
}
interface DetailData {
id: number | string // 商品Id
title: string // 商品名
description: string // 商品描述
price: number // 价格
price: number | string // 价格
stock?: number // 库存
viewCount?: number // 浏览量
status: 0 | 1 | 2 // 0草稿 1发布 2删除
images: ImageObj[]
designFor: "male" | "female"
productCategory: "outwear" | "trousers" | "blouse" | "dress" | "skirt" | "accessories"
productCategory: string[] | null
}
// 保存/更新表单
export const fetchUpdateListing = (data: DetailData) => {
export const fetchUpdateListing = (data: DetailData[]) => {
return Https.axiosPost("/seller/listing/batch", data)
}

View File

@@ -12,8 +12,10 @@
v-for="(item, index) in imageList"
:key="index"
class="product-image-item flex flex-center"
:class="{ selected: item.selected }"
:class="{ selected: item.selected, video: item.isVideo }"
@click="emit('select', index)"
@mouseenter="handleMouseEnter(index, item)"
@mouseleave="handleMouseLeave(index, item)"
>
<img
v-if="item.selected"
@@ -21,8 +23,11 @@
class="checked"
alt=""
/>
<img class="img-src" :src="item.url" alt="" />
<div v-if="item.selected && index === firstSelectedIndex" class="main-pic">
<img class="img-src" :src="getDisplayUrl(item, index)" alt="" />
<div v-if="item.isVideo && durationMap[index]" class="video-duration">
{{ durationMap[index] }}
</div>
<div v-if="item.selected && index === firstSelectedIndex && !item.isVideo" class="main-pic">
main
</div>
</div>
@@ -30,8 +35,8 @@
</div>
</template>
<script setup lang="ts">
import { computed } from "vue"
import type { ListingItem } from "../types"
import { computed, ref, watch } from "vue"
import type { ListingItem, ProductMediaItem } from "../types"
const props = defineProps<{
imageList: ListingItem["prodImageList"]
@@ -43,6 +48,70 @@
}>()
const selectedCount = computed(() => props.imageList.filter((item) => item.selected).length)
const hoveredVideoIndex = ref<number | null>(null)
const durationMap = ref<Record<number, string>>({})
const videoSourceKey = computed(() =>
props.imageList
.map((item) => `${item.videoUrl || ""}::${item.url || ""}`)
.join("|")
)
const getDisplayUrl = (item: ProductMediaItem, index: number) => {
if (item.isVideo && hoveredVideoIndex.value === index && item.gifUrl) {
return item.gifUrl
}
return item.url
}
const handleMouseEnter = (index: number, item: ProductMediaItem) => {
if (!item.isVideo || !item.gifUrl) return
hoveredVideoIndex.value = index
}
const handleMouseLeave = (index: number, item: ProductMediaItem) => {
if (!item.isVideo) return
if (hoveredVideoIndex.value === index) hoveredVideoIndex.value = null
}
const formatVideoDuration = (duration: number) => {
if (!Number.isFinite(duration) || duration <= 0) return ""
const totalSeconds = Math.round(duration)
const minutes = Math.floor(totalSeconds / 60)
const seconds = totalSeconds % 60
return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
}
const loadVideoDurations = () => {
durationMap.value = {}
props.imageList.forEach((item, index) => {
if (!item.isVideo || !item.videoUrl) return
const video = document.createElement("video")
video.preload = "metadata"
video.src = item.videoUrl
video.onloadedmetadata = () => {
durationMap.value = {
...durationMap.value,
[index]: formatVideoDuration(video.duration)
}
}
video.onerror = () => {
video.src = ""
}
})
}
watch(
videoSourceKey,
() => {
hoveredVideoIndex.value = null
loadVideoDurations()
},
{ immediate: true }
)
</script>
<style lang="less" scoped>
@@ -135,6 +204,20 @@
object-fit: contain;
}
.video-duration {
position: absolute;
right: 0.8rem;
bottom: 0.8rem;
z-index: 1;
padding: 0 0.8rem;
height: 2.4rem;
line-height: 2.4rem;
border-radius: 1.2rem;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 1.2rem;
}
.main-pic {
position: absolute;
height: 2.4rem;

View File

@@ -16,6 +16,13 @@
>
<SvgIcon name="CCrop" color="#fff" size="12" />
</div>
<div
v-if="images[type] && type !== 'sketch'"
class="delete-tool flex flex-center"
@click="emit('remove-image', type)"
>
<SvgIcon name="CTrash" color="#ffffff" size="14" />
</div>
<img
v-if="images[type]"
:src="images[type] || ''"
@@ -35,7 +42,7 @@
</div>
</div>
<template v-else>
<div class="trigger-img placeholder"></div>
<SvgIcon name="picture" size="24" />
<div class="trigger-tips">
{{ $t("SellerListEdit.productImageDesc") }}
</div>
@@ -54,6 +61,7 @@
const emit = defineEmits<{
(e: "crop", data: string | null, type: TopImageType): void
(e: "remove-image", type: TopImageType): void
}>()
const topImageList: TopImageType[] = ["sketch", "mainProductImage", "cover"]
@@ -117,6 +125,18 @@
cursor: pointer;
}
.delete-tool {
position: absolute;
top: 3.4rem;
right: 0.8rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #9a9a9a;
// z-index: 1;
cursor: pointer;
}
.sketch-img {
height: 100%;
object-fit: contain;
@@ -136,13 +156,6 @@
row-gap: 1.2rem;
}
.placeholder {
width: 2.4rem;
height: 2.4rem;
border-radius: 0.6rem;
background: linear-gradient(135deg, #efefef 0%, #cdcdcd 100%);
}
.trigger-tips {
font-size: 1.2rem;
text-align: center;
@@ -150,6 +163,11 @@
line-height: 1.3;
}
}
&.mainProductImage {
.trigger-tips {
margin: 0 -2rem;
}
}
}
}
}

View File

@@ -17,9 +17,9 @@
</div>
</template>
</seller-header>
<div class="edit-detail-content flex">
<div class="edit-detail-content flex" ref="editDetailContentRef">
<div class="left">
<TopImageSection :images="previewImageMap" @crop="handleClickCrop" />
<TopImageSection :images="previewImageMap" @crop="handleClickCrop" @remove-image="handleRemoveImage" />
<ProductImageList
:image-list="prodImgList"
:first-selected-index="currentListing.firstSelectedIndex"
@@ -31,6 +31,7 @@
/>
</div>
<div class="right">
<div class="right-content" ref="rightContentRef">
<ListingForm
:product-name="currentListing.productName"
:price="currentListing.price"
@@ -40,11 +41,12 @@
:gender-options="genderOptions"
:category-options="categoryOptions"
@update:product-name="currentListing.productName = $event"
@update:price="currentListing.price = $event"
@update:price="handleUpdatePrice"
@update:desc="currentListing.desc = $event"
@update:gender="handleUpdateGender"
@update:category="currentListing.category = $event"
/>
</div>
<div class="page-control flex align-center" v-if="selectList.length > 1">
<a-pagination
v-model:current="currentPage"
@@ -81,6 +83,8 @@
import ProductImageList from "./components/ProductImageList.vue"
import TopImageSection from "./components/TopImageSection.vue"
import { useStore } from "vuex"
import { debounce } from "lodash-es"
import {
fetchSketchDetail,
uploadFile,
@@ -88,10 +92,17 @@
fetchUpdateListing
} from "./api"
import type {
CoverSourceType,
CropType,
TopImageType,
ListingDetailImage,
ListingDetailResponse,
ListingImageCategory,
ListingItem,
ProductMediaItem,
RadioOption,
SketchDetailResponse,
SketchDetailVideo,
StatusType
} from "./types"
@@ -99,6 +110,8 @@
const { t } = useI18n()
const imageClipDialogRef = ref<InstanceType<typeof ImageClipDialog> | null>(null)
const editDetailContentRef = ref<HTMLElement | null>(null)
const rightContentRef = ref<HTMLElement | null>(null)
defineOptions({
name: "EditDetail"
@@ -121,18 +134,14 @@
desc: "",
gender: "FEMALE",
category: null,
coverFrom: "sketch",
firstSelectedIndex: null,
prodImageList: [],
sketchList: []
})
const genderOptions = computed(() => {
return (
STORE.state.UserHabit?.sex.value.map((el) => ({
...el,
// name: el.key.toLowerCase()
})) || []
)
return STORE.state.UserHabit?.sex.value
})
const fallbackCategoryOptions: Record<string, RadioOption[]> = {
@@ -162,6 +171,16 @@
currentListing.value.category = null
}
const handleUpdatePrice = (value: string) => {
const num = Number(value)
if (value && !Number.isNaN(num) && num < 4) {
currentListing.value.price = "4"
message.warning(t("SellerListEdit.priceMinMessage"))
} else {
currentListing.value.price = value
}
}
const previewImageMap = computed(() => ({
sketch: currentListing.value.sketch,
mainProductImage: currentListing.value.mainProductImage,
@@ -172,14 +191,50 @@
return [...images].sort((prev, next) => (prev.sortOrder ?? 0) - (next.sortOrder ?? 0))
}
const getImageSelected = (value: ListingDetailImage["isSelected"]) =>
value === true || value === 1 || value === "1"
const getImageSelected = (value: ListingDetailImage["isSelected"]) => {
if (value === true || value === 1 || value === "1") return true
if (typeof value === "string") return value.toLowerCase() === "true"
return false
}
const getDetailImageSelected = (image: ListingDetailImage) =>
getImageSelected(image.isSelected) ||
getImageSelected(image.isSeleted) ||
getImageSelected(image.selected)
const normalizeCoverSource = (value: unknown): CoverSourceType =>
value === "mainProductImage" ? "mainProductImage" : "sketch"
const isCoverSource = (value: unknown): value is CoverSourceType =>
value === "sketch" || value === "mainProductImage"
const resolveCoverSourceFromImageUrl = (
imageUrl: string,
listing: ListingItem
): CoverSourceType => {
if (imageUrl === listing.mainProductImage) return "mainProductImage"
if (imageUrl === listing.sketch) return "sketch"
return normalizeCoverSource(imageUrl)
}
const videoImageCategories = ["firstFrame", "gif", "video"] as const
type VideoImageCategory = (typeof videoImageCategories)[number]
const isVideoImageCategory = (
category: ListingDetailImage["category"]
): category is VideoImageCategory =>
videoImageCategories.includes(category as VideoImageCategory)
const normalizeDetailGender = (value: ListingDetailResponse["designFor"]) => {
const gender = String(value || "").toUpperCase()
return gender === "MALE" || gender === "FEMALE" ? gender : "FEMALE"
}
const getListingDesignFor = (gender: ListingItem["gender"]): "male" | "female" =>
gender === "MALE" ? "male" : "female"
const normalizeDetailCategory = (
value: ListingDetailResponse["productCategory"]
): ListingItem["category"] => {
@@ -193,6 +248,17 @@
const createListingItemFromDetail = (detail: ListingDetailResponse): ListingItem => {
const listing = createListingItem()
let coverFromImageUrl = ""
const videoGroupMap = new Map<
number,
{
sortOrder: number
firstFrameUrl?: string
gifUrl?: string
videoUrl?: string
selected: boolean
}
>()
listing.productName = detail.title || ""
listing.price =
@@ -202,6 +268,11 @@
listing.category = normalizeDetailCategory(detail.productCategory)
getSortedDetailImages(detail.images || []).forEach((image) => {
if (image.category === "cover_from") {
coverFromImageUrl = image.imageUrl || ""
return
}
const imageUrl = image.imageUrl || ""
if (!imageUrl) return
@@ -215,7 +286,7 @@
return
}
if (image.category === "mainProductImage") {
if (image.category === "mainProductImage" || image.category === "main_product") {
listing.mainProductImage = imageUrl
return
}
@@ -223,23 +294,50 @@
if (image.category === "product") {
listing.prodImageList.push({
url: imageUrl,
selected: getImageSelected(image.isSelected)
selected: getDetailImageSelected(image)
})
return
}
if (isVideoImageCategory(image.category)) {
if (image.sortOrder === null || typeof image.sortOrder === "undefined") return
const sortOrder = Number(image.sortOrder)
if (!Number.isFinite(sortOrder)) return
const group = videoGroupMap.get(sortOrder) || {
sortOrder,
selected: false
}
if (image.category === "firstFrame") group.firstFrameUrl = imageUrl
if (image.category === "gif") group.gifUrl = imageUrl
if (image.category === "video") group.videoUrl = imageUrl
group.selected = group.selected || getDetailImageSelected(image)
videoGroupMap.set(sortOrder, group)
return
}
if (image.category === "apparel") {
listing.sketchList.push({ url: imageUrl })
}
})
if (!listing.mainProductImage) {
listing.mainProductImage =
listing.prodImageList.find((item) => item.selected)?.url || ""
Array.from(videoGroupMap.values())
.sort((prev, next) => prev.sortOrder - next.sortOrder)
.forEach((video) => {
const videoItem = createProductVideoItem(video, video.selected)
if (videoItem) listing.prodImageList.push(videoItem)
})
if (coverFromImageUrl) {
listing.coverFrom = resolveCoverSourceFromImageUrl(coverFromImageUrl, listing)
}
const selectedIndex = listing.prodImageList.findIndex((item) => item.selected)
listing.firstSelectedIndex = selectedIndex === -1 ? null : selectedIndex
const mainProductIndex = listing.prodImageList.findIndex(
(item) => !item.isVideo && item.url === listing.mainProductImage
)
listing.firstSelectedIndex = mainProductIndex === -1 ? null : mainProductIndex
listing.productImage = listing.prodImageList.map((item) => item.url)
listing.apparelSketch = listing.sketchList
@@ -249,6 +347,26 @@
return listing
}
const createProductVideoItem = (
video: SketchDetailVideo,
selected = false
): ProductMediaItem | null => {
const firstFrameUrl = video?.firstFrameUrl || ""
const gifUrl = video?.gifUrl || ""
const videoUrl = video?.videoUrl || ""
if (!firstFrameUrl || !videoUrl) return null
return {
url: firstFrameUrl,
firstFrameUrl,
gifUrl,
videoUrl,
isVideo: true,
selected
}
}
const handleSelectProdImg = (index: number) => {
const listing = currentListing.value
const target = prodImgList.value[index]
@@ -257,6 +375,10 @@
target.selected = willSelect
if (willSelect && listing.firstSelectedIndex === null) {
if (target.isVideo) {
message.warning(t("Seller.VideoWarning"))
return
}
listing.mainProductImage = target.url
listing.firstSelectedIndex = index
return
@@ -268,25 +390,48 @@
}
}
const cropType = ref("")
const handleClickCrop = (data: any, type: string, paramThree: any = []) => {
const getCoverOriginList = (item: ListingItem) => {
const origin: Array<{ type: CoverSourceType; url: string }> = []
if (item.sketch) {
origin.push({ type: "sketch", url: item.sketch })
}
if (item.mainProductImage) {
origin.push({ type: "mainProductImage", url: item.mainProductImage })
}
return origin
}
const handleRemoveImage = (type: TopImageType) => {
const listing = currentListing.value
if (type === "mainProductImage") {
listing.prodImageList.forEach((item) => {
if (item.url === listing.mainProductImage && !item.isVideo) {
item.selected = false
}
})
listing.mainProductImage = ""
listing.firstSelectedIndex = null
} else if (type === "cover") {
listing.cover = ""
}
}
const cropType = ref<CropType | "">("")
const handleClickCrop = (
data: string | null,
type: CropType,
paramThree: number | unknown[] = []
) => {
// 处理来自TopImageSection的调用: (data, type, list)
// 处理来自ApparelSketchList的调用: (data, type, index)
const index = typeof paramThree === "number" ? paramThree : undefined
const list = Array.isArray(paramThree) ? paramThree : []
// console.log(data, type)
// console.log(selectList.value[currentIndex.value])
let origin = []
const currentItem = selectList.value[currentIndex.value]
if (currentItem.sketch) {
origin.push({ type: "sketch", url: currentItem.sketch })
}
if (currentItem.mainProductImage) {
origin.push({ type: "mainProductImage", url: currentItem.mainProductImage })
}
if (type !== "cover") origin = []
const titleList = {
const origin = type === "cover" ? getCoverOriginList(currentItem) : []
const titleList: Record<CropType, string> = {
sketch: "Crop Sketch",
mainProductImage: "Crop Main Product Image",
cover: "Crop Cover",
@@ -296,17 +441,28 @@
cropType.value = type
imageClipDialogRef.value.open(
data,
(file) => {
(file: File, coverFrom?: CoverSourceType) => {
// console.log(file)
uploadFile(file).then((res) => {
if (type === "apparel" && typeof index !== "undefined") {
selectList.value[currentIndex.value].sketchList[index].url = res
} else if (type === "cover") {
selectList.value[currentIndex.value].cover = res
if (isCoverSource(coverFrom)) {
selectList.value[currentIndex.value].coverFrom = coverFrom
}
} else {
selectList.value[currentIndex.value][type] = res
}
})
},
{ ratio, isPreview: true, title: titleList[type], isProduct: true },
{
ratio,
isPreview: true,
title: titleList[type],
isProduct: true,
coverFrom: currentItem.coverFrom
},
origin
)
}
@@ -315,10 +471,9 @@
value !== null && value !== undefined && String(value).trim() !== ""
const getMissingRequiredField = (item: ListingItem) => {
const cover = item.cover || item.mainProductImage || item.sketch
const requiredFields = [
{ value: item.sketch, label: t("SellerListEdit.sketch") },
{ value: cover, label: t("SellerListEdit.cover") },
{ value: item.cover, label: t("SellerListEdit.cover") },
{ value: item.productName, label: t("SellerListEdit.productName") },
{ value: item.price, label: t("SellerListEdit.price") },
{ value: item.desc, label: t("SellerListEdit.productDescription") },
@@ -358,93 +513,160 @@
return true
}
type SaveListingImage = {
category: ListingImageCategory
imageUrl: string | null
isSelected: number
sortOrder: number
}
const isMainProductMedia = (item: ListingItem, media: ProductMediaItem, index: number) =>
!media.isVideo &&
(item.firstSelectedIndex === index ||
(Boolean(item.mainProductImage) && item.mainProductImage === media.url))
const getSortedProductMedia = (item: ListingItem) => {
return item.prodImageList
.map((media, index) => ({ media, index }))
.filter(({ media }) => !media.isVideo)
.sort((prev, next) => {
const prevRank = isMainProductMedia(item, prev.media, prev.index)
? 0
: prev.media.selected
? 1
: 2
const nextRank = isMainProductMedia(item, next.media, next.index)
? 0
: next.media.selected
? 1
: 2
return prevRank - nextRank || prev.index - next.index
})
}
const buildListingImages = (item: ListingItem) => {
const images: SaveListingImage[] = []
const sortOrderMap: Partial<Record<ListingImageCategory, number>> = {}
const getNextSortOrder = (category: ListingImageCategory) => {
const sortOrder = (sortOrderMap[category] || 0) + 1
sortOrderMap[category] = sortOrder
return sortOrder
}
const pushImage = (
category: ListingImageCategory,
imageUrl: string | null,
isSelected = 1,
sortOrder = getNextSortOrder(category)
) => {
images.push({
category,
imageUrl,
isSelected,
sortOrder
})
}
const getCoverFromImageUrl = () => {
if (item.coverFrom === "mainProductImage") return item.mainProductImage || null
return item.sketch
}
pushImage("sketch", item.sketch)
pushImage("cover", item.cover)
pushImage("cover_from", getCoverFromImageUrl())
if (item.mainProductImage) {
pushImage("main_product", item.mainProductImage)
}
getSortedProductMedia(item).forEach(({ media }) => {
pushImage("product", media.url, Number(!!media.selected))
})
item.sketchList.forEach((sketch) => {
pushImage("apparel", sketch.url)
})
let videoSortOrder = 0
item.prodImageList
.filter((media) => media.isVideo)
.forEach((media) => {
videoSortOrder += 1
const isSelected = Number(!!media.selected)
pushImage(
"firstFrame",
media.firstFrameUrl || media.url,
isSelected,
videoSortOrder
)
pushImage("gif", media.gifUrl || "", isSelected, videoSortOrder)
pushImage("video", media.videoUrl || "", isSelected, videoSortOrder)
})
return images
}
const handleSaveForm = async (type: StatusType) => {
const paramsList = []
selectList.value.forEach((item: ListingItem) => {
const params = {
const paramsList = selectList.value.map((item: ListingItem) => {
return {
id: itemId.value,
title: item.productName,
description: item.desc,
price: item.price,
status: type === "draft" ? 0 : 1,
images: [],
designFor: (item.gender || "FEMALE").toLowerCase(),
images: buildListingImages(item),
designFor: getListingDesignFor(item.gender),
productCategory: item.category
}
;["sketch", "cover"].forEach((el) => {
params.images.push({
category: el,
imageUrl: item[el],
isSelected: 1
})
})
if (item.mainProductImage) {
params.images.push({
category: "main_product",
imageUrl: item.mainProductImage,
isSeleted: 1
})
}
item.prodImageList.forEach((item) => {
params.images.push({
category: "product",
imageUrl: item.url,
isSelected: Number(!!item.selected)
})
})
item.sketchList.forEach((item) => {
params.images.push({
category: "apparel",
imageUrl: item.url,
isSelected: 1
})
})
paramsList.push(params)
})
await fetchUpdateListing(paramsList)
}
const handleClickMenu = async (status: StatusType) => {
if (status === "draft" && !selectList.value[currentIndex.value].cover) {
message.error("请先完成封面制作")
return
}
const handleClickMenu = debounce(async (status: StatusType) => {
// async (status: StatusType) => {
if (!validatePublishRequired()) return
await handleSaveForm(status)
// 从 sessionStorage 获取参数
const paramsStr = sessionStorage.getItem("listingEditParams")
const params = paramsStr ? JSON.parse(paramsStr) : {}
if (status === "draft") {
// save draft logic
// console.log("Saving draft...", currentListing.value)
ROUTER.push({
name: "Status",
params: { status: "draft" },
state: {
type: history.state?.type,
collectionId: history.state?.collectionId
type: params.type,
collectionId: params.collectionId
}
})
} else if (status === "publish") {
// publish logic
// console.log("Publishing...", currentListing.value)
ROUTER.push({
name: "Status",
params: { status: "publish" },
state: {
type: history.state?.type,
collectionId: history.state?.collectionId
type: params.type,
collectionId: params.collectionId
}
})
}
}
// }
}, 1000)
const handleFetchItemDetial = (list) => {
fetchSketchDetail(list).then((res) => {
fetchSketchDetail(list).then((res: SketchDetailResponse[]) => {
res.forEach((item, index) => {
if (!selectList.value[index]) return
selectList.value[index].sketchList = item.clothes.map((el) => ({ url: el }))
selectList.value[index].prodImageList = item.toProductImageUrls.map((el) => ({
url: el
selectList.value[index].sketchList = (item.clothes || []).map((el) => ({ url: el }))
const imageItems = (item.toProductImageUrls || []).map((el) => ({
url: el,
selected: false
}))
const videoItems = (item.videos || [])
.map((video) => createProductVideoItem(video))
.filter((video): video is ProductMediaItem => Boolean(video))
selectList.value[index].prodImageList = [...imageItems, ...videoItems]
})
})
}
@@ -458,13 +680,28 @@
})
}
const resetScrollPositions = () => {
if (editDetailContentRef.value) {
editDetailContentRef.value.scrollTop = 0
}
if (rightContentRef.value) {
rightContentRef.value.scrollTop = 0
}
}
onMounted(() => {
const data = history.state
// 重置滚动条位置
resetScrollPositions()
// 从 sessionStorage 获取参数
const paramsStr = sessionStorage.getItem("listingEditParams")
const data = paramsStr ? JSON.parse(paramsStr) : {}
if (data?.type === "edit") {
itemId.value = history.state?.id
itemId.value = data?.id
handleGetDetailById()
} else {
const designItemIds = history.state?.designItemIds || []
const designItemIds = data?.designItemIds || []
if (!designItemIds.length) return
@@ -483,6 +720,11 @@
.c-svg {
width: initial;
height: initial;
svg {
color: inherit;
fill: currentColor;
}
}
.edit-detail-wrapper {
@@ -512,6 +754,11 @@
&:hover {
background: #000;
color: #fff;
.c-svg svg {
color: #fff;
fill: #fff;
}
}
// &.publish:hover {
@@ -538,7 +785,7 @@
flex: 1;
min-height: 0;
overflow-y: auto;
justify-content: space-between;
justify-content: space-around;
&::-webkit-scrollbar {
width: 0;
@@ -548,10 +795,26 @@
.right {
width: 55.2rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
min-height: 0;
.right-content {
flex: 1;
min-height: 0;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
.page-control {
justify-content: flex-end;
margin-top: 4rem;
margin-top: 2rem;
padding: 2rem 0;
flex-shrink: 0;
}
}
}

View File

@@ -7,6 +7,27 @@ export type RadioOption = {
export type TopImageType = "sketch" | "mainProductImage" | "cover"
export type CropType = TopImageType | "apparel"
export type CoverSourceType = "sketch" | "mainProductImage"
export type ListingImageCategory =
| "cover"
| "cover_from"
| "main_product"
| "mainProductImage"
| "product"
| "sketch"
| "apparel"
| "firstFrame"
| "gif"
| "video"
export type ProductMediaItem = {
url: string
selected?: boolean
isVideo?: boolean
videoUrl?: string
gifUrl?: string
firstFrameUrl?: string
}
export type ListingItem = {
designItemId: number | string | null
@@ -20,18 +41,18 @@ export type ListingItem = {
desc: string
gender: string
category: string[] | null
coverFrom: CoverSourceType
firstSelectedIndex: number | null
prodImageList: Array<{
url: string
selected?: boolean
}>
prodImageList: ProductMediaItem[]
sketchList: Array<{ url: string | null }>
}
export type ListingDetailImage = {
category?: string | null
category?: ListingImageCategory | string | null
imageUrl?: string | null
isSelected?: boolean | number | string | null
isSeleted?: boolean | number | string | null
selected?: boolean | number | string | null
sortOrder?: number | null
}
@@ -45,4 +66,17 @@ export type ListingDetailResponse = {
images?: ListingDetailImage[] | null
}
export type SketchDetailVideo = {
firstFrameUrl?: string | null
gifUrl?: string | null
videoUrl?: string | null
}
export type SketchDetailResponse = {
clothes?: string[] | null
designItemId?: number | string | null
toProductImageUrls?: string[] | null
videos?: SketchDetailVideo[] | null
}
export type StatusType = "draft" | "publish"

View File

@@ -55,26 +55,28 @@ defineExpose({getCreateList})
</script>
<template>
<div class="historyList">
<div class="list">
<div v-for="(item,index) in list" :key="index" class="item" @click="selectCollectionItem(item)">
<div class="imgList">
<div v-if="item.userLikeGroupVO?.groupDetails?.length > 0" v-for="(img,index) in item.userLikeGroupVO?.groupDetails.slice(0, 4)" :key="index" class="img">
<img :src="img.url" alt="">
<div class="listBox">
<div class="list">
<div v-for="(item,index) in list" :key="index" class="item" @click="selectCollectionItem(item)">
<div class="imgList">
<div v-if="item.userLikeGroupVO?.groupDetails?.length > 0" v-for="(img,index) in item.userLikeGroupVO?.groupDetails.slice(0, 4)" :key="index" class="img">
<img :src="img.url" alt="">
</div>
<div v-else class="img null">
<img src="@/assets/images/seller/selectCollectionNullStatus.png" alt="">
</div>
</div>
<div v-else class="img null">
<img src="@/assets/images/seller/selectCollectionNullStatus.png" alt="">
<div class="detail">
<div class="name">{{item.name}}</div>
<div class="bottom">
<div>{{item.userLikeGroupVO?.groupDetails?.length || 0}} {{ $t('Seller.sketchs') }}</div>
<div>{{setPubDate(item.updateTime,t)}}</div>
</div>
</div>
</div>
<div class="detail">
<div class="name">{{item.name}}</div>
<div class="bottom">
<div>{{item.userLikeGroupVO?.groupDetails?.length || 0}} {{ $t('Seller.sketchs') }}</div>
<div>{{setPubDate(item.updateTime,t)}}</div>
<div class="type" :class="item.type">
{{item.process == "SERIES_DESIGN"?"Series":"Single"}}
</div>
</div>
<div class="type" :class="item.type">
{{item.process == "SERIES_DESIGN"?"Series":"Single"}}
</div>
</div>
</div>
<div class="pagination">
@@ -94,105 +96,110 @@ defineExpose({getCreateList})
justify-content: space-between;
align-items: center;
margin-top: 3rem;
> .list{
> .listBox{
height: 100%;
overflow: hidden;
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 2.4rem; /* 垂直间距 3px */
column-gap: 3.2rem; /* 横向间距 2px */
align-content: start;
overflow-y: auto;
&::-webkit-scrollbar{
display: none;
}
> .item{
width: 42.6rem;
height: auto;
// height: 27.6rem;
border: 1.5px solid #C7C7C7;
position: relative;
overflow: hidden;
border-radius: 2rem;
cursor: pointer;
transition: all .3s;
> .imgList{
background-color: #eaeaea;
height: 19.2rem;
padding: 1rem 1.3rem;
display: flex;
gap: .4rem;
justify-content: center;
> .img{
width: 9.7rem;
height: 17.2rem;
border-radius: 1rem;
overflow: hidden;
background-color: #fff;
&.null{
background-color: transparent;
}
> img{
object-fit: contain;
height: 100%;
width: 100%;
}
}
> .list{
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 2.4rem; /* 垂直间距 3px */
column-gap: 3.2rem; /* 横向间距 2px */
align-content: start;
&::-webkit-scrollbar{
display: none;
}
> .detail{
padding: 2rem 2.4rem;
> .name{
font-family: pingfang_heavy;
font-weight: 400;
font-size: 1.797rem;
line-height: 1;
}
> .bottom{
display: flex;
margin-top: .8rem;
justify-content: space-between;
> div{
font-size: 1.2rem;
font-family: pingfang_regular;
font-weight: 400;
font-size: 1.6rem;
line-height: 1;
color: #585858;
}
> div:nth-child(2){
color: #979797;
}
}
}
> .type{
width: 7.6rem;
height: 3rem;
> .item{
width: 42.6rem;
height: auto;
// height: 27.6rem;
border: 1.5px solid #C7C7C7;
position: relative;
overflow: hidden;
border-radius: 2rem;
border: 1px solid #727070;
background: #7E7C7C;
font-weight: 500;
font-size: 1.4rem;
line-height: 150%;
color: #fff;
position: absolute;
top: .5rem;
right: .5rem;
display: flex;
justify-content: center;
align-items: center;
&.Series{
cursor: pointer;
transition: all .3s;
> .imgList{
background-color: #eaeaea;
height: 19.2rem;
padding: 1rem 1.3rem;
display: flex;
gap: .4rem;
justify-content: center;
> .img{
width: 9.7rem;
height: 17.2rem;
border-radius: 1rem;
overflow: hidden;
background-color: #fff;
&.null{
background-color: transparent;
}
> img{
object-fit: contain;
height: 100%;
width: 100%;
}
}
}
> .detail{
padding: 2rem 2.4rem;
> .name{
font-family: pingfang_heavy;
font-weight: 400;
font-size: 1.797rem;
line-height: 1;
}
> .bottom{
display: flex;
margin-top: .8rem;
justify-content: space-between;
> div{
font-size: 1.2rem;
font-family: pingfang_regular;
font-weight: 400;
font-size: 1.6rem;
line-height: 1;
color: #585858;
}
> div:nth-child(2){
color: #979797;
}
}
}
> .type{
width: 7.6rem;
height: 3rem;
border-radius: 2rem;
border: 1px solid #727070;
background: #7E7C7C;
font-weight: 500;
font-size: 1.4rem;
line-height: 150%;
color: #fff;
position: absolute;
top: .5rem;
right: .5rem;
display: flex;
justify-content: center;
align-items: center;
&.Series{
}
&.Single{
background-color: #ffffff;
color: #727070;
}
}
&.Single{
background-color: #ffffff;
color: #727070;
&:hover{
border: 1.5px solid #000;
}
}
&:hover{
border: 1.5px solid #000;
}
}
}
> .pagination{
margin-top: 3rem;
}

View File

@@ -11,7 +11,7 @@ import { useRouter } from "vue-router"
//])
const router = useRouter()
let getCollectionListData = reactive({
process: [],
process: ['SERIES_DESIGN','SINGLE_DESIGN'],
projectName: '',
})
@@ -21,11 +21,7 @@ const handleSearch = () => {
historyListRef.value.getCreateList()
}
const setProcess = (type:any) => {
if(type){
getCollectionListData.process = [type]
}else{
getCollectionListData.process = []
}
getCollectionListData.process = type
historyListRef.value.getCreateList()
}
const selectCollectionItem = (item:any) => {
@@ -44,9 +40,9 @@ defineExpose({})
<div class="content">
<div class="title">
<div class="left">
<div :class="{active:!getCollectionListData.process?.[0]}" @click="setProcess('')">{{$t('Seller.All')}}</div>
<div :class="{active:getCollectionListData.process[0] == 'SERIES_DESIGN'}" @click="setProcess('SERIES_DESIGN')">{{$t('Seller.SeriesDesign')}}</div>
<div :class="{active:getCollectionListData.process[0] == 'SINGLE_DESIGN'}" @click="setProcess('SINGLE_DESIGN')">{{$t('Seller.SingleDesign')}}</div>
<div :class="{active:getCollectionListData.process?.includes('SERIES_DESIGN') && getCollectionListData.process?.includes('SINGLE_DESIGN')}" @click="setProcess(['SERIES_DESIGN','SINGLE_DESIGN'])">{{$t('Seller.All')}}</div>
<div :class="{active:getCollectionListData.process[0] == 'SERIES_DESIGN' && getCollectionListData.process.length == 1}" @click="setProcess(['SERIES_DESIGN'])">{{$t('Seller.SeriesDesign')}}</div>
<div :class="{active:getCollectionListData.process[0] == 'SINGLE_DESIGN' && getCollectionListData.process.length == 1}" @click="setProcess(['SINGLE_DESIGN'])">{{$t('Seller.SingleDesign')}}</div>
</div>
<div class="right">
<div class="search_input flex flex-align-center">

View File

@@ -7,6 +7,7 @@ import { Https } from '@/tool/https'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue';
// 定义组件名称
defineOptions({
@@ -45,6 +46,10 @@ const chooseItem = (item:any)=>{
if(chooseList.value.findIndex((i:any)=>i.designItemId == item.designItemId) != -1){
chooseList.value.splice(chooseList.value.findIndex((i:any)=>i.designItemId == item.designItemId),1)
}else{
if(chooseList.value.length >= 9){
message.info(t('Seller.selectSketchMaxNum'))
return
}
chooseList.value.push(item)
}
}
@@ -52,13 +57,16 @@ const chooseItem = (item:any)=>{
const next = ()=>{
if(chooseList.value.length == 0)return
let designItemIds = chooseList.value.map((item:any)=>({designOutfitUrl:item.designOutfitUrl,designItemId:item.designItemId}))
// 使用 sessionStorage 传递参数
sessionStorage.setItem('listingEditParams', JSON.stringify({
designItemIds,
type:'create',
collectionId: route.params.collectionId
}))
router.push({
path:'/home/seller/myListings/edit',
state: {
designItemIds,
type:'create',
collectionId: route.params.collectionId
}
path:'/home/seller/myListings/edit'
})
}
@@ -163,7 +171,7 @@ const {} = toRefs(data);
<template #right>
<div class="header-right">
<div class="chooseNum">
{{ chooseList.length }} {{ t('Seller.sketchesSelected') }}
{{ chooseList.length }} / 9 {{ t('Seller.sketchesSelected') }}
</div>
<div class="button" @click="next">
<span>{{ $t('Seller.Next') }}</span>
@@ -177,8 +185,8 @@ const {} = toRefs(data);
<div class="content" ref="listingsBoxRef">
<div class="title">
<div class="left">
<i class="fi fi-rs-comments"></i>
<span>{{ $t('Seller.ActiveListings') }}</span>
<i class="fi fi-rs-comments"></i>
<span>{{ $t('Seller.Praka') }}</span>
</div>
<div class="right">
<div class="generalModel_state">
@@ -317,6 +325,7 @@ const {} = toRefs(data);
margin: 0 auto;
overflow-y: auto;
align-content: flex-start;
min-width: 90%;
&::-webkit-scrollbar {
display: none;
}

View File

@@ -168,13 +168,17 @@ const publishListing = async (item: any)=>{
message.success($t('Seller.publishMessage'))
}
const editListing = (item: any)=>{
const editListing = (item: any) => {
sessionStorage.setItem('listingEditParams', JSON.stringify({
id:item.id,
type:'edit'
}))
router.push({
path:'/home/seller/myListings/edit',
state: {
id:item.id,
type:'edit'
}
// state: {
// id:item.id,
// type:'edit'
// }
})
}
@@ -400,6 +404,7 @@ const { showDrafts } = toRefs(data);
margin: 0 auto;
align-items: flex-start;
overflow: auto;
min-width: 90%;
&::-webkit-scrollbar {
display: none;
}

View File

@@ -132,6 +132,7 @@ const {} = toRefs(data);
width: 100%;
height: 100%;
object-fit: cover;
background-color: #fff;
}
> .maskBtn{
position: absolute;
@@ -167,10 +168,16 @@ const {} = toRefs(data);
--rightColor: #979797;
.left{
gap: var(--detailRightItemGap);
flex: 1;
overflow: hidden;
.name{
font-weight: 500;
font-size: var(--detailLeftNameSize);
line-height: 150%;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price{
font-family: pingfang_regular;

View File

@@ -41,7 +41,7 @@ const {} = toRefs(data);
</script>
<template>
<div class="myListings-seller">
<seller-header>
<seller-header :displayBack="false">
<template #right>
<div class="button" @click="newListing">
<span>{{ $t('Seller.newListing') }}</span>

View File

@@ -42,27 +42,27 @@
<div class="item">
<div class="images">
<img
v-for="v in v.item.slice(0, maxItemNum)"
v-for="v in v.items.slice(0, maxItemNum)"
:key="v.id"
:src="v.url"
/>
<span v-if="v.item.length > maxItemNum"
>+{{ v.item.length - maxItemNum }} more</span
<span v-if="v.items.length > maxItemNum"
>+{{ v.items.length - maxItemNum }} more</span
>
</div>
<div class="titles">
<div v-for="v in v.item.slice(0, maxItemNum)" :key="v.id">
<div v-for="v in v.items.slice(0, maxItemNum)" :key="v.id">
{{ v.title }}
</div>
<span v-if="v.item.length > maxItemNum">...</span>
<span v-if="v.items.length > maxItemNum">...</span>
</div>
</div>
<div class="price">{{ v.price }}</div>
<div class="buyer-username">{{ v.username }}</div>
<div class="date">
<div>{{ v.date }}</div>
<div>{{ v.time }}</div>
</div>
<div
class="date"
v-html="FormatDate(v.date, $t('Seller.dateTimeFormat'))"
></div>
</div>
</div>
<div class="null" v-show="list.length === 0 && !loading && finish">
@@ -80,6 +80,7 @@
import { ref, onMounted, onBeforeUnmount, computed } from "vue"
import { Https } from "@/tool/https"
import { useI18n } from "vue-i18n"
import { FormatDate } from "@/tool/util"
const { t } = useI18n()
const totals_obj = ref({
totalRevenue: "--",
@@ -141,10 +142,9 @@
}
list.value.push(obj)
})
total.value = res.total
page.value++
finish.value = page.value > total.value / size.value
finish.value = total.value <= list.value.length
loading.value = false
})
.catch(() => {
@@ -177,6 +177,7 @@
onBeforeUnmount(() => {
observer.disconnect()
})
const formatTimestamp = (ts) => {
const d = new Date(ts)
const h = d.getHours()

View File

@@ -1,5 +1,5 @@
<template>
<div class="settings-index">
<div class="settings-index mini-scrollbar">
<div>
<div class="notification">
<div class="header">{{ $t("Seller.notifications") }}</div>
@@ -147,15 +147,14 @@
.settings-index {
flex: 1;
overflow-y: auto;
margin: 0 16rem;
margin: 0 10rem;
padding: 0 6rem;
display: flex;
gap: 4.2rem;
> div {
flex: 1;
display: flex;
flex-direction: column;
gap: 4.2rem;
> div {
margin-bottom: 4.2rem;
border-radius: 1.2rem;
overflow: hidden;
border: 0.15rem solid #d1d1d1;

View File

@@ -1,6 +1,6 @@
<template>
<div class="seller-header">
<div class="back" @click="() => router.back()">
<div class="back" v-if="displayBack" @click="() => router.back()">
<svg-icon name="seller-back" size="24" />
</div>
<div class="content">
@@ -55,13 +55,16 @@
defineProps<{
title?: string
tip?: string
displayBack?: boolean
breadcrumbs?: SellerBreadcrumbSource[]
}>(),
{
title: "",
tip: "",
breadcrumbs: () => []
breadcrumbs: () => [],
displayBack: true
}
)
const route = useRoute()
const router = useRouter()