Compare commits
47 Commits
52576aa0a1
...
dev_vite
| Author | SHA1 | Date | |
|---|---|---|---|
| d5266937d7 | |||
| 9cd9d82077 | |||
| 9869217688 | |||
|
|
768986af54 | ||
|
|
c58a2ed093 | ||
|
|
10b632572a | ||
| 89d27ba206 | |||
| bee0a66626 | |||
|
|
3519eeffd7 | ||
|
|
21a71aeffb | ||
| 82384b8488 | |||
| 3c53212c10 | |||
|
|
4dd1eab217 | ||
|
|
70ddcb63d0 | ||
|
|
6131cd2e96 | ||
| 00bc9041ef | |||
| 436c472327 | |||
|
|
d771785cf7 | ||
| ee274e07f4 | |||
| 87f2c67ced | |||
| bc83de1da6 | |||
|
|
e3b2ca530c | ||
|
|
e3c889c58a | ||
| 49e9ba423a | |||
| d02061c407 | |||
|
|
c60458d1a0 | ||
| 5a85ff0189 | |||
|
|
5eaa77596e | ||
|
|
848e7b4692 | ||
|
|
fd140ebc56 | ||
|
|
34094c8c92 | ||
|
|
e4dc2bf729 | ||
|
|
7f226179d9 | ||
|
|
3edff6b05c | ||
|
|
6fd1212298 | ||
| e093cccb8d | |||
| b2c6c61515 | |||
| 0219b1a2f4 | |||
| 133433a260 | |||
| 90a59a3dc5 | |||
| c8a65ee2cb | |||
| 226918e941 | |||
|
|
494bfd68ca | ||
|
|
95b70792ba | ||
|
|
a0fffa5896 | ||
|
|
06eaabc742 | ||
|
|
27da4739a6 |
@@ -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 |
5
src/assets/icons/CTrash.svg
Normal file
5
src/assets/icons/CTrash.svg
Normal 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 |
3
src/assets/icons/home.svg
Normal file
3
src/assets/icons/home.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.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 |
11
src/assets/icons/picture.svg
Normal file
11
src/assets/icons/picture.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_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 |
@@ -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) => {
|
||||
|
||||
3523
src/lang/cn.ts
3523
src/lang/cn.ts
File diff suppressed because it is too large
Load Diff
@@ -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: 'Don’t show me again',
|
||||
showAgain: 'Don’t 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",
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 }) {
|
||||
|
||||
@@ -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:{
|
||||
|
||||
@@ -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]);
|
||||
}
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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="Owner’s 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;
|
||||
|
||||
@@ -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 1–3 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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<p class="tip"> </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([])
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user