aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面调整

Browse Source
This commit is contained in:
X1627315083
2025-07-19 14:04:48 +08:00
parent 22ee9c6cf1
commit 4b694236ee
161 changed files with 2934 additions and 3979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/images/homePage/defaultModel.png → src/assets/images/homePage/FemaleAdultModel.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/assets/images/homePage/FemaleChildModel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
src/assets/images/homePage/MaleAdultModel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
src/assets/images/homePage/MaleChildModel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/assets/images/homePage/loginLeftImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 760 KiB

BIN
src/assets/images/homePage/loginLeftImg1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 482 KiB

BIN
src/assets/images/homePage/loginLeftImg2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 471 KiB

BIN
src/assets/images/homePage/squareLeftImg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 338 KiB

BIN
src/assets/images/homePage/squareLeftImgModel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
src/assets/images/homePage/squareLeftImgText.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

33
src/assets/images/icon/jcbPay.svg Normal file
View File

@@ -0,0 +1,33 @@
<svg
height="16"
viewBox="0 0 23 16"
width="23"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none">
<path
d="m.20535714 16h4.51785715c1.0278125 0 2.25892857-1.1946667 2.25892857-2.1333333v-13.8666667h-4.51785715c-1.0278125 0-2.25892857 1.19466667-2.25892857 3.2z"
fill="#047ab1"
/>
<path
d="m2.76924107 10.816c-.86733559.0001606-1.73039558-.1147397-2.56388393-.3413333v-1.17333337c.64678874.37770431 1.38610045.59084099 2.14598215.61866667.8696875 0 1.35535714-.576 1.35535714-1.36533333v-3.22133334h2.14598214v3.22133334c0 1.25866666-.70026786 2.26133333-3.0834375 2.26133333z"
fill="#fff"
/>
<path
d="m8.11160714 16h4.51785716c1.0278125 0 2.2589286-1.1946667 2.2589286-2.1333333v-13.8666667h-4.5178572c-1.02781249 0-2.25892856 1.19466667-2.25892856 3.2z"
fill="#d42d06"
/>
<path
d="m8.11160714 6.08c.65508929-.59733333 1.78455357-.97066667 3.61428576-.88533333.9939285.04266666 2.0330357.32 2.0330357.32v1.184c-.5943231-.3394747-1.2623758-.54734656-1.9539732-.608-1.3892411-.11733334-2.23633933.61866666-2.23633933 1.90933333s.84709823 2.0266667 2.23633933 1.92c.6920185-.06606555 1.3596342-.27744592 1.9539732-.61866667v1.17333337s-1.0391072.288-2.0330357.3306666c-1.82973219.0853334-2.95919647-.288-3.61428576-.8853333z"
fill="#fff"
/>
<path
d="m16.0178571 16h4.5178572c1.0278125 0 2.2589286-1.1946667 2.2589286-2.1333333v-13.8666667h-4.5178572c-1.0278125 0-2.2589286 1.19466667-2.2589286 3.2z"
fill="#67b637"
/>
<path
d="m21.6651786 9.28c0 .8533333-.7002679 1.3866667-1.6377232 1.3866667h-4.0095983v-5.33333337h3.6481697l.2597768.01066667c.8245089.04266667 1.4344196.50133333 1.4344196 1.29066667 0 .61866666-.4179018 1.152-1.1746428 1.28v.032c.8358035.05333333 1.4795982.55466666 1.4795982 1.33333333zm-2.880134-3.104c-.0486104-.00686658-.0976798-.01043129-.1468303-.01066667h-1.3553572v1.344h1.5021875c.2823661-.064.5195536-.30933333.5195536-.672 0-.36266666-.2371875-.608-.5195536-.66133333zm.1694197 2.176c-.059755-.00886168-.1202559-.01243275-.1807143-.01066667h-1.4908929v1.46133334h1.4908929l.1807143-.02133334c.2823661-.064.5195536-.34133333.5195536-.71466666 0-.37333334-.2258929-.64-.5195536-.71466667z"
fill="#fff"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

16
src/assets/images/icon/mastercardPay.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
height="16"
viewBox="0 0 24 16"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<rect fill="#252525" height="16" rx="2" width="24" />
<circle cx="9" cy="8" fill="#eb001b" r="5" />
<circle cx="15" cy="8" fill="#f79e1b" r="5" />
<path
d="m12 3.99963381c1.2144467.91220633 2 2.36454836 2 4.00036619s-.7855533 3.0881599-2 4.0003662c-1.2144467-.9122063-2-2.36454837-2-4.0003662s.7855533-3.08815986 2-4.00036619z"
fill="#ff5f00"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 523 B

15
src/assets/images/icon/visaPay.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="16px" viewBox="0 0 24 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="319" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="New-Icons" transform="translate(-80.000000, -280.000000)" fill-rule="nonzero">
<g id="Card-Brands" transform="translate(40.000000, 200.000000)">
<g id="Color" transform="translate(0.000000, 80.000000)">
<g id="Visa" transform="translate(40.000000, 0.000000)">
<rect id="Container" stroke-opacity="0.2" stroke="#000000" stroke-width="0.5" fill="#FFFFFF" x="0.25" y="0.25" width="23.5" height="15.5" rx="2"></rect>
<path d="M2.78773262,5.91443732 C2.26459089,5.62750595 1.6675389,5.39673777 1,5.23659312 L1.0280005,5.1118821 L3.76497922,5.1118821 C4.13596254,5.12488556 4.43699113,5.23650585 4.53494636,5.63071135 L5.12976697,8.46659052 L5.31198338,9.32072617 L6.97796639,5.1118821 L8.77678896,5.1118821 L6.10288111,11.2775284 L4.30396552,11.2775284 L2.78773262,5.91443732 L2.78773262,5.91443732 Z M10.0999752,11.2840738 L8.39882877,11.2840738 L9.46284763,5.1118821 L11.163901,5.1118821 L10.0999752,11.2840738 Z M16.2667821,5.26277458 L16.0354292,6.59558538 L15.881566,6.53004446 C15.5737466,6.40524617 15.1674138,6.28053516 14.6143808,6.29371316 C13.942741,6.29371316 13.6415263,6.56277129 13.6345494,6.82545859 C13.6345494,7.11441463 13.998928,7.3048411 14.5939153,7.58725177 C15.5740257,8.02718756 16.0286384,8.56556562 16.0218476,9.26818871 C16.0080799,10.5486366 14.8460128,11.376058 13.0610509,11.376058 C12.2978746,11.3694253 11.5627918,11.2180965 11.163808,11.0475679 L11.4018587,9.66204513 L11.6258627,9.76066195 C12.1788958,9.99070971 12.5428092,10.0889775 13.221984,10.0889775 C13.7117601,10.0889775 14.2368857,9.89837643 14.2435835,9.48488392 C14.2435835,9.21565125 14.0198586,9.01850486 13.3617074,8.7164581 C12.717789,8.42086943 11.8568435,7.92848346 11.8707973,7.04197926 C11.8780532,5.84042483 13.0610509,5 14.7409877,5 C15.3990458,5 15.9312413,5.13788902 16.2667821,5.26277458 Z M18.5277524,9.0974856 L19.941731,9.0974856 C19.8717762,8.78889347 19.549631,7.31147374 19.549631,7.31147374 L19.4307452,6.77964104 C19.3467437,7.00942698 19.1998574,7.38373457 19.2069273,7.37055657 C19.2069273,7.37055657 18.6678479,8.74290137 18.5277524,9.0974856 Z M20.6276036,5.1118821 L22,11.2839865 L20.4249023,11.2839865 C20.4249023,11.2839865 20.2707601,10.5748181 20.221922,10.3581228 L18.0377903,10.3581228 C17.9746264,10.5221933 17.6807607,11.2839865 17.6807607,11.2839865 L15.8957988,11.2839865 L18.4226343,5.62399144 C18.5977072,5.22341512 18.9059917,5.1118821 19.3117663,5.1118821 L20.6276036,5.1118821 L20.6276036,5.1118821 Z" id="Shape" fill="#1434CB"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

25
src/assets/images/icon/yinlianPay.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

51
src/assets/style/style.css
View File

