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

09-12

Browse Source
This commit is contained in:
WangXiaoDong
2023-09-12 10:11:27 +08:00
parent 3440f2f868
commit 173f35042d
71 changed files with 4291 additions and 1865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
public/css/googleapis.css Normal file
View File

@@ -0,0 +1,252 @@
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./woff/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./woff/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./woff/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./woff/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./woff/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./woff/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./woff/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(./woff/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

224
public/css/roboto.css Normal file
View File

@@ -0,0 +1,224 @@
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic3CsTKlA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic-CsTKlA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic2CsTKlA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic5CsTKlA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic1CsTKlA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic0CsTKlA.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(./woff/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(./woff/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(./woff/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(./woff/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(./woff/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(./woff/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(./woff/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(./woff/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(./woff/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

BIN
public/css/woff/KFOjCnqEu92Fr1Mu51TzBic-CsTKlA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOjCnqEu92Fr1Mu51TzBic0CsTKlA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOjCnqEu92Fr1Mu51TzBic1CsTKlA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOjCnqEu92Fr1Mu51TzBic2CsTKlA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOjCnqEu92Fr1Mu51TzBic3CsTKlA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOjCnqEu92Fr1Mu51TzBic5CsTKlA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmWUlfBBc4.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmYUtfBBc4.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOmCnqEu92Fr1Mu4WxKOzY.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOmCnqEu92Fr1Mu4mxK.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOmCnqEu92Fr1Mu5mxKOzY.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOmCnqEu92Fr1Mu72xKOzY.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOmCnqEu92Fr1Mu7GxKOzY.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOmCnqEu92Fr1Mu7WxKOzY.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/woff/KFOmCnqEu92Fr1Mu7mxKOzY.woff2 Normal file
View File

Binary file not shown.

9
public/index.html
View File

@@ -6,11 +6,14 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>AiDA</title> <title>AiDA</title>
<link href="https://fonts.font.im/css?family=Roboto:400,500,700,700i" rel="stylesheet"> <!-- <link href="https://fonts.font.im/css?family=Roboto:400,500,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" href="./css/googleapis.css">
<link rel="stylesheet" href="./css/roboto.css">
</head> </head>
<body> <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> -->
<script src="./js/color-thief.js"></script>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>

1
public/js/color-thief.js Normal file
View File

File diff suppressed because one or more lines are too long

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

@@ -9,6 +9,11 @@ body,
input { input {
outline: none; outline: none;
} }
ul,
li {
list-style: none;
padding: 0;
}
.page_content { .page_content {
width: 1440px; width: 1440px;
max-width: 100%; max-width: 100%;
@@ -174,11 +179,30 @@ input {
text-align: center; text-align: center;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.collection_modal .ant-modal-body { .collection_modal .ant-modal-body,
height: calc(80vh - 6.4rem); .design_detail_modal_component .ant-modal-body,
.designOpenrtion_modal .ant-modal-body {
overflow-y: hidden; overflow-y: hidden;
} }
.collection_modal .ant-upload.ant-upload-select-picture-card { .collection_modal .design_title_text,
.design_detail_modal_component .design_title_text,
.designOpenrtion_modal .design_title_text {
font-size: 1.8rem;
font-weight: 900;
color: rgba(0, 0, 0, 0.65);
align-items: center;
margin-bottom: 2rem;
}
.collection_modal .design_title_text .design_title_text_intro,
.design_detail_modal_component .design_title_text .design_title_text_intro,
.designOpenrtion_modal .design_title_text .design_title_text_intro {
font-size: 1.2rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
}
.collection_modal .ant-upload.ant-upload-select-picture-card,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card {
background: #FFFFFF; background: #FFFFFF;
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
@@ -186,22 +210,78 @@ input {
border-radius: 10px; border-radius: 10px;
margin: 0; margin: 0;
} }
.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao { .collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
font-size: 3.2rem; font-size: 3.2rem;
color: #B7B7B7; color: #B7B7B7;
} }
.collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text { .collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text {
font-size: 1.6rem; font-size: 1.6rem;
color: #B7B7B7; color: #B7B7B7;
} }
.collection_modal .ant-upload-list-picture-card-container { .collection_modal .ant-upload-list-picture-card-container,
.design_detail_modal_component .ant-upload-list-picture-card-container,
.designOpenrtion_modal .ant-upload-list-picture-card-container {
display: none !important; display: none !important;
} }
.collection_modal .ant-upload-picture-card-wrapper { .collection_modal .ant-upload-picture-card-wrapper,
.design_detail_modal_component .ant-upload-picture-card-wrapper,
.designOpenrtion_modal .ant-upload-picture-card-wrapper {
width: auto; width: auto;
vertical-align: top; vertical-align: top;
} }
.collection_modal_body .input_box { .designOpenrtion_modal .design_closeIcon,
.design_detail_modal_component .design_closeIcon {
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.designOpenrtion_modal .design_closeIcon .fi-rr-cross-small::before,
.design_detail_modal_component .design_closeIcon .fi-rr-cross-small::before {
padding: 0.2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
.designOpenrtion_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 {
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 {
display: none !important;
}
.design_detail_modal_component .ant-upload-picture-card-wrapper,
.designOpenrtion_modal .ant-upload-picture-card-wrapper {
width: auto;
vertical-align: top;
}
.design_detail_modal_component .subitOkPreviewBtn,
.designOpenrtion_modal .subitOkPreviewBtn {
background-color: #38205b;
color: #fff;
cursor: pointer;
left: 50%;
position: absolute;
transform: translateX(-50%);
padding: 0.5rem 2rem;
border-radius: 2rem;
font-size: 12px;
display: inline-block;
}
.collection_modal_body .input_box,
.design_detail_modal_component .input_box {
display: flex; display: flex;
align-items: center; align-items: center;
position: sticky; position: sticky;
@@ -209,8 +289,10 @@ input {
background: #fff; background: #fff;
padding-top: 2.5rem; padding-top: 2.5rem;
padding-bottom: 2rem; padding-bottom: 2rem;
z-index: 2;
} }
.collection_modal_body .input_box input { .collection_modal_body .input_box input,
.design_detail_modal_component .input_box input {
font-size: 12px; font-size: 12px;
border-radius: 0.5rem; border-radius: 0.5rem;
width: 70%; width: 70%;
@@ -220,23 +302,29 @@ input {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 400; font-weight: 400;
} }
.collection_modal_body .input_box inputinput:-moz-placeholder { .collection_modal_body .input_box inputinput:-moz-placeholder,
.design_detail_modal_component .input_box inputinput:-moz-placeholder {
color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15);
} }
.collection_modal_body .input_box inputinput:-ms-input-placeholder { .collection_modal_body .input_box inputinput:-ms-input-placeholder,
.design_detail_modal_component .input_box inputinput:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15);
} }
.collection_modal_body .input_box inputinput::-webkit-input-placeholder { .collection_modal_body .input_box inputinput::-webkit-input-placeholder,
.design_detail_modal_component .input_box inputinput::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15);
} }
.collection_modal_body .input_box .generage_btn { .collection_modal_body .input_box .generage_btn,
.design_detail_modal_component .input_box .generage_btn {
margin: 0 auto; margin: 0 auto;
} }
.collection_modal_body .upload_item { .collection_modal_body .upload_item,
.design_detail_modal_component .upload_item {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.collection_modal_body .upload_item .upload_file_item { .collection_modal_body .upload_item .upload_file_item,
.design_detail_modal_component .upload_item .upload_file_item {
margin: 0 2rem 2rem 0; margin: 0 2rem 2rem 0;
display: inline-block; display: inline-block;
width: 10rem; width: 10rem;
@@ -245,26 +333,30 @@ input {
vertical-align: top; vertical-align: top;
position: relative; position: relative;
} }
.collection_modal_body .upload_item .upload_file_item.upload_component { .collection_modal_body .upload_item .upload_file_item.upload_component,
.design_detail_modal_component .upload_item .upload_file_item.upload_component {
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) { .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) {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) { .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) {
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
border: 0.3rem solid #ededed; border: 0.3rem solid #ededed;
border-radius: 10px; border-radius: 10px;
margin: 0; margin: 0;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content { .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 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -272,15 +364,18 @@ input {
width: 100%; width: 100%;
position: relative; position: relative;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block { .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 {
display: block; display: block;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img { .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 {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block { .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 {
display: none; display: none;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
@@ -294,11 +389,16 @@ input {
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
.collection_modal_body .upload_item .upload_file_item .upload_img_icon { .collection_modal_body .upload_item .upload_file_item .upload_img_icon,
.design_detail_modal_component .upload_item .upload_file_item .upload_img_icon {
width: 4.6rem; width: 4.6rem;
} }
.cut_pricture_modal .ant-modal-content {
border-radius: 10px;
}
.cut_pricture_modal .ant-modal-body { .cut_pricture_modal .ant-modal-body {
height: 65.4rem; height: 65rem;
padding: 8rem 5rem !important;
overflow-y: hidden; overflow-y: hidden;
} }
.scroll_style::-webkit-scrollbar-button:single-button { .scroll_style::-webkit-scrollbar-button:single-button {

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

@@ -8,6 +8,10 @@ html,body,#app{
input{ input{
outline:none outline:none
} }
ul,li{
list-style: none;
padding: 0;
}
.page_content{ .page_content{
width: 1440px; width: 1440px;
max-width: 100%; max-width: 100%;
@@ -203,13 +207,23 @@ input{
margin-top:.5rem; margin-top:.5rem;
} }
//collection 弹窗 //collection 弹窗
.collection_modal{ .collection_modal,.design_detail_modal_component,.designOpenrtion_modal{
.ant-modal-body{ .ant-modal-body{
height: calc(80vh - 6.4rem);
overflow-y: hidden; overflow-y: hidden;
} }
.design_title_text{
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
margin-bottom: 2rem;
.design_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.ant-upload.ant-upload-select-picture-card{ .ant-upload.ant-upload-select-picture-card{
background: #FFFFFF; background: #FFFFFF;
width: 6rem; width: 6rem;
@@ -237,8 +251,55 @@ input{
vertical-align: top; vertical-align: top;
} }
} }
//desing 关闭按钮
.designOpenrtion_modal,.design_detail_modal_component{
.design_closeIcon{
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
.fi-rr-cross-small::before{
padding: .2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.collection_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
}
.design_detail_modal_component,.designOpenrtion_modal{
.ant-upload-list-picture-card-container{
display: none !important;
}
.ant-upload-picture-card-wrapper{
width: auto;
vertical-align: top;
}
.subitOkPreviewBtn{
background-color: #38205b;
color: #fff;
cursor: pointer;
left: 50%;
position: absolute;
transform: translateX(-50%);
padding: .5rem 2rem;
border-radius: 2rem;
font-size: 12px;
display: inline-block;
}
}
//设计input和上传按钮样式 //设计input和上传按钮样式
.collection_modal_body{ .collection_modal_body,.design_detail_modal_component{
.input_box{ .input_box{
display: flex; display: flex;
align-items: center; align-items: center;
@@ -247,6 +308,7 @@ input{
background: #fff; background: #fff;
padding-top: 2.5rem; padding-top: 2.5rem;
padding-bottom: 2rem; padding-bottom: 2rem;
z-index: 2;
input{ input{
font-size: 12px; font-size: 12px;
border-radius: .5rem; border-radius: .5rem;
@@ -349,9 +411,12 @@ input{
//剪裁弹窗 //剪裁弹窗
.cut_pricture_modal{ .cut_pricture_modal{
.ant-modal-content{
border-radius: 10px;
}
.ant-modal-body{ .ant-modal-body{
height: 65.4rem; height: 65rem;
padding: 8rem 5rem !important;
overflow-y: hidden; overflow-y: hidden;
} }
} }

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

@@ -127,7 +127,6 @@ export default defineComponent({
this.loadingShow = false this.loadingShow = false
}) })
}, },
//提交 //提交
submitOthers(){ submitOthers(){
this.othersData.color = this.othersData.color ? `${this.modifyColor.r} ${this.modifyColor.g} ${this.modifyColor.b}` : '' this.othersData.color = this.othersData.color ? `${this.modifyColor.r} ${this.modifyColor.g} ${this.modifyColor.b}` : ''

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

@@ -4,16 +4,11 @@
<a-modal class="design_detail_modal_component" <a-modal class="design_detail_modal_component"
v-model:visible="designDetailShow" v-model:visible="designDetailShow"
:footer="null" :footer="null"
title="Mailbox binding"
width="80%" width="80%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
> >
<!-- <template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template> -->
<div class="design_title_text"> <div class="design_title_text">
<div>Details</div> <div>Details</div>
<div class="design_title_text_intro">edit the details of your design</div> <div class="design_title_text_intro">edit the details of your design</div>
@@ -30,27 +25,33 @@
<div class="design_detail_modal_body" v-show="designShowPrview == 1"> <div class="design_detail_modal_body" v-show="designShowPrview == 1">
<div class="detail_modal_body_img" @click="showDesignImgDetail()"> <div class="detail_modal_body_img">
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> --> <!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
<img class="detial_img" :src="designItemDetail.designItemUrl"> <div v-for="item,index in designItemDetail.clothes" :key="item">
<div class="clothes_item_img_block" @click="clothesDetail(item,index)">
<img class="clothes_item_img" :src="item.path">
</div>
</div>
<img v-show="imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<div> <div>
<!-- 全屏 --> <!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt"></i> <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 --> <!-- 编辑 -->
<i class="fi fi-rr-edit"></i> <i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- 层 --> <!-- 层 -->
<i class="fi fi-rr-copy"></i> <i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
</div> </div>
</div> </div>
<div class="detail_modal_body_category"> <div class="detail_modal_body_category">
<div class="detail_modal_right_top scroll_style"> <div v-show="designOrder" class="detail_modal_right_top scroll_style">
<div class="clothes_detail_item clothes_detail_item_apparel"> <div class="clothes_detail_item clothes_detail_item_apparel">
<div class="clothes_item_header"> <div class="clothes_item_header">
<i class="fi fi-rs-comments"></i> <i class="fi fi-rs-comments"></i>
<div>Current Apparel</div> <div>Current Apparel</div>
<i class="fi fi-rr-edit"></i> <i class="fi fi-rr-edit"></i>
</div> </div>
<img src="" alt="" class="centent" @click="openCurrent(1)"> <img :src="currentItem.path" alt="" class="centent" @click="openCurrent(1)">
</div> </div>
<div class="clothes_detail_item clothes_detail_item_print"> <div class="clothes_detail_item clothes_detail_item_print">
<div class="clothes_item_header"> <div class="clothes_item_header">
@@ -58,7 +59,10 @@
<div>Current Print</div> <div>Current Print</div>
<i class="fi fi-rr-edit"></i> <i class="fi fi-rr-edit"></i>
</div> </div>
<i class="fi fi-rr-picture centent" @click="openCurrent(2)"></i> <div class="centent_div" v-if="currentItem?.printObject?.path && currentItem?.printObject?.path != 'none'" @click="openCurrent(2)">
<img src="" 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"> <div class="clothes_detail_item clothes_detail_item_color">
<div class="clothes_item_header"> <div class="clothes_item_header">
@@ -68,20 +72,17 @@
</div> </div>
<div class="img_block_item centent" @click="openCurrent(3)"> <div class="img_block_item centent" @click="openCurrent(3)">
<div class="color_item"> <div class="color_item">
<div class="color_content" :style="{background:`#6c6cac`}"></div> <div class="color_content" :style="{background:`rgba(${currentItem.color?.r},${currentItem.color?.g},${currentItem.color?.b},${currentItem.color?.a?currentItem.color.a:1})`}"></div>
<div class="color_content_body"> <div class="color_content_body">
<div class="color_des">222</div> <div class="color_des">{{currentItem.color?.tcx}}</div>
<div class="color_des">111</div> <div class="color_des">{{currentItem.color?.name}}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="clothes_detail_item subitOkPreviewBtn">
Submit
</div> </div>
<div class="detail_modal_right_bottom">
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
</div> </div>
</div> </div>
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter> <DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
@@ -92,25 +93,17 @@
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl"> <img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> --> <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
</div> </div>
</div>
<div class="design_detail_perview" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem ref="setDesignItem"></setDesignItem>
</div> </div>
<div class="design_detail_perview design_detail_perview_second" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
</div>
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
<div class="img_item_hover">
<div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
</div> </div>
</a-modal> </a-modal>
<ElementReplace ref="ElementReplace"></ElementReplace> <ElementReplace ref="ElementReplace"></ElementReplace>
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace> <AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
<div class="mark_loading" v-show="loadingShow"> <div class="mark_loading" v-show="loadingShow">
<a-spin size="large" /> <a-spin size="large" />
</div> </div>
@@ -118,23 +111,28 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent,computed,ref } from 'vue' import { defineComponent,computed,ref,provide } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue' import ElementReplace from '@/component/Detail/ElementReplace.vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue' import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue' import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex"; import { useStore } from "vuex";
export default defineComponent({ export default defineComponent({
components:{ components:{
ElementReplace, ElementReplace,
AccessoryReplace, AccessoryReplace,
Draggable, Draggable,
DesignDetailAlter DesignDetailAlter,
setDesignItem,
}, },
setup() { setup() {
const store = useStore(); const store = useStore();
let designItemDetail :any = computed(()=>{return store.state.DesignDetailModule.designItemDetail}) let designItemDetail :any = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let parentData:any = ref({ let parentData:any = ref({
design:{}, design:{},
index:0, index:0,
@@ -142,44 +140,52 @@ export default defineComponent({
type:'', type:'',
})//父组件传过来的数据 })//父组件传过来的数据
let others:any = ref({
left:200+'px',
top:100+'px',
})
let currentItem:any = ref({})//点击上衣或者下衣
let current:any = ref({})//点击上衣或者下衣
provide('current',current)
return{ return{
designItemDetail, designItemDetail,
store, store,
parentData, parentData,
others,
currentItem,
current,
} }
}, },
data(){ data(){
return{ return{
loadingShow:false, loadingShow:false,//加载中
designDetailShow:true, designDetailShow:true,
designShowPrview:1, //展示图片预览步骤 designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图 generateHighDesignImg:'',//点击generate按钮生成的高级设计图
imgListr:[ imgDesignImg:true,
{ designOrder:false,
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
id: 1,
},
{
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
id: 2,
},
{
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
id: 3,
},
{
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
id: 4,
},
],
} }
}, },
mounted(){
let url = Https.httpUrls.getDesignDetail + `?designItemId=33130&designPythonOutfitId=32929`
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
console.log(rv);
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
},
methods:{ methods:{
openCurrent(num: Number) { openCurrent(num: Number) {
let DesignDetailAlter:any = this.$refs.DesignDetailAlter let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.init(num) DesignDetailAlter.init(num)
if(num ==2 ){ if(num ==2 ){
} }
}, },
@@ -187,9 +193,12 @@ export default defineComponent({
closeModal(){ closeModal(){
if(this.designShowPrview == 1){ if(this.designShowPrview == 1){
this.designDetailShow = false this.designDetailShow = false
}else if(this.designShowPrview == 2){ this.designOrder = false
this.designShowPrview = this.designShowPrview - 1 this.currentItem = {}
}else if(this.designShowPrview == 3){ let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
}else{
this.designShowPrview = 1 this.designShowPrview = 1
} }
}, },
@@ -239,71 +248,52 @@ export default defineComponent({
}, },
//显示图片详情 //显示图片详情
showDesignImgDetail(){ showDesignImgDetail(num:any){
if(this.generateHighDesignImg){ let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.designShowPrview = 3 console.log(designItemDetail);
}else{
this.designShowPrview = 2
}
},
//生成高级图片 this.designShowPrview = num
generateHighDesign(){ let setDesignItem:any = this.$refs.setDesignItem
let design:any = this.parentData.design console.log(setDesignItem);
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
(rv: any) => {
this.generateHighDesignImg = rv
this.loadingShow = false
this.designShowPrview = 3
}
).catch(rv=>{
this.loadingShow = false
})
},
//删除生成的真人图 if(this.designShowPrview == 3){
deleteGeneratePic(){ setDesignItem.init()
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
} }
this.loadingShow = true // this.others = designItemDetail.others
Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
(rv: any) => { // if(this.generateHighDesignImg){
this.loadingShow = false // this.designShowPrview = 3
this.generateHighDesignImg = '' // }else{
this.designShowPrview = 2 // this.designShowPrview = 2
} // }
).catch(rv=>{ },
this.loadingShow = false //图片按下样子
}) mousedownDesignImg(){
this.imgDesignImg = false
},
//图片抬起样子
mouseupDesignImg(){
this.imgDesignImg = true
}, },
//元素替换 //元素替换
clothesDetail(clothes:any, index:number){ clothesDetail(clothes:any, index:number){
let elementReplace:any = this.$refs.ElementReplace if(this.currentItem?.id == clothes.id){
let data ={ return
clothes:clothes,
index:index,
} }
elementReplace.showelementReplaceModal(data) this.designOrder = true
}, this.current = JSON.parse(JSON.stringify(clothes))
this.currentItem = clothes
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
othersDetail(others:any, index:number){ // let elementReplace:any = this.$refs.ElementReplace
let accessoryReplace:any = this.$refs.AccessoryReplace // let data ={
let data ={ // clothes:clothes,
others:others, // index:index,
index:index, // }
} // elementReplace.showelementReplaceModal(data)
accessoryReplace.showAccessoryReplaceModal(data)
}, },
//重新设计 //重新设计
redesignItem(){ redesignItem(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -339,23 +329,12 @@ export default defineComponent({
<style lang="less"> <style lang="less">
.design_detail_modal_component{ .design_detail_modal_component{
color: #000; color: #000;
max-width: 1150px ; max-width: 1440px ;
.design_title_text{
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
margin-bottom: 2rem;
.design_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.ant-modal-content{ .ant-modal-content{
border-radius: 10px; border-radius: 10px;
overflow: hidden; // overflow: hidden;
.ant-modal-header{ .ant-modal-header{
background-color: #fff; background-color: #fff;
border-bottom: none; border-bottom: none;
@@ -365,6 +344,7 @@ export default defineComponent({
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem);
height: 65rem; height: 65rem;
display: flex; display: flex;
overflow-y: hidden;
flex-direction: column; flex-direction: column;
} }
} }
@@ -381,28 +361,7 @@ export default defineComponent({
} }
.design_closeIcon{
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
.fi-rr-cross-small::before{
padding: .2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.collection_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.turn_button{ .turn_button{
width: 3.6rem; width: 3.6rem;
@@ -436,6 +395,7 @@ export default defineComponent({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
overflow: hidden;
// padding: 1.5rem 1rem 2.5rem; // padding: 1.5rem 1rem 2.5rem;
box-sizing: border-box; box-sizing: border-box;
.detail_modal_body_img{ .detail_modal_body_img{
@@ -447,6 +407,14 @@ export default defineComponent({
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
flex-direction: column;
>div{
height: 50%;
.clothes_item_img_block{
display: flex;
}
}
.detial_img{ .detial_img{
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@@ -454,6 +422,8 @@ export default defineComponent({
div{ div{
i{ i{
position: absolute; position: absolute;
cursor: pointer;
zoom: 1.2;
&.fi-bs-expand-arrows-alt{ &.fi-bs-expand-arrows-alt{
top: 0; top: 0;
left: 0; left: 0;
@@ -473,7 +443,7 @@ export default defineComponent({
.detail_modal_body_category{ .detail_modal_body_category{
width: 17%; width: 17%;
height: 100%; height: 100%;
position: relative;
.detail_modal_right_top{ .detail_modal_right_top{
width: 100%; width: 100%;
height: calc(100% - 3.9rem); height: calc(100% - 3.9rem);
@@ -481,6 +451,10 @@ export default defineComponent({
overflow-y: auto; overflow-y: auto;
.clothes_detail_item{ .clothes_detail_item{
.centent_div{
display: flex;
justify-content: space-between;
}
.centent{ .centent{
cursor: pointer; cursor: pointer;
@@ -510,13 +484,21 @@ export default defineComponent({
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
} }
&.clothes_detail_item_apparel{
img{
max-height: 100%;
}
}
.color_item{ .color_item{
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border: 1px solid #ebe9e9; border: 1px solid #ebe9e9;
.color_content{ .color_content{
width: 6rem; width: 8rem;
height: 4rem; height: 4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.color_content_body{ .color_content_body{
.color_des{ .color_des{
@@ -537,35 +519,10 @@ export default defineComponent({
margin: 1rem 0; margin: 1rem 0;
} }
} }
} &.subitOkPreviewBtn{
}
.detail_modal_right_bottom{
position: relative; position: relative;
margin-top: 2rem;
.detail_page_num{
position: absolute;
top: 2rem;
left: 12.4rem;
font-size: 1.8rem;
font-family: Roboto;
font-weight: 400;
color: #000000;
} }
.detail_redesign_button{
position: absolute;
top: 1.4rem;
right: 0;
padding: 0 1.8rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
} }
} }
} }
@@ -628,7 +585,6 @@ export default defineComponent({
.design_detail_perview{ .design_detail_perview{
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0.7rem 0 0.6rem;
&.design_detail_perview_second{ &.design_detail_perview_second{
width: 100%; width: 100%;

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="detail_modal_body_select"> <div class="detail_modal_body_select">
<div v-show="type_ == 1 && select == true"> <div v-show="(type_ == 1 || type_ == 2) && select == true">
<div class="detail_uploadLibrary"> <div class="detail_uploadLibrary">
<div class="switch_type_list"> <div class="switch_type_list">
<div <div
@@ -18,40 +18,57 @@
<span>Library</span> <span>Library</span>
</div> </div>
</div> </div>
<!-- <div v-show="openClick == 1"> <div v-show="openClick == 2" class="detail_Library">
<div v-show="openClick == 1" class="moodboard_body"> <div class="content_search_block">
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
</div>
</div>
<div v-show="openClick == 1" class="detail_Upload_item">
<div class="moodboard_body">
<div class="upload_img_body scroll_style"> <div class="upload_img_body scroll_style">
<div class="upload_item"> <div class="upload_item">
<div <div
class="upload_file_item" class="upload_file_item"
v-for="(file, index) in fileList" v-for="(file, index) in uploadList"
:key="file" :key="file"
@click.stop="selectImgItem(file)"
> >
<div <div
class="upload_file_item_content" class="upload_file_item_content"
v-show="file?.status === 'uploading'" v-show="file?.status === 'uploading'"
> >
<a-spin <a-spin :indicator="indicator" tip="Uploading..." />
:indicator="indicator"
tip="Uploading..."
/>
</div> </div>
<div <div
class="upload_file_item_content" class="upload_file_item_content"
v-show="file?.status === 'done'" v-show="file?.status === 'done'"
> >
<img :src="file?.imgUrl" class="upload_img" /> <img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ current.type }}
</div>
</div>
</div>
<div <div
class="delete_file_block" class="delete_file_block"
@click="deleteFile(file)" @click.stop="deleteFile(index)"
> >
Delete <span class="icon iconfont icon-shanchu"></span>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="upload_file_item upload_component" class="upload_file_item upload_component"
v-show="moodboarList.length != 8" v-show="uploadList.length != 8"
> >
<a-upload <a-upload
:action="uploadUrl + '/api/element/upload'" :action="uploadUrl + '/api/element/upload'"
@@ -60,34 +77,40 @@
...upload, ...upload,
}" }"
:headers="{ Authorization: token }" :headers="{ Authorization: token }"
v-model:file-list="fileList" v-model:file-list="uploadList"
:before-upload="beforeUpload" :before-upload="beforeUpload"
multiple :maxCount="8 - uploadList.length"
:maxCount="8 - moodboarList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp" accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)" @change="(file) => upFileUploadChange(file)"
> >
<div <div
class="upload_tip_block" class="upload_tip_block"
v-show=" moodboarList.length != 8" v-show="uploadList.length != 8"
> >
<i class="fi fi-br-upload"></i> <i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div> </div>
</a-upload> </a-upload>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> --> </div>
<div v-show="openClick == 2"> <div v-show="openClick == 2" class="detail_Library_item">
<div class="material_content_body scroll_style">
<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)"/>
</div>
</div>
</div>
<div class="no_data_block loading_block" v-show="isShowLoading">
<a-spin size="large"></a-spin>
</div>
</div> </div>
</div> </div>
</div>
<div v-show="type_ == 2 && select == true">
1111111111111111111111111
</div>
<div v-show="type_ == 3 && select == true"> <div v-show="type_ == 3 && select == true">
<div class="detail_color"> <div class="detail_color">
<div class="right_content_line"> <div class="right_content_line">
@@ -179,9 +202,6 @@
<span class="icon iconfont icon-huoquduixiang"></span> <span class="icon iconfont icon-huoquduixiang"></span>
<span class="get_color_des"></span> <span class="get_color_des"></span>
</div> </div>
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
<img src="#" :title="pantongName">
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -191,7 +211,7 @@
<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd> <DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
</template> </template>
<script> <script>
import { defineComponent,computed,ref, h ,nextTick } from 'vue' import { defineComponent,computed,ref, h ,nextTick ,inject,provide } from 'vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { useStore } from "vuex"; import { useStore } from "vuex";
@@ -200,7 +220,7 @@ import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color' import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util' import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue'; import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
export default defineComponent({ export default defineComponent({
props: ["msg"], props: ["msg"],
components:{ components:{
@@ -210,11 +230,39 @@ export default defineComponent({
const store = useStore(); const store = useStore();
let type_ = ref(1); let type_ = ref(1);
let select = ref(false); let select = ref(false);
let parentData = ref({ let current = inject('current')//父组件传过来的数据
})//父组件传过来的数据
let openClick = ref(1); let openClick = ref(1);
let searchPictureName = ref('')
//模型印花
let disignTypeList = [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
]
let isShowLoading = ref(false)
let clothesList = ref([])
let uploadList = ref([])
let apparelList = ref([])
let printList = ref([])
let selectCode = ref('Sketchboard')
//颜色 //颜色
let selectColor = ref({ let selectColor = ref({
rgba:{}, rgba:{},
@@ -223,8 +271,17 @@ export default defineComponent({
}) })
return{ return{
store, store,
parentData, current,
openClick, openClick,
searchPictureName,
disignTypeList,
isShowLoading,
clothesList,
uploadList,
apparelList,
printList,
selectCode,
type_, type_,
select, select,
selectColor, selectColor,
@@ -235,12 +292,30 @@ export default defineComponent({
selectColor(newVal,oldVal){ selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
// console.log(DesignDetailEnd.selectIndex);
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length) let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList) this.setColorboardList(colorList)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
} }
}, },
computed:{ computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){ getSelectRGB(selectColor){
return (selectColor)=>{ return (selectColor)=>{
@@ -250,7 +325,10 @@ export default defineComponent({
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255, g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255, b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1, a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
}
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
} }
return data return data
} }
@@ -258,6 +336,21 @@ export default defineComponent({
}, },
data(){ data(){
return{ return{
token: "",
uploadUrl:'',
upload: {
isPin: 0,
level1Type: 'Sketchboard',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
designShowPrview:1, //展示图片预览步骤 designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图 generateHighDesignImg:'',//点击generate按钮生成的高级设计图
@@ -278,26 +371,187 @@ export default defineComponent({
}, },
spin: true, spin: true,
}), }),
getPantongNameTime:true
} }
}, },
mounted () {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
let dropperDom = document.getElementsByClassName('vc-sketch-color-wrap')[0]
dropperDom.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.error("Your browser does not support it")
}
})
},
methods:{ methods:{
//点击判断 //点击判断
init(num){ init(num){
this.type_ = num this.type_ = num
this.select = true this.select = true
let arr = this.current.color
// if(!arr[3]){
// arr[3] = 1
// }
this.selectColor = { this.selectColor = {
rgba:{ rgba:{
r:108, r:Number(arr.r),
g:108, g:Number(arr.g),
b:172, b:Number(arr.g),
a:1 a:Number(arr.a?arr.a:1),
}, },
hex:'#6c6cac' hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
}
console.log(this.selectColor);
this.uploadList = []
if (num == 1) {
this.selectCode = 'Sketchboard'
this.upload.level1Type = 'Sketchboard'
this.uploadList = this.apparelList
}else if (num == 2){
this.selectCode = 'Printboard'
this.upload.level1Type = 'Printboard'
this.uploadList = this.printList
}
if(num == 1 || num == 2){
this.clothesList = []
this.getLibraryList()
} }
let DesignDetailEnd = this.$refs.DesignDetailEnd let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.init(num) DesignDetailEnd.init(num)
}, },
deleteFile(num){
this.uploadList.splice(num, 1)
},
upFileUploadChange(data) {
let file = data.file;
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
file.id = res.data.id;
file.url = res.data.url;
file.resData = res.data;
file.designType = res.data.designType
file.category = this.current;
console.log(file);
let fileList = this.uploadList.filter(
(v) => v.status === "done"
);
if (this.uploadList.length >= 8) {
message.error("You can select up to 8 images");
} else {
// this.store.commit("setSketchboardFile", fileList);
this.uploadList = fileList
// this.store.commit("clearMoodTemplateId");
if(this.selectCode == 'Sketchboard'){
this.apparelList = this.uploadList
}else{
this.printList = this.uploadList
}
}
} else if (file.status === "error") {
let index = -1;
this.uploadList.forEach((ele, index1) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.uploadList.splice(index, 1);
}
message.error(file.name + "upload failed");
}
},
//关闭
terminate(){
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.selectIndex = 0
DesignDetailEnd.type_ = 0
},
//切换整体衣服
changePlace(){
this.uploadList = []
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.type_ = 0
this.uploadList = []
this.apparelList = []
this.printList = []
this.select = false
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
DesignDetailEnd.selectIndex = 0
},
// this.getLibraryList('Moodboard')
// this.getLibraryList('Printboard')
showFileCategory(file) {
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file, cate,list) {
file.category = cate.value;
for (let item of list) {
item.categoryShow = false;
}
},
hiddenFileCategory() {
for (let item of this.clothesList) {
item.categoryShow = false;
}
document.removeEventListener("click", this.hiddenFileCategory);
},
selectImgItem(imgData){
if(this.selectCode == 'Sketchboard'){
this.current.id_ = imgData.id
this.current.path = imgData.url
}else{
console.log(imgData,this.current.printObject);
this.current.printObject.url = imgData.url
this.current.printObject.id = imgData.id
}
// imgData.type_ = this.type_
// this.store.commit("addGenerateMaterialFils", imgData);
},
//请求我的印花&&模型
getLibraryList(){
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
page:1,
pictureName:this.searchPictureName,
size:10,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
this.clothesList = rv.content
this.isShowLoading = false
}
).catch((res)=>{
this.isShowLoading = false
});
},
//衣服 //衣服
open(num) { open(num) {
this.openClick = num; this.openClick = num;
@@ -309,6 +563,7 @@ export default defineComponent({
//颜色 //颜色
beforeUpload(file){ beforeUpload(file){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp'; const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
@@ -322,15 +577,6 @@ export default defineComponent({
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE; return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}, },
//清除当前的颜色 //清除当前的颜色
clearCurrentColor(){
this.selectColor = {
rgba:{}
}
this.colorFileList = []
this.pantongName = ''
this.pantongNameList = []
this.tcxColor = ''
},
colorDeleteFile(index){ colorDeleteFile(index){
this.colorFileList.splice(index, 1) this.colorFileList.splice(index, 1)
this.selectColorList = [] this.selectColorList = []
@@ -340,9 +586,14 @@ export default defineComponent({
}, },
rgbaToHex(rgba) { // rgba转16进制 rgbaToHex(rgba) { // rgba转16进制
let hex = '#'; let hex = '#';
for (const i of rgba) { rgba.forEach((i,index) => {
if(index == 3){
hex += Math.round(i * 255).toString(16)
}else{
hex += Number(i).toString(16).padStart(2, '0'); hex += Number(i).toString(16).padStart(2, '0');
} }
});
return hex; return hex;
}, },
//通过HSV获取颜色 //通过HSV获取颜色
@@ -373,57 +624,78 @@ export default defineComponent({
} }
hsvList.push(obj) hsvList.push(obj)
}) })
// let data = []
// Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
// if(rv){
// this.pantongName = rv.name
// console.log(rv);
// }
// })
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then( Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
(rv) => { (rv) => {
if(rv){ if(rv){
rv.forEach(element => { rv.forEach(element => {
this.pantongNameList.push(element.name) this.pantongNameList.push(element.name)
}); });
console.log(rv);
} }
} }
).catch(res=>{ ).catch(res=>{
}); });
}, },
//通过tcx获取颜色 //通过tcx获取颜色
getTcxColor(){ getTcxColor(){
if(!this.tcxColor){ if(!this.tcxColor){
return return
} }
let DesignDetailEnd = this.$refs.DesignDetailEnd
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{ Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
if(rv && rv.name){ if(rv && rv.name){
// let hex = this.rgbaToHex([color.r,color.g,color.b]) // let hex = this.rgbaToHex([color.r,color.g,color.b])
let hex = this.rgbaToHex([rv.r,rv.g,rv.b]) let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a? rv.a :1])
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''} this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
this.selectColor = this.reviewColor this.selectColor = this.reviewColor
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b} DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
this.pantongName = rv.name this.pantongName = rv.name
let colorList =this.colorList.filter((v) => Object.keys(v).length) let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
this.setColorboardList(colorList) this.setColorboardList(colorList)
this.getColorBg = true this.getColorBg = true
}else{ }else{
message.error("Can't find the TCX color") message.error("Can't find the TCX color")
} }
}) })
},
//查询颜色的潘通值和txc
getPantongName(v) {
if(!v.r){
return
}
let color = [v.r, v.g, v.b];
let hsv = rgbToHsv(color);
let data = [{
h: hsv[0],
s: hsv[1],
v: hsv[2],
}]
return new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv) => {
if (rv) {
this.selectColor.tcx = rv[0].tcx
this.selectColor.name = rv[0].name
resolve();
}
})
.catch((res) => {
reject();
});
});
}, },
setColorboardList(colorList){ setColorboardList(colorList){
let newColorList = colorList.map((v)=>{ let newColorList = colorList.map((v)=>{
let data = { let data = {
id:'', id:'',
name:'', name:'',
rgbValue:v rgbValue:v
} }
return data return data
}) })
// this.store.commit('setColorboardList',newColorList)
}, },
fileUploadChange(data){ fileUploadChange(data){
@@ -450,8 +722,7 @@ export default defineComponent({
let colorHex = this.rgbaToHex(color) let colorHex = this.rgbaToHex(color)
let selectColorList = []; let selectColorList = [];
let selectColor = colorThief.getPalette(domImg,7) let selectColor = colorThief.getPalette(domImg,7)
selectColor = selectColor.join('&') selectColor = selectColor.join('&').split("&")
selectColor = selectColor.split("&")
let colorLi = [] let colorLi = []
new Set(selectColor).forEach((item)=>{ new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(",")) colorLi.push(item.split(","))
@@ -479,6 +750,8 @@ export default defineComponent({
width: 20%; width: 20%;
>div{ >div{
height: 100%; height: 100%;
display: flex;
flex-direction: column;
} }
i{ i{
font-size: 1.8rem; font-size: 1.8rem;
@@ -486,6 +759,8 @@ export default defineComponent({
} }
.detail_uploadLibrary{ .detail_uploadLibrary{
.switch_type_list { .switch_type_list {
margin-bottom: 1rem;
margin-top: -1rem;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
@@ -537,7 +812,185 @@ export default defineComponent({
} }
} }
.detail_Library{
.content_search_block{
display: flex;
margin-bottom: 1rem;
.search_input{
width: 15rem;
padding-left: 1.5rem;
// height: 4rem;
// line-height: 3.8rem;
// background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
// font-size: 1.6rem;
font-size: 1.2rem;
font-weight: 400;
height: 3rem;
&::placeholder {
color: #C2C2C2;
}
}
.search_icon_block{
width: 5rem;
height: 3rem;
line-height: 3rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
color: #FFFFFF;
}
}
}
}
.detail_Library_item,.detail_Upload_item{
width: 100%;
// height: calc(100% - 19rem);
flex: 1;
overflow: hidden;
position: relative;
&.generate::-webkit-scrollbar{display: none;}
>div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
overflow-X: hidden;
height: 100%;
&.scroll_style::-webkit-scrollbar{display: none;}
}
.content_img_item{
display: inline-block;
vertical-align: top;
// padding: 0 1.4rem;
// margin-bottom: 2.8rem;
margin-bottom: 2rem;
padding: 0;
height: 9rem;
&.active{
margin-bottom: 2rem;
.pin_block{
display: block;
}
}
.pin_block{
display: none;
}
.content_img_item_block{
// border: 0.1rem solid transparent;
width: 9rem;
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
&.active{
opacity: .5;
img{
transform: scale(.9);
}
}
&.select_item_img{
// border-color: #343579;
}
.print_content_img{
width: 100%;
height: 100%;
}
.content_img{
max-width: 100%;
max-height: 100%;
}
}
.content_img_name{
width: 16.5rem;
height: 3.5rem;
line-height: 3.5rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.4rem;
color: #030303;
}
}
.upload_img_body{
width: 100%;
.upload_item{
justify-content: space-between;
}
}
.moodboard_body{
.upload_file_item{
margin: 0;
margin-bottom: 2rem;
width: 9rem;
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.delete_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
.icon-shanchu{
font-size: 1.6rem;
color: #fff;
}
}
&:hover .delete_file_block{
display: block;
}
}
}
}
}
.detail_color{ .detail_color{
// height: calc(100% - 5.4rem); // height: calc(100% - 5.4rem);
height: 100%; height: 100%;
@@ -904,21 +1357,7 @@ export default defineComponent({
vertical-align: middle; vertical-align: middle;
} }
} }
.get_color_bg{
width: 18rem;
height: 18rem;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 1.5rem;
img{
opacity: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
}
} }
} }

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

@@ -14,7 +14,16 @@
<span>New Print</span> <span>New Print</span>
</div> </div>
<div class="print_left"> <div class="print_left">
<img src="" alt=""> <!-- <img :src="current.path" :title="current.type"> -->
<img :src="current?.printObject?.url" v-if="current?.printObject?.url && current?.printObject?.url != 'none'">
<div src="@/assets/images/homePage/null_img.png" v-else ></div>
<div
v-show="current?.printObject?.url && current?.printObject?.url != 'none'"
class="delete_file_block"
@click="deleteFile"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div> </div>
</div> </div>
<div> <div>
@@ -26,14 +35,14 @@
<div class="habit_Overal_Single"> <div class="habit_Overal_Single">
<div <div
class="habit_Overal_Single_text" class="habit_Overal_Single_text"
:class="{ active: !overalSingle }" :class="{ active: !overallSingle }"
> >
Overal Overal
</div> </div>
<a-switch v-model:checked="overalSingle" /> <a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
<div <div
class="habit_Overal_Single_text" class="habit_Overal_Single_text"
:class="{ active: overalSingle }" :class="{ active: overallSingle }"
> >
Single Single
</div> </div>
@@ -46,17 +55,15 @@
> >
</a-slider> </a-slider>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="result_apparel_print_img"> <div class="result_apparel_print_img">
<img v-show="type_==1" class="result_appare_img" src="" alt=""> <img v-show="type_==1" class="result_appare_img" :src="current.path" :title="current.type">
<img v-show="type_==2" class="result_print_img" src="" alt=""> <img v-show="type_==2" class="result_print_img" :src="current.path" :title="current.type" @click="setPrint">
</div>
</div>
<div v-show="type_ == 2"></div> </div>
</div>
<div v-show="type_ == 3"> <div v-show="type_ == 3">
<div class="result_color upload_title"> <div class="result_color upload_title">
<i class="color_edit fi fi-bs-comments"></i> <i class="color_edit fi fi-bs-comments"></i>
@@ -64,53 +71,62 @@
</div> </div>
<div class="modal_img"> <div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :key="color" > <div class="modal_img_item" v-for="color,index in colorList" :key="color" >
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}"> <div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> --> <!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> -->
<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}"> <div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
</div> </div>
<div class="color_content_body"> <div class="color_content_body">
<div class="color_des">22</div> <div class="color_des">{{color.tcx}}</div>
<div class="color_des">111</div> <div class="color_des">{{ color.name }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
<div v-show="type_ == 2" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
</div> </div>
</template> </template>
<script> <script>
import { defineComponent,computed,ref, h } from 'vue' import { defineComponent,computed,ref, h ,inject} from 'vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { LoadingOutlined } from '@ant-design/icons-vue';
import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color' import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util' import DesignPrintOperation from './DesignPrintOperation.vue';
import { message,Upload} from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
props: ["msg"], props: ["msg"],
components:{ components:{
Draggable,Sketch, Draggable,Sketch,DesignPrintOperation
}, },
setup(prop) { setup(prop) {
const store = useStore(); const store = useStore();
let type_ = ref(0); let type_ = ref(0);
let current = inject('current')//父组件传过来的数据
//印花 //印花
let overalSingle = ref() let overallSingle = ref(false)
let systemDesignerPercentage = ref(30) let systemDesignerPercentage = ref(0)
//颜色 //颜色
let colorList = ref([{},{},{},{},{},{},{},{}]) let colorList = ref([{},{},{},{},{},{},{},{}])
//加载中
let loadingShow = ref(false)
return{ return{
overalSingle, store,
systemDesignerPercentage, current,
type_, type_,
overallSingle,
systemDesignerPercentage,
colorList, colorList,
loadingShow,
} }
}, },
data(){ data(){
@@ -127,40 +143,126 @@ export default defineComponent({
init(num){ init(num){
this.type_ = num this.type_ = num
this.colorList[this.selectIndex] = this.$parent.selectColor this.colorList[this.selectIndex] = this.$parent.selectColor
this.overallSingle = this.current.printObject.ifSingle
this.systemDesignerPercentage = this.current.printObject.scale*100
console.log(this.current);
}, },
//模型
//印花 //印花
systemDesigner(num) { systemDesigner(num) {
console.log(num); this.current.printObject.scale = num
},
setOveralSingle(){
this.current.printObject.ifSingle = this.overallSingle
}, },
formatter(value) { formatter(value) {
return `${value}%`; return `${value}%`;
}, },
setPrint(){
if(this.current.printObject.url && this.current?.printObject?.url != 'none'){
let DesignPrintOperation = this.$refs.DesignPrintOperation
DesignPrintOperation.init()
}else{
message.error('Please select print');
}
},
deleteFile(){
this.current.printObject = {}
},
//颜色 //颜色
selectColorItem(index,color){ selectColorItem(index,color){
let hex let hex
let parent = this.$parent let parent = this.$parent
this.selectIndex = index
this.$parent.selectIndex = index
if(this.$parent.selectColor.rgba.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
return
}
if(color.rgba?.r){ if(color.rgba?.r){
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b]) hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a])
}else{ }else{
hex = '#FFFFFF' hex = '#FFFFFF'
} }
this.selectIndex = index this.$parent.selectColor = color?.rgba?.r != '' ? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {}
this.$parent.selectIndex = index
this.$parent.selectColor = color?.rgba + ''? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{},hex:''}
this.$parent.tcxColor = '' this.$parent.tcxColor = ''
this.$parent.pantongName = '' this.$parent.pantongName = ''
}, },
setSelectColorItem(color){
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a}`
this.current.color = string
designItemDetail.clothes.forEach((element,index) => {
if(element.id == this.current.id){
designItemDetail.clothes[index] = this.current
}
});
},
//提交
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
}
})
console.log(this.current,designItemDetail);
if(this.type_ == 1){
designItemDetail.clothes[index].id = this.current.id_
designItemDetail.clothes[index].path = this.current.path
return
}else if(this.type_ == 2){
this.setPrint()
return
}else if(this.type_ == 3){
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
designItemDetail.clothes[index].color = color
}
let priority = designItemDetail.clothes.map((v)=>{
return v.type
})
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// this.parentData.design.designItemUrl = rv.designItemUrl
// this.$emit('finishRedesign',this.parentData)
// this.closeModal()
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
this.loadingShow = false
// this.closeModal()
console.log(rv);
}
).catch(res=>{
this.loadingShow = false
});
}
} }
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.detail_modal_body_result{ .detail_modal_body_result{
width: 26%; width: 26%;
position: relative;
i{ i{
font-size: 1.8rem; font-size: 1.8rem;
display: block; display: block;
} }
.upload_title{ .upload_title{
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -180,16 +282,20 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.result_apparel_print_img{ .result_apparel_print_img{
position: relative;
flex: 1; flex: 1;
img{ img{
width: 100%; width: auto;
height: 100%; height: 100%;
max-height: 35rem; max-height: 35rem;
margin-top: 2rem; margin-top: 2rem;
} }
.result_print_img{ .result_print_img{
transform: scale(.7); transform: scale(.85);
transform-origin: right top; transform-origin: right top;
position: absolute;
right: 0;
cursor: pointer;
} }
} }
} }
@@ -198,10 +304,32 @@ export default defineComponent({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.print_left{ .print_left{
position: relative;
img{ img{
width: 8rem; width: auto;
height: 8rem; height: 8rem;
margin: auto; margin: auto;
display: block;
}
.delete_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
.icon-shanchu{
font-size: 1.6rem;
color: #fff;
}
}
&:hover .delete_file_block{
display: block;
} }
} }
.print_right{ .print_right{
@@ -211,7 +339,6 @@ export default defineComponent({
justify-content: center; justify-content: center;
// margin: 2rem 0; // margin: 2rem 0;
transform: scale(.8); transform: scale(.8);
// margin: 3rem 0; // margin: 3rem 0;
.habit_Overal_Single_text { .habit_Overal_Single_text {
font-weight: 600; font-weight: 600;
@@ -248,13 +375,6 @@ export default defineComponent({
:deep(.ant-slider-handle:hover) { :deep(.ant-slider-handle:hover) {
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2); box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
} }
// .habit_System_Designer_text_max {
// display: flex;
// justify-content: space-between;
// .habit_System_Designer_text {
// }
// }
} }
} }
} }
@@ -273,14 +393,21 @@ export default defineComponent({
position: relative; position: relative;
cursor: pointer; cursor: pointer;
border: 0.1rem solid #DCDCEC; border: 0.1rem solid #DCDCEC;
.color_content{ height: 8.5rem;
width: 7rem; width: 7rem;
box-sizing: border-box;
.color_content{
width: 100%;
height: 4rem; height: 4rem;
} }
.color_content_body{ .color_content_body{
.color_des{ .color_des{
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
} }
} }
.select_upload_color{ .select_upload_color{
@@ -292,8 +419,10 @@ export default defineComponent({
} }
} }
}
.subitOkPreviewBtn{
bottom: 4rem;
position: absolute;
} }
} }

530
src/component/Detail/DesignDetailOld.vue
View File

@@ -1,530 +0,0 @@
<template>
<div>
<a-modal class="design_detail_modal_component"
v-model:visible="designDetailShow"
:footer="null"
title="Mailbox binding"
width="80%"
:maskClosable="false"
:centered="true"
>
<template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template>
<div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
<div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
<div class="detail_modal_body_left" @click="showDesignImgDetail()">
<img class="detial_img" :src="designItemDetail.designItemUrl">
</div>
<div class="detail_modal_body_right">
<div class="detail_modal_right_top scroll_style">
<div class="clothes_detail_item">
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Apparel</div>
<div class="clothes_item_content">
<!-- 拖拽功能 -->
<Draggable :list="designItemDetail.clothes" item-key="id" :animation="100">
<template #item="{ element,index }">
<div class="clothes_item_img_block" @click="clothesDetail(element,index)">
<img class="clothes_item_img" :src="element.path">
</div>
</template>
</Draggable>
</div>
</div>
<div class="clothes_detail_item" v-show="designItemDetail.others && designItemDetail.others.length">
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Others</div>
<div class="clothes_item_content others_clothes_item_content">
<div class="clothes_item_img_block" v-for="(element,index) in designItemDetail.others" :key="element.path" @click="othersDetail(element,index)">
<img class="clothes_item_img" :src="element.path">
</div>
</div>
</div>
</div>
<div class="detail_modal_right_bottom">
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
</div>
</div>
</div>
<div class="design_detail_perview" v-show="designShowPrview == 2">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
</div>
</div>
<div class="design_detail_perview design_detail_perview_second" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
</div>
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
<div class="img_item_hover">
<div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
</div>
</a-modal>
<ElementReplace ref="ElementReplace"></ElementReplace>
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
export default defineComponent({
components:{
ElementReplace,
AccessoryReplace,
Draggable,
},
setup() {
const store = useStore();
let designItemDetail :any = computed(()=>{return store.state.DesignDetailModule.designItemDetail})
let parentData:any = ref({
design:{},
index:0,
collectionList:[],
type:'',
})//父组件传过来的数据
return{
designItemDetail,
store,
parentData
}
},
data(){
return{
loadingShow:false,
designDetailShow:false,
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
}
},
methods:{
closeModal(){
if(this.designShowPrview == 1){
this.designDetailShow = false
}else if(this.designShowPrview == 2){
this.designShowPrview = this.designShowPrview - 1
}else if(this.designShowPrview == 3){
this.designShowPrview = 1
}
},
showDesignDetailModal(data:any){
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
this.parentData = data
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
},
//切换上一张或下一张图的详情
changeDesignItem(type:string){
let {design,index,collectionList} = this.parentData
let newDesign = {}
let newIndex = 0
if(type === 'last'){
if(index>0){
newIndex = this.parentData.index - 1
}else{
newIndex = this.parentData.collectionList.length - 1
}
}else{
if(index < this.parentData.collectionList.length - 1){
newIndex = this.parentData.index + 1
}else{
newIndex = 0
}
}
newDesign = collectionList[newIndex]
let data = {
design:newDesign,
index:newIndex,
collectionList:collectionList
}
this.showDesignDetailModal(data)
},
//显示图片详情
showDesignImgDetail(){
if(this.generateHighDesignImg){
this.designShowPrview = 3
}else{
this.designShowPrview = 2
}
},
//生成高级图片
generateHighDesign(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
(rv: any) => {
this.generateHighDesignImg = rv
this.loadingShow = false
this.designShowPrview = 3
}
).catch(rv=>{
this.loadingShow = false
})
},
//删除生成的真人图
deleteGeneratePic(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
(rv: any) => {
this.loadingShow = false
this.generateHighDesignImg = ''
this.designShowPrview = 2
}
).catch(rv=>{
this.loadingShow = false
})
},
//元素替换
clothesDetail(clothes:any, index:number){
let elementReplace:any = this.$refs.ElementReplace
let data ={
clothes:clothes,
index:index,
}
elementReplace.showelementReplaceModal(data)
},
othersDetail(others:any, index:number){
let accessoryReplace:any = this.$refs.AccessoryReplace
let data ={
others:others,
index:index,
}
accessoryReplace.showAccessoryReplaceModal(data)
},
//重新设计
redesignItem(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
delete designItemDetail.designItemUrl
let priority = designItemDetail.clothes.map((v:any)=>{
return v.type
})
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv: any) => {
this.parentData.design.designItemUrl = rv.designItemUrl
this.$emit('finishRedesign',this.parentData)
this.closeModal()
this.loadingShow = false
this.closeModal()
}
).catch(res=>{
this.loadingShow = false
});
}
}
})
</script>
<style lang="less">
.design_detail_modal_component{
color: #000;
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
background: #F2F3FB;
height: 80vh;
overflow-y: hidden;
padding: 0;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.turn_button{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
position: absolute;
top: calc(50% - 1.8rem);
cursor: pointer;
line-height: 3.6rem;
text-align: center;
&.turn_left_button{
left: -8rem;
}
&.turn_right_button{
right: -8rem;
}
.icon_turn{
font-size: 2.4rem;
color: #ffffff;
}
}
.design_detail_modal_body{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 1.5rem 1rem 2.5rem;
box-sizing: border-box;
.detail_modal_body_left{
width: 43.3rem;
height: 100%;
background: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
.detial_img{
max-width: 100%;
max-height: 100%;
}
}
.detail_modal_body_right{
width: calc(100% - 44rem);
height: 100%;
.detail_modal_right_top{
width: 100%;
height: calc(100% - 3.9rem);
background: #fff;
overflow-y: auto;
.clothes_detail_item{
padding-left: 1.5rem;
.clothes_item_header{
height: 6.4rem;
display: flex;
align-items: center;
font-size: 18px;
color: #000000;
.icon-dangqianweizhi{
font-size: 1.8rem;
color: #000000;
margin-right: 1rem;
}
}
.clothes_item_content{
padding:0 0.5rem 2.3rem;
border-bottom: 0.1rem solid #F2F3FB;
&.others_clothes_item_content{
border-bottom:none
}
.clothes_item_img_block{
width: 20.5rem;
height: 20.5rem;
border: 0.1rem solid #F5F5F5;
display: inline-block;
text-align: center;
line-height: 21.3rem;
margin-right: 1rem;
margin-bottom: 1rem;
.clothes_item_img{
max-width: 100%;
max-height: 100%;
}
}
}
}
}
.detail_modal_right_bottom{
position: relative;
.detail_page_num{
position: absolute;
top: 2rem;
left: 12.4rem;
font-size: 1.8rem;
font-family: Roboto;
font-weight: 400;
color: #000000;
}
.detail_redesign_button{
position: absolute;
top: 1.4rem;
right: 0;
padding: 0 1.8rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
}
}
}
}
.design_detail_perview{
width: 100%;
height: 100%;
padding: 0.7rem 0 0.6rem;
&.design_detail_perview_second{
width: 100%;
height: 100%;
padding: 0.7rem 9.1rem 0.6rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.design_detail_perview_content{
width: 46.2rem;
height: 100%;
background: #fff;
position: relative;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
.perview_img{
max-width: 100%;
max-height: 100%;
}
.generate_button{
position: absolute;
top: 0;
right: -20.2rem;
padding: 0 1.5rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
}
&:hover .img_item_hover{
display: block;
}
.img_item_hover{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
background: rgba(0,0,0,0.4);
display: none;
.img_operate_block{
width: 3.6rem;
height: 3.6rem;
background: rgba(0,0,0,0.6);
border-radius: 50%;
position: absolute;
right: 2.2rem;
text-align: center;
line-height: 3.6rem;
cursor: pointer;
&.delete_img_block{
top: 2rem;
}
.operate_icon{
font-size: 1.8rem;
color: #fff;
}
}
}
}
}
}
</style>

848
src/component/Detail/DesignPrintOperation.vue Normal file
View File

@@ -0,0 +1,848 @@
<template>
<div>
<a-modal
class="designOpenrtion_modal"
v-model:visible="designOpenrtion"
:footer="null"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="false"
>
<div class="designOpenrtion_content">
<div class="design_title_text">
<div>Placement</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="designOpenrtion_open">
<!-- -->
<div class="print_right">
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
Overal
</div>
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
<div
class="habit_Overal_Single_text"
:class="{ active: overallSingle }"
>
Single
</div>
</div>
<div class="habit_System_Designer">
<a-slider id="system_silder"
v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
>
</a-slider>
</div>
<div v-show="current.printObject.ifSingle" @click="random" class="button_second">Random</div>
<div v-show="current.printObject.ifSingle" class="print_input">
<input class="search_input" placeholder="Please input" type="Number" v-model="printAmount" @input="setprintAmount">
</div>
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-show="current.printObject.ifSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
<img :src="item.url" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_overall" v-show="!current.printObject.ifSingle">
<img :src="designOpenrtionList[0].url">
</div>
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">preview</div>
</div>
</div>
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask" :style="sketch">
<div class="designOpenrtion_print">
<div
v-for="item,index in designOpenrtionList"
:key="item"
:style="[printStyleList[index].style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.url" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
</div>
</div>
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<div class="designOpenrtion_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :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>
</ul>
</div>
</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 { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup(prop) {
let designOpenrtion = ref(false);
let designOpenrtionList = ref([])
let current = inject('current')//父组件传过来的数据
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
let printAmount = ref(1)//印花数量
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([{
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
}]);
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let print = ref({
width:'',
height:''
})
let sketch = ref({
width:'',
height:''
})
let loadingShow = ref(false)
return {
designOpenrtion,
designOpenrtionList,
overallSingle,
systemDesignerPercentage,
current,
printAmount,
printZIndex,
printStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
print,
sketch,
loadingShow,
};
},
data() {
return {
store: useStore(),
};
},
directives:{
//操作旋转
rotote:{
mounted(el,value){
let mouse = true;
let angle = 0
let num = 1
let x = 0
let y = 0
num = value.value[1].scale
angle = value.value[1].rotateZ
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.value[0]]
// 添加鼠标按下事件监听器
el.style.transform = "rotateZ("+ angle + "deg)"
el.addEventListener('mousedown', (e) => {
// 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;
document.addEventListener('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 = "rotateZ("+ angle + "deg)"
}
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
});
});
//缩放
// let timeSwitch = true
// el.parentNode.addEventListener('mousemove', (e) => {
// el.parentNode.addEventListener('mousewheel',(e) => {
// if(timeSwitch){
// timeSwitch = false
// if(e.deltaY > 0){
// if(num <= 1){
// num -= 0.05
// }else{
// num -= 0.1
// }
// }else{
// //放大
// if(num <= 1){
// num += 0.05
// }else{
// num += 0.1
// }
// }
// if(num >= 3){
// num = 3
// }else if (num < .2){
// num = .2
// }
// setTimeout(() => {
// timeSwitch = true
// }, 100);
// elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
// console.log(num);
// }
// });
// });
}
},
},
methods: {
init(){
let DesignPrintOperationParent = this.$parent
this.designOpenrtion = true
this.clearModal()
this.designOpenrtionList.push(this.current.printObject)
this.overallSingle = DesignPrintOperationParent.overallSingle
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
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'
}
let print = new Image
print.src = this.current.printObject.url
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'
}
},
systemDesigner(num) {
this.current.printObject.scale = num
},
setOveralSingle(){
},
formatter(value) {
return `${value}%`;
},
setOveralSingle(){
this.current.printObject.ifSingle = this.overallSingle
if (!this.current.printObject.ifSingle) {
this.printAmount = 1
this.setprintAmount()
}
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
},
//设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDom = document.getElementsByClassName('designOpenrtion_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].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
scale:scale,
rotateZ:rotateZ,
}
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('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 = {
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
}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('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0].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
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[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'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
}
},
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 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*num+'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*num+'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);
},
setprintAmount(){
if(this.printAmount < 1){
this.printAmount = 1
return
}
if(this.printAmount > 10){
this.printAmount = 10
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(this.printStyleList[this.printStyleList.length-1])
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject)
}
}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
},
random(){
this.printStyleList.forEach((v,index)=>{
this.refetchTemplate(index)
})
},
//随机重置图片顺序
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('designOpenrtion_sketch')[0]
console.log(sketch.offsetHeight);
let x = sketch.width-Number(this.print.width.replace(/px/g,''))
let y = sketch.height-Number(this.print.height.replace(/px/g,''))
this.printStyleList[index]={
centers:{
left:0,
top:0,
},
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++
},
transform:{
// scale:scale<.2?.2:scale,//0.2-3
rotateZ:rotateZ1-rotateZ2,
},
designOpenrtionBtn:false
}
},
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
}
})
let priority = designItemDetail.clothes.map((v)=>{
return v.type
})
// let
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
// this.loadingShow = true
// Https.axiosPost(Https.httpUrls.designSingle, data).then(
// (rv) => {
// // this.parentData.design.designItemUrl = rv.designItemUrl
// // this.$emit('finishRedesign',this.parentData)
// // this.closeModal()
// let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
// console.log(designItemDetail);
// this.loadingShow = false
// // this.closeModal()
// console.log(rv);
// }
// ).catch(res=>{
// this.loadingShow = false
// });
},
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
}
},
closeModal(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let _this = this
Modal.confirm({
title: 'The above changes are not saved, being sure to continue? ',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
onOk() {
_this.designOpenrtion=false
}
});
},
},
});
</script>
<style lang="less">
.designOpenrtion_modal {
max-width: 1440px;
.ant-modal-body{
padding: 4rem 5rem 0rem!important;
// height: calc(65vh - 6.4rem);
height: 65rem;
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: 1rem;
overflow: hidden;
}
.designOpenrtion_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
display: flex;
flex-direction: column;
height: 100%;
.designOpenrtion_header {
position: relative;
height: 6.6rem;
width: 100%;
background: #F7F7F7;
.placement_modal_title{
position: absolute;
height: 100%;
line-height: 6.6rem;
left: 3.7rem;
top: 0;
font-size: 1.8rem;
color: #030303;
}
}
.designOpenrtion_open{
position: absolute;
top: 50%;
transform: translateY(-50%);
.print_right{
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
padding: 2rem 0;
width: 16rem;
border-radius: 1rem;
.habit_Overal_Single {
display: flex;
align-items: center;
justify-content: center;
// margin: 2rem 0;
transform: scale(.8);
// margin: 3rem 0;
.habit_Overal_Single_text {
font-weight: 600;
color: rgba(0, 0, 0, 0.5);
&.active {
color: rgba(0, 0, 0, 0.7);
// font-weight: 900;
transform: scale(1.2);
}
}
.ant-switch {
margin: 0 1rem;
background-color: #efefef;
}
.ant-switch-checked {
background-color: #000;
}
}
.habit_System_Designer {
margin-top: 4rem;
transform: scale(.8);
width: 100%;
.ant-slider-track,
.ant-slider-rail {
height: .6rem;
background-color: #e1e1e1;
border-radius: 0.5rem;
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
background-color: #2d2e76 !important;
border: none !important;
}
.ant-slider-handle:hover{
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
}
.button_second{
margin-top: 1rem;
}
.print_input{
margin-top: 1rem;
.search_input{
width: 9.85rem;
padding: 0 1.5rem;
border: 2px solid #000;
font-size: 1.2rem;
font-weight: 400;
height: 3rem;
border-radius: 1.5rem;
&::placeholder {
color: #C2C2C2;
}
}
}
.designOpenrtion_nav{
display: flex;
margin-top: 2rem;
flex-wrap: wrap;
width: 100%;
height: 10rem;
overflow-x: hidden;
justify-content: space-evenly;
&.designOpenrtion_nav::-webkit-scrollbar {
display: none;
}
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
.designOpenrtion_single{
width: 40%;
}
img{
width: 100%;
cursor: pointer;
}
.designOpenrtion_overall{
width: 80%;
}
}
}
}
.designOpenrtion_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%);
&.active{
flex-direction: row;
}
.designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
>img{
z-index: 2;
position: relative;
max-width: 100%;
max-height: 100%;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.designOpenrtion_print{
z-index: 1;
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designOpenrtion_btn{
z-index: 3;
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;
li{
cursor: pointer;
// border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designOpenrtion_btn_top{
top: 0;
}
.designOpenrtion_btn_bottom{
top: 100%;
}
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designOpenrtion_btn_left{
left: 0;
}
.designOpenrtion_btn_right{
left: 100%;
}
.designOpenrtion_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designOpenrtion_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin: 1rem 0;
width: 10rem;
text-align: center;
position: initial;
transform: none;
}
}
}
</style>

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

@@ -1,41 +1,51 @@
<template> <template>
<div class="habit"> <div class="habit">
<div class="habit_button" @click="habitBtn" > <div v-show="openType.habit" class="habit_mask"></div>
<div class="habit_button" @click.stop="setOpenType('habit')" >
Workspace Workspace
<i class="fi fi-bs-angle-down"></i> <i class="fi fi-bs-angle-down"></i>
</div> </div>
<div class="habit_content" v-fade="openType.habit">
<div class="habit_content" v-fade="habit">
<div class="habit_title"> <div class="habit_title">
<h3 class="" @click="aaa()">Workspace Setting</h3> <h3>Workspace Setting</h3>
<div class="habit_intro">adjust your workspace setting</div> <div class="habit_intro">adjust your workspace setting</div>
</div> </div>
<div class="habit_type" trigger="['click']"> <div class="habit_type" trigger="['click']" >
<a-dropdown placement="bottomRight"> <a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1"> 上衣 </a-menu-item>
<a-menu-item key="2"> 裤子 </a-menu-item>
</a-menu>
</template>
<a-button> <a-button>
<UserOutlined /> <UserOutlined />
{{habitType.habitTypeone}} {{workspaceItem.workSpaceName}}
<DownOutlined /> <DownOutlined />
</a-button> </a-button>
</a-dropdown> </a-dropdown>
<div class="habit_model_show habit_workspace_show" v-fade="openType.workspace">
<ul class="habit_model_list">
<li v-for="item,index in workspace.workspaceList">
<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.name }}</div>
<input v-show="item.putName" type="text" v-model="workspaceItemName">
<i @click.stop="putName(index,'put')" v-show="!item.putName" class="fi fi-rr-edit"></i>
<i @click.stop="putName(index,'affirm')" v-show="item.putName" class="fi fi-br-check"></i>
<i @click.stop="putName(index,'delete')" class="fi fi-rr-trash"></i>
</li>
<li @click="newWorkspace" class="newWorkspace">
<input v-show="openType.addWorkspace" type="text" v-model="workspaceItemName">
<i @click.stop="putName(-1,'affirm')" v-show="openType.addWorkspace" class="fi fi-br-check"></i>
<div v-show="!openType.addWorkspace">+</div>
</li>
</ul>
</div>
</div> </div>
<div class="habit_Overal_Single"> <div class="habit_Overal_Single">
<div <div
class="habit_Overal_Single_text" class="habit_Overal_Single_text"
:class="{ active: !checked }" :class="{ active: !workspaceItem.sexType }"
> >
男 男
</div> </div>
<a-switch v-model:checked="checked" /> <a-switch @change="setSex" v-model:checked="workspaceItem.sexType" />
<div <div
class="habit_Overal_Single_text" class="habit_Overal_Single_text"
:class="{ active: checked }" :class="{ active: workspaceItem.sexType }"
> >
女 女
</div> </div>
@@ -43,36 +53,37 @@
<div class="habit_Overal_Single"> <div class="habit_Overal_Single">
<div <div
class="habit_Overal_Single_text" class="habit_Overal_Single_text"
:class="{ active: !checked }" :class="{ active: !workspaceItem.overallSingle }"
> >
Overal Overal
</div> </div>
<a-switch v-model:checked="checked" /> <a-switch @change="setOverall" v-model:checked="workspaceItem.overallSingle" />
<div <div
class="habit_Overal_Single_text" class="habit_Overal_Single_text"
:class="{ active: checked }" :class="{ active: workspaceItem.overallSingle }"
> >
Single Single
</div> </div>
</div> </div>
<div class="habit_habit_singleton" v-show="checked"> <div class="habit_habit_singleton" v-show="!workspaceItem.overallSingle">
<a-dropdown > <a-dropdown @click.stop="setOpenType('singleton')">
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1"> 上衣 </a-menu-item>
<a-menu-item key="2"> 裤子 </a-menu-item>
</a-menu>
</template>
<a-button> <a-button>
<UserOutlined /> <UserOutlined />
{{ workspace.position }} {{ workspaceItem.position }}
<DownOutlined /> <DownOutlined />
</a-button> </a-button>
</a-dropdown> </a-dropdown>
<div class="habit_model_show habit_singleton_show" v-fade="openType.singleton">
<ul class="habit_model_list">
<li v-for="item,index in singleTypeList">
<div @click.stop="setSingle(item.value)">{{ item.label }}</div>
</li>
</ul>
</div>
</div> </div>
<div class="habit_System_Designer"> <div class="habit_System_Designer">
<a-slider id="system_silder" <a-slider id="system_silder"
v-model:value="workspace.systemDesignerPercentage" v-model:value="workspaceItem.systemDesignerPercentage"
@afterChange="systemDesigner" @afterChange="systemDesigner"
:tip-formatter="formatter" :tip-formatter="formatter"
> >
@@ -85,7 +96,7 @@
<div class="habit_model"> <div class="habit_model">
<a-dropdown placement="bottomRight" <a-dropdown placement="bottomRight"
trigger="['click']" trigger="['click']"
@click="modelBtn" @click.stop="setOpenType('model')"
> >
<a-button> <a-button>
<UserOutlined /> <UserOutlined />
@@ -94,7 +105,7 @@
</a-button> </a-button>
</a-dropdown> </a-dropdown>
</div> </div>
<div id="modelShow" class="habit_model_show" v-fade="model"> <div id="modelShow" class="habit_model_show" v-fade="openType.model">
<div class="habit_btn"> <div class="habit_btn">
<div class="model_current"> <div class="model_current">
<div class="model_text">Current</div> <div class="model_text">Current</div>
@@ -106,20 +117,20 @@
<div class="model_text"> <div class="model_text">
<div <div
class="habit_System_Seleves_text" class="habit_System_Seleves_text"
:class="{ active: !checked }" :class="{ active: systemSeleves }"
> >
System System
</div> </div>
<a-switch v-model:checked="checked" /> <a-switch @change="setSystemSeleves" v-model:checked="systemSeleves" />
<div <div
class="habit_System_Seleves_text" class="habit_System_Seleves_text"
:class="{ active: checked }" :class="{ active: !systemSeleves }"
> >
Seleves Seleves
</div> </div>
</div> </div>
<div class="model_img"> <div class="model_img">
<div v-for="(item,index) in checked?obj:obj2" :key="item.id"> <div v-for="(item,index) in systemSeleves?workspaceItem.system:workspaceItem.seleves" :key="item.id">
<img :src="item.url" alt=""> <img :src="item.url" alt="">
</div> </div>
</div> </div>
@@ -128,104 +139,192 @@
</div> </div>
</div> </div>
<!-- <ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal> -->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useStore } from "vuex";
import { defineComponent, createVNode, ref,Ref} from "vue"; import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue"; import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import type { MenuProps } from "ant-design-vue"; import type { MenuProps } from "ant-design-vue";
import axios from "axios"; import ModelsModal from "@/component/LibraryPage/ModelsModal.vue";
import { message,Upload} from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
components: { components: {
DownOutlined, DownOutlined,
UserOutlined, UserOutlined,
ModelsModal,
}, },
setup(){ setup(){
let workspace = ref({ let workspaceItem = ref({
sex:'male', id:1,
name:"工作台2",
putName:false,
systemDesignerPercentage:30, systemDesignerPercentage:30,
position:'top' position:'top',
sex:'male',
sexType:false,
overallSingle:false,
current:{
})
let checked:any= ref(true);
let value = ref<number>(30);
let tooltip = ref(true);
let habit = ref(false);
let model = ref(false);
let habitType = ref({
habitTypeone:"Workspace Setting",
habitTypeList:[
{
id:1,
name:"11111"
}, },
{ system:[{
id:2,
name:"222"
},
{
id:2,
name:"333"
},
],
});
let obj= ref([
{
id:1, id:1,
url:"11111" url:"11111"
}, },
{ {
id:2, id:2,
url:"11111" url:"11111"
}, }],
]); seleves:[{
let obj2= ref([
{
id:1, id:1,
url:"22" url:"22"
}, },
{ {
id:2, id:2,
url:"222" url:"222"
}],
})
let systemSeleves= ref(true);
let openType = ref({
workspace:false,
singleton:false,
habit:false,
model:false,
addWorkspace:false,
})
let workspace = ref({
id:'2',
workspaceList:[
{
id:1,
name:"工作台2",
putName:false,
systemDesignerPercentage:24,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
{
id:2,
name:"工作台3",
putName:false,
systemDesignerPercentage:23,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
{
id:3,
name:"工作台1",
putName:false,
systemDesignerPercentage:100,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
],
});
let workspaceItemName = ref('')//设置单独name公共使用
let singleTypeList = ref([
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
}, },
]) ])
// const stringg = ref()
const habitTypeclick : MenuProps['onClick'] = (e)=>{
// this.habitType.habitTypeone = e
}
// const stringg:Ref<HTMLElement | null> = ref(null)
// const aaa = ()=>{
// if(stringg.value){
// console.log(stringg.value.classList)
// }
// }
return{ return{
habitTypeclick, systemSeleves,
checked, openType,
value, workspace,
tooltip, workspaceItem,
habit, workspaceItemName,
model, singleTypeList
habitType, }
obj, },
obj2, watch:{
workspace 'openType.habit':{
handler(newVal:any,oldVal:any){
console.log(newVal);
// this.store.state.Workspace.workspace
if(!newVal){
this.store.commit("setWoekspace", this.workspaceItem);
}
}
},
'workspaceItem.id':{
handler(newVal:any,oldVal:any){
console.log(newVal);
// this.store.state.Workspace.workspace
// if(!newVal){
// this.store.commit("setWoekspace", this.workspaceItem);
// }
this.workspace.workspaceList = this.workspace.workspaceList
}
},
workspaceItem:{
handler(newVal:any,oldVal:any){
console.log(123123);
// this.store.state.Workspace.workspace
}
} }
}, },
data() { data() {
return { return {
store: useStore(),
}; };
}, },
mounted() { mounted() {
this.getworkspace()
}, },
directives:{ directives:{
fade:{ fade:{
mounted (el) {
el.addEventListener('click',()=>{
})
},
updated (el,model){ updated (el,model){
if(model.value){ if(model.value){
el.style.display="block" el.style.display="block"
@@ -243,38 +342,154 @@ export default defineComponent({
}, },
methods: { methods: {
getworkspace(){ getworkspace(){
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => { console.log(123);
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
// if (rv) {
// console.log(rv,'workspace');
// }
// })
// let url = Https.httpUrls.workspaceList + `?page=0&size=10`
// Https.axiosGet(url).then(
// (rv: any) => {
// console.log(rv);
// }
// ).catch(rv=>{
// })
let data = {
page:1,
size:10,
}
Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
if (rv) { if (rv) {
console.log(rv,'workspace'); console.log(rv,'workspace');
this.workspace.workspaceList = rv.page.content
this.workspace.workspaceList.forEach((rv:any)=>{
if(rv.sex == '男装'){
rv.sexType == true
}else{
rv.sexType == false
}
})
} }
}) })
}, },
handleButtonClick(e: Event) { setSex(){
if(this.workspaceItem.sexType){
console.log("click left button", e); this.workspaceItem.sex = 'female'
}else{
this.workspaceItem.sex = 'male'
}
}, },
handleMenuClick(e: Event) { setOverall(){
// console.log("click", e); if(this.workspaceItem.sexType){
this.getworkspace() this.workspaceItem.sex = 'female'
}else{
this.workspaceItem.sex = 'male'
}
}, },
systemDesigner(num: Number) { //修改名字
console.log(num); putName(index:number,v:string){
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
if(v == 'put'){
this.workspaceItemName = this.workspace.workspaceList[index].name
this.workspace.workspaceList[index].putName = true
}else if (v == 'delete'){
this.workspace.workspaceList.splice(index,1)
}else{
if(this.workspaceItemName == ''){
message.error('Please enter a workbench name');
}else{
if(index == -1){
this.workspace.workspaceList.push(this.workspaceItem)
this.workspaceItem.id = 2
this.workspaceItem.name = this.workspaceItemName
this.openType.addWorkspace = false
}else{
console.log(this.workspaceItemName,this.workspaceItem);
this.workspace.workspaceList[index].name = this.workspaceItemName
this.workspace.workspaceList[index].putName = false
}
}
}
},
//设置系统设计占比
systemDesigner(num: number) {
this.workspaceItem.systemDesignerPercentage = num
}, },
formatter(value: number) { formatter(value: number) {
return `${value}%`; return `${value}%`;
}, },
habitBtn(){
this.habit = !this.habit //根据id设置当前参数
if(!this.habit){ setWorkspace(num:number){
this.model = false this.openType.addWorkspace = false
console.log(this.habit); this.workspace.workspaceList.forEach(v => {
v.putName = false
});
this.workspace.workspaceList.forEach((v:any)=>{
if(v.id == num){
this.workspaceItem = v
} }
})
this.openType.workspace = false
}, },
modelBtn(){ //新建参数
this.model = !this.model newWorkspace(){
this.openType.addWorkspace = true
}, },
//设置single & overall
setSingle(v:string){
this.openType.singleton = false
this.workspaceItem.position = v
},
//切换系统还是自己的模特
setSystemSeleves(){
},
setOpenType(v:string){
if(v == 'habit'){
this.openType.habit = !this.openType.habit
}else if(v == 'workspace'){
this.openType.singleton = false
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
this.openType.workspace = !this.openType.workspace
}else if(v == 'model'){
this.openType.singleton = false
this.openType.workspace = false
this.openType.model = !this.openType.model
}else if(v == 'singleton'){
this.openType.singleton = !this.openType.singleton
this.openType.workspace = false
}
let mask = document.getElementsByClassName("habit_mask")[0]
mask.addEventListener("click", this.documentClick,true);
},
documentClick(){
let mask = document.getElementsByClassName("habit_mask")[0]
mask.removeEventListener("click", this.documentClick);
this.openType.habit = false
this.openType.workspace = false
this.openType.model = false
this.openType.singleton = false
},
// //选择模特
// selectModels() {
// let modelsModal: any = this.$refs.modelsModal;
// modelsModal.init();
// },
// //确定选择模特
// sureSelectModel(event: any) {
// this.store.commit("setTemplateData", event);
// },
}, },
}); });
</script> </script>
@@ -292,12 +507,24 @@ export default defineComponent({
padding: .4rem 1.5rem; padding: .4rem 1.5rem;
font-size: 1.2rem; font-size: 1.2rem;
cursor: pointer; cursor: pointer;
position: relative;
.fi-bs-angle-down { .fi-bs-angle-down {
margin-left: 1rem; margin-left: 1rem;
display: inline-block; display: inline-block;
transform: translateY(2px); transform: translateY(2px);
} }
} }
.habit_mask{
position: absolute;
top: -20px;
left: auto;
right: -30px;
bottom: 0;
// background: #000;
opacity: 0;
width: 100vw;
height: 100vh;
}
.habit_content { .habit_content {
border: solid 2px #000; border: solid 2px #000;
border-radius: 1rem; border-radius: 1rem;
@@ -333,12 +560,19 @@ export default defineComponent({
} }
.habit_type { .habit_type {
margin-top: 1.5rem; margin-top: 1.5rem;
// cursor: pointer; cursor: pointer;
button{ position: relative;
.habit_workspace_show{
width: 100%;
z-index: 1;
transform: translateY(10%);
top: 4rem;
height: 14rem;
overflow-x: hidden;
cursor: auto; cursor: auto;
&.active{
transform: translateY(0%);
} }
button:hover{
color: rgba(0, 0, 0, 0.5);
} }
} }
.habit_Overal_Single { .habit_Overal_Single {
@@ -361,6 +595,19 @@ export default defineComponent({
} }
.habit_habit_singleton { .habit_habit_singleton {
margin-bottom: 3rem; margin-bottom: 3rem;
position: relative;
.habit_singleton_show{
width: 100%;
z-index: 1;
transform: translateY(10%);
top: 4rem;
height: 14rem;
overflow-x: hidden;
cursor: auto;
&.active{
transform: translateY(0%);
}
}
} }
.habit_System_Designer { .habit_System_Designer {
margin-top: 8rem; margin-top: 8rem;
@@ -388,7 +635,6 @@ export default defineComponent({
} }
.habit_model{ .habit_model{
margin-top: 2rem; margin-top: 2rem;
} }
.habit_model_show{ .habit_model_show{
@@ -412,6 +658,49 @@ export default defineComponent({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.habit_model_list{
margin: 0;
li{
padding: .5rem 0;
display: flex;
input{
border: 0;
width: 80%;
background: rgba(0,0,0,0);
}
>div{
cursor: pointer;
width: 80%;
}
&.newWorkspace{
text-align: center;
justify-content: center;
div{
border-radius: 50%;
border: 1px solid #000;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
}
i{
flex: 1;
}
}
i{
cursor: pointer;
}
.fi-rr-trash{
margin-left: 1rem;
}
}
li:hover{
background: rgba(0, 0, 0, 0.1);
}
}
.model_Designer{ .model_Designer{
.model_text{ .model_text{
display: flex; display: flex;

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

@@ -168,6 +168,9 @@ export default defineComponent({
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1, a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
} }
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
}
return data return data
} }
}, },
@@ -233,12 +236,12 @@ export default defineComponent({
selectColorItem(index,color){ selectColorItem(index,color){
let hex let hex
if(color.r){ if(color.r){
hex = this.rgbaToHex([color.r,color.g,color.b]) hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
}else{ }else{
hex = '#FFFFFF' hex = '#FFFFFF'
} }
this.selectIndex = index this.selectIndex = index
this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1},hex:hex} : {hex:''} this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} : {hex:''}
this.fileList = [] this.fileList = []
this.tcxColor = '' this.tcxColor = ''
this.pantongName = '' this.pantongName = ''
@@ -256,7 +259,7 @@ export default defineComponent({
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{ Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
if(rv && rv.name){ if(rv && rv.name){
// let hex = this.rgbaToHex([color.r,color.g,color.b]) // let hex = this.rgbaToHex([color.r,color.g,color.b])
let hex = this.rgbaToHex([rv.r,rv.g,rv.b]) let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a?rv.a:1])
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''} this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
this.selectColor = this.reviewColor this.selectColor = this.reviewColor
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b} this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
@@ -326,9 +329,14 @@ export default defineComponent({
}, },
rgbaToHex(rgba) { // rgba转16进制 rgbaToHex(rgba) { // rgba转16进制
let hex = '#'; let hex = '#';
for (const i of rgba) { rgba.forEach((i,index) => {
if(index == 3){
hex += Math.round(i * 255).toString(16)
}else{
hex += Number(i).toString(16).padStart(2, '0'); hex += Number(i).toString(16).padStart(2, '0');
} }
});
return hex; return hex;
}, },
setUplpadColor(color){ setUplpadColor(color){
@@ -393,7 +401,6 @@ export default defineComponent({
rv.forEach(element => { rv.forEach(element => {
this.pantongNameList.push(element.name) this.pantongNameList.push(element.name)
}); });
console.log(rv);
} }
} }
).catch(res=>{ ).catch(res=>{
@@ -414,10 +421,13 @@ export default defineComponent({
recollection(){ recollection(){
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
let hex
colorList.forEach((ele, index) => { colorList.forEach((ele, index) => {
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
this.colorList[index] = ele.rgbValue this.colorList[index] = ele.rgbValue
}); });
this.selectColor = {rgba:this.colorList[0]}, //顔色选择器默认颜色 this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
this.store.commit('setColorboardList',colorList) this.store.commit('setColorboardList',colorList)
}, },

46
src/component/HomePage/Cropper.vue
View File

@@ -2,17 +2,21 @@
<a-modal class="modal_component cut_pricture_modal" <a-modal class="modal_component cut_pricture_modal"
v-model:visible="cutPicuterModal" v-model:visible="cutPicuterModal"
:footer="null" :footer="null"
title="Cut picture" width="80%"
width="115rem"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false"
> >
<template #closeIcon> <div class="collection_title">
<div class="collection_title_text">
<div>Cut picture</div>
</div>
<div class="header_right_block" @click.stop=""> <div class="header_right_block" @click.stop="">
<div class="next_step_button" @click.stop="finishCropper()">Finish</div> <div class="next_step_button" @click.stop="finishCropper()">Finish</div>
<div class="header_cancel_button" @click.stop="cancleCropper()">Cancel</div> <div class="header_cancel_button" @click.stop="cancleCropper()">Cancel</div>
</div> </div>
</template> </div>
<div class="collection_modal_body"> <div class="collection_modal_body">
<div class="cut_picture_left"> <div class="cut_picture_left">
<div class="cut_picture_body"> <div class="cut_picture_body">
@@ -153,6 +157,25 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.cut_pricture_modal{ .cut_pricture_modal{
max-width: 1150px ;
.collection_title{
position: absolute;
width: calc(100% - 10rem);
top: 4rem;
display: flex;
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: 4rem;
}
.collection_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.header_right_block{ .header_right_block{
display: flex; display: flex;
align-items: center; align-items: center;
@@ -163,10 +186,12 @@ export default defineComponent({
.next_step_button{ .next_step_button{
padding: 0 1.2rem; padding: 0 1.2rem;
height: 3.2rem; height: 3.2rem;
background: linear-gradient(160deg, #AC2A3B, #292161); // background: linear-gradient(160deg, #AC2A3B, #292161);
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
border-radius: 1.6rem; border-radius: 1.6rem;
font-size: 1.4rem; font-size: 1.4rem;
color: #FFFFFF; color: #000;
line-height: 3.2rem; line-height: 3.2rem;
margin-right: 1.6rem; margin-right: 1.6rem;
white-space: nowrap; white-space: nowrap;
@@ -188,9 +213,9 @@ export default defineComponent({
.collection_modal_body{ .collection_modal_body{
height: 100%; height: 100%;
padding: 1rem 2.5rem 1.4rem 1.4rem; // padding: 1rem 2.5rem 1.4rem 1.4rem;
box-sizing: border-box; box-sizing: border-box;
background: #F2F3FB; // background: #F2F3FB;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -204,7 +229,8 @@ export default defineComponent({
.cut_picture_body{ .cut_picture_body{
width: 100%; width: 100%;
height: 53rem; height: 40rem;
// height: 53rem;
background: yellow; background: yellow;
} }
@@ -279,7 +305,7 @@ export default defineComponent({
.cut_picture_review_block{ .cut_picture_review_block{
width: 100%; width: 100%;
padding: 0 2rem; padding: 0 2rem;
height: calc(100% - 5.8rem); height: calc(100% - 6.8rem);
.cut_picture_review_item{ .cut_picture_review_item{
width: 100%; width: 100%;

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="generate"> <div class="generate">
<div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'" class="generate_checkbox"> <div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'" class="generate_checkbox">
<div> <div>
<label> <label>
<input <input
@@ -37,11 +37,11 @@
class="search_input" class="search_input"
placeholder="Promopt input" placeholder="Promopt input"
v-model="searchPictureName" v-model="searchPictureName"
@keydown.enter="getLibraryList()" @keydown.enter="getgenerate()"
/> />
<div class="generage_btn started_btn">Generate</div> <div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
</div> </div>
<div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'" class="generage_img"> <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img">
<div class="upload_item"> <div class="upload_item">
<div <div
class="upload_file_item" class="upload_file_item"
@@ -61,7 +61,7 @@
v-show="file?.status === 'done'" v-show="file?.status === 'done'"
> >
<img :src="file?.imgUrl" class="upload_img" /> <img :src="file?.imgUrl" class="upload_img" />
<div class="operate_file_block"> <div v-if="type_.type2 == 'Sketchboard'" class="operate_file_block">
<div class="select_img_type"> <div class="select_img_type">
<div <div
class="select_category" class="select_category"
@@ -148,6 +148,13 @@
:class="{ active: item?.checked }" :class="{ active: item?.checked }"
> >
<img v-lazy="item.imgUrl" alt="" /> <img v-lazy="item.imgUrl" alt="" />
<div
class="delete_like_file_block"
@click.stop="likeFile(item)"
>
<i v-if="item" class="fi fi-rr-heart"></i>
<i v-else class="fi fi-sr-heart"></i>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -308,6 +315,7 @@ export default defineComponent({
methods: { methods: {
generageAdd(data: any) { generageAdd(data: any) {
data.type_ = this.type_; data.type_ = this.type_;
data.resData = JSON.parse(JSON.stringify(data))
this.store.commit("addGenerateMaterialFils", data); this.store.commit("addGenerateMaterialFils", data);
}, },
beforeUpload(file: any) { beforeUpload(file: any) {
@@ -341,24 +349,27 @@ export default defineComponent({
} }
}) })
}, },
getLibraryList() { getgenerate(){
// let data = { let data = {
// level1Type: this.selectCode, generateType:'',
// level2Type: this.designType, designType:'',
// page: this.currentPage, collectionElementId:'',
// pictureName: this.searchPictureName, level1Type:this.upload.level1Type,
// size: this.pageSize, level2Type:'',
// }; text:this.searchPictureName,
// this.isShowLoading = true; timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// Https.axiosPost(Https.httpUrls.queryLibraryPage, data) version:1,//为1就是Print
// .then((rv: any) => { }
// this.imgList = rv.content; Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
// this.total = rv.total; (rv) => {
// this.isShowLoading = false; // if(rv){
// })
// .catch((res) => { // }
// this.isShowLoading = false; console.log(rv);
// });
}
).catch(res=>{
});
}, },
fileUploadChange(data: any) { fileUploadChange(data: any) {
let file = data.file; let file = data.file;
@@ -377,9 +388,7 @@ export default defineComponent({
if (arr.length >= 8) { if (arr.length >= 8) {
message.error("You can select up to 8 images"); message.error("You can select up to 8 images");
} else { } else {
// this.store.commit("setSketchboardFile", fileList);
this.sketchboardList = fileList this.sketchboardList = fileList
// this.store.commit("clearMoodTemplateId");
} }
} else if (file.status === "error") { } else if (file.status === "error") {
let index = -1; let index = -1;
@@ -444,7 +453,9 @@ export default defineComponent({
this.sketchboardList.splice(moodboard, 1); this.sketchboardList.splice(moodboard, 1);
this.store.commit("setSketchboardFile", this.sketchboardList); this.store.commit("setSketchboardFile", this.sketchboardList);
} }
this.store.commit("clearMoodTemplateId"); },
likeFile(item:any){
}, },
closeModal() { closeModal() {
// this.myMaterialModalShow = false // this.myMaterialModalShow = false
@@ -462,7 +473,8 @@ export default defineComponent({
</script> </script>
<style lang="less"> <style lang="less">
.generate { .generate {
height: 30rem; flex: 1;
// height: 30rem;
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
&.generate::-webkit-scrollbar { &.generate::-webkit-scrollbar {
@@ -505,6 +517,7 @@ export default defineComponent({
.generage_img_item { .generage_img_item {
cursor: pointer; cursor: pointer;
margin: 0 2rem 2rem 0; margin: 0 2rem 2rem 0;
position: relative;
&.active { &.active {
opacity: 0.5; opacity: 0.5;
// border: 2px solid; // border: 2px solid;
@@ -512,11 +525,40 @@ export default defineComponent({
img { img {
transform: scale(0.9); transform: scale(0.9);
} }
.delete_like_file_block{
pointer-events:none;
}
} }
img { img {
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
} }
.delete_like_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
i{
font-size: 1.6rem;
color: #fff;
&.fi-rr-heart{
}
&.fi-sr-heart{
color: red;
}
}
}
&:hover .delete_like_file_block{
display: block;
}
} }
.upload_item { .upload_item {
.upload_file_item { .upload_file_item {
@@ -525,6 +567,9 @@ export default defineComponent({
// border: 2px solid; // border: 2px solid;
border-radius: 1rem; border-radius: 1rem;
transform: scale(0.9); transform: scale(0.9);
.delete_file_block{
pointer-events:none;
}
img { img {
} }
} }
@@ -568,84 +613,6 @@ export default defineComponent({
&:hover .delete_file_block { &:hover .delete_file_block {
display: block; display: block;
} }
.operate_file_block {
width: 100%;
height: 3rem;
font-size: 1.6rem;
color: #ffffff;
position: absolute;
left: 0;
bottom: 0;
.select_img_type {
height: 100%;
line-height: 3rem;
text-align: center;
background: rgba(0, 0, 0, 0.6);
position: relative;
.select_category {
display: flex;
align-items: center;
justify-content: center;
.icon-xiala {
margin-left: 0.8rem;
}
}
.icon_rotate {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.category_list {
position: absolute;
width: 100%;
cursor: pointer;
position: absolute;
// top: 3.1rem;
margin-top: 0.2rem;
left: 0;
background: rgba(0, 0, 0, 0.4);
border: 1px solid #343579;
border-radius: 0.8rem;
// overflow: hidden;
z-index: 2;
height: 9rem;
overflow-x: hidden;
&.category_list::-webkit-scrollbar {
display: none;
}
.category_item {
text-align: left;
font-size: 1.4rem;
padding: 1rem 1.9rem;
line-height: 1.6rem;
&.select_category_item {
background: linear-gradient(
160deg,
#ac2a3b,
#292161
);
}
&:hover {
background: linear-gradient(
160deg,
#ac2a3b,
#292161
);
}
}
}
}
}
} }
} }
} }

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

@@ -17,49 +17,23 @@
</div> </div>
<div class="my_material_content"> <div class="my_material_content">
<!-- <div class="material_content_top">
<div class="material_content_top_title"></div>
<div class="material_content_top_right">
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
<a-select
ref="select"
v-model:value="designType"
:options="disignTypeList"
placeholder="All"
:allowClear="true"
@change="handleChange"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()" v-show="imgList.length">
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
<div>all</div>
</div>
</div>
</div> -->
<div class="material_content_body scroll_style"> <div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(file) in imgList" :key="file.id" :class="{active:type_.type2 !== 'Moodboard'}"> <div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
<div class="content_img_item_block" :class="{active:file?.checked}"> <img :src="item.imgUrl" @click.stop="selectImgItem(item)">
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/> <div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
<div class="operate_file_block" v-if="type_.type2 == 'Sketchboard'">
<div class="select_img_type"> <div class="select_img_type">
<div <div
class="select_category" class="select_category"
@click.stop="showFileCategory(file)" @click.stop="showFileCategory(item)"
> >
{{ getSketchLabel(file.category) }} {{ getSketchLabel(item.category) }}
<div <div
:class="[ :class="[
'icon', 'icon',
'iconfont', 'iconfont',
'icon-xiala', 'icon-xiala',
file.categoryShow item.categoryShow
? 'icon_rotate' ? 'icon_rotate'
: '', : '',
]" ]"
@@ -67,12 +41,12 @@
</div> </div>
<div <div
class="category_list" class="category_list"
v-show="file.categoryShow" v-show="item.categoryShow"
> >
<div <div
:class="[ :class="[
'category_item', 'category_item',
file.category == cate.value item.category == cate.value
? 'select_category_item' ? 'select_category_item'
: '', : '',
]" ]"
@@ -80,23 +54,16 @@
cate, index cate, index
) in disignTypeList" ) in disignTypeList"
:key="index" :key="index"
@click.stop=" @click.stop="selectFileCategory(item, cate)"
selectFileCategory(
file,
cate
)
"
> >
{{ cate.label }} {{ cate.label }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
</div> </div>
<div class="pin_block">
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
</div>
<!-- <div class="content_img_name">{{img.name}}</div> -->
</div> </div>
</div> </div>
@@ -120,7 +87,24 @@ export default defineComponent({
props: ["msg"], props: ["msg"],
setup(prop) { setup(prop) {
let myMaterialModalShow = ref(false) let myMaterialModalShow = ref(false)
let imgList = ref([]) let imgList = ref([
{
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
id_: 1,
},
{
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
id_: 2,
},
{
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
id_: 3,
},
{
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
id_: 4,
},
])
let store = useStore() let store = useStore()
let isShowLoading:any = ref(false) let isShowLoading:any = ref(false)
let selectCode:any = ref('') let selectCode:any = ref('')
@@ -152,12 +136,6 @@ export default defineComponent({
label: "Skirt", label: "Skirt",
}, },
] ]
let boardList = {
Moodboard:'Mood',
Printboard:'Print',
Sketchboard:'Sketch',
MarketingSketch:'MarketingSketch'
}
return{ return{
myMaterialModalShow, myMaterialModalShow,
imgList, imgList,
@@ -171,7 +149,6 @@ export default defineComponent({
searcMaterialhName, searcMaterialhName,
designType, designType,
disignTypeList, disignTypeList,
boardList,
} }
}, },
data (prop) { data (prop) {
@@ -218,10 +195,11 @@ export default defineComponent({
// this.selectImgListIds.splice(index,1) // this.selectImgListIds.splice(index,1)
// } // }
imgData.type_ = this.type_ imgData.type_ = this.type_
imgData.resData = JSON.parse(JSON.stringify(imgData))
this.store.commit("addGenerateMaterialFils", imgData); this.store.commit("addGenerateMaterialFils", imgData);
}, },
//改变页码 //改变页码
changePage(current: number, pageSize: number){ changePage(current: number, pageSize: number){
this.currentPage = current this.currentPage = current
@@ -304,6 +282,8 @@ export default defineComponent({
height: 30rem; height: 30rem;
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
flex: 1;
border-radius: 0;
&.my_material_modal::-webkit-scrollbar{display: none;} &.my_material_modal::-webkit-scrollbar{display: none;}
.ant-modal-close{ .ant-modal-close{
width: 3.6rem; width: 3.6rem;
@@ -337,6 +317,7 @@ export default defineComponent({
background-color: #fff; background-color: #fff;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2;
.my_material_header_right{ .my_material_header_right{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -391,7 +372,8 @@ export default defineComponent({
.my_material_content{ .my_material_content{
// padding: 0 3rem 3.5rem 3rem; // padding: 0 3rem 3.5rem 3rem;
padding: 0; padding: 0;
height: calc(100% - 6.6rem); // height: calc(100% - 6.6rem);
height: auto;
position: relative; position: relative;
.material_content_top{ .material_content_top{
@@ -460,53 +442,35 @@ export default defineComponent({
&.generate::-webkit-scrollbar{display: none;} &.generate::-webkit-scrollbar{display: none;}
.content_img_item{ .content_img_item{
margin: 0 2rem 5rem 0;
display: inline-block; display: inline-block;
vertical-align: top;
// padding: 0 1.4rem;
// margin-bottom: 2.8rem;
margin: 0 2rem 2rem 0;
padding: 0;
&.active{
height: 10rem;
margin: 0 2rem 4rem 0;
.pin_block{
display: block;
}
}
.pin_block{
display: none;
}
.content_img_item_block{
// border: 0.1rem solid transparent;
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
display: flex; border: 1px solid #f5f5f5;
align-items: center;
justify-content: center;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&.active{ padding: 0;
opacity: .5;
img{ img{
transform: scale(.9); object-fit: cover;
}
}
&.select_item_img{
// border-color: #343579;
}
.print_content_img{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&.moodb{
.content_img{ margin: 0 2rem 2rem 0;
max-width: 100%; }
max-height: 100%; &.active{
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
transform: scale(0.9);
img {
}
.pin_block{
pointer-events:none;
}
.operate_file_block{
pointer-events:none;
} }
} }
.content_img_name{ .content_img_name{
width: 16.5rem; width: 16.5rem;

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

@@ -94,7 +94,6 @@
<Material <Material
v-show="openClick == 2" v-show="openClick == 2"
ref="Material" ref="Material"
@confirmSelect="confirmSelect"
msg="Moodboard" msg="Moodboard"
></Material> ></Material>
<Generate <Generate
@@ -123,14 +122,17 @@
<div>Layout of selected moodboard</div> <div>Layout of selected moodboard</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div> <div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
</div> </div>
<div class="modal_img" :class="{active:flex_direction}"> <div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
<!-- <div v-for="item,index in moodb_className" :class="[item]" class="modal_imgItem">
<img :src="moodboarList[index].imgUrl">
</div> -->
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem"> <div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
<img :src="item.imgUrl"> <img :src="item.imgUrl" v-modelImg>
</div> </div>
</div> </div>
<div v-else class="modal_img">
<img :src="modalImg[0].imgUrl">
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div> </div>
</div> </div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
@@ -138,21 +140,24 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, h, ref ,computed} from "vue"; import { defineComponent, h, ref ,computed,nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue"; import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie"; import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util"; import { getUploadUrl } from "@/tool/util";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue"; import { message, Upload } from "ant-design-vue";
import { Https } from "@/tool/https";
import Material from "@/component/HomePage/Material.vue"; import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue"; import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue"; import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue"; import layout from "@/component/HomePage/layout.vue";
import domTurnImg from '@/tool/domTurnImg'
import GO from "@/tool/GO"; import GO from "@/tool/GO";
import moodb from "@/tool/moodb"; import moodb from "@/tool/moodb";
export default defineComponent({ export default defineComponent({
components: { Material, MoodTemplate, Generate,layout }, components: { Material, MoodTemplate, Generate,layout },
setup() { setup() {
const store = useStore()
let lessenList: any = ref([]); let lessenList: any = ref([]);
let fileList: any = ref([]); let fileList: any = ref([]);
let templateModal: any = ref(false); let templateModal: any = ref(false);
@@ -162,6 +167,12 @@ export default defineComponent({
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式 let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
let layoutList:any = []//选中后随机生成的list let layoutList:any = []//选中后随机生成的list
let layoutOpen = ref(false) let layoutOpen = ref(false)
let loadingShow = ref(false)
let modalImg:any= computed(()=>{
console.log(store.state.UploadFilesModule.disposeMoodboard);
return store.state.UploadFilesModule.disposeMoodboard
})
return { return {
fileList, fileList,
lessenList, lessenList,
@@ -171,7 +182,9 @@ export default defineComponent({
moodb_className, moodb_className,
flex_direction, flex_direction,
layoutList, layoutList,
layoutOpen layoutOpen,
loadingShow,
modalImg
}; };
}, },
data() { data() {
@@ -208,7 +221,30 @@ export default defineComponent({
mounted() { mounted() {
this.token = getCookie("token") || ""; this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl(); this.uploadUrl = getUploadUrl();
},
directives:{
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
}
}, },
methods: { methods: {
open(num: Number) { open(num: Number) {
@@ -240,7 +276,6 @@ export default defineComponent({
message.error('You can select up to 8 images') message.error('You can select up to 8 images')
}else{ }else{
this.store.commit("setMoodboardFile", fileList); this.store.commit("setMoodboardFile", fileList);
this.store.commit("clearMoodTemplateId");
} }
} else if (file.status === "error") { } else if (file.status === "error") {
let index = -1; let index = -1;
@@ -254,25 +289,6 @@ export default defineComponent({
} }
message.error(file.name + "upload failed"); message.error(file.name + "upload failed");
} }
},
confirmSelect(event:any){
for(let item of event){
let data = {
imgUrl:item.url,
resData:item,
status:'done',
}
if(this.fileList.length == 8){
message.error('Maximum number of allowable file uploads has been exceeded')
break
}else{
this.fileList.push(data)
}
}
this.store.commit('setMoodboardFile',this.fileList)
this.store.commit('clearMoodTemplateId')
}, },
beforeUpload(file: any) { beforeUpload(file: any) {
const isJpgOrPng = const isJpgOrPng =
@@ -306,15 +322,22 @@ export default defineComponent({
this.fileList.splice(moodboard,1) this.fileList.splice(moodboard,1)
this.store.commit("setMoodboardFile", this.fileList); this.store.commit("setMoodboardFile", this.fileList);
} }
this.store.commit("clearMoodTemplateId"); if(this.store.state.UploadFilesModule.moodboard.length == 0){
this.store.commit("setDisposeMoodboard", {});
}
}, },
recollection() { recollection() {
let arr = JSON.parse( let arr = JSON.parse(
JSON.stringify( JSON.stringify(
this.store.state.UploadFilesModule.allBoardData this.store.state.UploadFilesModule.allBoardData
.moodboardFiles .moodboardFiles
) )
);
let disposeMoodboard = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.disposeMoodboard
)
); );
let setboard = { let setboard = {
generate:[] as any, generate:[] as any,
@@ -333,10 +356,8 @@ export default defineComponent({
this.store.commit("setMoodboardGenerateFiles", setboard.generate); this.store.commit("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material); this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard); this.store.commit("setMoodboardFile", setboard.moodboard);
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
this.fileList = setboard.moodboard this.fileList = setboard.moodboard
let moodTemplateId =
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
this.store.commit("setMoodTemplateId", moodTemplateId);
}, },
changeTemplateModal() { changeTemplateModal() {
@@ -350,7 +371,9 @@ export default defineComponent({
}, },
layout(){ layout(){
let arr = this.store.state.UploadFilesModule.moodboard this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1)) var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random] let moodb = this.moodb_[arr.length-1][random]
@@ -361,47 +384,40 @@ export default defineComponent({
} }
this.moodb_className = this.moodb_[arr.length-1][random] this.moodb_className = this.moodb_[arr.length-1][random]
this.layoutOpen = true this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(async ()=>{
let layoutCentent = document.getElementById('modal_img')
let file = await domTurnImg(layoutCentent)
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
})
}, },
setmoodbClass(val:any){ setmoodbClass(val:any){
this.moodb_className = val this.moodb_className = val
} }
// randomRange(min: any, max: any, num: any) {
// // min最小值，max最大值 num排除的值
// let index = Math.floor(Math.random() * (max - min)) + min;
// while (index === num) {
// index = Math.floor(Math.random() * (max - min)) + min;
// }
// return index;
// },
// //随机重置图片顺序
// refetchTemplate() {
// let arr = Array.from({ length: this.templateFileList.length });
// for (let item of this.templateFileList) {
// let index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// while (arr[index]) {
// index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// }
// arr[index] = item;
// }
// this.templateFileList = arr;
// },
// //提交模板
// submitTemplate() {
// // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
// // this.store.commit("setMoodboardFile", this.fileList);
// // this.store.commit("setMoodTemplateId", this.moodTemplateId);
// // this.changeTemplateModal();
// },
}, },
}); });
</script> </script>
@@ -413,6 +429,8 @@ export default defineComponent({
.modal_left { .modal_left {
padding-top: 4rem; padding-top: 4rem;
width: 47%; width: 47%;
display: flex;
flex-direction: column;
// width: 50rem; // width: 50rem;
.switch_type_list { .switch_type_list {
display: flex; display: flex;
@@ -466,8 +484,8 @@ export default defineComponent({
} }
.moodboard_body { .moodboard_body {
height: calc(100% - 5rem);
padding-top: 2.5rem; padding-top: 2.5rem;
flex: 1;
height: 30rem; height: 30rem;
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
@@ -475,7 +493,7 @@ export default defineComponent({
display: none; display: none;
} }
.upload_img_body { .upload_img_body {
height: calc(100% - 3rem); height: 100%;
overflow-y: auto; overflow-y: auto;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -563,16 +581,23 @@ export default defineComponent({
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
>img{
height: 100%;
}
&.active{ &.active{
flex-direction: row; flex-direction: row;
} }
.modal_imgItem{ .modal_imgItem{
position: relative; position: relative;
overflow: hidden;
img{ img{
position: absolute; position: absolute;
object-fit: cover; top: 50%;
width: 100%; left: 50%;
height: 100%; transform: translate(-50%,-50%);
float: left;
user-select:none;
-webkit-user-drag: none;
} }
} }
.wh1{ .wh1{

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

@@ -2,11 +2,11 @@
<!-- 生成collention缩略图用的 --> <!-- 生成collention缩略图用的 -->
<div class="collection_review"> <div class="collection_review">
<div class="collection_review_mark"></div> <div class="collection_review_mark"></div>
<div class="img_block_item" v-if="allBoardData?.moodTemplateId"> <!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate> <MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
</div> </div> -->
<div class="img_block_item" v-else> <div class="img_block_item">
<div class="lager_img_item" v-for="(mood) in allBoardData.moodboardFiles" :key="mood"> <div class="lager_img_item lager_img_disposeMoodboard" v-for="(mood) in allBoardData.disposeMoodboard" :key="mood">
<div class="all_img_item_block"> <div class="all_img_item_block">
<img class="all_img_content cover_img" :src="mood.imgUrl" > <img class="all_img_content cover_img" :src="mood.imgUrl" >
</div> </div>
@@ -62,7 +62,9 @@ export default defineComponent({
components:{MoodTemplate}, components:{MoodTemplate},
setup() { setup() {
const store = useStore(); const store = useStore();
let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData}) let allBoardData:any = computed(()=>{
console.log(store.state.UploadFilesModule.allBoardData,"===============")
return store.state.UploadFilesModule.allBoardData})
return { return {
allBoardData, allBoardData,
} }
@@ -98,6 +100,10 @@ export default defineComponent({
width: 20.4rem; width: 20.4rem;
height: 20.4rem; height: 20.4rem;
vertical-align: top; vertical-align: top;
&.lager_img_disposeMoodboard{
width: 100%;
height: auto;
}
} }
.sketch_img_item{ .sketch_img_item{

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

@@ -39,7 +39,7 @@
</div> </div>
<div class="upload_file_item_content" v-show="file?.status === 'done'"> <div class="upload_file_item_content" v-show="file?.status === 'done'">
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl"> <img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
<div class="delete_file_block" @click.stop="deleteFile(file)"> <div class="delete_like_file_block" @click.stop="deleteFile(file)">
<span <span
class="icon iconfont icon-shanchu" class="icon iconfont icon-shanchu"
></span> ></span>
@@ -80,7 +80,7 @@
</div> </div>
</div> </div>
</div> </div>
<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material> <Material v-show="openClick == 2" ref="Material" msg="Printboard" @confirmSelect="confirmSelect"></Material>
<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate> <Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate>
</div> </div>
<div class="modal_right"> <div class="modal_right">
@@ -106,6 +106,13 @@
<div class="modal_img"> <div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" > <div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
<img :src="item.imgUrl" @click.stop="generageAdd(item)"> <img :src="item.imgUrl" @click.stop="generageAdd(item)">
<div
class="delete_like_file_block"
@click.stop="likeFile(item)"
>
<i v-if="item" class="fi fi-rr-heart"></i>
<i v-else class="fi fi-sr-heart"></i>
</div>
<div class="pin_block"> <div class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox> <a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
</div> </div>
@@ -216,17 +223,17 @@ export default defineComponent({
methods:{ methods:{
open(num: Number) { open(num: Number) {
this.openClick = num; this.openClick = num;
},
openLibrary(){
let material:any = this.$refs.Material let material:any = this.$refs.Material
if(num == 2){
material.init('Printboard') material.init('Printboard')
}
}, },
fileUploadChange(data:any){ fileUploadChange(data:any){
let file = data.file let file = data.file
file.id_ = GO.id++ file.id_ = GO.id++
file.type_ = { file.type_ = {
type1:'upload', type1:'upload',
type2:'Moodboard' type2:'Printboard'
}; };
file.pin = false; file.pin = false;
let Cropper:any = this.$refs.Cropper let Cropper:any = this.$refs.Cropper
@@ -277,17 +284,20 @@ export default defineComponent({
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){ if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
this.store.commit("addGenerateMaterialFils", item); this.store.commit("addGenerateMaterialFils", item);
}else{ }else{
this.fileList = this.store.state.UploadFilesModule.moodboardFiles this.fileList = this.store.state.UploadFilesModule.printboardFiles
let moodboard let moodboard
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{ this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){ if(items.id_ == item.id_){
moodboard = index moodboard = index
} }
}) })
this.fileList.splice(moodboard,1) this.fileList.splice(moodboard,1)
this.store.commit("setSketchboardFile", this.fileList); this.store.commit("setPrintboardFile", this.fileList);
} }
},
likeFile(item:any){
}, },
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值 randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
let index = Math.floor(Math.random() * (max - min)) + min; let index = Math.floor(Math.random() * (max - min)) + min;
@@ -558,7 +568,7 @@ export default defineComponent({
collectionElementId:generage.collectionElementid, collectionElementId:generage.collectionElementid,
level1Type:generage.upload.level1Type, level1Type:generage.upload.level1Type,
level2Type:generage.level2Type, level2Type:generage.level2Type,
// text:this.captionGeneration, text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:1,//为1就是Print version:1,//为1就是Print
} }
@@ -571,6 +581,8 @@ export default defineComponent({
return return
} }
}else if(generateType == 'text'){ }else if(generateType == 'text'){
data.collectionElementId = ''
data.level2Type = ''
// this.beforeUpload(false) // this.beforeUpload(false)
// if(this.captionGeneration){ // if(this.captionGeneration){
// }else{ // }else{
@@ -580,10 +592,6 @@ export default defineComponent({
// return // return
// } // }
} }
if(generateType == 'text'){
data.collectionElementId = ''
data.level2Type = ''
}
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then( Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
(rv) => { (rv) => {
// if(rv){ // if(rv){
@@ -600,6 +608,7 @@ export default defineComponent({
type1: "generate", type1: "generate",
type2: 'Printboard', type2: 'Printboard',
}, },
item.resData = JSON.parse(JSON.stringify(item))
this.store.commit("addGenerateMaterialFils", item); this.store.commit("addGenerateMaterialFils", item);
} }
} }
@@ -617,6 +626,8 @@ export default defineComponent({
// background: #fff; // background: #fff;
// padding: 0.5rem 2.2rem 2rem 2.6rem; // padding: 0.5rem 2.2rem 2rem 2.6rem;
// box-sizing: border-box; // box-sizing: border-box;
display: flex;
flex-direction: column;
padding-top: 4rem; padding-top: 4rem;
width: 47%; width: 47%;
.switch_type_list { .switch_type_list {
@@ -671,7 +682,8 @@ export default defineComponent({
} }
.printboard_body{ .printboard_body{
height: calc(100% - 5rem); // height: calc(100% - 5rem);
flex: 1;
padding-top: 2.5rem; padding-top: 2.5rem;
height: 30rem; height: 30rem;
overflow-x: hidden; overflow-x: hidden;
@@ -746,8 +758,14 @@ export default defineComponent({
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} }
&:hover .delete_like_file_block{
.delete_file_block{ display: block;
}
}
}
}
}
.delete_like_file_block{
display: none; display: none;
width: 3.2rem; width: 3.2rem;
height: 3.2rem; height: 3.2rem;
@@ -763,83 +781,14 @@ export default defineComponent({
font-size: 1.6rem; font-size: 1.6rem;
color: #fff; color: #fff;
} }
} i{
&:hover .delete_file_block{
display: block;
}
.operate_file_block{
width: 100%;
height: 3rem;
font-size: 1.6rem; font-size: 1.6rem;
color: #FFFFFF; color: #fff;
position: absolute; &.fi-rr-heart{
left: 0;
bottom: 0;
.select_img_type{
height: 100%;
line-height: 3rem;
text-align: center;
background: rgba(0,0,0,0.6);
position: relative;
.select_category{
display: flex;
align-items: center;
justify-content: center;
.icon-xiala{
margin-left: 0.8rem;
}
}
.icon_rotate{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.category_list{
position: absolute;
width: 100%;
cursor: pointer;
position: absolute;
// top: 3.1rem;
margin-top: .2rem;
left: 0;
background: rgba(0,0,0,0.4);
border: 1px solid #343579;
border-radius: 0.8rem;
// overflow: hidden;
z-index: 2;
height: 9rem;
overflow-x: hidden;
&.category_list::-webkit-scrollbar{display: none;}
.category_item{
text-align: left;
font-size: 1.4rem;
padding: 1rem 1.9rem;
line-height: 1.6rem;
&.select_category_item{
background: linear-gradient(160deg, #AC2A3B, #292161);
}
&:hover{
background: linear-gradient(160deg, #AC2A3B, #292161);
}
}
}
}
}
}
.upload_img_icon{
width: 4.6rem;
} }
&.fi-sr-heart{
color: red;
} }
} }
} }
@@ -935,12 +884,21 @@ export default defineComponent({
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&:hover .delete_like_file_block{
display: block;
}
&.active{ &.active{
opacity: 0.5; opacity: 0.5;
// border: 2px solid; // border: 2px solid;
border-radius: 1rem; border-radius: 1rem;
img {
transform: scale(0.9); transform: scale(0.9);
img {
}
.pin_block{
pointer-events:none;
}
.delete_like_file_block{
pointer-events:none
} }
} }
} }

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

@@ -92,8 +92,8 @@
</div> </div>
</div> </div>
<div <div
class="delete_file_block" class="delete_like_file_block"
@click="deleteFile(file)" @click.stop="deleteFile(file)"
> >
<span <span
class="icon iconfont icon-shanchu" class="icon iconfont icon-shanchu"
@@ -192,6 +192,7 @@
: '', : '',
]" ]"
></div> ></div>
</div> </div>
<div <div
class="category_list" class="category_list"
@@ -220,6 +221,13 @@
</div> </div>
</div> </div>
</div> </div>
<div
class="delete_like_file_block"
@click.stop="likeFile(item)"
>
<i v-if="item" class="fi fi-rr-heart"></i>
<i v-else class="fi fi-sr-heart"></i>
</div>
<div class="pin_block"> <div class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox> <a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
</div> </div>
@@ -343,7 +351,7 @@ export default defineComponent({
this.openClick = num; this.openClick = num;
if (num == 2) { if (num == 2) {
let material: any = this.$refs.Material; let material: any = this.$refs.Material;
material.init("Moodboard"); material.init("Sketchboard");
} else if (num == 3) { } else if (num == 3) {
// let Generate:any = this.$refs.Generate // let Generate:any = this.$refs.Generate
// Generate.init('generate') // Generate.init('generate')
@@ -364,7 +372,7 @@ export default defineComponent({
file.id_ = GO.id++ file.id_ = GO.id++
file.type_ = { file.type_ = {
type1:'upload', type1:'upload',
type2:'Moodboard' type2:'Sketchboard'
}; };
let fileList = this.fileList.filter( let fileList = this.fileList.filter(
(v: any) => v.status === "done" (v: any) => v.status === "done"
@@ -439,9 +447,9 @@ export default defineComponent({
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){ if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
this.store.commit("addGenerateMaterialFils", item); this.store.commit("addGenerateMaterialFils", item);
}else{ }else{
this.fileList = this.store.state.UploadFilesModule.moodboardFiles this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
let moodboard let moodboard
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{ this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){ if(items.id_ == item.id_){
moodboard = index moodboard = index
@@ -451,7 +459,25 @@ export default defineComponent({
this.store.commit("setSketchboardFile", this.fileList); this.store.commit("setSketchboardFile", this.fileList);
} }
}, },
likeFile(item:any){
console.log(item);
let data = {
generateDetailId:item.id,
level1Type:"Sketchboard",
level2Type: item.category,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
// Https.axiosPost(Https.httpUrls.generateLike, data).then(
// (rv) => {
// // if(rv){
// // }
// console.log(rv);
// }
// ).catch(res=>{
// });
},
recollection() { recollection() {
let arr = JSON.parse( let arr = JSON.parse(
JSON.stringify( JSON.stringify(
@@ -523,6 +549,8 @@ export default defineComponent({
} }
}else if(generateType == 'text'){ }else if(generateType == 'text'){
// this.beforeUpload(false) // this.beforeUpload(false)
data.collectionElementId = ''
data.level2Type = ''
if(this.captionGeneration){ if(this.captionGeneration){
}else{ }else{
message.error( message.error(
@@ -531,10 +559,6 @@ export default defineComponent({
return return
} }
} }
if(generateType == 'text'){
data.collectionElementId = ''
data.level2Type = ''
}
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then( Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
(rv) => { (rv) => {
// if(rv){ // if(rv){
@@ -551,6 +575,7 @@ export default defineComponent({
type1: "generate", type1: "generate",
type2: 'Sketchboard', type2: 'Sketchboard',
}, },
item.resData = JSON.parse(JSON.stringify(item))
this.store.commit("addGenerateMaterialFils", item); this.store.commit("addGenerateMaterialFils", item);
} }
}, },
@@ -563,6 +588,8 @@ export default defineComponent({
.modal_left { .modal_left {
padding-top: 4rem; padding-top: 4rem;
width: 47%; width: 47%;
display: flex;
flex-direction: column;
.switch_type_list { .switch_type_list {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -614,7 +641,8 @@ export default defineComponent({
} }
} }
.sketchboard_body { .sketchboard_body {
height: calc(100% - 5rem); // height: calc(100% - 5rem);
flex: 1;
padding-top: 2.5rem; padding-top: 2.5rem;
height: 30rem; height: 30rem;
overflow-x: hidden; overflow-x: hidden;
@@ -687,8 +715,19 @@ export default defineComponent({
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} }
&:hover .delete_like_file_block{
display: block;
}
.delete_file_block{
}
}
}
}
.delete_like_file_block{
display: none; display: none;
width: 3.2rem; width: 3.2rem;
height: 3.2rem; height: 3.2rem;
@@ -704,19 +743,18 @@ export default defineComponent({
font-size: 1.6rem; font-size: 1.6rem;
color: #fff; color: #fff;
} }
} i{
font-size: 1.6rem;
&:hover .delete_file_block{ color: #fff;
display: block; &.fi-rr-heart{
}
} }
&.fi-sr-heart{
color: red;
}
}
} }
}
}
.modal_right{ .modal_right{
flex: 1; flex: 1;
@@ -806,6 +844,9 @@ export default defineComponent({
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&:hover .delete_like_file_block{
display: block;
}
img{ img{
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
@@ -815,8 +856,17 @@ export default defineComponent({
opacity: 0.5; opacity: 0.5;
// border: 2px solid; // border: 2px solid;
border-radius: 1rem; border-radius: 1rem;
img {
transform: scale(0.9); transform: scale(0.9);
// img {
// }
.operate_file_block{
pointer-events:none
}
.pin_block{
pointer-events:none
}
.delete_like_file_block{
pointer-events:none
} }
} }

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

@@ -104,7 +104,6 @@ export default defineComponent({
file.resData = res.data file.resData = res.data
let fileList = this.fileList.filter((v:any)=> v.status === 'done') let fileList = this.fileList.filter((v:any)=> v.status === 'done')
this.store.commit('setMoodboardFile',fileList) this.store.commit('setMoodboardFile',fileList)
this.store.commit('clearMoodTemplateId')
}else if(file.status === 'error'){ }else if(file.status === 'error'){
let index = -1 let index = -1
this.fileList.forEach((ele:any,index1:any) => { this.fileList.forEach((ele:any,index1:any) => {
@@ -121,7 +120,6 @@ export default defineComponent({
deleteFile(index:any){ deleteFile(index:any){
this.fileList.splice(index, 1) this.fileList.splice(index, 1)
this.store.commit('setMoodboardFile',this.fileList) this.store.commit('setMoodboardFile',this.fileList)
this.store.commit('clearMoodTemplateId')
}, },

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

@@ -243,7 +243,7 @@ export default defineComponent({
} }
</style> </style>
<style lang="less"> <style lang="less">
.collection_modal{ .collection_modal,.layout_modal{
// max-width: 1200px ; // max-width: 1200px ;
max-width: 1150px ; max-width: 1150px ;
.ant-modal-content{ .ant-modal-content{

264
src/component/HomePage/layout.vue
View File

@@ -12,12 +12,13 @@
:destroyOnClose="true" :destroyOnClose="true"
> >
<div class="layout_content"> <div class="layout_content">
<div class="layout_header"> <div class="collection_title">
<div class="collection_title_text">
<div class="layout_title">MoodBoard Design</div> <div class="layout_title">MoodBoard Design</div>
<div </div>
class="icon iconfont icon-guanbi close_icon" </div>
@click.stop="init()" <div class="collection_closeIcon" @click.stop="cancelDsign()">
></div> <i class="fi fi-rr-cross-small"></i>
</div> </div>
<div class="layout_nav"> <div class="layout_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)"> <div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)">
@@ -26,7 +27,7 @@
</div> </div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent"> <div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" > <div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false"> <img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" v-modelImg>
<ul v-show="item.setPitch" class="layout_btn" > <ul v-show="item.setPitch" class="layout_btn" >
<li class="layout_btn_top" v-compile.stop="'top'"></li> <li class="layout_btn_top" v-compile.stop="'top'"></li>
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li> <li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -76,50 +77,63 @@
Submit Submit
</div> </div>
</div> </div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
multiple
accept=".jpg,.png,.jpeg,.bmp"
>
</a-upload>
</a-modal> </a-modal>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue"; import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue"; import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex"; import { useStore } from "vuex";
import GO from "@/tool/GO"; import GO from "@/tool/GO";
import moodb from "@/tool/moodb"; import moodb from "@/tool/moodb";
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
import domTurnImg from '@/tool/domTurnImg' import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl } from "@/tool/util";
export default defineComponent({ export default defineComponent({
props:["moodb_className",'flex_direction'], props:["moodb_className",'flex_direction'],
components: { components: {
draggable draggable
}, },
setup(prop) { setup(prop) {
let fileList: any = ref([]);
let layout: any = ref(false); let layout: any = ref(false);
let templateFileList: any = ref([]); let templateFileList: any = ref([]);
let openClick: any = ref(1); let openClick: any = ref(1);
let drag = false; let drag = false;
let layoutList:any = ref([]) let layoutList:any = ref([])
const content = ref<HTMLElement | null>(null); const content = ref<HTMLElement | null>(null);
let loadingShow = ref(false)
return { return {
fileList,
layout, layout,
templateFileList, templateFileList,
openClick, openClick,
drag, drag,
layoutList, layoutList,
content, content,
loadingShow
}; };
}, },
data() { data() {
return { return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
// moodTemplateId: "", //模板id // moodTemplateId: "", //模板id
store: useStore(), store: useStore(),
@@ -132,11 +146,19 @@ export default defineComponent({
moodbList:{}, moodbList:{},
moodbClassName:[], moodbClassName:[],
setabsolute:false, setabsolute:false,
token: "",
uploadUrl: "",
upload: {
isPin: 0,
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
}; };
}, },
mounted() { mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
}, },
directives:{ directives:{
//操作移动 //操作移动
@@ -260,27 +282,34 @@ export default defineComponent({
}, },
//操作旋转 //操作旋转
rotote:{ rotote:{
mounted(el){ mounted(el){
let mouse = true; let mouse = true;
let angle :any = 0 let angle :any = 0
let num:any let num:any
let x = 0
let y = 0
let elParent = el.parentNode.parentNode let elParent = el.parentNode.parentNode
if(document.defaultView){ if(document.defaultView){
num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3]) let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
num = Number(transform[3])
} }
// 添加鼠标按下事件监听器 // 添加鼠标按下事件监听器
el.addEventListener('mousedown', (e:MouseEvent) => { el.addEventListener('mousedown', (e:MouseEvent) => {
e.stopPropagation() e.stopPropagation()
mouse = true; mouse = true;
let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2 // let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2 // let eY = elParent.offsetTop + el.offsetTop
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
document.addEventListener('mousemove', (e:MouseEvent) => { document.addEventListener('mousemove', (e:MouseEvent) => {
if (mouse) { if (mouse) {
let X = eX let X = eX
let Y = eY let Y = eY
let x:any = e.pageX - X let x:any = e.clientX - X
let y:any = Y - e.pageY let y:any = Y - e.clientY
angle = Math.atan2(x,y)*(180 / Math.PI) angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)" elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)" el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
@@ -290,6 +319,8 @@ export default defineComponent({
// 添加鼠标松开事件监听器 // 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => { document.addEventListener('mouseup', () => {
mouse = false; mouse = false;
// x = e.pageX
// y = e.pageY
}); });
}); });
//缩放 //缩放
@@ -477,20 +508,47 @@ export default defineComponent({
} }
}) })
}, },
},
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
} }
}, },
methods: { methods: {
init(){ init(){
this.layout = !this.layout let parentList:any = this.$parent
let layoutList = this.store.state.UploadFilesModule.moodboard parentList = parentList.layoutList
this.layout = true
// let layoutList = this.store.state.UploadFilesModule.moodboard
this.layoutList.forEach((v:any)=>{ this.layoutList.forEach((v:any)=>{
v.setPitch = false v.setPitch = false
}) })
this.layoutList = layoutList this.layoutList = parentList
this.moodbList = this.moodb[layoutList.length-1] this.moodbList = this.moodb[parentList.length-1]
this.moodbClassName = this.moodb_className this.moodbClassName = this.moodb_className
}, },
cancelDsign(){
this.layout = false
},
setpitch(item:any,index:any){ setpitch(item:any,index:any){
this.layoutList.forEach((v:any)=>{ this.layoutList.forEach((v:any)=>{
v.setPitch = false v.setPitch = false
@@ -516,105 +574,57 @@ export default defineComponent({
} }
} }
}, },
//开始拖拽事件
layoutBtnTop(){
},
// setmoodbClassName(){
// },
//获取图片宽高
// getimgWH(){
// let layoutList = [...(useStore().state.UploadFilesModule.moodboardFiles),
// ...(useStore().state.UploadFilesModule.generateFiles),
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
// return new Promise(res => {
// var img = document.createElement("img");
// img.src = item.imgUrl
// img.addEventListener("load", function () {
// document.body.appendChild(img);
// var w = img.offsetWidth;
// var h = img.offsetHeight;
// img.remove()
// res({ w, h });
// })
// })
// layoutList.forEach(item => {
// let img = document.createElement('img')
// img.addEventListener("load",function(){
// document.body.appendChild(img);
// var w = img.offsetWidth;
// var h = img.offsetHeight;
// img.remove()
// })
// });
// },
// layoutcli(num: Number) {
// this.openClick = num;
// if(num ==2 ){
// let material:any = this.$refs.Material
// material.init('Moodboard')
// }else if (num == 3){
// let material:any = this.$refs.Material
// material.init('generate')
// }
// },
//随机重置图片顺序
// refetchTemplate() {
// let arr = Array.from({ length: this.templateFileList.length });
// for (let item of this.templateFileList) {
// let index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// while (arr[index]) {
// index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// }
// arr[index] = item;
// }
// this.templateFileList = arr;
// },
changeTemplateModal(){ changeTemplateModal(){
this.layout = !this.layout this.layout = !this.layout
}, },
//提交模板 //提交模板
submitTemplate() { submitTemplate() {
// this.fileList = JSON.parse(JSON.stringify(this.templateFileList)); this.loadingShow = true
// this.store.commit("setMoodboardFile", this.fileList);
// this.store.commit("setMoodTemplateId", this.moodTemplateId);
// this.changeTemplateModal();
this.layoutList.forEach((v:any)=>{ this.layoutList.forEach((v:any)=>{
v.setPitch = false v.setPitch = false
}) })
nextTick().then(async ()=>{
let layoutCentent = document.getElementById('layoutCentent') let layoutCentent = document.getElementById('layoutCentent')
setTimeout(() => { let file = await domTurnImg(layoutCentent)
console.log(domTurnImg(layoutCentent)); let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
// console.log(rv);
rv.imgUrl = rv.url
this.layout = false this.layout = false
this.loadingShow = false
}, 0); this.store.commit("setDisposeMoodboard", rv);
}
).catch(rv=>{
this.loadingShow = false
})
})
}, },
beforeUpload(){
}
}, },
}); });
</script> </script>
<style lang="less"> <style lang="less">
.layout_modal { .layout_modal {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
max-width: 1150px; max-width: 1150px;
.ant-modal-body { .ant-modal-body {
padding: 0; padding: 0;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem);
height: 60rem; height: 65rem;
} }
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: 1rem;
@@ -624,23 +634,44 @@ export default defineComponent({
// background: #f2f3fb; // background: #f2f3fb;
// padding-bottom: 2.9rem; // padding-bottom: 2.9rem;
height: 100%; height: 100%;
.layout_header { .collection_title{
position: absolute;
top: 4rem;
display: flex; display: flex;
justify-content: space-between; font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center; align-items: center;
padding: 0 2rem 0 2.5rem; .collection_title_text{
height: 6.6rem; margin-right: 4rem;
.layout_title {
font-size: 1.8rem;
font-weight: 500;
color: #030303;
} }
.collection_title_text_intro{
.close_icon { font-size: 1.2rem;
font-size: 1.8rem; font-weight: 400;
color: #aeb2b7; color: rgba(0,0,0,.45);
}
}
.collection_closeIcon{
position: absolute;
top: 2rem;
right: 2rem;
cursor: pointer; cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.collection_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
} }
} }
.layout_nav{ .layout_nav{
@@ -798,6 +829,7 @@ export default defineComponent({
// object-fit: cover; // object-fit: cover;
// width: 100%; // width: 100%;
// height: 100%; // height: 100%;
pointer-events: none;
float: left; float: left;
user-select:none; user-select:none;
-webkit-user-drag: none; -webkit-user-drag: none;

696
src/component/LibraryPage/ModelPlacementNew.vue Normal file
View File

@@ -0,0 +1,696 @@
<template>
<div v-show="placementShow">
<a-modal class="models_placement_component"
v-model:visible="placementShow"
:footer="null"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="design_title_text">
<div>Registration</div>
<div class="design_title_text_intro">Please change the pure white inside the mannequin for another color to enhance your experience</div>
</div>
<div class="models_placement_body" >
<div class="models_placement_content">
<div class="plcaement_point_content">
<div class="palcement_modal_header">
<div class="placement_operate_list">
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
<div class="icon iconfont icon-baocun1 operate_icon"></div>
<div class="operate_item_des">Submit</div>
</div>
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
<div class="operate_item_des">Preview</div>
</div>
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
<div class="operate_item_des">Back</div>
</div>
<div class="operate_item" @click="restoreLocationList">
<div class="icon iconfont icon-huifu operate_icon"></div>
<div class="operate_item_des">Restore</div>
</div>
</div>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<div class="ponit_title">{{point.title}}</div>
<div class="point_list">
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</div>
</div>
<div class="placement_content_operate_list">
<div class="placement_content_operate_item" @click="changeRemoveStatus">
<div class="placement_remove_point_block"></div>
<div class="placement_content_operate_des">Remove Point</div>
</div>
</div>
<div class="img_preview_block" >
<div class="perview_mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
<img class="placement_img" :src="perviewUrl || printObject?.url">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile} from "@/tool/util"
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup() {
const store = useStore()
let oldLocationList:any = ref([])
let locationList:any = ref([])
let printObject:any = ref({})
let imgBox:any = ref({})
let intObj:any = ref(null)
let currentSign:any = ref({})
let oldPointList:any = ref([]) //备份点
let pointList:any = ref([])
let isSubmit:any = ref(false) //判断历史是否有提交过
return {
store,
oldLocationList,
locationList,
printObject,
imgBox,
intObj,
currentSign,
oldPointList,
pointList,
isSubmit
}
},
data(){
return{
placementShow:false,
collectionIndex:0,
startDian:false,
moveOriginal:{posX: 0, posY: 0},
isRemoveStatus:false,
placement_sacle:30,
perviewUrl:'',//预览的图片地址
isShowMark:false,
}
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
setTimeout(()=>{
let imgbox:any = this.$refs.imgbox
let position = imgbox.getBoundingClientRect()
this.imgBox = {
width:imgbox.clientWidth,
height:imgbox.scrollHeight,
left : position.left,
top:position.top,
scrollTop:imgbox.scrollTop || 0,
}
this.getDefaultPointList(this.imgBox)
},500)
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
this.isSubmit = false
this.pointList = [
{
title:'SHOULDER',
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
},
{
title:'WAISTBAND',
pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
},
{
title:'HAND',
pointList:[{type:'handLeft',color:'#CCFF7B',show:true,field:'hand'},{type:'handRight',color:'#CCFF7B',show:true,field:'hand'}]
},
]
if(this.printObject.templateId){//编辑
this.isSubmit = true
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
pointItem.show = false
let data = {
left:this.printObject[pointItem.type][0] * imgBox.width - 12,
top:this.printObject[pointItem.type][1] * imgBox.height - 12,
color:pointItem.color,
type:pointItem.type,
field:pointItem.field,
}
this.locationList.push(data)
}
}
}
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
}
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
},
AddDian(point:any){
if(!point.show){
return
}
this.startDian = true
this.isRemoveStatus = false
this.intObj = point
},
changeRemoveStatus(){
this.isRemoveStatus = true
},
startMove(event:any){
if(this.isRemoveStatus){
return
}
let imgbox:any = this.$refs.imgbox
let scrollTop = imgbox.scrollTop;
if(this.intObj){
this.currentSign.left = event.clientX - this.imgBox.left
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
this.currentSign.color = this.intObj.color
this.currentSign.type= this.intObj.type
this.currentSign.field = this.intObj.field
this.locationList.push(this.currentSign)
this.intObj.show = false
this.intObj = null
}else{
if(this.startDian){
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
document.addEventListener('mouseup', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
},
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
}
if (this.currentSign.left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
}
},
getMouseDown(event:any,item:any,index:number){
if(this.isRemoveStatus){
for(let itemPoint of this.pointList){
for(let point of itemPoint.pointList){
if(item.type == point.type){
point.show = true
break
}
}
}
this.locationList.splice(index,1)
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.offsetX
this.moveOriginal.posY = event.offsetY // 1为边框
this.startDian = true
}
},
getMouseOver(){
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
},
closeModal(){
let _this = this
if(!this.isSubmit){
Modal.confirm({
title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok',
cancelText: 'Cancel',
// centered:true,
onOk() {
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
});
}else{
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
},
restoreLocationList(){
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
},
submitPlacement(){
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
},
confrimSubmit(){
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
this.isShowMark = false
this.isSubmit = true
this.$emit('submitModelPlacement')
this.closeModal()
}
).catch(res=>{
this.isShowMark = false
});
},
customRequest(){
let new_data = {
file:this.printObject.file,
level1Type:'Models',
level2Type:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.isShowMark = true
return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
resolve(rv)
}
).catch((res)=>{
reject(res)
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
let locationData:any = {}
let returnData:any = {}
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
//进行字段归类
for(let item of newLocationList){
locationData[item.field] = locationData[item.field] || []
locationData[item.field].push(item)
}
for(let key in locationData){
locationData[key].sort(this.sortBy("left")) //通过left字段进行排序
locationData[key].forEach((v:any,index:any) => {
v.type = !index ?v.field + 'Left' :v.field +'Right' //第一个是left，第二个是right
v.left = ((v.left + 12) / width).toFixed(4)
v.top = ((v.top + 12) / height).toFixed(4)
returnData[v.type] = [v.left, v.top]
});
}
return returnData
},
sortBy(field:any) {
return function(a:any,b:any) {
return a[field] - b[field];
}
},
printPreview(){
let file = this.printObject.templateId ? null :this.printObject.file,
models = {
libraryId:this.printObject.libraryId || null,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
let formData = new FormData();
formData.append('file', file);
formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
if(this.isShowMark){
return
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
this.perviewUrl = rv
this.isShowMark = false
}
).catch(res=>{
this.isShowMark = false
});
},
backPreview(){
this.perviewUrl = ''
}
}
})
</script>
<style lang="less">
.models_placement_component{
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
display: flex;
flex-direction: column;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.models_placement_body{
width: 100%;
flex: 1;
.palcement_modal_header{
position: relative;
height: 6.6rem;
width: 100%;
margin-bottom: 3rem;
.placement_operate_list{
display: flex;
align-items: center;
margin:0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
.operate_item{
margin-right: 4rem;
text-align: center;
cursor: pointer;
.operate_icon{
font-size: 2.1rem;
color: #64686D;
}
.operate_item_des{
height: 1.2rem;
font-size: 1.3rem;
color: #64686D;
}
&:last-child{
margin-right: 0;
}
}
}
}
.models_placement_content{
position: relative;
// height: calc(100% - 6.6rem);
height: 100%;
width: 100%;
.plcaement_point_content{
border: 2px solid #000;
border-radius: 10px;
width: 22rem;
background: #EBECF4;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
padding: 0 1.4rem;
.placement_point_item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
.ponit_title{
font-size: 1.3rem;
color: #64686D;
user-select:none; /* CSS3属性 */
}
.point_list{
display: flex;
align-items: center;
width: 6.2rem;
justify-content: space-between;
.point_item{
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
border:solid 0.2rem transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
.point_block{
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
}
}
}
}
}
.placement_content_operate_list{
width: 10.6rem;
background: #EBECF4;
position: absolute;
right: 0;
top:18.4rem;
.placement_content_operate_item{
padding: 1.5rem 0;
text-align: center;
cursor: pointer;
.placement_content_operate_des{
width: 100%;
font-size: 1.3rem;
color: #64686D;
-moz-user-select:none;
user-select:none
}
.print_scale_value{
height: 1.1rem;
font-size: 1.2rem;
text-align: center;
margin-bottom: 0.3rem;
color: #64686D;
}
.ant-tooltip-placement-top{
top: -37px !important;
}
.ant-slider-track{
background: #343579;
}
.ant-slider-handle{
border-color: #343579;
}
.placement_remove_point_block{
width: 2.4rem;
height: 2.4rem;
border: 2px solid #000000;
border-radius: 50%;
margin: 0 auto 0.4rem;
}
}
}
.placement_tip_content{
position: absolute;
right: 2rem;
bottom: 2rem;
width: 30rem;
font-size: 1.3rem;
color: #64686D;
}
.img_preview_block{
width: 40.8rem;
background: #ffffff;
margin: 0 auto;
position: relative;
user-select:none;
-moz-user-select:none;
position: relative;
.img_content_block{
width: 40.8rem;
height: 100%;
max-height: 63.2rem;
overflow-y: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
position: relative;
&::-webkit-scrollbar { width: 0 !important }
}
.perview_mark_loading{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}
.placement_img{
width: 100%;
user-select:none;
-moz-user-select:none;
}
.ponit_click{
width: 24px;
height: 24px;
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;
}
.placement_add_point_content{
width: 4px;
height: 4px;
border-radius: 50%;
background: #6E70FF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.icon-guanbi{
font-size: 20px;
line-height: 20px;
color:#ffffff;
}
}
}
}
}
}
</style>

3
src/router/index.ts
View File

@@ -1,4 +1,4 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router'
import { defineAsyncComponent } from 'vue' import { defineAsyncComponent } from 'vue'
const _import = (path : string) => defineAsyncComponent(() => import(`../views/${path}.vue`)); const _import = (path : string) => defineAsyncComponent(() => import(`../views/${path}.vue`));
@@ -37,6 +37,7 @@ const routes: Array<RouteRecordRaw> = [
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),
// history: createWebHashHistory(),
routes routes
}) })

4
src/store/Detail/designDetail.ts
View File

@@ -20,7 +20,9 @@ const DesignDetailModule : Module<DesignDetail,RootState> = {
setDesignItemOthers(state,data){ setDesignItemOthers(state,data){
state.designItemDetail.others[data.index] = data.others state.designItemDetail.others[data.index] = data.others
}, },
// setDesignItemOthers(state,data){
// state.designItemDetail.others[data.index] = data.others
// },
}, },
actions:{ actions:{

4
src/store/index.ts
View File

@@ -3,6 +3,7 @@ import UploadFilesModule from './uploadFile/uploadFile'
import DesignDetailModule from './Detail/designDetail' import DesignDetailModule from './Detail/designDetail'
import HomeStoreModule from './homeStore/homeStore' import HomeStoreModule from './homeStore/homeStore'
import UserHabit from './userHabit/userHabit' import UserHabit from './userHabit/userHabit'
import Woekspace from './workspace/workspace'
export interface RootState{ export interface RootState{
} }
@@ -20,6 +21,7 @@ export default createStore<RootState>({
UploadFilesModule, UploadFilesModule,
DesignDetailModule, DesignDetailModule,
HomeStoreModule, HomeStoreModule,
UserHabit UserHabit,
Woekspace
} }
}) })

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

@@ -4,6 +4,7 @@ import { message } from "ant-design-vue";
interface UploadFiles{ interface UploadFiles{
moodboard:any, moodboard:any,
disposeMoodboard:any,
moodboardFiles:any, moodboardFiles:any,
moodboardGenerateFiles:any, moodboardGenerateFiles:any,
moodboardMaterialFiles:any, moodboardMaterialFiles:any,
@@ -24,6 +25,7 @@ interface UploadFiles{
const UploadFilesModule : Module<UploadFiles,RootState> = { const UploadFilesModule : Module<UploadFiles,RootState> = {
state:{ state:{
moodboard:[], moodboard:[],
disposeMoodboard:[],
moodboardFiles:[], moodboardFiles:[],
moodboardGenerateFiles:[], moodboardGenerateFiles:[],
moodboardMaterialFiles:[], moodboardMaterialFiles:[],
@@ -46,6 +48,9 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
setMoodboardFile(state,files){ setMoodboardFile(state,files){
state.moodboardFiles = files state.moodboardFiles = files
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles] state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
},
setDisposeMoodboard(state,files){
state.disposeMoodboard = [files]
}, },
setMoodboardGenerateFiles(state,files){ setMoodboardGenerateFiles(state,files){
state.moodboardGenerateFiles = files state.moodboardGenerateFiles = files
@@ -55,11 +60,11 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
state.moodboardMaterialFiles = files state.moodboardMaterialFiles = files
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles] state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
}, },
addGenerateMaterialFils(state,data){ addGenerateMaterialFils(state,data:any){
let file let file
let arr = state.moodboard let arr = state.moodboard
if(data.type_.type1 == 'generate'){ if(data.type_.type1 == 'generate'){
data.resData.designType = 'generate'
if(data.type_.type2 == 'Moodboard'){ if(data.type_.type2 == 'Moodboard'){
file = state.moodboardGenerateFiles file = state.moodboardGenerateFiles
}else if(data.type_.type2 == 'Sketchboard'){ }else if(data.type_.type2 == 'Sketchboard'){
@@ -68,12 +73,13 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
file = state.printGenerateFiles file = state.printGenerateFiles
} }
}else{ }else{
data.resData.designType = 'library'
if(data.type_.type2 == 'Moodboard'){ if(data.type_.type2 == 'Moodboard'){
file = state.moodboardMaterialFiles file = state.moodboardMaterialFiles
}else if(data.type_.type2 == 'Sketchboard'){ }else if(data.type_.type2 == 'Sketchboard'){
file = state.sketchMaterialFiles file = state.sketchMaterialFiles
}else if(data.type_.type2 == 'Printboard'){ }else if(data.type_.type2 == 'Printboard'){
file = state.printGenerateFiles file = state.printMaterialFiles
} }
} }
if(file.length == 0){ if(file.length == 0){
@@ -117,7 +123,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
}else if(data.type_.type2 == 'Sketchboard'){ }else if(data.type_.type2 == 'Sketchboard'){
state.sketchMaterialFiles = file state.sketchMaterialFiles = file
}else if(data.type_.type2 == 'Printboard'){ }else if(data.type_.type2 == 'Printboard'){
state.printMaterialFiles = state.printMaterialFiles state.printMaterialFiles = file
} }
} }
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles] state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
@@ -159,6 +165,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
setAllBoardData(state){ setAllBoardData(state){
state.allBoardData = { state.allBoardData = {
moodboardFiles:state.moodboard, moodboardFiles:state.moodboard,
disposeMoodboard:state.disposeMoodboard,
printboardFiles:state.printboard, printboardFiles:state.printboard,
colorBoards:state.colorBoards, colorBoards:state.colorBoards,
sketchboardFiles:state.sketchboard, sketchboardFiles:state.sketchboard,
@@ -185,12 +192,13 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
state.colorBoards = [] state.colorBoards = []
state.marketingSketchFiles = [] state.marketingSketchFiles = []
state.moodTemplateId = '' state.moodTemplateId = ''
state.disposeMoodboard = []
}, },
setMoodTemplateId(state,moodTemplateId){ setMoodTemplateId(state,moodTemplateId){
state.moodTemplateId = moodTemplateId state.moodTemplateId = moodTemplateId
}, },
clearMoodTemplateId(state){ clearMoodTemplateId(state){
state.moodTemplateId = '' state.disposeMoodboard = []
}, },
}, },
actions:{ actions:{

25
src/store/workspace/workspace.ts Normal file
View File

@@ -0,0 +1,25 @@
import {Module} from 'vuex'
import {RootState} from '../index'
interface DesignDetail{
workspace:any,
}
const Woekspace : Module<DesignDetail,RootState> = {
state:{
workspace:{}
},
mutations:{
setWoekspace(state,files){
state.workspace = files
},
},
actions:{
}
}
export default Woekspace

52
src/tool/domTurnImg.js
View File

@@ -2,12 +2,57 @@ import html2canvas from "html2canvas";
const getJpeg = dom =>{ const getJpeg = dom =>{
return new Promise(resolve =>{ return new Promise(resolve =>{
html2canvas(dom,{useCORS: true,}).then(canvas =>{ html2canvas(dom,{useCORS: true,}).then(canvas =>{
const jpeg = canvas.toDataURL('image/jpeg',1.0); let base64 = canvas.toDataURL('image/jpeg',.9);
resolve(base64ToFile(jpeg)) let quality = 0.9 // 压缩系数0-1之间
console.log(jpeg,'========='); let newImage = new Image()
newImage.src = base64
newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
let imgWidth,
imgHeight
let w = undefined
newImage.onload = function () {
w = this.width * .8
imgWidth = this.width
imgHeight = this.height
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w
canvas.height = w * (imgHeight / imgWidth)
} else {
canvas.height = w
canvas.width = w * (imgWidth / imgHeight)
}
} else {
canvas.width = imgWidth
canvas.height = imgHeight
quality = 0.6
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(this, 0, 0, canvas.width, canvas.height) // // 这里面的 this 指向 newImage
let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
let fileData = dataURLtoFile(smallBase64);
let fileOfBlob = new File([fileData], new Date() + ".jpg"); // 命名图片名
// console.log(smallBase64);
// resolve(base64ToFile(fileOfBlob))
resolve(fileOfBlob)
}
}) })
}) })
} }
//base64转成blob
function dataURLtoFile(dataURI, type) {
let binary = atob(dataURI.split(",")[1]);
let array = [];
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
}
//转换
const base64ToFile = urlData =>{ const base64ToFile = urlData =>{
const arr = urlData.split(','); const arr = urlData.split(',');
const mime = arr[0].match(/:(.*?);/)[1] const mime = arr[0].match(/:(.*?);/)[1]
@@ -17,7 +62,6 @@ const base64ToFile = urlData =>{
while (n--){ while (n--){
ia[n] = bytes.charCodeAt(n); ia[n] = bytes.charCodeAt(n);
} }
console.log(new File([ia],'jpeg',{type:mime}));
return new File([ia],'jpeg',{type:mime}) return new File([ia],'jpeg',{type:mime})
} }

18
src/tool/https.js
View File

@@ -19,8 +19,15 @@ import { message } from 'ant-design-vue';
// }else{ // }else{
// axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址 // axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
// } // }
let httpIp
if(process.env.NODE_ENV == 'development'){
httpIp = 'http://192.168.1.6:10086'
}else{
httpIp = ''
}
console.log(httpIp);
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址 axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
console.log(process.env.VUE_APP_BASE_URL); // console.log(process.env.VUE_APP_BASE_URL);
//POST传参序列化(添加请求拦截器) //POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => { axios.interceptors.request.use((config) => {
//在发送请求之前做某件事 //在发送请求之前做某件事
@@ -75,10 +82,10 @@ export const Https = {
elementSavePrint:'/api/element/savePrint',//保存印花 elementSavePrint:'/api/element/savePrint',//保存印花
getRgbByTcx:'/api/element/getRgbByTcx', // 通过hsv值获取潘通信息 getRgbByTcx:'/api/element/getRgbByTcx', // 通过hsv值获取潘通信息
getRgbByHsv:'/api/element/getRgbByHsv', //通过hsv值获取潘通信息 getRgbByHsv:'/api/element/getRgbByHsv', //通过hsv值获取潘通信息
designCollection:'/api/design/designCollection', //设计 Conllection designCollection:`${httpIp}/api/design/designCollection`, //设计 Conllection
reDesignCollection:'/api/design/reDesignCollection',//重新设计 Conllection reDesignCollection:'/api/design/reDesignCollection',//重新设计 Conllection
countDesignProcess:'/api/design/countDesignProcess', //统计design进度 countDesignProcess:'/api/design/countDesignProcess', //统计design进度
getRgbByHsvBatch:'http://192.168.1.6:10086/api/element/getRgbByHsvBatch', //通过hsv值数组批量获取潘通信息 getRgbByHsvBatch:`${httpIp}/api/element/getRgbByHsvBatch`, //通过hsv值数组批量获取潘通信息
designLike:'/api/design/like', //Design Like designLike:'/api/design/like', //Design Like
designDislike: '/api/design/dislike', //Design Dislike designDislike: '/api/design/dislike', //Design Dislike
queryUserGroup:'/api/history/queryUserGroup', //History用户分页分组列表 queryUserGroup:'/api/history/queryUserGroup', //History用户分页分组列表
@@ -99,8 +106,11 @@ export const Https = {
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点 saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
libraryModelsDot:'/api/library/modelsDot',//Models打点预览 libraryModelsDot:'/api/library/modelsDot',//Models打点预览
pythonChatStream:'/api/python/chatStream',//机器人助力 pythonChatStream:'/api/python/chatStream',//机器人助力
workspaceDetail:'http://192.168.1.6:10086/api/workspace/detail',//用户习惯详情 workspaceDetail:`${httpIp}/api/workspace/detail`,//用户习惯详情
workspaceList:`${httpIp}/api/workspace/list`,
sketchAndPrintGenerate:'/api/generate/sketchAndPrint',//sketchGenerate生成图片 sketchAndPrintGenerate:'/api/generate/sketchAndPrint',//sketchGenerate生成图片
generateLike:'/api/generate/like',//喜欢ganerate图片
elementUpload:'/api/element/upload',//上传图片
}, },

36
src/tool/util.js
View File

@@ -59,23 +59,25 @@ function rgbToHsv([R, G, B]) {
B /= 255 B /= 255
const max = Math.max(R, G, B) const max = Math.max(R, G, B)
const min = Math.min(R, G, B) const min = Math.min(R, G, B)
const range = max - min const delta = max - min
let V = max var H,S,V
let S = V === 0 ? 0 : range / V if (delta === 0) {
let H = 0 H = 0;
if (R === V) H = (60 * (G - B)) / range } else if (max === R) {
if (G === V) H = 120 + (60 * (B - R)) / range H = ((G - B) / delta) % 6;
if (B === V) H = 240 + (60 * (R - G)) / range } else if (max === G) {
H = (B - R) / delta + 2;
if (range === 0) H = 0 } else { // max === B
if (H < 0) H += 360 H = (R - G) / delta + 4;
H = (H / 2) * (256 / 180) }
S *= 255 H = Math.round(H * 60); // 范围为 0-360
V *= 255 if (max === 0) {
S = 0;
H = parseInt(H) } else {
S = parseInt(S) S = delta / max;
V = parseInt(V) }
S = Math.round(S*100); // 范围为 0-100
V = Math.round(max*100); // 范围为 0-100
return [H, S, V] return [H, S, V]
} }

215
src/views/HomeView.vue
View File

@@ -53,45 +53,7 @@
@click="resDesignCollection()"> @click="resDesignCollection()">
Redesign Redesign
</div> </div>
<!-- <div class="system_scale">
<div class="system_silder">
<a-slider id="system_silder" :tooltipVisible="true"
v-model:value="system_scale_value" :tip-formatter="formatter"
:getTooltipPopupContainer="(triggerNode) =>
triggerNode.parentNode
" />
</div> </div>
<div class="sacle_left_tip">Designer</div>
<div class="sacle_right_tip">System</div>
</div>
<div class="switch_component_block" @click="change_switch()">
<div class="switch_item">Outfit</div>
<div class="switch_item">Category</div>
<div :class="[
'switch_white_button',
switch_open
? 'switch_open_button'
: '',
]">
{{
switch_open ? "Category" : "Outfit"
}}
</div>
</div> -->
<div class="select_block" v-show="!switch_open">
<a-select ref="select" v-model:value="designType" :options="disignTypeList">
<template #suffixIcon><span class="icon iconfont icon-xiala"
style="color: #343579"></span></template>
</a-select>
</div>
</div>
<!-- <div class="right_top_right">
<div class="content_header_button" @click="selectModels()">
<span class="content_header_button_des">Mannequins</span><span
class="icon iconfont icon-xiala"></span>
</div>
</div> -->
</div> </div>
<div class="right_content_block"> <div class="right_content_block">
@@ -250,34 +212,9 @@ export default defineComponent({
}, },
data() { data() {
return { return {
system_scale_value: 30,
switch_open: true,
designType: "Outwear",
isHaveReviewCollection: false, isHaveReviewCollection: false,
isFinishLoading: false, isFinishLoading: false,
isShowMark: false, //导出的loading蒙层 isShowMark: false, //导出的loading蒙层
disignTypeList: [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
],
indicator: h(LoadingOutlined, { indicator: h(LoadingOutlined, {
style: { style: {
fontSize: "4.8rem", fontSize: "4.8rem",
@@ -316,9 +253,7 @@ export default defineComponent({
} }
}, },
methods: { methods: {
change_switch() {
this.switch_open = !this.switch_open;
},
formatter(value: number) { formatter(value: number) {
return `${value}%`; return `${value}%`;
@@ -346,7 +281,7 @@ export default defineComponent({
.then((res) => { .then((res) => {
_this.store.commit("setAllBoardData"); _this.store.commit("setAllBoardData");
_this.isHaveReviewCollection = true; _this.isHaveReviewCollection = true;
_this.isFinishLoading = true; _this.isFinishLoading = false;
}) })
.catch((res) => { .catch((res) => {
_this.isFinishLoading = false; _this.isFinishLoading = false;
@@ -394,8 +329,6 @@ export default defineComponent({
designNewCollection() { designNewCollection() {
let { colorBoards } = let { colorBoards } =
this.store.state.UploadFilesModule.allBoardData; this.store.state.UploadFilesModule.allBoardData;
// console.log(colorBoards);
if (!colorBoards || colorBoards?.length < 1) { if (!colorBoards || colorBoards?.length < 1) {
message.error( message.error(
"You must choose one or more colors for further process." "You must choose one or more colors for further process."
@@ -403,9 +336,14 @@ export default defineComponent({
return; return;
} }
let data = this.getDesignData(""); let data = this.getDesignData("");
console.log(data);
Https.axiosPost(Https.httpUrls.designCollection, data) Https.axiosPost(Https.httpUrls.designCollection, data)
.then((rv: any) => { .then((rv: any) => {
if (rv) { if (rv) {
console.log(rv);
this.store.commit( this.store.commit(
"setDesignCollectionList", "setDesignCollectionList",
rv.designCollectionItems rv.designCollectionItems
@@ -462,26 +400,28 @@ export default defineComponent({
let { let {
moodboardFiles, moodboardFiles,
printboardFiles, printboardFiles,
disposeMoodboard,
// generatePrintFiles, // generatePrintFiles,
colorBoards, colorBoards,
sketchboardFiles, sketchboardFiles,
marketingSketchFiles, marketingSketchFiles,
moodTemplateId, moodTemplateId,
} = this.store.state.UploadFilesModule.allBoardData; } = this.store.state.UploadFilesModule.allBoardData;
// let new_printboardFiles = // console.log(this.store.state.UploadFilesModule.allBoardData);
// printboardFiles.concat(generatePrintFiles); let workspace = this.store.state.Workspace.workspace
let data: any = { let data: any = {
colorBoards: this.getColorBoard(colorBoards), colorBoards: this.getColorBoard(colorBoards),
marketingSketchs: this.getBoardId(marketingSketchFiles), // marketingSketchs: this.getBoardId(marketingSketchFiles),
moodBoards: this.getBoardId(moodboardFiles), moodBoards: this.getBoardId(moodboardFiles),
printBoards: this.getPrintId(printboardFiles), printBoards: this.getPrintId(printboardFiles),
// printBoards: this.getPrintId(new_printboardFiles), // printBoards: this.getPrintId(new_printboardFiles),
sketchBoards: this.getSkecthBoard(sketchboardFiles), sketchBoards: this.getSkecthBoard(sketchboardFiles),
switchCategory: !this.switch_open ? this.designType : "",
singleOverall: !this.switch_open ? "single" : "overall", switchCategory: workspace.soverallSingle ? workspace.position : "",
systemScale: this.system_scale_value / 100, singleOverall: workspace.soverallSingle ? "single" : "overall",
systemScale: workspace.systemDesignerPercentage,
templateId: this.templateId, templateId: this.templateId,
moodTemplateId: moodTemplateId ? String(moodTemplateId) : null, moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}; };
if (designCollectionId) { if (designCollectionId) {
@@ -507,6 +447,8 @@ export default defineComponent({
}, },
getBoardId(boardData: any) { getBoardId(boardData: any) {
console.log(boardData);
let dataList = boardData.map((v: any) => { let dataList = boardData.map((v: any) => {
let data: any = { let data: any = {
id: v.resData.id, id: v.resData.id,
@@ -733,8 +675,6 @@ export default defineComponent({
let blob: any = dataURLtoBlob( let blob: any = dataURLtoBlob(
canvas.toDataURL("image/png") canvas.toDataURL("image/png")
); );
// console.log(blob);
let allBoardData: any = let allBoardData: any =
this.store.state.UploadFilesModule.allBoardData; this.store.state.UploadFilesModule.allBoardData;
let index = 0; let index = 0;
@@ -777,6 +717,7 @@ export default defineComponent({
collectionList: any, collectionList: any,
type: string type: string
) { ) {
let designDetail: any = this.$refs.designDetail; let designDetail: any = this.$refs.designDetail;
let data = { let data = {
design: design, design: design,
@@ -987,124 +928,6 @@ export default defineComponent({
.button_margin_14 { .button_margin_14 {
margin-left: 1.4rem; margin-left: 1.4rem;
} }
.system_scale {
margin-left: 7rem;
width: 12rem;
position: relative;
.system_scale_title {
font-size: 13px;
font-weight: 400;
color: #030303;
}
.system_silder {
margin-top: 0.5rem;
display: flex;
align-items: center;
position: absolute;
.system_silder_value {
font-size: 1.3rem;
color: #030303;
margin-left: 0.9rem;
}
}
.sacle_left_tip {
position: absolute;
left: -2rem;
bottom: -3.8rem;
font-size: 1.4rem;
line-height: 1.4rem;
color: #030303;
}
.sacle_right_tip {
position: absolute;
right: -2rem;
bottom: -3.8rem;
font-size: 1.4rem;
line-height: 1.4rem;
color: #030303;
}
}
.switch_component_block {
width: 14rem;
height: 4rem;
background: #343579;
border: 1px solid #141533;
padding: 0.4rem 0.6rem;
margin-left: 7rem;
box-sizing: border-box;
display: flex;
position: relative;
cursor: pointer;
.switch_item {
width: 50%;
height: 100%;
line-height: 3rem;
font-size: 1.2rem;
text-align: center;
color: #ffffff;
}
.switch_white_button {
position: absolute;
width: calc(50% - 0.6rem);
height: 3rem;
left: 0.6rem;
top: 0.4rem;
background: #ffffff;
transition-duration: 0.5s;
line-height: 3rem;
font-size: 1.2rem;
text-align: center;
color: #030303;
&.switch_open_button {
left: 50%;
}
}
}
.select_block {
margin-left: 2rem;
.icon-xiala {
color: #1a1a1a !important;
}
}
}
.right_top_right {
display: flex;
align-items: center;
.content_header_button {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
border: 1px solid #000000;
padding: 0 1.2rem 0 0.8rem;
font-size: 1.3rem;
color: #1a1a1a;
cursor: pointer;
.content_header_button_des {
margin-right: 1rem;
font-weight: bold;
}
.icon-xiala {
transform: rotate(-90deg);
color: #1a1a1a;
}
}
} }
} }

15
src/views/LoginPage.vue
View File

@@ -139,9 +139,9 @@
</div> </div>
<!-- 邮箱登录 end --> <!-- 邮箱登录 end -->
<div class="login_content_right"> <!-- <div class="login_content_right">
<img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt=""> <img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt="">
</div> </div> -->
</div> </div>
<!-- 忘记密码 start --> <!-- 忘记密码 start -->
@@ -265,6 +265,7 @@ export default defineComponent({
time: 60, //60秒倒计时 time: 60, //60秒倒计时
passwordType:'password', passwordType:'password',
userId:'', userId:'',
loginTime:true
}; };
}, },
methods: { methods: {
@@ -399,9 +400,8 @@ export default defineComponent({
}; };
// this.loginType = 'email' // this.loginType = 'email'
// this.emailStap = 2; // this.emailStap = 2;
let loginTime = true if(this.loginTime){
if(loginTime){ this.loginTime = false
loginTime = false
Https.axiosPost(Https.httpUrls.preLogin, data).then( Https.axiosPost(Https.httpUrls.preLogin, data).then(
(rv: any) => { (rv: any) => {
// if (rv) { // if (rv) {
@@ -418,9 +418,10 @@ export default defineComponent({
} }
} }
); );
setTimeout(() => { setTimeout(() => {
loginTime = true this.loginTime = true
}, 1000); }, 2000);
} }
} }

3
vue.config.js
View File

@@ -6,6 +6,7 @@ module.exports = defineConfig({
transpileDependencies: ['vuetify'], transpileDependencies: ['vuetify'],
lintOnSave:false,//关闭语法检查 lintOnSave:false,//关闭语法检查
productionSourceMap: false,//打包不生成map文件，减少文件大小
devServer: { devServer: {
// hot: true, // 热更新 // hot: true, // 热更新
// port: '8060', // port: '8060',
@@ -20,7 +21,7 @@ module.exports = defineConfig({
// changeOrigin: true, //是否允许跨越 // changeOrigin: true, //是否允许跨越
// } // }
'/api':{ '/api':{
target:'http://18.167.251.121:5567', target:'http://192.168.1.9:5567',
changeOrigin:true, changeOrigin:true,
} }
}, },