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

push Develop

Browse Source
This commit is contained in:
X1627315083
2024-06-17 09:39:01 +08:00
parent c93483e36f
commit 363b880276
55 changed files with 5880 additions and 1359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.dev
View File

@@ -7,6 +7,6 @@ VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
# VUE_APP_BASE_URL = 'http://192.168.1.9:17088'
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
# 佩佩
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
# 海波
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
VUE_APP_BASE_URL = 'http://192.168.1.9:5567'

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

@@ -116,9 +116,15 @@ li {
border-radius: 5px;
padding: 0.6rem 0.5rem;
}
.select_block {
height: 4rem;
}
.select_block .ant-select {
height: 100%;
}
.select_block .ant-select:not(.ant-select-customize-input) .ant-select-selector {
background: transparent;
height: 4rem;
height: 95%;
border: 0.1rem solid rgba(0, 0, 0, 0) !important;
border-radius: 0;
box-shadow: none !important;
@@ -467,6 +473,9 @@ li {
top: auto;
margin: 0 9rem;
}
.ant-modal {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}
.ant-modal-confirm-confirm .ant-modal-content {
border-radius: 1rem;
}
@@ -609,8 +618,6 @@ li {
.generalModel .ant-modal-body {
padding: 0;
height: calc(65rem*1.2);
}
.generalModel .ant-modal-body {
padding: calc(4rem*1.2) calc(5rem*1.2);
}
.generalModel .fi-rr-down-to-line,
@@ -937,14 +944,17 @@ li {
height: 2.2rem;
align-items: center;
}
.pin_block .ant-checkbox-wrapper span {
.pin_block .ant-checkbox-wrapper > span {
height: 100%;
}
.pin_block .ant-checkbox-wrapper > span {
font-size: 1.4rem;
line-height: 2.3rem;
}
.pin_block .ant-checkbox-wrapper span .ant-checkbox-input::after {
.pin_block .ant-checkbox-wrapper > span .ant-checkbox-input::after {
height: auto;
}
.pin_block .ant-checkbox-wrapper span.ant-checkbox-checked::after {
.pin_block .ant-checkbox-wrapper > span.ant-checkbox-checked::after {
border: 1px solid rgba(0, 0, 0, 0);
}
.ant-checkbox-inner {
@@ -1230,7 +1240,9 @@ li {
}
.designOpenrtion_modal .design_closeIcon,
.designOpenrtionMobile_modal .design_closeIcon,
.design_detail_modal_component .design_closeIcon {
.design_detail_modal_component .design_closeIcon,
.designElements_modal .design_closeIcon,
.designElementsMobile_modal .design_closeIcon {
top: 2rem;
right: 2rem;
cursor: pointer;
@@ -1243,7 +1255,9 @@ li {
}
.designOpenrtion_modal .design_closeIcon .fi-rr-cross-small::before,
.designOpenrtionMobile_modal .design_closeIcon .fi-rr-cross-small::before,
.design_detail_modal_component .design_closeIcon .fi-rr-cross-small::before {
.design_detail_modal_component .design_closeIcon .fi-rr-cross-small::before,
.designElements_modal .design_closeIcon .fi-rr-cross-small::before,
.designElementsMobile_modal .design_closeIcon .fi-rr-cross-small::before {
padding: 0.2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
@@ -1252,33 +1266,41 @@ li {
}
.designOpenrtion_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before,
.designOpenrtionMobile_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before,
.design_detail_modal_component .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before {
.design_detail_modal_component .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before,
.designElements_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before,
.designElementsMobile_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before {
border: solid 2px rgba(0, 0, 0, 0.55);
color: #000000;
}
.design_detail_modal_component .ant-upload-list-picture-card-container,
.designOpenrtion_modal .ant-upload-list-picture-card-container,
.designElements_modal .ant-upload-list-picture-card-container,
.UpgradePlan_modal .ant-upload-list-picture-card-container,
.refund_reason .ant-upload-list-picture-card-container,
.Export .ant-upload-list-picture-card-container,
.designOpenrtionMobile_modal .ant-upload-list-picture-card-container {
.designOpenrtionMobile_modal .ant-upload-list-picture-card-container,
.designElementsMobile_modal .ant-upload-list-picture-card-container {
display: none !important;
}
.design_detail_modal_component .ant-upload-picture-card-wrapper,
.designOpenrtion_modal .ant-upload-picture-card-wrapper,
.designElements_modal .ant-upload-picture-card-wrapper,
.UpgradePlan_modal .ant-upload-picture-card-wrapper,
.refund_reason .ant-upload-picture-card-wrapper,
.Export .ant-upload-picture-card-wrapper,
.designOpenrtionMobile_modal .ant-upload-picture-card-wrapper {
.designOpenrtionMobile_modal .ant-upload-picture-card-wrapper,
.designElementsMobile_modal .ant-upload-picture-card-wrapper {
width: auto;
vertical-align: top;
}
.design_detail_modal_component .subitOkPreviewBtn,
.designOpenrtion_modal .subitOkPreviewBtn,
.designElements_modal .subitOkPreviewBtn,
.UpgradePlan_modal .subitOkPreviewBtn,
.refund_reason .subitOkPreviewBtn,
.Export .subitOkPreviewBtn,
.designOpenrtionMobile_modal .subitOkPreviewBtn {
.designOpenrtionMobile_modal .subitOkPreviewBtn,
.designElementsMobile_modal .subitOkPreviewBtn {
background-color: #38205b;
color: #fff;
cursor: pointer;
@@ -1304,13 +1326,19 @@ i {
opacity: 0.5;
transform: scale(0.9);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
textarea:focus {
outline: none;
/* 清除默认焦点样式 */
}
.collection_modal_body .input_border,
.design_detail_modal_component .input_border,
.library_page .input_border {
.library_page .input_border,
.productImg_modal .input_border {
z-index: 2;
display: flex;
align-items: center;
@@ -1323,7 +1351,8 @@ textarea:focus {
}
.collection_modal_body .input_border .input_box,
.design_detail_modal_component .input_border .input_box,
.library_page .input_border .input_box {
.library_page .input_border .input_box,
.productImg_modal .input_border .input_box {
position: relative;
z-index: 2;
flex: 1;
@@ -1333,35 +1362,41 @@ textarea:focus {
}
.collection_modal_body .input_border .input_box .inputShowText,
.design_detail_modal_component .input_border .input_box .inputShowText,
.library_page .input_border .input_box .inputShowText {
.library_page .input_border .input_box .inputShowText,
.productImg_modal .input_border .input_box .inputShowText {
width: 100%;
display: none;
}
.collection_modal_body .input_border .input_box.active .input_box_btnBox,
.design_detail_modal_component .input_border .input_box.active .input_box_btnBox,
.library_page .input_border .input_box.active .input_box_btnBox,
.productImg_modal .input_border .input_box.active .input_box_btnBox,
.collection_modal_body .input_border .input_box.active textarea,
.design_detail_modal_component .input_border .input_box.active textarea,
.library_page .input_border .input_box.active textarea {
.library_page .input_border .input_box.active textarea,
.productImg_modal .input_border .input_box.active textarea {
border: 1px solid #ff0001;
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
}
.collection_modal_body .input_border .input_box.active span,
.design_detail_modal_component .input_border .input_box.active span,
.library_page .input_border .input_box.active span {
.library_page .input_border .input_box.active span,
.productImg_modal .input_border .input_box.active span {
opacity: 1;
display: block;
color: rgba(255, 0, 0.7);
}
.collection_modal_body .input_border .search_keyword,
.design_detail_modal_component .input_border .search_keyword,
.library_page .input_border .search_keyword {
.library_page .input_border .search_keyword,
.productImg_modal .input_border .search_keyword {
height: 0;
flex-basis: 100%;
}
.collection_modal_body .input_border .search_keyword .search_keyword_center,
.design_detail_modal_component .input_border .search_keyword .search_keyword_center,
.library_page .input_border .search_keyword .search_keyword_center {
.library_page .input_border .search_keyword .search_keyword_center,
.productImg_modal .input_border .search_keyword .search_keyword_center {
justify-content: space-between;
display: flex;
width: var(--width);
@@ -1377,7 +1412,8 @@ textarea:focus {
}
.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
display: flex;
overflow: hidden;
flex: 1;
@@ -1385,7 +1421,8 @@ textarea:focus {
}
.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
border-radius: 0.4rem;
border: solid 1px #39215b;
background-color: #8156bd;
@@ -1399,12 +1436,14 @@ textarea:focus {
}
.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
margin-right: 0;
}
.collection_modal_body .input_border .input_box_btnBox,
.design_detail_modal_component .input_border .input_box_btnBox,
.library_page .input_border .input_box_btnBox {
.library_page .input_border .input_box_btnBox,
.productImg_modal .input_border .input_box_btnBox {
border: calc(0.1rem*1.2) solid #F1F1F1;
width: var(--width);
display: flex;
@@ -1412,18 +1451,31 @@ textarea:focus {
}
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
.library_page .input_border .input_box_btnBox .ant-spin-text {
.library_page .input_border .input_box_btnBox .ant-spin-text,
.productImg_modal .input_border .input_box_btnBox .ant-spin-text {
font-size: 1.2rem;
}
.collection_modal_body .input_border .input_box_btnBox .search_seed,
.design_detail_modal_component .input_border .input_box_btnBox .search_seed,
.library_page .input_border .input_box_btnBox .search_seed,
.productImg_modal .input_border .input_box_btnBox .search_seed {
padding: 0;
width: 4rem;
text-align: center;
font-size: 1.2rem;
border-right: calc(0.1rem*1.2) solid #F1F1F1;
}
.collection_modal_body .input_border .upload_item .upload_file_item,
.design_detail_modal_component .input_border .upload_item .upload_file_item,
.library_page .input_border .upload_item .upload_file_item {
.library_page .input_border .upload_item .upload_file_item,
.productImg_modal .input_border .upload_item .upload_file_item {
width: 8rem;
height: 8rem;
}
.collection_modal_body .input_border input,
.design_detail_modal_component .input_border input,
.library_page .input_border input {
.library_page .input_border input,
.productImg_modal .input_border input {
width: 100%;
border-radius: calc(0.5rem*1.2);
border: 1px solid rgba(0, 0, 0, 0.15);
@@ -1434,32 +1486,38 @@ textarea:focus {
}
.collection_modal_body .input_border inputinput:-moz-placeholder,
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
.library_page .input_border inputinput:-moz-placeholder {
.library_page .input_border inputinput:-moz-placeholder,
.productImg_modal .input_border inputinput:-moz-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_border inputinput:-ms-input-placeholder,
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
.library_page .input_border inputinput:-ms-input-placeholder {
.library_page .input_border inputinput:-ms-input-placeholder,
.productImg_modal .input_border inputinput:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_border inputinput::-webkit-input-placeholder,
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
.library_page .input_border inputinput::-webkit-input-placeholder {
.library_page .input_border inputinput::-webkit-input-placeholder,
.productImg_modal .input_border inputinput::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_border input.forbidden,
.design_detail_modal_component .input_border input.forbidden,
.library_page .input_border input.forbidden {
.library_page .input_border input.forbidden,
.productImg_modal .input_border input.forbidden {
cursor: no-drop;
}
.collection_modal_body .input_border .input_box_btnBox_upImg,
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
.library_page .input_border .input_box_btnBox_upImg {
.library_page .input_border .input_box_btnBox_upImg,
.productImg_modal .input_border .input_box_btnBox_upImg {
height: 100%;
}
.collection_modal_body .input_border .fi,
.design_detail_modal_component .input_border .fi,
.library_page .input_border .fi {
.library_page .input_border .fi,
.productImg_modal .input_border .fi {
margin-right: 1rem;
display: flex;
cursor: pointer;
@@ -1473,23 +1531,27 @@ textarea:focus {
}
.collection_modal_body .input_border .fi.fi-br-loading,
.design_detail_modal_component .input_border .fi.fi-br-loading,
.library_page .input_border .fi.fi-br-loading {
.library_page .input_border .fi.fi-br-loading,
.productImg_modal .input_border .fi.fi-br-loading {
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.collection_modal_body .input_border .fi.active,
.design_detail_modal_component .input_border .fi.active,
.library_page .input_border .fi.active {
.library_page .input_border .fi.active,
.productImg_modal .input_border .fi.active {
transform: rotate(180deg);
}
.collection_modal_body .input_border .fi.forbidden,
.design_detail_modal_component .input_border .fi.forbidden,
.library_page .input_border .fi.forbidden {
.library_page .input_border .fi.forbidden,
.productImg_modal .input_border .fi.forbidden {
cursor: no-drop;
}
.collection_modal_body .input_border .search_upImg,
.design_detail_modal_component .input_border .search_upImg,
.library_page .input_border .search_upImg {
.library_page .input_border .search_upImg,
.productImg_modal .input_border .search_upImg {
width: 4rem;
height: 100%;
position: absolute;
@@ -1498,20 +1560,23 @@ textarea:focus {
}
.collection_modal_body .input_border .search_upImg span,
.design_detail_modal_component .input_border .search_upImg span,
.library_page .input_border .search_upImg span {
.library_page .input_border .search_upImg span,
.productImg_modal .input_border .search_upImg span {
position: absolute;
width: 100%;
}
.collection_modal_body .input_border .search_upImg .ant-upload-select-picture-card,
.design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
.library_page .input_border .search_upImg .ant-upload-select-picture-card {
.library_page .input_border .search_upImg .ant-upload-select-picture-card,
.productImg_modal .input_border .search_upImg .ant-upload-select-picture-card {
width: 100%;
height: 100%;
display: block !important;
}
.collection_modal_body .input_border .search_textarea,
.design_detail_modal_component .input_border .search_textarea,
.library_page .input_border .search_textarea {
.library_page .input_border .search_textarea,
.productImg_modal .input_border .search_textarea {
z-index: 3;
height: auto;
position: absolute;
@@ -1525,18 +1590,21 @@ textarea:focus {
}
.collection_modal_body .input_border .generage_btn,
.design_detail_modal_component .input_border .generage_btn,
.library_page .input_border .generage_btn {
.library_page .input_border .generage_btn,
.productImg_modal .input_border .generage_btn {
margin-left: 2rem;
}
.collection_modal_body .upload_item,
.design_detail_modal_component .upload_item,
.library_page .upload_item {
.library_page .upload_item,
.productImg_modal .upload_item {
display: flex;
flex-wrap: wrap;
}
.collection_modal_body .upload_item .upload_file_item,
.design_detail_modal_component .upload_item .upload_file_item,
.library_page .upload_item .upload_file_item {
.library_page .upload_item .upload_file_item,
.productImg_modal .upload_item .upload_file_item {
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
@@ -1548,24 +1616,28 @@ textarea:focus {
}
.collection_modal_body .upload_item .upload_file_item.active,
.design_detail_modal_component .upload_item .upload_file_item.active,
.library_page .upload_item .upload_file_item.active {
.library_page .upload_item .upload_file_item.active,
.productImg_modal .upload_item .upload_file_item.active {
opacity: 0.5;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
}
.collection_modal_body .upload_item .upload_file_item.active .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item.active .delete_file_block,
.library_page .upload_item .upload_file_item.active .delete_file_block {
.library_page .upload_item .upload_file_item.active .delete_file_block,
.productImg_modal .upload_item .upload_file_item.active .delete_file_block {
pointer-events: none;
}
.collection_modal_body .upload_item .upload_file_item.active .operate_file_block,
.design_detail_modal_component .upload_item .upload_file_item.active .operate_file_block,
.library_page .upload_item .upload_file_item.active .operate_file_block {
.library_page .upload_item .upload_file_item.active .operate_file_block,
.productImg_modal .upload_item .upload_file_item.active .operate_file_block {
pointer-events: none;
}
.collection_modal_body .upload_item .upload_file_item.upload_component,
.design_detail_modal_component .upload_item .upload_file_item.upload_component,
.library_page .upload_item .upload_file_item.upload_component {
.library_page .upload_item .upload_file_item.upload_component,
.productImg_modal .upload_item .upload_file_item.upload_component {
border: none;
display: flex;
align-items: center;
@@ -1573,7 +1645,8 @@ textarea:focus {
}
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
position: absolute;
top: 50%;
left: 50%;
@@ -1581,7 +1654,8 @@ textarea:focus {
}
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
width: calc(6rem*1.2);
height: calc(6rem*1.2);
border: calc(0.3rem*1.2) solid #ededed;
@@ -1590,7 +1664,8 @@ textarea:focus {
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content,
.library_page .upload_item .upload_file_item .upload_file_item_content {
.library_page .upload_item .upload_file_item .upload_file_item_content,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content {
display: flex;
align-items: center;
justify-content: center;
@@ -1600,17 +1675,20 @@ textarea:focus {
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover div,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover div,
.library_page .upload_item .upload_file_item .upload_file_item_content:hover div {
.library_page .upload_item .upload_file_item .upload_file_item_content:hover div,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover div {
opacity: 1;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
display: block;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .upload_img,
.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img {
.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .upload_img {
display: block;
height: 100%;
width: auto;
@@ -1619,7 +1697,8 @@ textarea:focus {
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
display: none;
width: 100%;
cursor: pointer;
@@ -1635,7 +1714,8 @@ textarea:focus {
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
width: calc(3.2rem*1.2);
height: calc(3.2rem*1.2);
background: rgba(0, 0, 0, 0.6);
@@ -1649,18 +1729,21 @@ textarea:focus {
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
font-size: calc(1.6rem*1.2);
color: #fff;
}
.collection_modal_body .upload_item .upload_file_item .upload_img_icon,
.design_detail_modal_component .upload_item .upload_file_item .upload_img_icon,
.library_page .upload_item .upload_file_item .upload_img_icon {
.library_page .upload_item .upload_file_item .upload_img_icon,
.productImg_modal .upload_item .upload_file_item .upload_img_icon {
width: calc(4.6rem*1.2);
}
.collection_modal_body .upload_item .upload_file_item:last-child,
.design_detail_modal_component .upload_item .upload_file_item:last-child,
.library_page .upload_item .upload_file_item:last-child {
.library_page .upload_item .upload_file_item:last-child,
.productImg_modal .upload_item .upload_file_item:last-child {
margin: 0;
}
.generalModel_modal .ant-modal-content {

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

@@ -127,9 +127,13 @@ input:focus{
}
.select_block{
height: 4rem;
.ant-select{
height: 100%;
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
background: transparent;
height: 4rem;
height: 95%;
border: 0.1rem solid rgba(0,0,0,0) !important;
// border: 0.1rem solid #000 !important;
border-radius: 0;
@@ -533,6 +537,7 @@ input:focus{
//弹窗公共样式
.ant-modal{
box-shadow: 0px 0px 6px rgba(0, 0, 0, .2);
&.ant-modal-confirm{
&.ant-modal-confirm-confirm{
// top: 50%;
@@ -696,13 +701,10 @@ input:focus{
// height: calc(65vh - 6.4rem);
height: calc(65rem*1.2);
// background-color: #181818;
padding: calc(4rem*1.2) calc(5rem*1.2);
}
.ant-modal-btn{
}
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2);
}
.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
font-size: 2rem;
@@ -1068,7 +1070,10 @@ input:focus{
.ant-checkbox-wrapper{
height: 2.2rem;
align-items: center;
span{
>span{
height: 100%;
}
>span{
font-size: 1.4rem;
line-height: 2.3rem;
.ant-checkbox-input::after{
@@ -1339,7 +1344,7 @@ input:focus{
}
}
//desing 关闭按钮
.designOpenrtion_modal,.designOpenrtionMobile_modal,.design_detail_modal_component{
.designOpenrtion_modal,.designOpenrtionMobile_modal,.design_detail_modal_component,.designElements_modal,.designElementsMobile_modal{
.design_closeIcon{
top: 2rem;
right: 2rem;
@@ -1363,7 +1368,7 @@ input:focus{
}
}
}
.design_detail_modal_component,.designOpenrtion_modal,.UpgradePlan_modal,.refund_reason,.Export,.designOpenrtionMobile_modal{
.design_detail_modal_component,.designOpenrtion_modal,.designElements_modal,.UpgradePlan_modal,.refund_reason,.Export,.designOpenrtionMobile_modal,.designElementsMobile_modal{
.ant-upload-list-picture-card-container{
display: none !important;
}
@@ -1402,12 +1407,16 @@ i{
opacity: .5;
transform: scale(.9);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
textarea:focus{
outline: none; /* 清除默认焦点样式 */
}
//设计input和上传按钮样式
.collection_modal_body,.design_detail_modal_component,.library_page,{
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal{
.input_border{
z-index: 2;
display: flex;
@@ -1490,6 +1499,13 @@ textarea:focus{
.ant-spin-text{
font-size: 1.2rem;
}
.search_seed{
padding: 0;
width: 4rem;
text-align: center;
font-size: 1.2rem;
border-right: calc(0.1rem* 1.2) solid #F1F1F1;
}
}
.upload_item{
.upload_file_item{

170
src/component/Detail/DesignDetail.vue
View File

@@ -79,6 +79,7 @@
<i class="fi fi-rs-comments"></i>
<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
<i v-show="current?.id" class="fi fi-rs-pencil-paintbrush" @click.stop="addDetail"></i>
</div>
<div class="centent_div" v-if="current?.id" @click="openCurrent(1)">
<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
@@ -93,12 +94,14 @@
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
</div>
<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
<div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
<div class="centent_div centent_print" v-if="current?.printObject?.prints?.[0]?.path && current?.printObject?.prints.length > 1" @click="openCurrent(2)">
<img v-for="item in current?.printObject?.prints" :key="item.id" :src="item.path" alt="">
</div>
<div v-else-if="current?.printObject?.prints?.[0]?.path && current?.printObject?.prints.length == 1" class="centent_div">
<img :src="current?.printObject?.prints[0]?.path" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
</div>
</div>
<div class="clothes_detail_item clothes_detail_item_color" :class="[current?.id?'':'hideCursor']">
<div class="clothes_item_header">
@@ -117,7 +120,19 @@
</div>
</div>
</div>
<div class="clothes_detail_item clothes_detail_item_elements" :class="[current?.id?'':'hideCursor']">
<div class="clothes_item_header">
<i class="fi fi-rs-comments"></i>
<div>Current Elements</div>
<i class="fi fi-rr-edit" @click.stop="openCurrent(4)"></i>
</div>
<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
<!-- <div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
<img :src="current?.printObject?.prints[0]?.path" alt="">
</div> -->
<i class="fi fi-rr-picture centent" @click="openCurrent(4)"></i>
</div>
</div>
</div>
</div>
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
@@ -139,6 +154,7 @@
</div>
</div>
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
@@ -163,6 +179,7 @@ import { openGuide,driverObj__ } from "@/tool/guide";
import GO from '@/tool/GO';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
components:{
Draggable,
@@ -170,6 +187,7 @@ export default defineComponent({
setDesignItem,
magnifyingGlass,
setDesignItemMobile,
addDetails,
},
setup() {
const store = useStore();
@@ -212,6 +230,11 @@ export default defineComponent({
provide('body',body)
let moible:any = isMoible()
provide('moible',moible)
let exhibitionList = ref({
print:[],
elements:[],
})
provide('exhibitionList',exhibitionList)
let {t} = useI18n()
//创建单件衣服
let setClothes:any = ref()
@@ -239,6 +262,7 @@ export default defineComponent({
revocationShow,
driver__,
moible,
exhibitionList,
t,
setClothes,
deleteShow,
@@ -324,7 +348,21 @@ export default defineComponent({
handler: function(newval) {
// this.removeRevocation()
}
}
},
'current.printObject.prints':{
handler(newVal,oldVal){
if(newVal && newVal.length > 0){
this.exhibitionList.print = this.setExhibitionList(newVal)
}
}
},
'current.trims.prints':{
handler(newVal,oldVal){
if(newVal && newVal.length > 0){
this.exhibitionList.elements = this.setExhibitionList(newVal)
}
}
},
},
provide() {
return {
@@ -387,7 +425,10 @@ export default defineComponent({
}
}
},
addDetail(){
let addDetails:any = this.$refs.addDetails
addDetails.init(this.current,this.currentIndex)
},
closeModal(submit:any){
if(this.designShowPrview == 1){
if(this.ifSubmit && submit == ''){
@@ -423,7 +464,19 @@ export default defineComponent({
// this.designItemDetailUrl = {}
}
},
//切换当前展示的是印花还是elements
setExhibitionList(arr:any){
const seen = new Map();
return arr.filter((obj:any, index:any, self:any) => {
const key = obj.minIOPath; // 替换成你想要去重的属性名
if (seen.has(key)) {
return false;
} else {
seen.set(key, true);
return true;
}
});
},
showDesignDetailModal(data:any,str:string){
this.moible = isMoible()
this.designItemId = data.design.designItemId
@@ -443,7 +496,7 @@ export default defineComponent({
item.layersObject[1] = a
}
if(item.printObject.prints == null){
item.printObject.prints = [{}]
item.printObject.prints = []
}else{
item.printObject.prints.forEach((element:any) => {
if(!element.designType){
@@ -674,6 +727,8 @@ export default defineComponent({
id:item.id,
path:item.minIOPath,
gradient:{},
trims:item.trims,
sketchString:item.sketchString,
changed:item.changed?item.changed:false,
designType:item.designType?item.designType:"Library",
offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
@@ -711,6 +766,7 @@ export default defineComponent({
gender:workspace?.sex,
designSingleItemDTOList:clothes,
isPreview:false,
sketchString:'',
ifSubmit:designItemDetail.isPreview,
processId:String(this.userInfo?.userId),
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -772,6 +828,7 @@ export default defineComponent({
img.onload = () => {
imgWidth = img.width
resolve(img)
img.remove()
};
img.onerror = reject;
img.src = url;
@@ -852,38 +909,46 @@ export default defineComponent({
}else{
this.deleteShow = false
let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
let data:any = this.setSubmitItem('preview',true)
if(!this.deleteItemShow){
return
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
this.designItemDetail.currentFullBodyView = rv.currentFullBodyView
this.designItemDetail.ifSubmit = true
this.loadingShow = false
// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
// this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
// }
if(data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1] && !data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1].id){
data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
}
this.store.commit("setDesignItemDetail", designItemDetail);
console.log(123);
this.store.commit("setDesignPreviewData", data);
this.setRevocation(designItemDetail,data)
this.deleteItemShow = false
}
).catch(res=>{
this.loadingShow = false
});
this.setDesignSingle(data)
}
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
DesignDetailAlter.terminate()
},
setDesignSingle(data:any){
this.loadingShow = true
let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// this.current.minIOPath = rv.clothes[this.currentIndex].minIOPath
designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
this.current.path = rv.clothes[this.currentIndex].minIOPath
designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
designItemDetail.clothes[this.currentIndex].sketchString = ''
data.designSingleItemDTOList[this.currentIndex].sketchString =''
data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
designItemDetail.currentFullBodyView = rv.currentFullBodyView
designItemDetail.ifSubmit = true
this.loadingShow = false
// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
// this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
// }
if(data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1] && !data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1].id){
data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
}
this.store.commit("setDesignItemDetail", designItemDetail);
this.store.commit("setDesignPreviewData", data);
this.setRevocation(designItemDetail,data)
this.deleteItemShow = false
}
).catch(res=>{
this.loadingShow = false
});
},
setDelete(num:number){
this.designItemDetail.clothes.splice(num,1)
this.deleteItemShow = true
@@ -942,12 +1007,16 @@ export default defineComponent({
"color": color,
gradient:gradient,
priority:10,
trims:{
"ifSingle": null,
"prints":null,
},
"printObject": {
"ifSingle": null,
"prints": [
{}
]
},
sketchString:'',
"layersObject": [
]
}
@@ -1001,17 +1070,19 @@ export default defineComponent({
}
});
}
this.current.sketchString = ''
this.currentIndex = this.currentIndex>0?this.currentIndex:0
data.designSingleItemDTOList[this.currentIndex] = {
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
id:this.current.id?this.current.id:'',
changed:this.current.changed?this.current.changed:false,
designType:this.current.designType?this.current.designType:'Library',
path:this.current.minIOPath?this.current.minIOPath:'',
offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
priority:this.current.priority,
trims:this.current.trims,
scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
sketchString:'',
printObject:{
ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
// prints:this.current?.printObject[0]?.path == null ? [] : [{
@@ -1031,12 +1102,21 @@ export default defineComponent({
this.store.commit('setDesignPreviewData',data)
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
},
setSloganData(data:any){
this.current.sketchString = data
// let designData:any = this.setSubmitItem('preview',true)
let designData = this.store.state.DesignDetailModule.designPreviewData
designData.designSingleItemDTOList[this.currentIndex].sketchString = data
this.setDesignSingle(designData)
}
//重新设计
// redesignItem(){
// let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -1356,20 +1436,34 @@ export default defineComponent({
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: auto;
.hideCursor{
*{
cursor: not-allowed !important;
}
}
&.detail_modal_right_top::-webkit-scrollbar{display: none;}
.clothes_detail_item{
// margin-bottom: 5rem*1.2);
position: relative;
flex: 1;
height: 20rem;
// flex: 1;
flex-shrink: 0;
.centent_div{
display: flex;
cursor: pointer;
justify-content: center;
}
.centent_print{
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
img{
width: 30%;
height: 30%;
margin-bottom: 1rem;
}
}
.centent{
cursor: pointer;
@@ -1386,11 +1480,18 @@ export default defineComponent({
font-size: var(--aida-fsize1-8);
color: #000000;
justify-content: space-between;
position: relative;
.icon-dangqianweizhi{
font-size: calc(1.8rem*1.2);
color: #000000;
margin-right: calc(1rem*1.2);
}
.fi-rs-pencil-paintbrush{
position: absolute;
right: 0;
top: 4rem;
cursor: pointer;
}
i{
font-size: var(--aida-fsize1-8);
display: flex;
@@ -1442,7 +1543,8 @@ export default defineComponent({
}
}
&.clothes_detail_item_print,
&.clothes_detail_item_apparel{
&.clothes_detail_item_apparel,
&.clothes_detail_item_elements{
.fi-rr-picture{
display: flex;
align-items: center;

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

@@ -1,24 +1,40 @@
<template>
<div class="detail_modal_body_select">
<div v-show="(type_ == 1 || type_ == 2) && select == true">
<div v-show="(type_ == 1 || type_ == 2 || type_ == 4) && select == true">
<div class="detail_uploadLibrary">
<div class="switch_type_list">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('DesignDetailAlter.Upload') }}</span>
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '',]"
:style="{cursor:type_==4?'no-drop':''}"
>
<span>{{ $t('DesignDetailAlter.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item Guide_1_21"
:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
>
<span>{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div
@click.stop="open(2)"
class="switch_type_item Guide_1_21"
:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
>
<span>{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div v-show="openClick == 2" class="detail_Library">
<div class="select_block">
<a-select
v-model:value="designType"
:options="designTypeList"
@change="handleChange"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="content_search_block">
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
@@ -47,51 +63,7 @@
v-show="file?.status === 'done'"
>
<img :src="file?.url" class="upload_img" />
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
<!-- <div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ file.level2Type }}
<div
v-if="!body"
:class="[
'icon',
'iconfont',
'icon-xiala',
file.categoryShow
? 'icon_rotate'
: '',
]"
>
</div>
</div>
<div
v-if="!body"
class="category_list"
v-show="file.categoryShow"
>
<div
:class="[
'category_item',
file.level2Type == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in disignTypeList"
:key="index"
@click.stop="selectFileCategory(file, cate)"
>
{{ cate.value }}
</div>
</div>
</div>
</div> -->
<sketchCategory v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
<div
class="delete_file_block"
@click.stop="deleteFile(index)"
@@ -138,7 +110,7 @@
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="clothesList" :item="file" ></sketchCategory>
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="designTypeList" :generateList="clothesList" :item="file" :isSpread="selectCode == 'DesignElements'" :isSetSketchCategory="true" @upTypeSucced='handleChange'></sketchCategory>
</div>
</div>
<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
@@ -288,7 +260,7 @@ import { useStore } from "vuex";
import { LoadingOutlined } from '@ant-design/icons-vue';
import { message,Upload} from 'ant-design-vue';
import { Sketch, Chrome} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
import { openGuide,driverObj__ } from "@/tool/guide";
@@ -321,6 +293,11 @@ export default defineComponent({
let apparelList = ref([])
let printList = ref([])
let selectCode = ref('Sketchboard')
let designTypeList = ref([])
let printCatecoryList = computed(()=>{
return store.state.UserHabit.printType
})
let designType = ref('')
//颜色
let selectColor = ref({
rgba:{},
@@ -331,6 +308,9 @@ export default defineComponent({
let sketchCatecoryList = computed(()=>{
return store.state.Workspace.workspacePosition
})
let designElementsType = computed(()=>{
return store.state.UserHabit.designElementsType;
})
let colorList = ref([{},{},{},{},{},{},{},{},{}])
let selectIndex = ref(0)
let gradient = ref({
@@ -359,6 +339,7 @@ export default defineComponent({
})
provide('colorList',colorList)
provide('selectIndex',selectIndex)
provide('designTypeList',designTypeList)
let {t} = useI18n()
return{
store,
@@ -375,6 +356,10 @@ export default defineComponent({
printList,
selectCode,
designTypeList,
printCatecoryList,
designType,
type_,
select,
selectColor,
@@ -383,6 +368,7 @@ export default defineComponent({
driver__,
body,
sketchCatecoryList,
designElementsType,
colorList,
selectIndex,
gradient,
@@ -595,12 +581,22 @@ export default defineComponent({
this.selectCode = 'Sketchboard'
this.upload.level1Type = 'Sketchboard'
this.uploadList = this.apparelList
this.designTypeList = this.sketchCatecoryList
this.designType = this.designTypeList[0].value
}else if (num == 2){
this.selectCode = 'Printboard'
this.upload.level1Type = 'Printboard'
this.uploadList = this.printList
this.designTypeList = this.printCatecoryList
this.designType = this.designTypeList[0].value
}else if (num == 4){
this.selectCode = 'DesignElements'
this.upload.level1Type = 'DesignElements'
this.designTypeList = this.designElementsType
this.designType = this.designTypeList[0]?.value
this.openClick = 2
}
if(num == 1 || num == 2){
if(num == 1 || num == 2 || num == 4){
this.clothesList = []
this.getLibraryList()
}
@@ -650,6 +646,7 @@ export default defineComponent({
(v) => v.status === "done"
);
this.uploadList = fileList
this.selectImgItem(this.uploadList[this.uploadList.length-1])
// this.store.commit("clearMoodTemplateId");
if(this.selectCode == 'Sketchboard'){
this.apparelList = this.uploadList
@@ -706,6 +703,7 @@ export default defineComponent({
// DesignDetailEnd.colorList = [{}]
DesignDetailEnd.sketchImg={}
this.terminate()
DesignDetailEnd.clearModal()
},
// this.getLibraryList('Moodboard')
// this.getLibraryList('Printboard')
@@ -721,39 +719,57 @@ export default defineComponent({
});
},
selectImgItem(imgData){
let DesignDetailEnd = this.$refs.DesignDetailEnd
imgData.categoryValue = imgData.level2TypeEnum.value
imgData.category = imgData.level2TypeEnum.name
if(this.selectCode == 'Sketchboard'){
// this.current.id_ = imgData.id
// this.current.path = imgData.url
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.setSketchImg(imgData)
// DesignDetailEnd.sketchImg.id_ = imgData.id
// DesignDetailEnd.sketchImg.path = imgData.url
}else{
this.current.printObject.path = imgData?.url
this.current.printObject.id = imgData?.id
this.current.printObject.designType = imgData?.designType
this.current.printObject.minIOPath = imgData.minIOPath
this.current.printObject.prints = [{
minIOPath:imgData.minIOPath,
path:imgData?.url,
designType: imgData?.designType
}]
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}else if(this.selectCode == 'Printboard'){
// this.current.printObject.path = imgData?.url
// this.current.printObject.id = imgData?.id
// this.current.printObject.designType = imgData?.designType
// this.current.printObject.minIOPath = imgData.minIOPath
// this.current.printObject.prints = [{
// minIOPath:imgData.minIOPath,
// path:imgData?.url,
// designType: imgData?.designType
// }]
// if(this.driver__.driver){
// nextTick().then(()=>{
// driverObj__.moveNext();
// })
// }
imgData.path = imgData.url
DesignDetailEnd.printsList.push(imgData)
// console.log(this.current.printObject,imgData);
}else if(this.selectCode == 'DesignElements'){
imgData.path = imgData.url
DesignDetailEnd.elementsList.push(imgData)
}
},
handleChange(){
this.currentPage = 1
this.clothesList = []
this.getLibraryList('')
},
//请求我的印花&&模型
getLibraryList(){
let type = this.body?this.current.type:''
let level2Type = ''
if(this.selectCode == 'Sketchboard' || this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
level2Type = this.designType
}
let type = this.body?this.current.type:level2Type
let workspace = this.store.state.Workspace.workspace
let data = {
// level1Type:'Printboard',
level1Type:this.selectCode,
level2Type:this.selectCode == 'Sketchboard'?type:'',
// level2Type:'Pattern',
level2Type:type,
modelSex:workspace?.sex,
page:this.currentPage,
pictureName:this.searchPictureName,
@@ -783,6 +799,7 @@ export default defineComponent({
//衣服
open(num) {
if(num == 1 && this.type_ ==4)return
this.openClick = num;
if(num ==2 ){
this.getLibraryList()
@@ -805,7 +822,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('DesignDetailAlter.jsContent4'));
}
const isLt2M = file.size / 1024 / 1024 < 3;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('DesignDetailAlter.jsContent5'));
}
@@ -905,7 +922,7 @@ export default defineComponent({
let hex = this.rgbaToHex(rgba)
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
// isMoible() true为移动端
let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
let gradientWidth = document.querySelector('.detail_modal_body_select .color_setting_operate_bg').clientWidth
let position = {
x:moible?event.touches[0].screenX:event?.x,
left:event.target.style.left?event.target.style.left.split('%')[0]:0
@@ -1098,6 +1115,7 @@ export default defineComponent({
this.selectColorList = selectColorList
// this.getHsvColor(selectColorList)
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
img.remove()
};
@@ -1136,6 +1154,19 @@ export default defineComponent({
}
.detail_Library{
.select_block{
border: calc(0.1rem* 1.2) solid #F1F1F1;
// margin-right: calc(2.3rem*1.2);
height: 4rem;
width: calc(20rem*1.2);
margin-bottom: 1rem;
.ant-select{
width: 90%;
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
width: 100%;
}
}
.content_search_block{
display: flex;
margin-bottom: calc(1rem*1.2);
@@ -1150,7 +1181,7 @@ export default defineComponent({
// font-size: 1.6rem*1.2);
font-size: calc(1.2rem*1.2);
font-weight: 400;
height: calc(3rem*1.2);
height: 4rem;
&::placeholder {
color: #C2C2C2;

267
src/component/Detail/DesignDetailEnd.vue
View File

@@ -1,70 +1,49 @@
<template>
<div class="detail_modal_body_result">
<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
<div v-show="type_ == 1" class="result_apparel_print">
<div class="upload_title result_apparel" v-show="type_ == 1">
<i class="color_edit fi fi-bs-comments"></i>
<span>{{ $t('DesignDetailEnd.NewApparel') }}</span>
</div>
<div v-show="type_ == 2" class="result_print">
<div>
<div class="upload_title">
<i class="color_edit fi fi-bs-comments"></i>
<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
</div>
<div class="print_left">
<!-- <img :src="current.path" :title="current.type"> -->
<img :src="current?.printObject?.prints?.[0]?.path" v-if="current?.printObject?.prints?.[0]?.path">
<div src="@/assets/images/homePage/null_img.png" v-else ></div>
<div
v-show="current?.printObject?.prints?.[0]?.path"
class="delete_file_block"
@click="deleteFile"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
<div>
<div class="upload_title">
<i class="color_edit fi fi-bs-comments"></i>
<span>{{ $t('DesignDetailEnd.Placement') }}</span>
</div>
<div class="print_right">
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
{{ $t('DesignDetailEnd.Overall') }}
</div>
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
<div
class="habit_Overal_Single_text"
:class="{ active: overallSingle }"
>
{{ $t('DesignDetailEnd.Single') }}
</div>
</div>
<!-- <div v-show="!overallSingle" class="habit_System_Designer">
<a-slider id="system_silder"
v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
>
</a-slider>
</div> -->
</div>
</div>
</div>
<div class="result_apparel_print_img">
<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.path?sketchImg?.path:current?.path" :title="current?.type">
<!-- <img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint"> -->
<div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
<!-- <div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
<img v-for="item in current?.layersObject" :src="item.imageUrl" alt="">
</div>
</div> -->
</div>
</div>
<div v-show="type_ == 2" class="result_apparel_elements">
<div class="upload_title result_apparel">
<i class="color_edit fi fi-bs-comments"></i>
<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="item,index in exhibitionList.print" :key="item" >
<!-- <div class="modal_img_item" v-for="item,index in current.printObject.prints" :key="item" > -->
<img v-lazy="item.path" alt="">
<sketchCategory :disignTypeList="designTypeList" :generateList="exhibitionList.print" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
<div
class="delete_file_block"
@click="deleteSelectptints(item,index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
<div class="modal_img_item" v-for="item,index in printsList" :key="item" >
<img v-lazy="item.path" alt="">
<sketchCategory :disignTypeList="designTypeList" :generateList="printsList" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
<div
class="delete_file_block"
@click="deleteptints(item,index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
</div>
<div v-show="type_ == 3">
<div class="result_color upload_title">
<i class="color_edit fi fi-bs-comments"></i>
@@ -84,11 +63,43 @@
</div>
</div>
</div>
<div v-show="type_ == 4" class="result_apparel_elements">
<div class="upload_title result_apparel">
<i class="color_edit fi fi-bs-comments"></i>
<span>New Elements</span>
</div>
<div class="modal_img">
<!-- <div class="modal_img_item" v-for="item,index in current.trims.prints" :key="item" > -->
<div class="modal_img_item" v-for="item,index in exhibitionList.elements" :key="item" >
<img v-lazy="item.path" alt="">
<div
class="delete_file_block"
@click="deleteSelectElements(item,index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
<div class="modal_img_item" v-for="item,index in elementsList" :key="item" >
<img v-lazy="item.url" alt="">
<div
class="delete_file_block"
@click="deleteElements(item,index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
</div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn" :class="[ !sketchImg?.id?!current?.id?'active':'':'' ]">{{ $t('DesignDetailEnd.preview') }}</div>
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
<div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
<div v-if="type_ == 4" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>
<DesignPrintMobile v-else ref="DesignPrintMobile"></DesignPrintMobile>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
@@ -102,15 +113,19 @@ import { useStore } from "vuex";
import { Sketch} from '@ans1998/vue3-color'
import DesignPrintOperation from './DesignPrintOperation.vue';
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
import DesignElementsOperation from './DesignElements.vue';
import DesignPrintMobile from './DesignElementsMobile.vue';
import { message,Upload} from 'ant-design-vue';
import { openGuide,driverObj__ } from "@/tool/guide";
import {isMoible,setGradual} from '@/tool/util'
import { useI18n } from 'vue-i18n';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
DesignElementsOperation,DesignPrintMobile,sketchCategory
},
setup(prop) {
const store = useStore();
@@ -122,10 +137,9 @@ export default defineComponent({
let moible = inject('moible')//父组件传过来的数据
let designItemDetail = inject('designItemDetail')//父组件传过来的数据
let currentIndex = inject('currentIndex')//父组件传过来的数据
let designTypeList = inject('designTypeList')//父组件传过来的数据
let previewShow = ref(false)
//印花
let overallSingle = ref(false)
let systemDesignerPercentage = ref(30)
//颜色
// let colorList = ref([{}])
@@ -135,7 +149,12 @@ export default defineComponent({
//加载中
let loadingShow = ref(false)
let exhibitionList = inject('exhibitionList')
let {t} = useI18n()
let printsList = ref([])
let elementsList = ref([
])
return{
store,
current,
@@ -145,14 +164,16 @@ export default defineComponent({
moible,
designItemDetail,
currentIndex,
designTypeList,
previewShow,
type_,
overallSingle,
systemDesignerPercentage,
colorList,
selectIndex,
loadingShow,
exhibitionList,
t,
printsList,
elementsList,
}
},
data(){
@@ -182,14 +203,40 @@ export default defineComponent({
}
}
},
watch: {
'exhibitionList.print':{
handler(newVal,oldVal){
this.printsList = this.printsList.filter(objA => {
return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
});
this.setExhibitionType('print')
}
},
'exhibitionList.elements':{
handler(newVal,oldVal){
this.elementsList = this.elementsList.filter(objA => {
return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
});
this.setExhibitionType('elements')
}
}
},
methods:{
//点击判断
init(num){
// this.current = JSON.parse(JSON.stringify(this.currentItem))
this.type_ = num
this.colorList[this.selectIndex] = this.$parent.selectColor
this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
this.systemDesignerPercentage = this.current?.printObject?.ifSingle?this.current?.printObject?.prints[0].scale?this.current?.printObject?.prints[0].scale*100:100:100
if(num == 2){
this.setExhibitionType('print')
}else if(num == 4){
this.setExhibitionType('elements')
}
},
clearModal(){
this.elementsList = []
this.printsList = []
},
//模型
setSketchImg(v){
@@ -201,17 +248,22 @@ export default defineComponent({
this.sketchImg.designType = v.designType
},
//印花
systemDesigner(num) {
this.current.printObject.scale = num
},
setOveralSingle(){
this.current.printObject.ifSingle = this.overallSingle
},
formatter(value) {
return `${value*3}%`;
setExhibitionType(str){
this.exhibitionList[str].forEach((item,index)=>{
if(!item.categoryValue){
this.designTypeList.forEach((typeItem)=>{
if(item.level2Type == typeItem.value){
item.categoryValue = typeItem.name
item.category = typeItem.value
}
})
}
})
},
setPrint(){
if(this.current?.printObject?.prints?.[0]?.path){
// if(this.current?.printObject?.prints?.[0]?.path){
let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
DesignPrintOperation.init()
if(this.driver__.driver){
@@ -219,9 +271,9 @@ export default defineComponent({
driverObj__.moveNext();
})
}
}else{
message.info(this.t('DesignDetailEnd.jsContent1'));
}
// }else{
// message.info(this.t('DesignDetailEnd.jsContent1'));
// }
},
deleteFile(){
@@ -286,6 +338,23 @@ export default defineComponent({
// arr[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id
return arr
},
deleteptints(item,index){
this.printsList.splice(index,1)
},
deleteSelectptints(item,index){
this.exhibitionList.print.splice(index,1)
},
deleteElements(item,index){
this.elementsList.splice(index,1)
},
deleteSelectElements(item,index){
this.exhibitionList.elements.splice(index,1)
},
setElemets(){
if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
let DesignElementsOperation = isMoible() ? this.$refs.DesignPrintMobile : this.$refs.DesignElementsOperation
DesignElementsOperation.init()
},
//提交
setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -329,6 +398,8 @@ export default defineComponent({
}
let color = `${this.colorList[this.selectIndex].rgba.r} ${this.colorList[this.selectIndex].rgba.g} ${this.colorList[this.selectIndex].rgba.b}`
data.designSingleItemDTOList[index].color = color
}else if(this.type_ == 4){
data.designSingleItemDTOList[index].trims = this.current.trims
}
if(this.colorList[this.selectIndex].gradient){
let gradient = this.colorList[this.selectIndex].gradient
@@ -353,6 +424,7 @@ export default defineComponent({
delete designItemDetail.clothes[index].gradient
}
designItemDetail.clothes[index].designType = item.designType
designItemDetail.clothes[index].trims = item.trims
designItemDetail.clothes[index].layersObject = item.layersObject
designItemDetail.clothes[index].minIOPath = item.minIOPath
designItemDetail.clothes[index].path = item.path
@@ -544,6 +616,7 @@ export default defineComponent({
display: flex;
flex-wrap: wrap;
padding-left: calc(2rem*1.2);
align-content: flex-start;
&.modal_img::-webkit-scrollbar {
display: none;
}
@@ -590,6 +663,48 @@ export default defineComponent({
}
}
//elements
.result_apparel_elements{
height: 85%;
// height: 100%;
.modal_img{
height: calc(100%);
overflow-y: auto;
}
.modal_img_item{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: auto;
border: none;
img{
width: 100%;
object-fit: cover;
}
.delete_file_block{
display: none;
width: calc(3.2rem*1.2);
height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6);
border-radius: calc(0.4rem*1.2);
position: absolute;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
text-align: center;
line-height: calc(3.2rem*1.2);
left: auto;
cursor: pointer;
.icon-shanchu{
font-size: calc(1.6rem*1.2);
color: #fff;
}
}
&:hover .delete_file_block{
display: block;
}
}
}
.subitOkPreviewBtn{
bottom: calc(4rem*1.2);
position: absolute;

922
src/component/Detail/DesignElements.vue Normal file
View File

@@ -0,0 +1,922 @@
<template>
<div>
<a-modal
class="designElements_modal"
v-model:visible="designElements"
:footer="null"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:mask="true"
>
<div class="designElements_content">
<div class="design_title_text">
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="designElements_open">
<!-- -->
<div class="print_right">
<div class="print_right show_print_right ">
<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
<div class="designElements_nav">
<div class="designElements_single" v-for="item,index in designElementsList" :key="item">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designElements_single" v-for="item,index in designSelectElementsList" :key="item">
<img :src="item.path" @click="setpitch(item,index)">
</div>
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn _1" @click.stop="setOK">OK</div>
</div>
</div>
</div>
<div class="designElements_centent" id="designElementsCentent">
<div class="designElements_imgMask">
<div class="designElements_print">
<div
v-for="item,index in exhibitionElementsList"
:key="item"
:style="[printStyleList?.[index]?.style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false">
</div>
</div>
<img :src="current?.path" alt="" class="designElements_sketch">
<div class="designElements_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designElements_delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</ul>
<div></div>
</div>
</div>
</div>
<div class="designElements_right">
<div class="designElements_entirety_img">
<img :src="currentFullBodyView" alt="">
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</div>
</template>
<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
// import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
export default defineComponent({
setup(prop) {
let designElements = ref(false);
let designSelectElementsList = ref([])//新增的元素
let designElementsList = ref([])//已经存在的元素
let exhibitionElementsList = ref([])//展示的元素
let setOkData = ref([])
let current = inject('current')//父组件传过来的数据
let driver__ = inject('driver__')
let setRevocation = inject('setRevocation')//父组件传过来的数据
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([]);
let currentPrintStyleList = {
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designElementsBtn:false
}
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let print = ref({
width:'',
height:''
})
let sketch = ref({
width:'',
height:''
})
let loadingShow = ref(false)
let currentFullBodyView = ref('')
let designItemDetailTS = ref({})
let body = ref(false)
let {t} = useI18n()
return {
designElements,
designSelectElementsList,
designElementsList,
exhibitionElementsList,
setOkData,
current,
driver__,
printZIndex,
printStyleList,
currentPrintStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
print,
sketch,
loadingShow,
setRevocation,
t,
currentFullBodyView,
designItemDetailTS,
body,
};
},
data() {
return {
store: useStore(),
};
},
directives:{
//操作旋转
rotote:{
mounted(el,value){
el.addEventListener('mousedown', (e) => {
let elParent = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
let num = 1
let x = 0
let y = 0
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
// 添加鼠标按下事件监听器
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
e.stopPropagation()
mouse = true;
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
let mousemove = (e) => {
if (mouse) {
let X = eX
let Y = eY
let x = e.clientX - X
let y = Y - e.clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
}
}
document.addEventListener('mousemove', mousemove);
// 添加鼠标松开事件监听器
let mouseup = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('mousemove',mousemove)
}
document.addEventListener('mouseup', mouseup);
});
}
},
},
methods: {
init(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
if(designItemDetail.others.length == 0){
this.body = true
}
this.designElements = true
this.clearModal()
if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
skecth.remove()
}
if(this.exhibitionElementsList.length > 0){
this.exhibitionElementsList.forEach((item,index)=>{
this.setTemplate(item,index)
})
}else{
}
},
random(){
if(this.printStyleList.length == 0)return
this.printStyleList.forEach((v,index)=>{
this.refetchTemplate(index)
})
},
setPrintWH(url){
let print = new Image
return new Promise((resolve, reject) => {
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
resolve()
print.remove()
}
print.src = url
})
},
async setpitch(item,index){
await this.setPrintWH(item.path)
this.printStyleList.forEach((v)=>{
v.designElementsBtn = false
})
this.currentPrintStyleList.url = item.url
this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
let currentIndex = this.printStyleList.length-1
this.exhibitionElementsList.push({
angle:0,
designType:item.designType,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:1,
location:[0,0]
})
this.refetchTemplate(currentIndex)
},
//设置移动
itemMoveMousedown(index,event){
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
v.designElementsBtn = false
})
this.imgDom = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[index].designElementsBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
scale:scale,
rotateZ:rotateZ?rotateZ:0,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designElementsBtn = true
this.printStyleList[this.imgDomIndex].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
document.addEventListener("mousemove", this.sizeMousemove);
},
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
},
sizeMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let num = width/height
let num1 = height/width
let w,h
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num1+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
top:this.imgDom.offsetTop+'px',
height:this.imgDom.offsetHeight+'px',
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
},
mouseup(e) {
document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove);
},
deletePrint(){
this.exhibitionElementsList.splice(this.imgDomIndex,1)
this.printStyleList.splice(this.imgDomIndex,1)
},
//随机重置图片顺序
refetchTemplate(index) {
// let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName("designElements_modal")[0]?.getElementsByClassName('designElements_sketch')[0]
let width
let scale
if(sketch.width<sketch.height){
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
scale = width / this.print.width.replace(/px/g,'')
}else{
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
scale = width / this.print.height.replace(/px/g,'')
}
// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
let x = sketch?.width - this.print.width.replace(/px/g,'')*scale
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
this.printStyleList[index].style = {
left:Math.trunc(Math.random()*x)+1+"px",
top:Math.trunc(Math.random()*y)+1+"px",
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')*scale+'px',
height:this.print.height.replace(/px/g,'')*scale+'px',
zIndex:this.printZIndex++
}
this.printStyleList[index].transform = {
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
}
},
//设置图片
async setTemplate(item,index) {
await this.setPrintWH(item.path)
this.designSelectElementsList
let sketch = document.getElementsByClassName("designElements_modal")[0]?.getElementsByClassName('designElements_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let scale
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
let zIndex = 1
let left = item.location[0]/sketchNum+'px'
let top = item.location[1]/sketchNum+'px'
if(sketch.offsetWidth < item.location[0]/sketchNum){
left = sketch.offsetWidth +'px'
}
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
this.printStyleList[index]={
centers:{
left:0,
top:0,
},
style:{
left:left,
top:top,
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
zIndex:zIndex++
},
transform:{
// scale:scale<.2?.2:scale,//0.2-3
rotateZ:item.angle,
},
designElementsBtn:false
}
},
computeZindex(){
let arr = JSON.parse(JSON.stringify(this.printStyleList))
arr.sort((a, b) => {
var a_num = a["style"].zIndex;
var b_num = b["style"].zIndex;
return a_num - b_num;
});
let num = 1
arr.forEach((v)=>{
v.style.zIndex = num++
})
return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
},
computeSize(arr){
// let num = this.sketch/
return new Promise(async (resolve, reject) => {
let sketch = document.getElementsByClassName("designElements_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
let location
for (let index = 0; index < arr.length; index++) {
await this.setPrintWH(this.exhibitionElementsList[index].path)
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
let obj = {
angle : arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.exhibitionElementsList[index].designType,
path:this.exhibitionElementsList[index].path,
minIOPath:this.exhibitionElementsList[index].minIOPath,
}
prints.push(obj)
}
resolve(prints)
})
},
async setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
// let data = {
// ...designItemDetail,
// priority:priority,
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
await this.computeZindex().then((rv)=>{
this.setOkData = rv
})
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
data.designSingleItemDTOList[index].trims.prints = this.setOkData
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
this.currentFullBodyView = rv.currentFullBodyView
this.designItemDetailTS.rv = rv
this.designItemDetailTS.data = data
this.loadingShow = false
// this.designElements = false
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}
).catch(res=>{
this.loadingShow = false
});
},
setOK(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
if(this.designItemDetailTS.rv){
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
designItemDetail.clothes[index].trims.prints = this.setOkData
designItemDetail.ifSubmit = true
designItemDetail.clothes.forEach((item,i)=>{
let a
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
})
this.store.commit("setDesignItemDetail", designItemDetail);
this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
this.designItemDetailTS = {}
}
this.$parent.elementsList = JSON.parse(JSON.stringify(this.designElementsList))
this.designElements = false
if(this.driver__.driver){
driverObj__.moveNext();
}
},
clearModal(){
this.designElements = true//modal页面关闭
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.designSelectElementsList = []
this.printStyleList = []
this.designElementsList = []
this.exhibitionElementsList = []
},
closeModal(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let _this = this
Modal.confirm({
title: this.t('DesignPrintOperation.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.designElements=false
}
});
},
},
});
</script>
<style lang="less">
.designElements_modal {
// max-width: 1440px;
.mark_loading{
position: absolute;
}
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: calc(1rem*1.2);
overflow: hidden;
}
.designElements_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem*1.2);
display: flex;
flex-direction: column;
height: 100%;
.designElements_header {
position: relative;
height: calc(6.6rem*1.2);
width: 100%;
background: #F7F7F7;
.placement_modal_title{
position: absolute;
height: 100%;
line-height: calc(6.6rem*1.2);
left: calc(3.7rem*1.2);
top: 0;
font-size: calc(1.8rem*1.2);
color: #030303;
}
}
.designElements_right{
height: calc(50rem*1.2);
position: absolute;
right: calc(2rem*1.2);
left: auto;
top: 50%;
transform: translateY(-50%);
max-height: calc(50rem*1.2);
max-width: calc(30rem*1.2);
.designElements_entirety_img{
height: 100%;
img{
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}
.designElements_open{
position: absolute;
top: 50%;
transform: translateY(-50%);
.print_right{
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
padding: calc(2rem*1.2) 0;
width: calc(16rem*1.2);
border-radius: calc(1rem*1.2);
height: calc(40rem*1.2);
.button_second{
margin: calc(1rem*1.2) 0;
width: calc(10rem*1.2);
text-align: center;
position: initial;
transform: none;
height: calc(3rem*1.2);
line-height: calc(3rem*1.2);
}
.designElements_nav{
display: flex;
margin-top: calc(2rem*1.2);
flex-wrap: wrap;
width: 100%;
height: calc(22rem*1.2);
overflow-x: hidden;
justify-content: space-evenly;
align-content: flex-start;
&.designElements_nav::-webkit-scrollbar {
display: none;
}
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
.designElements_single{
width: 40%;
margin-bottom: calc(2rem*1.2);
}
img{
width: 100%;
cursor: pointer;
}
}
&.show_print_right{
border: none;
padding: 0;
height: 100%;
}
}
}
.designElements_centent{
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
&.active{
flex-direction: row;
}
.designElements_imgMask{
width: auto;
height: auto;
position: relative;
>img{
z-index: 2;
position: relative;
// max-width: 100%;
// max-height: 100%;
// width: 100%;
// height: 50rem*1.2);
max-height: calc(50rem*1.2);
min-height: calc(30rem*1.2);
width: auto;
max-width: calc(60rem*1.2);
}
.designElements_sketch_mask{
z-index: 3;
position: absolute;
inset: 0;
width: 100%;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.designElements_print{
z-index: 3;
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designElements_btn{
z-index: 3;
>div{
width: 100%;
height: 100%;
border: 2px solid rgb(20, 188, 255);
position: absolute;
}
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
&.designElements_Mouoverall{
opacity: 1;
border: none;
width: calc(1.4rem*1.2);
height: calc(1.4rem*1.2);
i{
display: flex;
color: #14bcff;
}
}
li{
cursor: pointer;
// border-radius: 50%;
width: calc(1rem*1.2);
height: calc(1rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designElements_btn_top,.designElements_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designElements_btn_top{
top: 0;
}
.designElements_btn_bottom{
top: 100%;
}
.designElements_btn_left,.designElements_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designElements_btn_left{
left: 0;
}
.designElements_btn_right{
left: 100%;
}
.designElements_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designElements_delete{
position: absolute;
top: 0;
right: 0;
width: 4rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
img{
width: 100%;
height: 100%;
}
}
.designElements_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: calc(.2rem*1.2);
height: calc(3rem*1.2);
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designElements_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 3rem*1.2);
left: 50%;
transform: translate(-50%,-50%) ;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
border-radius: 50%;
}
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin: calc(1rem*1.2) 0;
width: calc(10rem*1.2);
text-align: center;
position: initial;
transform: none;
}
}
}
</style>

924
src/component/Detail/DesignElementsMobile.vue Normal file
View File

@@ -0,0 +1,924 @@
<template>
<div>
<a-modal
class="designElementsMobile_modal"
v-model:visible="designElements"
:footer="null"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:mask="true"
>
<div class="designElementsMobile_content">
<div class="design_title_text">
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="designElementsMobile_open">
<!-- -->
<div class="print_right">
<div class="print_right show_print_right ">
<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
<div class="designElementsMobile_nav">
<div class="designElementsMobile_single" v-for="item,index in designElementsList" :key="item">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designElementsMobile_single" v-for="item,index in designSelectElementsList" :key="item">
<img :src="item.path" @click="setpitch(item,index)">
</div>
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn _1" @click.stop="setOK">OK</div>
</div>
</div>
</div>
<div class="designElementsMobile_centent" id="designElementsCentent">
<div class="designElementsMobile_imgMask">
<div class="designElementsMobile_print">
<div
v-for="item,index in exhibitionElementsList"
:key="item"
:style="[printStyleList?.[index]?.style]"
@touchstart.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false">
</div>
</div>
<img :src="current?.path" alt="" class="designElementsMobile_sketch">
<div class="designElementsMobile_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designElementsMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designElementsMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designElementsMobile_delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</ul>
<div></div>
</div>
</div>
</div>
<div class="designElementsMobile_right">
<div class="designElementsMobile_entirety_img">
<img :src="currentFullBodyView" alt="">
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</div>
</template>
<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
// import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
export default defineComponent({
setup(prop) {
let designElements = ref(false);
let designSelectElementsList = ref([])//新增的元素
let designElementsList = ref([])//已经存在的元素
let exhibitionElementsList = ref([])//展示的元素
let setOkData = ref([])
let current = inject('current')//父组件传过来的数据
let driver__ = inject('driver__')
let setRevocation = inject('setRevocation')//父组件传过来的数据
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([]);
let currentPrintStyleList = {
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designElementsBtn:false
}
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let print = ref({
width:'',
height:''
})
let sketch = ref({
width:'',
height:''
})
let loadingShow = ref(false)
let currentFullBodyView = ref('')
let designItemDetailTS = ref({})
let body = ref(false)
let {t} = useI18n()
return {
designElements,
designSelectElementsList,
designElementsList,
exhibitionElementsList,
setOkData,
current,
driver__,
printZIndex,
printStyleList,
currentPrintStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
print,
sketch,
loadingShow,
setRevocation,
t,
currentFullBodyView,
designItemDetailTS,
body,
};
},
data() {
return {
store: useStore(),
};
},
directives:{
//操作旋转
rotote:{
mounted(el,value){
el.addEventListener('touchstart', (e) => {
let elParent = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
let num = 1
let x = 0
let y = 0
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
// 添加鼠标按下事件监听器
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
e.stopPropagation()
mouse = true;
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
let touchmove = (e) => {
if (mouse) {
let X = eX
let Y = eY
let x = e.targetTouches[0].clientX - X
let y = Y - e.targetTouches[0].clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
}
}
document.addEventListener('touchmove', touchmove,{passive:true});
// 添加鼠标松开事件监听器
let touchend = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
document.removeEventListener('touchend',touchend)
document.removeEventListener('touchmove',touchmove)
}
document.addEventListener('touchend', touchend);
});
}
},
},
methods: {
init(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
if(designItemDetail.others.length == 0){
this.body = true
}
this.designElements = true
this.clearModal()
if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
skecth.remove()
}
if(this.exhibitionElementsList.length > 0){
this.exhibitionElementsList.forEach((item,index)=>{
this.setTemplate(item,index)
})
}else{
}
},
random(){
if(this.printStyleList.length == 0)return
this.printStyleList.forEach((v,index)=>{
this.refetchTemplate(index)
})
},
setPrintWH(url){
let print = new Image
return new Promise((resolve, reject) => {
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
resolve()
print.remove()
}
print.src = url
})
},
async setpitch(item,index){
await this.setPrintWH(item.path)
this.printStyleList.forEach((v)=>{
v.designElementsBtn = false
})
this.currentPrintStyleList.url = item.url
this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
let currentIndex = this.printStyleList.length-1
this.exhibitionElementsList.push({
angle:0,
designType:item.designType,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:1,
location:[0,0]
})
this.refetchTemplate(currentIndex)
},
//设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
v.designElementsBtn = false
})
this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[index].designElementsBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
scale:scale,
rotateZ:rotateZ?rotateZ:0,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
document.addEventListener("touchend", this.touchend);
document.addEventListener("touchmove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designElementsBtn = true
this.printStyleList[this.imgDomIndex].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
}
document.addEventListener("touchend", this.sizeMouseup);
document.addEventListener("touchmove", this.sizeMousemove);
},
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
},
sizeMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let num = width/height
let num1 = height/width
let w,h
//判断移动四个边
if(this.direction == 'right'){
w = ( e.changedTouches[0].pageX -imgDomWH.left)
h = ( e.changedTouches[0].pageX - imgDomWH.left)*num
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = ( e.changedTouches[0].pageY - imgDomWH.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
width = w+'px'
height = w*num1+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
top:this.imgDom.offsetTop+'px',
height:this.imgDom.offsetHeight+'px',
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
document.removeEventListener("touchend", this.sizeMouseup);
document.removeEventListener("touchmove", this.sizeMousemove);
},
touchend(e) {
document.removeEventListener("touchend", this.touchend);
document.removeEventListener("touchmove", this.moveMousemove);
},
deletePrint(){
this.exhibitionElementsList.splice(this.imgDomIndex,1)
this.printStyleList.splice(this.imgDomIndex,1)
},
//随机重置图片顺序
refetchTemplate(index) {
// let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
let width
let scale
if(sketch.width<sketch.height){
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
scale = width / this.print.width.replace(/px/g,'')
}else{
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
scale = width / this.print.height.replace(/px/g,'')
}
// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
let x = sketch?.width - this.print.width.replace(/px/g,'')*scale
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
this.printStyleList[index].style = {
left:Math.trunc(Math.random()*x)+1+"px",
top:Math.trunc(Math.random()*y)+1+"px",
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')*scale+'px',
height:this.print.height.replace(/px/g,'')*scale+'px',
zIndex:this.printZIndex++
}
this.printStyleList[index].transform = {
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
}
},
//设置图片
async setTemplate(item,index) {
await this.setPrintWH(item.path)
this.designElementsList
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let scale
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
let zIndex = 1
let left = item.location[0]/sketchNum+'px'
let top = item.location[1]/sketchNum+'px'
if(sketch.offsetWidth < item.location[0]/sketchNum){
left = sketch.offsetWidth +'px'
}
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
this.printStyleList[index]={
centers:{
left:0,
top:0,
},
style:{
left:left,
top:top,
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
zIndex:zIndex++
},
transform:{
// scale:scale<.2?.2:scale,//0.2-3
rotateZ:item.angle,
},
designElementsBtn:false
}
},
computeZindex(){
let arr = JSON.parse(JSON.stringify(this.printStyleList))
arr.sort((a, b) => {
var a_num = a["style"].zIndex;
var b_num = b["style"].zIndex;
return a_num - b_num;
});
let num = 1
arr.forEach((v)=>{
v.style.zIndex = num++
})
return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
},
async computeSize(arr){
// let num = this.sketch/
return new Promise(async (resolve, reject) => {
let sketch = document.getElementsByClassName("designElementsMobile_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
let location
for (let index = 0; index < arr.length; index++) {
await this.setPrintWH(this.exhibitionElementsList[index].path)
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
let obj = {
angle : arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.exhibitionElementsList[index].designType,
path:this.exhibitionElementsList[index].path,
minIOPath:this.exhibitionElementsList[index].minIOPath,
}
prints.push(obj)
}
resolve(prints)
})
},
async setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
let priority = designItemDetail.clothes.map((v)=>{
return v.type
})
// let data = {
// ...designItemDetail,
// priority:priority,
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
await this.computeZindex().then((rv)=>{
this.setOkData = rv
})
data.designSingleItemDTOList[index].trims.prints = this.setOkData
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
this.currentFullBodyView = rv.currentFullBodyView
this.designItemDetailTS.rv = rv
this.designItemDetailTS.data = data
this.loadingShow = false
// this.designElements = false
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}
).catch(res=>{
this.loadingShow = false
});
},
setOK(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
if(this.designItemDetailTS.rv){
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
designItemDetail.clothes[index].trims.prints = this.setOkData
designItemDetail.ifSubmit = true
designItemDetail.clothes.forEach((item,i)=>{
let a
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
})
this.store.commit("setDesignItemDetail", designItemDetail);
this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
this.designItemDetailTS = {}
}
this.designElements = false
if(this.driver__.driver){
driverObj__.moveNext();
}
},
clearModal(){
this.designElements = true//modal页面关闭
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.designSelectElementsList = []
this.printStyleList = []
this.designElementsList = []
this.exhibitionElementsList = []
},
closeModal(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let _this = this
Modal.confirm({
title: this.t('DesignPrintOperation.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.designElements=false
}
});
},
},
});
</script>
<style lang="less">
.designElementsMobile_modal {
// max-width: 1440px;
.mark_loading{
position: absolute;
}
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: calc(1rem*1.2);
overflow: hidden;
}
.designElementsMobile_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem*1.2);
display: flex;
flex-direction: column;
height: 100%;
.designElementsMobile_header {
position: relative;
height: calc(6.6rem*1.2);
width: 100%;
background: #F7F7F7;
.placement_modal_title{
position: absolute;
height: 100%;
line-height: calc(6.6rem*1.2);
left: calc(3.7rem*1.2);
top: 0;
font-size: calc(1.8rem*1.2);
color: #030303;
}
}
.designElementsMobile_right{
height: calc(50rem*1.2);
position: absolute;
right: calc(2rem*1.2);
left: auto;
top: 50%;
transform: translateY(-50%);
max-height: calc(50rem*1.2);
max-width: calc(30rem*1.2);
.designElementsMobile_entirety_img{
height: 100%;
img{
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}
.designElementsMobile_open{
position: absolute;
top: 50%;
transform: translateY(-50%);
.print_right{
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
padding: calc(2rem*1.2) 0;
width: calc(16rem*1.2);
border-radius: calc(1rem*1.2);
height: calc(40rem*1.2);
.button_second{
margin: calc(1rem*1.2) 0;
width: calc(10rem*1.2);
text-align: center;
position: initial;
transform: none;
height: calc(3rem*1.2);
line-height: calc(3rem*1.2);
}
.designElementsMobile_nav{
display: flex;
margin-top: calc(2rem*1.2);
flex-wrap: wrap;
width: 100%;
height: calc(22rem*1.2);
overflow-x: hidden;
justify-content: space-evenly;
align-content: flex-start;
&.designElementsMobile_nav::-webkit-scrollbar {
display: none;
}
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
.designElementsMobile_single{
width: 40%;
margin-bottom: calc(2rem*1.2);
}
img{
width: 100%;
cursor: pointer;
}
}
&.show_print_right{
border: none;
padding: 0;
height: 100%;
}
}
}
.designElementsMobile_centent{
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
&.active{
flex-direction: row;
}
.designElementsMobile_imgMask{
width: auto;
height: auto;
position: relative;
>img{
z-index: 2;
position: relative;
// max-width: 100%;
// max-height: 100%;
// width: 100%;
// height: 50rem*1.2);
max-height: calc(50rem*1.2);
min-height: calc(30rem*1.2);
width: auto;
max-width: calc(60rem*1.2);
}
.designElementsMobile_sketch_mask{
z-index: 3;
position: absolute;
inset: 0;
width: 100%;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.designElementsMobile_print{
z-index: 3;
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designElementsMobile_btn{
z-index: 3;
>div{
width: 100%;
height: 100%;
border: 2px solid rgb(20, 188, 255);
position: absolute;
}
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
&.designElementsMobile_Mouoverall{
opacity: 1;
border: none;
width: calc(1.4rem*1.2);
height: calc(1.4rem*1.2);
i{
display: flex;
color: #14bcff;
}
}
li{
cursor: pointer;
// border-radius: 50%;
width: calc(1rem*1.2);
height: calc(1rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designElementsMobile_btn_top,.designElementsMobile_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designElementsMobile_btn_top{
top: 0;
}
.designElementsMobile_btn_bottom{
top: 100%;
}
.designElementsMobile_btn_left,.designElementsMobile_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designElementsMobile_btn_left{
left: 0;
}
.designElementsMobile_btn_right{
left: 100%;
}
.designElementsMobile_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designElementsMobile_delete{
position: absolute;
top: 0;
right: 0;
width: 4rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
img{
width: 100%;
height: 100%;
}
}
.designElementsMobile_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: calc(.2rem*1.2);
height: calc(3rem*1.2);
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designElementsMobile_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 3rem*1.2);
left: 50%;
transform: translate(-50%,-50%) ;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
border-radius: 50%;
}
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin: calc(1rem*1.2) 0;
width: calc(10rem*1.2);
text-align: center;
position: initial;
transform: none;
}
}
}
</style>

469
src/component/Detail/DesignPrintOperation.vue
View File

@@ -38,10 +38,21 @@
</div>
</div>
<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<!-- <div class="designOpenrtion_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
</div> -->
</div>
<div v-show="!overallSingle" class="habit_System_Designer">
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
<a-slider id="system_silder"
:min="1"
:min="20"
v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
@@ -49,18 +60,11 @@
</a-slider>
</div>
<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
<div v-show="overallSingle" class="print_input">
<!-- <div v-show="overallSingle" class="print_input">
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
<i class="fi fi-rr-trash" @click="deletePrint"></i>
</div>
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
</div>
</div>
</div> -->
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
</div>
@@ -69,32 +73,40 @@
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
<div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print" v-show="overallSingle">
<div class="designOpenrtion_print">
<div
v-for="item,index in designOpenrtionList"
v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]"
:key="item"
:style="[printStyleList?.[index]?.style]"
v-if="overallSingle"
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
ref="content"
>
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[stateOverallSingle][index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
</div>
</div>
<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch_mask">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designOpenrtion_delete" @click.stop="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
<li class="designOpenrtion_delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</ul>
</div>
</div>
@@ -121,19 +133,30 @@ import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
import { remove } from "jszip";
export default defineComponent({
setup(prop) {
let designOpenrtion = ref(false);
let designOpenrtionList = ref([])
let designOpenrtionList = ref([])//新增的元素
let designList = ref([])//已经存在的元素
let setOkData = ref([])
let exhibitionOpenrtionList = ref({
single:[],
overall:[],
})//展示的元素
let current = inject('current')//父组件传过来的数据
let driver__ = inject('driver__')
let setRevocation = inject('setRevocation')//父组件传过来的数据
let overallSingle = ref(false)
let overallSingle = ref(true)
let stateOverallSingle = ref('single')
let systemDesignerPercentage = ref(0)
let printAmount = ref(1)//印花数量
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([{
let printStyleList = ref({
single:[],
overall:[],
});
let currentPrintStyleList = ref({
centers:{
left:0,
top:0,
@@ -152,7 +175,7 @@ export default defineComponent({
rotateZ:0,
},
designOpenrtionBtn:false
}]);
});
let direction = ref('')
let imgDom = ref()
@@ -173,13 +196,17 @@ export default defineComponent({
return {
designOpenrtion,
designOpenrtionList,
designList,
setOkData,
exhibitionOpenrtionList,
overallSingle,
stateOverallSingle,
systemDesignerPercentage,
current,
driver__,
printAmount,
printZIndex,
printStyleList,
currentPrintStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
@@ -211,8 +238,8 @@ export default defineComponent({
let num = 1
let x = 0
let y = 0
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
num = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
// 添加鼠标按下事件监听器
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
@@ -236,7 +263,7 @@ export default defineComponent({
document.addEventListener('mousemove', mousemove);
// 添加鼠标松开事件监听器
let mouseup = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('mousemove',mousemove)
@@ -250,86 +277,110 @@ export default defineComponent({
methods: {
init(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
this.currentFullBodyView = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
if(designItemDetail.others.length == 0){
this.body = true
}
let DesignPrintOperationParent = this.$parent
this.designOpenrtion = true
this.clearModal()
this.designOpenrtionList = []
this.designOpenrtionList.push(...this.current.printObject.prints)
this.overallSingle = DesignPrintOperationParent.overallSingle
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
this.overallSingle = this.current.printObject.ifSingle?true:false
this.ifListOver()
if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
skecth.remove()
}
// this.sketch = {
// width:this.current.layersObject[1].imageSize[0]/10+'rem',
// height:this.current.layersObject[1].imageSize[1]/10+'rem'
// }
let print = new Image
print.src = this.current.printObject.prints[0].path
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
this.printStyleList[0].style.width = print.width+'px'
this.printStyleList[0].style.height = print.height+'px'
this.printStyleList[0].designOpenrtionBtn = false
nextTick().then(()=>{
if(this.designOpenrtionList[0].scale){
this.designOpenrtionList.forEach((item,index)=>{
this.setTemplate(item,index)
this.printAmount = this.printStyleList.length
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
}
if(this.current.printObject.ifSingle != this.overallSingle){
this.refetchTemplate(0)
}
})
}else{
this.refetchTemplate(0)
}
if(this.exhibitionOpenrtionList[this.stateOverallSingle].length > 0){
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((item,index)=>{
this.setTemplate(item,index)
})
}else{
}
},
ifListOver(){
if(!this.overallSingle){
// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
this.stateOverallSingle = 'overall'
}else{
this.stateOverallSingle = 'single'
}
},
setPrintWH(url){
let print = new Image
return new Promise((resolve, reject) => {
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
resolve()
print.remove()
}
print.src = url
})
},
systemDesigner(num) {
let DesignPrintOperationParent = this.$parent
DesignPrintOperationParent.systemDesignerPercentage = num
},
formatter(value) {
if(value<30)value = 30
return `${value*3}%`;
},
setOveralSingle(){
let DesignPrintOperationParent = this.$parent
DesignPrintOperationParent.overallSingle = this.overallSingle
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
if(!this.overallSingle){
// this.refetchTemplate(0)
this.stateOverallSingle = 'overall'
}else{
this.stateOverallSingle = 'single'
}
this.random()
// this.random()
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
async setpitch(item,index){
await this.setPrintWH(item.path)
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDomIndex = index
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
if(!this.overallSingle){
this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
this.refetchTemplate(0)
this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
angle:0,
designType:item.designType,
level2Type:item.level2Type,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:.3,
location:[0,0]
}
this.systemDesignerPercentage = 30
}else{
this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
this.exhibitionOpenrtionList[this.stateOverallSingle].push({
angle:0,
designType:item.designType,
level2Type:item.level2Type,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:1,
location:[0,0]
})
this.refetchTemplate(currentIndex)
}
},
//设置移动
itemMoveMousedown(index,event){
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
v.designOpenrtionBtn = false
})
if(!this.overallSingle){
@@ -339,17 +390,17 @@ export default defineComponent({
}
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
this.printStyleList[this.stateOverallSingle][index].transform = {
scale:scale,
rotateZ:rotateZ?rotateZ:0,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
@@ -359,19 +410,19 @@ export default defineComponent({
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
this.printStyleList[this.imgDomIndex].transform = {
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
@@ -382,22 +433,22 @@ export default defineComponent({
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
if(!this.overallSingle){
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
}
}
@@ -413,38 +464,38 @@ export default defineComponent({
let w,h
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
h = (e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num1+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
@@ -461,47 +512,12 @@ export default defineComponent({
document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove);
},
setprintAmount(){
if(this.printAmount < 1){
this.printAmount = 1
return
}
if(this.printAmount > 20){
this.printAmount = 20
return
}
let printTiemNum
if(this.printAmount>this.printStyleList.length){
let num = this.printAmount - this.printStyleList.length
for (let index = 0; index < num; index++) {
this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
}
}else{
let num = this.printStyleList.length - this.printAmount
this.designOpenrtionList.splice(this.printStyleList.length-num,num)
this.printStyleList.splice(this.printStyleList.length-num,num)
}
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
this.imgDomIndex = this.printStyleList.length-1
},
deletePrint(){
if(this.designOpenrtionList.length <= 1){
return
}
this.designOpenrtionList.splice(this.imgDomIndex,1)
this.printStyleList.splice(this.imgDomIndex,1)
this.printAmount = this.designOpenrtionList.length
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
},
random(){
this.designOpenrtionList.forEach((v,index)=>{
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
this.refetchTemplate(index)
})
},
@@ -527,7 +543,7 @@ export default defineComponent({
x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
}
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
this.printStyleList[index]={
this.printStyleList[this.stateOverallSingle][index]={
centers:{
left:0,
top:0,
@@ -544,13 +560,14 @@ export default defineComponent({
transform:{
// scale:scale<.2?.2:scale,//0.2-3
// rotateZ:rotateZ1-rotateZ2,
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
},
designOpenrtionBtn:false
}
},
//设置图片
setTemplate(item,index) {
async setTemplate(item,index) {
await this.setPrintWH(item.path)
this.designOpenrtionList
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
@@ -565,7 +582,7 @@ export default defineComponent({
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
this.printStyleList[index]={
this.printStyleList[this.stateOverallSingle][index]={
centers:{
left:0,
top:0,
@@ -587,7 +604,7 @@ export default defineComponent({
}
},
computeZindex(){
let arr = JSON.parse(JSON.stringify(this.printStyleList))
let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
arr.sort((a, b) => {
var a_num = a["style"].zIndex;
var b_num = b["style"].zIndex;
@@ -600,38 +617,41 @@ export default defineComponent({
return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
},
computeSize(arr){
// let num = this.sketch/
let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
let location
arr.forEach((v,index)=>{
if(!this.overallSingle){
scale = this.systemDesignerPercentage/100
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}else{
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
return new Promise(async (resolve, reject) => {
// let num = this.sketch/
let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
let location
for (let index = 0; index < arr.length; index++) {
if(!this.overallSingle){
scale = this.systemDesignerPercentage/100
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}else{
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}
let obj = {
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
}
prints.push(obj)
}
let obj = {
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.designOpenrtionList[index].designType,
path:this.designOpenrtionList[index].path,
minIOPath:this.designOpenrtionList[index].minIOPath,
}
prints.push(obj)
resolve(prints)
})
return prints
},
setPreview(){
async setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
@@ -645,10 +665,13 @@ export default defineComponent({
// priority:priority,
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
let data = this.store.state.DesignDetailModule.designPreviewData
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
await this.computeZindex().then((rv)=>{
this.setOkData = rv
})
data.designSingleItemDTOList[index].printObject={
ifSingle:this.overallSingle,
prints:this.computeZindex(),
prints:this.setOkData,
}
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
@@ -678,12 +701,12 @@ export default defineComponent({
index = ind
}
})
console.log(this.designItemDetailTS);
if(this.designItemDetailTS.rv){
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject.prints = this.computeZindex()
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
designItemDetail.clothes[index].printObject.prints = this.setOkData
designItemDetail.ifSubmit = true
designItemDetail.clothes.forEach((item,i)=>{
let a
@@ -706,31 +729,18 @@ export default defineComponent({
}
},
clearModal(){
this.printAmount = 1//显示数量
this.designOpenrtion = true//modal页面关闭
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.designOpenrtionList = []
this.printStyleList.splice(1,this.printStyleList.length-1)
this.printStyleList[0] = {
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
this.designList = []
this.exhibitionOpenrtionList = {
single:[],
overall:[],
}
this.printStyleList = {
single:[],
overall:[],
}
},
closeModal(){
@@ -887,30 +897,6 @@ export default defineComponent({
height: calc(3rem*1.2);
line-height: calc(3rem*1.2);
}
.print_input{
margin-top: calc(1rem*1.2);
width: calc(9.85rem*1.2);
display: flex;
.search_input{
width: calc(6.85rem*1.2);
margin-right: calc(1rem*1.2);
padding: 0 calc(1.5rem*1.2);
border: 2px solid #000;
font-size: calc(1.2rem*1.2);
font-weight: 400;
height: calc(3rem*1.2);
border-radius: calc(1.5rem*1.2);
&::placeholder {
color: #C2C2C2;
}
}
i{
width: calc(2rem*1.2);
cursor: pointer;
display: flex;
align-items: center;
}
}
.designOpenrtion_nav{
display: flex;
margin-top: calc(2rem*1.2);
@@ -922,13 +908,6 @@ export default defineComponent({
&.designOpenrtion_nav::-webkit-scrollbar {
display: none;
}
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
.designOpenrtion_single{
width: 40%;
margin-bottom: calc(2rem*1.2);
@@ -944,6 +923,7 @@ export default defineComponent({
&.show_print_right{
border: none;
padding: 0;
flex: 1;
height: auto;
}
}
@@ -1104,6 +1084,19 @@ export default defineComponent({
width: 0;
height: 0;
}
.designOpenrtion_delete{
position: absolute;
top: 0;
right: 0;
width: 4rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
img{
width: 100%;
height: 100%;
}
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";

412
src/component/Detail/DesignPrintOperationMobile.vue
View File

@@ -49,17 +49,23 @@
</a-slider>
</div>
<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
<div v-show="overallSingle" class="print_input">
<!-- <div v-show="overallSingle" class="print_input">
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
<i class="fi fi-rr-trash" @click="deletePrint"></i>
</div>
</div> -->
<div class="designOpenrtionMobile_nav">
<div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<!-- <div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<img :src="item.path" @click="setpitch(item,index)">
</div> -->
<div class="designOpenrtionMobile_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtionMobile_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
<div class="designOpenrtionMobile_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<!-- <div class="designOpenrtionMobile_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
</div> -->
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
@@ -69,14 +75,15 @@
<div class="designOpenrtionMobile_centent" id="designOpenrtionCentent">
<!-- <div class="designOpenrtionMobile_imgMask" :style="sketch"> -->
<div class="designOpenrtionMobile_imgMask">
<div class="designOpenrtionMobile_print" v-show="overallSingle">
<div class="designOpenrtionMobile_print">
<div
v-for="item,index in designOpenrtionList"
v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]"
:key="item"
:style="[printStyleList?.[index]?.style]"
v-if="overallSingle"
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
@touchstart.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false">
</div>
</div>
@@ -84,17 +91,23 @@
<img :src="current?.path" alt="" class="designOpenrtionMobile_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtionMobile_sketch_mask">
<div class="designOpenrtionMobile_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designOpenrtionMobile__delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @touchstart.stop="itemMoveMousedown(index,$event)">
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.stop="itemMoveMousedown(0,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
<li class="designOpenrtionMobile__delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</ul>
</div>
</div>
@@ -125,15 +138,25 @@ export default defineComponent({
setup(prop) {
let designOpenrtion = ref(false);
let designOpenrtionList = ref([])
let designOpenrtionList = ref([])//新增的元素
let designList = ref([])//已经存在的元素
let setOkData = ref([])
let exhibitionOpenrtionList = ref({
single:[],
overall:[],
})//展示的元素
let driver__ = inject('driver__')
let current = inject('current')//父组件传过来的数据
let setRevocation = inject('setRevocation')//父组件传过来的数据
let overallSingle = ref(false)
let stateOverallSingle = ref('single')
let systemDesignerPercentage = ref(0)
let printAmount = ref(1)//印花数量
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([{
let printStyleList = ref({
single:[],
overall:[],
});
let currentPrintStyleList = ref({
centers:{
left:0,
top:0,
@@ -152,7 +175,7 @@ export default defineComponent({
rotateZ:0,
},
designOpenrtionBtn:false
}]);
});
let direction = ref('')
let imgDom = ref()
@@ -174,11 +197,15 @@ export default defineComponent({
designOpenrtion,
designOpenrtionList,
overallSingle,
stateOverallSingle,
designList,
setOkData,
exhibitionOpenrtionList,
systemDesignerPercentage,
current,
printAmount,
printZIndex,
printStyleList,
currentPrintStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
@@ -211,8 +238,8 @@ export default defineComponent({
let num = 1
let x = 0
let y = 0
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
num = value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
// 添加鼠标按下事件监听器
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
@@ -236,7 +263,7 @@ export default defineComponent({
document.addEventListener('touchmove', touchmove,{passive:true});
// 添加鼠标松开事件监听器
let touchend = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
document.removeEventListener('touchend',touchend)
document.removeEventListener('touchmove',touchmove)
@@ -254,52 +281,48 @@ export default defineComponent({
if(designItemDetail.others.length == 0){
this.body = true
}
let DesignPrintOperationParent = this.$parent
this.designOpenrtion = true
this.clearModal()
this.designOpenrtionList = []
this.designOpenrtionList.push(...this.current.printObject.prints)
this.overallSingle = DesignPrintOperationParent.overallSingle
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
this.overallSingle = this.current.printObject.ifSingle?true:false
this.ifListOver()
if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
skecth.remove()
}
// this.sketch = {
// width:this.current.layersObject[1].imageSize[0]/10+'rem',
// height:this.current.layersObject[1].imageSize[1]/10+'rem'
// }
let print = new Image
print.src = this.current.printObject.prints[0].path
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
this.printStyleList[0].style.width = print.width+'px'
this.printStyleList[0].style.height = print.height+'px'
this.printStyleList[0].designOpenrtionBtn = false
nextTick().then(()=>{
if(this.designOpenrtionList[0].scale){
this.designOpenrtionList.forEach((item,index)=>{
this.setTemplate(item,index)
this.printAmount = this.printStyleList.length
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
}
if(this.current.printObject.ifSingle != this.overallSingle){
this.refetchTemplate(0)
}
})
}else{
this.refetchTemplate(0)
}
if(this.exhibitionOpenrtionList[this.stateOverallSingle].length > 0){
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((item,index)=>{
this.setTemplate(item,index)
})
}else{
}
},
ifListOver(){
if(!this.overallSingle){
// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
this.stateOverallSingle = 'overall'
}else{
this.stateOverallSingle = 'single'
}
},
setPrintWH(url){
let print = new Image
return new Promise((resolve, reject) => {
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
resolve()
print.remove()
}
print.src = url
})
},
systemDesigner(num) {
let DesignPrintOperationParent = this.$parent
@@ -310,27 +333,53 @@ export default defineComponent({
},
setOveralSingle(){
let DesignPrintOperationParent = this.$parent
DesignPrintOperationParent.overallSingle = this.overallSingle
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
if(!this.overallSingle){
// this.refetchTemplate(0)
this.stateOverallSingle = 'overall'
}else{
this.random()
this.stateOverallSingle = 'single'
}
// this.random()
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
async setpitch(item,index){
await this.setPrintWH(item.path)
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDomIndex = index
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
if(!this.overallSingle){
this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
angle:0,
designType:item.designType,
level2Type:item.level2Type,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:.3,
location:[0,0]
}
this.refetchTemplate(0)
this.systemDesignerPercentage = 30
}else{
this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
this.exhibitionOpenrtionList[this.stateOverallSingle].push({
angle:0,
designType:item.designType,
level2Type:item.level2Type,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:1,
location:[0,0]
})
this.refetchTemplate(currentIndex)
}
},
//设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
v.designOpenrtionBtn = false
})
if(!this.overallSingle){
@@ -340,17 +389,17 @@ export default defineComponent({
}
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
this.printStyleList[this.stateOverallSingle][index].transform = {
scale:scale,
rotateZ:rotateZ?rotateZ:0,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
document.addEventListener("touchend", this.touchend);
document.addEventListener("touchmove", this.moveMousemove);
},
@@ -358,23 +407,23 @@ export default defineComponent({
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
this.printStyleList[this.imgDomIndex].transform = {
let scale = Number(this.imgDom.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
}
document.addEventListener("touchend", this.sizeMouseup);
@@ -385,22 +434,22 @@ export default defineComponent({
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
if(!this.overallSingle){
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
}
}
@@ -421,12 +470,12 @@ export default defineComponent({
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.bottom+'px'
w = ( e.changedTouches[0].pageX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
height = h+'px'
width = h*num+'px'
@@ -435,19 +484,19 @@ export default defineComponent({
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.right+'px'
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
width = w+'px'
height = w*num1+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
@@ -464,47 +513,12 @@ export default defineComponent({
document.removeEventListener("touchend", this.touchend);
document.removeEventListener("touchmove", this.moveMousemove);
},
setprintAmount(){
if(this.printAmount < 1){
this.printAmount = 1
return
}
if(this.printAmount > 20){
this.printAmount = 20
return
}
let printTiemNum
if(this.printAmount>this.printStyleList.length){
let num = this.printAmount - this.printStyleList.length
for (let index = 0; index < num; index++) {
this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
}
}else{
let num = this.printStyleList.length - this.printAmount
this.designOpenrtionList.splice(this.printStyleList.length-num,num)
this.printStyleList.splice(this.printStyleList.length-num,num)
}
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
this.imgDomIndex = this.printStyleList.length-1
},
deletePrint(){
if(this.designOpenrtionList.length <= 1){
return
}
this.designOpenrtionList.splice(this.imgDomIndex,1)
this.printStyleList.splice(this.imgDomIndex,1)
this.printAmount = this.designOpenrtionList.length
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
},
random(){
this.designOpenrtionList.forEach((v,index)=>{
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
this.refetchTemplate(index)
})
},
@@ -530,7 +544,7 @@ export default defineComponent({
x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
}
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
this.printStyleList[index]={
this.printStyleList[this.stateOverallSingle][index]={
centers:{
left:0,
top:0,
@@ -547,7 +561,7 @@ export default defineComponent({
transform:{
// scale:scale<.2?.2:scale,//0.2-3
// rotateZ:rotateZ1-rotateZ2,
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
},
designOpenrtionBtn:false
}
@@ -568,7 +582,7 @@ export default defineComponent({
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
this.printStyleList[index]={
this.printStyleList[this.stateOverallSingle][index]={
centers:{
left:0,
top:0,
@@ -590,7 +604,7 @@ export default defineComponent({
}
},
computeZindex(){
let arr = JSON.parse(JSON.stringify(this.printStyleList))
let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
arr.sort((a, b) => {
var a_num = a["style"].zIndex;
var b_num = b["style"].zIndex;
@@ -604,37 +618,40 @@ export default defineComponent({
},
computeSize(arr){
// let num = this.sketch/
let sketch = document.getElementsByClassName("designOpenrtionMobile_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
let location
arr.forEach((v,index)=>{
if(!this.overallSingle){
scale = this.systemDesignerPercentage/100
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}else{
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
return new Promise(async (resolve, reject) => {
let sketch = document.getElementsByClassName("designOpenrtionMobile_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let scale
let prints = []
let location
for (let index = 0; index < arr.length; index++) {
if(!this.overallSingle){
scale = this.systemDesignerPercentage/100
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}else{
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}
let obj = {
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
}
prints.push(obj)
}
let obj = {
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.designOpenrtionList[index].designType,
path:this.designOpenrtionList[index].path,
minIOPath:this.designOpenrtionList[index].minIOPath,
}
prints.push(obj)
resolve(prints)
})
return prints
},
setPreview(){
async setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
@@ -649,9 +666,12 @@ export default defineComponent({
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
let data = this.store.state.DesignDetailModule.designPreviewData
await this.computeZindex().then((rv)=>{
this.setOkData = rv
})
data.designSingleItemDTOList[index].printObject={
ifSingle:this.overallSingle,
prints:this.computeZindex(),
prints:this.setOkData,
}
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
@@ -686,7 +706,9 @@ export default defineComponent({
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject.prints = this.computeZindex()
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
designItemDetail.clothes[index].printObject.prints = this.setOkData
// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
designItemDetail.ifSubmit = true
designItemDetail.clothes.forEach((item,i)=>{
let a
@@ -708,31 +730,18 @@ export default defineComponent({
}
},
clearModal(){
this.printAmount = 1//显示数量
this.designOpenrtion = true//modal页面关闭
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.designOpenrtionList = []
this.printStyleList.splice(1,this.printStyleList.length-1)
this.printStyleList[0] = {
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
this.designList = []
this.exhibitionOpenrtionList = {
single:[],
overall:[],
}
this.printStyleList = {
single:[],
overall:[],
}
},
closeModal(){
@@ -1111,6 +1120,19 @@ export default defineComponent({
width: 0;
height: 0;
}
.designOpenrtionMobile__delete{
position: absolute;
top: 0;
right: 0;
width: 4rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
img{
width: 100%;
height: 100%;
}
}
.designOpenrtionMobile_rotote::after{
position: absolute;
content: "";

437
src/component/Detail/addDetails.vue Normal file
View File

@@ -0,0 +1,437 @@
<template>
<a-modal
class="addDetails_modal generalModel"
v-model:visible="showPayOrder"
:footer="null"
width="50%"
:maskClosable="false"
:centered="true"
:closable="false"
wrapClassName="#app"
:keyboard="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
</div>
<div class="addDetails_center">
<div class="modal_title_text">
<div>Add Details</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="exportCanvasBox_center">
<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
<div>新增</div>
</div> -->
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
</div>
</div>
<div class="exportCanvasBox_submit" @click="setSubmit">
<div class="started_btn">
submit
</div>
</div>
</div>
<div></div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
creditsDetail,
allOrder,
},
emits: ['setSloganData'],
setup(props,{emit}) {
let presentState = ref('paypal');
let showPayOrder = ref(false);
let loadingShow = ref(false);
let { t } = useI18n();
let canvas = reactive({});
let scale = 2;
let ratio = [1,1]
let exportWH = 512
let canvasBtn = reactive({
canvasState:'move',
canvasPencilWidth:4,
spreadState:false,
})
let canvasWH = ref(0);
onMounted(()=>{
})
let exportUrl = ''
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
let init = (data,index)=>{
normalCanvasState.value = []
reverseCanvasState.value = []
showPayOrder.value = true;
loadingShow.value = true
scale = 2;
ratio = [1,1]
exportWH = 512
nextTick(()=>{
let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
let height = canvasBox.offsetHeight;
canvasBox.style.width = height+'px'
canvasWH.value = height
var canvasDom = document.createElement("canvas");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
if(oldCanvasDom)oldCanvasDom.remove()
canvasBox.appendChild(canvasDom);
let img = new Image();
img.onload = function(){
let wScale = 1
let hScale = 1
if(img.width>img.height){
hScale = img.height/img.width
exportWH = img.width
}else{
wScale = img.width/img.height
exportWH = img.height
}
ratio = [wScale,hScale]
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#FFF",
width: canvasWH.value * wScale,
height: canvasWH.value * hScale,
isDrawingMode: false, // 开启绘图模式
});
scale = img.height/canvas.height
JSchangeType(canvas,'init')
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(canvasBtn.canvasState != 'move'){
updateCanvasState()
}
});
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.path
fabric.Image.fromURL(data.path, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);
// 将背景图添加到 canvas 的底层
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
updateCanvasState()
// img.selectable = false
// canvas.add(img)
},{ crossOrigin: "Anonymous" });
loadingShow.value = false
setOperation('pencil')
img.remove()
}
img.src = data.path
})
}
let clearCanvas = ()=>{
canvasBtn.canvasState = 'move'
canvasBtn.spreadState = false
}
let rgba = 'rgba(0, 0, 0, 1)'
let brushIndicator = new fabric.Circle({
radius:(canvasBtn.canvasPencilWidth/2),
fill: '#fff',
stroke: '#000',
strokeWidth: 1,
originX: 'center',
originY: 'center',
visible :true,
left: -100,
top: -100,
erasable: false,
});
let setOperation = (str)=>{
canvasBtn.canvasState = str
if(str == 'move'){
setMove()
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
}else if(str == 'pencil'){
setPencil()
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
}else if(str == 'eraser'){
setEraser()
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
}
}
let setMove = ()=>{
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = true);
}
let setPencil = ()=>{
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
canvas.freeDrawingBrush.color = rgba
brushIndicator.set('fill',rgba)
canvas.freeDrawingBrush.isEraser = false
}
let setEraser = ()=>{
canvas.isDrawingMode = true
let eraser = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush = eraser
brushIndicator.set({fill: '#fff'});
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
// return
// }
let target = canvas.getActiveObjects()
target.forEach((item)=>{
canvas.fxRemove(item, {
onComplete(){
canvas.discardActiveObject(); // 丢弃当前选中的对象
canvas.renderAll(); // 重新渲染 Canvas
}
})
canvas.FX_DURATION = 300
})
}
let setTimeOutWidth
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth)
},300)
}
let updateCanvasState = () =>{
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
//撤回
let historyState = (str)=> {
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
let obj = reverseCanvasState.value.pop()
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
canvasState.value = obj
normalCanvasState.value.push(obj);
}else if(str == '' && normalCanvasState.value.length > 1){
let obj = normalCanvasState.value.pop()
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
reverseCanvasState.value.push(obj);
}else{
return
}
canvas.loadFromJSON(canvasState.value, () => {});
}
let setSubmit = ()=>{
var allObjects = canvas.getObjects();
if(allObjects.length == 0){
return
}
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255,1)",
width: exportWH * ratio[0],
height: exportWH * ratio[1],
isDrawingMode: false, // 开启绘图模式
});
canvas.backgroundImage.clone((back)=>{
back.set({
scaleX:1,
scaleY:1,
left:back.left*scale,
top:back.top*scale ,
})
exportCanvas.backgroundImage = back
allObjects.forEach((item,index)=>{
// let obj = fabric.util.object.clone(item);
if(item.type == 'circle')return
let obj
item.clone((cloned)=>{
obj = cloned
})
obj.set(
{
scaleX:(item.scaleX?item.scaleX:1)*scale,
scaleY:(item.scaleY?item.scaleY:1)*scale,
left:item.left*scale,
top:item.top*scale,
}
)
exportCanvas.add(obj)
if(allObjects.length-1 == index){
let data = exportCanvas.toDataURL('jpg')
showPayOrder.value = false;
clearCanvas()
emit('setSloganData',data)
}
})
})
}
return {
presentState,
showPayOrder,
loadingShow,
t,
...toRefs(canvasBtn),
init,
setOperation,
setPencilWidth,
historyState,
setSubmit,
};
},
data() {
return {
};
},
mounted() {},
methods: {
cancelDsign(){
this.showPayOrder = false
}
},
});
</script>
<style lang="less">
.addDetails_modal {
.closeIcon {
z-index: 2;
}
.addDetails_center{
position: relative;
// width: calc(512px / 2);
// width: 256px;
height: 100%;
display: flex;
flex-direction: column;
// height: calc(512px / 2);
margin: 0 auto;
.addDetails_center_item{
// position: relative;
background: #fff;
position: absolute;
display: flex;
border: 0.2rem solid #c4c4c4;
width: 25rem;
border-radius: 4px; /* 设置圆角半径 */
flex-wrap: wrap;
.addDetails_center_btn_item{
display: flex;
align-items: center;
padding: 1rem 0;
}
}
.exportCanvasBox_center{
height: 100%;
flex: 1;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #e6e6e6;
// overflow: scroll;
.addDetails_center_btn{
z-index: 2;
left: 50%;
transform: translate(-50%,-135%);
transition: all .3s;
padding: 1rem 1.5rem;
// position: relative;
input{
width: 100%;
margin-top: 1rem;
}
.icon-xiala{
position: absolute;
width: 2rem;
bottom: 0;
transform: translate(-50%, 90%);
left: 50%;
width: 6rem;
background: #fff;
text-align: center;
cursor: pointer;
&.icon-xiala::before{
transition: all .3s;
}
&.btnRotate::before{
transform: rotate(180deg);
display: block;
}
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
&.active{
border: 1px solid;
border-radius: .4rem;
}
}
&.spread{
transform: translate(-50%,0);
}
}
.canvas-container{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center:hover{
.addDetails_center_btn{
transform: translate(-50%,-101%);
&.spread{
transform: translate(-50%,0);
}
}
}
}
.exportCanvasBox_submit{
margin-top: 2.4rem;
text-align: center;
}
}
</style>

15
src/component/Detail/habit.vue
View File

@@ -105,11 +105,11 @@
<div class="habit_System_Designer_text_max">
<div class="habit_System_Designer_text">
{{ $t('Habit.System') }}<span>({{systemDesigner.system}}%)</span>
{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
</div>
<div class="habit_System_Designer_text">
{{ $t('Habit.Designer') }}<span>({{systemDesigner.designer}}%)</span>
{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
</div>
</div>
</div>
@@ -811,17 +811,18 @@ export default defineComponent({
// },
setWorkspaceStyle(data: any){
this.workspaceItem.styleId = data
this.putWorkspace(this.workspaceItem,'')
this.putWorkspace(this.workspaceItem,this.workspaceItem.id)
},
setStyle(){
this.openType.habit = false
// this.openType.habit = false
let habitSetStyle:any = this.$refs.habitSetStyle;
habitSetStyle.habitSetStyleMask = true
// habitSetStyle.habitSetStyleMask = true
// habitSetStyle.styleList = this.styleList
habitSetStyle.init();
habitSetStyle.init(this.workspaceItem);
},
setParentData(){
this.openType.habit = true
// this.openType.habit = true
// this.getDetail(this.workspaceItem.id)
},
},
});

25
src/component/Detail/habitSetStyle.vue
View File

@@ -10,6 +10,7 @@
:mask="habitSetStyleMask"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1050"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
@@ -23,7 +24,7 @@
</div>
<div class="habitSetStyle_content_bottom">
<div class="content_bottom_item" v-for="item in styleList">
<div class="content_bottom_item_border" :class="{active:item.id == selectStyleId}" @click="setItemSelect(item)">
<div class="content_bottom_item_border" :class="{active:item.name == selectStyle.name}" @click="setItemSelect(item)">
{{ item.name}}
</div>
</div>
@@ -56,7 +57,11 @@ setup(props,{emit}) {
let habitSetStyleMask:any = ref(false)//弹窗遮罩
let habitSetStyleData:any = reactive({
styleList:[],
selectStyleId:'',
selectStyle:{
name:'',
id:'',
},
selectStyleName:'',
isShowMark:false,
})
let getStyleList = ()=>{
@@ -75,11 +80,13 @@ setup(props,{emit}) {
habitSetStyleData.isShowMark = false
});
}
let init = ()=>{
let init = (data:any)=>{
habitSetStyle.value = true
if(habitSetStyleData.styleList.length == 0){
getStyleList()
}
habitSetStyleData.selectStyle.id = data.styleId
habitSetStyleData.selectStyle.name = data.styleName
// habitSetStyleData.selectStyleId = 'feng2'
}
let setCover = (item:any)=>{
@@ -90,7 +97,7 @@ setup(props,{emit}) {
let cleardata = ()=>{
habitSetStyle.value = false
habitSetStyleData.isShowMark = false
setParentData()
// setParentData()
}
let setParentData = ()=>{
@@ -101,11 +108,11 @@ setup(props,{emit}) {
cleardata()
}
let setOk= ()=>{
emit('setWorkspaceStyle',habitSetStyleData.selectStyleId)
emit('setWorkspaceStyle',habitSetStyleData.selectStyle.id)
cleardata()
}
let setItemSelect = (item:any)=>{
habitSetStyleData.selectStyleId = item.id
habitSetStyleData.selectStyle = item
}
return {
habitSetStyle,
@@ -161,6 +168,12 @@ methods: {
<style lang="less">
.habitSetStyle_modal {
&.generalModel{
.ant-modal-body {
height: calc(55rem*1.2);
}
}
.habitSetStyle_content{
display: flex;
flex-direction: column;

1
src/component/Detail/setDesignItem.vue
View File

@@ -210,6 +210,7 @@ export default defineComponent({
const img = new Image();
img.onload = () => {
resolve(img)
img.remove()
};
img.onerror = reject;
img.src = url;

1
src/component/Detail/setDesignItemMobile.vue
View File

@@ -206,6 +206,7 @@ export default defineComponent({
const img = new Image();
img.onload = () => {
resolve(img)
img.remove()
};
img.onerror = reject;
img.src = url;

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

@@ -486,6 +486,7 @@ export default defineComponent({
driverObj__.moveNext()
}
})
img.remove()
};
},100)
@@ -519,7 +520,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('ColorboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 3;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('ColorboardUpload.jsContent4'));
}

552
src/component/HomePage/ExportModel.vue
View File

@@ -42,7 +42,7 @@
>
</div>
</div>
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav' :closeNav.nav}">
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
<div
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
@@ -54,23 +54,26 @@
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" :class="{active:colorItem.checked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<img src="" alt="">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
<div v-if="item[0] && key == 'likePorductImg'" class="exportCanvasBox_intro">Selected Product</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-if="!colorItem.gradient">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
</div>
</div>
<div
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.checked?'active':'']"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<!-- <div v-if="key == 'likeDesignCollectionList'">{{ imgItem.designOutfitUrl }}</div> -->
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
</div>
</div>
@@ -192,6 +195,8 @@
</div>
<div class="exportCanvasBox_left_btn">
<div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
<div class="subitOkPreviewBtn" @click="setSubmit">Save</div>
<div class="subitOkPreviewBtn" @click="setShare">Share</div>
<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
@@ -273,6 +278,7 @@
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
</div>
</a-modal>
<publish ref="publish"></publish>
</a-modal>
</template>
<script>
@@ -289,14 +295,16 @@ import { message, Modal } from "ant-design-vue";
import domTurnImg from '@/tool/domTurnImg'
import { openGuide,driverObj__ } from "@/tool/guide";
const FileSaver = require("file-saver");
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture,JSSetRemoveImage } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
import {isMoible} from '@/tool/util'
import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
import publish from "@/component/WorksPage/publish.vue";
export default defineComponent({
components: {
scaleImage,
ExportNewCoolection,
publish,
},
props: ["msg", "sketchCatecoryList"],
setup(props,{emit}) {
@@ -314,6 +322,7 @@ export default defineComponent({
height: 100,
});
let publish = ref()
// canvasWH.value.width = [window.innerWidth/2.4]
// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
let credits = computed(() => {
@@ -326,7 +335,7 @@ export default defineComponent({
let likeDesignCollectionList = computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
});
let isShowMark = false;
let isShowMark = ref(false);
// let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
let position = {
//设置每个图形位置的初始值
@@ -343,15 +352,19 @@ export default defineComponent({
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let isLoadCanvas = false//撤回或者反撤回false为撤回
let init = () => {
let userlikeGroupId = 0
let beenPublished = 0
let init = (productData) => {
beenPublished = productData.beenPublished
userlikeGroupId = productData.userlikeGroupId
canvasWH.value.height = 100
normalCanvasState.value = []
reverseCanvasState.value = []
showUpgradePlan.value = true;
allBoardData.value.likeDesignCollectionList =
likeDesignCollectionList;
allBoardData.value[productData.key] = productData.imgList;
nextTick().then(async () => {
let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
@@ -369,7 +382,12 @@ export default defineComponent({
});
brushIndicator = clearBrushIndicator()
canvasOnDrop()//开启鼠标到画布事件
setRemoveImage()//设置元素删除
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(deleteObject)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObject
}
// setRemoveImage()//设置元素删除
canvas.on("object:modified", ()=>{
updateCanvasState()
});
@@ -411,117 +429,138 @@ export default defineComponent({
"colorBoards",
"sketchboardFiles",
"likeDesignCollectionList",
productData.key,
];
let oldKey = "";
let margin = 20; //每个图形边距
let maxHeight = 0
let sketchXy = {x:0,y:0}
let data = {
userLikeGroupId:userlikeGroupId
}
isShowMark.value = true
let oldExportCanvas = await new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.exportSearch, data)
.then((rv) => {
resolve(rv)
isShowMark.value = false
})
.catch((rv) => {
resolve(null)
isShowMark.value = false
});
})
// arr.forEach((item,index)=>{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if(!allItem){
resolve()
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
if(oldExportCanvas){
canvasWH.value.height = oldExportCanvas.canvasHeight
canvas.setHeight(canvasWH.value.height);
canvas.loadFromJSON(oldExportCanvas, () => {});
}else{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if(!allItem){
resolve()
}
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
console.log(allItem,key);
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
// console.log(sketchItem.x,sketchItem.y);
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
// setTimeout(() => {
resolve()
// }, 1000);
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
// setTimeout(() => {
resolve()
// }, 1000);
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
}
}
}
}
updateCanvasState('')//加载完成后记录一下
if(driver__.value.driver){
driverObj__.moveNext()
@@ -554,34 +593,7 @@ export default defineComponent({
// canvas.renderAll(); // 重新渲染 Canvas
updateCanvasState('remove')
}
let setRemoveImage = ()=>{
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
// 创建删除图片元素
let deleteImg = document.createElement('img')
deleteImg.src = deleteIcon
function renderIcon(icon) {
return function (ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
ctx.restore();
}
}
// 删除按钮控件
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: -16,
offsetX: 16,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon(deleteImg),
cornerSize: 24
})
}
let setImageWidth = (key)=>{
let imgWidth = canvasWH.value.width; //这是设置画布等宽
@@ -594,7 +606,9 @@ export default defineComponent({
//如果是mood 需要判断用户是否点击layout
disposeMoodboardShow = false;
}
if(key == 'upImgFiles'){
imgWidth = canvasWH.value.width / 4;
}
if (key == "printboardFiles") {
imgWidth = canvasWH.value.width / 8;
}
@@ -604,7 +618,7 @@ export default defineComponent({
(sketchGrouping - 1) * 20) /
sketchGrouping;
}
if (key == "likeDesignCollectionList") {
if (key == "likeDesignCollectionList" || key == 'likePorductImg') {
imgWidth =
(canvasWH.value.width -
(likeDesign - 1) * 20) /
@@ -614,23 +628,24 @@ export default defineComponent({
}
let setCanvasImage = (img,key,left,top,data)=>{
// data
console.log(data);
let imgId = 0
let designType = ''//表示收藏或者generate
let level1Type = ''//表示sketch或者print
if(key == 'disposeMoodboard'){
imgId = data.id
}else if(key == 'moodboardFiles'){
}else if(key == 'sketchboardFiles'){
}else if(key == 'printboardFiles'){
}else if(key == 'likeDesignCollectionList'){
let minioUrl = ''//表示收藏或者generate
if(key == 'likeDesignCollectionList'){
imgId = data.designOutfitId
minioUrl = data.url
}else if(key == 'upImgFiles'){
imgId = data
minioUrl = data.url
}else if(key == 'likePorductImg'){
imgId = data.id
}else if(key == 'disposeMoodboard'){
let url = data.imgUrl.split('?')[0]
var match = url.match(/:(\d+)\/(.*)/);
minioUrl = match[2]
console.log(match[2]);
// data.imgUrl
}else{
minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
}
// let id =
let proportion = img.height / img.width; //计算图形宽高比例
@@ -641,6 +656,8 @@ export default defineComponent({
// height: canvasWH.value.height/img.height,
left,
top,
imgId,
minioUrl,
scaleX:
imgWidth / img.width,
scaleY:(img.width * proportion * scaleWH) / img.height,
@@ -684,6 +701,10 @@ export default defineComponent({
if (key == "likeDesignCollectionList") {
data.imgUrl = item.designOutfitUrl;
data.name = "result" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
}
if (key == "likePorductImg") {
data.imgUrl = item.designOutfitUrl;
data.name = "porduct" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
}
img.push(data);
index++;
@@ -746,17 +767,18 @@ export default defineComponent({
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
isShowMark = false;
isShowMark.value = false;
});
if(driver__.value.driver){
driverObj__.moveNext()
}
setSubmit()//导出的时候保存
initAligningGuidelines(canvas,true)
})
.catch((res) => {
// message.warning(t('HomeView.jsContent3'));
isShowMark = false;
isShowMark.value = false;
initAligningGuidelines(canvas,true)
});
};
@@ -781,7 +803,7 @@ export default defineComponent({
operation.value = 'fill'
},
// onCancel(){
// _this.isShowMark = false
// _this.isShowMark.value = false
// resolve(false)
// }
});
@@ -842,11 +864,11 @@ export default defineComponent({
let present = {}
let setDragstart = (type,imgItem)=>{
currentType.value.type = type
present.checked = false
present.upScaleChecked = false
present = {}
if(imgItem.checked){
if(imgItem.upScaleChecked){
}else{
imgItem.checked = true
imgItem.upScaleChecked = true
present = imgItem
}
currentType.value.data = imgItem
@@ -881,34 +903,82 @@ export default defineComponent({
})
}
let setGroup = (data)=>{
var text = new fabric.Text(data.tcx,{
left: 0,
top: 60,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
fill: "black",
});
let text1 = new fabric.Text(data.name,{
left: 0,
top: 80,
width: 20,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
});
let width = 110 > text1.width ? 110 : text1.width;
var color = new fabric.Rect({
width: width,
height: 60,
textAlign: "left",
fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
});
let rect = {text,text1,color,width}
let rect
if(data.gradient){
let colorStops = []
data.gradient.gradientList.forEach(item=>{
let obj = {
offset:item.left.split('%')[0]/100,
color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
}
colorStops.push(obj)
})
let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
let linear = new fabric.Gradient({
type: 'linear', // 线性渐变
// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
colorStops: colorStops,
})
var color = new fabric.Rect({
top:0,
left:0,
width: 110,
height: 130,
textAlign: "left",
fill: linear // 设置渐变填充
// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
});
var text = new fabric.Text('',{
left: 0,
top: 0,
fontSize: 0,
fontFamily: "Arial",
textAlign: "left",
fill: "black",
});
let text1 = new fabric.Text('',{
left: 0,
top: 0,
width: 20,
fontSize: 0,
fontFamily: "Arial",
textAlign: "left",
});
rect = {text,text1,color,width:110}
}else{
var text = new fabric.Text(data.tcx,{
left: 0,
top: 60,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
fill: "black",
});
let text1 = new fabric.Text(data.name,{
left: 0,
top: 80,
width: 20,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
});
let width = 110 > text1.width ? 110 : text1.width;
var color = new fabric.Rect({
width: width,
height: 60,
textAlign: "left",
fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
});
rect = {text,text1,color,width}
}
return rect
}
let setCanvasColor = (top,left,rect)=>{
var group = new fabric.Group([rect.color, rect.text, rect.text1],{
let group
group = new fabric.Group([rect.color,rect.text,rect.text1],{
left,
top,
width: rect.width,
@@ -922,12 +992,13 @@ export default defineComponent({
// 创建矩形
let createImage = async (top, left,key)=> {
let itemCanvasImg = currentType.value.data.imgUrl
let data = JSON.parse(JSON.stringify(currentType.value.data))
if(key == 'likeDesignCollectionList'){
itemCanvasImg = currentType.value.data.designOutfitUrl;
}
await new Promise((resolve,reject)=>{
fabric.Image.fromURL(itemCanvasImg,(img) => {
setCanvasImage(img,key,left,top)//设置图片
setCanvasImage(img,key,left,top,data)//设置图片
canvas.add(img);
resolve()
},{ crossOrigin: "Anonymous" });
@@ -937,10 +1008,6 @@ export default defineComponent({
//设置画布监听修改添加事件，用来做撤回功能
let updateCanvasState = (str) =>{
const canvasAsJson = JSON.stringify(canvas.toJSON());
console.log(canvas.toJSON());
var json = canvas.toJSON(['aaaID']);
const d = canvas.toObject(['myFabricType1', 'myFabricType2'])
console.log(json,d);
if(str == 'loadingCompleted'){
// reverseCanvasState.value.push(canvasAsJson);
}
@@ -1030,7 +1097,6 @@ export default defineComponent({
// 检查是否鼠标离开了画布
// if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
// // 执行你的操作
// console.log('鼠标离开了画布');
// }
// if(!x || !y){
// document.removeEventListener('keydown',canvasKeyDown);
@@ -1152,10 +1218,16 @@ export default defineComponent({
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
fabric.Image.fromURL(e.target.result,(img) => {
setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,e.target.result)
canvas.add(img);
},{ crossOrigin: "Anonymous" })
let file = base64ToFile(e.target.result,'upload')
let formData = new FormData();
formData.append("file", file);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
fabric.Image.fromURL(rv.minioUrl,(img) => {
setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,rv)
canvas.add(img);
},{ crossOrigin: "Anonymous" })
})
input.value = ''
};
reader.readAsDataURL(file);
@@ -1413,8 +1485,8 @@ export default defineComponent({
let setCanvasDown = (event)=>{
// brushIndicator.set({fill: '#FFF',strokeWidth:0});
//设置移动端按下添加元素
if(isMoible && present.checked){
present.checked = false
if(isMoible && present.upScaleChecked){
present.upScaleChecked = false
present = {}
let pointerVpt = canvas.restorePointerVpt(event.pointer)
switch (currentType.value.type) {
@@ -1597,7 +1669,7 @@ export default defineComponent({
// });
// },
// // onCancel(){
// // _this.isShowMark = false
// // _this.isShowMark.value = false
// // resolve(false)
// // }
// });
@@ -1656,6 +1728,7 @@ export default defineComponent({
if(img.width*scaleSR.value>2048 || img.height*scaleSR.value>2048){
arr.push(index)
}
img.remove()
resolve(img)
}
img.src = item.imgUrl
@@ -1688,9 +1761,47 @@ export default defineComponent({
});
}
let toSvg = ()=>{
// console.log(canvas.toSvg());
}
let setShare = ()=>{
initAligningGuidelines(canvas,false)
let publishModal = publish.value
publishModal.publishMask = true
var imageDataURL = canvas.toDataURL({
format: "jpeg", // 导出格式为 PNG
quality: 1, // 图片质量为 1（最高质量）
});
let data = {
"imgUrl":imageDataURL,
userlikeGroupId:userlikeGroupId,
beenPublished
}
publishModal.init(data)
}
let setSubmit = ()=>{
let data = setCanvasContent()
data.canvasHeight = canvasWH.value.height
let blob = new Blob([JSON.stringify(data)], { type: "application/json" });
let formData = new FormData();
formData.append("file", blob, "data.json");
formData.append('userLikeGroupId', userlikeGroupId);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
message.success('save successfully')
})
}
let setCanvasContent = ()=>{
var json = canvas.toJSON(['imgId','minioUrl']);
// console.log(JSON.stringify(json));
json.objects.forEach(item=>{
if(item.type == 'image'){
delete item.src
}
})
return json
}
onMounted(() => {});
return {
toSvg,
@@ -1698,6 +1809,7 @@ export default defineComponent({
toSvg,
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
publish,//发布作品广场
credits,//积分 用来判断HD导出积分是否够用
init,//首页点击导出后初始化
setExport,//导出所有内容
@@ -1740,6 +1852,8 @@ export default defineComponent({
selectAllImg,//控制全选
selectImg,//选中单个图片
setExportSR,//设置SR导出
setShare,
setSubmit,
};
},
data(prop) {
@@ -1747,6 +1861,26 @@ export default defineComponent({
isMoible:isMoible()
};
},
computed: {
setGradient(){
return (gradient)=>{
let gradientStr = ''
gradient.gradientList.sort((a, b) => {
let aArr = a.left.split('%')[0]
let bArr = b.left.split('%')[0]
return aArr - bArr;
});
gradient.gradientList.forEach((item,index)=>{
let str = ','
if(gradient.gradientList.length == index+1)str = ''
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
})
return `${gradientStr}`
}
}
},
watch: {
'canvasWH.height':{
handler(newVal,oldVal){
@@ -1766,7 +1900,6 @@ export default defineComponent({
let mousedown = (event)=>{//按下
// console.log(event.target.getBoundingClientRect());
let position = {
y:event.touches[0].screenY,
top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
@@ -1777,7 +1910,6 @@ export default defineComponent({
let offsetTop = position.top+e.touches[0].screenY - position.y
offsetTop = offsetTop <= 0? 0 : offsetTop
offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
console.log();
scrollBox.style.marginTop = offsetTop+'px'
canvasBox.scroll({
top: offsetTop*scale, // 纵向滚动距离
@@ -1897,14 +2029,24 @@ export default defineComponent({
display: flex;
justify-content: space-between;
padding-top: 2rem;
flex-wrap: wrap;
.subitOkPreviewBtn{
position: initial;
transform: none;
margin-bottom: 2rem;
width: 40%;
text-align: center;
&.active{
opacity: .7;
cursor: not-allowed;
}
}
.subitOkPreviewBtn:nth-child(2n){
margin-left: 1rem;
}
.subitOkPreviewBtn:nth-child(3),.subitOkPreviewBtn:nth-child(4){
margin-bottom: 0;
}
}
}

1
src/component/HomePage/ExportNewCoolection.vue
View File

@@ -169,6 +169,7 @@ export default defineComponent({
sketch2.num = 1
sketch3.num = 2
resolve()
image.remove()
})
}

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

@@ -39,6 +39,9 @@
</div>
</div>
</div>
<a-popover title="Seed">
<input class="search_seed" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
</a-popover>
<input
class="search_input"
@input="ifMaximumLength"
@@ -139,7 +142,7 @@
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
>
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<sketchCategory v-if="type_.type2 == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
<sketchCategory v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
<div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'',]"
@@ -212,6 +215,7 @@ export default defineComponent({
label:useI18n().t('Generate.Model1')
})
let searchPictureName = ref("");
let searchPictureSeed:any = ref(0);
let store = useStore();
let fileList: any = ref([
@@ -233,9 +237,9 @@ export default defineComponent({
let generateProceedList = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let scene:any = props.scene
return {
searchPictureName,
searchPictureSeed,
store,
fileList,
sketchboardList,
@@ -243,7 +247,6 @@ export default defineComponent({
printModel,
printModelList,
isGenerate,
scene,
// printBoards,
// moodboarList,
@@ -373,7 +376,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('Generate.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('Generate.jsContent2'));
}
@@ -383,6 +386,7 @@ export default defineComponent({
this.printModel = value
},
getgenerate(){
if(this.isGenerate)return
clearInterval(this.remGenerateTime)
if(this.searchPictureName){
let arr = this.searchPictureName.split(/\s+/).length
@@ -415,7 +419,6 @@ export default defineComponent({
}
if(this.upload.level1Type == "Sketchboard"){
console.log(this.sketchboardList);
}else if(this.upload.level1Type == "Printboard"){
level2Type = this.scene?.value
}
@@ -426,14 +429,18 @@ export default defineComponent({
level1Type:this.upload.level1Type,
level2Type:level2Type,
text:this.searchPictureName,
seed:this.searchPictureSeed,
userId:this?.userInfo?.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:1,//为1就是Print
isTestUser:this.driver__.driver?false:this.isTest,
gender:this.workspace.sexEnum.name,
base64:base64,
sloganBase64:base64,
}
this.isGenerate = true
this.remGenerateTime = setTimeout(()=>{
this.remGenerate = true
},10000)
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => {
if(data.isTestUser){
@@ -456,17 +463,21 @@ export default defineComponent({
}
).catch(res=>{
this.isGenerate = false
clearInterval(this.remGenerateTime)
this.remGenerate = false
});
},
setGenerate(dataList:any){
this.remGenerateTime = setTimeout(()=>{
this.remGenerate = true
},10000)
let data = dataList
let dataNum = dataList.length
let state = true
this.generateTime = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.generateResult, data).then(
(rv) => {
state = true
if(this.isGenerate){//防止取消后有正在执行的获取状态
this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
rv.forEach((element:any) => {
@@ -475,12 +486,14 @@ export default defineComponent({
element.id_ = GO.id++
this.fileList.unshift(element)
data = data.filter((item:any) => item !== element.taskId);
this.sketchCatecoryList.forEach((itemCategory:any) => {
if(itemCategory.value == element.category){
element.categoryValue = itemCategory?.name
element.category = itemCategory?.value
}
});
element.categoryValue = this.scene?.name
element.category = this.scene?.value
// this.sketchCatecoryList.forEach((itemCategory:any) => {
// if(itemCategory.value == element.category){
// element.categoryValue = itemCategory?.name
// element.category = itemCategory?.value
// }
// });
}
});
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
@@ -533,6 +546,11 @@ export default defineComponent({
}
this.searchPictureName += str + value
},
ifSeedValue(e:any){
if(this.searchPictureSeed == ''){
this.searchPictureSeed = 0
}
},
ifMaximumLength(){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
@@ -635,8 +653,6 @@ export default defineComponent({
},
likeFile(item:any,str:string){
if(str == 'like'){
console.log();
let level2Type = ''
if(this.upload.level1Type == "Sketchboard"){
level2Type = item.category
@@ -724,7 +740,7 @@ export default defineComponent({
top: 0;
background: #fff;
padding-bottom: calc(2rem*1.2);
z-index: 2;
z-index: 3;
}
.generate_checkbox {
}

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

@@ -129,7 +129,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.warning(this.t('MarketingSketchUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.warning(this.t('MarketingSketchUpload.jsContent3'));
}

66
src/component/HomePage/Material.vue
View File

@@ -8,6 +8,25 @@
:centered="true"
> -->
<div class="my_material_header">
<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
<div class="select_block">
<a-select
ref="select"
v-model:value="disignType"
:options="disignTypeList"
@change="handleChange"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
</div>
<div class="my_material_header_right">
<div class="content_search_block">
<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList('')">
@@ -21,8 +40,8 @@
<div class="material_content_body scroll_style">
<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
<printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory>
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true" @upTypeSucced='upTypeSucced'></sketchCategory>
<!-- <printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory> -->
<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
</div> -->
@@ -67,7 +86,6 @@ export default defineComponent({
let pageSize = ref(12)
let total = ref(0)
let searcMaterialhName:any = ref('') //搜索名字
let designType:any = ref(null)
// let disignTypeList:any = ref([
let driver__:any = inject('driver__')
@@ -77,6 +95,11 @@ export default defineComponent({
let {t} = useI18n()
let usGenerateList = ref([])
let disignType = ref({
name:'',
value:''
})
return{
myMaterialModalShow,
imgList,
@@ -88,12 +111,12 @@ export default defineComponent({
pageSize,
total,
searcMaterialhName,
designType,
// disignTypeList,
workspace,
t,
driver__,
usGenerateList,
disignType,
}
},
data (prop) {
@@ -229,6 +252,9 @@ export default defineComponent({
this.currentPage = 1
this.pageSize = 12
this.imgList = []
if(code != 'Moodboard'){
this.disignType = this.disignTypeList[0].value
}
this.getLibraryList('')
},
@@ -251,6 +277,10 @@ export default defineComponent({
},
selectImgItem(imgData:any){
let parent:any = this.$parent
if(this.selectCode != 'Moodboard'){
imgData.categoryValue = imgData.level2TypeEnum.value
imgData.category = imgData.level2TypeEnum.name
}
if(parent.isUseGenerate){
this.setUseGenerate([])
imgData.checked = true
@@ -258,8 +288,12 @@ export default defineComponent({
imgId : imgData.id,
imgUr: imgData.imgUrl,
level2Type:imgData.level2Type,
categoryValue:imgData.categoryValue,
category:imgData.category,
designType:'library'
}
console.log(obj);
// parent.useGenerate.designType = 'collection'
this.$emit('setLibrary',obj)
}else{
@@ -283,6 +317,14 @@ export default defineComponent({
}
},
handleChange(){
this.currentPage = 1
this.imgList = []
this.getLibraryList('')
},
upTypeSucced(){
this.handleChange()
},
//选择所有的图片
async getLibraryList(str:any){
let workspace = JSON.parse(JSON.stringify(this.store.state.Workspace.workspace))
@@ -297,7 +339,7 @@ export default defineComponent({
}
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
level2Type: this.selectCode == 'Moodboard'?'':this.disignType,
modelSex:workspace?.sex,
page: this.currentPage,
// page:this.currentPage,
@@ -396,6 +438,16 @@ export default defineComponent({
position: sticky;
top: 0;
z-index: 2;
.my_material_header_left{
.select_block{
border: calc(0.1rem* 1.2) solid #F1F1F1;
margin-right: calc(2.3rem*1.2);
height: 4rem;
.ant-select-selector{
height: 90%;
}
}
}
.my_material_header_right{
display: flex;
justify-content: space-between;
@@ -415,7 +467,7 @@ export default defineComponent({
// font-size: 1.6rem*1.2);
font-size: calc(1.2rem*1.2);
font-weight: 400;
height: calc(3rem*1.2);
height: 4rem;
&::placeholder {
color: #C2C2C2;
@@ -466,7 +518,7 @@ export default defineComponent({
font-size: calc(2rem*1.2);
color: #030303;
}
.material_content_top_right{
display: flex;
align-items: center;

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

@@ -365,7 +365,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('MoodboardUpload.jsContent4'));
}

1
src/component/HomePage/NewCollectionReview.vue
View File

@@ -182,6 +182,7 @@ export default defineComponent({
sketchH[index]+=image.height * (300/image.width)
nextTick().then(()=>{
resolve()
image.remove()
})
}
})

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

@@ -30,7 +30,7 @@
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel">{{ scene.name }} <i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
<ul v-show="openMenu">
<li v-for="item,index in sceneList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.name }}</li>
<li v-for="item,index in printCatecoryList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.name }}</li>
</ul>
</div>
</div>
@@ -46,6 +46,8 @@
</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"
@@ -98,7 +100,7 @@
@confirmSelect="confirmSelect"
:disignTypeList="printCatecoryList"
></Material>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard"></Generate>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
@@ -119,6 +121,8 @@
<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>
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
@@ -160,6 +164,7 @@ 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';
@@ -171,6 +176,7 @@ export default defineComponent({
Generate,
scaleImage,
generalMenu,
sketchCategory,
},
setup(){
let store:any =useStore()
@@ -300,6 +306,7 @@ export default defineComponent({
material.init('Printboard')
}
if(num == 3){
this.scene = this.printCatecoryList[0]
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
@@ -355,7 +362,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('PrintboardUpload.jsContent2'));
}
@@ -430,8 +437,10 @@ export default defineComponent({
file.imgUrl = rv.url
file.pin = false
file.id = rv.id
file.category = this.printCatecoryList[0].value
file.categoryValue = this.printCatecoryList[0].name
file.resData = rv
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
@@ -503,6 +512,8 @@ export default defineComponent({
file.imgUrl = rv.url
file.id = rv.id
file.resData = rv
file.category = this.printCatecoryList[0].value
file.categoryValue = this.printCatecoryList[0].name
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
@@ -549,6 +560,13 @@ export default defineComponent({
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.value
v.categoryValue=item.name
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
@@ -592,10 +610,8 @@ export default defineComponent({
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
console.log(data);
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.scene = data
this.openMenu = false
},
openPrintModel(){

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

@@ -138,7 +138,7 @@
<div class="modal_img">
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :item="item" :driver__="driver__.driver"></sketchCategory>
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
<!-- <div
class="delete_like_file_block left1"
@@ -154,7 +154,7 @@
<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>
<a-checkbox v-model="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>
@@ -432,7 +432,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('SketchboardUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('SketchboardUpload.jsContent3'));
}
@@ -482,6 +482,13 @@ export default defineComponent({
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.sketchCatecoryList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.value
v.categoryValue=item.name
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){

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

@@ -93,7 +93,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('Upload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('Upload.jsContent2'));
}

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

@@ -136,8 +136,6 @@ export default defineComponent({
methods:{
nextStep(){
let colorBoards = this.store.state.UploadFilesModule.colorBoards
console.log(colorBoards);
if(this.collectionStep == 1){
let disposeMoodboard = this.store.state.UploadFilesModule.disposeMoodboard
let moodboard = this.store.state.UploadFilesModule.moodboard

26
src/component/HomePage/createSlogan.vue
View File

@@ -86,7 +86,9 @@ import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { JSSetRemoveImage } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
creditsDetail,
@@ -146,8 +148,8 @@ export default defineComponent({
canvasWH.value = height
scale = exportWH/canvasWH.value
var canvasDom = document.createElement("canvas");
let oldCanvasDom = canvasBox.querySelector('canvas')
if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
if(oldCanvasDom)oldCanvasDom.remove()
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#e6e6e6",
@@ -157,6 +159,11 @@ export default defineComponent({
});
canvas.on('object:moving',canvasMoving)
setTextFun('请输入一段话吧~')
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
// setRemoveImage()
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
@@ -181,6 +188,21 @@ export default defineComponent({
textBtnShow.value = false
}
}
let deleteObj = ()=> {
if(!canvas.getActiveObjects()){
return
}
let target = canvas.getActiveObjects()
target.forEach((item)=>{
canvas.fxRemove(item, {
onComplete(){
canvas.discardActiveObject(); // 丢弃当前选中的对象
canvas.renderAll(); // 重新渲染 Canvas
}
})
canvas.FX_DURATION = 300
})
}
let messageShow = false
let canvasMoving = (options)=>{
let obj = options.target

14
src/component/HomePage/printCategory.vue
View File

@@ -54,6 +54,7 @@
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
name:'filterComponent',
emits:['upTypeSucced'],
props:{
disignTypeList:{
type:Object
@@ -77,7 +78,7 @@
default:{class1:'',class2:''},
}
},
setup(props:any){
setup(props:any,{emit}){
let showFileCategory = (file:any)=> {
file.categoryShow = true;
nextTick().then(()=>{
@@ -114,11 +115,12 @@
libraryId:[item.id],
level2Type:item.category,
}
// Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
// (rv: any) => {
// }
// ).catch((res)=>{
// });
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});
}
return {
showFileCategory,

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

@@ -26,10 +26,10 @@
<div class="productImg_content_item_title">Select Collection</div>
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
<img v-lazy="item.designOutfitUrl" alt="">
<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl" alt="" :class="{active:item.isChecked}">
</div>
</div>
<div class="productImg_content_item_title">Up Load</div>
<div class="productImg_content_item_title">Upload</div>
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
@@ -41,17 +41,18 @@
<div
class="upload_file_item_content content_item_imgBox_itemImg"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
<img @click="setGenerate(file)" :src="file?.imgUrl" class="upload_img" :class="{active:file?.isChecked}"/>
<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
<i class="fi fi-rr-trash"></i>
</div>
</div> -->
</div>
</div>
<div class="upload_file_item upload_component ">
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
<a-upload
:action="uploadUrl + '/api/element/upload'"
:action="uploadUrl + '/api/history/toProductImageElementUpload'"
list-type="picture-card"
:capture="null"
:data="{
@@ -76,29 +77,62 @@
</div>
</div>
<div class="productImg_content_item_title">Magic Tools</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="searchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
</div>
<textarea
v-show="isTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="searchName"
></textarea>
<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
{{ $t('Generate.Generate') }}
</div>
<div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remProductimg" @click="removeProductimg" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
</div>
</div>
<div class="productImg_right">
<div class="productImg_content_item_title">Selected Product</div>
<div class="productImg_right_item_box generalScroll" v-mousewheel>
<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
<img v-lazy="item.url" alt="">
<img :src="item.url" alt="">
<div class="productImg_right_item_like">
<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
</div>
<div class="productImg_right_item_scale">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(generateList,index)"></i>
</div>
</div>
</div>
<div class="productImg_content_item_title productImg_right_titleBtn">
Selected Product
<div class="button_second">Export</div>
<div class="button_second" @click="setExport">Export</div>
</div>
<div class="productImg_right_item_box generalScroll" v-mousewheel>
<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
<img v-lazy="item.url" alt="">
<img :src="item.url" alt="">
<div class="productImg_right_item_like">
<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
</div>
<div class="productImg_right_item_scale">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(likeList,index)"></i>
</div>
</div>
</div>
</div>
@@ -108,6 +142,7 @@
<a-spin size="large" />
</div>
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
<scaleImage ref="scaleImage"></scaleImage>
</a-modal>
</template>
@@ -125,74 +160,59 @@ import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
import ExportModel from "@/component/HomePage/ExportModel.vue";
import { useStore } from "vuex";
import scaleImage from "@/component/HomePage/scaleImage.vue";
export default defineComponent({
components:{
ExportModel,
scaleImage,
},
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n()
const upload:any = ref({})
let productImg: any = ref(false);//弹窗
let productImgMask:any = ref(false)//弹窗遮罩
let productImgData:any = reactive({
isShowMark:false,
beenPublished:0,
fileList:[],
searchName:'',
isTextarea:false,//是否展开
remProductimg:false,//是否出现取消按钮
isProductimg:false,//开始生成
selectProductimgList:[],
generateList:[
{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:2,
}
],
likeList:[
{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},
],
})
let ExportModel = ref()
let likeDesignCollectionList: any = computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
});
let init = ()=>{
let userlikeGroupId = 0
let init = (userGroupId:any,beenPublished:any)=>{
productImg.value = true
console.log(likeDesignCollectionList);
productImgData.beenPublished = beenPublished
upload.value = {
userlikeGroupId:userGroupId
}
userlikeGroupId = userGroupId
getLikeProductImage(userGroupId)
}
let getLikeProductImage = (userGroupId:any)=>{
let data = {
userLikeGroupId:userGroupId
}
Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
(rv) => {
productImgData.likeList.push(...rv)
}
).catch(res=>{
});
}
let cancelDsign = ()=>{
Modal.confirm({
@@ -219,11 +239,9 @@ export default defineComponent({
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.imgUrl = res.data.url;
// file.type_ = {
// type1:'upload',
// type2:'Moodboard'
// };
file.id = res.data.id
file.isChecked = true
file.type = 'ProductElement'
productImgData.fileList.filter((v: any) => v.status === "done");
}else{
bor = false
@@ -242,7 +260,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(useI18n().t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(useI18n().t('MoodboardUpload.jsContent4'));
}
@@ -251,35 +269,191 @@ export default defineComponent({
let deleteFile = (index:any)=>{
productImgData.fileList.splice(index,1)
}
let setGenerate = (item:any)=>{
item.isChecked = !item.isChecked
// productImgData.selectProductimgList
}
let likeFile = (item:any,str:any,index:any) =>{
if(str == 'like'){
productImgData.likeList.push(item)
productImgData.generateList.splice(index,1)
}else{
productImgData.generateList.push(item)
productImgData.likeList.splice(index,1)
let url
let data = {
toProductImageResultId:[item.id]
}
if(str == 'like'){
url = Https.httpUrls.productImageLike
}else{
url = Https.httpUrls.productImageUnLike
}
Https.axiosPost(url, data).then(
(rv) => {
if(str == 'like'){
productImgData.likeList.push(item)
productImgData.generateList.splice(index,1)
}else{
productImgData.generateList.push(item)
productImgData.likeList.splice(index,1)
}
}
).catch(res=>{
});
}
let setExport = ()=>{
// let exportModel:any = this.$refs.ExportModel
// exportModel.init()
let data = {
key:'likePorductImg',
imgList:productImgData.likeList,
userlikeGroupId,
beenPublished:productImgData.beenPublished
}
let exportModel:any = ExportModel.value
exportModel.init(data)
}
let remPrductimgTime:any = null
let prductimgTime:any = null
let getPrductimg = ()=>{
if(productImgData.isProductimg) return
clearInterval(remPrductimgTime)
let selectArr:any = []
let obj = {
"createTime": "",
"elementId": 0,
"elementType": "",
"id": 0,
"isLike": 0,
"taskId": "",
"toProductImageRecordId": 0,
"url": ""
}
productImgData.fileList.forEach((item:any)=>{
if(item.isChecked){
obj.elementId = item.id
obj.elementType = item.type
selectArr.push(JSON.parse(JSON.stringify(obj)))
}
})
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.isChecked){
obj.elementId = item.designOutfitId
obj.elementType = 'DesignOutfit'
selectArr.push(JSON.parse(JSON.stringify(obj)))
}
})
if(selectArr.length == 0) {
message.info('Please select at least one picture')
return
}
let data:any ={
prompt:productImgData.searchName,
toProductImageVOList:selectArr,
userLikeGroupId:upload.value.userlikeGroupId,
}
productImgData.isProductimg = true
remPrductimgTime = setTimeout(()=>{
productImgData.remProductimg = true
},10000)
Https.axiosPost(Https.httpUrls.toProduct, data).then(
(rv) => {
let arr:any = []
rv.forEach((item:any)=>{
arr.push(item.taskId)
})
setPrductimg(arr)
}
).catch(res=>{
productImgData.isProductimg = false
clearInterval(remPrductimgTime)
productImgData.remProductimg= false
});
}
let generateProceedList:any = []
let setPrductimg = (dataList:any)=>{
let data = dataList
let dataNum = dataList.length
let state = true
prductimgTime = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.toProductImageResult, data).then(
(rv) => {
state = true
if(productImgData.isProductimg){//防止取消后有正在执行的获取状态
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
rv.forEach((element:any) => {
if(element.status == 'Success'){
element.imgUrl = element.url
productImgData.generateList.unshift(element)
}
data = data.filter((item:any) => item !== element.taskId);
});
generateProceedList = data
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
// }
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productImgData.remProductimg = false
productImgData.isProductimg = false
}
}
}
).catch(res=>{
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productImgData.isProductimg = false
productImgData.remProductimg= false
});
},1000)
}
let removeProductimg = ()=>{
productImgData.isProductimg = false
productImgData.remProductimg= false
clearInterval(prductimgTime)
let userInfo:any = getCookie("userInfo")
if(generateProceedList){
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
let str = generateProceedList.join(',')
console.log(str,generateProceedList);
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
generateProceedList = []
}
).catch(res=>{
});
}
}
let scaleImage = ref()
let setScaleImage = (arr:any,index:any)=>{
arr.forEach((item:any)=>{
item.imgUrl = item.url
})
scaleImage.value.init(arr,index)
scaleImage.value.isLike = false
}
//超分
let setTask = (data:any)=>{
emit('setTask',data)
}
return {
upload,
productImg,
productImgMask,
...toRefs(productImgData),
likeDesignCollectionList,
ExportModel,
init,
cancelDsign,
fileUploadChange,
beforeUpload,
deleteFile,
setGenerate,
likeFile,
setExport,
getPrductimg,
removeProductimg,
scaleImage,
setScaleImage,
setTask,
};
},
@@ -309,12 +483,7 @@ export default defineComponent({
// moodTemplateId: "", //模板id
token: "",
uploadUrl: "",
upload: {
isPin: 0,
gender:'',
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
};
},
mounted() {
@@ -370,13 +539,7 @@ export default defineComponent({
.upload_item{
}
.upload_file_item{
display: flex;
margin-right: 1rem;
&.upload_file_item:last-child{
margin-right: 0rem;
}
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.8rem;
@@ -398,7 +561,12 @@ export default defineComponent({
height: 12rem;
img{
width: 100%;
cursor: pointer;
object-fit: contain;
&.active{
opacity: .5;
transform: scale(.9);
}
}
&.content_item_imgBox_itemImg:hover{
.content_item_imgBox_itemImg_delete{
@@ -435,6 +603,16 @@ export default defineComponent({
}
.productImg_left{
width: 25%;
.upload_file_item{
display: flex;
margin-right: 1rem;
width: auto;
border: none;
margin-bottom: 0;
&.upload_file_item:last-child{
margin-right: 0rem;
}
}
// width: 45%;
.productImg_content_item_imgBox{
.content_item_imgBox_itemImg{
@@ -442,6 +620,9 @@ export default defineComponent({
flex-shrink: 0;
}
}
.productImg_content_item_generate{
--width:60%;
}
}
.productImg_right{
width: 75%;
@@ -465,7 +646,7 @@ export default defineComponent({
height: 100%;
}
.productImg_right_item_like{
.productImg_right_item_like,.productImg_right_item_scale{
display: none;
position: absolute;
top: 1rem;
@@ -475,9 +656,12 @@ export default defineComponent({
color: red;
}
}
.productImg_right_item_scale{
top: 4rem;
}
}
.productImg_right_item:hover{
.productImg_right_item_like{
.productImg_right_item_like,.productImg_right_item_scale{
display: block;
}
}

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

@@ -21,7 +21,7 @@
</div>
<div class="scaleImage_content">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
<div class="img_operate_block">
<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>
@@ -76,7 +76,7 @@ export default defineComponent({
])
let scaleImageMask:any = ref(false)
let scaleImageIndex:any = ref(0)
let isLike:any = ref(true)
let robotAssits:any = ref(0)
return {
scaleImage,
@@ -86,7 +86,7 @@ export default defineComponent({
scaleImageList,
scaleImageMask,
scaleImageIndex,
isLike,
robotAssits,
};
},

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

@@ -8,6 +8,7 @@
>
{{ item.categoryValue }}
<div
v-show="!isSpread"
:class="[
'icon',
'iconfont',
@@ -22,6 +23,7 @@
class="category_list"
:class="driverClass.class2"
v-show="item.categoryShow"
v-if="!isSpread"
>
<div
:class="[
@@ -49,14 +51,16 @@
</template>
<script lang="ts">
import { defineComponent,ref ,nextTick} from "vue";
import { defineComponent,ref ,nextTick, computed,watch} from "vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
name:'filterComponent',
emits:['upTypeSucced'],
props:{
disignTypeList:{
type:Object
type:Object,
default:{}
},
item:{
type:Object
@@ -68,6 +72,10 @@ export default defineComponent({
type:Boolean,
default:false,
},
isSpread:{
type:Boolean,
default:false,
},
driver__:{
type:Boolean,
default:false,
@@ -77,8 +85,10 @@ export default defineComponent({
default:{class1:'',class2:''},
}
},
setup(props:any){
setup(props:any,{emit}){
let data = ''
let showFileCategory = (file:any)=> {
if(props.isSpread)return
file.categoryShow = true;
nextTick().then(()=>{
if(props.driver__){
@@ -110,12 +120,14 @@ export default defineComponent({
}
let setSketchLibrary = (item:any)=>{
let data = {
libraryId:[item.id],
level2Type:item.category,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});

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

@@ -250,8 +250,6 @@ export default defineComponent({
setTimeout(()=>{
nextTick().then(()=>{
let image:any = new Image()
image.src = this.option.img
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]

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

@@ -11,7 +11,7 @@
<!-- 图片 -->
<div class="falls_item_img">
<img
v-lazy="item.designPythonOutfitUrl"
v-lazy="item.canvasUrl"
@click="setItemDetail(item)"
:style="{
height: item.style.imgHeihgt + 'px',
@@ -26,30 +26,31 @@
</div>
<div class="falls_item_content">
<div class="falls_item_user">
<img src="http://121.40.53.210:3000/falls/5.png" alt="">
<!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
<div class="falls_item_user_detail">
<div>{{item.name}}</div>
<div>{{item.portfolioName}}</div>
<span>地区</span>
</div>
</div>
<div class="falls_item_detail">
<div>
<!-- <div>
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>321</span>
</div>
<div>
</div> -->
<label @click="portfolioLike(item)">
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
<i v-else class="fi fi-rr-social-network"></i>
<span>321</span>
</div>
<span>{{item.likeNum}}</span>
</label>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg>
<span>321</span>
</svg> -->
<i class="fi fi-sr-eye"></i>
<span>{{item.likeNum}}</span>
</div>
</div>
</div>
@@ -142,6 +143,17 @@ export default defineComponent({
},
// 挂载方法
methods: {
clearData(){
this.width = 300
this.num_x = 1
this.gap_x = 0
this.gap_y = 0
this.poss = []
this.loading = false
this.computedHeight = 0
this.list = []
this.resize()
},
push(arr) {
this.wait_list = this.wait_list.concat(arr);
if (!this.loading) {
@@ -156,7 +168,7 @@ export default defineComponent({
return;
}
let url = this.wait_list[0].designPythonOutfitUrl;
let url = this.wait_list[0].canvasUrl;
let data = this.wait_list[0]
let img = document.createElement("img");
img.src = url;
@@ -181,7 +193,7 @@ export default defineComponent({
let imgHeight = height - this.computedHeight
this.poss[idx] = top + height;
let obj = {
designPythonOutfitUrl:url,
canvasUrl:url,
style: { width, height, top, left, imgHeight },
...data
};
@@ -234,6 +246,9 @@ export default defineComponent({
},
setItemDetail(data){
this.$emit('getImgScale',data)
},
portfolioLike(data){
this.$emit('setPortfolioLike',data)
}
},
})
@@ -321,10 +336,21 @@ export default defineComponent({
display: flex;
width: 40%;
justify-content: space-between;
>div{
>label{
// cursor: pointer;
}
>label,>div{
display: flex;
align-items: center;
i{
font-size: 2rem;
}
svg,i{
width: 10px;
height: 10px;
color: #9e9ea7;
display: flex;
// width: 10px;
// height: 10px;
margin-right: .5rem;
}
span{
margin-left: 3px;

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

@@ -23,32 +23,37 @@
<div class="newScaleImage_left">
<div class="newScaleImage_content_right">
<div class="newScaleImage_content_right_img">
<img :src="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
<div>
<img :src="scaleImageList[scaleImageIndex]">
<!-- <img :src="scaleImageData?.canvasUrl"> -->
</div>
</div>
<div class="nav_centent" v-mousewheel="{allLength:scaleImageList.length}" :style="{'margin-top':scaleImageMarginTop}">
<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.designPythonOutfitUrl" :key="item.id">
<div class="nav_centent" v-mousewheel="{allLength:scaleImageData.length}" :style="{'margin-top':scaleImageMarginTop}">
<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :src="item" :key="item.id">
</div>
</div>
</div>
<div class="newScaleImage_right">
<div class="newScaleImage_right_content">
<div class="newScaleImage_right_content_type">
<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageList[scaleImageIndex]?.portfolioType=='History'? 'collection' : 'generate' }}</div>
<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageData?.portfolioType=='History'? 'collection' : 'generate' }}</div>
</div>
<div v-if="true" class="newScaleImage_right_content_collection">
<!-- <div class="scaleImage_chunk_item content_left_collection_detail">
<div class="scaleImage_chunk_title">设计模式:</div>
<div class="scaleImage_chunk_item content_left_collection_detail">
<!-- <div class="scaleImage_chunk_title">设计模式:</div>
<div class="scaleImage_chunk_title_intro">
Overall
</div>
</div> -->
</div> -->
<div class="scaleImage_chunk_title">{{scaleImageData.portfolioName}}</div>
<div class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioDes}}</div>
</div>
<div class="scaleImage_chunk_item content_left_collection_content">
<div class="scaleImage_chunk_title">Finished Products</div>
<div class="content_left_collection_content_list">
<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
</div>
</div>
<div class="started_btn" @click="setChoose">二创</div>
<div class="started_btn" @click="setChoose" :title="scaleImageData.openSource == 0?'发布者不允许二次创作~':''" :class="{active:scaleImageData.openSource == 0}">二创</div>
</div>
<div v-else class="newScaleImage_right_content_generate">
<div class="scaleImage_chunk_item content_left_generate_item">
@@ -74,7 +79,7 @@
<div class="scaleImage_chunk_item">
<div class="detail_right_user detail_left_right_item">
<div class="detail_right_user_head">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
</div>
<div class="detail_right_user_content">
<div class="scaleImage_chunk_title">名字</div>
@@ -83,41 +88,42 @@
</div>
</div>
<div class="detail_right_work_detail detail_left_right_item">
<div class="scaleImage_chunk_title">{{ scaleImageData.portfolioName }}</div>
<div class="scaleImage_chunk_title_intro">{{ scaleImageData.portfolioDes }}</div>
<!-- <div class="scaleImage_chunk_title">{{ scaleImageData?.portfolioName }}</div> -->
<!-- <div class="scaleImage_chunk_title_intro">{{ scaleImageData?.portfolioDes }}</div> -->
</div>
<div class="detail_right_date detail_left_right_item">
<div class="detail_right_date_setUp">
<div>创建时间</div>
<span>{{ scaleImageList[scaleImageIndex].createDate }}</span>
<span>{{ scaleImageData.createDate }}</span>
</div>
<div class="detail_right_date_upData">
<div>更新时间</div>
<span>{{ scaleImageList[scaleImageIndex].updateDate }}</span>
<span>{{ scaleImageData.updateDate }}</span>
</div>
</div>
<div class="detail_right_look_operation detail_left_right_item">
<div class="detail_left_right_item_click">
<!-- <div class="detail_left_right_item_click">
<svg :adminLike="!!true" xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>321</span>
</div>
<div class="detail_left_right_item_click">
<i v-if="true" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
</div> -->
<div class="detail_left_right_item_click" @click="setPortfolioLike">
<i v-if="scaleImageData?.isLike == 1" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
<i v-else class="fi fi-rr-social-network"></i>
<span>321</span>
<span>{{scaleImageData.likeNum}}</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg>
<span>321</span>
</svg> -->
<i class="fi fi-sr-eye"></i>
<span>{{scaleImageData.likeNum}}</span>
</div>
<div>
<i class="fi fi-rr-comment-alt-dots"></i>
<span>321</span>
<span>{{scaleImageData.likeNum}}</span>
</div>
</div>
<div class="detail_right_auther detail_left_right_item">
@@ -144,41 +150,50 @@
</div>
<div class="newScaleImage_right_comment scaleImage_chunk_item">
<div class="scaleImage_chunk_title">Comment</div>
<div v-if="false" class="newScaleImage_right_comment_null">
<div v-if="commentList.length === 0" class="newScaleImage_right_comment_null">
<div class="scaleImage_chunk_title">No Comments</div>
<div class="scaleImage_chunk_title">You can be the first!</div>
</div>
<div v-else class="newScaleImage_right_comment_content">
<div class="detail_left_content_item">
<div class="detail_left_content_item_img">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
</div>
<div class="detail_left_content_item" v-for="item in commentList" :key="item.id">
<!-- <div class="detail_left_content_item_img">
<img v-lazy="scaleImageData?.imgUrl">
</div> -->
<div class="detail_left_content_item_content">
<div class="scaleImage_chunk_title">名字</div>
<div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
<div class="scaleImage_chunk_title_intro">{{ item?.userName }}</div>
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ item.comment }}</div>
<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ item.createTimes }}</div>
<div class="detail_left_content_item_btn">
<div class="left_content_item_reply">回复</div>
<div class="left_content_item_thumbs">
<div class="left_content_item_reply" @click.stop="setCommentReply(item,'parent')">
<i class="fi fi-rr-comment-alt-dots"></i>
回复
</div>
<!-- <div class="left_content_item_thumbs">
<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
<span>123</span>
</div>
<div v-show="true" class="left_content_item_unfold">展开</div>
</div> -->
<div v-show="true" class="left_content_item_unfold" @click="()=>item.unfold = !item.unfold">展开</div>
</div>
<div class="detail_left_content_item_replyContent">
<div class="detail_left_content_item_replyContent" v-for="children in item.childCommentVOList" :key="children.id">
<div class="detail_left_content_item_img">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
</div>
<div class="detail_left_content_item_content">
<div class="scaleImage_chunk_title">名字</div>
<div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']"><span class="scaleImage_chunk_title">@名字</span>这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
<div class="scaleImage_chunk_title">{{ children?.userName }}<span v-if="children?.replyTo" class="replyIcon"></span>{{ children?.replyTo }}</div>
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ children.comment }}</div>
<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ children.createTimes }}</div>
<div class="detail_left_content_item_btn">
<div class="left_content_item_reply">回复</div>
<div class="left_content_item_thumbs">
<div class="left_content_item_reply" @click.stop="setCommentReply(children,'son')">
<i class="fi fi-rr-comment-alt-dots"></i>
回复
</div>
<!-- <div class="left_content_item_thumbs">
<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
<span>123</span>
</div>
</div> -->
<div v-show="false" class="left_content_item_unfold">展开</div>
</div>
</div>
@@ -186,9 +201,9 @@
</div>
</div>
</div>
<div class="newScaleImage_right_comment_setComment">
<input type="text" placeholder="回复Wxd的评论">
<div class="detail_left_setComment_btn">
<div class="newScaleImage_right_comment_setComment" @click.stop="">
<input type="text" ref="commentInputFocus" v-model="commentText" :placeholder="commentInput">
<div class="detail_left_setComment_btn" @click="setComment">
<i class="fi fi-ss-paper-plane-top"></i>
</div>
</div>
@@ -200,12 +215,12 @@
</template>
<script lang="ts">
import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, onMounted} from "vue";
import { Https } from "@/tool/https";
// import { getCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { useRouter } from 'vue-router'
import { downloadIamge } from "@/tool/util";
import { downloadIamge,setPubDate } from "@/tool/util";
export default defineComponent({
setup() {
@@ -217,10 +232,24 @@ export default defineComponent({
generateValue:'123123',
loadingShow:false,
scaleImageMarginTop:0,
commentReply:{
leve1Id:null,
leve2Id:null,
name:'',
},
scaleImageList:[],
scaleImageIndex:0,//当前图片索引
scaleImageData:{},//当前图片内容
getCommentData:{
portfolioId:0,
page:1,
size:10
},
commentText:'',
commentInput:'',//评论框提示词
commentList:[],
})
let commentInputFocus:any = ref()
let textarea: any = ref(null)
let setCopy = ()=>{
textarea.value.select()
@@ -228,18 +257,17 @@ export default defineComponent({
}
let init = (item:any)=>{
scaleImage.value = true
// imgData.scaleImageList = list
// imgData.scaleImageIndex = index
// let data = list[index]
getDetail(item.id)
getDetail(item,'')
document.addEventListener('click',removeCommentReply)
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
}
let cancelDsign = ()=>{
scaleImage.value = false
imgData.scaleImageIndex = 0
imgData.scaleImageData = {}
imgData.commentText = ''
document.removeEventListener('click',removeCommentReply)
}
let download = ()=>{
downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
@@ -257,25 +285,109 @@ export default defineComponent({
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
let getDetail = (value:any)=>{
let getDeatilData = {}
let getDetail = (value:any,str:string)=>{
imgData.loadingShow = true
let data = value
// Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
// (rv: any) => {
// imgData.scaleImageData = rv
// console.log(imgData.scaleImageData);
// }
// ).catch((res)=>{
// }
// )
getDeatilData = value
Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
(rv: any) => {
imgData.loadingShow = false
imgData.scaleImageData = rv
let canvasUrl = [rv.canvasUrl]
var findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
imgData.scaleImageList = canvasUrl.concat(findUrl);
imgData.scaleImageIndex = 0
imgData.getCommentData.portfolioId = rv.id
if(str == 'zan'){
}else{
getCommentPage()
}
}).catch((res)=>{
imgData.loadingShow = false
}
)
}
let setChoose = () =>{
router.push({name:'homePage',params: {id:imgData.scaleImageList[imgData.scaleImageIndex].userLikeGroupSourceId,type:'Works'}})
if(imgData.scaleImageData.openSource == 0)return
router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
}
let setCommentReply = (value:any,str:any)=>{
imgData.commentReply.leve1Id = value.id
imgData.commentReply.leve2Id = null
if(str == 'son'){
imgData.commentReply.leve1Id = value.parentLevel1Id
imgData.commentReply.leve2Id = value.id
}
imgData.commentReply.name = value.userName
imgData.commentInput = `回复${imgData.commentReply.name}的评论`
commentInputFocus.value.focus()
}
let removeCommentReply = ()=>{
imgData.commentReply.leve1Id = null
imgData.commentReply.leve2Id = null
imgData.commentReply.name = ''
imgData.commentInput = '请输入评论内容'
}
let setComment = ()=>{
let data = {
"accountId": 0,
"comment": imgData.commentText,
"createTime": "",
"id": '',
"isDeleted": 0,
"parentLevel1Id": imgData.commentReply.leve1Id,
"parentLevel2Id": imgData.commentReply.leve2Id,
"portfolioId": imgData.scaleImageData.id,
}
Https.axiosPost(Https.httpUrls.portfolioComment, data)
.then((rv) => {
imgData.commentText = ''
getCommentPage()
})
.catch((rv) => {
});
}
let getCommentPage = ()=>{
let data = imgData.getCommentData
Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
(rv: any) => {
imgData.commentList = rv.content
imgData.commentList.forEach((item:any)=>{
item.createTimes = setPubDate(item.createTime)
if (item.childCommentVOList) {
item.childCommentVOList.forEach((obj:any)=>{
obj.createTimes = setPubDate(obj.createTime)
})
}
})
}
).catch((res)=>{
}
)
}
let setPortfolioLike = ()=>{
let data = {id:imgData.scaleImageData.id}
let url
if(imgData.scaleImageData.isLike == 1){
url = Https.httpUrls.portfolioNoLike
}else{
url = Https.httpUrls.portfolioLike
}
Https.axiosGet(url, {params:data})
.then((rv) => {
getDetail(getDeatilData,'zan')
})
.catch((rv) => {
});
}
watch(()=>imgData.scaleImageIndex,
(newVal,oldVal)=>{
let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
if(!dom) return
getDetail(imgData.scaleImageList[newVal])
let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
}
@@ -284,6 +396,7 @@ export default defineComponent({
scaleImage,
scaleImageMask,
...toRefs(imgData),
commentInputFocus,
textarea,
setCopy,
init,
@@ -292,6 +405,9 @@ export default defineComponent({
setScaleImageIndex,
LikeFile,
setChoose,
setCommentReply,
setComment,
setPortfolioLike,
};
},
directives:{
@@ -329,6 +445,7 @@ export default defineComponent({
}
},
},
data() {
return {
@@ -339,26 +456,6 @@ export default defineComponent({
mounted() {
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.scaleImage = false
// // this.scaleImageList = []
// // this.scaleImageIndex = 0
// },
// download(){
// // downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.scaleImageIndex = index
// // console.log(this.scaleImageIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
},
});
</script>
@@ -427,39 +524,54 @@ export default defineComponent({
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
height: var(--content-height);
// height: var(--content-height);
height: 100%;
position: relative;
overflow: hidden;
overflow-y: auto;
.newScaleImage_content_right_img{
height: 100%;
width: auto;
width: 60%;
overflow-x: auto;
width: 70%;
margin-left: auto;
// width: 100%;
display: flex;
justify-content: center;
img{
width: auto;
max-width: 100%;
height: 100%;
object-fit: contain;
margin-right: 2rem;
}
img:last-child{
margin-right: 0;
// justify-content: center;
justify-content: right;
overflow-y: auto;
&.newScaleImage_content_right_img::-webkit-scrollbar{display: none;}
>div{
width: 100%;
height: auto;
img{
// width: auto;
max-width: 100%;
height: 100%;
// height: 100%;
object-fit: contain;
width: 100%;
margin-right: 2rem;
}
img:last-child{
margin-right: 0;
}
}
}
--count: 50;
--snap-size: 10rem;
--offset: 2;
.nav_centent{
width: auto;
// width: auto;
display: flex;
flex-direction: column;
position: absolute;
right: 0;
padding-top: calc(var(--content-height) / 2);
padding-left: 10rem;
// padding-left: 10rem;
transition: all .2s;
left: 0;
width: 30%;
}
.nav_centent_img{
max-width: calc(var(--snap-size) - 2rem);
@@ -481,17 +593,17 @@ export default defineComponent({
transition: all .1s;
&.active1{
// border: 4px solid rgb(148, 230, 255);
transform: scale(1.4) translateX(-30%);
transform: scale(1.4) translateX(30%);
z-index: 2;
}
&.active2{
// border: 4px solid rgb(216, 255, 172);
transform: scale(1.6) translateX(-60%);
transform: scale(1.6) translateX(60%);
z-index: 3;
}
&.active3{
// border: 4px solid rgb(148, 233, 183);
transform: scale(1.4) translateX(-30%);
transform: scale(1.4) translateX(30%);
z-index: 2;
}
}
@@ -527,12 +639,16 @@ export default defineComponent({
// }
.started_btn{
margin-bottom: var(--margin);
&.active{
cursor: no-drop;
}
}
.content_left_collection_detail{
height: calc(8rem + var(--padding) * 2);
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
justify-content: center;
.scaleImage_chunk_title{
margin-right: 1rem;
}
@@ -611,6 +727,9 @@ export default defineComponent({
}
.detail_left_right_item_click{
cursor: pointer;
i{
color: #9e9ea7;
}
}
.detail_left_right_item:last-child{
margin-bottom: 0;
@@ -654,6 +773,16 @@ export default defineComponent({
flex: 1;
margin-left: 1rem;
width: calc(100% - 6rem - 1rem);
.replyIcon{
width: 0;
height: 0;
vertical-align: middle;
border: .5rem solid transparent;
border-left: 1rem solid #000;
border-right: none;
display: inline-block;
margin: 0 1rem;
}
>div{
margin-top: .4rem;
>span{
@@ -666,6 +795,7 @@ export default defineComponent({
.detail_left_content_item_btn{
display: flex;
align-items: center;
margin-top: 1rem;
.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold{
cursor: pointer;
}
@@ -711,6 +841,7 @@ export default defineComponent({
border: .2rem solid var(--border-color);
}
.detail_left_setComment_btn{
cursor: pointer;
width: 4rem;
height: 4rem;
background: rgba(57, 33, 91);

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

@@ -29,35 +29,51 @@
<img v-lazy="selectDate.url" alt="">
</div>
</div>
<div class="publidh_left_thubnai publidh_content_item">
<div class="publidh_content_item_title">Select Cover Picture</div>
<div class="publidh_left_thubnail_list publish_content_item">
<img v-for="item in getPublishDate.groupDetails" :class="{selectActive:item.designOutfitId === subPublishDate.coverId}" v-lazy="item.url" @click="setCover(item)" alt="">
</div>
</div>
</div>
<div class="publidh_right">
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">Name</div>
<div class="publidh_content_item_title">Collection Title</div>
<input type="text" v-model="subPublishDate.portfolioName">
</div>
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">Description</div>
<textarea ref="textarea" v-model="subPublishDate.portfolioDes"></textarea>
</div>
<div class="publidh_right_detail publidh_content_item">
<div class="publidh_content_item_title">Permissions</div>
<!-- <div>
<a-checkbox @change="setPermissions" v-model:checked="setPermissionsAll">All.</a-checkbox>
</div> -->
<!-- <div>
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isAllowLikes">Whether to allow likes.</a-checkbox>
</div> -->
<!-- <div>
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isAllowComment">Allow comments or not.</a-checkbox>
</div>
<div>
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isDisplayArea">Show locale or not.</a-checkbox>
</div> -->
<div>
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isSecondaryCreation">Whether to allow other users to perform secondary creation.</a-checkbox>
</div>
</div>
<!-- <div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">Thumbnail preview</div>
<input type="text">
</div> -->
<div class="publidh_content_item publidh_right_zhuyi">
<div class="publidh_content_item_intro">
<span class="icon iconfont icon-zhuyi"></span>This will publish your work to the square for all users to see.
</div>
<!-- <div class="publidh_content_item_intro">
<label >
<span class="icon iconfont icon-zhuyi"></span>
<div>
This will publish your work to the square for all users to see.
</div>
</label>
</div> -->
</div>
<div class="publidh_right_btn">
<div class="started_btn" @click="setClose">Close</div>
<div class="started_btn">Save as draft</div>
<div class="started_btn" @click="setPublish">Publish</div>
<div class="started_btn" @click="cancelDsign">Close</div>
<div class="started_btn" @click="setPublish">{{beenPublished == 0?'Publish':'Updata Publish'}}</div>
</div>
</div>
</div>
@@ -76,26 +92,31 @@ import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { downloadIamge } from "@/tool/util";
import { downloadIamge,base64ToFile } from "@/tool/util";
export default defineComponent({
setup() {
let publish: any = ref(false);//弹窗
let publishMask:any = ref(false)//弹窗遮罩
let publishData:any = reactive({
publishName:'123123',
publishName:'',
loadingShow:false,
publishMarginTop:0,
beenPublished:0,//history回来时候表示是否已经发布0为没发布
publishList:[],
publishIndex:0,//当前图片索引
isShowMark:false,
setPermissionsAll:true,
selectDate:{
url:'',
},
getPublishDate:{
},
subPublishDate:{
},
selectPermissions:{
isAllowComment:true,
isDisplayArea:true,
isSecondaryCreation:true,
}
})
// let textarea: any = ref(null)
// let setCopy = ()=>{
@@ -103,56 +124,51 @@ export default defineComponent({
// document.execCommand("copy");
// }
let init = (data:any)=>{
publishData.beenPublished = data.beenPublished
let userInfo:any = getCookie("userInfo")
console.log(data);
publishData.getPublishDate = data
// console.log(data);
publish.value = true
publishData.selectDate.url = data.groupDetails[0].url
publishData.selectDate.url = data.imgUrl
publishData.subPublishDate = {
userLikeGroupId : data.id,
coverId : data.groupDetails[0].designOutfitId,
userLikeGroupId : data.userlikeGroupId,
// userLikeGroupId : data.id,
coverId : '',
// coverId : data.groupDetails[0].designOutfitId,
accountId : JSON.parse(userInfo).userId,
createDate:'',
idDeleted:'',
id:'',
portfolioDes:'',
portfolioName:data.name,
portfolioName:'',
portfolioType:'History',
status:'',
updateDate:'',
collectionId:'',
// isAllowLikes:true,
}
// publishData.publishList = list
// publishData.publishIndex = index
// let publishList = this.store.state.UploadFilesModule.moodboard
}
// let download = ()=>{
// downloadIamge(publishData.publishList[publishData.publishIndex].imgUrl)
// }
// let setScaleImageIndex = (index:any)=>{
// publishData.publishIndex = index
// }
// let LikeFile = (item:any,str:string)=>{
// const currentInstance = getCurrentInstance();
// let parent:any = currentInstance?.parent
// console.log(parent);
// parent.likeFile(item,str)
// }
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
let setCover = (item:any)=>{
publishData.subPublishDate.coverId = item.designOutfitId
publishData.selectDate.url = item.url
}
let setPermissionsItem = ()=>{
// publishData.selectPermissions.isAllowLikes &&
if(publishData.selectPermissions.isAllowComment && publishData.selectPermissions.isDisplayArea && publishData.selectPermissions.isSecondaryCreation){
publishData.setPermissionsAll = true
}else{
publishData.setPermissionsAll = false
}
}
let setPermissions = ()=>{
// publishData.selectPermissions.isAllowLikes = publishData.setPermissionsAll;
publishData.selectPermissions.isAllowComment = publishData.setPermissionsAll
publishData.selectPermissions.isDisplayArea = publishData.setPermissionsAll
publishData.selectPermissions.isSecondaryCreation = publishData.setPermissionsAll
}
let cleardata = ()=>{
publish.value = false
publishData.isShowMark = false
publishData.getPublishDate = {}
publishData.subPublishDate = {}
}
let cancelDsign = ()=>{
@@ -169,7 +185,12 @@ export default defineComponent({
});
}
let setPublish= ()=>{
let _this = this
if(!publishData.subPublishDate.portfolioName){
return message.info('Please enter the name of your work')
}
// if(!publishData.subPublishDate.portfolioDes){
// return message.info('Please enter a description')
// }
Modal.confirm({
title: 'This will publish your work to the square for all users to see. Please confirm whether to publish?',
icon: createVNode(ExclamationCircleOutlined),
@@ -183,13 +204,24 @@ export default defineComponent({
});
}
let subPublish = ()=>{
let data = publishData.subPublishDate
let param = new FormData();
// let fill = dataURLtoFile(publishData.selectDate.url,'collection')
// let aa = new File([fill], 'collection' + ".jpg");
let file = base64ToFile(publishData.selectDate.url,'collection')
param.append('file',file)
publishData.subPublishDate.openSource = publishData.selectPermissions.isSecondaryCreation?1:0
param.append('data',JSON.stringify(publishData.subPublishDate))
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
// let data = publishData.subPublishDate
publishData.isShowMark = true
Https.axiosPost(Https.httpUrls.publish, data)
Https.axiosPost(Https.httpUrls.publish, param,config)
.then((rv) => {
console.log(rv);
cleardata()
publishData.isShowMark = false
message.success('Release success! You can find it in my work')
})
.catch((rv) => {
publishData.isShowMark = false
@@ -204,6 +236,8 @@ export default defineComponent({
// textarea,
// setCopy,
init,
setPermissionsItem,
setPermissions,
// download,
// setScaleImageIndex,
// LikeFile,
@@ -221,26 +255,6 @@ export default defineComponent({
mounted() {
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.publish = false
// // this.publishList = []
// // this.publishIndex = 0
// },
// download(){
// // downloadIamge(this.publishList[this.publishIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.publishIndex = index
// // console.log(this.publishIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
},
});
</script>
@@ -262,6 +276,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
flex: 1;
height: calc(100% - 10rem);
.publidh_left,.publidh_right{
display: flex;
flex-direction: column;
@@ -306,14 +321,18 @@ export default defineComponent({
}
.publidh_left{
width: 45%;
.publidh_content_item{
height: 100%;
}
.publish_content_shrink{
width: 100%;
height: calc(100% - 4rem);
img{
width: 100%;
height: 100%;
object-fit: contain;
max-height: 30rem;
// object-fit: cover;
// max-height: 30rem;
max-height: 100%;
}
}
.publidh_left_thubnai{
@@ -349,6 +368,13 @@ export default defineComponent({
margin-right: 1rem;
}
}
.publidh_right_detail{
display: flex;
flex-direction: column;
label{
display: flex;
}
}
}
}

26
src/lang/cn.ts
View File

@@ -55,13 +55,13 @@ export default {
Layer:'层级',
More:'更多',
insufficient:'您的积分余额不足，如需使用此功能，请点击左上角充值',
HDExport:'高清导出',
HDExport:'转高清',
Export:'导出',
SR:'请选择需要超分的图片',
requiresCredits:'执行超分的图片需要消耗{data}积分',
Scale:'倍率',
Cancel:'取消',
jsContent1:'画布内容没有保存是否离开页面',
jsContent1:'您是否已经保存画布内容，如果没有保存请点击保存后再关闭。',
jsContent2:'我们只支持对印花进行超分',
jsContent3:'您的积分小于一次超分',
jsContent4:'您的积分余额不足',
@@ -171,7 +171,7 @@ export default {
jsContent1:'你确定要删除选中图片吗？',
jsContent2:'你确定要删除选中图片吗？',
jsContent3:'您只能上传图片文件！',
jsContent4:'图片必须小于2MB',
jsContent4:'图片必须小于5MB',
jsContent5:'图片已经上传是否继续上传',
jsContent6:'输入的内容超过允许输入的最大长度',
jsContent7:'请输入内容~',
@@ -196,7 +196,7 @@ export default {
jsContent1:'删除成功',
jsContent2:'您确定要删除这个收藏吗？',
jsContent3:'修改成功',
jsContent4:'图片必须小于2MB',
jsContent4:'图片必须小于5MB',
jsContent5:'图片已经上传是否继续上传',
jsContent6:'输入的内容超过允许输入的最大长度',
jsContent7:'请输入内容~',
@@ -237,9 +237,9 @@ export default {
},
Upload:{
Delete:'删除',
Maximum2M:'您最多可以上传10张照片，每张照片不能超过2MB',
Maximum2M:'您最多可以上传10张照片，每张照片不能超过5MB',
jsContent1:'您只能上传图片文件！',
jsContent2:'图片必须小于2MB',
jsContent2:'图片必须小于5MB',
jsContent3:'上传失败',
},
SketchboardUpload:{
@@ -255,7 +255,7 @@ export default {
maximumLength:'输入的内容超过允许输入的最大长度',
jsContent1:"上传失败",
jsContent2:"您只能上传图片文件！",
jsContent3:'图片必须小于2MB',
jsContent3:'图片必须小于5MB',
jsContent4:"超过允许上传的最大图片数量",
jsContent5:"请选择一张图片",
jsContent6:"输入的内容超过允许输入的最大长度",
@@ -273,7 +273,7 @@ export default {
inputContent1:'生成图片的标题',
maximumLength:'输入的内容超过允许输入的最大长度',
jsContent1:"您只能上传图片文件！",
jsContent2:'图片必须小于2MB',
jsContent2:'图片必须小于5MB',
jsContent3:"超过允许上传的最大图片数量",
jsContent4:"请选择一张图片",
jsContent5:"输入的内容超过允许输入的最大长度",
@@ -291,7 +291,7 @@ export default {
jsContent1:"您的浏览器不支持",
jsContent2:"找不到这个TCX的颜色",
jsContent3:"您只能上传图片文件！",
jsContent4:'图片必须小于2MB',
jsContent4:'图片必须小于5MB',
jsContent5:"请输入正确的TCX值",
},
MoodboardUpload:{
@@ -307,7 +307,7 @@ export default {
jsContent1:'您最多可以选择8张图片',
jsContent2:"上传失败",
jsContent3:"您只能上传图片文件！",
jsContent4:'图片必须小于2MB',
jsContent4:'图片必须小于5MB',
jsContent5:'请点击布局进行随机排序',
},
Cropper:{
@@ -323,10 +323,10 @@ export default {
MarketingSketchUpload:{
Upload:'上传',
MyLibrary:'我的收藏',
maximumLength:'最多可以上传15张照片，每张照片不能超过2MB',
maximumLength:'最多可以上传15张照片，每张照片不能超过5MB',
jsContent1:'上传失败',
jsContent2:"您只能上传图片文件！",
jsContent3:'图片必须小于2MB',
jsContent3:'图片必须小于5MB',
jsContent5:'超过允许上传的最大图片数量',
},
layout:{
@@ -351,7 +351,7 @@ export default {
effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
Model:'模型',
jsContent1:"您只能上传图片文件！",
jsContent2:'图片必须小于2MB',
jsContent2:'图片必须小于5MB',
jsContent3:"请输入内容~",
jsContent4:'输入的内容超过允许输入的最大长度',
jsContent5:"请输入内容~",

20
src/lang/en.ts
View File

@@ -62,7 +62,7 @@ export default {
requiresCredits:'Performing upscale image requires a {data} credits',
Scale:'Scale',
Cancel:'Cancel',
jsContent1:'Canvas edit content is not saved, whether to leave the page',
jsContent1:'Have you saved the canvas content? If not, please click "Save" first before closing.',
jsContent2:'We only provide super-resolution capabilities for printboard images.',
jsContent3:'Your points are less than one SR',
jsContent4:'Your points balance is insufficient',
@@ -172,7 +172,7 @@ export default {
jsContent1:'Are you sure to delete this picture?',
jsContent2:'Are you sure to delete this picture?',
jsContent3:'You can only upload Image file!',
jsContent4:'Image must smaller than 2MB!',
jsContent4:'Image must smaller than 5MB!',
jsContent5:'This picture has been uploaded whether to continue uploading？',
jsContent6:'The entered content exceeds the maximum length.',
jsContent7:'Please enter content',
@@ -197,7 +197,7 @@ export default {
jsContent1:'Deleted successfully',
jsContent2:'Do you really want to delete this collection? ',
jsContent3:'Change successfully',
jsContent4:'Image must smaller than 2MB!',
jsContent4:'Image must smaller than 5MB!',
jsContent5:'This picture has been uploaded whether to continue uploading？',
jsContent6:'The entered content exceeds the maximum length.',
jsContent7:'Please enter content',
@@ -240,7 +240,7 @@ export default {
Delete:'Delete',
Maximum2M:'Maximum 8 images can be uploaded, Maximum 2M per image',
jsContent1:'You can only upload Image file!',
jsContent2:'Image must smaller than 2MB!',
jsContent2:'Image must smaller than 5MB!',
jsContent3:'upload failed',
},
SketchboardUpload:{
@@ -256,7 +256,7 @@ export default {
maximumLength:'The entered content exceeds the maximum length.',
jsContent1:"upload failed",
jsContent2:"You can only upload Image file!",
jsContent3:'Image must smaller than 2MB!',
jsContent3:'Image must smaller than 5MB!',
jsContent4:"Maximum number of allowable file uploads has been exceeded",
jsContent5:"Please select a picture",
jsContent6:"The entered content exceeds the maximum length.",
@@ -274,7 +274,7 @@ export default {
inputContent1:'Input prompt',
maximumLength:'The entered content exceeds the maximum length.',
jsContent1:"You can only upload Image file!",
jsContent2:'Image must smaller than 2MB!',
jsContent2:'Image must smaller than 5MB!',
jsContent3:"Maximum number of allowable file uploads has been exceeded",
jsContent4:"Please select a picture",
jsContent5:"The entered content exceeds the maximum length.",
@@ -292,7 +292,7 @@ export default {
jsContent1:"Your browser does not support it",
jsContent2:"Can't find the TCX color",
jsContent3:"You can only upload Image file!",
jsContent4:'Image must smaller than 2MB!',
jsContent4:'Image must smaller than 5MB!',
jsContent5:"Please enter the correct TCX value",
},
MoodboardUpload:{
@@ -308,7 +308,7 @@ export default {
jsContent1:'You can select up to 8 images',
jsContent2:"upload failed",
jsContent3:"You can only upload Image file!",
jsContent4:'Image must smaller than 2MB!',
jsContent4:'Image must smaller than 5MB!',
jsContent5:'Please click Layout to sort randomly',
},
Cropper:{
@@ -327,7 +327,7 @@ export default {
maximumLength:'Maximum 15 images can be uploaded, Maximum 2M per image',
jsContent1:'upload failed',
jsContent2:"You can only upload Image file!",
jsContent3:'Image must smaller than 2MB!',
jsContent3:'Image must smaller than 5MB!',
jsContent5:'Maximum number of allowable file uploads has been exceeded',
},
layout:{
@@ -352,7 +352,7 @@ export default {
effectPoor:'The quality of the generated images currently falls below standard. Please consider adjusting your prompt and trying again.',
Model:'Model',
jsContent1:"You can only upload Image file!",
jsContent2:'Image must smaller than 2MB!',
jsContent2:'Image must smaller than 5MB!',
jsContent3:"Please enter content",
jsContent4:'The entered content exceeds the maximum length.',
jsContent5:"Please enter content",

34
src/router/index.ts
View File

@@ -1,6 +1,8 @@
import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router'
import { defineAsyncComponent } from 'vue'
import { getBrowserInfo, murmur } from '@/tool/util'
import { useStore } from "vuex";
import store from "@/store"
import { getCookie, setCookie } from "@/tool/cookie";
const _import = (path: string) => defineAsyncComponent(() => import(`../views/${path}.vue`));
const _import_component = (path : string) => defineAsyncComponent(() => import(`../component/${path}`));
@@ -22,6 +24,11 @@ const routes: Array<RouteRecordRaw> = [
name: 'login',
component: _import('LoginPage')
},
{
path: '/register',
name: 'register',
component: _import('RegisterPage')
},
{
path: '/upgrade',
name: 'upgrade',
@@ -137,6 +144,20 @@ const router = createRouter({
// history: createWebHashHistory(),
routes
})
// 刷新保存数据-
let state:any = store.state
window.addEventListener("beforeunload", (e) => {
sessionStorage.setItem(
"vuex_setSystemUser",
JSON.stringify(state.UserHabit.systemUser.value)
);
});
var vuex_setSystemUser:any = sessionStorage.getItem("vuex_setSystemUser");
if (vuex_setSystemUser == 0 || vuex_setSystemUser == 1) {
store.commit("setSystemUser", JSON.parse(vuex_setSystemUser));
sessionStorage.removeItem("vuex_setSystemUser");
}
router.beforeEach((to, from, next) => {
// 系统维护
@@ -156,6 +177,9 @@ router.beforeEach((to, from, next) => {
let isMurmur = JSON.parse(getIsMurmur)
let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
let userIdList = [88,6,46,31,73,83,87]
let isSystemUserRouteList = ['/login','/']//指定页面需要指定id才能进入
let systemUser = state.UserHabit.systemUser
const routeExists = router.getRoutes().some(({ name }) =>{
if(name){
return name === to.name
@@ -163,6 +187,16 @@ router.beforeEach((to, from, next) => {
return false
}
});
console.log(systemUser);
if(systemUser.value == 0){
if(isSystemUserRouteList.indexOf(to.path) > -1){
next();
}else{
next('/');
}
return
}
if (routeExists) {
if (isMurmur && murmurStr && token) {
const toName = to.name === 'login';

2
src/store/uploadFile/uploadFile.ts
View File

@@ -182,6 +182,8 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
},
setPrintboardMaterialFiles(state,files){
state.printMaterialFiles = files
console.log(files);
state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]
},

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

@@ -13,6 +13,7 @@ interface UserHabit{
FemalePosition:any,
MalePosition:any,
Position:any,
systemUser:any,
}
const userHabit : Module<UserHabit,RootState> = {
@@ -35,6 +36,10 @@ const userHabit : Module<UserHabit,RootState> = {
FemalePosition:[],
MalePosition:[],
Position:[],
systemUser:{
value : 0
},
},
mutations:{
res_clothingType(state,data){
@@ -62,6 +67,9 @@ const userHabit : Module<UserHabit,RootState> = {
state.Position = state.MalePosition
}
},
setSystemUser(state,data){
state.systemUser.value = data
},
},
actions:{

2
src/tool/GO.ts
View File

@@ -42,7 +42,7 @@ export default {
}
ratio.push(rgb)
// console.log(ratio);
img.remove()
// console.log((num/ (width * height) * 100).toFixed(2));
}

30
src/tool/canvasDrawing.js
View File

@@ -263,10 +263,37 @@ async function JSSetTexture(src,){
img.width = 200
img.height = 200
resolve()
img.remove()
}
})
return img
}
function JSSetRemoveImage(fun){
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
// 创建删除图片元素
let deleteImg = document.createElement('img')
deleteImg.src = deleteIcon
function renderIcon(icon) {
return function (ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
ctx.restore();
}
}
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: -16,
offsetX: 16,
cursorStyle: 'pointer',
mouseUpHandler:fun,
render: renderIcon(deleteImg),
cornerSize: 24
})
}
export {
multiselectJS,
JSRectUpdata,
@@ -275,5 +302,6 @@ export {
JScanvasMouseMove,
JScreateCheck,
exportSele,
JSSetTexture
JSSetTexture,
JSSetRemoveImage
}

1
src/tool/color.js
View File

@@ -30,6 +30,7 @@ let setColor = (rgba,url) =>{
resolve({
width,height,num
})
img.remove()
}
})
};

2
src/tool/domTurnImg.js
View File

@@ -38,6 +38,8 @@ const getJpeg = dom =>{
// console.log(smallBase64);
// resolve(base64ToFile(fileOfBlob))
resolve(fileOfBlob)
newImage.remove()
}
})
}, 100);

71
src/tool/https.js
View File

@@ -33,6 +33,8 @@ let httpIp = process.env.NODE_ENV == 'development' ? "" : "";
// console.log(axios.defaults.baseURL);
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
// 创建取消令牌
let cancelList = []
// console.log(process.env.VUE_APP_BASE_URL);
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
@@ -41,7 +43,9 @@ axios.interceptors.request.use((config) => {
// config.data = qs.stringify(config.data);
// config.data = JSON.stringify(config.data);
}
// config['cancelToken'] = axios.CancelToken(function(c){
// cancel.push(c)
// })
// config.headers.Authorization = 'Bearer-eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIyIiwic3ViIjoie1wiaWRcIjoyLFwidXNlcm5hbWVcIjpcImxpcnNcIn0iLCJpYXQiOjE2NjU3NDEwODcsImlzcyI6IkRXSiIsImF1dGhvcml0aWVzIjoiW10iLCJleHAiOjE2NzQzODEwODd9.ShM9R_NNFD7oo1OvxrEgg7PFeWinOuAKkuInUCMQupp66s64Hhv8tN0Wwr83nIN4rHPqtn95wmd4msWcvaFYJA';
config.headers.Authorization = getCookie('token');
@@ -49,7 +53,7 @@ axios.interceptors.request.use((config) => {
},(error) =>{
return Promise.reject(error);
});
let isLoginTime = false
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
// if(res.data.data == null){
@@ -84,18 +88,39 @@ axios.interceptors.response.use((res) =>{
return Promise.reject(res.data);
}
}
removeCancelToken(res.config.cancelToken);
}, function(error) {
if(error?.response?.status === 401 && router.currentRoute._value.name != 'setIdentification'){//如果是记录浏览器页面就不跳转login
router.replace('/login')
clonAllCookie()
if(!isLoginTime){
isLoginTime = true
router.replace('/')
message.warning('请登陆后重试~')
cancelAllRequests()
clonAllCookie()
setTimeout(()=>[
isLoginTime = false
],2000)
}
return Promise.reject()
}
let data_new = error?.response?.data
// message.error(data_new?.errMsg || 'Error: server exception')
return Promise.reject(data_new);
});
function removeCancelToken(cancelTokenToRemove) {
const index = cancelList.findIndex(source => source.token === cancelTokenToRemove);
if (index !== -1) {
cancelList.splice(index, 1);
}
}
function cancelAllRequests() {
// cancelList.forEach(source => {
// console.log(123123,source);
// source('123');
// });
}
export const Https = {
httpUrls: {
interfaceUrl: '',
@@ -120,6 +145,9 @@ export const Https = {
endpoint:`api/third/party/your-secured-endpoint`, //获取唯一标识是否存在
designWorksRegister:'/api/account/designWorksRegister', //注册
designWorksRegisterCode:'/api/account/designWorksRegisterCode', //注册
preLogin:'/api/account/preLogin',//预先登入
accountSendEmail:`/api/account/sendEmail`, //发送邮件
@@ -225,12 +253,33 @@ export const Https = {
getPorfolio:`/api/portfolio/page`,//查询作品广场
getPorfolioDetail:`/api/portfolio/detail`,//查询作品广场作品详情
setPorfolioChoose:`/api/portfolio/choose`,//二次创作
portfolioLike:`/api/portfolio/like`,//作品广场点赞
portfolioNoLike:`/api/portfolio/unlike`,//作品广场取消点赞
portfolioComment:`/api/portfolio/comment`,//作品广场评论
portfolioCommentPage:`/api/portfolio/commentPage`,//作品广场评论列表
//product生成
toProduct:`/api/history/toProduct`,//开始生成
toProductImageResult:`/api/history/toProductImageResult`,//获取结果
toProductImageElementUpload:`/api/history/toProductImageElementUpload`,//上传
productImageLike:`/api/history/productImageLike`,//like生成结果
productImageUnLike:`/api/history/productImageUnLike`,//取消like生成结果
productImageLikeList:`/api/history/productImageLikeList`,//like生成结果
//保存画布
canvasElementUpload:`/api/history/canvasElementUpload`,//画布上传临时图片
exportSave:`/api/history/exportSave`,//保存画布
exportSearch:`/api/history/exportSearch`,//保存画布
},
axiosGet(url,config) {
return new Promise((resolve, reject) => {
if(isLoginTime) {
resolve('')
return
}
axios.get(url,config).then(response => {
resolve(response)
}).catch((error) => {
@@ -241,6 +290,10 @@ export const Https = {
axiosPut(url, data) {
return new Promise((resolve, reject) => {
if(isLoginTime) {
resolve('')
return
}
axios.put(url, data).then(response => {
resolve(response)
}).catch((error) => {
@@ -251,6 +304,10 @@ export const Https = {
axiosPost(url, data,config) {
return new Promise((resolve, reject) => {
if(isLoginTime) {
resolve('')
return
}
axios.post(url, data,config).then(response => {
resolve(response)
}).catch((error) => {
@@ -261,6 +318,10 @@ export const Https = {
axiosDelete(url, newData) {
return new Promise((resolve, reject) => {
if(isLoginTime) {
resolve('')
return
}
axios.delete(url,{data:newData}).then(response => {
resolve(response)
}).catch((error) => {

48
src/tool/util.js
View File

@@ -12,6 +12,20 @@ const getUploadUrl = () => {
return url
}
function base64ToFile(urlData,name) {
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], name, {
type: mime
});
}
function dataURLtoBlob(dataurl) {//吧data url转为blob对象
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
@@ -47,6 +61,7 @@ function downloadIamge(imgsrc, name) { // 下载图片地址和图片名
a.href = url // 将生成的URL设置为a.href属性
a.target = '_blank'
a.dispatchEvent(event) // 触发a的单击事件
image.remove()
}
image.src = imgsrc
}
@@ -164,6 +179,36 @@ const isMoible = () => {//判断是否是移动端
}
}
let setPubDate = (date)=>{
const timestamp = new Date(date);
const now = new Date();
// 计算时间差（以毫秒为单位）
const differenceMs = now - timestamp;
const seconds = Math.floor(differenceMs / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const weeks = Math.floor(days / 7);
const months = Math.floor(days / 30);
const years = Math.floor(days / 365);
// 根据时间差的大小返回不同的描述
if (years > 0) {
return `${years} 年前`;
} else if (months > 0) {
return `${months} 个月前`;
} else if (weeks > 0) {
return `${weeks} 周前`;
} else if (days > 0) {
return `一天前`;
} else if (hours > 0) {
return `${hours} 小时前`;
} else if (minutes > 0) {
return `${minutes} 分钟前`;
} else {
return `1 分钟前`;
}
}
function getBrowserInfo() {//获取是什么浏览器
var agent = navigator.userAgent.toLowerCase();
@@ -386,6 +431,7 @@ const setGradual = (colorObj,colorWidth,colorHeight)=>{
export {
isEmail,
getUploadUrl,
base64ToFile,
dataURLtoFile,
blobToFile,
base64toFile,
@@ -395,6 +441,8 @@ export {
isMoible,
downloadIamge,
getBrowserInfo,
setPubDate,
murmur,
setGradual,
calculateGradientCoordinate,
}

15
src/views/HomeMain.vue
View File

@@ -75,13 +75,13 @@
<i class="fi fi-rs-notebook"></i>
<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
</div>
<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(userInfo.userId) >= 0" :to="`/administrator`">
<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(userInfo?.userId) >= 0" :to="`/administrator`">
<span class="icon iconfont icon-yonghu"></span>
<span class="select_item_des">Administrator</span>
</router-link>
<div class="select_item" @click="logout()">
<span class="icon iconfont icon-tuichu"></span
><span class="select_item_des">{{$t('Header.logOff')}}</span>
<span class="icon iconfont icon-tuichu"></span>
<span class="select_item_des">{{$t('Header.logOff')}}</span>
</div>
</nav>
@@ -197,7 +197,7 @@ export default defineComponent({
this.isMurmur =JSON.parse(isMurmur)
this.userInfo = JSON.parse(getCookie("userInfo"));
if (!this.userInfo) {
this.$router.replace("/login");
this.$router.replace("/");
} else {
this.accountIsLogin(this.userInfo);
}
@@ -288,7 +288,7 @@ export default defineComponent({
if(JSON.parse(isTest)){
await Https.axiosGet(Https.httpUrls.trialUserLogout,).then((rv) => {
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
this.$router.replace("/login");
this.$router.replace("/");
// WriteCookie("token");
});
})
@@ -296,7 +296,7 @@ export default defineComponent({
await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
// WriteCookie("token");
});
this.$router.replace("/login");
this.$router.replace("/");
}
// WriteCookie("token");
// window.location.reload()
@@ -309,7 +309,7 @@ export default defineComponent({
};
Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) => {
if (!rv) {
this.$router.replace("/login");
this.$router.replace("/");
}
});
},
@@ -587,6 +587,7 @@ export default defineComponent({
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #000000;
height: auto;
&.select_list{
// display: none;
transform: translateX(105%);

55
src/views/HomeRecommend.vue
View File

@@ -12,17 +12,18 @@
</div>
<div class="homeRecommend_right">
<div class="started_btn" @click="setLogin">登录</div>
<div class="started_btn started_btn2">注册</div>
<div class="started_btn started_btn2" @click="setRegister">注册</div>
</div>
</header>
<div class="homeRecommend_content_body">
<div class="homeRecommend_content_body_recommend" id="aaaa">
<div class="content_body_recommend_left">
<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img1 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
<img class="content_body_img2 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
<img class="content_body_img3 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
<img class="content_body_img4 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
<img class="content_body_img5 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
</div>
<div class="content_body_recommend_center content_body_text">
<div class="content_body_recommend_center_title">
@@ -34,11 +35,11 @@
</div>
</div>
<div class="content_body_recommend_right">
<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img1 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
<img class="content_body_img2 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
<img class="content_body_img3 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
<img class="content_body_img4 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
<img class="content_body_img5 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
</div>
</div>
<Works :isScroll="false"></Works>
@@ -50,7 +51,7 @@
</template>
<script >
import { defineComponent, createVNode, ref , nextTick } from "vue";
import { defineComponent, createVNode, ref , nextTick,computed } from "vue";
import { isEmail } from "@/tool/util";
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -74,9 +75,15 @@ export default defineComponent({
setup(){
const store = useStore();
const router = useRouter();
let systemUser = computed(()=>{
return store.state.UserHabit.systemUser
})
let setLogin = ()=>{
router.push("/login");
}
let setRegister = () =>{
router.push("/register");
}
let setAdminUp = ()=>{
let scrollDom = document.querySelector('.homeRecommend_content_body')
scrollDom.scrollTo({
@@ -85,7 +92,9 @@ export default defineComponent({
});
}
return {
systemUser,
setLogin,
setRegister,
setAdminUp,
}
},
@@ -260,26 +269,36 @@ export default defineComponent({
right: 0;
.content_body_img1{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 10rem;
right: calc(20rem + var(--margin));
}
.content_body_img2{
width: 15rem;
height: 15rem;
object-fit: cover;
top: calc(30rem + var(--margin));
right: calc(20rem + var(--margin));
}
.content_body_img3{
top: 38rem;
width: 30rem;
height: 30rem;
object-fit: cover;
right: calc(-13rem + var(--margin));
}
.content_body_img4{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 51rem;
right: calc(20rem + var(--margin));
}
.content_body_img5{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 15rem;
right: 0;
}
@@ -288,31 +307,43 @@ export default defineComponent({
left: 0;
.content_body_img1{
width: 15rem;
height: 15rem;
object-fit: cover;
top: 5rem;
left: calc(20rem + var(--margin));
}
.content_body_img2{
width: 25rem;
height: 25rem;
object-fit: cover;
top: calc(20rem + var(--margin));
left: calc(20rem + var(--margin));
}
.content_body_img3{
width: 20rem;
height: 20rem;
object-fit: cover;
top: calc(10rem + var(--margin));
left: calc(0 + var(--margin));
}
.content_body_img4{
width: 30rem;
height: 30rem;
object-fit: cover;
top: 36rem;
left: calc(-13rem + var(--margin));
}
.content_body_img5{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 51rem;
left: calc(20rem + var(--margin));
}
.content_body_img6{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 20rem;
left: calc(0 + var(--margin));
}

13
src/views/HomeView/HomeView.vue
View File

@@ -269,6 +269,7 @@ export default defineComponent({
let userGroupId: any = computed(() => {
return store.state.HomeStoreModule.userGroupId;
}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
let beenPublished = null
let designCollectionId: any = computed(() => {
return store.state.HomeStoreModule.designCollectionId;
});
@@ -330,6 +331,7 @@ export default defineComponent({
likeDesignCollectionList,
designCollectionList,
userGroupId,
beenPublished,
designCollectionId,
designId,
contentImgMax,
@@ -808,6 +810,7 @@ export default defineComponent({
let data: any = {
id: v.resData.id,
designType: v.resData.designType,
level2Type: v.category,
isPin: v.pin ? 1 : 0,
};
return data;
@@ -912,11 +915,13 @@ export default defineComponent({
//获取选择的组
getHistoryChoose(userGroupId: any, type: any) {
this.isShowMark = true;
let url =
Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
Https.axiosGet(url)
.then((rv: any) => {
this.beenPublished = rv.beenPublished
this.store.commit("setUserGroupId", rv.userGroupId);
this.dealHistoryChooseData(rv, type);
this.isShowMark = false;
@@ -954,6 +959,8 @@ export default defineComponent({
},
//处理选择组的数据
dealHistoryChooseData(data: any, type: any) {
console.log(data);
let collectionData = {
disposeMoodboard: data.collection.moodTemplateId?[{
id:data.collection.moodTemplateId,
@@ -980,6 +987,8 @@ export default defineComponent({
),
};
console.log(collectionData);
// console.log(data);
this.store.commit("setAllBoardDataChoose", collectionData);
// this.store.commit('clearShowSketchboard')
@@ -1027,9 +1036,11 @@ export default defineComponent({
if (v.level1Type === "Sketchboard") {
newData.pin = v.isPin;
newData.category = v.level2Type;
newData.level2Type = v.level2Type;
}
if (v.level1Type === "Printboard") {
newData.pin = v.isPin;
newData.level2Type = v.level2Type;
}
return newData;
});
@@ -1078,7 +1089,7 @@ export default defineComponent({
let productImg:any = this.$refs.productImg
productImg.productImgMask = true
productImg.init()
productImg.init(this.userGroupId,this.beenPublished)
},
//打开图片详情

87
src/views/HomeView/Works.vue
View File

@@ -4,16 +4,16 @@
<div>Works</div>
</div> -->
<div class="modal_title_text modal_search">
<div v-for="item in worksType" :key="item" v-show="isScroll?true:(item.value != 'myWorks')" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
<div v-for="item in worksType" :key="item" v-show="isScroll?true:(item.value != 'myWorks' && item.value !='favoriteWorks')" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
{{ item.name }}
</div>
<div class="modal_search_menu">
<!-- <div class="modal_search_menu">
<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
</div>
</div> -->
</div>
<div class="page_content" >
<Falls ref="fall" @loadend="isShowMark = false" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
<div class="page_loading_box">
<Falls ref="fall" @loadend="isShowMark = false" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
<div class="page_loading_box" v-show="!isNoData">
<span class="page_loading" v-show="!isShowMark"></span>
<span v-show="isShowMark">
<a-spin size="large" />
@@ -64,13 +64,17 @@ export default defineComponent({
name: '全部',
value: 'all'
},
// {
// name: 'generate',
// value: 'generate'
// },
// {
// name: 'freehand sketching',
// value: 'freehandSketching'
// },
{
name: 'generate',
value: 'generate'
},
{
name: 'freehand sketching',
value: 'freehandSketching'
name: 'Favorite Works',
value: 'favoriteWorks'
},
{
name: 'My Works',
@@ -194,6 +198,8 @@ export default defineComponent({
}
],
getListDate:{
"getLikePortfolio": 0,
"getMyPortfolio": 0,
page:1,
size:10,
},
@@ -229,6 +235,19 @@ export default defineComponent({
let fall:any = ref()
let setWorksSelect = (val:any) => {
filter.worksSelect = val.value
if(val.value == 'all'){
filter.getListDate.getLikePortfolio = 0
filter.getListDate.getMyPortfolio = 0
}else if(val.value == 'favoriteWorks'){
filter.getListDate.getLikePortfolio = 1
filter.getListDate.getMyPortfolio = 0
}else if(val.value == 'myWorks'){
filter.getListDate.getMyPortfolio = 1
filter.getListDate.getLikePortfolio = 0
}
filter.getListDate.page = 0
fall.value.clearData()
getPorfolio()
}
let likeFile = (item:any,type:string) => {
}
@@ -237,24 +256,41 @@ export default defineComponent({
newScaleImage.value.init(item)
}
let getPorfolio = ()=>{
// let data = filter.getListDate
// Https.axiosPost(Https.httpUrls.getPorfolio, data)
// .then((rv) => {
// console.log(rv);
// filter.worksList = rv.content
// })
// .catch((rv) => {});
let data = filter.getListDate
console.log(123123);
if(filter.isShowMark && !filter.isNoData)return
filter.isShowMark = true
setTimeout(() => {
filter.isShowMark = false
fall.value.push(filter.worksList);
}, 1000);
Https.axiosPost(Https.httpUrls.getPorfolio, data)
.then((rv) => {
if (rv.content.length > 0) {
filter.isShowMark = false
fall.value.push(rv.content);
} else {
filter.isNoData = true
}
// filter.worksList = rv.content
})
.catch((rv) => {});
// setTimeout(() => {
// filter.isShowMark = false
// fall.value.push(filter.worksList)
// }, 1000);
}
let {t} = useI18n()
let setprintModel= (data:any)=>{
selectMenu.value = data
}
let setPortfolioLike = (value:any) =>{
// let data = {id:value.id}
// Https.axiosGet(Https.httpUrls.portfolioLike, {params:data})
// .then((rv) => {
// })
// .catch((rv) => {
// });
}
onMounted (()=>{
getPorfolio()
let worksPage:any = document.querySelector('.works_page')
@@ -264,6 +300,7 @@ export default defineComponent({
// 如果不是相交，则直接返回
// console.log(entries[0]);
if (!entries[0].intersectionRatio) return;
filter.getListDate.page += 1
getPorfolio()
},
// { root:worksPage }
@@ -280,6 +317,7 @@ export default defineComponent({
getImgScale,
t,
setprintModel,
setPortfolioLike,
}
},
data() {
@@ -365,10 +403,11 @@ export default defineComponent({
background: #f7f8fa;
.page_loading_box{
text-align: center;
height: 50px;
.page_loading{
display: block;
width: 20px;
height: 20px;
width: 50px;
height: 50px;
}
}
}

4
src/views/HomeView/history.vue
View File

@@ -69,8 +69,8 @@
<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
<div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div>
<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
<div class="operate_item" @click="setPublish(record)">Publish</div>
<div class="operate_item" @click="updatePublish(record)">Update Publish</div>
<!-- <div class="operate_item" @click="setPublish(record)">Publish</div> -->
<!-- <div class="operate_item" @click="updatePublish(record)">Update Publish</div> -->
<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
</div>
</template>

102
src/views/HomeView/library.vue
View File

@@ -33,7 +33,7 @@
<div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
<div>{{ $t('LibraryPage.Organize') }}</div>
</div>
<div v-show="selectCode != 'Models'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
<div v-show="selectCode != 'Models' && selectCode != 'DesignElements'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
</div>
<div class="librart_headr_right">
@@ -70,7 +70,7 @@
<a-select
ref="select"
v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
v-model:value="designType.value"
v-model:value="designType"
:options="designTypeList[selectCode]"
@change="handleChange"
:fieldNames="{ label: 'name', value: 'value' }"
@@ -88,7 +88,11 @@
<div class="libray_right_content">
<div class="right_content_body" v-show="uploadGenerate =='Upload'">
<div class="content_body_header">
<div class="content_body_header" v-show="selectCode == 'DesignElements'">
<div style="font-size:1.5rem;">All default materials are generated by AiDA ourselves</div>
</div>
<!-- <div class="content_body_header"> -->
<div class="content_body_header" v-show="selectCode != 'DesignElements'">
<div class="content_body_header_left">
<div class="content_body_header_right">
<div :class="['header_operate_item' , 'fontSize','active']">
@@ -151,7 +155,7 @@
<div class="content_img_item" v-for="(img,index) in imgList" :key="img.id" @click="selectImgItem(img)" :draggable="true">
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
<img v-lazy="img.url" :key="img.url" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
<div class="img_item_hover">
<div class="img_item_hover" v-show="selectCode != 'DesignElements'">
<div class="img_operate_content">
<div class="img_operate_block" :title="t('LibraryPage.Point')" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
<span class="icon iconfont icon-dianwei operate_icon"></span>
@@ -187,7 +191,7 @@
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
<div class="content_body_header content_body_header_generate">
<div class="content_body_header_right"></div>
<div v-show="selectCode == 'Printboard'" class="printModel">
<div v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" class="printModel">
<div @click.stop="PrintModel">{{ printModel.name }}</div>
<ul v-show="printModel.optype">
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
@@ -198,7 +202,7 @@
<div class="input_border">
<div class="input_box" :class="{active:inputShow}">
<div class="input_box_btnBox">
<div class="upload_item">
<div class="upload_item" v-show="selectCode !== 'Moodboard' && (scene?.value == 'Pattern' || scene?.value == 'Slogan')">
<div
class="upload_file_item"
v-for="(file, index) in selectGenerateList"
@@ -221,6 +225,8 @@
</div>
</div>
</div>
<input class="search_seed" v-show="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
<input
class="search_input "
@input="ifMaximumLength"
@@ -248,7 +254,7 @@
>
</a-upload>
</i>
<i v-show="scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
<i v-show="selectCode == 'Printboard' && scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
</div>
@@ -324,6 +330,8 @@
<ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
<ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile>
<setLabel ref="setLabel"></setLabel>
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
<!-- 蒙层 start-->
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
@@ -356,6 +364,7 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import { useI18n } from "vue-i18n";
import { ElCascader } from 'element-plus'
import { remove } from "jszip";
import createSlogan from "@/component/HomePage/createSlogan.vue";
export default defineComponent({
components: {
// HeaderComponent,
@@ -367,6 +376,7 @@ export default defineComponent({
ElCascader,
scaleImage,
sketchCategory,
createSlogan,
},
setup() {
const store = useStore();
@@ -377,7 +387,7 @@ export default defineComponent({
// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
{title:useI18n().t('LibraryPage.Sketches'),code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
// {title:'Market Sketch',code:'Elements',icon:'icon-fuwushichang',showChildren:false,children:[]},
{title:'Design Elements',code:'DesignElements',icon:'fi fi-rs-people',showChildren:false,children:[]},
{title:'Design Elements',code:'DesignElements',icon:'fi fi-ss-puzzle-piece',showChildren:false,children:[]},
{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
]
@@ -385,6 +395,7 @@ export default defineComponent({
let selectImgList:any = ref([])
let selectCode:any = ref('Moodboard')
let searchPictureName = ref('')
let searchPictureSeed:any = ref(0);
let designType:any = ref({
name:'',
value:''
@@ -500,6 +511,7 @@ export default defineComponent({
selectImgList,
selectCode,
searchPictureName,
searchPictureSeed,
sexList,
sex,
designTypeList,
@@ -612,7 +624,7 @@ export default defineComponent({
// params = 'MalePosition'
// }
this.store.commit('setPosition',this.sex.value)
this.designType = this.designTypeList.Sketchboard[0]
this.designType = this.designTypeList.Sketchboard[0].value
// await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
// if (rv) {
@@ -632,8 +644,10 @@ export default defineComponent({
},
likeFile(item:any,str:string){
let designType = ''
console.log(this.designType);
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
designType = this.designType.value
designType = this.designType
}
if(str == 'like'){
let data = {
@@ -676,15 +690,12 @@ export default defineComponent({
this.isTextarea = false
this.value.labelValue = []
if(this.designTypeList[this.selectCode].length >= 1){
this.designType = this.designTypeList[this.selectCode][0]
this.designType = this.designTypeList[this.selectCode][0].value
}else{
this.designType = {
name:'',
value:'',
}
this.designType = ''
}
if(this.selectCode == 'DesignElements')this.uploadGenerate = 'Upload'
if(this.selectCode == 'Models')this.uploadGenerate = 'Upload'
if(this.selectCode == 'Printboard')this.uploadGenerate = 'Upload'
if(this.selectCode != 'DesignElements'){
this.getClass()
}
@@ -699,10 +710,14 @@ export default defineComponent({
async sexChange(){
await this.getPosition()
if(this.uploadGenerate == 'Generate')return
this.currentPage = 1
this.getLibraryList('')
},
handleChange(){
this.scene = this.designTypeList[this.selectCode].filter((item:any)=>item.value == this.designType)[0]
this.selectGenerateList = []
if(this.uploadGenerate == 'Generate')return
this.currentPage = 1
this.getLibraryList('')
},
@@ -746,6 +761,7 @@ export default defineComponent({
//选择图片
selectImgItem(imgData:any){
if(imgData.level2Type == "DesignElements")return
if(this.selectImgList.indexOf(imgData.id) === -1){
this.selectImgList.push(imgData.id)
}else{
@@ -772,6 +788,11 @@ export default defineComponent({
},
uploadGenerateOpen(str:any){
// if(str == 'Generate'){
// if(this.selectCode == 'Printboard'){
// this.scene = this.designTypeList[this.selectCode][0]
// }
// }
if(this.uploadGenerate == 'Generate'){
if(str != 'Generate'){
this.getLibraryList('')
@@ -902,7 +923,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('LibraryPage.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('LibraryPage.jsContent4'));
}
@@ -926,7 +947,7 @@ export default defineComponent({
// }
let designType = ''
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
designType = this.designType.value
designType = this.designType
}
let new_data = {
file:event.file,
@@ -997,7 +1018,7 @@ export default defineComponent({
})
let designType = ''
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
designType = this.designType.value
designType = this.designType
}
let data = {
classificationIdList:labelArr,
@@ -1057,6 +1078,11 @@ export default defineComponent({
}
this.captionGeneration += str + value
},
ifSeedValue(e:any){
if(this.searchPictureSeed == ''){
this.searchPictureSeed = 0
}
},
ifMaximumLength(){
clearTimeout(this.inputTime)
this.inputTime = setTimeout(()=>{
@@ -1068,6 +1094,13 @@ export default defineComponent({
}
},500)
},
setSlogan(){
let createSlogan:any = this.$refs.createSlogan
createSlogan.init()
},
setSloganData(data:any){
this.selectGenerateList = data
},
inputFocus(){
if(this.isInputFocus) return
this.isInputFocus = true
@@ -1147,11 +1180,12 @@ export default defineComponent({
},
getgenerate(){
let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
clearInterval(this.remGenerateTime[selectCodeStr])
this.remGenerate[selectCodeStr] = false
if(this.isGenerate[selectCodeStr]){
return
}
clearInterval(this.remGenerateTime[selectCodeStr])
this.remGenerate[selectCodeStr] = false
let level2Type = ''
let collectionElementId = ''
let base64 = ''
@@ -1162,6 +1196,8 @@ export default defineComponent({
base64 = this.selectGenerateList[0].imgUrl
}
}
console.log(this.scene);
if(this.selectCode == "Sketchboard"){
console.log(this.selectGenerateList);
}else if(this.selectCode == "Printboard"){
@@ -1177,13 +1213,17 @@ export default defineComponent({
userId:(this?.userInfo as any).userId,
isTestUser:this.driver__.driver?false:this.isTest,
text:selectCodeStr == 'Printboard'?`${arr[this.printModel.num-1]},${this.captionGeneration}`:this.captionGeneration,
seed:this.searchPictureSeed,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:1,//为1就是Print
gender:selectCodeStr == 'Sketchboard'?this.sex.value:'',
base64:base64,
sloganBase64:base64,
}
this.isGenerate[selectCodeStr] = true
this.isTextarea = false
this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
this.remGenerate[selectCodeStr] = true
},10000)
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => {
if(data.isTestUser){
@@ -1210,29 +1250,29 @@ export default defineComponent({
).catch(res=>{
// this.isShowMark = false
this.isGenerate[selectCodeStr] = false
clearInterval(this.remGenerateTime[selectCodeStr])
this.remGenerate[selectCodeStr] = false
});
},
setGenerate(str:any,dataList:any){
this.remGenerateTime[str] = setTimeout(()=>{
this.remGenerate[str] = true
},10000)
let data = dataList
let dataNum = dataList.length
let state = true
this.generateTime[str] = setInterval(()=>{
// let data = this.generateList[str].filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.generateResult, data).then(
(rv) => {
state = true
if(this.isGenerate[str]){//防止取消后有正在执行的获取状态
this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
rv.forEach((element:any) => {
if(element.status === 'Success'){
element.imgUrl = element.url
this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
if(itemCategory.value == element.category){
element.categoryValue = itemCategory?.label
element.category = itemCategory?.value
}
});
element.categoryValue = this.scene?.name
element.category = this.scene?.value
this.generateList[str].unshift(element)
data = data.filter((item:any) => item !== element.taskId);
}

11
src/views/LoginPage.vue
View File

@@ -474,7 +474,12 @@ export default defineComponent({
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
this.turnToHomePage();
this.store.commit("setSystemUser", rv.systemUser)
if(rv.systemUser == 0){
this.turnToHomePage('/');
}else{
this.turnToHomePage('/home');
}
sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
sessionStorage.setItem('sessionId', randomNum);
@@ -522,7 +527,7 @@ export default defineComponent({
},
//跳转到首页
turnToHomePage() {
turnToHomePage(str:any) {
this.getLang()
// this.$router.push("/home");
// console.log(window.location.search.substring(1));
@@ -530,7 +535,7 @@ export default defineComponent({
this.store.commit("clearAllCollection");
this.store.commit("setAllBoardDataChoose",{});
this.store.commit("clearShowSketchboard",{});
this.$router.push("/home");
this.$router.push(str);
},
//获取当前语言
getLang(){

914
src/views/RegisterPage.vue Normal file
View File

@@ -0,0 +1,914 @@
<template>
<div class="login_page">
<div class="page_content">
<img
class="login_logo"
src="@/assets/images/loginPage/aida_Logo_login.png"
/>
<!-- 账号密码和邮箱登录 start-->
<div class="login_content" v-if="isLogin === 1">
<div class="login_content_left">
<div class="login_type_list">
<div
:class="[
'login_type_item','username_login_item',
'login_active',
]"
>
Register AiDA 3.0
</div>
</div>
<!-- 账号密码登录 start -->
<!-- v-show="loginType == 'username'" -->
<div >
<div class="login_form_content" :state="emailStap">
<div class="login_form_title">Name</div>
<input
class="login_form_input"
placeholder="Enter your username"
v-model="username"
/>
<div class="login_form_title marign_top30">
<div>Password</div>
<!-- <div class="tip_content" @click="changeIsLogin(2)">
Forgot password？
</div> -->
</div>
<div class="password_input_block">
<input
class="login_form_input"
:type="passwordType"
placeholder="Enter your password"
v-model="password"
@keydown.enter="submitPerLogin()"
/>
<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
</div>
<div class="login_form_title marign_top30">Email</div>
<input
class="login_form_input"
placeholder="Enter your email address"
v-model="email"
@keydown.enter="submitPerLogin()"
/>
<!-- 邮箱登录 start -->
<div class="login_form_email" :class="{active:emailStap===2}">
<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
<!-- <div v-show="emailStap === 1" class="forget_password_content">
<div class="forget_password_content_block" @click="changeLoginType('username')">
<span class="icon iconfont fi-br-arrow-left"></span
><span class="forget_password_content_title"
>Log on to AiDA</span
>
</div>
<div class="login_form_content">
<div class="login_form_title">Email</div>
<input
class="login_form_input"
placeholder="Enter your email address"
v-model="email"
@keydown.enter="emailNextStepFun()"
/>
</div>
<div
class="login_submit_button marign_top40"
@click="emailNextStepFun()"
>
Sign In
</div>
</div> -->
<div v-show="emailStap === 2" class="email_last_step">
<div class="email_last_step_block" >
<span class="email_last_step_content"
>Verify with one-time verification code</span
>
<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
</div>
<div class="email_last_step_bottom">
<div class="email_last_step_des">
<div class="sent_email_content">
Sent to {{ email }}
</div>
<div class="tip_content">
<span v-show="time">{{ time }}s</span>
<span v-show="!time" @click="emailNextStepFun()"
>Resend</span
>
</div>
</div>
<VerificationCodeInput
:ct="emailCode"
@sendCaptcha="submitEmailLogin($event)"
></VerificationCodeInput>
<div class="email_last_step_des">
<div class="sent_email_content email_tip_content">
Please check the junk box if you haven't received verification code
</div>
</div>
</div>
</div>
</div>
</div>
<div class="login_form_title marign_top30">
<label :class="{active:emailStap == 2}">
<input :state="emailStap" type="checkbox" v-model="checked">
<span>I agree to all Term, Privacy Policy and Fees</span>
</label>
</div>
<div
class="login_submit_button marign_top40" :state="emailStap"
@click="submitPerLogin()"
>
Register
</div>
<!-- <div class="login_text" >
<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
</div> -->
</div>
<!-- 账号密码登录 end -->
</div>
<!-- 邮箱登录 end -->
<div class="login_content_right">
<img
src="@/assets/images/loginPage/aida_logo_centent.jpg"
/>
<!-- <img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt=""> -->
</div>
</div>
<!-- 忘记密码 start -->
<div class="forget_password_content" v-else>
<div class="forget_password_content_block" @click="forgetPasswordLastStepFun()">
<!-- <span class="icon iconfont fi-br-arrow-left"></span
> -->
<i class="fi fi-br-arrow-left"></i>
<span class="forget_password_content_title"
>Retrieve password</span
>
</div>
<div v-show="frogetPasswordStep === 1">
<div class="forget_passored_form_content">
<div class="forget_passored_form_title">Email</div>
<input
class="forget_passored_form_input"
placeholder="Enter your email"
v-model="forgetPasswordEmail"
@keydown.enter="forgetPasswordNextStepFun()"
/>
</div>
<div
class="forget_submit_button marign_top40"
@click="forgetPasswordNextStepFun()"
>
Next step
</div>
</div>
<div v-show="frogetPasswordStep === 2">
<div class="forget_verif_code_des">Verification Code</div>
<div class="email_last_step_des">
<div class="sent_email_content">
Sent to {{ forgetPasswordEmail }}
</div>
<div class="tip_content">
<span v-show="time">{{ time }}s</span>
<span
v-show="!time"
@click="forgetPasswordNextStepFun()"
>Resend</span
>
</div>
</div>
</div>
<div v-show="frogetPasswordStep === 3">
<div class="forget_passored_form_content">
<div class="forget_passored_form_title">Password</div>
<input
class="forget_passored_form_input"
placeholder="Enter a new password"
v-model="newPassword"
@keydown.enter="submitResetPassword()"
/>
</div>
<div
class="forget_submit_button marign_top40"
@click="submitResetPassword()"
>
Submit
</div>
</div>
</div>
<!-- 忘记密码 end -->
</div>
<div class="login_footer">
<div class="login_footer_item"><div class="login_footer_item_text">©2024 Code-Create Limited</div></div>
<div class="login_footer_item">
<div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-terms-and-conditions/')">Terms&Conditions</div>
<div class="login_footer_line"></div>
<div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-subscription-agreement/')">Privacy Policy</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref ,onMounted} from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { setCookie ,WriteCookie } from "@/tool/cookie";
import { message } from "ant-design-vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
const md5 = require("md5");
export default defineComponent({
components: {
VerificationCodeInput,
},
setup(){
let timer:any = 0;
const {locale} = useI18n()
const store = useStore();
return{
store,
timer,
locale
}
},
data() {
return {
checked:false,
isLogin: 1, //是否为登录 1-登录， 2-忘记密码
loginType: "username",
emailStap: 1, // 邮箱登录步骤
emailCode: ["", "", "", "", "", ""], //邮箱验证码
emailNextStep: true,
username: "",
password: "",
email: "", //邮箱登录邮箱
frogetPasswordStep: 1, //忘记密码的步骤
forgetPasswordEmail: "",
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
forgetEmailValue: "", //忘记密码的邮箱验证码保存值
newPassword: "", //新密码
isCheckRobot: false,
time: 60, //60秒倒计时
passwordType:'password',
userId:'',
loginTime:true
};
},
methods: {
changeLoginType(type: string) {
this.loginType = type;
},
//是否忘记密码页面
changeIsLogin(isLogin: number) {
if (isLogin === 1) {
//登录
this.forgetPasswordEmail = "";
this.frogetPasswordStep = 1;
this.forgetEmailCode = ["", "", "", "", "", ""];
this.emailStap = 1;
this.clearTimer();
} else {
this.username = "";
this.password = "";
}
this.isLogin = isLogin;
},
//邮箱登录的下一步
emailNextStepFun() {
if (!isEmail(this.email)) {
message.info("The email format is incorrect");
return;
}
let data = {
email: this.email,
operationType: "LOGIN",
};
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
(rv: any) => {
if (rv) {
this.emailStap = 2;
this.time = 60;
this.emailCode = ["", "", "", "", "", ""]
this.createTimer();
}
}
);
},
//邮箱登录的上一步
emailLastStepFun() {
this.emailStap = 1;
this.username = "",
this.password = "",
this.email = "";
this.checked=false,
this.loginType = "username",
(this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
},
//忘记密码的下一步
forgetPasswordNextStepFun() {
if (!isEmail(this.forgetPasswordEmail)) {
message.info("The email format is incorrect");
return;
}
let data = {
email: this.forgetPasswordEmail,
operationType: "FORGET_PWD",
};
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
(rv: any) => {
if (rv) {
this.frogetPasswordStep = 2;
(this.forgetEmailCode = ["", "", "", "", "", ""]),
this.createTimer();
}
}
);
},
//忘记密码的上一步
forgetPasswordLastStepFun() {
if (this.frogetPasswordStep === 1) {
this.changeIsLogin(1);
} else {
this.frogetPasswordStep = this.frogetPasswordStep - 1;
this.forgetPasswordEmail = "";
(this.forgetEmailCode = ["", "", "", "", "", ""]),
this.clearTimer();
}
},
//改变勾选是否是机器人
checkRobot() {
this.isCheckRobot = !this.isCheckRobot;
},
//提交账号密码预先登录
submitPerLogin() {
//输入账号密码
if(this.emailStap>=2){
return;
}else{
if (!this.username || !this.password) {
message.info("Please enter your account number or password");
return;
}
//输入邮箱
if (!this.email) {
message.info("Please enter your email address");
return;
}
//判断邮箱格式是否正确
if (!isEmail(this.email)) {
message.info("The email format is incorrect");
return;
}
//判断是否同意隐私政策
if (!this.checked) {
message.info("Agree to all terms, privacy fees and policies");
return;
}
let data = {
userPassword: md5(this.password + "abc"),
userName: this.username,
userEmail: this.email,
"browserIdentifiers": "",
"country": "",
"createDate": "",
"credits": 0,
"id": 0,
"isBeginner": 0,
"isTrial": 0,
"language": "",
"systemUser": 0,
"updateDate": "",
"validEndTime": 0,
"validStartTime": 0
};
// this.loginType = 'email'
if(this.loginTime){
this.loginTime = false
Https.axiosPost(Https.httpUrls.designWorksRegister, data).then(
(rv: any) => {
// if (rv) {
// this.loginType = 'email'
// }
this.emailStap = 2;
if (rv) {
this.userId = rv.userId
this.loginType = 'email'
this.time = 60;
this.emailCode = ["", "", "", "", "", ""]
this.createTimer();
}
}
).catch(res=>{
this.emailStap = 1;
});
setTimeout(() => {
this.loginTime = true
}, 2000);
}
}
},
changePasswordType(){
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
},
//邮箱登录提交
submitEmailLogin(emailVerifyCode: any) {
let data = {
email: this.email,
emailVerifyCode: emailVerifyCode,
loginType: "EMAIL",
userId:this.userId,
"userEmail": this.email,
"userName": this.username,
"userPassword": md5(this.password + "abc"),
};
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
(rv: any) => {
if (rv) {
this.createTimer();
let isTest = rv.isTrial == 1?true:false
let isBeginner = rv.isBeginner == 1?true:false
let token = rv.token;
setCookie("isMurmur", false);
setCookie("token", token);
setCookie("isTest", isTest);
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
this.store.commit("setSystemUser",rv.systemUser)
if(rv.systemUser == 0){
this.turnToHomePage('/');
}else{
this.turnToHomePage('/home');
}
sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
sessionStorage.setItem('sessionId', randomNum);
sessionStorage.setItem('record', JSON.stringify([]))
}
}
).catch(res=>{
});
},
//修改密码提交
submitResetPassword() {
let data = {
email: this.forgetPasswordEmail,
emailVerifyCode: this.forgetEmailValue,
password: md5(this.newPassword + "abc"),
verifyEmail:false,
};
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
(rv: any) => {
if (rv) {
message.success("Changing the password successfully");
this.changeIsLogin(1);
}
}
);
},
//创建定时器
createTimer() {
this.timer = setInterval(() => {
this.time--;
if (!this.time) {
clearInterval(this.timer);
}
}, 1000);
},
//清除定时器
clearTimer() {
this.time = 60;
if (this.timer) {
clearInterval(this.timer);
}
},
//跳转到首页
turnToHomePage(str:any) {
this.getLang()
// this.$router.push("/home");
// console.log(window.location.search.substring(1));
this.store.commit("clearAllData");
this.store.commit("clearAllCollection");
this.store.commit("setAllBoardDataChoose",{});
this.store.commit("clearShowSketchboard",{});
this.$router.push(str);
},
//获取当前语言
getLang(){
let data ={}
Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
(rv: any) => {
if (rv) {
this.locale = rv
setLang(rv)
}
}
);
},
turnToWindow(url: any) {
window.open(url);
},
},
});
</script>
<style lang="less" scoped>
.login_page {
width: 100%;
height: 100%;
.page_content {
// position: relative;
.login_logo {
position: absolute;
left: 4rem;
top: 2.5rem;
width: 11rem;
}
.login_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
// width: 60rem;
width: 150rem;
background: #FFFFFF;
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
border-radius: 1rem;
padding: 3rem 6rem 6.5rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.login_content_left{
width: 40%;
.login_form_email{
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
background: #fff;
transform: scale(0);
transition: .3s all;
border: 2px solid;
border-radius: 20px;
.email_last_step{
width: 100%;
height: 100%;
#app{
height: auto;
}
}
}
.active{
transform: scale(1);
}
}
.login_content_right{
width: 40%;
img{
width: 100%;
}
}
.login_type_list {
width: 100%;
display: flex;
.login_type_item {
text-align: center;
font-size: 3.6rem;
font-weight: bold;
color: #D7D7D7;
cursor: pointer;
height: 4rem;
line-height: 4rem;
&.login_active {
color: #030303;
}
}
}
.login_form_title {
font-size: 1.6rem;
// color: #666666;
font-weight: 900;
color: #000;
display: flex;
justify-content: space-between;
box-sizing: border-box;
label{
display: flex;
span{
font-size: 1.6rem;
margin-left: 10px;
font-weight: normal;
}
&.active{
pointer-events:none;
input{
pointer-events:none;
}
}
}
}
.login_form_content {
margin-top: 4rem;
position: relative;
&[state="2"]{
>*{
opacity: 0;
}
.login_form_email{
opacity: 1;
}
}
.password_input_block{
position: relative;
.password_show_icon{
position: absolute;
font-size: 2.4rem;
right: 2rem;
top:1.7rem;
cursor: pointer;
}
}
.login_form_input {
width: 100%;
height: 5rem;
margin-top: 1rem;
border: 0.1rem solid #DFDFDF;
border-radius: 2.5rem;
padding-left: 2.1rem;
line-height: 5rem;
font-size: 1.4rem;
box-sizing: border-box;
outline: none;
&::placeholder {
color: #a5b0c2;
}
}
}
.email_last_step {
// margin-top: 4rem;
.email_last_step_bottom{
padding: 0 40px;
}
.email_last_step_block{
padding: 10px;
border-bottom: 2px solid;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.email_last_step_content {
margin-left: 1rem;
font-size: 2.2rem;
font-weight: bold;
color: #030303;
}
.email_last_step_block_icon{
cursor: pointer;
margin-right: 1rem;
height: 20px;
}
}
.fi-br-arrow-left {
font-size: 2.5rem;
font-weight: bold;
color: #030303;
transform: translateY(1rem);
display: inline-block;
}
}
.login_submit_button {
height: 5rem;
background: #000;
border-radius: 2.5rem;
line-height: 5rem;
text-align: center;
font-size: 1.8rem;
font-weight: 500;
color: #ffffff;
cursor: pointer;
&[state="2"]{
cursor: not-allowed;
}
}
.login_text {
font-size: 1.6rem;
margin-top: 4rem;
color: #151515;
display: flex;
justify-content: flex-end;
.forget_password_text{
cursor: pointer;
}
}
}
.forget_password_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 60rem;
background: #FFFFFF;
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
border-radius: 1rem;
padding: 3rem 6rem 6.5rem;
box-sizing: border-box;
.forget_password_content_block{
cursor: pointer;
}
.fi-br-arrow-left {
font-size: 3.8rem;
font-weight: bold;
color: #030303;
transform: translateY(1rem);
display: inline-block;
}
.forget_password_content_title {
font-size: 3.2rem;
font-weight: bold;
color: #030303;
margin-left: 2rem;
}
.forget_passored_form_content {
margin-top: 3.5rem;
.forget_passored_form_title {
font-size: 2.4rem;
font-weight: bold;
color: #030303;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.forget_passored_form_input {
width: 100%;
height: 5rem;
margin-top: 1rem;
border: 0.1rem solid #DFDFDF;
border-radius: 2.5rem;
padding-left: 2.1rem;
line-height: 5rem;
font-size: 1.4rem;
box-sizing: border-box;
outline: none;
&::placeholder {
color: #a5b0c2;
}
}
}
.forget_verif_code_des {
font-size: 2.4rem;
font-weight: bold;
color: #030303;
margin-top: 3.5rem;
}
.forget_submit_button {
height: 5rem;
background: #000;
border-radius: 2.5rem;
line-height: 5rem;
text-align: center;
font-size: 1.8rem;
font-weight: 500;
color: #ffffff;
cursor: pointer;
}
}
}
.login_footer{
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
left: 0;
bottom: 3.5rem;
width: 100%;
padding: 0 4rem;
.login_footer_item{
display: flex;
align-items: center;
.login_footer_item_text{
font-size: 1.3rem;
color: #151515;
}
.footer_item_text_pointer{
cursor: pointer;
}
.login_footer_line{
width: 0.1rem;
height: 2rem;
margin: 0 2rem;
background: #B9B9B9;
}
}
}
.marign_top20 {
margin-top: 2rem;
}
.marign_top22 {
margin-top: 2.2rem;
}
.marign_top30 {
margin-top: 3rem;
}
.marign_top40 {
margin-top: 4rem;
}
.tip_content {
font-size: 1.3rem;
font-weight: bold;
color: #343579;
cursor: pointer;
}
.email_last_step_des {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4rem;
margin-bottom: 2rem;
.sent_email_content {
font-size: 1.8rem;
font-weight: bold;
color: #a5b0c2;
}
.email_tip_content{
font-size: 1.4rem;
color: #030303;
}
}
}
</style>