@@ -10,7 +10,7 @@ body,
--aida-fsize1-8: calc(1.8rem);
--aida-fsize1-6: calc(1.6rem);
--aida-fsize1-4: calc(1.4rem*1.2);
--antd-wave-shadow-color: #39215b;
--antd-wave-shadow-color: #000;
}
::selection {
background-color: #1890ff;
@@ -57,7 +57,9 @@ li {
}
.ant-slider.system_silder {
margin: 0;
width: 100%;
margin-left: 1rem;
margin-right: 1rem;
width: calc(100% - 2rem);
}
.ant-slider.system_silder .ant-slider-rail {
height: 0.6rem;
@@ -716,6 +718,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
.generalModel_state .generalModel_state_item.smail .ant-select-selector,
.generalModel_state .generalModel_state_item.smail .range_picker {
padding: 1rem 2rem !important;
padding-right: 3rem !important;
}
.generalModel_state .generalModel_state_item.smail .el-cascader {
padding: 1rem 2rem;
@@ -1750,6 +1753,7 @@ textarea:focus {
.productImg_content .input_border,
.poseTransfer .input_border,
.scaleImage_modal .input_border,
.editDesignType_modal .input_border,
.accountEdit_page .input_border,
.generalMenu_printModel_upload .input_border,
.generate .input_border {
@@ -1759,6 +1763,7 @@ textarea:focus {
padding-bottom: calc(2rem*1.2);
top: 0;
flex-wrap: wrap;
z-index: 6;
--width: 65%;
}
.collection_modal_body .input_border .input_box,
@@ -1767,11 +1772,12 @@ textarea:focus {
.productImg_content .input_border .input_box,
.poseTransfer .input_border .input_box,
.scaleImage_modal .input_border .input_box,
.editDesignType_modal .input_border .input_box,
.accountEdit_page .input_border .input_box,
.generalMenu_printModel_upload .input_border .input_box,
.generate .input_border .input_box {
position: relative;
z-index: 2;
z-index: 6;
flex: 1;
display: flex;
align-items: center;
@@ -1784,6 +1790,7 @@ textarea:focus {
.productImg_content .input_border .input_box .inputShowText,
.poseTransfer .input_border .input_box .inputShowText,
.scaleImage_modal .input_border .input_box .inputShowText,
.editDesignType_modal .input_border .input_box .inputShowText,
.accountEdit_page .input_border .input_box .inputShowText,
.generalMenu_printModel_upload .input_border .input_box .inputShowText,
.generate .input_border .input_box .inputShowText {
@@ -1796,6 +1803,7 @@ textarea:focus {
.productImg_content .input_border .input_box.active .input_box_btnBox,
.poseTransfer .input_border .input_box.active .input_box_btnBox,
.scaleImage_modal .input_border .input_box.active .input_box_btnBox,
.editDesignType_modal .input_border .input_box.active .input_box_btnBox,
.accountEdit_page .input_border .input_box.active .input_box_btnBox,
.generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
.generate .input_border .input_box.active .input_box_btnBox,
@@ -1805,6 +1813,7 @@ textarea:focus {
.productImg_content .input_border .input_box.active .search_textarea,
.poseTransfer .input_border .input_box.active .search_textarea,
.scaleImage_modal .input_border .input_box.active .search_textarea,
.editDesignType_modal .input_border .input_box.active .search_textarea,
.accountEdit_page .input_border .input_box.active .search_textarea,
.generalMenu_printModel_upload .input_border .input_box.active .search_textarea,
.generate .input_border .input_box.active .search_textarea {
@@ -1817,6 +1826,7 @@ textarea:focus {
.productImg_content .input_border .input_box.active .inputShowText,
.poseTransfer .input_border .input_box.active .inputShowText,
.scaleImage_modal .input_border .input_box.active .inputShowText,
.editDesignType_modal .input_border .input_box.active .inputShowText,
.accountEdit_page .input_border .input_box.active .inputShowText,
.generalMenu_printModel_upload .input_border .input_box.active .inputShowText,
.generate .input_border .input_box.active .inputShowText {
@@ -1830,6 +1840,7 @@ textarea:focus {
.productImg_content .input_border .search_keyword,
.poseTransfer .input_border .search_keyword,
.scaleImage_modal .input_border .search_keyword,
.editDesignType_modal .input_border .search_keyword,
.accountEdit_page .input_border .search_keyword,
.generalMenu_printModel_upload .input_border .search_keyword,
.generate .input_border .search_keyword {
@@ -1842,6 +1853,7 @@ textarea:focus {
.productImg_content .input_border .search_keyword .search_keyword_center,
.poseTransfer .input_border .search_keyword .search_keyword_center,
.scaleImage_modal .input_border .search_keyword .search_keyword_center,
.editDesignType_modal .input_border .search_keyword .search_keyword_center,
.accountEdit_page .input_border .search_keyword .search_keyword_center,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center,
.generate .input_border .search_keyword .search_keyword_center {
@@ -1863,6 +1875,7 @@ textarea:focus {
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.editDesignType_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
@@ -1877,6 +1890,7 @@ textarea:focus {
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.editDesignType_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
@@ -1896,6 +1910,7 @@ textarea:focus {
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.editDesignType_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
@@ -1907,6 +1922,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox,
.poseTransfer .input_border .input_box_btnBox,
.scaleImage_modal .input_border .input_box_btnBox,
.editDesignType_modal .input_border .input_box_btnBox,
.accountEdit_page .input_border .input_box_btnBox,
.generalMenu_printModel_upload .input_border .input_box_btnBox,
.generate .input_border .input_box_btnBox {
@@ -1917,10 +1933,9 @@ textarea:focus {
float: left;
align-items: center;
padding: 1.5rem 2rem;
padding-right: 0;
background-color: #fff;
flex: 1;
height: 5rem;
height: auto;
}
.collection_modal_body .input_border .input_box_btnBox.sketch,
.design_detail_modal_component .input_border .input_box_btnBox.sketch,
@@ -1928,6 +1943,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox.sketch,
.poseTransfer .input_border .input_box_btnBox.sketch,
.scaleImage_modal .input_border .input_box_btnBox.sketch,
.editDesignType_modal .input_border .input_box_btnBox.sketch,
.accountEdit_page .input_border .input_box_btnBox.sketch,
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
.generate .input_border .input_box_btnBox.sketch {
@@ -1943,6 +1959,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox.sketch .upload_item,
.poseTransfer .input_border .input_box_btnBox.sketch .upload_item,
.scaleImage_modal .input_border .input_box_btnBox.sketch .upload_item,
.editDesignType_modal .input_border .input_box_btnBox.sketch .upload_item,
.accountEdit_page .input_border .input_box_btnBox.sketch .upload_item,
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch .upload_item,
.generate .input_border .input_box_btnBox.sketch .upload_item {
@@ -1954,6 +1971,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
.poseTransfer .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
.scaleImage_modal .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
.editDesignType_modal .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
.accountEdit_page .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
.generate .input_border .input_box_btnBox.sketch .upload_item .upload_file_item {
@@ -1966,12 +1984,13 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox > .textarea,
.poseTransfer .input_border .input_box_btnBox > .textarea,
.scaleImage_modal .input_border .input_box_btnBox > .textarea,
.editDesignType_modal .input_border .input_box_btnBox > .textarea,
.accountEdit_page .input_border .input_box_btnBox > .textarea,
.generalMenu_printModel_upload .input_border .input_box_btnBox > .textarea,
.generate .input_border .input_box_btnBox > .textarea {
border-radius: 1rem;
min-height: 2rem;
max-height: 20rem;
max-height: 14rem;
border: none;
resize: none;
height: 2.7rem;
@@ -1985,6 +2004,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox .ant-spin-text,
.poseTransfer .input_border .input_box_btnBox .ant-spin-text,
.scaleImage_modal .input_border .input_box_btnBox .ant-spin-text,
.editDesignType_modal .input_border .input_box_btnBox .ant-spin-text,
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text,
.generate .input_border .input_box_btnBox .ant-spin-text {
@@ -1996,6 +2016,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox .search_seed,
.poseTransfer .input_border .input_box_btnBox .search_seed,
.scaleImage_modal .input_border .input_box_btnBox .search_seed,
.editDesignType_modal .input_border .input_box_btnBox .search_seed,
.accountEdit_page .input_border .input_box_btnBox .search_seed,
.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed,
.generate .input_border .input_box_btnBox .search_seed {
@@ -2011,6 +2032,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox .upload_item,
.poseTransfer .input_border .input_box_btnBox .upload_item,
.scaleImage_modal .input_border .input_box_btnBox .upload_item,
.editDesignType_modal .input_border .input_box_btnBox .upload_item,
.accountEdit_page .input_border .input_box_btnBox .upload_item,
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item,
.generate .input_border .input_box_btnBox .upload_item {
@@ -2022,6 +2044,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox .upload_item .upload_file_item,
.poseTransfer .input_border .input_box_btnBox .upload_item .upload_file_item,
.scaleImage_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
.editDesignType_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
.generate .input_border .input_box_btnBox .upload_item .upload_file_item {
@@ -2040,6 +2063,7 @@ textarea:focus {
.productImg_content .input_border input,
.poseTransfer .input_border input,
.scaleImage_modal .input_border input,
.editDesignType_modal .input_border input,
.accountEdit_page .input_border input,
.generalMenu_printModel_upload .input_border input,
.generate .input_border input {
@@ -2058,6 +2082,7 @@ textarea:focus {
.productImg_content .input_border inputinput:-moz-placeholder,
.poseTransfer .input_border inputinput:-moz-placeholder,
.scaleImage_modal .input_border inputinput:-moz-placeholder,
.editDesignType_modal .input_border inputinput:-moz-placeholder,
.accountEdit_page .input_border inputinput:-moz-placeholder,
.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder,
.generate .input_border inputinput:-moz-placeholder {
@@ -2069,6 +2094,7 @@ textarea:focus {
.productImg_content .input_border inputinput:-ms-input-placeholder,
.poseTransfer .input_border inputinput:-ms-input-placeholder,
.scaleImage_modal .input_border inputinput:-ms-input-placeholder,
.editDesignType_modal .input_border inputinput:-ms-input-placeholder,
.accountEdit_page .input_border inputinput:-ms-input-placeholder,
.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder,
.generate .input_border inputinput:-ms-input-placeholder {
@@ -2080,6 +2106,7 @@ textarea:focus {
.productImg_content .input_border inputinput::-webkit-input-placeholder,
.poseTransfer .input_border inputinput::-webkit-input-placeholder,
.scaleImage_modal .input_border inputinput::-webkit-input-placeholder,
.editDesignType_modal .input_border inputinput::-webkit-input-placeholder,
.accountEdit_page .input_border inputinput::-webkit-input-placeholder,
.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder,
.generate .input_border inputinput::-webkit-input-placeholder {
@@ -2091,6 +2118,7 @@ textarea:focus {
.productImg_content .input_border input.forbidden,
.poseTransfer .input_border input.forbidden,
.scaleImage_modal .input_border input.forbidden,
.editDesignType_modal .input_border input.forbidden,
.accountEdit_page .input_border input.forbidden,
.generalMenu_printModel_upload .input_border input.forbidden,
.generate .input_border input.forbidden {
@@ -2102,6 +2130,7 @@ textarea:focus {
.productImg_content .input_border .input_box_btnBox_upImg,
.poseTransfer .input_border .input_box_btnBox_upImg,
.scaleImage_modal .input_border .input_box_btnBox_upImg,
.editDesignType_modal .input_border .input_box_btnBox_upImg,
.accountEdit_page .input_border .input_box_btnBox_upImg,
.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg,
.generate .input_border .input_box_btnBox_upImg {
@@ -2113,6 +2142,7 @@ textarea:focus {
.productImg_content .input_border .fi,
.poseTransfer .input_border .fi,
.scaleImage_modal .input_border .fi,
.editDesignType_modal .input_border .fi,
.accountEdit_page .input_border .fi,
.generalMenu_printModel_upload .input_border .fi,
.generate .input_border .fi {
@@ -2132,6 +2162,7 @@ textarea:focus {
.productImg_content .input_border .fi.fi-br-loading,
.poseTransfer .input_border .fi.fi-br-loading,
.scaleImage_modal .input_border .fi.fi-br-loading,
.editDesignType_modal .input_border .fi.fi-br-loading,
.accountEdit_page .input_border .fi.fi-br-loading,
.generalMenu_printModel_upload .input_border .fi.fi-br-loading,
.generate .input_border .fi.fi-br-loading {
@@ -2144,6 +2175,7 @@ textarea:focus {
.productImg_content .input_border .fi.active,
.poseTransfer .input_border .fi.active,
.scaleImage_modal .input_border .fi.active,
.editDesignType_modal .input_border .fi.active,
.accountEdit_page .input_border .fi.active,
.generalMenu_printModel_upload .input_border .fi.active,
.generate .input_border .fi.active {
@@ -2155,6 +2187,7 @@ textarea:focus {
.productImg_content .input_border .fi.forbidden,
.poseTransfer .input_border .fi.forbidden,
.scaleImage_modal .input_border .fi.forbidden,
.editDesignType_modal .input_border .fi.forbidden,
.accountEdit_page .input_border .fi.forbidden,
.generalMenu_printModel_upload .input_border .fi.forbidden,
.generate .input_border .fi.forbidden {
@@ -2166,6 +2199,7 @@ textarea:focus {
.productImg_content .input_border .search_upImg,
.poseTransfer .input_border .search_upImg,
.scaleImage_modal .input_border .search_upImg,
.editDesignType_modal .input_border .search_upImg,
.accountEdit_page .input_border .search_upImg,
.generalMenu_printModel_upload .input_border .search_upImg,
.generate .input_border .search_upImg {
@@ -2181,6 +2215,7 @@ textarea:focus {
.productImg_content .input_border .search_upImg span,
.poseTransfer .input_border .search_upImg span,
.scaleImage_modal .input_border .search_upImg span,
.editDesignType_modal .input_border .search_upImg span,
.accountEdit_page .input_border .search_upImg span,
.generalMenu_printModel_upload .input_border .search_upImg span,
.generate .input_border .search_upImg span {
@@ -2193,6 +2228,7 @@ textarea:focus {
.productImg_content .input_border .search_upImg .ant-upload-select-picture-card,
.poseTransfer .input_border .search_upImg .ant-upload-select-picture-card,
.scaleImage_modal .input_border .search_upImg .ant-upload-select-picture-card,
.editDesignType_modal .input_border .search_upImg .ant-upload-select-picture-card,
.accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card,
.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card,
.generate .input_border .search_upImg .ant-upload-select-picture-card {
@@ -2206,6 +2242,7 @@ textarea:focus {
.productImg_content .input_border .search_textarea,
.poseTransfer .input_border .search_textarea,
.scaleImage_modal .input_border .search_textarea,
.editDesignType_modal .input_border .search_textarea,
.accountEdit_page .input_border .search_textarea,
.generalMenu_printModel_upload .input_border .search_textarea,
.generate .input_border .search_textarea {
@@ -2214,7 +2251,7 @@ textarea:focus {
position: absolute;
left: 0;
font-size: calc(1.6rem*1.2);
width: var(--width);
width: 100%;
border-radius: 4px;
height: 20rem;
top: 0rem;

25
src/assets/style/style.less
View File

@@ -10,7 +10,7 @@ html,body,#app{
--aida-fsize1-8: calc(1.8rem);
--aida-fsize1-6: calc(1.6rem);
--aida-fsize1-4: calc(1.4rem*1.2);
--antd-wave-shadow-color:#39215b;
--antd-wave-shadow-color:#000;
}
::selection{
background-color: #1890ff;
@@ -60,8 +60,10 @@ input:focus{
}
.ant-slider.system_silder{
margin: 0;
width: 100%;
margin: 0;
margin-left: 1rem;
margin-right: 1rem;
width: calc(100% - 2rem);
.ant-slider-rail{
height: 0.6rem;
@@ -787,6 +789,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
}
.ant-picker-range,.ant-select-selector,.range_picker{
padding: 1rem 2rem !important;
padding-right: 3rem !important;
}
.el-cascader{
padding: 1rem 2rem;
@@ -1911,7 +1914,7 @@ textarea:focus{
}
//设计input和上传按钮样式
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_content,.poseTransfer,.scaleImage_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_content,.poseTransfer,.scaleImage_modal,.editDesignType_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
.input_border{
z-index: 2;
display: flex;
@@ -1919,10 +1922,11 @@ textarea:focus{
padding-bottom: calc(2rem*1.2);
top: 0;
flex-wrap: wrap;
z-index: 6;
--width:65%;
.input_box{
position: relative;
z-index: 2;
z-index: 6;
flex: 1;
display: flex;
align-items: center;
@@ -1995,10 +1999,11 @@ textarea:focus{
float: left;
align-items: center;
padding: 1.5rem 2rem;
padding-right: 0;
// padding-right: 0;
background-color: #fff;
flex: 1;
height: 5rem;
height: auto;
// height: 5rem;
// border
&.sketch{
padding: 0;
@@ -2017,7 +2022,8 @@ textarea:focus{
> .textarea{
border-radius: 1rem;
min-height: 2rem;
max-height: 20rem;
// max-height: 20rem;
max-height: 14rem;
border: none;
resize: none;
height: 2.7rem;
@@ -2123,7 +2129,8 @@ textarea:focus{
left: 0;
font-size: calc(1.6rem*1.2);
// width: 30rem;
width: var(--width);
// width: var(--width);
width: 100%;
border-radius: 4px;
height: 20rem;
top: 0rem;

7
src/component/Account/account.vue
View File

@@ -405,6 +405,9 @@ export default defineComponent({
text-align: center;
margin-right: 2rem;
padding: 12px 0;
> a{
border-radius: 1rem;
}
}
.account_page_content_right{
flex: 1;
@@ -486,7 +489,7 @@ export default defineComponent({
font-size: 1.4rem;
}
.search_icon_block{
background: #39215b;
background: #000;
color: #fff;
padding: .5rem 2rem;
font-size: 1.8rem;
@@ -525,7 +528,7 @@ export default defineComponent({
right: 0;
}
.account_generalMessage_item_link{
color: #39215b;
color: #000;
cursor: pointer;
font-weight: 600;
}

2
src/component/Account/message/privateChat.vue
View File

@@ -372,7 +372,7 @@ export default defineComponent({
}
.content_right_record_item_text{
border-radius: 2rem 0rem 2rem 2rem;
background: #39215b;
background: #000;
color: #fff;
}
}

2
src/component/Administrator/affiliate/itemAffiliateDetail.vue
View File

@@ -14,7 +14,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>

2
src/component/Administrator/allUserPoerations.vue
View File

@@ -16,7 +16,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>

2
src/component/Administrator/organization/add.vue
View File

@@ -17,7 +17,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>

61
src/component/Canvas/index.vue
View File

@@ -1,18 +1,15 @@
<template>
<div class="red-green-mode-example">
<div class="canvasBox">
<!-- 画布编辑器 - 永久启用红绿图模式 -->
<div class="canvas-wrapper">
<div class="canvas-wrapper-btns">
<div @click="getJSON">获取JSON</div>
<div @click="loadJSON">读取JSON</div>
</div>
<CanvasEditor
ref="canvasEditor"
:enabledRedGreenMode="false"
:clothingImageUrl="imageUrls.baseImage"
:redGreenImageUrl="imageUrls.maskImage"
/>
</div>
<div class="btn">123
<div class="gallery_btn" @click="exportElement">Export</div>
</div>
</div>
</template>
@@ -23,11 +20,6 @@ import CanvasEditor from "./CanvasEditor/index.vue";
// 画布编辑器引用
const canvasEditor = ref(null);
// 图像URL配置
const imageUrls = {
baseImage: "@/assets/redGreenPic/clothing_base_image.png",
maskImage: "@/assets/redGreenPic/clothing_mask_image.png",
};
const getJSON = () => {
if (canvasEditor.value) {
const json = canvasEditor.value.getJSON();
@@ -43,7 +35,42 @@ const loadJSON = () => {
console.log("加载的JSON数据：", currentJSON);
}
};
const exportElement = ()=>{
canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false}).then((rv)=>{
console.log(rv)
downloadBase64Image(rv,'canvas')
})
}
function downloadBase64Image(base64Data, filename) {
// 1. 提取MIME类型（自动处理各种Base64前缀）
const mimeMatch = base64Data.match(/^data:(.+?);base64,/);
if (!mimeMatch) {
console.error('Invalid Base64 data');
return;
}
// 2. 获取扩展名
const mimeType = mimeMatch[1];
const extension = mimeType.split('/')[1] || 'png';
// 3. 转换Base64为Blob
const byteString = atob(base64Data.split(',')[1]);
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
const blob = new Blob([ab], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${filename}.${extension}`;
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
}
// 组件挂载时绑定键盘事件
onMounted(() => {});
@@ -52,14 +79,16 @@ onUnmounted(() => {});
</script>
<style scoped lang="less">
.red-green-mode-example {
.canvasBox {
width: 100%;
// height: 100vh;
height: 100%;
display: flex;
flex-direction: column;
display: flex;
// flex-direction: column;
}
.btn{
margin-top: auto;
}
.canvas-wrapper {
flex: 1;
position: relative;

2
src/component/Canvas/test.vue
View File

@@ -14,7 +14,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>

5
src/component/Detail/DesignDetailAlter.vue
View File

@@ -86,6 +86,7 @@
:data="{
...upload,
gender:workspace.sex,
ageGroup:workspace.ageGroup,
}"
:headers="{ Authorization: token }"
v-model:file-list="uploadList"
@@ -1751,7 +1752,7 @@ export default defineComponent({
border-radius: 50%;
width: 4rem;
height: 4rem;
border: solid 2px #39215b;
border: solid 2px #000;
display: flex;
align-items: center;
justify-content: center;
@@ -1769,7 +1770,7 @@ export default defineComponent({
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #39215b;
background: #000;
}
}
}

76
src/component/DetailCopy/canvas/index.vue
View File

@@ -18,18 +18,19 @@
<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
</div> -->
<div class="contet">
<div class="canvas" v-if="!isEditFrontBack" @click.stop>
<editCanvas v-if="canvasLoad && currentView === 'canvasEditor'" :config="canvasConfig"
:clothingImageUrl="selectDetail.undividedLayer"
<div class="canvas" v-if="currentView === 'canvasEditor'" @click.stop>
<editCanvas v-if="canvasLoad" :config="canvasConfig"
@canvasInit="canvasInit"
:clothingImageUrl="selectDetail.undividedLayer"
isFixedErasable
showFixedLayer
:clothing-image-opts="{
imageMode:'contains',
}"
ref="editCanvas">
<template #customTools="{ toolButtonProps }">
<!-- 也可以直接使用普通的按钮 -->
{{toolButtonProps}}
<div class="custom-tool-btn" @click="setCurrentView('redGreenExample')">
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('redGreenExample')">
<i class="fi fi-sr-layers"></i>
<div class="tool-tooltip">Edit the front and back sections</div>
</div>
@@ -37,16 +38,16 @@
</editCanvas>
<!-- <canvasContent ref="canvasContent"></canvasContent> -->
</div>
<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
<!-- <editFrontBack
:patchData="frontBack"
:imgDomIndex="imgDomIndex"
ref="editFrontBack">
</editFrontBack> -->
<editCanvas v-if="canvasLoad && currentView === 'redGreenExample'" :config="canvasConfig"
<editCanvas v-if="canvasLoad" :config="canvasConfig"
:enabledRedGreenMode="true"
:clothingImageUrl="selectDetail.undividedLayer"
:clothingImageUrl="selectDetail.path"
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
@trigger-red-green-mouseup="frontBackChange"
:clothing-image-opts="{
@@ -54,7 +55,7 @@
}"
ref="editCanvasBackFront">
<template #customTools="{ toolButtonProps }">
<div class="custom-tool-btn" @click="setCurrentView('canvasEditor')">
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('canvasEditor')">
<i class="fi fi-sr-layers"></i>
<div class="tool-tooltip">Edit the front and back sections</div>
</div>
@@ -67,9 +68,6 @@
<div class="gallery_btn" @click="privewDetail">Finish</div>
</div> -->
</div>
<div class="Finish" style="text-align: right;margin-top:1rem;">
<div class="gallery_btn" style="line-height: 4rem;padding: 0 1rem;" @click="editFront">EditFrontBack</div>
</div>
</div>
<!-- <div class="mark_loading" v-show="isShowMark">
@@ -121,13 +119,14 @@ export default defineComponent({
liquefaction:null as any,
canvasType:'export',
imgDomIndex:-1,
isEditFrontBack:false,
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
canvasLoad:false,
canvasConfig:{
} as any,
currentView:'canvasEditor',
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
canvasInstance:null as any,
})
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -152,10 +151,10 @@ export default defineComponent({
const toolLiquefaction = ()=>{//工具点击按钮
setLiquefaction()
}
const editFront = ()=>{//编辑前后片
const editFront = (str:any)=>{//编辑前后片
let canvasJSON = '' as any
if(!detailData.isEditFrontBack){
if(detailData.currentView === 'canvasEditor'){
sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
canvasJSON = sessionStorage.getItem('frontBackEdit');
}else{
@@ -163,18 +162,18 @@ export default defineComponent({
canvasJSON = sessionStorage.getItem('sketchEdit');
}
detailData.canvasLoad = false
detailData.isEditFrontBack = !detailData.isEditFrontBack
detailData.currentView = str
if(canvasJSON){
detailData.canvasLoad = true
nextTick(()=>{
if(!detailData.isEditFrontBack){
if(detailData.currentView === 'redGreenExample'){
detailDom.editCanvas.loadJSON(canvasJSON)
}else{
detailDom.editCanvasBackFront.loadJSON(canvasJSON)
}
})
}else{
if(!detailData.isEditFrontBack){
if(detailData.currentView === 'redGreenExample'){
nextTick(()=>{
setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
detailData.canvasLoad = true
@@ -190,6 +189,7 @@ export default defineComponent({
}
}
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
if(!detailDom.editCanvas)return
return new Promise((res,reject)=>{
detailDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
// let data = await detailData.canvasObj.detailSubmit()
@@ -225,18 +225,36 @@ export default defineComponent({
...detailData.canvasConfig,
}
segmentImage(value,full,size).then((rv)=>{
detailData.frontBack.front[detailData.imgDomIndex].imageUrl = rv.targetFrontUrl
detailData.frontBack.back[detailData.imgDomIndex].imageUrl = rv.targetBackUrl
detailData.frontBack.front[detailData.imgDomIndex].maskUrl = value
let front = detailData.frontBack.front[detailData.imgDomIndex]
let back = detailData.frontBack.back[detailData.imgDomIndex]
if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
if(!front?.oldMaskUrl)front.oldMaskUrl = front.imageUrl
if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
if(!front?.oldMaskUrl)store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:front.oldMaskUrl})
front.imageUrl = rv.targetFrontUrl
front.maskUrl = value
back.imageUrl = rv.targetBackUrl
store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:value})
})
}
const setCurrentView = (str:string)=>{
detailData.currentView = str
const canvasInit = (value:any)=>{
// detailDom.editCanvas.addImageToLayer(detailData.selectDetail.undividedLayer,{layerId:value.layers.value[0].id,imageMode:'contains',undoable:false})
detailData.canvasInstance = value
detailData.getCanvasIfEdit.fun = getCanvasLength
}
const getCanvasLength = ()=>{
return detailData.canvasInstance?.commandManager?.undoStack?.length
}
onBeforeUnmount(()=>{
console.log(12312)
let front = detailData.frontBack.front[detailData.imgDomIndex]
let back = detailData.frontBack.back[detailData.imgDomIndex]
if(front?.oldImageUrl)front.imageUrl = front.oldImageUrl
if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
if(front?.oldMaskUrl)store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:front.oldMaskUrl})
sessionStorage.removeItem('frontBackEdit');
sessionStorage.removeItem('sketchEdit');
detailData.canvasLoad = false
@@ -257,7 +275,7 @@ export default defineComponent({
privewDetail,
setFrontBackColor,
frontBackChange,
setCurrentView,
canvasInit,
}
},
provide() {
@@ -374,10 +392,18 @@ export default defineComponent({
font-size: 16px;
color: #333;
transition: all 0.2s ease;
&.active{
background-color: #e6f7ff;
color: #1890ff;
}
}
.custom-tool-btn:hover {
background-color: #f0f0f0;
&.active{
background-color: #e6f7ff;
color: #1890ff;
}
}
.custom-tool-btn:hover .tool-tooltip {

36
src/component/DetailCopy/designDetail.vue
View File

@@ -39,7 +39,7 @@
<img src="@/assets/images/icon/details_elements.png" alt="">
<div class="detailText">{{$t('DesignPrintOperation.Elements')}}</div>
</div>
<div class="nav_item" :class="{active:currentDetailType == 'models'}" @click="setCurrentDetail('models')">
<div class="nav_item" v-if="selectObject.type == 'seriesDesign'" :class="{active:currentDetailType == 'models'}" @click="setCurrentDetail('models')">
<img src="@/assets/images/icon/details_model.svg" alt="">
<div class="detailText">{{$t('DesignPrintOperation.Model')}}</div>
</div>
@@ -48,7 +48,7 @@
<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
<detailLeft v-if="currentDetailType"></detailLeft>
<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
<div class="btn" v-show="currentDetailType == 'color'">
<div class="btn" style="margin: 0;" v-show="currentDetailType == 'color'">
<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
</div>
</div>
@@ -62,9 +62,9 @@
@revocation="revocation"
@oppositeRevocation="oppositeRevocation"
></model>
<div class="btn" style="margin-left: 0;">
<div class="gallery_btn" @click="submit">{{$t('DesignPrintOperation.Submit')}}</div>
<!-- <div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div> -->
<div class="btn">
<div class="gallery_btn" style="margin-right: 0;" @click="submit">{{$t('DesignPrintOperation.Submit')}}</div>
<div v-show="isEditPattern.value" style="margin-left: 2rem;" class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
</div>
</div>
<div class="item detailRight">
@@ -78,6 +78,7 @@
(currentDetailType === 'element' ||
currentDetailType === 'print' ||
(currentDetailType === 'sketch' && selectDetail?.newDetail?.[currentDetailType])||
(currentDetailType === 'sketch' && selectDetail?.sketchString)||
(currentDetailType === 'models' && designDetail?.newModel))
"
>
@@ -133,6 +134,7 @@ export default defineComponent({
return store.state.UserHabit.userDetail
})
const detailData = reactive({
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
@@ -184,11 +186,11 @@ export default defineComponent({
}
}else{
item.color = {
rgba:{
r:undefined,
g:undefined,
b:undefined,
}
// rgba:{
// r:undefined,
// g:undefined,
// b:undefined,
// }
}
}
if(item.gradient){
@@ -281,7 +283,7 @@ export default defineComponent({
let isCurrent = list[i].id == detailData?.selectDetail?.id
let data:any = {
changed:false,
color:(detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):(list[i].color.rgba.r?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''),
color:(detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):(list[i].color?.rgba?.r?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''),
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
// maskMinioUrl:'',
@@ -293,7 +295,7 @@ export default defineComponent({
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
priority,
scale,
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type || newData.categoryValue:list[i].type,
sketchString:list[i].sketchString?list[i].sketchString:'',
trims:(newData && detailData.currentDetailType == 'element' && isCurrent)?{prints:newData}:list[i].trims?list[i].trims:{prints:[]},
}
@@ -327,6 +329,7 @@ export default defineComponent({
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:userDetail.value.userId,
probjectId:store.state.Workspace.probjects,
}
detailData.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
@@ -352,8 +355,11 @@ export default defineComponent({
// ifSubmit:designItemDetail.isPreview,
gender:workspace?.sex == 'Male'?1:0,
sketchString:'',
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:userDetail.value.userId,
probjectId:store.state.Workspace.probjects,
}
detailData.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
@@ -552,12 +558,6 @@ export default defineComponent({
display: flex;
justify-content: center;
margin-left: 12rem;
> div{
margin-right: 2rem;
}
> div:last-child{
margin-right: 0rem;
}
}
}
> .nav{

1
src/component/DetailCopy/detailLeft/colorBox/index.vue
View File

@@ -149,6 +149,7 @@ export default defineComponent({
colorData.colorList.list[newVal].push(item)
}
if(!isNoSelect){
if(!colorData.selectDetail.color?.rgba?.r)return
let item = {
hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
id:colorData.selectDetail.color.id,

4
src/component/DetailCopy/detailLeft/colorBox/pallet.vue
View File

@@ -577,7 +577,7 @@ export default defineComponent({
border-radius: 50%;
width: 4rem;
height: 4rem;
border: solid 2px #39215b;
border: solid 2px #000;
display: flex;
align-items: center;
justify-content: center;
@@ -595,7 +595,7 @@ export default defineComponent({
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #39215b;
background: #000;
}
}
}

3
src/component/DetailCopy/detailLeft/index.vue
View File

@@ -47,6 +47,9 @@ export default defineComponent({
}
const setSloganData = (data:any)=>{
detailData.selectDetail.sketchString = data
if(detailData.currentDetailType == 'sketch' && detailData.selectDetail?.newDetail?.sketch){
detailData.selectDetail.newDetail.sketch = null
}
}
return{

1
src/component/DetailCopy/detailLeft/models.vue
View File

@@ -92,6 +92,7 @@ export default defineComponent({
flex-direction: column;
> .detailText{
margin-bottom: 1rem;
text-align: left;
}
> .select_sketch{
width: 100%;

13
src/component/DetailCopy/detailLeft/module/libraryList.vue
View File

@@ -4,7 +4,7 @@
<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" :style="{'width':(level1Type == 'DesignElements'?'100%':'40%')}">
<a-select
v-model:value="designType"
:options="(designTypeList || catecoryList)"
:options="(designTypeList)"
@change="handleChange"
style="width:100%"
size="large"
@@ -113,6 +113,7 @@ import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, react
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
sketchCategory
@@ -146,10 +147,11 @@ export default defineComponent({
emits:['selectImgItem'],
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n()
const detailData = reactive({
isShowLoading:false,//懒加载，加载中
libraryList:[],
designTypeList:[] as any,
designTypeList:computed(()=>props.catecoryList) as any,
designType:'',
searchPictureName:'',
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
@@ -161,7 +163,7 @@ export default defineComponent({
systemList:[],
libraryList:[],
},
systemList:[{name:'System',value:'system',},{name:'Library',value:'library',}],//系统
systemList:[{name:t('libraryList.System'),value:'system',},{name:t('libraryList.Library'),value:'library',}],//系统
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//风格列表
sexList:computed(()=>store.state.UserHabit.sex.value),//风格列表
ageGroupList:computed(()=>store.state.UserHabit.ageGroup),//风格列表
@@ -173,13 +175,16 @@ export default defineComponent({
detailData.mannequinData.style = newValue.style?newValue.style:''
detailData.mannequinData.ageGroup = newValue.ageGroup?newValue.ageGroup:''
},{immediate:true})
watch(()=>detailData.designTypeList.length,(newValue,oldValue)=>{
detailData.designType = detailData.designTypeList[0]?.value?detailData.designTypeList[0]?.value:''
getLibraryList()
})
const getDetailListData = reactive({
total:0,
pageSize:10,
currentPage:1,
})
const init = ()=>{
detailData.designTypeList = props.catecoryList
detailData.designType = detailData.designTypeList[0]?.value?detailData.designTypeList[0]?.value:''
getLibraryList()
}

2
src/component/DetailCopy/detailLeft/module/selectList.vue
View File

@@ -53,6 +53,7 @@ import libraryList from './libraryList.vue'
import uploadList from './uploadList.vue'
import uploadSegmentation from './uploadSegmentation.vue'
import currentList from './currentList.vue'
import { getMinioUrl } from '@/tool/util';
export default defineComponent({
components:{
currentList,
@@ -171,6 +172,7 @@ export default defineComponent({
position: relative;
cursor: pointer;
margin-right: 6.5rem;
font-size: 1.8rem;
}
> .switch_type_item::before {
position: absolute;

1
src/component/DetailCopy/detailLeft/module/uploadList.vue
View File

@@ -85,6 +85,7 @@ export default defineComponent({
level1Type: props.level1Type,
gender:store.state.Workspace.probjects.sex ,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
ageGroup:store.state.Workspace.probjects.ageGroup,
},
token:getCookie("token"),
uploadUrl:getUploadUrl(),

16
src/component/DetailCopy/detailLeft/module/uploadModel.vue
View File

@@ -53,7 +53,7 @@
<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img v-lazy="file.url" :key="file.url" :alt="file.name"/>
<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true"></sketchCategory>
<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true" :upDataType="'element'"></sketchCategory>
</div>
</div>
<div class="upload_item">
@@ -105,7 +105,7 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
uploadList:[],
});
let operationsData = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
});
const getUploadElement = () => {
};
@@ -120,7 +120,11 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
let setOk = () => {
clearData()
};
const upload = ()=>{
const createProbject:any = inject('createProbject',()=>{}) as any
const upload = async ()=>{
if(!operationsData.selectObject?.id)await createProbject()
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*'; // 只允许选择图片文件
@@ -136,7 +140,11 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
let param = new FormData();
param.append('isPin', '0');
param.append('gender', store.state.Workspace.probjects.sex);
param.append('level1Type', 'Sketchboard');
param.append('ageGroup',store.state.Workspace.probjects.ageGroup)
param.append('projectId', operationsData.selectObject.id);
param.append('level1Type', 'De/Reconstruction');
param.append('level2Type', props.deReconstructionList[0].value);
param.append('timeZone', Intl.DateTimeFormat().resolvedOptions().timeZone);
file.forEach((image:any) => {
param.append('file', image);

33
src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
View File

@@ -2,10 +2,11 @@
<template>
<div class="uploadList">
<div class="uploadList_box">
<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
<div class="content_img_item" v-for="(file,index) in uploadList" :key="file.id">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true"></sketchCategory>
<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true" :upDataType="'element'"></sketchCategory>
<i class="fi fi-rr-trash icon_delete" @click="deleteImgItem(file,index)"></i>
</div>
</div>
<div class="upload_item">
@@ -65,7 +66,7 @@ export default defineComponent({
const store = useStore();
const detailData = reactive({
isShowLoading:false,//懒加载，加载中
uploadList:[] as any,
uploadList:computed(()=>store.state.HomeStoreModule.deReconstructionUploadImages) as any,
upload:props.segmentation?
props.segmentation:{
isPin: 0,
@@ -98,6 +99,18 @@ export default defineComponent({
const openUpload = ()=>{
dataDom.uploadModel.init()
}
const deleteImgItem = (item:any,index)=>{
console.log(item)
Https.axiosPost(
Https.httpUrls.elementDelete,
{
id:item.id,
}
).then(res=>{
detailData.uploadList.splice(item.index,1)
})
}
return{
...toRefs(detailData),
...toRefs(dataDom),
@@ -106,6 +119,7 @@ export default defineComponent({
selectImgItem,
openUpload,
setUploadImgList,
deleteImgItem,
}
},
provide() {
@@ -143,6 +157,19 @@ export default defineComponent({
height: 100%;
object-fit: contain;
}
&:hover{
> .icon_delete{
opacity: 1;
}
}
> .icon_delete{
position: absolute;
right: 1rem;
top: 1rem;
font-size: 1.8rem;
cursor: pointer;
opacity: 0;
}
}
}
> .material_content_list_loding{

10
src/component/DetailCopy/detailLeft/sketch.vue
View File

@@ -3,7 +3,8 @@
<div class="detailText">{{$t('DesignPrintOperation.CurrentSketch')}}</div>
<div class="select_sketch" v-if="selectDetail.id">
<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
<img :src="selectDetail.sketchString || selectDetail.path" alt="">
<img :src="selectDetail.path" alt="">
<!-- <img :src="selectDetail.sketchString || selectDetail.path" alt=""> -->
<i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i>
</div>
<div class="select_sketch" v-else>
@@ -11,7 +12,7 @@
<i class="fi fi-rr-picture centent"></i>
</div>
</div>
<selectList @selectImgItem="selectImgItem" level1Type="Sketchboard" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
<selectList @selectImgItem="selectImgItem" source="detail" level1Type="Sketchboard" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
</div>
</template>
<script lang="ts">
@@ -58,10 +59,14 @@ export default defineComponent({
getDetailListDom.libraryList.init()
}
const selectImgItem = (data:any)=>{
console.log(data)
if(data?.imgUrl)data.url = data.imgUrl
let value = {
data,
}
if(detailData.currentDetailType == 'sketch'){
detailData.selectDetail.sketchString = ''
}
store.commit('DesignDetailCopy/setNewDetail',value)
}
const openAddDetail = ()=>{
@@ -96,6 +101,7 @@ export default defineComponent({
flex-direction: column;
> .detailText{
margin-bottom: 1rem;
text-align: left;
}
> .select_sketch{
width: 100%;

30
src/component/DetailCopy/detailRight/editPrintElement.vue
View File

@@ -4,6 +4,7 @@
<div class="overallSlogin">
<div
class="habit_Overal_Single_text"
style="margin-left: 0"
:class="{ active: !overallSingle }"
>
{{ $t('DesignPrintOperation.Overall') }}
@@ -28,9 +29,10 @@
</a-slider>
</div>
</div>
<div class="printElementList" ref="printElementList">
<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
<div class="itemList" :style="{width:prentWidth || 0}">
<div class="imgItem"
v-if="stateOverallSingle == 'single'"
v-for="item in printStyleList[type][stateOverallSingle]"
:key="item"
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
@@ -39,6 +41,15 @@
<img :src="item.path" alt="">
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
</div>
<div class="imgItem"
v-if="stateOverallSingle == 'overall'"
v-for="item in printStyleList[type][stateOverallSingle]"
:key="item"
style="width:14rem;height:14rem;"
>
<img :src="item.path" alt="">
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
</div>
</div>
</div>
<div class="editPrintElementBox">
@@ -83,9 +94,9 @@
<a-spin size="large" />
</div>
</div>
<div class="clearOverall" style="text-align: center; height: 6rem;">
<!-- <div class="clearOverall" style="text-align: center; height: 6rem;">
<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
</div>
</div> -->
</div>
</template>
@@ -161,6 +172,7 @@ export default defineComponent({
}else{
editPrintElementData.stateOverallSingle = 'single'
}
setItemPosition()
}
const formatter = (value:any)=>{
return `${value}%`;
@@ -711,6 +723,7 @@ export default defineComponent({
});
}
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
moveItem()
}
onMounted(()=>{
if(props.type == 'element'){
@@ -828,6 +841,7 @@ export default defineComponent({
flex-direction: column;
> .printOverallBtn{
display: flex;
flex-direction: column;
> .overallSlogin{
align-items: center;
display: flex;
@@ -844,7 +858,6 @@ export default defineComponent({
}
}
.habit_System_Designer {
transform: scale(.8);
align-items: center;
display: flex;
.ant-slider-track,
@@ -920,7 +933,9 @@ export default defineComponent({
transform: translate(-50%,-50%);
display: flex;
justify-content: center;
width: 100%;
// width: 100%;
// max-height: 70%;
width: max-content;
&.active{
flex-direction: row;
}
@@ -933,8 +948,9 @@ export default defineComponent({
>img{
z-index: 2;
position: relative;
height: 100%;
width: 100%;
// height: 100%;
max-width: 100%;
// width: 100%;
}
.designOpenrtion_sketch_mask{

7
src/component/DetailCopy/detailRight/modelsType.vue
View File

@@ -46,10 +46,17 @@ export default defineComponent({
.sketchType{
margin: auto 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
> .detailText{
margin-bottom: 1rem;
text-align: left;
}
> .sketchContent{
flex: 1;
display: flex;
align-items: center;
> img{
width: 100%;
object-fit: contain;

11
src/component/DetailCopy/detailRight/sketchType.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType] || selectDetail.sketchString">
<div class="detailText">{{$t('DesignPrintOperation.NewApparel')}}</div>
<div class="sketchContent">
<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
<img :src="(selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.sketchString)" :title="selectDetail.type" alt="">
</div>
</div>
</template>
@@ -46,10 +46,17 @@ export default defineComponent({
.sketchType{
margin: auto 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
> .detailText{
margin-bottom: 1rem;
text-align: left;
}
> .sketchContent{
flex: 1;
display: flex;
align-items: center;
> img{
width: 100%;
object-fit: contain;

5
src/component/DetailCopy/model/index.vue
View File

@@ -63,7 +63,7 @@ export default defineComponent({
new Promise((resolve, reject) => {
if(
getDetailListData.isEditPattern.value&&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),
@@ -180,6 +180,9 @@ export default defineComponent({
width: 4rem;
height: 4rem;
justify-content: center;
@media (min-width: 1024px) {
font-size: 2.4rem;
}
}
> i:hover{
background: #000000;

3
src/component/DetailCopy/model/modelNav.vue
View File

@@ -67,10 +67,11 @@ export default defineComponent({
})
},{immediate:true})
const selectDetailItem = (item:any,index:number)=>{
console.log(detailData?.getCanvasIfEdit?.fun)
new Promise((resolve, reject) => {
if(detailData.isEditPattern.value &&
detailData.selectDetail?.id &&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),

13
src/component/DetailCopy/model/modelPosition.vue
View File

@@ -24,7 +24,7 @@
<div class="molepositon" :class="{active:imgDesignImg}">
<div class="designOpenrtion_imgMask">
<div class="detail_modal_item_front">
<img :src="designDetail.designItemUrl" alt="">
<img :src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
</div>
</div>
</div>
@@ -295,7 +295,15 @@ export default defineComponent({
}
const getSubmitData = (value:any)=>{
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
return{
scale:value.layersObject[0].scale,
offset:value.layersObject[0].offset,
priority:value.layersObject[0].priority,
}
}
let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
// let arr:any = sort(detailData.frontBack.front)
let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
let num = 10
@@ -413,13 +421,10 @@ export default defineComponent({
img.onload = () => {
// resolve(img)
sacle = el.parentNode.offsetWidth / img.width
console.log(sacle,123)
data.instance.frontBack.front.forEach((item:any,index:number) => {
for (const key in item.style) {
if(key == 'zIndex')return
console.log(item.style[key].replace(/px/g,''))
item.style[key] = item.style[key].replace(/px/g,'')*sacle+'px'
// console.log(item.style[key])
}
for (const key in data.instance.frontBack.back[index].style) {
if(key == 'zIndex')return

4
src/component/HomePage/ColorboardUpload.vue
View File

@@ -1307,7 +1307,7 @@ export default defineComponent({
border-radius: 50%;
width: 4rem;
height: 4rem;
border: solid 2px #39215b;
border: solid 2px #000;
display: flex;
align-items: center;
justify-content: center;
@@ -1325,7 +1325,7 @@ export default defineComponent({
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #39215b;
background: #000;
}
}
}

19
src/component/HomePage/Generate.vue
View File

@@ -240,6 +240,7 @@ export default defineComponent({
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
let printModelList:any = ref([])
let sketchStyleList:any = ref([])
let printModel:any = ref({
@@ -263,6 +264,13 @@ export default defineComponent({
let workspace:any = computed(()=>{
return store.state.Workspace.probjects
})
let upload = ref({
isPin: 0,
level1Type: props.msg,
ageGroup:workspace.ageGroup,
gender: props.gender,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
})
let isGenerate = ref(false)//判断是否正在进行generate
let inputShow = ref(false)//表示是否出现红框
let inputTime = ref()
@@ -370,6 +378,7 @@ export default defineComponent({
...toRefs(speed),
openSpeed,
setSpeed,
upload,
};
},
data(prop) {
@@ -380,12 +389,7 @@ export default defineComponent({
},
spin: true,
}),
upload: {
isPin: 0,
level1Type: prop.msg,
gender: prop.gender,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
@@ -996,6 +1000,7 @@ export default defineComponent({
let param = new FormData();
param.append('inPin','0')
param.append('gender',this.workspace.sex)
param.append('ageGroup',this.workspace.ageGroup)
param.append('level1Type',this.upload.level1Type)
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',e.clipboardData.files[0]);
@@ -1048,7 +1053,7 @@ export default defineComponent({
position: sticky;
top: 0;
padding-top: calc(2rem*1.2);
z-index: 3;
z-index: 7;
}
.generate_checkbox {
}

774
src/component/HomePage/MoodboardUpload.vue
View File

@@ -1,774 +0,0 @@
<template>
<div class="collection_modal_item">
<div class="modal_left Guide_1_1_2" :class="[driver__.driver?'showEvents':'']">
<div class="switch_type_list" :class="[driver__.driver?'hideEvents':'']">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item Guide_1_4"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Generate') }}</span>
</div>
</div>
<div v-show="openClick == 1" class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in fileList"
:key="file"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div
class="delete_file_block"
@click="deleteFile(file)"
>
{{ $t('MoodboardUpload.Delete') }}
</div>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="moodboarList.length < 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:capture="null"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
v-model:file-list="fileList"
:multiple="!driver__.driver"
:maxCount="8 - moodboarList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show=" moodboarList.length < 8"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('MoodboardUpload.Maximum') }}</span>
</div>
<!-- <div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span
>Maximum 10 images can be uploaded, Maximum 2M per
image</span
>
</div> -->
</div>
<Material
v-show="openClick == 2"
ref="Material"
msg="Moodboard"
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Moodboard"
></Generate>
</div>
<div v-show="moodboarList.length" class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>
{{ $t('MoodboardUpload.Thumbnail') }}
</div>
<div class="modal_btn started_btn Guide_1_7" :class="[driver__.driver?'showEvents':'']" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
</div>
<div class="modal_img" :class="[driver__.driver?'hideEvents':'']">
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div>
<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
<div class="modal_text">
<div>{{ $t('MoodboardUpload.selected') }}</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
</div>
<div class="modal_img_max">
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
<img :src="item.imgUrl" v-modelImg>
</div>
</div>
<div v-else class="modal_img">
<img :src="modalImg[0].imgUrl">
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</div>
</div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl,isMoible } from "@/tool/util";
import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue";
import { Https } from "@/tool/https";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue";
import domTurnImg from '@/tool/domTurnImg'
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
import { useI18n } from "vue-i18n";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
components: { Material, MoodTemplate, Generate,layout },
setup() {
const store = useStore()
let lessenList: any = ref([]);
let fileList: any = ref([]);
let showFileList: any = ref([]);
let templateModal: any = ref(false);
let templateFileList: any = ref([]);
let openClick: any = ref(1);
let moodb_className:any = ref([]);
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
let layoutList:any = []//选中后随机生成的list
let layoutOpen = ref(false)
let loadingShow = ref(false)
let modalImg:any= computed(()=>{
return store.state.UploadFilesModule.disposeMoodboard
})
// let driver__:any = computed(()=>{
// return store.state.Guide.guide
// })
let driver__:any = inject('driver__')
let uploading:any = ref([])
let edieShow:any = ref()
let {t} = useI18n()
return {
fileList,
showFileList,
lessenList,
templateModal,
templateFileList,
openClick,
moodb_className,
flex_direction,
layoutList,
layoutOpen,
loadingShow,
modalImg,
driver__,
uploading,
edieShow,
t,
};
},
data() {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
gender:'',
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
moodTemplateId: "", //模板id
store: useStore(),
moodb_:moodb.moodb_,
moodboarList:computed(()=>{
return useStore().state.UploadFilesModule.moodboard
}),
};
},
// watcheffect(){
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
// (v: any) => v.checked == true
// );
// this.store.commit("setMoodboardFile", breviaryList);
// console.log(22);
// },
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
watch:{
driver__:{
handler(newVal,oldVal){
if(newVal.index >= 6 && newVal.index <= 8){
this.open(newVal.index-5)
}else{
}
}
}
},
directives:{
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
}
},
methods: {
open(num: Number) {
this.openClick = num;
if(num ==2 ){
let material:any = this.$refs.Material
material.init('Moodboard')
}else if (num == 3){
// let driver = this.store.state.Guide.guide.driver
// if(this.driver__.driver){
// driverObj__.moveNext()
// }
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'An image of airy, blush-toned fabrics and pale pink'
}else{
// Generate.searchPictureName = ''
}
}
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.imgUrl = res.data.url;
file.resData = res.data;
file.type_ = {
type1:'upload',
type2:'Moodboard'
};
file.id_ = GO.id++
file.id = res.data.id
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
let arr = this.store.state.UploadFilesModule.moodboard
if(arr.length >= 8){
message.info(this.t('MoodboardUpload.jsContent1'))
}else{
this.store.commit("setMoodboardFile", fileList);
}
if(fileList.length >=2){
if(this.driver__.driver){
driverObj__.moveNext()
}
}
}else{
bor = false
}
// this.showFileList = this.fileList
} else if (file.status === "error") {
bor = false
}
if(!bor){
let res:any = JSON.parse(file.xhr.response);
let index = -1;
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.fileList.splice(index, 1);
}
// message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
message.warning(res.errMsg);
}
},
beforeUpload(file: any) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.info(this.t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('MoodboardUpload.jsContent4'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
deleteFile(item: any) {
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
let moodboard
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setMoodboardFile", this.fileList);
}
if(this.store.state.UploadFilesModule.moodboard.length == 0){
this.store.commit("clearMoodTemplateId");
this.layoutList = []
this.edieShow = false
}
},
recollection() {
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardFiles
)
);
let disposeMoodboard = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.disposeMoodboard
)
);
let moodboardPosition = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardPosition
)
);
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard);
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
this.fileList = setboard.moodboard
},
async changeTemplateModal() {
if(this.modalImg[0]?.id){
let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
if(!styleObj.domStyle)await this.layout()
//
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
}
if(window.screen.width<1300){
layout.isMobile = true
}else{
layout.isMobile = false
}
layout.init()
}else{
message.info(this.t('MoodboardUpload.jsContent5'))
}
},
async layout(){
if(this.loadingShow)return
await new Promise((resolve, reject) => {
this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
this.flex_direction = true
}else{
this.flex_direction = false
}
if(this.moodb_[arr.length-1].length != 1){
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
this.loadingShow = false
this.layout()
return resolve('')
}
}
this.edieShow = true
if(this.moodb_[arr.length-1].length == 2){
this.moodb_className = this.moodb_[arr.length-1][0]
}else{
this.moodb_className = this.moodb_[arr.length-1][random]
}
this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(()=>{
let layoutCentent = document.getElementById('modal_img')
let obj = {
imgStyle:[],
domStyle:[],
borStyle:[],
rototeStyle:[],
translateStyle:[],
angleTRStyle:[],
angleTLStyle:[],
angleBRStyle:[],
angleBLStyle:[],
class:this.moodb_className,
}
this.store.commit("setDisposeMoodboardPosition", obj);
domTurnImg(layoutCentent).then((rv)=>{
let file = rv
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('gender','')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
this.loadingShow = false
resolve('')
}
).catch(rv=>{
this.loadingShow = false
})
if(this.driver__.driver){
driverObj__.moveNext()
}
})
})
})
},
setmoodbClass(val:any){
this.moodb_className = val
}
},
});
</script>
<style lang="less" scoped>
.collection_modal_item {
// padding: 1.5rem 2.6rem 4rem;
height: 100%;
display: flex;
.modal_left {
padding-top: calc(4rem*1.2);
width: 47%;
display: flex;
flex-direction: column;
flex-shrink: 0;
// width: 50rem*1.2);
.switch_type_list {
display: flex;
align-items: center;
position: relative;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
}
.moodboard_body {
padding-top: calc(2.5rem*1.2);
flex: 1;
height: calc(30rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: column;
&.moodboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body {
height: 100%;
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
margin-left: calc(3rem*1.2);
display: flex;
min-width: calc(57rem*1.2);
flex-direction: column;
overflow: hidden;
.modal_layout,.modal_accomplish{
.modal_text{
font-size:var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
text-align: center;
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
overflow: hidden;
img{
width: auto;
height: 100%;
max-width: 100%;
object-fit: cover;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
height: calc(30rem*1.2);
display: flex;
flex: 1;
flex-direction: column;
.modal_text{
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.modal_img_max{
// flex: 1;
// width: calc(57rem*1.2);
// height: calc(35rem*1.2);
width: 100%;
aspect-ratio: 1.62 / 1;
position: relative;
.mark_loading{
position: absolute;
}
}
.modal_img{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
position: relative;
>img{
// height: 100%;
width: 100%;
max-height: 100%;
object-fit: contain;
}
&.active{
flex-direction: row;
}
.modal_imgItem{
position: relative;
overflow: hidden;
text-align: center;
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
.wh1{
width: 23%;
height: 48%;
}
.wh4{
width: 48.5%;
height: 100%;
}
.wh8{
width: 100%;
height: 48.5%;
}
.w1h2{
width: 23%;
height: 100%;
}
.w2h1{
width: 48.5%;
height: 48%;
}
}
}
}
}
</style>

940
src/component/HomePage/PrintboardUpload.vue
View File

@@ -1,940 +0,0 @@
<template>
<div class="printboard_upload_modal">
<div class="printboard_left_upload">
<div class="left_upload_header">
<div class="upload_header_item">
<div class="switch_type_list">
<div
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
</div>
<div
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
</div>
<div
class="switch_type_item Guide_1_2_1"
:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
>
<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
</div>
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span> </div>
<ul v-show="openMenu">
<li
v-for="item,index in printCatecoryList"
class="printModel_item"
@click.stop="setSceneList(item)"
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
>{{ item.name }}</li>
</ul>
</div>
</div>
</div>
</div>
<div v-show="openClick == 1" class="printboard_body">
<div class="upload_img_body">
<div class="upload_item">
<div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
<div class="upload_file_img_block">
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
<a-spin :indicator="indicator" tip="Uploading..."/>
</div>
<div class="upload_file_item_content" v-show="file?.status === 'done'">
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
<div class="delete_like_file_block" @click.stop="deleteFile(file)">
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
</div>
<!-- <div class="pin_block" v-show="file?.status === 'done'">
<a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div> -->
</div>
<div class="upload_file_item upload_component" v-show="printboardList.length < 16">
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
list-type="picture-card"
:before-upload="beforeUpload"
:data="{
...upload
}"
:headers="{Authorization:token}"
v-model:file-list="fileList"
:customRequest="function(){}"
:multiple="!driver__.driver"
:maxCount="16 - printboardList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div
class="upload_tip_block"
v-show="printboardList.length < 16"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('PrintboardUpload.Maximum') }}</span>
</div>
</div>
<Material v-show="openClick == 2"
ref="Material"
msg="Printboard"
@setLibrary = setSetchboardGenerate
@confirmSelect="confirmSelect"
:disignTypeList="printCatecoryList"
></Material>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<!-- <div class="modal_img">
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div> -->
</div>
<div class="modal_accomplish">
<div class="modal_img">
<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="printCatecoryList" :generateList="printboardList" :isSpread="true" :item="item" ></sketchCategory>
<!-- 在sketch 和print暂时关闭like -->
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like || item.libraryChecked" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</div> -->
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>
</div>
</div>
<!-- 取消请求 -->
<scaleImage ref="scaleImage"></scaleImage>
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
</div>
</template>
<script lang="ts">
import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl} from '@/tool/util'
import {useStore} from 'vuex'
import { Https } from "@/tool/https";
import { Modal,message,Upload} from 'ant-design-vue';
import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n';
import { openGuide,driverObj__ } from "@/tool/guide";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import axios from 'axios'
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
export default defineComponent({
components:{
Cropper,
Material,
Generate,
scaleImage,
generalMenu,
sketchCategory,
},
setup(){
let store:any =useStore()
let fileList:any = ref([]),//选中的文件id数据
printImgList:any = ref([]), //print的印花图片
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
let openClick: any = ref(1);
let driver__:any = inject('driver__')
let {t} = useI18n()
let isTest = ref()
let userInfo:any = {}
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:''
})
let workspace:any = ref({})
let scene = ref({
name:'Pattern',
value:'Pattern'
})
let openMenu = ref(false)
let printCatecoryList:any = computed(()=>{
return store.state.UserHabit.printType
})
let printboardList = computed(()=>{
return store.state.UploadFilesModule.printboard
})
return {
fileList,
printImgList,
moodBoards,
openClick,
driver__,
t,
isTest,
userInfo,
useGenerate,
workspace,
scene,
openMenu,
printCatecoryList,
printboardList,
}
},
computed:{
},
watch:{
},
data(){
return {
swtich_type:'upload',
indicator : h(LoadingOutlined, {
style: {
fontSize: '2.4rem*1.2)',
},
spin: true,
}),
upload:{
isPin:0,
gender:'',
level1Type:'Printboard',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token:'',
uploadUrl:'',
store:useStore(),
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
currentFileNum:0, //当前上传的文件数
isUpload:false,
isTextarea:false,
isInputFocus:false,
}
},
mounted(){
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.token = getCookie('token') || ''
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl()
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'Elegant floral print for high-fashion attire'
}else{
Generate.searchPictureName = ''
}
},
methods:{
setSetchboardGenerate(item:any){
this.useGenerate.imgId = item.imgId
this.useGenerate.imgUrl = item.imgUrl
this.useGenerate.level2Type = item.level2Type
this.useGenerate.designType = item.designType
let Material:any = this.$refs.Material
let generate:any = this.$refs.Generate
if(item.designType == 'collection'){
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
open(num: Number) {
this.openClick = num;
let material:any = this.$refs.Material
if(num == 2){
material.init('Printboard')
}
if(num == 3){
this.scene = this.printCatecoryList[0]
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
fileUploadChange(data:any){
let file = data.file
// let res = JSON.parse(data?.xhr?.response);
file.id_ = GO.id++
file.type_ = {
type1:'upload',
type2:'Printboard'
};
file.pin = false;
// file.id = res.data.id?res.data.id:""
let Cropper:any = this.$refs.Cropper
if(this.currentFileNum === 1){
var reader = new FileReader();
reader.onload = (e:any) => {
let data_new;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data_new = e.target.result;
}
Cropper.getOptionImg(data_new)
};
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file.originFileObj);
this.cropperFileData = file
Cropper.changeShowModal(true)
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}else{
this.customRequest(file)
}
},
beforeUpload(file:any,fileList:any){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.info(this.t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('PrintboardUpload.jsContent2'));
}
if(isJpgOrPng && isLt2M){
this.currentFileNum = fileList.length
}else{
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}
},
deleteFile(item:any){
// this.fileList.splice(item, 1)
// this.store.commit('setPrintboardFile',this.fileList)
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.printboardFiles
let moodboard
this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setPrintboardFile", this.fileList);
}
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Printboard",
level2Type: item.categoryValue,
gender:this.workspace.sexEnum.value,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
item.like = true
}
).catch(res=>{
});
}else{
let data = {
generateDetailId:item.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
(rv) => {
item.like = false
}
).catch(res=>{
});
}
},
customRequest(data:any){
let new_data = {
...this.upload,
file:data.originFileObj
}
let fileUid = data.uid
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
if (rv) {
for(let file of this.fileList){
if(fileUid === file.uid){
file.status = 'done'
file.imgUrl = rv.url
file.pin = false
file.id = rv.id
file.category = this.printCatecoryList[0].name
file.categoryValue = this.printCatecoryList[0].value
file.resData = rv
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
this.store.commit('setPrintboardFile',fileList)
}
}
).catch((res)=>{
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(fileUid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
});
},
closeCropper(type:any){
if(this.isUpload){
return
}
if(type == 'error'){
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(this.cropperFileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
}
let Cropper:any = this.$refs.Cropper
Cropper.closeCropper()
},
deletUploadFile(){
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(this.cropperFileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
},
handleCropperSuccess(event:any){
let {file, fileData} =event
let new_data = {
...this.upload,
file:file
}
if(this.isUpload){
return
}
this.isUpload = true
const hide = message.loading('loading', 0);
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
for(let file of this.fileList){
if(fileData.uid === file.uid){
file.status = 'done'
file.imgUrl = rv.url
file.id = rv.id
file.resData = rv
file.category = this.printCatecoryList[0].name
file.categoryValue = this.printCatecoryList[0].value
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
this.isUpload = false
this.closeCropper('success')
this.cropperFileData = {name:'',uid:''}
this.store.commit('setPrintboardFile',fileList)
hide()
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
).catch(res=>{
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(fileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
this.cropperFileData = {name:'',uid:''}
this.isUpload = false
this.closeCropper('error')
hide()
});
},
recollection(){
this.useGenerate = {
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:'',
}
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.printCatecoryList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.name
v.categoryValue=item.value
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setPrintboardGenerateFiles", setboard.generate);
this.store.commit("setPrintboardMaterialFiles", setboard.material);
this.store.commit("setPrintboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
// this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
this.store.commit('setPrintboardFile',this.fileList)
// this.store.commit('setGeneratePrintFile',this.printImgList)
},
confirmSelect(event:any){
for(let item of event){
let data = {
imgUrl:item.url,
resData:item,
pin:false,
id:item.id,
status:'done',
}
if(this.fileList.length == 15){
message.warning(this.t('PrintboardUpload.jsContent3'))
break
}
this.fileList.push(data)
}
this.store.commit('setPrintboardFile',this.fileList)
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.isLike = false
scaleImage.init(this.printboardList,index)
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.searchPictureName = ''
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
}
})
</script>
<style lang="less" scoped>
.printboard_upload_modal{
// padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
height: 100%;
display: flex;
.printboard_left_upload{
display: flex;
flex-direction: column;
padding-top: calc(4rem*1.2);
width: 47%;
.switch_type_list {
display: flex;
align-items: center;
position: relative;
z-index: 11;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-top: auto;
position: relative;
margin-left: 2rem;
>div{
width: 14rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
margin-left: 1rem;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 14rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.printboard_body{
display: flex;
flex-direction: column;
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
&.printboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body{
height: calc(100% - 3rem*1.2);
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar {
display: none;
}
}
.upload_file_item{
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
text-align: center;
img{
width: auto;
object-fit: cover;
height: 100%;
max-width: 100%;
}
.upload_file_img_block{
height: 100%;
}
&.upload_component{
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
width: auto;
max-width: 100%;
object-fit: cover;
}
&:hover .delete_like_file_block{
display: block;
}
}
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout{
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: row;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
text-align: center;
overflow: hidden;
img{
width: auto;
height: 100%;
object-fit: cover;
max-width: 100%;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
overflow-x: hidden;
height: calc(30rem*1.2);
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.mark_loading{
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
}
// overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.modal_img{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
align-content: flex-start;
.modal_imgItem:hover .delete_like_file_block{
// display: block;
opacity: 1;
}
.modal_imgItem{
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
display: inline-block;
// width: calc(10rem*1.2);
// height: calc(10rem*1.2);
width: 30rem;
height: 30rem;
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
text-align: center;
&.modal_imgItem:nth-child(even) {
margin-right: 0;
}
img{
object-fit: cover;
height: 100%;
max-width: 100%;
width: auto;
}
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
img {
}
.pin_block{
pointer-events:none;
}
.delete_like_file_block{
pointer-events:none
}
}
}
}
}
}
}
</style>

913
src/component/HomePage/SketchboardUpload.vue
View File

@@ -1,913 +0,0 @@
<template>
<div class="sketchboard_upload_modal">
<div class="modal_left">
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('SketchboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('SketchboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item Guide_1_9"
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
>
<span>{{ $t('SketchboardUpload.Generate') }}</span>
</div>
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
</div>
<ul v-show="openMenu">
<li
v-for="item,index in sketchStyleList"
class="printModel_item"
@click.stop="setSceneList(item)"
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
>{{ item.name }}</li>
</ul>
</div>
</div>
<div v-show="openClick == 1" class="sketchboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in fileList"
:key="file"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
<div
class="delete_like_file_block"
@click.stop="deleteFile(file)"
>
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
<!-- <div
class="pin_block"
v-show="file?.status === 'done'"
>
<a-checkbox v-model:checked="file.pin"
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
>
</div> -->
</div>
<div
class="upload_file_item upload_component"
v-show="sketchboardList.length < 20"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
list-type="picture-card"
:data="{
...upload,
}"
:multiple="!driver__.driver"
:before-upload="beforeUpload"
:headers="{ Authorization: token }"
v-model:file-list="fileList"
:maxCount="20 - sketchboardList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show="sketchboardList.length < 20"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
</div>
</div>
<Material
v-show="openClick == 2"
ref="Material"
msg="Sketchboard"
@confirmSelect="confirmSelect"
:disignTypeList="sketchCatecoryList"
@setLibrary = setSetchboardGenerate
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Sketchboard"
:gender="upload.gender"
:scene="scene"
:sketchCatecoryList="sketchCatecoryList"
></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<!-- <div class="modal_img modal_img_x" v-mousewheel>
<div class="mousewheel">
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div> -->
</div>
<div class="modal_accomplish">
<div class="modal_img">
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
<!-- 在sketch 和print暂时关闭like -->
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</div> -->
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>
</div>
</div>
<scaleImage ref="scaleImage"></scaleImage>
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import GO from "@/tool/GO";
import { useStore } from "vuex";
import { message, Upload, Modal } from "ant-design-vue";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
components: { Material, Generate,scaleImage,sketchCategory },
setup() {
let fileList: any = ref([
]);
let openClick: any = ref(1);
let store:any =useStore()
let sketchCatecoryList:any = computed(()=>{
return store.state.Workspace.probjects.positionList
})
let sketchCatecoryAllList:any = computed(()=>{
return store.state.Workspace.workspaceAllPosition
})
let workspace:any = ref({})
let sketchboardList:any = computed(()=>{
return store.state.UploadFilesModule.sketchboard
})
let {t} = useI18n()
let driver__:any = inject('driver__')
let isTest = ref()
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:'',
})
let openMenu = ref(false)
let sketchStyleList:any = computed(()=>{
return store.state.UserHabit.SketchGenerateType
})
let scene = ref({
name: t('SketchboardUpload.GenerateSketch'),
value:'generate'
})
return {
fileList,
openClick,
store,
sketchCatecoryList,
sketchCatecoryAllList,
workspace,
sketchboardList,
t,
driver__,
isTest,
useGenerate,
scene,
openMenu,
sketchStyleList,
};
},
data() {
return {
swtich_type: "upload",
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
level1Type: "Sketchboard",
gender:'',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
workspaceCom:{},
isTextarea:false,
isInputFocus:false,
};
},
computed: {
getSketchLabel(value) {
return (value: any) => {
let lable = "";
for (let item of this.sketchCatecoryList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
},
directives:{
mousewheel:{
mounted (el) {
// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
let dom:any = document.getElementsByClassName('modal_img_x')
let mouseover = ()=>{
// bodyDom.classList.add('active')
}
let mouseleave = ()=>{
// bodyDom.classList.remove('active')
}
dom.forEach((item:any) => {
item.addEventListener('mouseover',mouseover)
item.addEventListener('mouseleave',mouseleave)
});
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},true)
}
}
},
watch:{
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.upload.gender = newVal?.sexEnum?.value
},
sketchboardList:{
handler(newVal:any,oldVal:any){
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
if(this.driver__.driver){
// driverObj__.moveTo(22)
}
}
}
},
driver__:{
handler(newVal,oldVal){
if(newVal.index >= 15 && newVal.index <= 16){
if(this.driver__.driver){
// driverObj__.moveTo(15)
}
}else{
}
}
}
},
mounted() {
this.token = getCookie("token") || "";
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
}else{
Generate.searchPictureName = ''
}
},
methods: {
setSetchboardGenerate(item:any){
this.useGenerate.imgId = item.imgId
this.useGenerate.imgUrl = item.imgUrl
this.useGenerate.level2Type = item.level2Type
this.useGenerate.designType = item.designType
let Material:any = this.$refs.Material
let generate:any = this.$refs.Generate
if(item.designType == 'collection'){
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
open(num: Number) {
this.openClick = num;
if (num == 2) {
let material: any = this.$refs.Material;
material.init("Sketchboard");
} else if (num == 3) {
// let Generate:any = this.$refs.Generate
// Generate.init('generate')
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.isLike = false
scaleImage.init(this.sketchboardList,index)
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
let category:any={
value:'',
name:'',
}
this.sketchCatecoryList.forEach((item:any) => {
if(item.value == res.data.level2Type){
category.value = item?.value
category.name = item?.name
}
});
file.imgUrl = res.data.url;
file.resData = res.data;
// file.pin = false;
//category用来数据处理
file.categoryValue = category?.value;
file.category = category?.name;
file.categoryShow = false;
file.id_ = GO.id++
file.id = res.data.id
file.type_ = {
type1:'upload',
type2:'Sketchboard'
};
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
this.store.commit("setSketchboardFile", fileList);
}else{
bor = false
}
} else if (file.status === "error") {
bor = false
}
if(!bor){
let index = -1;
let res:any = JSON.parse(file.xhr.response);
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.fileList.splice(index, 1);
}
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
message.warning(res.errMsg);
}
},
beforeUpload(file: any) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.info(this.t('SketchboardUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('SketchboardUpload.jsContent3'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
deleteFile(item: any) {
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
let moodboard
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setSketchboardFile", this.fileList);
}
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Sketchboard",
level2Type: item.categoryValue?item.categoryValue:item.level2Type,
gender:this.workspace.sexEnum.value,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
item.like = true
}
).catch(res=>{
});
}else{
let data = {
generateDetailId:item.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
(rv) => {
item.like = false
}
).catch(res=>{
});
}
},
recollection() {
this.useGenerate = {
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:''
}
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.sketchboardFiles
)
);
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.sketchCatecoryAllList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.name
v.categoryValue=item.value
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
this.store.commit("setSketchboardMaterialFiles", setboard.material);
this.store.commit("setSketchboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
},
confirmSelect(event: any) {
for (let item of event) {
let data = {
imgUrl: item.url,
resData: item,
pin: false,
status: "done",
category: item.level2Type || "Outwear",
categoryShow: false,
};
if (this.fileList.length == 15) {
message.warning(
this.t('SketchboardUpload.jsContent4')
);
break;
}
this.fileList.push(data);
}
this.store.commit("setSketchboardFile", this.fileList);
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.searchPictureName = ''
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
},
});
</script>
<style lang="less" scoped>
.sketchboard_upload_modal {
height: 100%;
display: flex;
.modal_left {
padding-top: calc(4rem*1.2);
width: 47%;
display: flex;
flex-direction: column;
.switch_type_list {
display: flex;
align-items: center;
position: relative;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-left: 2rem;
margin-top: auto;
position: relative;
>div{
width: 18rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
margin-left: 1rem;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 18rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.sketchboard_body {
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: column;
&.moodboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body {
height: calc(100% - 3rem*1.2);
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar {
display: none;
}
}
.upload_file_item{
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
img{
width: 100%;
height: 100%;
}
&.upload_component {
border: none;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
max-width: 100%;
}
&:hover .delete_like_file_block{
// display: block;
opacity: 1;
}
}
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
// overflow-x: hidden;
display: flex;
flex-direction: row;
overflow-y: hidden;
&.modal_img::-webkit-scrollbar {
display: none;
}
.mousewheel{
display: flex;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
text-align: center;
cursor: pointer;
overflow: hidden;
flex-shrink: 0;
img{
// width: 100%;
width: auto;
height: 100%;
object-fit: contain;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
overflow-x: hidden;
height: calc(30rem*1.2);
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.mark_loading{
position: absolute;
z-index: 99;
}
// overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: calc(2rem*1.2);
padding-block:calc(2rem*1.2);
}
.input_box{
z-index: 1;
input{
&.forbidden{
cursor:not-allowed;
}
}
}
.modal_img{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
position: relative;
.modal_imgItem{
margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
width: 30rem;
height: 30rem;
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
text-align: center;
&.modal_imgItem:nth-child(even) {
margin-right: 0;
}
&:hover .delete_like_file_block{
display: block;
opacity: 1;
}
img{
object-fit: contain;
width: 100%;
height: 100%;
}
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
// img {
// }
.operate_file_block{
pointer-events:none
}
.pin_block{
pointer-events:none
}
.delete_like_file_block{
pointer-events:none
}
}
}
}
}
}
}
</style>

86
src/component/HomePage/generalMenu.vue
View File

@@ -15,42 +15,44 @@
</div>
<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
</div>
<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth}">
<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
<a-popover placement="right" v-if="isCanvas">
<template #content>
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
<a-upload
style="height: 100%;"
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</i>
</div> -->
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth,...ulStyle}">
<div>
<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
<a-popover placement="right" v-if="isCanvas">
<template #content>
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
<a-upload
style="height: 100%;"
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</i>
</div> -->
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
</template>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</a-popover>
<div v-else>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</div>
</li>
</template>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</a-popover>
<div v-else>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</div>
</li>
</div>
</ul>
</div>
</template>
@@ -91,6 +93,10 @@ import { message, Upload, Modal } from "ant-design-vue";
type:Object,
default:{}
},
ulStyle:{
type:Object,
default:{}
},
selectWidth:{
type:String,
default:'20rem'
@@ -241,12 +247,16 @@ import { message, Upload, Modal } from "ant-design-vue";
}
ul{
position: absolute;
border: 1px solid;
width: 20rem;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
z-index: 10;
overflow: hidden;
z-index: 3;
border-radius: calc(1rem*1.2);
> div{
overflow-y: auto;
height: 100%;
}
li{
// background: rgba(0,0,0,.2);
background: #fff;

2
src/component/HomePage/productImg.vue
View File

@@ -16,7 +16,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>

25
src/component/HomePage/renew.vue
View File

@@ -206,23 +206,24 @@
</div>
</div>
<div class="gallery_btn gallery_btn_radius" @click="payment">
{{ $t("Renew.Continue") }}
{{ $t("upgradePlan.Continue") }}
</div>
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
<label>
<!-- <input type="checkbox" v-model="clause" /> -->
<span class="generalModelDescription"
>{{ $t("upgradePlan.policy")}}
<!-- <a
<a
href="https://code-create.com.hk/aida-terms-and-conditions/"
target="_blank"
>{{ $t("upgradePlan.policy2") }}</a
>{{ $t("upgradePlan.policy3")}}
target="_blank">
{{ $t("upgradePlan.policy1") }}
</a>
&
<a
href="https://code-create.com.hk/aida-subscription-agreement/"
target="_blank"
>{{ $t("upgradePlan.policy4") }}</a
> -->
target="_blank">
{{ $t("upgradePlan.policy2") }}
</a>
<!-- . * -->
</span
>
@@ -233,6 +234,10 @@
<label class="payIcon">
<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
<img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="">
<img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="">
<img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="">
<img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="">
</label>
</div>
<!-- <div class="paySecure">
@@ -300,7 +305,7 @@ export default defineComponent({
value: "Month",
label: "Monthly",
},
PaymentType: "",
PaymentType: "CreditCard",
promotionData: {
code: "",
error: "",
@@ -918,7 +923,7 @@ export default defineComponent({
border-radius: 10px;
cursor: pointer;
padding: 0.3rem 4rem;
background: #39215b;
background: #000;
color: #fff;
border: none;
margin: 0 2rem;

146
src/component/HomePage/scaleImage.vue
View File

@@ -14,7 +14,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
@@ -26,7 +26,7 @@
</div>
<div class="scaleImage_content">
<div v-if="isProductimg" class="productImg_modal">
<div class="productImg_left">
<div class="productImg_left generalModel_state">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
@@ -34,26 +34,27 @@
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.SelectionFunction')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction generalModel_state_item" style="margin-bottom: 1rem;">
<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_similarity ">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_similarity ">
<a-slider class="system_silder"
v-model:value="productimgSimilarity"
:tooltipVisible="false"
:step="5"
@afterChange="()=>{}"
:max="70"
>
</a-slider>
<input type="number" readonly v-model="productimgSimilarity">
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgSimilarity">
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction generalModel_state_item">
<!-- <a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
@@ -61,7 +62,7 @@
:step="5"
>
</a-slider> -->
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
<a-select size="large" style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
@@ -75,28 +76,33 @@
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="productimgBrightenValue">
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<input
<!-- <input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="productimgSearchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
<textarea
ref="textarea"
class="textarea "
:placeholder="$t('Generate.inputContent1')"
@input="ifMaximumLength"
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
<textarea
v-show="productimgIsTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
</div>
<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value == 'flux'">
<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
</div>
<div class="generage_btn_box" style="margin-left: auto;">
<div class="generage_btn started_btn" v-show="!productimgIsProductimg">
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
@@ -130,7 +136,7 @@
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
<img v-else :style="{'max-width':maxWidth}" :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
<!-- <div class="img_operate_block" v-if="isLike">
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
@@ -189,6 +195,10 @@ export default defineComponent({
type:String,
default:''
},
maxWidth:{
type:String,
default:'50rem'
},
},
setup(props:any,{emit}) {
const store = useStore();
@@ -198,6 +208,7 @@ export default defineComponent({
let {t} = useI18n()
let productimg = reactive({
UpgradePlan:null,
textarea:null as any,
isProductimg:false,
productimgSearchName:'',
productimgIsTextarea:false,
@@ -226,24 +237,24 @@ export default defineComponent({
],
toPorductImg:[
{
title:'Generate with high quality',
label:'High',
relightLabel:'Relight',
value:'',
},{
title:'',
label:'FLUX',
relightLabel:'Edit',
value:'flux',
},{
title:'Generate with high quality',
label:'High',
relightLabel:'Relight',
value:'',
},
]
},
speedState:false,
speedData:{
title:'Generate high-quality images',
relightLabel:'Relight',
label:'High',
value:'',
title:'',
label:'FLUX',
relightLabel:'Edit',
value:'flux',
},
})
const openSpeed = ()=>{
@@ -449,6 +460,20 @@ export default defineComponent({
loadingShow.value = false
});
}
const ifMaximumLength = async ()=>{
await nextTick()
let textarea = productimg.textarea;
if(!textarea)return
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
// 3. 重置高度为1行
textarea.style.height = lineHeight + 'px';
// 4. 计算实际需要的高度
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
}
return {
t,
...toRefs(productimg),
@@ -469,6 +494,7 @@ export default defineComponent({
getPrductimg,
removeProductimg,
submitBase64Data,
ifMaximumLength,
};
},
data() {
@@ -508,6 +534,8 @@ export default defineComponent({
}
this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
document.addEventListener('keydown',this.setKeydown)
this.$nextTick()
this.ifMaximumLength()
},
cancelDsign(){
this.scaleImage = false
@@ -595,19 +623,12 @@ export default defineComponent({
overflow: visible !important;
}
</style>
<style lang="less">
<style lang="less" >
.scaleImage_modal {
.ant-modal-body {
display: flex;
flex-direction: column;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
}
}
.scaleImage_content{
display: flex;
justify-content: center;
@@ -619,11 +640,14 @@ export default defineComponent({
position: relative;
left: 0;
z-index: 9;
width: 24%;
.productImg_left{
width: 100%;
display: flex;
height: 100%;
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
.input_box_btnBox{
width: 100%;
}
@@ -638,6 +662,56 @@ export default defineComponent({
justify-content: space-around;
margin-top: 0;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
margin-bottom: 1rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
:deep(.generalMenu_printModel){
margin: 0;
width: 100%;
> div,> ul{
width: 100%;
}
}
.productImg_content_item_title_menubtn{
font-size: 1.6rem;
font-weight: 500;
}
}
&.productImg_content_item_title_similarity{
// margin-bottom: 8rem;
}
}
.productImg_content_item_Direction{
padding-bottom: 1rem;
margin-right: 0;
margin-bottom: 1rem;
}
.selectText{
margin-bottom: 2rem;
display: flex;
width: 100%;
> div{
background: #efeff1;
width: 100%;
font-size: 1.6rem;
margin-right: 1.2rem;
border-radius: 1.6rem;
cursor: pointer;
padding: 1.2rem;
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover{
background: #f5f5f5;
}
&:first-child{
margin-right: 0;
}
}
}
.productImg_content_item_similarity{
padding-bottom: 2.4rem;
display: flex;

35
src/component/HomePage/sketchCategory.vue
View File

@@ -72,6 +72,10 @@ export default defineComponent({
type:Boolean,
default:false,
},
upDataType:{
type:String,
default:'library',
},
isSpread:{
type:Boolean,
default:false,
@@ -123,16 +127,29 @@ export default defineComponent({
}
let setSketchLibrary = (item:any)=>{
let data = {
libraryId:[item.id],
level2Type:item.categoryValue,
if(props.upDataType == 'element'){
let data = {
elementId:item.id,
level2Type:item.categoryValue,
}
Https.axiosGet(Https.httpUrls.updateElementLevel2Type,{params:data}).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});
}else{
let data = {
libraryId:[item.id],
level2Type:item.categoryValue,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});
}
onMounted(()=>{
if(!props.item.category){

12
src/component/LibraryPage/brandDetail.vue
View File

@@ -64,7 +64,7 @@
<div style="margin-left:2rem;" @click="deleteBatchPic" class="gallery_btn">{{$t('brandDNA.Delete')}}</div>
</div>
<div class="imgBox">
<Falls ref="fall" @loadend="isShowMark = false" :itemWidth="200" :isScroll="false" :isText="false"></Falls>
<Falls :isGsap="false" ref="fall" :isDelete="true" @deleteSinglePic="deleteSinglePic" :deleteList="selectImgList" @loadend="isShowMark = false" :itemWidth="200" :isScroll="false" :isText="false"></Falls>
<div class="page_loading_box" v-show="!isNoData" style="text-align: center;width: 100%;">
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
<span v-show="isShowMark">
@@ -168,6 +168,7 @@ export default defineComponent({
// getLibraryList()
rv.canvasUrl = rv.minIOPath
dataDom.fall.push([rv]);
data.isNull = false
data.isShowMark = false
}
).catch((res)=>{
@@ -364,7 +365,7 @@ export default defineComponent({
}
});
}
const deleteSinglePic = (data:any,index:any)=>{
const deleteSinglePic = ({data,index})=>{
Modal.confirm({
title: t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
@@ -378,6 +379,10 @@ export default defineComponent({
});
}
const confirmDeletePic = (value:any,index:any,nData:any)=>{
data.currentPage = 0
data.isNoData = false
data.isNull = false
data.isShowMark = false
let libraryIds = value ? [value.id] : data.selectImgList
let newData = {
libraryIds:libraryIds,
@@ -387,8 +392,9 @@ export default defineComponent({
if(nData)newData = nData
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
(rv: any) => {
getLibraryList()
dataDom.fall.clearData()
data.selectImgList = []
// getLibraryList()
}
).catch((res)=>{
});

2
src/component/LibraryPage/createBrand.vue
View File

@@ -72,7 +72,7 @@
</div>
<div class="right">
<div class="item">
<div class="text">{{ $t('brandDNA.BrandName') }}</div>
<div class="text">{{ $t('brandDNA.BrandTextarea') }}</div>
<textarea v-model="generateText" :placeholder="$t('brandDNA.textarea')"></textarea>
</div>
<div class="btn">

8
src/component/LoginPage/googleLogin.vue
View File

@@ -88,6 +88,8 @@
position: relative;
border-radius: 4rem;
overflow: hidden;
border: .1rem solid;
background: transparent;
:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
justify-content: center;
.nsm7Bb-HzV7m-LgbsSe-Bz112c{
@@ -116,7 +118,7 @@
cursor: pointer;
box-sizing: border-box;
position: relative;
background: #fff;
background: transparent;
pointer-events: none;
&:hover{
background: #f8faff;
@@ -137,7 +139,9 @@
overflow: hidden;
top: 0;
left: 0;
// opacity: 0;
opacity: 0;
.S9gUrf-YoZ4jf{
}
:deep(.S9gUrf-YoZ4jf){
width: 100%;
height: 100%;

10
src/component/LoginPage/login/enterprise.vue
View File

@@ -689,13 +689,14 @@ export default defineComponent({
.generalModel_state {
> .generalModel_state_item {
:deep(.ant-select-selector) {
border: 0.1rem solid #dfdfdf;
border: .1rem solid #000;
background: transparent;
border-radius: 2.5rem;
height: 5rem !important;
width: 100%;
box-sizing: border-box;
&:hover {
border: 0.1rem solid #000;
border: .1rem solid #000;
}
}
}
@@ -728,7 +729,8 @@ export default defineComponent({
width: 100%;
height: 5rem;
margin-top: 1rem;
border: 0.1rem solid #dfdfdf;
border: .1rem solid #000;
background: transparent;
border-radius: 2.5rem;
padding-left: 2.1rem;
line-height: 5rem;
@@ -737,7 +739,7 @@ export default defineComponent({
outline: none;
transition: all 0.3s;
&:hover {
border: 0.1rem solid #000;
border: .1rem solid #000;
}
&::placeholder {
color: #a5b0c2;

5
src/component/LoginPage/login/personal.vue
View File

@@ -699,7 +699,8 @@ export default defineComponent({
width: 100%;
height: 5rem;
margin-top: 1rem;
border: 0.1rem solid #dfdfdf;
border: .1rem solid #000;
background: transparent;
border-radius: 2.5rem;
padding-left: 2.1rem;
line-height: 5rem;
@@ -708,7 +709,7 @@ export default defineComponent({
outline: none;
transition: all 0.3s;
&:hover {
border: 0.1rem solid #000;
border: .1rem solid #000;
}
&::placeholder {
color: #a5b0c2;

8
src/component/LoginPage/login/school.vue
View File

@@ -692,8 +692,9 @@ export default defineComponent({
.generalModel_state {
> .generalModel_state_item {
:deep(.ant-select-selector) {
border: 0.1rem solid #dfdfdf;
border-radius: 2.5rem;
border: 0.1rem solid #000;
background: transparent;
border-radius: 2.5rem;
height: 5rem !important;
width: 100%;
box-sizing: border-box;
@@ -731,7 +732,8 @@ export default defineComponent({
width: 100%;
height: 5rem;
margin-top: 1rem;
border: 0.1rem solid #dfdfdf;
border: 0.1rem solid #000;
background: transparent;
border-radius: 2.5rem;
padding-left: 2.1rem;
line-height: 5rem;

2
src/component/LoginPage/weiXinLogin.vue
View File

@@ -53,7 +53,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dadce0;
border: .1rem solid #000;
border-radius: 4rem;
padding: 0.5rem 3rem;
cursor: pointer;

30
src/component/Pay/payMethod.vue
View File

@@ -110,18 +110,22 @@
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
<label>
<input type="checkbox" v-model="clause" />
<span class="generalModelDescription"
>{{ $t("upgradePlan.policy1")
}}<a
href="https://code-create.com.hk/aida-terms-and-conditions/"
target="_blank"
>{{ $t("upgradePlan.policy2") }}</a
>{{ $t("upgradePlan.policy3")
}}<a
href="https://code-create.com.hk/aida-subscription-agreement/"
target="_blank"
>{{ $t("upgradePlan.policy4") }}</a
>. *</span
<span class="generalModelDescription"
>{{ $t("upgradePlan.policy")}}
<a
href="https://code-create.com.hk/aida-terms-and-conditions/"
target="_blank">
{{ $t("upgradePlan.policy1") }}
</a>
&
<a
href="https://code-create.com.hk/aida-subscription-agreement/"
target="_blank">
{{ $t("upgradePlan.policy2") }}
</a>
<!-- . * -->
</span
>
>
</label>
</div>
@@ -438,7 +442,7 @@ export default defineComponent({
border-radius: 10px;
cursor: pointer;
padding: 0.3rem 4rem;
background: #39215b;
background: #000;
color: #fff;
border: none;
margin: 0 2rem;

2
src/component/Pay/payOrder.vue
View File

@@ -16,7 +16,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>

68
src/component/WorksPage/Falls.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="Falls">
<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
<div class="falls_item" :class="{'active':!isText}" v-fadeIn="{isScroll:isScroll,isGsap:isGsap}" v-for="item,index in list" :key="item.id"
:style="{
width: item.style.width + 'px',
height: item.style.height + 'px',
@@ -9,14 +9,16 @@
}"
>
<!-- 图片 -->
<div class="falls_item_img">
<div class="falls_item_img" :class="{active:deleteList.indexOf(item.id) > -1}">
<img
v-lazy="item.canvasUrl"
@click="setItemDetail(item)"
:style="{
height: item.style.imgHeihgt + 'px',
}"
/>
<i class="fi fi-rr-trash icon_delete" @click="deleteSinglePic(item,index)"></i>
<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
</div>
@@ -75,12 +77,25 @@ export default defineComponent({
type:Boolean,
default:true,
},
isGsap:{
type:Boolean,
default:true,
},
itemWidth:{
type:Number,
default:300,
}
},
isDelete:{
type:Boolean,
default:false,
},
deleteList:{
type:Array,
default:()=>[],
},
},
setup(){
emit:['deleteSinglePic','getImgScale'],
setup(props,{emit}){
let list = ref([])
let wait_list = ref([])
let width = ref(300)
@@ -91,6 +106,25 @@ export default defineComponent({
let loading = ref(false)
let computedHeight = 0
let imgDom = ref()
const selectImg = (item)=>{
if(!props.isDelete)return
let index = props.deleteList.indexOf(item.id)
if(index > -1){
props.deleteList.splice(index,1)
}else{
props.deleteList.push(item.id)
}
}
const deleteSinglePic = (data,index)=>{
emit('deleteSinglePic',{data,index})
}
const setItemDetail = (data)=>{
if(props.isDelete){
selectImg(data)
}else{
emit('getImgScale',data)
}
}
return{
list,
wait_list,
@@ -102,13 +136,17 @@ export default defineComponent({
loading,
computedHeight,
imgDom,
selectImg,
setItemDetail,
deleteSinglePic,
}
},
directives:{
fadeIn:{
mounted (el,binding) {
if(!binding.value.isGsap)return
let dom
if(binding.value){
if(binding.value.isScroll){
dom = document.querySelector('.works_page .page_content')
}else{
dom = document.querySelector('.homeRecommend_content_body')
@@ -304,27 +342,45 @@ export default defineComponent({
border-radius: 2rem;
overflow: hidden;
padding-bottom: var(--paddingBottom);
&.active{
padding: 0;
}
&.falls_item:hover{
.falls_item_img{
img{
transform: scale(1.1);
}
> i{
display: flex;
}
}
}
.falls_item_img{
cursor: pointer;
width: 100%;
overflow: hidden;
border-radius: 2rem;
&.active{
border: 2px solid;
}
> i{
position: absolute;
top: 1rem;
right: 1rem;
display: none;
font-size: 2rem;
}
img{
width: 100%;
object-fit: cover;
height: 100%;
transition: all .3s;
}
.falls_item_user_Original{
font-weight: 600;
font-size: 12px;
color: #39215b;
color: #000;
background: #c9a2ff;
padding: 0 5px;
border-radius: 4px;

4
src/component/WorksPage/newScaleImage.vue
View File

@@ -802,7 +802,7 @@ export default defineComponent({
align-items: flex-start;
.scaleImage_chunk_title_Original{
color: #39215b;
color: #000;
background: #c9a2ff;
padding: 0 1rem;
border-radius: 4px;
@@ -812,7 +812,7 @@ export default defineComponent({
span{
&.active{
cursor: pointer;
color: #39215b;
color: #000;
text-decoration: underline;
}
}

6
src/component/WorksPage/newScaleImageMobile.vue
View File

@@ -628,7 +628,7 @@ export default defineComponent({
}
.swiper-pagination{
.swiper-pagination-bullet-active{
background: #39215b;
background: #000;
}
}
.generalModel_closeIcon{
@@ -737,7 +737,7 @@ export default defineComponent({
width: 100%;
align-items: flex-start;
.scaleImage_chunk_title_Original{
color: #39215b;
color: #000;
background: #c9a2ff;
padding: 0 1rem;
border-radius: 4px;
@@ -747,7 +747,7 @@ export default defineComponent({
span{
&.active{
cursor: pointer;
color: #39215b;
color: #000;
text-decoration: underline;
}
}

2
src/component/WorksPage/publish.vue
View File

@@ -15,7 +15,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>

66
src/component/home/batchGeneration/createCloud.vue
View File

@@ -75,10 +75,7 @@
show-search
allowClear
:show-arrow="false"
:default-active-first-option="false"
:not-found-content="null"
:filter-option="false"
style="width: 16rem"
style="width: 200px"
:placeholder="$t('batchGeneration.PleaseSelect')"
:options="objectList"
@search="getHistoryProjectList"
@@ -227,7 +224,7 @@
:headers="{ Authorization: getCookie('token') }"
:before-upload="beforeUpload"
:data="{
projectId:projectData
projectId:projectData?.value?projectData?.value:''
}"
v-model:file-list="fileList"
:multiple="true"
@@ -304,7 +301,10 @@ export default defineComponent({
numberOfImages: "",
credits: 0,
exhibitionImgList: [], //选择的图片
projectData: null, //批量id
projectData: {
id:'',
name:'',
}, //批量id
objectList: [],
porjectName: "", //任务名字
//toProduct
@@ -312,6 +312,7 @@ export default defineComponent({
similarity: [20, 40],
brightenValue: 1, //亮度
relightDirection: "Right Light", //打光方向
sequence:'',
relightDirectionList: [
{
value: "Right Light",
@@ -337,10 +338,15 @@ export default defineComponent({
const getUploadElement = () => {
operations.loadingShow = true;
let value = {
id: operationsData.projectData,
id: operationsData.projectData?.value,
moduleList: ["uploadElement"],
};
operationsData.placeholder = "Batch_" + setPlaceholder();
let str = setPlaceholder()
if(!str){
str = props.cloudList.filter((item)=>item.value == operationsData.buildType)[0].label
str = str.replace(/\s+/g, '_')
}
operationsData.placeholder = "Batch_" + str + '_' + operationsData.sequence;
Https.axiosPost(Https.httpUrls.getModuleContent, value)
.then(async (rv) => {
operationsData.uploadElement = rv.uploadElement;
@@ -350,17 +356,18 @@ export default defineComponent({
operations.loadingShow = false;
});
};
let init = (projectData, buildType) => {
let init = (projectData, buildType,sequence) => {
operationsData.sequence = sequence
operations.operationsModal = true;
clearData();
if (projectData?.id) {
operationsData.projectData = {
label: projectData.name,
label: projectData.label,
value: projectData.id,
};
getUploadElement();
}
if (buildType.value) operationsData.buildType = buildType;
if (buildType.value) operationsData.buildType = buildType.value;
};
const clearData = () => {
operationsData.porjectName = "";
@@ -370,17 +377,28 @@ export default defineComponent({
operationsData.fileList = [];
operationsData.uploadElement = [];
};
const changeProject = () => {
const changeProject = (rv) => {
let porjectData = operationsData.objectList.find(
(item) => item.id === rv
);
operationsData.projectData = {
value: porjectData?.id,
label: porjectData?.name,
}
getUploadElement();
};
const changeBuildType = () => {
// operationsData.exhibitionImgList = []
operationsData.projectData = null;
operationsData.projectData = {
label:'',
value:'',
};
props.cloudList.forEach((item) => {
if (item.value == operationsData.buildType) {
operationsData.credits = item.consumption;
}
});
getUploadElement();
getHistoryProjectList();
};
const getGenerateCloudImgList = (type) => {
@@ -399,7 +417,9 @@ export default defineComponent({
if (type == "POSE_TRANSFER") {
obj = {
poseId: 1,
elementId: item.id,
productImage: getMinioUrl(item.imgUrl),
elementType: item.type?item.type:"ProductElement",
};
} else {
obj = {
@@ -474,7 +494,8 @@ export default defineComponent({
return {
buildType: buildTypeCorresponding[operationsData.buildType],
nums: operationsData.numberOfImages,
projectId: operationsData.projectData,
sequence:operationsData.sequence,
projectId: operationsData.projectData?.value?operationsData.projectData?.value:'',
name: operationsData.porjectName || operationsData.placeholder,
//productimg
toProductImage: {
@@ -483,7 +504,7 @@ export default defineComponent({
operationsData.buildType
), //选择的图片
// toProductImageVOList:getPorductImg(),//选择的图片
projectId: operationsData.projectData,
projectId: operationsData.projectData?.value?operationsData.projectData?.value:'',
direction: operationsData.relightDirection, //打光方向
brightenValue: operationsData.brightenValue,
imageStrength: (100 - getImageStrength()) / 100,
@@ -498,8 +519,8 @@ export default defineComponent({
operationsData.buildType == "POSE_TRANSFER"
? getGenerateCloudImgList("POSE_TRANSFER")
: [],
private: operationsData.projectData,
ToProductImageDTO: operationsData.projectData,
private: operationsData.projectData?.value,
ToProductImageDTO: operationsData.projectData?.value,
};
};
let cancelDsign = () => {
@@ -523,13 +544,13 @@ export default defineComponent({
return message.warning("Please select or upload the picture first.");
// if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
}
if (operationsData.buildType == "DESIGN" && !operationsData.projectData)
if (operationsData.buildType == "DESIGN" && !operationsData.projectData?.value)
return message.warning("Please select a project");
if (
!data.buildType ||
!data.nums ||
!data.name ||
(operationsData.buildType == "DESIGN" && !operationsData.projectData)
(operationsData.buildType == "DESIGN" && !operationsData.projectData?.value)
)
return message.warning("Please check the input box marked with *");
operations.loadingShow = true;
@@ -539,7 +560,7 @@ export default defineComponent({
operations.loadingShow = false;
cancelDsign();
let porjectData = operationsData.objectList.find(
(item) => item.id === operationsData.projectData
(item) => item.id === operationsData.projectData?.value
);
let project = {
value: porjectData?.id,
@@ -625,9 +646,10 @@ export default defineComponent({
}
};
const setPlaceholder = () => {
if (!operationsData.projectData) return "";
if(operationsData.projectData?.label)return operationsData.projectData.label
if (!operationsData.projectData?.value) return "";
let index = operationsData.objectList.findIndex(
(item) => item.id === operationsData.projectData
(item) => item.id === operationsData.projectData?.value
);
return operationsData.objectList[index].name;
};

72
src/component/home/batchGeneration/index.vue
View File

@@ -55,14 +55,14 @@
<input type="text" v-model="renameText">
<i class="fi fi-br-check" @click="submitRename(row)"></i>
</div>
<div v-else style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<div v-else :title="header?.fun?header.fun(row[header.value]) : row[header.value]" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 15rem;">
{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
</div>
</div>
<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="setRename(row)">
{{$t('batchGeneration.Rename')}}
</span>
<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="detailIamge(row)">
<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" :style="{opacity:row.status == 1?1:.5}" v-show="header.value == 'operation'" @click="detailIamge(row)">
{{$t('batchGeneration.Review')}}
</span>
<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="deleteRom(row)">
@@ -177,6 +177,10 @@ export default defineComponent({
// sketchDesign:[]
},
cloudTiltleList:[
{
name:computed(()=>t('batchGeneration.sequence')),
value:'sequence',
},
{
name:computed(()=>t('batchGeneration.TaskName')),
value:'name',
@@ -205,6 +209,7 @@ export default defineComponent({
},
{
name:computed(()=>t('batchGeneration.StartTime')),
value:'startTime',
fun:(value:any)=>{
//没开始内容为 -
if(!value)return
@@ -243,8 +248,21 @@ export default defineComponent({
const dataDom = reactive({
createCloud,
})
const getNextSequence = ()=>{
return new Promise((resolve, reject) => {
data.loadingShow = true
Https.axiosGet(Https.httpUrls.getNextSequence).then((rv)=>{
data.loadingShow = false
data.isGetContentList = false
resolve(rv)
}).catch(()=>{
data.loadingShow = false
resolve('')
})
})
}
const createClound = ()=>{
data.isGetContentList = false
let obj = {}
if(data.createData){
data.generateList.seriesDesign.forEach((item:any)=>{
@@ -253,8 +271,10 @@ export default defineComponent({
}
})
}
dataDom.createCloud.init(data.createData,obj)
console.log(obj)
getNextSequence().then((rv)=>{
dataDom.createCloud.init(data.createData,obj,rv)
})
}
const createData = ()=>{
store.commit("createProbject");
@@ -274,6 +294,17 @@ export default defineComponent({
buildType:item.buildType,
}
createData()
if(item.buildType == 'design'){
router.push(`/home?history=${item.projectId}&source=batch`)
}else if(item.buildType == 'toProductImage'){
router.push(`/home/tools?tools=toProduct&id=${item.projectId}&source=batch`)
}else if(item.buildType == 'relight'){
router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
}else if(item.buildType == 'poseTransfer'){
router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
}
data.isGetContentList = false
return
Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
if(item.buildType == 'design'){
store.commit('addDesignCollectionList',rv.design)
@@ -294,19 +325,6 @@ export default defineComponent({
// store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
}
// if(rv.design && rv.design.length > 0){
// store.commit('addDesignCollectionList',rv.design)
// emit('retrieve','design')
// }else if(rv.toProductImage && rv.toProductImage.length > 0){
// store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
// emit('retrieve','toProduct')
// }else if(rv.relight && rv.relight.length > 0){
// store.commit('setCloudList',{str:'relight',list:rv.relight})
// emit('retrieve','relight')
// }else if(rv.poseTransfer && rv.poseTransfer.length > 0){
// store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
// emit('retrieve','poseTransfer')
// }
data.isGetContentList = false
})
}
@@ -412,14 +430,22 @@ export default defineComponent({
onBeforeUnmount(()=>{
data.isGetContentList = false
})
onMounted(()=>{
data.isGetContentList = true
watch(()=>route.query.id,(newValue,oldValue)=>{
if(route.query?.id){
data.projectData = {
value:route.query?.id,
label:route.query?.name,
}
data.createData = {
label:route.query?.name,
id:route.query?.id,
process:route.query?.process
}
createClound()
}
},{immediate:true})
onMounted(()=>{
data.isGetContentList = true
getContentList()
// if(route.query?.type == 'creation')dataDom.createCloud.init(data.projectData)
})
@@ -510,7 +536,11 @@ export default defineComponent({
line-height: 4.6rem;
font-size: 2rem;
color: #666666;
width: calc(100% / 4);
// width: calc(100% / 4);
width: 20rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}
}

24
src/component/home/chat/index.vue
View File

@@ -3,7 +3,7 @@
<div class="top" :class="{active:!isChattingRecords}" @click="()=>{isChattingRecords=!isChattingRecords}">
<i class="fi fi-br-angle-small-down"></i>
</div>
<div v-show="!openChat" class="left" @click="()=>{openChat = !openChat;isChattingRecords=true}">
<div v-show="!openChat" class="left" @click="leftOpenChat('left')">
<i class="fi fi-br-angle-small-down"></i>
</div>
<div class="chatBox">
@@ -17,7 +17,7 @@
<div class="text" v-show="item.content.think || item.content.message || item.content.img || item.content.color">
<span class="content">
<div class="showThink" :class="{active:item.content?.isThink}" v-show="item.content.think" @click="()=>item.content?.isThink?(item.content.isThink = false):(item.content.isThink = true)">
<div>已深度思考</div>
<div>{{ $t('chat.DeepThinking') }}</div>
<i class="fi fi-br-angle-small-down"></i>
</div>
<div class="think" v-show="item.content?.isThink">{{item.content.think}}</div>
@@ -48,7 +48,7 @@
</div>
</div>
<div class="content" @click="openChattingRecords">
<textarea ref="textarea" @input="inputText($event)" @keydown.enter.prevent="sendChat" placeholder="Write your message"></textarea>
<textarea ref="textarea" @input="inputText($event)" @keydown.enter.prevent="sendChat" :placeholder="$t('chat.message')"></textarea>
<div class="btn">
<div class="uploadBox">
<div class="filList">
@@ -60,7 +60,7 @@
<i class="fi fi-rs-paperclip-vertical">
<input type="file" @change="handleFileUpload($event)">
</i>
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">{{ $t('chat.DeepThinking') }}</div>
</div>
<div class="sendBox">
<div class="maxNum">{{ chatContent?.length }}/10000</div>
@@ -71,7 +71,7 @@
</div>
</div>
</div>
<div v-show="openChat" class="right" @click="()=>{openChat = !openChat;isChattingRecords=false}">
<div v-show="openChat" class="right" @click="leftOpenChat('right')">
<i class="fi fi-br-angle-small-down"></i>
</div>
</div>
@@ -97,7 +97,7 @@ export default defineComponent({
const route = useRoute()
const data = reactive({
chatContent:'',
openChat:false,
openChat:computed(()=>store.state.Workspace.openChat),
chatList:[
] as any,
isChattingRecords:false,
@@ -114,7 +114,7 @@ export default defineComponent({
watch(()=>data.selectObject.id,(newValue,oldValue)=>{
if(newValue && (data.selectObject.httpType == 'SERIES_DESIGN' || data.selectObject.httpType == 'SINGLE_DESIGN')){
data.chatList = []
if(route.query?.chatMode == 'true')data.openChat = true
if(route.query?.chatMode == 'true')store.commit('setOpenChatStatus',true)
if(route.query?.create)return
nextTick(()=>{
@@ -329,6 +329,15 @@ export default defineComponent({
})
}
const leftOpenChat = (str:string)=>{
if(str == 'left'){
data.isChattingRecords=true
store.commit('setOpenChatStatus',true)
}else{
data.isChattingRecords=false
store.commit('setOpenChatStatus',false)
}
}
return{
...toRefs(dataDom),
...toRefs(data),
@@ -338,6 +347,7 @@ export default defineComponent({
handleFileUpload,
deleteFile,
imgError,
leftOpenChat,
}
},
provide() {

13
src/component/home/design/collection.vue
View File

@@ -135,7 +135,7 @@ export default defineComponent({
value[str] = data[str]
if(!value[str] || value[str]?.length == 0)return
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
if(rv?.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
})
})
}
@@ -224,10 +224,15 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.collectionModal{
:deep(.ant-modal-body){
padding-top: 10rem;
:deep(.collection){
> .ant-modal-content{
.ant-modal-body{
padding-top: 10rem;
}
}
}
.collection_title{
top: calc(4rem*1.2);
display: flex;

4
src/component/home/design/collection/ColorboardUpload.vue
View File

@@ -1341,7 +1341,7 @@ export default defineComponent({
border-radius: 50%;
width: 4rem;
height: 4rem;
border: solid 2px #39215b;
border: solid 2px #000;
display: flex;
align-items: center;
justify-content: center;
@@ -1359,7 +1359,7 @@ export default defineComponent({
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #39215b;
background: #000;
}
}
}

7
src/component/home/design/collection/PrintboardUpload.vue
View File

@@ -148,11 +148,11 @@
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
<i v-if="item.pin" class="fi fi-rr-check"></i>
<i v-else class="fi noCheck"></i>
<span>PIN</span>
<span>{{ $t('PrintboardUpload.PIN') }}</span>
</label>
</div>
<div class="moreBox" @click.stop>
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
<more level1Type="Printboard" :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
</div>
</div>
</div>
@@ -839,7 +839,8 @@ export default defineComponent({
}
}
.modal_layout{
padding-bottom: 4.8rem;
padding-bottom: 2.8rem;
// padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);

8
src/component/home/design/collection/SketchboardUpload.vue
View File

@@ -90,6 +90,7 @@
:data="{
...upload,
gender:workspace.sex,
ageGroup:workspace.ageGroup,
}"
:multiple="!driver__.driver"
:before-upload="beforeUpload"
@@ -168,11 +169,11 @@
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
<i v-if="item.pin" class="fi fi-rr-check"></i>
<i v-else class="fi noCheck"></i>
<span>PIN</span>
<span>{{ $t('PrintboardUpload.PIN') }}</span>
</label>
</div>
<div class="moreBox" @click.stop>
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
<more level1Type="Sketchboard" :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
</div>
</div>
</div>
@@ -783,7 +784,8 @@ export default defineComponent({
}
}
.modal_layout{
padding-bottom: 4.8rem;
// padding-bottom: 4.8rem;
padding-bottom: 2.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);

16
src/component/home/design/collection/more.vue
View File

@@ -20,6 +20,7 @@
</div>
</div>
</div>
<modalCanvas ref="modalCanvas" @setSloganData="saveBase64Img"></modalCanvas>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -29,14 +30,17 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { downloadIamge } from "@/tool/util";
import modalCanvas from "@/component/modules/generalModalCanvas.vue";
export default defineComponent({
components:{
modalCanvas,
},
props:{
moreList:{type:Array,default:()=>[]},
item:{type:Object,default:()=>{}},
index:{type:Number,default:0},
level1Type:{type:String,default:''},
},
emits:['deleteFile','scaleImage'],
setup(props,{emit}) {
@@ -46,6 +50,7 @@ export default defineComponent({
})
const dataDom = reactive({
modalCanvas:null as any
})
const openList = ()=>{
data.show = true
@@ -59,20 +64,25 @@ export default defineComponent({
if(str == 'delete'){
emit("deleteFile",props.item);
}else if(str == 'edit'){
emit("scaleImage",props.index);
console.log(props.item)
dataDom.modalCanvas.init(props.item,'')
}else if(str == 'down'){
console.log(props.item);
downloadIamge(props.item.url)
downloadIamge(props.item.url || props.item.imgUrl)
}else if(str == 'enlargement'){
emit("scaleImage",props.index);
}
setShow()
}
const saveBase64Img = (rv)=>{
console.log(rv)
}
return{
...toRefs(dataDom),
...toRefs(data),
openList,
setMore,
saveBase64Img,
}
},

664
src/component/home/design/editDesignType/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-modal
class="scaleImage_modal generalModel"
class="editDesignType_modal generalModel"
v-model:visible="scaleImage"
:footer="null"
width="78%"
@@ -26,7 +26,7 @@
</div>
<div class="scaleImage_content" v-if="scaleImage">
<div class="productImg_modal">
<div class="productImg_left">
<div class="productImg_left generalModel_state">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
@@ -34,27 +34,28 @@
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.SelectionFunction')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction generalModel_state_item" style="margin-bottom: 1rem;">
<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_similarity ">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_similarity ">
<a-slider class="system_silder"
v-model:value="productimgSimilarity"
:tooltipVisible="false"
:step="5"
:max="70"
@afterChange="()=>{}"
>
</a-slider>
<input type="number" readonly v-model="productimgSimilarity">
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgSimilarity">
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction generalModel_state_item">
<a-select size="large" style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
@@ -68,31 +69,37 @@
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="productimgBrightenValue">
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
</div>
<div class="input_border productImg_content_item_generate" v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'">
<div class="input_box">
<div class="input_box_btnBox">
<input
<div class="input_box_btnBox" style="height: auto;">
<!-- <input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="productimgSearchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
<textarea
ref="textarea"
class="textarea "
:placeholder="$t('Generate.inputContent1')"
@input="ifMaximumLength"
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
<textarea
v-show="productimgIsTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
</div>
<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value == 'flux'">
<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
</div>
<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
<div class="head">
<div class="text">Choose pose</div>
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
</div>
<div class="imgBox" v-mousewheel>
<div class="item" v-for="item,index in poseList" @click="setSelectPose(item,index)">
@@ -110,29 +117,29 @@
</div>
</div>
<div class="generage_btn_box" style="margin-left: auto;">
<div class="generage_btn started_btn" v-show="!generateSuccess.productimgIsProductimg">
<div class="generage_btn started_btn" v-show="!productimgIsProductimg">
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :class="{active:speedState}" @click.stop="openSpeed"></div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
</div>
<div class="generage_btn started_btn" v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg">
<div class="generage_btn started_btn" v-show="productimgIsProductimg && !productimgRemProductimg">
<i class="fi fi-br-loading" ></i>
</div>
<div class="generage_btn started_btn" v-show="generateSuccess.productimgRemProductimg" @click="removeProductimg">
<div class="generage_btn started_btn" v-show="productimgRemProductimg" @click="removeProductimg">
{{$t('Generate.Close')}}
</div>
</div>
<!-- <div class="productImg_content_item_generate_btn input_border">
<div class="input_box">
<div v-show="!generateSuccess.productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
{{ $t('Generate.Generate') }}
</div>
<div v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
<div v-show="productimgIsProductimg && !productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="generateSuccess.productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
<div v-show="productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
@@ -140,27 +147,26 @@
</div>
</div>
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl || generateSuccess?.productImage">
<div class="loadBox" v-show="generateSuccess">
<div class="load" v-show="generateSuccess.productimgIsProductimg">
<img v-if="isComparison" :src="selectGenerate?.sourceUrl || selectGenerate?.productImage">
<div class="loadBox" v-show="selectGenerate">
<div class="load" v-show="productimgIsProductimg">
<a-spin size="large" class="content_img_flex"></a-spin>
</div>
<div class="imgBox" v-show="!generateSuccess.productimgIsProductimg">
<img v-show="scaleImageList[scaleImageIndex]?.resultType !='PoseTransfer'" :src="generateSuccess?.newData?.designOutfitUrl || generateSuccess?.designOutfitUrl || generateSuccess?.url" alt="">
<div class="imgBox" v-show="!productimgIsProductimg">
<img v-show="selectGenerate?.resultType !='PoseTransfer'" :src="generateCourse?.url || selectGenerate?.url" alt="">
<img
v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'"
:src="generateSuccess.newData?.firstFrameUrl || generateSuccess.firstFrameUrl"
v-show="selectGenerate?.resultType == 'PoseTransfer'"
:src="generateCourse?.firstFrameUrl || selectGenerate?.firstFrameUrl"
alt=""
@mouseenter.stop="gifPlay($event,generateSuccess.newData || generateSuccess)"
@mouseleave.stop="gifPause($event,generateSuccess.newData || generateSuccess)"
@mouseenter.stop="gifPlay($event,generateCourse || selectGenerate)"
@mouseleave.stop="gifPause($event,generateCourse || selectGenerate)"
>
</div>
</div>
<div class="img_operate_block" v-if="isLike">
<!-- <div class="img_operate_block" v-if="isLike">
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
</div>
</div> -->
</div>
</div>
<!-- <div class="scaleImage_nav">
@@ -214,7 +220,7 @@ props:{
default:''
},
},
emits:['addGenerateImg','setGenerateAwait'],
emits:['addGenerateImg','upDataDesignLikeList'],
setup(props:any,{emit}) {
const store = useStore();
let userDetail:any= computed(()=>{
@@ -224,6 +230,7 @@ setup(props:any,{emit}) {
let productimg = reactive({
isGenerate:false,//判断是否进行generate
UpgradePlan:null,
textarea:null as any,
productimgSearchName:'',
productimgIsTextarea:false,
productimgRemProductimg:false,
@@ -234,9 +241,16 @@ setup(props:any,{emit}) {
productimgRelightDirection:props.productData.RelightDirection,
productimgRelightDirectionList:props.productData.RelightDirectionList,
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
generateSuccess:null as any,//生成成功后返回的数据
likeDesignCollectionList:computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
}),
selectGenerate:null as any,//生成成功后返回的数据
poseList:[],
selectPose:null as any,
openType:'',
scaleImageIndex: 0,
scaleImageList:[],
generateCourse:null as any,
})
let speed = reactive({
speedList:[
@@ -289,37 +303,39 @@ setup(props:any,{emit}) {
speed.speedState = false
}
let scaleImage: any = ref(false);
let isShowMark = ref(false)
let loadingShow = ref(false)
let isComparison = ref(false)
const visible = ref<boolean>(false);
const setVisible = (value:any): void => {
visible.value = value;
};
let scaleImageList:any = ref([
])
let scaleImageMask:any = ref(false)
let scaleImageIndex:any = ref(0)
let isLike:any = ref(true)
let robotAssits:any = ref(0)
//procuctimg
let remPrductimgTime:any = null
let prductimgTime:any = null
const getData = ()=>{
let obj = null as any
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
console.log(productimg.scaleImageList[productimg.scaleImageIndex])
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
obj = {
elementId:scaleImageList.value[scaleImageIndex.value].designOutfitId||scaleImageList.value[scaleImageIndex.value].elementId,
elementId:productimg.scaleImageList[productimg.scaleImageIndex].designOutfitId||productimg.scaleImageList[productimg.scaleImageIndex].elementId,
elementType:'DesignOutfit',
parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
}
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'Relight'){
obj = {
elementId:scaleImageList.value[scaleImageIndex.value].designItemId || scaleImageList.value[scaleImageIndex.value].id,
elementType:'ToProductImage',
if(productimg.scaleImageList[productimg.scaleImageIndex]?.relationType == "Design"){
delete obj.userLikeSortId
}
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'Relight'){
obj = {
elementId:productimg.scaleImageList[productimg.scaleImageIndex].designItemId || productimg.scaleImageList[productimg.scaleImageIndex].id || productimg.scaleImageList[productimg.scaleImageIndex],
elementType:'ToProductImage',
parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
}
}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
}
return obj
@@ -328,11 +344,15 @@ setup(props:any,{emit}) {
return {
poseId:productimg.selectPose,
projectId:productimg.selectObject.id,
productImage:getMinioUrl(scaleImageList.value[scaleImageIndex.value].sourceUrl),
productImage:getMinioUrl(productimg.scaleImageList[productimg.scaleImageIndex].sourceUrl),
modelName:speed.speedData.value,
parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
isDefaultLike:true,//表示是否生成就like
}
}
let getPrductimg = ()=>{
let getPrductimg = async ()=>{
let obj = getData()
let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
let data:any ={
@@ -343,44 +363,72 @@ setup(props:any,{emit}) {
brightenValue:productimg.productimgBrightenValue,
projectId:productimg.selectObject.id,
imageStrength:(100 - imageStrength)/100,
ageGroup:productimg.selectObject.ageGroup
ageGroup:productimg.selectObject.ageGroup,
isDefaultLike:true,//表示是否生成就like
}
// return
productimg.generateSuccess.productimgIsProductimg = true
// productimg.generateSuccess.remPrductimgTime = setTimeout(()=>{
// productimg.generateSuccess.productimgRemProductimg = true
// remPrductimgTime = setTimeout(()=>{
// productimg.productimgRemProductimg = true
// },10000)
let url = Https.httpUrls.relight
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
url = Https.httpUrls.toProduct
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
url = Https.httpUrls.poseTransform
await new Promise((res,reject)=>{
Modal.confirm({
title: t('poseTransfer.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
res('')
},
cancel(){
reject()
}
});
}).then(()=>{
}).catch(()=>{
return
})
data = getPoseTransformData()
}
productimg.productimgIsProductimg = true
// setPrductimg([{taskId:"f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83"}])
// return
productimg.generateSuccess.isShowMark = true
Https.axiosPost(url, data).then(
(rv) => {
productimg.generateSuccess.productimgRemProductimg = true
productimg.generateSuccess.isShowMark = false
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
productimg.productimgRemProductimg = true
productimg.scaleImageList[productimg.scaleImageIndex].imgUrl = '/image/loading.gif'
let arr:any = []
if(scaleImageList.value[scaleImageIndex.value]?.resultType != 'PoseTransfer'){
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
arr.push(rv.taskId)
}else{
rv.forEach((item:any)=>{
arr.push(item.taskId)
})
}else{
arr.push(rv)
}
productimg.generateCourse = {
...rv[0],
parentId:productimg.selectGenerate?.parentId || productimg.selectGenerate.userLikeGroupId,
sourceUrl:productimg.selectGenerate?.sourceUrl || productimg.selectGenerate?.productImage,
status:null,
resultType:productimg.selectGenerate?.resultType,
}
setPrductimg(arr)
productimg.isGenerate = true
}
).catch(res=>{
productimg.generateSuccess.isShowMark = false
productimg.generateSuccess.productimgIsProductimg = false
clearInterval(productimg.generateSuccess.remPrductimgTime)
productimg.generateSuccess.productimgRemProductimg = false
productimg.productimgIsProductimg = false
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
if(res.errCode === 2){
Modal.confirm({
title: res.errMsg,
@@ -408,92 +456,63 @@ setup(props:any,{emit}) {
let dataNum = dataList.length
let state = true
let url = Https.httpUrls.relightResult
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
url = Https.httpUrls.toProductImageResult
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
url = Https.httpUrls.poseTransformResult
data = {
taskId:dataList[0],
}
data = dataList
}
// url = Https.httpUrls.poseTransformResult
// data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
productimg.generateSuccess.prductimgTime = setInterval(()=>{
prductimgTime = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(url, data).then(
(rv) => {
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
rv = [rv]
}
state = true
if(productimg.generateSuccess.productimgIsProductimg){//防止取消后有正在执行的获取状态
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
if(productimg.productimgIsProductimg){//防止取消后有正在执行的获取状态
let isEnd = false
if(rv[0].status == 'Success'){
// let id = productimg.generateSuccess?.designItemId || rv[0].id
// rv[0].id = id
// let listType = productimg.generateSuccess.listType
rv[0].sourceUrl = productimg.generateSuccess.sourceUrl
rv[0].designOutfitUrl = rv[0].url
productimg.generateSuccess.newData = rv[0]
console.log(productimg.generateSuccess.newData)
if(!scaleImage.value){
productimg.generateSuccess.status = 'add'
setCove()
}
// productimg.generateSuccess.listType = listType
productimg.generateCourse.url = rv[0].url
productimg.generateCourse.designOutfitUrl = rv[0].url
isEnd = true
clearInterval(productimg.generateSuccess.remPrductimgTime)
clearInterval(remPrductimgTime)
}else if(rv[0].status == 'Fail'){
message.info(t('ProductImg.jsContent3'))
isEnd = true
productimg.generateCourse = null
}
generateProceedList = data
if(!scaleImage.value){
let awaitData = {awaitId:productimg.generateSuccess.awaitId,parentId:productimg.generateSuccess.parentId,listType:productimg.generateSuccess.listType,taskId:generateProceedList[0]}
emit('setGenerateAwait',awaitData)
}
if(isEnd){
store.state.store.dispatch('getCredits')
clearInterval(productimg.generateSuccess.prductimgTime)
clearInterval(productimg.generateSuccess.remPrductimgTime)
productimg.generateSuccess.productimgRemProductimg = false
productimg.generateSuccess.productimgIsProductimg = false
delete productimg.generateSuccess.productimgIsProductimg
delete productimg.generateSuccess.productimgRemProductimg
delete productimg.generateSuccess.remPrductimgTime
delete productimg.generateSuccess.prductimgTime
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
productimg.productimgIsProductimg = false
}
}
}
).catch(res=>{
clearInterval(productimg.generateSuccess.prductimgTime)
clearInterval(productimg.generateSuccess.remPrductimgTime)
productimg.generateSuccess.productimgIsProductimg = false
productimg.generateSuccess.productimgRemProductimg= false
delete productimg.generateSuccess.productimgIsProductimg
delete productimg.generateSuccess.productimgRemProductimg
delete productimg.generateSuccess.remPrductimgTime
delete productimg.generateSuccess.prductimgTime
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
});
},scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'?20000:1000)
},productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'?20000:1000)
}
let removeProductimg = ()=>{
productimg.generateSuccess.productimgIsProductimg = false
productimg.generateSuccess.productimgRemProductimg= false
clearInterval(productimg.generateSuccess.prductimgTime)
delete productimg.generateSuccess.productimgIsProductimg
delete productimg.generateSuccess.productimgRemProductimg
delete productimg.generateSuccess.prductimgTime
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
clearInterval(prductimgTime)
productimg.generateCourse = null
if(generateProceedList){
// let str = generateProceedList.length > 1?generateProceedList.join(',')
let data = {
uniqueId:generateProceedList,
userId:userDetail.value.userId,
type:scaleImageList.value[scaleImageIndex.value]?.resultType
type:productimg.scaleImageList[productimg.scaleImageIndex]?.resultType
}
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
// data = {
// uniqueId:data.waitList,
// userId:store.state.UserHabit.userDetail.userId,
@@ -509,23 +528,52 @@ setup(props:any,{emit}) {
});
}
}
let setCove = ()=>{
let data = {
...JSON.parse(JSON.stringify(productimg.generateSuccess.newData)),
sourceUrl:productimg.generateSuccess.newData.sourceUrl || scaleImageList.value[scaleImageIndex.value].sourceUrl,
oldId:productimg.generateSuccess.id,
awaitId:productimg.generateSuccess.awaitId,
status:productimg.generateSuccess.status,
listType:productimg.generateSuccess.listType,
isIndex:productimg.generateSuccess.isIndex,
userLikeSortId:productimg.generateSuccess.userLikeSortId,
parentId:productimg.generateSuccess.parentId
let init = async (list:any,index:any,dialogueIndex:any,status:any,listType:string)=>{
scaleImage.value = true
productimg.openType = status
if(status == 'add'){
productimg.selectGenerate = {
...list[index],
listType,
}
// productimgRemProductimg:false,
// productimgIsProductimg:false,
delete productimg.selectGenerate.url
}else{
productimg.selectGenerate = {
...list[index],
}
productimg.selectGenerate.listType = listType
productimg.selectGenerate.isIndex = index
if(!list[index]?.id &&( (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) || (list[index].resultType == 'PoseTransfer' && !list[index].url))){
productimg.productimgIsProductimg = true
productimg.productimgRemProductimg = true
setPrductimg([list[index].taskId])
}
}
productimg.selectGenerate.parentId = list[index].parentId || list[index].userLikeSortId
if(productimg.productimgSearchName){
await nextTick()
ifMaximumLength()
}
emit('addGenerateImg',data)
delete productimg.generateSuccess.isShowMark
delete productimg.generateSuccess.listType
if(productimg.poseList.length == 0 && list[index].resultType == 'PoseTransfer'){
getPoseList()
}
productimg.isGenerate = false
productimg.scaleImageList = list
if(productimg.scaleImageList[index].resultType == "PoseTransfer"){
speed.speedList = speed.speedTypeList.poseTransfer
}
if(productimg.scaleImageList[index].resultType == "Relight"){
speed.speedList = [speed.speedTypeList.toPorductImg[0],speed.speedTypeList.toPorductImg[1]]
}else if(productimg.scaleImageList[index].resultType != "PoseTransfer"){
speed.speedList = [speed.speedTypeList.toPorductImg[0],speed.speedTypeList.toPorductImg[1]]
}
speed.speedData = JSON.parse(JSON.stringify(speed.speedList[0]))
productimg.scaleImageIndex = index
if(dialogueIndex)robotAssits.value = dialogueIndex
}
const getPoseList = ()=>{
Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
@@ -547,6 +595,68 @@ setup(props:any,{emit}) {
productimg.poseList[index].isChecked = true
productimg.selectPose = item.id
}
const cancelDsign = async ()=>{
if(productimg.isGenerate){
if(productimg.productimgIsProductimg){
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
productimg.productimgIsProductimg = false
}
productimg.generateCourse.oldData = {
// id:productimg.selectGenerate.id,
}
if(productimg.selectGenerate.resultType == "Design"){
productimg.generateCourse.oldData.resultType = productimg.selectGenerate.resultType
// productimg.generateCourse.parentId = productimg.selectGenerate.userLikeSortId
// let index = productimg.likeDesignCollectionList.findIndex((item:any)=>(item.userLikeSortId == productimg.selectGenerate.userLikeSortId && item.resultType == "Design"))
// if(!productimg.likeDesignCollectionList[index]?.childList)productimg.likeDesignCollectionList[index].childList = []
// if(productimg.openType == 'add')productimg.likeDesignCollectionList[index]?.childList.push(productimg.generateCourse)
}else{
// productimg.generateCourse.parentId = productimg.selectGenerate.parentId
// let index = productimg.likeDesignCollectionList.findIndex((item:any)=>(item.userLikeSortId == productimg.selectGenerate.parentId && item.resultType == "Design"))
// if(!productimg.likeDesignCollectionList[index]?.childList){
// productimg.likeDesignCollectionList[index].childList = []
// }
// if(productimg.openType == 'add'){
// productimg.likeDesignCollectionList[index]?.childList.push(productimg.generateCourse)
// }else{
// let childIndex = productimg.likeDesignCollectionList[index].childList.findIndex((item:any)=>(item.id == productimg.selectGenerate.id))
// productimg.likeDesignCollectionList[index].childList[childIndex] = productimg.generateCourse
// }
}
let emitData = {
status:productimg.openType,
generateCourse:[{
...productimg.generateCourse,
}]
}
emit('upDataDesignLikeList',emitData)
}
productimg.openType = ''
scaleImage.value = false
}
const ifMaximumLength = async ()=>{
await nextTick()
let textarea = productimg.textarea;
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
// 3. 重置高度为1行
textarea.style.height = lineHeight + 'px';
// 4. 计算实际需要的高度
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
}
onBeforeUnmount(()=>{
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
})
return {
t,
...toRefs(productimg),
@@ -554,24 +664,25 @@ setup(props:any,{emit}) {
openSpeed,
setSpeed,
scaleImage,
isShowMark,
loadingShow,
isComparison,
visible,
setVisible,
scaleImageList,
scaleImageMask,
scaleImageIndex,
isLike,
robotAssits,
getPrductimg,
removeProductimg,
setCove,
getPoseList,
gifPlay,
gifPause,
setSelectPose,
generateProceedList,
init,
cancelDsign,
prductimgTime,
remPrductimgTime,
ifMaximumLength,
};
},
data() {
@@ -598,162 +709,17 @@ directives:{
mounted() {
},
methods: {
init(list:any,index:any,dialogueIndex:any,status:any,listType:string){
if(status == 'add'){
this.generateSuccess = {
listType,
}
}else{
this.generateSuccess = list[index]
this.generateSuccess.listType = listType
this.generateSuccess.isIndex = index
}
// this.
this.generateSuccess.awaitId = list[index].id
this.generateSuccess.userLikeSortId = list[index].userLikeSortId
this.generateSuccess.parentId = list[index].parentId || list[index].userLikeSortId
this.generateSuccess.productimgIsProductimg = !!this.generateSuccess.productimgIsProductimg
this.generateSuccess.productimgRemProductimg = !!this.generateSuccess.productimgRemProductimg
this.generateSuccess.isShowMark = !!this.generateSuccess.isShowMark
this.generateSuccess.remPrductimgTime = this.generateSuccess.remPrductimgTime?this.generateSuccess.remPrductimgTime:null
this.generateSuccess.prductimgTime = this.generateSuccess.prductimgTime?this.generateSuccess.prductimgTime:null
this.scaleImage = true
if(this.poseList.length == 0 && list[index].resultType == 'PoseTransfer'){
this.getPoseList()
}
// if(status == 'edit'){
// this.generateSuccess = {
// ...list[index],
// id:list[index].designItemId || list[index].id,
// oldId:list[index].designItemId || list[index].id,
// url:list[index].designOutfitUrl || list[index].url,
// designItemId:list[index].designOutfitId,
// listType,
// }
// if(list[index].imageStrength)this.productimgSimilarity = 100 - list[index].imageStrength * 100
// if(list[index].imageStrength)list[index].brightenValue
// if(list[index].imageStrength)list[index].direction
// }else{
// this.generateSuccess = {
// listType,
// }
// }
this.scaleImage = true
this.isGenerate = false
this.scaleImageList = list
if(this.scaleImageList[index].resultType == "PoseTransfer"){
this.speedList = this.speedTypeList.poseTransfer
}else{
this.speedList = this.speedTypeList.toPorductImg
}
if(this.scaleImageList[index].resultType == "Relight"){
this.speedData = JSON.parse(JSON.stringify(this.speedList[1]))
}else{
this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
}
// if(this.scaleImageList[index]?.resultType == 'ToProductImage')this.scaleImageList[index].sourceUrl = this.scaleImageList[index].imgUrl
this.scaleImageIndex = index
if(dialogueIndex)this.robotAssits = dialogueIndex
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
document.addEventListener('keydown',this.setKeydown)
},
async cancelDsign(){
document.removeEventListener('keydown',this.setKeydown)
if(this.generateSuccess.productimgIsProductimg){
let awaitData = {awaitId:this.generateSuccess.awaitId,parentId:this.generateSuccess.parentId,listType:this.generateSuccess.listType,taskId:this.generateProceedList[0]}
this.$emit('setGenerateAwait',awaitData)
}
// let data = {
// ...JSON.parse(JSON.stringify(this.generateSuccess)),
// }
// let isIndex = -1
// if(data?.oldId){
// this.scaleImageList.forEach((rv:any,index:number)=>{
// if(rv.designItemId == data?.oldId || rv.id == data?.oldId){
// isIndex = index
// }
// })
// }
// data.isIndex = isIndex
if(this.isGenerate && this.generateSuccess.id){
await new Promise((resolve,reject)=>{
let this_ = this
Modal.confirm({
title: this.t('scaleImage.cover'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
// this_.$emit('addGenerateImg',data)
//另存为操作
this_.generateSuccess.status = 'add'
if(this_.generateSuccess?.newData){
this_.setCove()
}
resolve('')
},
onCancel(){
//覆盖操作
this_.generateSuccess.status = 'cove'
if(this_.generateSuccess?.newData){
this_.setCove()
}
// if(!this_.generateSuccess?.newData?.id){
// this_.setCove()
// }else{
// }
resolve('')
}
});
})
}else{
this.generateSuccess.status = 'add'
if(this.generateSuccess?.newData){
this.setCove()
}
}
this.scaleImage = false
// this.scaleImageIndex = 0
this.isNext = false
// this.generateSuccess = null
// this.scaleImageList = []
},
lastStep(){
if(this.generateSuccess.productimgIsProductimg) return
if(this.isNext)return
let num = this.scaleImageIndex
if(this.scaleImageIndex <= 0){
}else{
num -=1
this.setImageIndex(num)
}
},
nextStep(){
if(this.generateSuccess.productimgIsProductimg) return
if(this.isNext)return
let num = this.scaleImageIndex
if(this.scaleImageIndex >= this.scaleImageList.length-1){
}else{
num += 1
this.setImageIndex(num)
}
},
download(){
let url
if(this.generateSuccess?.resultType == 'PoseTransfer' || this.generateSuccess?.newData?.resultType == 'PoseTransfer'){
url = this.generateSuccess?.videoUrl
if(this.generateSuccess?.newData?.videoUrl){
url = this.generateSuccess.newData.videoUrl
if(this.selectGenerate?.resultType == 'PoseTransfer' || this.generateCourse?.resultType == 'PoseTransfer'){
url = this.selectGenerate?.videoUrl
if(this.generateCourse?.videoUrl){
url = this.generateCourse.videoUrl
}
downloadVideoWithFetch(url)
}else{
url = this.generateSuccess?.newData?.designOutfitUrl || this.generateSuccess?.designOutfitUrl || this.generateSuccess?.url
url = this.generateCourse?.url || this.selectGenerate?.designOutfitUrl || this.selectGenerate?.url
downloadIamge(url)
}
},
@@ -797,51 +763,43 @@ methods: {
parent.likeFile(item,str)
}
},
setKeydown(event:any){
if(event.keyCode == 37){
this.lastStep()
}else if(event.keyCode == 39){
this.nextStep()
}
},
},
});
</script>
<style>
.scaleImage_modal{
.editDesignType_modal{
overflow: visible !important;
}
</style>
<style lang="less">
.scaleImage_modal {
<style lang="less" >
.editDesignType_modal {
.ant-modal-body {
display: flex;
flex-direction: column;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
}
}
.scaleImage_content{
display: flex;
justify-content: center;
// margin-top: calc(5rem*1.2);
// height: 75%;
height: 100%;
position: relative;
width: 100%;
.productImg_modal{
position: relative;
left: 0;
z-index: 9;
flex: 1;
overflow: hidden;
.productImg_left{
width: 24rem;
display: flex;
height: 100%;
flex-direction: column;
width: 100%;
align-items: stretch;
flex-wrap: nowrap;
.input_box_btnBox{
width: 100%;
}
@@ -856,6 +814,79 @@ overflow: visible !important;
justify-content: space-around;
margin-top: 0;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
margin-bottom: 1rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
:deep(.generalMenu_printModel){
margin: 0;
width: 100%;
> div,> ul{
width: 100%;
}
}
.productImg_content_item_title_menubtn{
font-size: 1.6rem;
font-weight: 500;
}
}
&.productImg_content_item_title_similarity{
// margin-bottom: 8rem;
}
}
.productImg_content_item_Direction{
padding-bottom: 1rem;
margin-right: 0;
margin-bottom: 1rem;
}
.selectText{
margin-bottom: 2rem;
display: flex;
width: 100%;
> div{
background: #efeff1;
width: 100%;
font-size: 1.6rem;
margin-right: 1.2rem;
border-radius: 1.6rem;
cursor: pointer;
padding: 1.2rem;
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover{
background: #f5f5f5;
}
&:first-child{
margin-right: 0;
}
}
}
.selectText{
margin-bottom: 2rem;
display: flex;
width: 100%;
> div{
background: #efeff1;
width: 100%;
height: 4.8rem;
margin-right: 1.2rem;
border-radius: 1.6rem;
cursor: pointer;
padding: 1.2rem;
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover{
background: #f5f5f5;
}
&:first-child{
margin-right: 0;
}
}
}
.transferPose{
display: flex;
flex-direction: column;
@@ -943,8 +974,9 @@ overflow: visible !important;
}
.scaleImage_content_imgBox{
position: relative;
// max-width: 70rem;
width: 100%;
width: auto;
// min-width: 70%;
width: 76%;
text-align: center;
justify-content: center;
> .loadBox{

579
src/component/home/design/index.vue
View File

@@ -4,8 +4,8 @@
<div class="page_content_body">
<div class="designPage_body">
<div class="designPage_left" ref="hidden">
<div class="designPage_left_content" :class="{'active':(domHidden)}">
<div class="designPage_left" :class="{'active':(domHidden)}" ref="hidden">
<div class="designPage_left_content">
<!-- 有图状态 start-->
<div class="home_left_info">
@@ -38,12 +38,12 @@
</div>
<div class="generage_btn_box white">
<div class="generage_btn started_btn" style="margin-left: 2rem;">
<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;">
<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;font-weight: 900">
{{ $t('Header.Tools') }}
</div>
<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" style="font-size: 1.4rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
<div v-for="item in speedList" v-show="(item.value != 'poseTransfer' || selectProbject.type != 'singleProductDesign')" :key="item.value" style="font-size: 1.4rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
</div>
</div>
@@ -72,7 +72,7 @@
{{ $t('HomeView.SelectedDesign') }}
</span>
</div>
<div class="generalModel_state" v-show="likeDesignTools">
<div class="generalModel_state">
<div>
<selectMenu
:selectList="resultTypeList"
@@ -90,7 +90,7 @@
v-model:select="resultType"
>
<template v-slot:btnText>
Classify
{{ $t('Header.Filter') }}
</template>
</selectMenu>
</div>
@@ -98,11 +98,11 @@
<selectMenu
:selectList="[
{
label:'Unfold',
label:$t('Header.expand'),
value:true,
},
{
label:'Merge',
label:$t('Header.collapse'),
value:false,
},
]"
@@ -168,13 +168,13 @@
'like'
)">
<img class="content_img"
v-if="design?.resultType == 'PoseTransfer'"
v-if="design?.resultType == 'PoseTransfer' && design?.firstFrameUrl"
:src="design?.firstFrameUrl" alt=""
@mouseenter.stop="gifPlay($event,design)"
@mouseleave.stop="gifPause($event,design)" >
<!-- <div :style="{'background-image': `url(${design?.designOutfitUrl||design?.url})`}" class="content_img" v-if="design?.designOutfitUrl||design?.url" :key="design?.designOutfitUrl" designType="like" :index="index"></div> -->
<img class="content_img" v-if="design?.designOutfitUrl||design?.url" :src="design?.designOutfitUrl||design?.url"
:key="design?.designOutfitUrl" designType="like" :index="index"/>
:key="design?.status" designType="like" :index="index"/>
<a-spin v-show="!design?.designOutfitUrl && !design?.url && !design?.firstFrameUrl" size="large"></a-spin>
<!-- <div class="content_img_block_child" @click.stop>
@@ -215,7 +215,7 @@
<div class="designPage_left_bottom left" @click="setShowHide('domHidden')" >
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
</div>
<div class="designPage_left_bottom right" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
<div class="designPage_left_bottom right" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionList.length > 0">
<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
</div>
</div>
@@ -280,19 +280,24 @@
<div class="text">{{$t('Header.toolsToProduct')}}</div>
<i class="fi fi fi-ss-box-open"></i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
<div class="item" v-show="(selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight')" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
<div class="text">{{$t('Header.toolsRelight')}}</div>
<i class="fi fi fi-br-keyboard-brightness"></i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
<div class="item" v-show="(selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight') && (selectProbject.type != 'singleProductDesign')" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
<div class="text">{{$t('Header.toolsToTransferPose')}}</div>
<i class="fi fi fi-rr-play-alt"></i>
</div>
<div class="item" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
<div class="item" v-show="selectEditBtn?.resultType != 'Design'" @click="setNoDesignLike(selectEditBtn,selectEditBtnIndex,selectEditBtn?.resultType,'disLike')">
<div class="text">{{$t('Header.Delete')}}</div>
<i class="fi fi-rr-trash icon_delete">
</i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
<div class="text">{{$t('Header.onLiked')}}</div>
<i class="icon iconfont icon-jushoucang icon_like">
</i>
</div>
</div>
<collectionModal ref="collectionModal"></collectionModal>
@@ -308,20 +313,20 @@
<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
<editDesignType ref="editDesignType"
@addGenerateImg="addGenerateImg"
@setGenerateAwait="generateLoad"
@upDataDesignLikeList="generateLoad"
:productData="{
upload:upload,
RelightDirection:RelightDirection,
RelightDirectionList:RelightDirectionList,
}"
:isProductimg="true"></editDesignType>
<designTools ref="designTools" @editToolsSuccess="editToolsSuccess"></designTools>
<designTools ref="designTools" :source="'design'" @editToolsSuccess="generateLoad"></designTools>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef, watch} from "vue";
import { defineComponent, h, ref, computed, toRefs, createVNode,provide,nextTick,reactive,onBeforeUnmount, toRef, watch} from "vue";
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
import generalCanvas from "@/component/modules/generalCanvas.vue";
@@ -344,6 +349,7 @@ import { removeClass } from "element-plus/es/utils";
import collectionModal from './collection.vue'
import designTools from './tools.vue'
import selectMenu from '@/component/modules/selectMenu.vue'
import { forEach } from "jszip";
export default defineComponent({
name: "homePage",
@@ -368,6 +374,9 @@ export default defineComponent({
const {t} = useI18n()
const store = useStore();
const editDesignType = reactive({
selectProbject:computed(()=>{
return store.state.Workspace.probjects
}),
upload:{id:store.state.Workspace.probjects.id},
RelightDirectionList:[
{
@@ -463,12 +472,12 @@ export default defineComponent({
label:computed(()=>t('Header.toolsToProduct')),
value:'toProduct',
},{
label:computed(()=>t('Header.toolsToTransferPose')),
value:'poseTransfer',
},{
label:computed(()=>t('Header.toolsRelight')),
value:'relight',
},{
label:computed(()=>t('Header.toolsToTransferPose')),
value:'poseTransfer',
},
],
speedState:false,
@@ -496,12 +505,6 @@ export default defineComponent({
const openCanvas = ()=>{
dataDom.designTools.init('editCanvas')
}
const editToolsSuccess = ()=>{
nextTick().then(()=>{
designData.isUnfold = true
uploadLikeDom()
})
}
const designData = reactive({
openEditBtnId:-1,
selectEditBtn:null as any,
@@ -674,8 +677,10 @@ export default defineComponent({
store.commit("cancelDeleteDesignCollectionList",index);
}
const designMousedown = (e:any,design:any,str:string)=>{
if(design.resultType != 'Design' || designData.isUnfold)return
if(str != 'like' && showDesignMark.value) return
if(str != 'disLike'){
if(design.resultType != 'Design' || designData.isUnfold)return
if(str != 'like' && showDesignMark.value) return
}
let Id = design.userLikeSortId || design.id
let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
let item:any = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
@@ -786,17 +791,17 @@ export default defineComponent({
}
}
const setLikeDislLike = (str:string,value:any)=>{
designData.selectLikeDesign = []
posiitonData.value.likeSelectIndex = 0
nextTick(()=>{
if(str == 'like'){
designData.selectLikeDesign = []
let elArr = likeItemDom.value.children
posiitonData.value.likeElList.push({
el: elArr[0],
sort: value.sort - 1,
index: value.sort - 1,
userLikeSortId:value.userLikeSortId
});
// posiitonData.value.likeElList.push({
// el: elArr[0],
// sort: value.sort - 1,
// index: value.sort - 1,
// userLikeSortId:value.userLikeSortId
// });
let collItem = posiitonData.value.generateElList.filter((item:any)=>(item.userLikeSortId == value.designItemId || item.userLikeSortId == value.id))[0]
if(collItem){
posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
@@ -808,12 +813,12 @@ export default defineComponent({
}
}else if(str == 'disLike'){
let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
posiitonData.value.likeElList.forEach((item:any)=>{
if(item.sort > value.sort - 1){
item.sort-=1
}
})
// posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
// posiitonData.value.likeElList.forEach((item:any)=>{
// if(item.sort > value.sort - 1){
// item.sort-=1
// }
// })
posiitonData.value.generateElList.push({
el: elArr[elArr.length-1],
sort: posiitonData.value.generateElList.length,
@@ -821,8 +826,10 @@ export default defineComponent({
userLikeSortId:value.designItemId||value.id
});
}
setDesignItemStyle()
setSystemDesigner(100)
setDesignItemStyle()
uploadLikeDom()
// moveItem('disLike');
})
}
@@ -878,6 +885,7 @@ export default defineComponent({
}
let setEditDesignType = (arr:any,index:any,type:any,status:any,listType:string)=>{
arr = JSON.parse(JSON.stringify(arr))
store.commit('setOpenChatStatus',false)
let item = arr[index]
if(status == 'add'){
item.sourceUrl = item.designOutfitUrl || item.url
@@ -887,89 +895,28 @@ export default defineComponent({
arr[index].resultType = type
// dataDom.editDesignType.isProductimg = isLike
dataDom.editDesignType.isProductimg = true
clearInterval(prductimgTime.ToProductImage)
clearInterval(prductimgTime.PoseTransfer)
clearInterval(prductimgTime.Relight)
dataDom.editDesignType.init(arr,index,null,status,listType)
dataDom.editDesignType.isLike = false
dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
dataDom.editDesignType.isComparison = true
}
const addGenerateImg = (data:any)=>{
const addGenerateImg = async (data:any)=>{
if(!data.id)return
let obj = {
id:data.id,
designItemId:data.id,
// designItemId:data.elementId,
designOutfitId:'',
designOutfitUrl:data.designOutfitUrl,
sourceUrl:data.sourceUrl,
resultType:data.resultType,
elementId:data.elementId,
elementType:data.elementType,
userGroupId:data.userGroupId || data.id,
firstFrameUrl:data.firstFrameUrl,
gifUrl:data.gifUrl,
awaitId:data.awaitId,
taskId:data.taskId,
parentId:data.parentId || data.userLikeSortId,
videoUrl:data?.videoUrl,
}
let list = []
if(data.listType == 'disLike'){
list = designCollectionList.value
}else{
list = likeDesignCollectionList.value
}
if(list[data.isIndex]?.generateAwait)list[data.isIndex].generateAwait = false;
if(data.status == 'add'){
if(data.listType == 'like'){
likeDesignCollection(obj,-1,data.resultType)
}else{
list.unshift(obj)
}
}else if(data.status == 'cove'){
// collectionLikeUpdate
// Https
if(data.listType == 'like'){
let value = {
"oldRelationId": data.oldId,
"relationId": data.id,
"relationType": data.resultType,
}
Https.axiosPost(Https.httpUrls.collectionLikeUpdate,value).then((rv:any)=>{
if(rv){
}
})
}
list.forEach((item)=>{
if(data.parentId == item.userLikeSortId){
item.childList.forEach((childItem)=>{
if(childItem.id == data.awaitId){
childItem.designOutfitUrl = obj.designOutfitUrl
childItem.resultType = obj.resultType
childItem.id = obj.id
childItem.designItemId = obj.designItemId
childItem.sourceUrl = obj.sourceUrl
}
})
}
})
nextTick().then(()=>{
uploadLikeDom()
})
}
// nextTick().then(()=>{
// // setDesignItemStyle()
// // setSystemDesigner(100)
// uploadLikeDom()
// })
await nextTick().then(()=>{
designData.isUnfold = true
uploadLikeDom()
})
upDataSuccess(data)
}
const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
let url
let data = {
toProductImageResultId:[(design.designItemId || design.id)],
projectId: store.state.Workspace.probjects.id,
collectionSortParentId:designData?.selectDesign?.parentId || design.parentId,
collectionSortParentId:designData?.selectDesign?.parentId || design?.parentId,
} as any
let params = {} as any
if(type == 'ToProductImage' || type == 'Relight'){
@@ -1004,41 +951,43 @@ export default defineComponent({
}
designData.likeLoading = true;
Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
(rv) => {
if(str == 'like'){
// likeDesignCollectionList.value.forEach((item)=>{
// if(item.userLikeSortId == designData.selectDesign.userLikeSortId){
// // if(item?.childList.)
// item.unshift(data)
// }
// })
// if(){
// }else{
// }
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
if(!item?.childList)item.childList = []
// if(item?.childList)
const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === design?.taskId);
if (removeIndex !== -1) {
item.childList[removeIndex] = design
}else{
item.childList.push(design)
async (rv) => {
await new Promise((resolve, reject) => {
if(str == 'like'){
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
if(!item?.childList)item.childList = []
// if(item?.childList)
const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === design?.taskId);
if (removeIndex !== -1) {
item.childList[removeIndex] = design
}else{
item.childList.push(design)
}
}
}
})
}else{
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
item.childList = item.childList.filter((childItem:any)=>{
return childItem.id != design.id
})
}
})
}
})
}else{
console.log(design)
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
item.childList.forEach((childItem:any)=>{
if(childItem.sort > design.oldSort){
console.log(childItem)
childItem.sort -= 1
}
})
item.childList = item.childList.filter((childItem:any)=>{
return childItem.id != design.id
})
console.log(item)
}
})
}
resolve('')
})
nextTick().then(()=>{
console.log(111)
designData.isUnfold = true
uploadLikeDom()
})
@@ -1073,76 +1022,175 @@ export default defineComponent({
designData.likeLoading = false;
});
}
let likeDesignCollection = (design:any,index:any,type:any) => {
if (designData.likeLoading) {
return;
}
if(type != 'Design'){
setNoDesignLike(design,index,type,'like')
return
}
let data = {
designItemId: design.designItemId,
userGroupId: store.state.HomeStoreModule.userGroupId,
projectId: store.state.Workspace.probjects.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
};
designData.likeLoading = true;
Https.axiosPost(Https.httpUrls.designLike, data)
.then((rv: any) => {
if (rv) {
let value:any = {
...design,
id:rv.userLikeId,
groupDetailId:rv.userLikeId,
userLikeSortId:rv.userLikeSortId,
userLikeGroupId:rv.userGroupId,
sort:rv.sort,
}
store.commit("setUserGroupId", rv.userGroupId);
design.groupDetailId = rv.groupDetailId;
store.commit(
"addLikeDesignCollectionList",
value
);
setLikeDislLike('like',value)
if(index != -1)store.commit("deleteDesignCollectionList", index);
}
designData.likeLoading = false;
})
.catch((rv) => {
designData.likeLoading = false;
});
}
const upDataLikeListType = ()=>{
}
const generateLoad = (data:any)=>{
if(!data.taskId)return
let list = []
if(data.listType == 'disLike'){
list = designCollectionList.value
}else{
// list = designData.selectLikeDesign
list = likeDesignCollectionList.value
const upDataSuccess = (element)=>{
console.log(JSON.parse(JSON.stringify(likeDesignCollectionList.value)))
if(designData.isUnfold){
designData.selectLikeDesign.forEach((item:any,index:any) => {
if(element.taskId == item.taskId){
designData.selectLikeDesign[index].url = element.url
designData.selectLikeDesign[index].status = element.status
designData.selectLikeDesign[index].elementType = element.elementType
designData.selectLikeDesign[index].elementId = element.elementId
designData.selectLikeDesign[index].id = element.id
}
});
}
list.forEach((item)=>{
if(data.parentId == item.userLikeSortId){
const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === data?.taskId);
if(removeIndex == -1){
item.childList.push(data)
likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
if(likeItem?.childList?.length > 0){
likeItem.childList.forEach((childItem:any,index:any)=>{
if(childItem.taskId == element.taskId){
console.log(childItem)
likeItem.childList[index].url = element.url
likeItem.childList[index].status = element.status
likeItem.childList[index].elementType = element.elementType
likeItem.childList[index].elementId = element.elementId
likeItem.childList[index].id = element.id
console.log(likeItem.childList)
}
})
}
})
nextTick(()=>{
setSystemDesigner(0)
})
}
const upDataSort = (generateCourseItem:any,likeIndex:number)=>{
let list = likeDesignCollectionList.value
if(list[likeIndex].childList.length == 0)return
list[likeIndex].childList.forEach((likeItem:any,index:any)=>{
console.log(likeItem)
if(likeItem.sort >= generateCourseItem.sort){
likeItem.sort += 1
}
})
}
const generateLoad = async (data:any)=>{
// return
clearInterval(prductimgTime.ToProductImage)
clearInterval(prductimgTime.PoseTransfer)
clearInterval(prductimgTime.Relight)
let list = likeDesignCollectionList.value
data.generateCourse.forEach((generateCourseItem:any)=>{
let oldData = generateCourseItem.oldData
if(oldData?.resultType == "Design"){
let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId && item.resultType == "Design"))
if(!list[index]?.childList)list[index].childList = []
if(data.status == 'add'){
generateCourseItem.sort = list[index]?.childList.length + 1
upDataSort(generateCourseItem,index)
list[index]?.childList.push(generateCourseItem)
}
}else{
console.log(generateCourseItem)
let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId))
if(!list[index]?.childList){
list[index].childList = []
}
if(data.status == 'add'){
upDataSort(generateCourseItem,index)
list[index]?.childList.push(generateCourseItem)
}else{
let childIndex = list[index].childList.findIndex((item:any)=>(item.id == generateCourseItem.id))
list[index].childList[childIndex] = generateCourseItem
}
}
})
nextTick().then(()=>{
await nextTick().then(()=>{
designData.isUnfold = true
uploadLikeDom()
})
// list[data.index].generateAwait = true;
let toProductImage = []
let poseTransfer = []
let relight = []
list.forEach((item:any)=>{
if(!item?.childList)item.childList = []
item.childList.forEach((childItem:any)=>{
if(childItem.resultType == 'PoseTransfer'){
if(!childItem.status && !childItem?.firstFrameUrl){
poseTransfer.push(childItem.taskId)
}
}else if(childItem.resultType == 'ToProductImage'){
if(!childItem.status && (!childItem?.url || !childItem?.designOutfitUrl)){
toProductImage.push(childItem.taskId)
}
}else if(childItem.resultType == 'Relight'){
if(!childItem.status && (!childItem?.url || !childItem?.designOutfitUrl)){
relight.push(childItem.taskId)
}
}
})
})
setPrductimg(toProductImage,'ToProductImage')
setPrductimg(poseTransfer,'PoseTransfer')
setPrductimg(relight,'Relight')
}
let prductimgTime = {
ToProductImage:null,
PoseTransfer:null,
Relight:null,
}
const setFail = (list:any)=>{
list.forEach((listItem)=>{
if(designData.isUnfold){
let index = designData.selectLikeDesign.findIndex((item:any)=>{return item.taskId == listItem})
designData.selectLikeDesign.splice(index,1)
}
likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
if(likeItem?.childList?.length > 0){
let index = likeItem.childList.findIndex((item:any)=>{return item.taskId == listItem})
likeItem.childList.splice(index,1)
}
})
})
nextTick().then(()=>{
uploadLikeDom()
})
}
let setPrductimg = (dataList:any,type:string)=>{
if(dataList.length == 0)return
let data = dataList
let state = true
let url = Https.httpUrls.relightResult
if(type == 'ToProductImage'){
url = Https.httpUrls.toProductImageResult
}else if(type == 'PoseTransfer'){
url = Https.httpUrls.poseTransformResult
}
// url = Https.httpUrls.poseTransformResult
// data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
prductimgTime[type] = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(url, data).then(
(rv) => {
if(type == 'PoseTransfer'){
rv = [rv]
}
state = true
rv.forEach((element:any) => {
if(element?.status == 'Success'){
// setFail([element.taskId])
upDataSuccess(element)
data = data.filter((item:any) => item !== element.taskId);
}else if(element?.status == 'Fail' || element?.status == 'Invalid'){
data = data.filter((item:any) => item !== element.taskId);
setFail([element.taskId])
message.info(t('Generate.everyTimeEffectPoor'));
}
});
if(data.length == 0){
store.state.store.dispatch('getCredits')
clearInterval(prductimgTime[type])
}
}
).catch(res=>{
clearInterval(prductimgTime[type])
setFail(data)
});
},type == 'PoseTransfer'?20000:3000)
}
const gifPlay = (e:any,item:any)=>{
e.target.src = item.gif || item.gifUrl//使用gif图片
@@ -1172,7 +1220,10 @@ export default defineComponent({
item.oldSort = item.sort
if(item?.childList?.length > 0){
item.childList.forEach((childItem:any,childIndex:number)=>{
childItem.sort = childIndex + item.sort + childLength
childItem.oldSort = childItem.sort
console.log(childItem.sort,childLength,index)
childItem.sort = childItem.sort + childLength + index
// childItem.sort = childIndex + item.sort + childLength
designData.selectLikeDesign.push(childItem)
})
childLength = item.childList.length + childLength
@@ -1193,6 +1244,7 @@ export default defineComponent({
const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
parents.map((parent:any) => {
parent.sort = parent.oldSort||parent.sort
delete parent.oldSort
return {
...parent,
childList: designData.selectLikeDesign.filter((item:any) =>
@@ -1207,6 +1259,13 @@ export default defineComponent({
})
}
const changeResultType = ()=>{
if(designData.resultType == 'Design'){
designData.isUnfold = false
setUnfold()
}else{
designData.isUnfold = true
// setUnfold()
}
if(designData.resultType != 'All'){
if(designData.oldSelectLikeDesign.length == 0)designData.oldSelectLikeDesign = designData.selectLikeDesign
if(designData.resultType == 'Product'){
@@ -1263,7 +1322,6 @@ export default defineComponent({
setSpeed,
openEditTools,
openCanvas,
editToolsSuccess,
uploadLikeDom,
likeItemDom,
@@ -1284,7 +1342,6 @@ export default defineComponent({
openCollection,
setEditDesignType,
openEditBtn,
addGenerateImg,
setNoDesignLike,
upDataLikeListType,
generateLoad,
@@ -1294,6 +1351,7 @@ export default defineComponent({
endHover,
setUnfold,
changeResultType,
addGenerateImg,
};
},
data() {
@@ -1785,7 +1843,27 @@ export default defineComponent({
},
//不喜欢设计
dislikeDesignCollection(design:any,type:string, index: any) {
async dislikeDesignCollection(design:any,type:string) {
if(design?.childList?.length > 0){
await new Promise((resolve, reject) => {
Modal.confirm({
title: this.t('LibraryPage.jsContent11'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
zIndex:99999,
centered:true,
onOk() {
resolve('')
},
onCancel(){
return
}
});
})
}
let data = {
designId: design.designId || this.designId,
designPythonOutfitId:design.designOutfitId,
@@ -1793,10 +1871,6 @@ export default defineComponent({
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
projectId:this.store.state.Workspace.probjects.id,
};
if(type != 'Design'){
this.setNoDesignLike(design,index,type,'disLike')
return
}
if (this.disLikeLoading) {
return;
}
@@ -1804,17 +1878,27 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.designDislike, data)
.then((rv: any) => {
if (rv) {
// this.store.commit("addDesignCollectionList", [design]);
this.likeDesignCollectionList.forEach((item:any)=>{
if(item.sort > design.sort){
this.recycleDomHidden = true
this.store.commit("addDesignCollectionList", [design]);
let index = -1
this.likeDesignCollectionList.forEach((item:any,likeIndex:number)=>{
if(item.id == design.id){
design.childList = []
index = likeIndex
}
if((item?.oldSort || item.sort) > (design?.oldSort || design.sort)){
item.sort-=1
}
})
this.store.commit(
"deleteLikeDesignCollectionList",
index
);
this.setLikeDislLike('disLike',design)
this.likeDesignCollectionList.splice(index,1)
// this.store.commit(
// "deleteLikeDesignCollectionList",
// index
// );
design.childList = []
nextTick(()=>{
this.setLikeDislLike('disLike',design)
})
}
this.disLikeLoading = false;
})
@@ -1997,6 +2081,7 @@ export default defineComponent({
) {
// if()
if(this.isMove)return
this.store.commit('setOpenChatStatus',false)
if(design.resultType != "Design"){
this.setEditDesignType(collectionList,index,design.resultType,'edit',type)
return
@@ -2123,29 +2208,29 @@ export default defineComponent({
width: 100%;
height: 100%;
display: flex;
// padding-left: 0.7rem;
box-sizing: border-box;
// overflow: hidden;
.designPage_left {
// width: 44.4rem;
width: 33%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
position: relative;
// overflow: hidden;
.designPage_left_content {
height: 100%;
width: 50rem;
// width: 55rem;
overflow: hidden;
// transition: all .3s;
padding-right: 1.2rem;
&.active{
&.active{
width: 0;
.designPage_left_content{
padding-right: 0;
width: 0;
}
}
.designPage_left_content {
height: 100%;
// width: 50rem;
width: 100%;
overflow: hidden;
padding-right: 1.2rem;
.home_left_info {
height: 100%;
display: flex;
@@ -2273,8 +2358,9 @@ export default defineComponent({
flex: 1;
display: flex;
position: relative;
width: 0;
flex-direction: column;
// min-width: 40%;
width: 50%;
&.recycleBin{
flex: none;
margin-left: 0;
@@ -2283,9 +2369,10 @@ export default defineComponent({
&.recycleBinShow{
width: auto;
margin-left: 2rem;
width: calc(50% - 2rem);
}
.right_content_body {
width: 55rem;
width: 100%;
// width: 55rem;
.right_content_img_block{
@@ -2413,11 +2500,11 @@ export default defineComponent({
top: 0rem;
> .childItem{
> .content_img_flex{
object-fit: contain;
border: 2px solid #00000070;
}
position: relative !important;
>img{
}
}
}
@@ -2431,20 +2518,21 @@ export default defineComponent({
border: 2px solid #000;
}
&.PoseTransfer{
border: 2px solid #f0d9d0;
border: 2px solid #c7c7c7;
}
&.ToProductImage{
border: 2px solid #ccece5;
border: 2px solid #c7c7c7;
}
&.Relight{
border: 2px solid #ccece5;
border: 2px solid #c7c7c7;
}
}
}
.content_img {
height: 100%;
// object-fit: contain;
object-fit: cover;
width: 100%;
object-fit: contain;
// object-fit: cover;
}
.btn{
@@ -2454,6 +2542,10 @@ export default defineComponent({
position: absolute;
flex-direction: column;
align-items: center;
@media (min-width: 1024px) {
top: 1.5rem;
right: 1.5rem;
}
> i{
cursor: pointer;
width: 3rem;
@@ -2464,6 +2556,9 @@ export default defineComponent({
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
color: #fff;
font-size: 1.7rem;
@media (min-width: 1024px) {
font-size: 2rem;
}
}
.icon_like,.icon_delete {

8
src/component/home/design/mannequin/index.vue
View File

@@ -5,7 +5,7 @@
<!-- <div class="text">Style：</div>
<div class="text" style="margin: 0 9rem 0 4rem;">{{ selectObject?.styleName }}</div>
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div> -->
<div class="text" v-show="systemUser">Style：</div>
<div class="text" v-show="systemUser">{{ $t('Model.Style：') }}</div>
<div class="generalModel_state" style="width: 20rem;" v-show="systemUser">
<div class="generalModel_state_item" style="margin: 0; width: 100%;">
<a-select
@@ -27,7 +27,7 @@
</div>
</div>
<div class="selectModel">
Current Model :
{{ $t('Model.CurrentModel') }} :
<div class="item" v-for="item ,index in selectObject.model" @click="deleteSelectModel(index)">
<img :src="item.url" alt="">
<span class="icon iconfont icon-shanchu"></span>
@@ -154,8 +154,8 @@ export default defineComponent({
if(list.length <= 3){
let model = {
id:item.id,
url:item.presignedUrl,
type:data.systemUser?'System':'Library',
url:item.presignedUrl || item.url,
type:item.type?item.type:data.systemUser?'System':'Library',
}
list.push(model)
}else{

85
src/component/home/design/tools.vue
View File

@@ -34,6 +34,7 @@
:isDesignPage="true"
@setLike="designLike"
class="toProduct"
:source="source"
:isState="openType =='toProduct'"
v-if="openType == 'toProduct'"
></toProductRelight>
@@ -42,10 +43,11 @@
:isDesignPage="true"
@setLike="designLike"
class="relight"
:source="source"
:isState="openType =='relight'"
v-if="openType == 'relight'"
></toProductRelight>
<poseTransfer v-if="openType == 'poseTransfer'" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
<poseTransfer v-if="openType == 'poseTransfer'" :source="source" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
<div v-if="openType == 'editCanvas'" class="canvasBox" :class="{editCanvas:openType == 'editCanvas'}">
<div class="canvas" ref="canvasBox">
<editCanvas @changeCanvas="changeCanvas" ref="editCanvas">
@@ -56,12 +58,13 @@
</div>
<div class="btn">
<div class="gallery_btn" @click="saveCanvas">Save</div>
<div class="gallery_btn">Share</div>
<div class="gallery_btn" @click="share">Share</div>
<div class="gallery_btn" @click="exportElement">Export</div>
</div>
</div>
</div>
</div>
<publish ref="publish" @clearPublish="clearPublish"></publish>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
@@ -78,12 +81,17 @@ import poseTransfer from '../tools/poseTransfer/index.vue'
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
import ExistsImageList from "@/component/Canvas/ExistsImageList/index.vue";
import JSZip, { forEach } from "jszip";
import publish from "@/component/WorksPage/publish.vue";
export default defineComponent({
components:{
toProductRelight,poseTransfer,editCanvas,ExistsImageList
toProductRelight,poseTransfer,editCanvas,ExistsImageList,publish
},
props:{
source:{
type:String,
default:'',
},
},
emits:['editToolsSuccess'],
setup(props,{emit}) {
@@ -103,8 +111,10 @@ export default defineComponent({
relight:null as any,
poseTransfer:null as any,
editCanvas:null as any,
publish:null as any,
}) as any
const init = (value:any,list:any)=>{
store.commit('toolsClear')
data.designTools = true
data.openType = value
if(value == 'editCanvas'){
@@ -114,31 +124,74 @@ export default defineComponent({
data.likeDesignList = list
nextTick(()=>{
let fileList = [] as any
let likeList = [] as any
if(value == 'toProduct'){
list.forEach((item:any) => {
item.type = 'DesignOutfit'
fileList.push(item)
item.childList.forEach((child:any) => {
if(child.resultType == 'ToProductImage'){
likeList.push(child)
}
});
});
}else if(value == 'relight' || value == 'poseTransfer'){
console.log(list)
list.forEach((item:any) => {
if(item.childList){
item.childList.forEach((child:any) => {
if(child.resultType == 'ToProductImage' || child.resultType == 'Relight'){
fileList.push(child)
}
console.log(fileList)
if(child.resultType == 'Relight' && value == 'relight'){
likeList.push(child)
}else if(child.resultType == 'PoseTransfer' && value == 'poseTransfer'){
likeList.push(child)
}
console.log(likeList)
});
}
});
}
console.log(fileList)
let likeData = {
likedList: likeList,
str:'add',
index:-1,
}
if(data.openType == 'toProduct'){
store.commit("setToProductImage", likeData);
}else if(data.openType == 'relight'){
store.commit("setRelightList", likeData);
}else if(data.openType == 'poseTransfer'){
console.log(likeData)
store.commit("setPoseTransfer", likeData);
}
dataDom[value].openSetData(fileList)
})
}
let cleardata = async ()=>{
let list = []
if(data.openType == 'toProduct'){
list = store.state.HomeStoreModule.toProductImageList.likedList
}else if(data.openType == 'relight'){
list = store.state.HomeStoreModule.relightList.likedList
}else if(data.openType == 'poseTransfer'){
list = store.state.HomeStoreModule.poseTransfer.likedList
}
let generateCourse = list.filter((item)=>item.oldSort)
generateCourse = generateCourse.map(item => {
return item.oldSort ? { ...item, sort: item.oldSort } : item;
});
let emitData = {
status:'add',
generateCourse:generateCourse,
}
emit('editToolsSuccess',emitData)
data.openType = ''
data.likeDesignList = []
data.designTools = false
store.commit('toolsClear')
}
const designLike = ()=>{
@@ -147,7 +200,9 @@ export default defineComponent({
//画布相关
const getSelectCanvasImg = ()=>{
data.canvasSelectList = []
let allCollection = store.state.UploadFilesModule.allBoardData
console.log(allCollection)
let allCollectionStr = [
{value:'disposeMoodboard',name:'Entirety Moodboard'},
{value:'moodboardFiles',name:'Moodboard'},
@@ -208,7 +263,6 @@ export default defineComponent({
}
const saveCanvas = ()=>{
let canvasJSON = dataDom.editCanvas.getJSON()
console.log(JSON.parse(canvasJSON))
if(!canvasJSON)return
let blob = new Blob([canvasJSON], { type: "application/json" });
let formData = new FormData();
@@ -229,7 +283,7 @@ export default defineComponent({
console.log(data.canvasDetailData)
let img = [] as any;
if(data.canvasDetailData.commandManager.undoStack.length > 0){
await dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv:any)=>{
await dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false}).then((rv:any)=>{
var imageDataURL = rv
img.push({
imgUrl: imageDataURL,
@@ -239,7 +293,6 @@ export default defineComponent({
}
for(let i = 0; i < data.canvasSelectList.length;i++){
let item = data.canvasSelectList[i]
console.log(item)
item.imgList.forEach((imgItem:any,index:any)=>{
let nameTail = imgItem.url?.split(".").pop().split("?").shift();
img.push({
@@ -308,6 +361,20 @@ export default defineComponent({
};
const changeCanvas = (value:any)=>{
data.canvasDetailData = value
}
const share = async ()=>{
var imageDataURL = '';
await dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false}).then((rv:any)=>{
imageDataURL = rv
})
let value = {
imgUrl:imageDataURL,
userlikeGroupId:1111,
}
dataDom.publish.init(value)
}
const clearPublish = ()=>{
}
return{
...toRefs(dataDom),
@@ -319,6 +386,8 @@ export default defineComponent({
saveCanvas,
exportElement,
changeCanvas,
share,
clearPublish,
}
},
provide() {

42
src/component/home/index.vue
View File

@@ -26,7 +26,7 @@ import { useRouter,useRoute } from 'vue-router'
import design from "./design/index.vue"
import newPorject from "./newProject/index.vue"
import router from '@/router';
import {getMinioUrl} from '@/tool/util'
import {getMinioUrl, getUniversalZoomLevel} from '@/tool/util'
import chat from "./chat/index.vue"
export default defineComponent({
components:{
@@ -76,7 +76,16 @@ export default defineComponent({
if(query.history || query.id){
if(data.openType == 'tools')data.isShowMark = true
data.dataLoad = true
if(query?.source != 'batch')createData()
if(query?.source != 'batch'){
createData()
}else{
let arr = ['moodBoard','printBoard','sketchBoard','colorBoard']
arr.forEach((item:any)=>{
store.commit("clearAllBoardData",item);
})
store.commit("createProbject");
store.commit("clearAllData");
}
if(query.type == 'Works'){
getWorks(query.id || query.history)
}else{
@@ -98,7 +107,6 @@ export default defineComponent({
store.commit("clearAllCollection");
store.commit("setAllBoardDataChoose",{});
store.commit("clearShowSketchboard",{});
store.commit("clearAllCollection");
store.commit("clearAllCloudList");
let arr = ['moodBoard','printBoard','sketchBoard','colorBoard']
arr.forEach((item:any)=>{
@@ -225,7 +233,7 @@ export default defineComponent({
return new Promise((resolve, reject) => {
let moduleList = [] as any
if(type == 'design'){
moduleList = ["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','mannequin']
moduleList = ["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','mannequin','toProduct','relight','poseTransfer']
}else{
moduleList = ["printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin',"patternMaking3D",'deReconstruction','uploadElement']
}
@@ -282,7 +290,7 @@ export default defineComponent({
})
data.isShowMark = false
data.dataLoad = false
if(type == 'design'){
if(type == 'design' && dataDom.design){
nextTick(()=>{
dataDom.design.openSetData()
})
@@ -357,7 +365,8 @@ export default defineComponent({
store.commit("setUserGroupId", dataValue.design?.userGroupId);
if(dataValue.toProduct){
let value = {
list: dataValue.toProduct,
list:dataValue.toProduct.list.filter((rv)=>rv.status != 'Invalid' && rv.status != 'Fail'),
likedList:dataValue.toProduct.likedList,
str:'add',
index:-1,
}
@@ -365,7 +374,8 @@ export default defineComponent({
}
if(dataValue.relight){
let value = {
list: dataValue.relight,
list:dataValue.relight.list.filter((rv)=>rv.status != 'Invalid' && rv.status != 'Fail'),
likedList:dataValue.relight.likedList,
str:'add',
index:-1,
}
@@ -391,6 +401,24 @@ export default defineComponent({
};
store.commit('setPatternMaking3D',patternMaking3DData)
}
if(dataValue.deReconstruction){
let deReconstruction = {
str:'add',
list:[
{
isLike:dataValue.deReconstruction.liked,
category:dataValue.deReconstruction.category,
url:dataValue.deReconstruction.collageSketchUrl,
categoryValue:dataValue.deReconstruction.categoryValue,
}
]
};
let uploadImages = {
str:'add',
list:dataValue.deReconstruction?.uploadImages
};
store.commit('setDeReconstructionUploadImages',uploadImages)
}
}
//统一处理选择组的渲染数据
const dealViewChooseData = (dataValue: any,str:string)=> {

24
src/component/home/newProject/index.vue
View File

@@ -2,7 +2,7 @@
<div class="newProject">
<div class="contentBox">
<div class="content">
<div class="title">{{$t('newProjectg.helpYou')}}</div>
<div class="title" v-show="chatOrSetting == 'chat'">{{$t('newProjectg.helpYou')}}</div>
<div class="selectFlow">
<div class="select">
<div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
@@ -44,7 +44,7 @@
<workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
</div>
<div class="hint" v-show="chatOrSetting == 'chat'">
<div class="item" v-for="item in hintList" :title="item" @click="addChatContent(item)">{{ item }}</div>
<div class="item" v-for="item in hintList[selectFlow.value]" :title="item.value" @click="addChatContent(item)">{{ item }}</div>
</div>
</div>
</div>
@@ -98,11 +98,18 @@ export default defineComponent({
]
},
chatContent:'',
hintList:[
computed(()=>t('newProjectg.hintList1')),
computed(()=>t('newProjectg.hintList2')),
computed(()=>t('newProjectg.hintList3')),
],
hintList:{
SERIES_DESIGN:[
computed(()=>t('newProjectg.hintListSERIES1')),
computed(()=>t('newProjectg.hintListSERIES2')),
computed(()=>t('newProjectg.hintListSERIES3')),
],
SINGLE_DESIGN:[
computed(()=>t('newProjectg.hintListSIGNLE1')),
computed(()=>t('newProjectg.hintListSIGNLE2')),
computed(()=>t('newProjectg.hintListSIGNLE3')),
],
},
enableThinking:false,//深度思考
uploadFile:null as any,
loadingShow:false,
@@ -446,9 +453,10 @@ export default defineComponent({
> div{
background: #efeff1;
width: 25rem;
height: 4.8rem;
// height: 4.8rem;
margin-right: 1.2rem;
border-radius: 1.6rem;
font-size: 1.6rem;
cursor: pointer;
padding: 1.2rem;
white-space: nowrap; /* 文本不换行 */

2
src/component/home/newProject/setting.vue
View File

@@ -28,7 +28,7 @@
<div>Setting</div>
</div>
<div class="workspaceBox">
<workspace ref="workspace" @setProject="setProject" :httpWorkflowType="projectData.process"></workspace>
<workspace ref="workspace" :status="'edit'" @setProject="setProject" :httpWorkflowType="projectData.process"></workspace>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">

35
src/component/home/newProject/workspace.vue
View File

@@ -8,27 +8,27 @@
</div>
</div>
<div class="gender marginBottom" v-if="show.age">
<div class="text">{{$t('Habit.Role')}}</div>
<div class="text">{{$t('Habit.Role')}}:</div>
<div class="radio">
<label>
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
<input type="radio" :disabled="status == 'edit'" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
<span>{{$t('Habit.Adult')}}</span>
</label>
<label>
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
<input type="radio" :disabled="status == 'edit'" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
<span>{{$t('Habit.Child')}}</span>
</label>
</div>
</div>
<div class="gender marginBottom">
<div class="text">{{$t('Habit.Gender')}}：</div>
<div class="text">{{$t('Habit.Gender')}}:</div>
<div class="radio">
<label>
<input type="radio" name="gender" v-model="selectObject.sex" value="Female">
<input type="radio" :disabled="status == 'edit'" name="gender" v-model="selectObject.sex" value="Female">
<span>{{$t('Habit.Female')}}</span>
</label>
<label>
<input type="radio" name="gender" v-model="selectObject.sex" value="Male">
<input type="radio" :disabled="status == 'edit'" name="gender" v-model="selectObject.sex" value="Male">
<span>{{$t('Habit.Male')}}</span>
</label>
</div>
@@ -39,14 +39,14 @@
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
</div>
<div class="style marginBottom brand">
<div class="text">{{$t('Habit.Brand')}}</div>
<div class="text">{{$t('Habit.Brand')}}:</div>
<div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg"></div>
<!-- <div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg">{{ selectObject.userBrandDnaName }}</div> -->
<div class="gallery_btn" style="line-height: 5rem;" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
</div>
<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
<div class="text">
{{$t('Habit.BrandStrength')}}
{{$t('Habit.BrandStrength')}}:
</div>
<a-slider class="system_silder"
v-model:value="selectObject.brandPercentage"
@@ -75,10 +75,10 @@
<div class="text">
{{$t('Habit.Category')}}:
</div>
<generalMenu style="width:80%" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
<generalMenu style="width:80%" :ulStyle="{background: '#fff'}" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
</div>
<div class="complete">
<div class="gallery_btn" @click="complete">{{$t('Habit.Complete')}}</div>
<div class="gallery_btn" @click="complete">{{$t('HomeView.Start')}}</div>
</div>
</div>
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
@@ -120,6 +120,10 @@ export default defineComponent({
firstTime:{
type:Boolean,
default:false
},
status:{
type:String,
default:''
}
},
emits:['setProject'],
@@ -194,9 +198,9 @@ export default defineComponent({
name:data.selectObject.name,
process:props.httpWorkflowType,
styleId:data.show.style?data.selectObject.styleId:null,
id:data.selectObject.id,
id:data.selectObject.id == -1?'':data.selectObject.id,
workspace:{
id:data.selectObject.workspaceId,
id:data.workspaceId?.id == -1?'':data.workspaceId?.id,
sex:data.selectObject.sex,
// sex:data.show.gender?data.selectObject.sex:null,
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
@@ -261,9 +265,9 @@ export default defineComponent({
onMounted(()=>{
store.commit('createProbject')
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
data.selectObject.style = store.state.UserHabit.mannequinStyle[0].value
data.selectObject.styleName = store.state.UserHabit.mannequinStyle[0].name
data.selectObject.styleId = store.state.UserHabit.mannequinStyle[0].id
data.selectObject.style = store.state.UserHabit?.mannequinStyle?.[0]?.value
data.selectObject.styleName = store.state.UserHabit?.mannequinStyle?.[0]?.name
data.selectObject.styleId = store.state.UserHabit?.mannequinStyle?.[0]?.id
})
onBeforeUnmount(()=>{
})
@@ -315,6 +319,7 @@ export default defineComponent({
padding: 0 5rem;
width: 100%;
padding: 0;
overflow-y: auto;
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;

141
src/component/home/tools/deReconstruction/canvas/index.vue
View File

@@ -3,12 +3,19 @@
<div class="canvasBox" ref="canvasBox">
<editCanvas v-if="canvasLoad" ref="editCanvas"
:config="canvasConfig"
:clothingImageUrl="modelUrl"
:clothingImageUrl="changeImageUrl"
@changeCanvas="changeCanvas"
:clothing-image-opts="{
imageMode:'contains',
}"
></editCanvas>
>
<template #customTools="{ toolButtonProps }">
<div class="custom-tool-btn" :class="{active:isHiddenModel}" @click="setHiddenmodel()">
<i class="fi fi-rr-eye"></i>
<div class="tool-tooltip">Hidden model</div>
</div>
</template>
</editCanvas>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
@@ -24,12 +31,26 @@ import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneralCopy";
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
import defaultModel from "@/assets/images/homePage/defaultModel.png"
import FemaleAdultModel from "@/assets/images/homePage/FemaleAdultModel.png"
import FemaleChildModel from "@/assets/images/homePage/FemaleChildModel.png"
import MaleAdultModel from "@/assets/images/homePage/MaleAdultModel.png"
import MaleChildModel from "@/assets/images/homePage/MaleChildModel.png"
export default defineComponent({
components: {
editCanvas,
},
props:{
selectSexAge:{
type:Object,
default:()=>{
return {
sex:'',
age:'',
}
}
}
},
emits:['setGenerateImg','setCanvasJSON'],
setup(props,{emit}) {
const { t } = useI18n();
@@ -40,10 +61,11 @@ export default defineComponent({
const createProbject = inject('createProbject',()=>{})
const data = reactive({
canvasLoad:false,
isHiddenModel:true,
canvasConfig:{},
modelUrl:'',
probjects:computed(()=>store.state.Workspace.probjects),
undoStack:0,
changeImageUrl:'',
})
const dataDom = reactive({
editCanvas:null,
@@ -52,19 +74,31 @@ export default defineComponent({
const openSetData = ()=>{
// dataDom.canvasContent.openSetData()
}
const addImage = async (value)=>{
if(!data?.probjects?.id){
await createProbject()
const setFixedImg = ()=>{
let sex = props.selectSexAge.value
let age = props.selectSexAge.age
let changeImageUrl = ''
if(sex == 'Male' && age == 'Adult'){
changeImageUrl = MaleAdultModel
}else if(sex == 'Male' && age == 'Child'){
changeImageUrl = MaleChildModel
}else if(sex == 'Female' && age == 'Adult'){
changeImageUrl = FemaleAdultModel
}else if(sex == 'Female' && age == 'Child'){
changeImageUrl = FemaleChildModel
}
// dataDom.editCanvas.addImageToLayer(value.imgUrl)
dataDom.editCanvas.addImageToLayer(value.url)
changeImageUrl = new URL(changeImageUrl, import.meta.url).href
return changeImageUrl
}
const addBottomImage = (value)=>{
dataDom.editCanvas.changeFixedImage(value)
const changeFixedImage = async ()=>{
await nextTick()
data.changeImageUrl = setFixedImg()
dataDom.editCanvas.changeFixedImage(data.changeImageUrl, {
imageMode: "contains", // 设置底图包含在画布内
});
}
const getData = async ()=>{
console.log(dataDom.editCanvas.getCanvasManager().commandManager)
// if(dataDom.editCanvas.getState())
dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv)=>{
emit('setGenerateImg',rv)
})
@@ -75,7 +109,6 @@ export default defineComponent({
const setCanvas = (url)=>{
return new Promise((res,rev)=>{
let img = new Image()
console.log(url)
img.onload = ()=>{
let wH = [1,1]
let domHeight = dataDom.canvasBox.offsetHeight - 200
@@ -99,16 +132,26 @@ export default defineComponent({
emit('setCanvasJSON',getCanvasJSON())
},5000)
}
const setHiddenmodel = ()=>{
data.isHiddenModel = !data.isHiddenModel
let index = dataDom.editCanvas.layers.findIndex((item)=>item.type == "fixed")
let layerId = dataDom.editCanvas.layers[index].id
let canvasManager = dataDom.editCanvas.getCanvasManager()
canvasManager?.layerManager?.toggleLayerVisibility(layerId);
}
const addImage = (url)=>{
dataDom.editCanvas.addImageToLayer(url.url,{imageMode:'contains'})
}
onMounted(() => {
nextTick(()=>{
let url = new URL(defaultModel, import.meta.url).href
data.modelUrl = url
setCanvas(url).then(()=>{
data.changeImageUrl = setFixedImg()
setCanvas(data.changeImageUrl).then(()=>{
})
})
});
onBeforeUnmount(()=>{
data.canvasLoad = false
data.isHiddenModel = true
// canvasGeneral.canvasClear()
})
return {
@@ -116,10 +159,12 @@ export default defineComponent({
...toRefs(dataDom),
isShowMark,
openSetData,
addImage,
getData,
getCanvasJSON,
changeCanvas,
changeFixedImage,
setHiddenmodel,
addImage,
};
},
data(prop) {
@@ -150,5 +195,65 @@ export default defineComponent({
width: 100%;
height: 100%;
}
.custom-tool-btn {
position: relative;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
color: #333;
transition: all 0.2s ease;
i{
font-size: 3rem;
display: flex;
}
&.active{
background-color: #e6f7ff;
color: #1890ff;
}
}
.custom-tool-btn:hover {
background-color: #f0f0f0;
&.active{
background-color: #e6f7ff;
color: #1890ff;
}
}
.custom-tool-btn:hover .tool-tooltip {
display: block;
}
.tool-tooltip {
display: none;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
margin-left: 8px;
white-space: nowrap;
font-size: 12px;
z-index: 10;
}
.tool-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
}
}
</style>

79
src/component/home/tools/deReconstruction/index.vue
View File

@@ -17,11 +17,11 @@
<div class="generalModel_state_item smail" style="margin-right: 0">
<a-select
ref="select"
v-model:value="sex"
v-model:value="sexId"
:options="sexList"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
style="width:10rem"
:fieldNames="{ label: 'name', value: 'id' }"
style="width:13rem"
@change="sexChange"
>
<template #suffixIcon
@@ -37,7 +37,7 @@
</selectList>
</div>
<div class="canvas itemBox">
<canvasBox @setGenerateImg="setGenerateImg" @setCanvasJSON="setCanvasJSON" ref="canvasBox"></canvasBox>
<canvasBox @setGenerateImg="setGenerateImg" :selectSexAge="selectSexAge" @setCanvasJSON="setCanvasJSON" ref="canvasBox"></canvasBox>
<!-- <canvasUpload :config="ceditorConfig" clothingImageUrl="https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250608%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250608T161025Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a4374c0954d11c2490ef3b86a1924cf6d423ed8ac56023b3c3ccabcdf0672620"></canvasUpload> -->
</div>
<div class="finished itemBox">
@@ -48,7 +48,7 @@
</div>
<div class="content">
<img v-if="generateImg?.[0]?.url" :src="generateImg?.[0]?.url" alt="">
<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSpread="false"></sketchCategory>
<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSetSketchCategory="true" :isSpread="false"></sketchCategory>
</div>
<div class="btnBottom" @click="getCanvasData">
<div class="gallery_btn">{{ $t('DeReconstruction.Download') }}</div>
@@ -61,6 +61,7 @@ import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, react
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { downloadIamge,getMinioUrl } from "@/tool/util";
import { useI18n } from 'vue-i18n'
import selectList from '@/component/DetailCopy/detailLeft/module/selectList.vue'
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
@@ -76,37 +77,49 @@ export default defineComponent({
emits:[],
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n()
const data = reactive({
sketchCatecoryList:computed(()=>{
return store.state.Workspace.probjects.positionList
}),
sketchCatecoryList:[],
segmentationType:'product',
segmentationTypeList:[{value:'product',name:'product'},{value:'sketch',name:'sketch'}],
generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
sexList:[
],
// sexList:computed(()=>store.state.UserHabit.sex.value),
femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
sex:'Male',
sexId:1,
ceditorConfig:{
width: 800,
height: 600,
backgroundColor: "#f8f8f8",
},
defaultModel:'',
selectSexAge:{},
})
const createProbject:any = inject('createProbject',()=>{}) as any
const setIsShowMark:any = inject('setIsShowMark')
const dataDom = reactive({
canvasBox:null as any,
})
const selectImgItem = (data:any)=>{
console.log(data)
const selectImgItem = async (value:any)=>{
// getSegmentation(data)
getSegmentation(data)
if(!data.selectObject?.id)await createProbject()
getSegmentation(value)
}
const canvasAddImg = (list:any)=>{
console.log(list)
list.segmentedImages.forEach((url:any) => {
list.imgUrl = url
dataDom.canvasBox.addImage({url})
});
}
const getSegmentation = (value:any)=>{
console.log(value)
let segmentationType = ''
if(value.designType == "Library"){
segmentationType = 'sketch'
@@ -191,7 +204,13 @@ export default defineComponent({
}
const setCanvasJSON = (canvasJSON)=>{
if(!canvasJSON)return
let blob = new Blob([canvasJSON], { type: "application/json" });
let canvasData = JSON.parse(canvasJSON)
console.log(canvasData)
canvasData.canvas.objects.forEach((objectsItem:any) => {
if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
});
let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
let formData = new FormData();
formData.append("file", blob, "data.json");
formData.append("module", "deReconstruction");
@@ -201,7 +220,6 @@ export default defineComponent({
};
Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
(rv) => {
console.log(rv)
}
);
}
@@ -209,9 +227,39 @@ export default defineComponent({
dataDom.canvasBox.setCanvas(str)
}
const getCanvasData = ()=>{
let data = dataDom.canvasBox.getCanvasData()
return data
downloadIamge(data.generateImg[0].url,'downloadIamge')
}
const sexChange = ()=>{
data.selectSexAge = data.sexList.filter((item)=>item.id == data.sexId)[0]
store.commit('setProbject',{sex:data.selectSexAge.value})
if(data.selectSexAge.value == 'Male'){
data.sketchCatecoryList = data.malePosition
}else{
data.sketchCatecoryList = data.femalePosition
}
if(dataDom.canvasBox?.canvasLoad)dataDom.canvasBox.changeFixedImage()
}
onMounted(()=>{
let sexList = store.state.UserHabit.sex.value
let id = 0
data.sexList = []
sexList.forEach((item:any,index) => {
let obj = {
age:'Adult',
name:item.name,
value:item.value,
id:index + 1,
} as any
id = index+1;
data.sexList.push(obj)
});
data.sexList.push({age:'Child',name:t('DeReconstruction.Girls'),value:'Female',id:id+=1})
data.sexList.push({age:'Child',name:t('DeReconstruction.Boys'),value:'Male',id:id+=1})
data.sex = data.sexList[0].value
data.selectSexAge = data.sexList[0]
data.sexId = 1
sexChange()
})
return{
...toRefs(dataDom),
...toRefs(data),
@@ -223,6 +271,7 @@ export default defineComponent({
getCanvasData,
setCanvas,
setCanvasJSON,
sexChange,
}
},
provide() {

10
src/component/home/tools/patternMaking3D/index.vue
View File

@@ -83,7 +83,7 @@
<download ref="download"></download>
</div>
<collection ref="collection" :isNext="false"></collection>
<scaleImage ref="scaleImage"></scaleImage>
<scaleImage ref="scaleImage" :maxWidth="'100rem'"></scaleImage>
</div>
</template>
<script lang="ts">
@@ -141,7 +141,7 @@ export default defineComponent({
}
const createProbject:any = inject('createProbject',()=>{}) as any
const setSelectModel = async (item:any)=>{
if(!data.selectObject.id)await createProbject()
if(!data.selectObject?.id)await createProbject()
data.isShowMark = true
if(!item.threeDSimpleId)return
const value = {
@@ -165,7 +165,7 @@ export default defineComponent({
})
}
const setSelectPrint = async (item:any)=>{
if(!data.selectObject.id)await createProbject()
if(!data.selectObject?.id)await createProbject()
let patternMaking3DData = {
collectionElementId:item.id,
url:item.imgUrl,
@@ -239,7 +239,7 @@ export default defineComponent({
}
const setPrint = async (item:any)=>{
if(dataDom.threeBox){
if(!data.selectObject.id)await createProbject()
if(!data.selectObject?.id)await createProbject()
dataDom.threeBox.addMaterial(item)
const stateData = {
printMinioUrl:getMinioUrl(item.imgUrl || item.url)
@@ -262,7 +262,7 @@ export default defineComponent({
if(!data[str])return
value[str] = data[str]
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
if(rv?.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
})
})
},2000)

70
src/component/home/tools/poseTransfer/index.vue
View File

@@ -18,12 +18,12 @@
<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
<a-spin size="large" />
</div>
<img v-show="item.status != 'uploading'" :src="item.designOutfitUrl || item.imgUrl || item.url" alt="">
<div v-show="item.status != 'uploading'" class="btnBox">
<img v-show="item.designOutfitUrl || item.imgUrl || item.url" :src="item.designOutfitUrl || item.imgUrl || item.url" alt="">
<div v-show="item.designOutfitUrl || item.imgUrl || item.url" class="btnBox">
<div :class="{active:item.isChecked}">
<i class="fi fi-br-check"></i>
</div>
<div @click.stop="setUploadDelete(item,index)">
<div @click.stop="setUploadDelete(item,index)" v-if="source != 'design'">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
@@ -97,7 +97,7 @@
</div>
<div class="likeBox">
<div class="element">
<div class="title"><i class="fi fi-rs-comments"></i><span>{{$t('poseTransfer.InputVideo')}}</span></div>
<div class="title"><i class="fi fi-rs-comments"></i><span>{{$t('poseTransfer.LikeVideo')}}</span></div>
<div class="content">
<generalDrag ref="generalDragLeft" :list="likeList" :isLike="true" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
</div>
@@ -142,6 +142,10 @@ export default defineComponent({
type:Boolean,
default:false,
},
source:{
type:String,
default:'',
},
},
emits:[],
setup(props,{emit}) {
@@ -253,10 +257,29 @@ export default defineComponent({
dataDom.generalDragRight.setItemPosition()
},200)
}
const getgenerate = ()=>{
if(!data.selectImg.minioUrl)return
const getgenerate = async ()=>{
if(!data.selectImg.minioUrl)return message.info(t('ProductImg.jsContent2'))
if(data.isGenerate)return
await new Promise((res,reject)=>{
Modal.confirm({
title: t('poseTransfer.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
res()
},
cancel(){
reject()
}
});
}).then(()=>{
}).catch(()=>{
return
})
data.isGenerate = true
// data.remGenerateTime = setTimeout(()=>{
// },10000)
@@ -265,12 +288,15 @@ export default defineComponent({
projectId:store.state.Workspace.probjects.id,
productImage:data.selectImg.minioUrl,
modelName:speed.speedData.value,
isDefaultLike:false,//表示是否生成就like
parentId:data.selectImg?.parentId,//parentId 添加在指定父级里面
userLikeSortId:null,//是否进行排序
}
Https.axiosPost(Https.httpUrls.poseTransform,value).then((rv)=>{
data.remGenerate = true
data.noLikeList.unshift({taskId:rv,parentId:data.selectImg.parentId})
data.noLikeList.unshift({taskId:rv.taskId,parentId:data.selectImg.parentId})
console.log(data.noLikeList)
setGenerate(rv)
setGenerate([rv.taskId])
}).catch((res:any)=>{
data.isGenerate = false
clearInterval(data.remGenerateTime)
@@ -285,7 +311,7 @@ export default defineComponent({
if(!data.isGenerate || !data.remGenerate)return
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.poseTransformResult,{taskId:list}).then(
Https.axiosPost(Https.httpUrls.poseTransformResult,list).then(
(rv) => {
rv=[rv]
state = true
@@ -408,7 +434,14 @@ export default defineComponent({
}
const noLikeSetBtn = (id:any,str:string)=>{
if(str == 'delete'){
data.noLikeList = data.noLikeList.filter((v:any) => v.id != id);
let value = {
id,
projectId:store.state.Workspace.probjects.id
}
Https.axiosGet(Https.httpUrls.generateDeleteResult,{params:value}).then(()=>{
let index = data.noLikeList.findIndex((v:any) => v.id == id)
data.noLikeList.splice(index,1)
})
}else{
data.noLikeList.forEach((item:any,index:any)=>{
if(item.id == id && id){
@@ -496,19 +529,28 @@ export default defineComponent({
store.commit('setUploadElement',storeData)
})
}
watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
if(props.isDesignPage)return
data.fileList = store.state.HomeStoreModule.uploadElement
})
watch(()=>store.state.Workspace.probjects.id,(newVal,oldVal)=>{
nextTick(()=>{
data.fileList = store.state.HomeStoreModule.uploadElement
let list = store.state.HomeStoreModule.poseTransfer.list
let taskIdList = list.filter((item:any)=>!item.id)
let taskIdList = list.filter((item:any)=>!item.videoUrl)
if(taskIdList.length > 0){
data.isGenerate = true
data.remGenerate = true
console.log(taskIdList)
setGenerate(taskIdList[0].taskId)
setGenerate([taskIdList[0].taskId])
}
})
},{immediate: true })
onBeforeUnmount(()=>{
clearInterval(data.generateTime)
clearInterval(data.remGenerateTime)
data.isGenerate = false
data.remGenerate = false
})
return{
...toRefs(speed),
...toRefs(dataDom),
@@ -813,7 +855,7 @@ export default defineComponent({
}
> .designPage{
padding-left: 4rem;
margin-right: 4rem;
}
> .noLikeBox{
padding-left: 2.3rem;

191
src/component/home/tools/toProduct/index.vue
View File

@@ -6,13 +6,13 @@
<div class="modal_title_text_intro"></div>
</div> -->
<div class="productImg_content_bottom">
<div class="productImg_left" :class="{active:button.left}">
<div class="productImg_left generalModel_state" :class="{active:button.left}">
<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
</div> -->
<div class="selectImg">
<div class="selectImg" style="margin-bottom:2rem">
<div class="head">
<div class="text">{{$t('ProductImg.SelectCollection')}}</div>
<div class="text">{{source == 'design'?$t('ProductImg.DesignSelectCollection'):productimgMenu.value == 'ToProductImage'?$t('ProductImg.SelectCollection'):$t('ProductImg.SelectCollectionRelight')}}</div>
</div>
<div class="imgBox" v-mousewheel>
<!-- <div class="item" :class="[item?.isChecked?'active':'']" v-for="item in selectList[productimgMenu.value]" @click="setGenerate(item)">
@@ -28,7 +28,7 @@
<div :class="{active:item.isChecked}">
<i class="fi fi-br-check"></i>
</div>
<div @click.stop="setUploadDelete(item,index)">
<div @click.stop="setUploadDelete(item,index)" v-if="source != 'design'">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
@@ -61,30 +61,31 @@
</div>
</div>
</div>
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<div v-show="productimgMenu.value == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_similarity">
<div v-show="productimgMenu.value == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
:tooltipVisible="false"
:step="5"
:max="70"
>
</a-slider>
<input type="number" readonly v-model="similarity">
<input style="margin-left: 2rem;" type="number" readonly v-model="similarity">
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.SelectionFunction')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction generalModel_state_item">
<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction generalModel_state_item">
<a-select size="large" style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
@@ -98,7 +99,7 @@
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="brightenValue">
<input style="margin-left: 2rem;" type="number" readonly v-model="brightenValue">
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
@@ -111,6 +112,7 @@
/> -->
<textarea
class="textarea"
ref="textarea"
@input="ifMaximumLength"
:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
@keydown.enter.prevent="getPrductimg()"
@@ -119,6 +121,9 @@
</div>
</div>
</div>
<div class="selectText" v-show="productimgMenu.value == 'ToProductImage' && speedData.value == 'flux'">
<div :title="$t('poseTransfer.hint')" @click="()=>{searchName[productimgMenu.value] = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
</div>
<div class="productImg_content_item_generate_btn input_border">
<div class="generage_btn_box ">
<div v-show="!isProductimg" class="generage_btn started_btn">
@@ -143,7 +148,7 @@
<div class="productImg_right_item_box generalScroll">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('ProductImg.SelectedDesign') }}
{{source == 'design'?$t('ProductImg.DesignSelectedDesign'):$t('ProductImg.SelectedDesign')}}
</span>
</div>
<div class="content">
@@ -163,11 +168,11 @@
<div class="productImg_right_item_box right generalScroll">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('ProductImg.productImageDrafts') }}
{{source == 'design'?$t('ProductImg.DesignproductImageDrafts'):$t('ProductImg.productImageDrafts')}}
</span>
</div>
<div class="content">
<generalDrag ref="generalDragRight" :type="productimgMenu.value" :isCopy="!isDesignPage" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
<generalDrag ref="generalDragRight" :type="productimgMenu.value" :isCopy="!isDesignPage" @setBtn="generateSetBtn" :list="generateList[productimgMenu.value]" :showMark="isShowMark"></generalDrag>
</div>
</div>
</div>
@@ -217,6 +222,10 @@ export default defineComponent({
return {}
}
},
source:{
type:String,
default:'',
},
productimgMenu:{
type:Object,
default:()=>{
@@ -252,11 +261,14 @@ export default defineComponent({
remProductimg:false,//是否出现取消按钮
isProductimg:false,//开始生成
selectProductimgList:[],
generateList:[],
generateList:{
ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList.list),
Relight:computed(()=>store.state.HomeStoreModule.relightList.list),
},
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
likeList:{
ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList),
Relight:computed(()=>store.state.HomeStoreModule.relightList),
ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList.likedList),
Relight:computed(()=>store.state.HomeStoreModule.relightList.likedList),
} as any,
similarity:30,
brightenValue:1,
@@ -265,6 +277,7 @@ export default defineComponent({
left:false,
right:false,
},
textarea:null as any,
})
let speed = reactive({
speedList:[
@@ -288,17 +301,14 @@ export default defineComponent({
value:'flux',
},
})
//watch立即执行一次
watch(()=>productImgData.selectObject.id,(newVal,oldVal)=>{
createProbject.generateList = []
},{immediate: true })
watch(() => route.query.id,
(query:any, oldQuery:any) => {
if(oldQuery && query != oldQuery){
productImgData.generateList = []
}
},
);
// watch(() => route.query.id,
// (query:any, oldQuery:any) => {
// if(oldQuery && query != oldQuery){
// productImgData.generateList = []
// }
// },
// );
watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
if(props.isDesignPage)return
productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
@@ -360,11 +370,11 @@ export default defineComponent({
let arr = store.state.UploadFilesModule.cloudList
if(props.productimgMenu.value == 'ToProductImage'){
let list = JSON.parse(JSON.stringify(arr.toProduct)) || []
productImgData.generateList.unshift(...list)
productImgData.generateList[props.productimgMenu.value].unshift(...list)
store.commit('clearCloudList','ToProductImage')
}else if(props.productimgMenu.value == 'Relight'){
let list = JSON.parse(JSON.stringify(arr.relight)) || []
productImgData.generateList.unshift(...list)
productImgData.generateList[props.productimgMenu.value].unshift(...list)
store.commit('clearCloudList','relight')
}
@@ -383,7 +393,7 @@ export default defineComponent({
item.imgUrl = item.url
});
let value = {
list: rv,
likedList: rv,
str:'add',
index:-1,
}
@@ -466,6 +476,7 @@ export default defineComponent({
})
}
let likeFile = (item:any,str:any,index:any) =>{
console.log(item)
let url
let data = {
toProductImageResultId:[item.id],
@@ -480,8 +491,10 @@ export default defineComponent({
Https.axiosPost(url, data).then(
(rv) => {
if(str == 'like'){
if(rv?.sort)item.oldSort = rv.sort
if(rv?.id)item.userLikeSortId = rv.id
let value = {
list:[item],
likedList:[item],
str:'add',
index:-1,
}
@@ -490,14 +503,14 @@ export default defineComponent({
}else{
store.commit("setRelightList", value);
}
productImgData.generateList.splice(index,1)
productImgData.generateList[props.productimgMenu.value].splice(index,1)
}else{
let value = {
list:[item],
likedList:[item],
str:'splice',
index:index,
}
productImgData.generateList.push(item)
productImgData.generateList[props.productimgMenu.value].push(item)
if(props.productimgMenu.value == 'ToProductImage'){
store.commit("setToProductImage", value);
}else{
@@ -524,17 +537,20 @@ export default defineComponent({
"taskId": "",
"toProductImageRecordId": 0,
"url": "",
parentId:null,
}
if(productImgData.fileList[props.productimgMenu.value]){
productImgData.fileList[props.productimgMenu.value].forEach((item:any)=>{
console.log(item)
if(item.isChecked){
if(item.resultType == 'Design'){
obj.elementId = item.designOutfitId
obj.elementType = 'DesignOutfit'
}else{
obj.elementId = item.id
obj.elementType = item.type || 'ProductElement'
obj.elementType = item.resultType || 'ProductElement'
}
obj.parentId = item?.parentId || item?.userLikeSortId,
selectArr.push(JSON.parse(JSON.stringify(obj)))
}
})
@@ -553,6 +569,8 @@ export default defineComponent({
direction:RelightDirection.value,
brightenValue:productImgData.brightenValue,
imageStrength:(100 - imageStrength)/100,
isDefaultLike:false,//表示是否生成就like
}
productImgData.isProductimg = true
// remPrductimgTime = setTimeout(()=>{
@@ -571,7 +589,7 @@ export default defineComponent({
rv.forEach((item:any)=>{
arr.push(item.taskId)
})
productImgData.generateList.unshift(...rv)
productImgData.generateList[props.productimgMenu.value].unshift(...rv)
setPrductimg(arr)
}
).catch(res=>{
@@ -621,17 +639,14 @@ export default defineComponent({
rv.forEach((element:any) => {
if(element.status == 'Success'){
element.imgUrl = element.url
// if(!productImgData.generateList[props.productimgMenu.value]){
// productImgData.generateList[props.productimgMenu.value] = []
// }
let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
productImgData.generateList[index] = element
let index = productImgData.generateList[props.productimgMenu.value].findIndex((obj:any) => obj.taskId === element.taskId);
productImgData.generateList[props.productimgMenu.value][index] = element
// productImgData.generateList[props.productimgMenu.value].unshift(element)
data = data.filter((item:any) => item !== element.taskId);
}else if(element.status == 'Fail'){
message.info(t('ProductImg.jsContent3'))
let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
productImgData.generateList.splice(index,1)
let index = productImgData.generateList[props.productimgMenu.value].findIndex((obj:any) => obj.taskId === element.taskId);
productImgData.generateList[props.productimgMenu.value].splice(index,1)
data = data.filter((item:any) => item !== element.taskId);
}
});
@@ -648,7 +663,7 @@ export default defineComponent({
}
}
).catch(res=>{
productImgData.generateList.filter((item:any)=>item.status == 'Success')
productImgData.generateList[props.productimgMenu.value].filter((item:any)=>item.status == 'Success')
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productImgData.isProductimg = false
@@ -671,10 +686,10 @@ export default defineComponent({
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
generateProceedList = []
productImgData.generateList = productImgData.generateList.filter((item:any)=>item.status == 'Success')
productImgData.generateList[props.productimgMenu.value] = productImgData.generateList[props.productimgMenu.value].filter((item:any)=>item.status == 'Success')
}
).catch(res=>{
productImgData.generateList = productImgData.generateList.filter((item:any)=>item.status == 'Success')
productImgData.generateList[props.productimgMenu.value] = productImgData.generateList[props.productimgMenu.value].filter((item:any)=>item.status == 'Success')
});
}
}
@@ -747,13 +762,24 @@ export default defineComponent({
}
const generateSetBtn = (id:any,str:string)=>{
if(str == 'delete'){
productImgData.generateList = productImgData.generateList.filter((v:any) => v.id != id);
let type = 'ToProductImage'
if(props.productimgMenu.value == 'Relight')type = 'Relight'
let value = {
type,
id,
projectId:productImgData.selectObject.id
}
Https.axiosGet(Https.httpUrls.historyDeleteResult,{params:value}).then(()=>{
let index = productImgData.generateList[props.productimgMenu.value].findIndex((v:any) => v.id == id)
productImgData.generateList[props.productimgMenu.value].splice(index,1)
})
// productImgData.generateList[props.productimgMenu.value] = productImgData.generateList[props.productimgMenu.value].filter((v:any) => v.id != id);
}else{
productImgData.generateList.forEach((item:any,index:number)=>{
productImgData.generateList[props.productimgMenu.value].forEach((item:any,index:number)=>{
if(item.id == id){
let selectStr = ''
str == 'zoom'?selectStr = 'zoom':selectStr ='like'
setLikeZoom(item,str,index,productImgData.generateList)
setLikeZoom(item,str,index,productImgData.generateList[props.productimgMenu.value])
}
})
}
@@ -778,8 +804,9 @@ export default defineComponent({
setItemPosition()
})
}
const ifMaximumLength = (event:any)=>{
let textarea = event.target as HTMLTextAreaElement;
const ifMaximumLength = async ()=>{
await nextTick()
let textarea = productImgData.textarea;
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
@@ -803,6 +830,28 @@ export default defineComponent({
speed.speedState = false
document.removeEventListener('click',openSpeed)
}
//watch立即执行一次
watch(()=>productImgData.selectObject.id,(newVal,oldVal)=>{
createProbject.generateList = []
let list = []
if(props?.productimgMenu.value == "ToProductImage"){
list = store.state.HomeStoreModule.toProductImageList.list || []
}else{
list = store.state.HomeStoreModule.relightList.list || []
}
let taskIdList = list.filter((item:any)=>!item?.url)
if(taskIdList.length > 0){
let arr:any = []
taskIdList.forEach((item:any)=>{
arr.push(item.taskId)
})
productImgData.isProductimg = true
productImgData.remProductimg = true
productImgData.isShowMark = false
console.log(taskIdList)
setPrductimg(arr)
}
},{immediate: true })
return {
upload,
driver__,
@@ -1103,6 +1152,8 @@ export default defineComponent({
flex-direction: column;
padding-right: 3.8rem;
width: 39rem;
align-items: stretch;
flex-wrap: nowrap;
&.active{
width: 0;
padding: 0;
@@ -1154,19 +1205,29 @@ export default defineComponent({
}
.productImg_content_item_Direction{
padding-bottom: 1rem;
:deep(.ant-select){
margin-right: 0;
margin-bottom: 1rem;
}
.selectText{
margin-bottom: 2rem;
display: flex;
width: 100%;
> div{
background: #efeff1;
width: 100%;
font-size: 1.6rem;
.ant-select-selector::after{
line-height: 1;
margin-right: 1.2rem;
border-radius: 1.6rem;
cursor: pointer;
padding: 1.2rem;
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover{
background: #f5f5f5;
}
.ant-select-selector .ant-select-selection-item{
line-height: 1;
}
.ant-select-selector{
height: auto;
padding: 1rem 1rem;
box-shadow: none !important;
border: calc(0.1rem* 1.2) solid #F1F1F1;
&:first-child{
margin-right: 0;
}
}
}
@@ -1265,6 +1326,6 @@ export default defineComponent({
}
.designPage{
padding-left: 4rem;
margin-right: 4rem;
}
</style>

98
src/component/mainPage/signUp/index.vue
View File

@@ -10,8 +10,8 @@
<div class="info">{{ item?.info }}</div>
<div class="detail">{{ item?.detail }}</div>
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
<div class="gallery_btn gallery_btn_radius" v-if="item?.info != '/'" @click="createAccount">{{ item?.btn }}</div>
<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">Contact us</a>
<div class="gallery_btn gallery_btn_radius" v-if="item?.btn != 'Contact us'" @click="createAccount">{{ item?.btn }}</div>
<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">{{ item?.btn }}</a>
</div>
<ul class="product_detail">
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
@@ -71,6 +71,36 @@
],
btn:'创建账号',
},
{
title: "教育版",
info: "",
detail: "高校多用户管理系统",
highlight: "",
detailList: [
"高校多用户管理系统",
"全校范围内共享信用额度",
"AI辅助设计教学功能",
"支持草图创意与设计灵感教学",
"基础3D设计功能"
],
btn:'联系我们',
},
{
title: "企业版",
info: "",
detail: "企业级多人协作系统",
highlight: "",
detailList: [
"企业级多人协作系统",
"组织内部信用额度共享",
"品牌DNA管理系统，可定制品牌专属设计偏好",
"云端设计生成与管理",
"完整3D设计功能，支持高清打印输出、专业制版与效果图3D渲染",
"企业级数据安全保障",
"适用于服装设计团队与品牌使用"
],
btn:'联系我们',
}
],
productListEn:[
{
@@ -89,33 +119,35 @@
],
btn:'Create account',
},
// {
// title:"Education Edition",
// info:"/",
// detail:"Multi user management system for universities",
// highlight:"",
// detailList:[
// 'Multi user management system for universities',
// 'Credit limits are shared across the entire school',
// 'AI assisted design teaching function',
// 'Support sketch creativity and design inspiration teaching',
// 'Basic 3D design functions',
// ]
// },{
// title:"Enterprise Edition",
// info:"/",
// detail:"Enterprise level multi person collaboration system",
// highlight:"",
// detailList:[
// 'Enterprise level multi person collaboration system',
// 'Internal Credit Sharing within Enterprises',
// 'Brand DNA management system, customizable brand Exclusive design preferences',
// 'Cloud based design generation and management',
// 'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
// 'Enterprise level data security assurance',
// 'Suitable for fashion design teams and brands to use',
// ]
// },
{
title:"Education Edition",
info:"",
detail:"Multi user management system for universities",
highlight:"",
detailList:[
'Multi user management system for universities',
'Credit limits are shared across the entire school',
'AI assisted design teaching function',
'Support sketch creativity and design inspiration teaching',
'Basic 3D design functions',
],
btn:'Contact us',
},{
title:"Enterprise Edition",
info:"",
detail:"Enterprise level multi-person collaboration system",
highlight:"",
detailList:[
'Enterprise level multi-person collaboration system',
'Internal Credit Sharing within organization',
'Brand DNA management system, customizable brand exclusive design preferences',
'Cloud based design generation and management',
'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
'Enterprise level data security assurance',
'Suitable for fashion design teams and brands to use',
],
btn:'Contact us',
},
],
introductList:[
{
@@ -196,8 +228,8 @@
}
.gallery_list{
display: flex;
// justify-content: space-between;
justify-content: center;
justify-content: space-between;
// justify-content: center;
flex-wrap: wrap;
.gallery_item{
width: calc(33.333% - 3rem);
@@ -208,6 +240,10 @@
font-size: 2rem;
margin-bottom: 10px;
}
.info{
line-height: 2rem;
height: 2rem;
}
.info,.detail,.gallery_btn{
font-size: 1.6rem;
}

34
src/component/modules/generalDrag.vue
View File

@@ -62,6 +62,10 @@ export default defineComponent({
const store = useStore();
const data = reactive({
selectIndex:0,
observerData:{
time:false as any,
observer:null as any,
},
})
const dataDom = reactive({
generalDragDom:null as any,
@@ -187,6 +191,7 @@ export default defineComponent({
let value = collItemSize.num
// let num = str == 'like'?value:3
for(let i = 0;i < collItemSize.elList.length;i++){
if(!collItemSize.elList[i].el)return
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
}
@@ -276,15 +281,30 @@ export default defineComponent({
}, 100);
}
onMounted(()=>{
window.addEventListener('resize', setItemPosition)
nextTick(()=>{
let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
collItemSize.likeStyle.width = width + 'px'
collItemSize.likeStyle.height = width * 1.54 + 'px'
})
data.observerData.observer = new ResizeObserver(entries => {
for (let entry of entries) {
clearTimeout(data.observerData.time)
data.observerData.time = setTimeout(()=>{
nextTick(()=>{
collItemSize.num = 2
// if(dataDom.generalDragDom.offsetWidth > 900){
// collItemSize.num = 3
// }else{
// collItemSize.num = 2
// }
let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
collItemSize.likeStyle.width = width + 'px'
collItemSize.likeStyle.height = width * 1.54 + 'px'
setItemPosition()
})
},100)
// const { width } = entry.contentRect;
}
});
data.observerData.observer.observe(dataDom.generalDragDom);
})
onBeforeUnmount(()=>{
window.removeEventListener('resize', setItemPosition)
data.observerData.observer.unobserve(dataDom.generalDragDom);
})
return{
...toRefs(dataDom),

61
src/component/modules/generalMiniCanvas.vue
View File

@@ -3,10 +3,14 @@
<div class="canvasBox" ref="canvasBox">
<editCanvas v-if="canvasLoad" :config="canvasConfig"
@canvasInit="canvasInit"
@changeCanvas="changeCanvas"
ref="editCanvas"></editCanvas>
</div>
<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin: 0 auto;">Save</div>
<div class="btn">
<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin-top: auto;">Save</div>
<div class="gallery_btn" @click="exportElement">Export</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
@@ -31,9 +35,17 @@ export default defineComponent({
imgUrl:{
type:String,
default:''
},
source:{
type:String,
default:''
},
isSubmitCanvasJSON:{
type:Boolean,
default:false
}
},
emits:['submitBase64Data'],
emits:['submitBase64Data','canvasChangeGetJSON'],
setup(props,{emit}) {
const { t } = useI18n();
const store = useStore();
@@ -54,26 +66,36 @@ export default defineComponent({
data.canvasLoad = true
}
const canvasLoadAddImg = (url,id)=>{
console.log(url,{layerId:id,undoable:false})
dataDom.editCanvas.layers[0].id
dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas,imageMode:'contains',undoable:false})
dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas.layers[0].id,imageMode:'contains',undoable:false})
}
const canvasInit = (value)=>{
// return
console.log(value,123123)
setTimeout(()=>{
canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
},1000)
canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
}
const getCanvasData = ()=>{
return canvasExport
}
const canvasSave = ()=>{
dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
emit('submitBase64Data',rv)
if(props.isSubmitCanvasJSON){
emit('canvasChangeGetJSON',{canvasJSON:dataDom.editCanvas.getJSON(),submitDate:0})
}else{
// dataDom.editCanvas.exportImage({isContainBg:props.source == 'detail',isContainFixed:true}).then((rv)=>{
// emit('submitBase64Data',rv)
// })
dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:true}).then((rv)=>{
emit('submitBase64Data',rv)
})
}
}
const exportElement = ()=>{
canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
downloadBase64Image(rv,'canvas')
})
}
const changeCanvas = ()=>{
emit('canvasChangeGetJSON',{canvasJSON:dataDom.editCanvas.getJSON(),submitDate:5000})
}
onMounted(() => {
if(props.imgUrl){
let img = new Image()
@@ -106,6 +128,8 @@ export default defineComponent({
getCanvasData,
canvasSave,
canvasInit,
exportElement,
changeCanvas,
};
},
data(prop) {
@@ -130,12 +154,21 @@ export default defineComponent({
height: 100%;
position: relative;
display: flex;
flex-direction: column;
flex-direction: row;
overflow: hidden;
padding-top: 4rem;
> .canvasBox{
flex: 1;
position: relative;
}
> .btn{
margin-top: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
> div{
margin-top: 1rem;
}
}
}
</style>

98
src/component/modules/generalModalCanvas.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="modalCanvas generalModel" ref="modalCanvas"></div>
<a-modal
class="modalCanvas_modal generalModel"
v-model:visible="addDetails"
:footer="null"
:get-container="() => $refs.modalCanvas"
width="75%"
:maskClosable="false"
:centered="true"
:closable="false"
:destroyOnClose="true"
wrapClassName="#app"
:keyboard="false"
:mask="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
</svg>
</div>
</div>
<div class="addDetails_center">
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
</div>
<div></div>
</a-modal>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
export default defineComponent({
components: {
generalMiniCanvas,
},
emits: ['setSloganData'],
setup(props,{emit}) {
let addDetail = reactive({
imgUrl:''
});
let addDetails = ref(false);
let init = (data,index)=>{
addDetails.value = true
addDetail.imgUrl = data.imgUrl || data.url
}
let submitBase64Data = (data)=>{
emit('setSloganData',data)
cancelDsign()
}
let cancelDsign = ()=>{
addDetails.value = false
}
return {
...toRefs(addDetail),
addDetails,
init,
submitBase64Data,
cancelDsign,
};
},
data() {
return {
};
},
mounted() {},
methods: {
},
});
</script>
<style lang="less" scoped>
.modalCanvas{
width: 0;
height: 0;
}
.modalCanvas_modal {
.closeIcon {
z-index: 2;
}
.addDetails_center{
position: relative;
height: 100%;
display: flex;
flex-direction: column;
margin: 0 auto;
}
.exportCanvasBox_submit{
// margin-top: 2.4rem;
// text-align: center;
}
}
</style>

2
src/component/modules/selectMenu.vue
View File

@@ -91,7 +91,7 @@ defineExpose({})
font-size: 1.6rem;
box-sizing: content-box;
justify-content: center;
padding: 0 2rem;
padding: 0 1rem;
line-height: 5.4rem;
height: 5.4rem;
border-radius: 4rem;

31
src/component/toolsPage/index.vue
View File

@@ -16,7 +16,7 @@
<poseTransfer v-if="openType == 'poseTransfer'" ref="poseTransfer"></poseTransfer>
<deReconstruction v-if="openType == 'deReconstruction'" ref="deReconstruction"></deReconstruction>
<patternMaking3D v-if="openType == 'patternMaking3D'" ref="patternMaking3D"></patternMaking3D>
<canvasUpload v-if="openType == 'canvasUpload'" ref="canvasUpload" :config="ceditorConfig"></canvasUpload>
<canvasUpload v-if="openType == 'canvasUpload'" ref="canvasUpload" @canvasChangeGetJSON="canvasChangeGetJSON" :isSubmitCanvasJSON="true"></canvasUpload>
</div>
</div>
</template>
@@ -25,13 +25,14 @@ import { defineComponent,computed,inject,provide,nextTick,watch,toRefs, reactive
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { downloadIamge,getMinioUrl } from "@/tool/util";
import { useI18n } from 'vue-i18n'
import { useRoute,useRouter } from 'vue-router';
import toProduct from '@/component/home/tools/toProduct/index.vue';
import poseTransfer from '@/component/home/tools/poseTransfer/index.vue';
import deReconstruction from '@/component/home/tools/deReconstruction/index.vue';
import patternMaking3D from '@/component/home/tools/patternMaking3D/index.vue';
import canvasUpload from "@/component/Canvas/index.vue";
import canvasUpload from "@/component/modules/generalMiniCanvas.vue";
import {openTypeList} from "@/tool/listData.js";
export default defineComponent({
@@ -147,11 +148,35 @@ export default defineComponent({
}
provide('setIsShowMark',setIsShowMark)
provide('createProbject',createProbject)
let time = null as any
const canvasChangeGetJSON = async ({canvasJSON,submitDate})=>{
clearTimeout(time)
if(!store.state.Workspace.probjects.id)await createProbject()
time = setTimeout(()=>{
let canvasData = JSON.parse(canvasJSON)
canvasData.canvas.objects.forEach((objectsItem:any) => {
if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
});
let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
let formData = new FormData();
formData.append("file", blob, "data.json");
formData.append("module", "canvas");
formData.append("projectId", store.state.Workspace.probjects.id)
let config = {
headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
};
Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
(rv) => {
}
);
},submitDate)
}
return{
...toRefs(dataDom),
...toRefs(data),
createProbject,
canvasChangeGetJSON,
}
},
provide() {

95
src/lang/cn.ts
View File

@@ -6,6 +6,7 @@ export default {
HISTORY:'历史',
WORKS:'作品广场',
EVENTS:'活动',
Events:'活动',
AdvancedTools:'高级工具',
personal:'个人中心',
bindEmail:'绑定邮箱',
@@ -23,35 +24,40 @@ export default {
SubscribeNow:'立即订阅',
TaskList:'任务列表',
ViewOrders:'查询订单',
toolsToProduct:'产品图',
toolsRelight:'打光',
toolsToTransferPose:'转换姿势',
toolsDeReconstruction:'拼贴',
toolsPatternMaking:'3D模型',
toolsToProduct:'线稿转产品图',
toolsRelight:'产品图编辑',
toolsToTransferPose:'产品图视频',
toolsDeReconstruction:'拼贴重构廓形',
toolsPatternMaking:'制版',
toolsCanvas:'画布',
NewProject:'新建项目',
Rename:'重命名',
Setting:'设置',
BatchGeneration:'批量生成',
Delete:'删除',
onLiked:'取消喜欢',
Language:'语言',
Administrator:'管理员',
Affiliate:'组织',
Tools:'工具',
Tools:'高级工具',
Type:'类型',
Unfold:'展开',
Filter:'筛选',
Unfold:'布局',
expand:'展开',
collapse:'折叠',
Size:'大小',
Small:'小',
Medium:'中等',
Medium:'中',
Large:'大',
All:'全部',
Design:'设计图',
Design:'时装画',
Product:'产品图',
PoseTransfer:'动图',
PoseTransfer:'时装视频',
Today:'今天',
Yesterday:'昨天',
WithinAWeek:'一周内',
Earlier:'更早',
openUpgrade:'升级至专业版',
pastDue:'只有成为正式用户后，您才能使用这些功能~',
jsContent1:'邮箱格式不正确',
jsContent2:'绑定邮箱成功',
@@ -140,9 +146,9 @@ export default {
Payment:'付款',
PurchasePoints:'购买',
paymentmethod:'请选择付款方式',
policy:'继续注册账号即表示您同意我们的使用条款与服务协议。',
policy1:'我承认我已阅读并同意',
policy2:'条款和条件',
policy:'继续注册账号即表示您同意我们的使用',
policy1:'条款',
policy2:'服务协议',
policy3:'(包括服务范围)及',
policy4:'订购协议',
completed:'是否已完成支付？',
@@ -198,7 +204,7 @@ export default {
Reset:'重置',
Design:'设计',
Redesign:'重新设计',
GeneratedDesign:'设计草稿',
GeneratedDesign:'生成线稿',
elementTitle:'设计素材',
recycleBin:'回收站',
SelectedDesign:'设计集',
@@ -220,14 +226,19 @@ export default {
jsContent6:" 就可以开始订阅。感谢您试用我们的服务！",
jsContent9:"您确定要清除当前系列并重新开始吗?",
jsContent10:"二次创作的作品不允许使用'设计'，但是您可以使用'重新设计'",
jsContent11:"取消喜欢后相关联的元素会被删除，确认要删除吗",
},
ProductImg:{
productInput:'输入关键词（例如风格、材质）',
relightInput:'输入关键词（例如场景、地点）',
Finalize:'完成',
SelectCollection:'上传要转换的图片',
SelectedDesign:'产品图集',
productImageDrafts:'产品图草稿',
SelectCollection:'线稿图',
SelectCollectionRelight:'产品图',
DesignSelectCollection:'选择一副插图',
SelectedDesign:'已选',
DesignSelectedDesign:'已选',
productImageDrafts:'生成结果',
DesignproductImageDrafts:'生成结果',
Upload:'上传',
MagicTools:'转换产品图工具',
relightingTool:'打光工具',
@@ -251,10 +262,13 @@ export default {
jsContent3:'您有一张图生成失败，请重试。',
},
poseTransfer:{
SelectDesign:'选择“设计”以应用',
SelectDesign:'产品图',
Selectpose:'选择动作',
InputVideo:'输入的视频',
LikeVideo:'已选',
InputVideo:'生成结果',
GeneratedVideo:'生成的视频',
hint:'将草图改为逼真的照片，这条裙子的材质是牛仔布。',
jsContent1:'生成视频预计需要三分钟，请问是否继续',
},
LibraryPage:{
library:'收藏',
@@ -274,7 +288,7 @@ export default {
NoLabel:'空标签',
unionSet:'并集',
all:'全选',
generated:'所有默认材质都是AiDA自己生成',
generated:'所有默认材质都是AiDA生成',
ImageOnly:'图片',
TextOnly:'文字',
TextImage:'图片-文字',
@@ -407,7 +421,7 @@ export default {
Generate:'生成',
Close:'取消',
currently:'您排在队列中的第{generateLineUp}位',
PIN:'PIN',
PIN:'必须',
Maximum:'最多可上传16张图片，每张图片最大5MB',
Thumbnail:'选择的印花',
inputContent1:'生成图片的标题',
@@ -637,8 +651,9 @@ export default {
jsContent1:'请输入标签名称',
},
works:{
WORKS:'作品广场',
all:'全部',
FavoriteWorks:'点赞的作品',
FavoriteWorks:'我的喜欢',
MyWorks:'我的作品',
RCAworkshop_2024:'AiDA工作坊 2024',
NewYear_2025:'新年 2025',
@@ -883,23 +898,28 @@ export default {
},
newProjectg:{
helpYou:'今天我能为您做些什么呢？',
Chat:'对话',
Setting:'设置',
SeriesDesign:'系列设计',
Chat:'代理模式',
Setting:'手动模式',
SeriesDesign:'整身设计',
SeriesDesignInfo:'系列设计专注于多品类服装的协调设计，是打造统一时尚系列的理想之选。使用“设计资源”面板中的“情绪板”、“印刷板”、“配色板”、“草图板”和“人体模型”工具，收集和整理您的灵感，打造和谐的服装组合。在“草稿”和“系列”面板中，使用“产品图像”、“重新照明”和“转移姿势”等强大工具，完善您的作品。准备就绪后，将所有内容导出到“画布”以展示完整的系列设计。',
SingleDesign:'单品设计',
DeepThinking:'深度思考',
SingleDesignInfo:'单一设计专注于单一服装类别的独立设计，例如 T 恤、连衣裙或夹克，无需考虑与其他单品的搭配。使用“设计资源”面板中的“情绪板”、“打印板”、“配色板”和“草图板”来收集灵感，并专注于打造一件独一无二的作品。完成后，在“草稿”和“收藏”面板中使用“产品图像”、“重新照明”和“传输姿势”等工具优化您的设计，然后导出到“画布”以展示您的个人作品。',
hintList1:'设计一套田园风衣服 ',
hintList2:'设计一套夏日风衣服 ',
hintList3:'设计一套未来风格的衣服 ',
hintListSERIES1:'设计一套以夏日海滩为灵感的连衣裙。',
hintListSERIES2:'设计一套暗色系，哥特风格的上衣。',
hintListSERIES3:'设计一套男童的无帽夹克设计，要求以森林探险为主题。',
hintListSIGNLE1:'设计一套以夏日海滩为灵感的连衣裙。',
hintListSIGNLE2:'设设计一套女童连衣裙，田园风格。',
hintListSIGNLE3:'设计一套男性短袖衬衫，阳光，活力的感觉。',
jsContent1:'文件大小不能超过 5MB。',
jsContent2:'您最多只能上传五张图片。',
jsContent3:'您最多只能上传一个文件。',
},
DeReconstruction:{
GenerateLineDrawing:'生成线条图',
GenerateLineDrawing:'生成线稿图',
Download:'下载',
Girls:"女童",
Boys:"男童",
},
patternMaking3D:{
Clothing:'服装',
@@ -916,6 +936,7 @@ export default {
Rename:'重命名',
Review:'查看',
Delete:'删除',
sequence:'序号',
TaskName:'任务名字',
TaskType:'任务类型',
QuantityGenerated:'生成数量',
@@ -932,8 +953,9 @@ export default {
enterNumber:'请输入数量',
},
brandDNA:{
Addbrand:'添加品牌',
Addbrand:'创建新品牌',
BrandName:'品牌名字',
BrandTextarea:'从描述中创建品牌',
BrandSlogan:'品牌标语',
BrandLogo:'品牌logo',
Generate:'生成',
@@ -942,4 +964,17 @@ export default {
Delete:'删除',
textarea:'请阐述您对这个品牌的看法，我们将帮助您设计出名称、标志以及宣传语。',
},
chat:{
DeepThinking:'深度思考',
message:'输入',
},
Model:{
Style:'风格',
CurrentModel:'当前模特',
all:'全部',
},
libraryList:{
System:'系统',
Library:'库',
},
}

103
src/lang/en.ts
View File

@@ -6,6 +6,7 @@ export default {
HISTORY:'HISTORY',
WORKS:'GALLERY',
EVENTS:'EVENTS',
Events:'Events',
AdvancedTools:'Advanced tools',
personal:'Personal Center',
bindEmail:'bind email',
@@ -23,10 +24,10 @@ export default {
SubscribeNow:'Subscribe now',
TaskList:'Task List',
ViewOrders:'View Orders',
toolsToProduct:'To Product Image',
toolsRelight:'Relight',
toolsToTransferPose:'Transfer Pose',
toolsDeReconstruction:'De/Reconstruction',
toolsToProduct:'Line Drawing to Product',
toolsRelight:'Product Image Editing',
toolsToTransferPose:'Animate Product Image',
toolsDeReconstruction:'Create Sketches',
toolsPatternMaking:'3D Pattern Making',
toolsCanvas:'Canvas',
NewProject:'New Project',
@@ -34,24 +35,29 @@ export default {
Setting:'Setting',
BatchGeneration:'Batch Generation',
Delete:'Delete',
onLiked:'Dislike',
Language:'Language',
Administrator:'Administrator',
Affiliate:'Affiliate',
Tools:'Tools',
Tools:'Advanced Tools',
Type:'Type',
Unfold:'Unfold',
Filter:'Filter',
Unfold:'Layout',
expand:'Expand',
collapse:'Collapse',
Size:'Size',
Small:'Small',
Large:'Large',
Medium:'Medium',
All:'All',
Design:'Design',
Design:'Line Drawing',
Product:'Product',
PoseTransfer:'Pose Transfer',
PoseTransfer:'Video',
Today:'Today',
Yesterday:'Yesterday',
WithinAWeek:'Within a week',
Earlier:'Earlier',
openUpgrade:'Upgrade to Pro',
pastDue:'You can use these features only after becoming a regular user~',
jsContent1:'The email format is incorrect',
jsContent2:'Succeeded in binding the mailbox.',
@@ -140,9 +146,9 @@ export default {
Payment:'Payment',
PurchasePoints:'Purchase points',
paymentmethod:'select a payment method',
policy:'By continuing an account, you agree to our Terms & Conditions',
policy1:'I acknowledge that I have read, understand, and agree with the ',
policy2:'Terms and Conditions',
policy:'By continuing an account, you agree to our',
policy1:'Terms',
policy2:'Conditions',
policy3:' (including the Scope of service) and the ',
policy4:'Subscription Agreement',
completed:'Is payment completed',
@@ -198,7 +204,7 @@ export default {
Reset:'Reset',
Design:'Design',
Redesign:'Redesign',
GeneratedDesign:'Design Drafts',
GeneratedDesign:'Generated Line Drawing',
elementTitle:'Design Assets',
recycleBin:'Recycle Bin',
SelectedDesign:'Design Collection',
@@ -220,21 +226,26 @@ export default {
jsContent6:" to get started. Thank you for trying our services!",
jsContent9:"Are you sure to erase current collection and start over?",
jsContent10:"Re-created works are not allowed to use 'design', but you can use 'redesign'",
jsContent11:"By unliking this, all connected posts will be deleted. Are you sure you want to continue?",
},
ProductImg:{
productInput:'Enter keywords (e.g. Style, Material)',
productInput:'Prompt to describe details',
relightInput:'Enter keywords (e.g. Scene, Location)',
Finalize:'Finalize',
SelectCollection:'Upload or Select an Image',
SelectedDesign:'Image Library',
productImageDrafts:'Draft Images',
SelectCollection:'Line Drawings',
SelectCollectionRelight:'Product Image',
DesignSelectCollection:'Select an illustration',
SelectedDesign:'Selected',
DesignSelectedDesign:'Selected',
productImageDrafts:'Generated',
DesignproductImageDrafts:'Generated',
Upload:'Upload',
Similarity:'Similarity',
SelectionFunction:'Choose Editing Mode',
Highlight:'Adjust Exposure',
RelightDirection:'Set Light Direction',
MagicTools:'To Product lmage Tool',
relightingTool:'Relighting Tool',
relightingTool:'Edit Product Image',
GenerateProduct:'Generate Product',
SelectedProduct:'Selected Product',
Export:'Export',
@@ -251,10 +262,13 @@ export default {
jsContent3:'One of your images failed to generate. Please try again.',
},
poseTransfer:{
SelectDesign:'Select Design to Apply',
SelectDesign:'Product image',
Selectpose:'Select pose',
InputVideo:'Input Video',
LikeVideo:'Selected',
InputVideo:'Generated',
GeneratedVideo:'Generated Video',
hint:'change the sketch to realistic photo, the material of the skirt is denim',
jsContent1:'Video generation will take approximately 3 minutes. Continue?',
},
LibraryPage:{
library:'Library',
@@ -637,16 +651,17 @@ export default {
jsContent1:'Please enter a tag name',
},
works:{
WORKS:'Gallery',
all:'All',
FavoriteWorks:'Like Works',
FavoriteWorks:'My Likes',
MyWorks:'My Works',
RCAworkshop_2024:'AiDA Workshop 2024',
NewYear_2025:'NewYear 2025',
},
Publish:{
Publish:'Publish to gallery',
Publish:'Share',
CoverPicture:'Cover Picture',
CollectionTitle:'Collection Title',
CollectionTitle:'Share to gallery Title',
topic:'Topic',
Description:'Description',
Permissions:'Permissions',
@@ -883,16 +898,19 @@ export default {
},
newProjectg:{
helpYou:'How can I help you today?',
Chat:'Chat',
Setting:'Setting',
SeriesDesign:'Series Design',
Chat:'Agent Mode',
Setting:'Manual Mode',
SeriesDesign:'Overall illustrantion design',
SeriesDesignInfo:'Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. Gather and arrange your inspiration using the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin tools in the Design Assets panel to build harmonious outfit combinations. Refine your creations in the Draft and Collection panels using powerful tools like To Product Image, Relight, and Transfer Pose. When you’re ready, export everything to the Canvas to display your complete series design.',
SingleDesign:'Single Design',
SingleDesign:'Single item design',
DeepThinking:'Deep Thinking',
SingleDesignInfo:'Single Design focuses on creating an individual clothing item, such as a T-shirt, dress, or jacket, without coordinating it with other pieces. Use the Moodboard, Printboard, Colorboard, and Sketchboard sections in the Design Assets panel to gather inspiration and develop a unique design. Once finished, refine your work in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your standalone creation. ',
hintList1:'Design a set of countryside-inspired clothes',
hintList2:'Design a summer-inspired outfit set.',
hintList3:'Design a set of futuristic-style clothing.',
hintListSERIES1:'Design a collection of futuristic clothes, deep purple color scheme.',
hintListSERIES2:'Design a set of bright-colored, Bohemian-style dresses.',
hintListSERIES3:'Design a set of hip-hop street style denim jackets for boys.',
hintListSIGNLE1:'A silver-gray, steampunk-style windbreaker.',
hintListSIGNLE2:'Design a set of skirts in bright colors and ethnic styles.',
hintListSIGNLE3:'Design a set of bright-colored, Bohemian-style dresses.',
jsContent1:'The file size cannot exceed 5MB.',
jsContent2:'You can only upload five pictures.',
jsContent3:'You can only upload one file.',
@@ -900,6 +918,8 @@ export default {
DeReconstruction:{
GenerateLineDrawing:'Generate Line Drawing',
Download:'Download',
Girls:"Girls' Fashion",
Boys:"Boys' Fashion",
},
patternMaking3D:{
Clothing:'Clothing',
@@ -916,13 +936,14 @@ export default {
Rename:'Rename',
Review:'Review',
Delete:'Delete',
sequence:'Sequence',
TaskName:'Task Name',
TaskType:'Task Type',
QuantityGenerated:'Generation Quality',
QuantityGenerated:'Quantity',
Quantity:'Quantity',
CreationTime:'Date Created',
StartTime:'Start time',
UpdateTime:'Updated At',
CreationTime:'Created Time',
StartTime:'Start Time',
UpdateTime:'Update Time',
Status:'Status',
Keyword:'Keyword',
CostCredit:'Cost credit',
@@ -932,8 +953,9 @@ export default {
enterNumber:'Please enter number',
},
brandDNA:{
Addbrand:'Add brand',
Addbrand:'Create new brand',
BrandName:'Brand Name',
BrandTextarea:'Generating brand from description',
BrandSlogan:'Brand Slogan',
BrandLogo:'Brand Logo',
Generate:'Generate',
@@ -942,4 +964,17 @@ export default {
Delete:'Delete',
textarea:'Please enter your thoughts about this brand, and we will help you generate the name, logo, and slogan.',
},
chat:{
DeepThinking:'Deep Thinking',
message:'Write your message',
},
Model:{
Style:'Style',
CurrentModel:'Current Model',
all:'All',
},
libraryList:{
System:'System',
Library:'Library',
},
}

6
src/store/Detail/designDetailCopy.ts
View File

@@ -52,7 +52,7 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = v.priority
// front[index].style.zIndex = v.priority
front[index].id = v.id
front[index].undividedLayer = v.undividedLayer
}else{
@@ -206,6 +206,10 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
}
let el:any = document.querySelector('.molepositon .perview_img')
await new Promise((resolve, reject) => {
if(!state.frontBack?.body?.path){
state.frontBack.front[0].undividedLayer = value.rv.clothes[0].undividedLayer
resolve('')
}
const img = new Image();
img.src = state.frontBack.body.path;
img.onload = () => {

61
src/store/homeStore/homeStore.ts
View File

@@ -32,8 +32,14 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
templateImgUrl:'',
designId:'',
showSketchList:[],
toProductImageList:[],
relightList:[],
toProductImageList:{
list:[],
likedList:[],
},
relightList:{
list:[],
likedList:[],
},
uploadElement:[],
poseTransfer:{
list:[],
@@ -46,6 +52,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
categoryValue:'23',
categoryShow:false
}],
deReconstructionUploadImages:[],
patternMaking3D:{
collectionElementId:null,
threeDSimpleId:null,
@@ -73,9 +80,18 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
},
setRelightList(state,data){
if(data.str == 'add'){
state.relightList.unshift(...data.list)
if(data.list){
state.relightList.list.unshift(...data.list)
}
if(data.likedList){
state.relightList.likedList.unshift(...data.likedList)
}
}else{
state.relightList.splice(data.index,1)
if(data.list){
state.relightList.list.splice(data.index,1)
}else if(data.likedList){
state.relightList.likedList.splice(data.index,1)
}
}
},
setUploadElement(state,data){
@@ -107,6 +123,12 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
}
}
},
toolsClear(state){
state.relightList.likedList = []
state.uploadElement = []
state.toProductImageList.likedList = []
state.poseTransfer.likedList = []
},
setDeReconstruction(state,data){
if(data.str == 'add'){
state.deReconstruction = []
@@ -117,6 +139,13 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
}else{
state.deReconstruction.splice(data.index,1)
}
},
setDeReconstructionUploadImages(state,data){
if(data.str == 'add'){
state.deReconstructionUploadImages.unshift(...data.list)
}else{
state.deReconstructionUploadImages.splice(data.index,1)
}
},
setPatternMaking3D(state,data){
for (const key in data) {
@@ -134,9 +163,18 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
},
setToProductImage(state,data){
if(data.str == 'add'){
state.toProductImageList.unshift(...data.list)
if(data.list){
state.toProductImageList.list.unshift(...data.list)
}
if(data.likedList){
state.toProductImageList.likedList.unshift(...data.likedList)
}
}else{
state.toProductImageList.splice(data.index,1)
if(data.list){
state.toProductImageList.list.splice(data.index,1)
}else if(data.likedList){
state.toProductImageList.likedList.splice(data.index,1)
}
}
},
setDeleteDesignCollectionList(state,data){
@@ -188,14 +226,21 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
state.likeDesignCollectionList = []
state.designCollectionId = ''
state.deleteDesignCollectionList = []
state.relightList = []
state.relightList = {
list:[],
likedList:[],
}
state.uploadElement = []
state.toProductImageList = []
state.toProductImageList = {
list:[],
likedList:[],
}
state.poseTransfer = {
list:[],
likedList:[],
}
state.deReconstruction = null
state.deReconstructionUploadImages = []
state.patternMaking3D = {
collectionElementId:null,
threeDSimpleId:null,

7
src/store/userHabit/userHabit.ts
View File

@@ -3,6 +3,8 @@ import {RootState} from '../index'
import { Https } from "@/tool/https";
import { setLang } from "@/tool/guide";
import { setCookie } from "@/tool/cookie";
import { useI18n } from "vue-i18n";
import store from '../index'
interface UserHabit{
clothingType:any,
@@ -266,7 +268,7 @@ const userHabit : Module<UserHabit,RootState> = {
if(data.systemUser != 0)state.userDetail.systemList.push(1)
if(data.affiliate)state.userDetail.systemList.push(2)
let adminIdList = [88,6,46,31,73,83,87,4,11482,11630,12201,12592,23534]
let adminIdList = [88,6,46,31,73,83,87,4,11482,11630,12201,12592,23534,23705]
// if(data.email == '' || data.email)state.userDetail.systemList.push(3)
if(adminIdList.indexOf(data.userId) > -1 || data.systemUser == 6 || data.systemUser == 7){
state.userDetail.systemList.push(3)
@@ -389,7 +391,8 @@ const userHabit : Module<UserHabit,RootState> = {
item.value = item.name
item.name = name
});
rv.unshift({name:'All',value:'',id:''})
const {t} = useI18n()
rv.unshift({name:t('Model.all'),value:'',id:''})
store.commit('setMannequinStyle',rv)
resolve('')
}

4
src/store/workspace/workspace.ts
View File

@@ -16,6 +16,7 @@ const Workspace : Module<DesignDetail,RootState> = {
workspaceSex:{},
workspacePosition:{},
workspaceAllPosition:{},
openChat:false,
probjects:{
name:'',//项目名称
id:'',//项目id
@@ -53,6 +54,9 @@ const Workspace : Module<DesignDetail,RootState> = {
// a.download = 'video.mp4'
// a.click()
},
setOpenChatStatus(state,boolean){
state.openChat = boolean
},
setWorkspaceSex(state,files){
state.workspaceSex = files
},

2
src/tool/flexible.js
View File

@@ -4,7 +4,7 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
designWidth = designWidth || 1920;
maxWidth = maxWidth || 2560;
minWidth = minWidth || 500;
minWidth = minWidth || 1024;
// minWidth = minWidth || 1024;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;

8
src/tool/https.js
View File

@@ -181,6 +181,7 @@ export const Https = {
elementSavePrint:'/api/element/savePrint',//保存印花
getRgbByTcx:'/api/element/getRgbByTcx', // 通过hsv值获取潘通信息
getRgbByHsv:'/api/element/getRgbByHsv', //通过hsv值获取潘通信息
elementDelete:'/api/element/delete', //删除上传的图片
designCollection:`/api/design/designCollection`, //设计 Conllection
reDesignCollection:`/api/design/reDesignCollection`,//重新设计 Conllection
countDesignProcess:'/api/design/countDesignProcess', //统计design进度
@@ -223,7 +224,8 @@ export const Https = {
designSingle:`/api/design/detail/designSingle`,//单个design
queryLibraryPage:`/api/library/queryLibraryPage`,//Library分页列表
libraryUpload:`/api/library/upload`, // Library文件上传
setSketchLibrary:`/api/library/updateLibraryLevel2Type`, // Library文件上传
setSketchLibrary:`/api/library/updateLibraryLevel2Type`, // 修改图片类型
updateElementLevel2Type:`/api/element/updateElementLevel2Type`, // 修改拼贴上传的衣服类型
queryClassification:`/api/classification/queryClassification`,//标签类别查询
classificationSaveOrUpdate:`/api/classification/saveOrUpdate`,//标签类别新增修改
@@ -337,6 +339,7 @@ export const Https = {
addOrUpdateSubAccount:`/api/account/addOrUpdateSubAccount`,//添加子账号
deleteSubAccount:`/api/account/deleteSubAccount`,//删除子账号
subAccountImportExcelDownload:`/api/account/subAccountImportExcelDownload`,//批量添加模板下载模板
getNextSequence:`/api/project/getNextSequence`,//批量添加模板下载模板
subAccountImport:`/api/account/subAccountImport`,//模板导入
getGenerateFrequency:`/api/inquiry/getGenerateFrequency`,//积分使用详情
getAllGenerateFuncName:`/api/inquiry/getAllGenerateFuncName`,//获取所有generate类型
@@ -391,6 +394,9 @@ export const Https = {
toProduct:`/api/history/toProduct`,//开始生成
toProductImageResult:`/api/history/toProductImageResult`,//获取结果
toProductImageElementUpload:`/api/history/toProductImageElementUpload`,//上传
historyDeleteResult:`/api/history/deleteResult`,//relight toproduct删除
generateDeleteResult:`/api/generate/deleteResult`,//pose删除
productImageLike:`/api/history/productImageLike`,//like生成结果
productImageUnLike:`/api/history/productImageUnLike`,//取消like生成结果
productImageLikeList:`/api/history/productImageLikeList`,//like生成结果

Some files were not shown because too many files have changed in this diff Show More