product
This commit is contained in:
X1627315083
11
package-lock.json
generated
11
package-lock.json
generated
@@ -18,6 +18,7 @@
|
||||
"element-plus": "^2.4.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"fingerprintjs2": "^2.1.4",
|
||||
"gsap": "^3.12.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jszip": "^3.10.1",
|
||||
"md5": "^2.3.0",
|
||||
@@ -6893,6 +6894,11 @@
|
||||
"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/gsap": {
|
||||
"version": "3.12.5",
|
||||
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.5.tgz",
|
||||
"integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
|
||||
},
|
||||
"node_modules/gzip-size": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
|
||||
@@ -17722,6 +17728,11 @@
|
||||
"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
|
||||
"dev": true
|
||||
},
|
||||
"gsap": {
|
||||
"version": "3.12.5",
|
||||
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.5.tgz",
|
||||
"integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
|
||||
},
|
||||
"gzip-size": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
"element-plus": "^2.4.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"fingerprintjs2": "^2.1.4",
|
||||
"gsap": "^3.12.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jszip": "^3.10.1",
|
||||
"md5": "^2.3.0",
|
||||
|
||||
@@ -38,7 +38,7 @@ li {
|
||||
border: 2px solid;
|
||||
}
|
||||
.button_second {
|
||||
width: 11.85rem;
|
||||
width: 14rem;
|
||||
text-align: center;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
@@ -1166,7 +1166,8 @@ li {
|
||||
.design_detail_modal_component .ant-modal-body,
|
||||
.designOpenrtion_modal .ant-modal-body,
|
||||
.library_page .ant-modal-body,
|
||||
.Export .ant-modal-body {
|
||||
.Export .ant-modal-body,
|
||||
.productImg_modal .ant-modal-body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.collection_modal .ant-upload.ant-upload-select-picture-card,
|
||||
@@ -1175,7 +1176,8 @@ li {
|
||||
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
|
||||
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card,
|
||||
.library_page .ant-upload.ant-upload-select-picture-card,
|
||||
.Export .ant-upload.ant-upload-select-picture-card {
|
||||
.Export .ant-upload.ant-upload-select-picture-card,
|
||||
.productImg_modal .ant-upload.ant-upload-select-picture-card {
|
||||
background: #FFFFFF;
|
||||
width: calc(6rem*1.2);
|
||||
height: calc(6rem*1.2);
|
||||
@@ -1189,7 +1191,8 @@ li {
|
||||
.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,
|
||||
.library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
|
||||
.Export .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
|
||||
.Export .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
|
||||
.productImg_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
|
||||
font-size: calc(3.2rem*1.2);
|
||||
color: #B7B7B7;
|
||||
}
|
||||
@@ -1199,7 +1202,8 @@ li {
|
||||
.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,
|
||||
.library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text,
|
||||
.Export .ant-upload.ant-upload-select-picture-card .ant-upload-text {
|
||||
.Export .ant-upload.ant-upload-select-picture-card .ant-upload-text,
|
||||
.productImg_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text {
|
||||
font-size: calc(1.6rem*1.2);
|
||||
color: #B7B7B7;
|
||||
}
|
||||
@@ -1209,7 +1213,8 @@ li {
|
||||
.design_detail_modal_component .ant-upload-list-picture-card-container,
|
||||
.designOpenrtion_modal .ant-upload-list-picture-card-container,
|
||||
.library_page .ant-upload-list-picture-card-container,
|
||||
.Export .ant-upload-list-picture-card-container {
|
||||
.Export .ant-upload-list-picture-card-container,
|
||||
.productImg_modal .ant-upload-list-picture-card-container {
|
||||
display: none !important;
|
||||
}
|
||||
.collection_modal .ant-upload-picture-card-wrapper,
|
||||
@@ -1218,7 +1223,8 @@ li {
|
||||
.design_detail_modal_component .ant-upload-picture-card-wrapper,
|
||||
.designOpenrtion_modal .ant-upload-picture-card-wrapper,
|
||||
.library_page .ant-upload-picture-card-wrapper,
|
||||
.Export .ant-upload-picture-card-wrapper {
|
||||
.Export .ant-upload-picture-card-wrapper,
|
||||
.productImg_modal .ant-upload-picture-card-wrapper {
|
||||
width: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -1323,10 +1329,20 @@ textarea:focus {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box.active input,
|
||||
.design_detail_modal_component .input_border .input_box.active input,
|
||||
.library_page .input_border .input_box.active input {
|
||||
.collection_modal_body .input_border .input_box .inputShowText,
|
||||
.design_detail_modal_component .input_border .input_box .inputShowText,
|
||||
.library_page .input_border .input_box .inputShowText {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box.active .input_box_btnBox,
|
||||
.design_detail_modal_component .input_border .input_box.active .input_box_btnBox,
|
||||
.library_page .input_border .input_box.active .input_box_btnBox,
|
||||
.collection_modal_body .input_border .input_box.active textarea,
|
||||
.design_detail_modal_component .input_border .input_box.active textarea,
|
||||
.library_page .input_border .input_box.active textarea {
|
||||
border: 1px solid #ff0001;
|
||||
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
@@ -1334,6 +1350,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .input_box.active span,
|
||||
.library_page .input_border .input_box.active span {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
color: rgba(255, 0, 0.7);
|
||||
}
|
||||
.collection_modal_body .input_border .search_keyword,
|
||||
.design_detail_modal_component .input_border .search_keyword,
|
||||
@@ -1376,6 +1394,7 @@ textarea:focus {
|
||||
padding: 0.5rem 1rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||
@@ -1391,6 +1410,11 @@ textarea:focus {
|
||||
display: flex;
|
||||
float: left;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
|
||||
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
|
||||
.library_page .input_border .input_box_btnBox .ant-spin-text {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.collection_modal_body .input_border .upload_item .upload_file_item,
|
||||
.design_detail_modal_component .input_border .upload_item .upload_file_item,
|
||||
.library_page .input_border .upload_item .upload_file_item {
|
||||
@@ -1444,8 +1468,15 @@ textarea:focus {
|
||||
z-index: 4;
|
||||
width: 4rem;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
}
|
||||
.collection_modal_body .input_border .fi.fi-br-loading,
|
||||
.design_detail_modal_component .input_border .fi.fi-br-loading,
|
||||
.library_page .input_border .fi.fi-br-loading {
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.collection_modal_body .input_border .fi.active,
|
||||
.design_detail_modal_component .input_border .fi.active,
|
||||
.library_page .input_border .fi.active {
|
||||
@@ -1489,7 +1520,7 @@ textarea:focus {
|
||||
width: var(--width);
|
||||
border-radius: 4px;
|
||||
height: 20rem;
|
||||
top: 0.2rem;
|
||||
top: 0rem;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
.collection_modal_body .input_border .generage_btn,
|
||||
@@ -1664,6 +1695,32 @@ textarea:focus {
|
||||
padding: 8rem 5rem !important;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.generalScroll {
|
||||
/* 进度 */
|
||||
/* 轨道 */
|
||||
}
|
||||
.generalScroll.generalScroll::-webkit-scrollbar {
|
||||
width: calc(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.generalScroll.generalScroll::-webkit-scrollbar-thumb {
|
||||
border-radius: calc(1rem*1.2);
|
||||
background: rgba(238, 238, 244, 0);
|
||||
}
|
||||
.generalScroll.generalScroll::-webkit-scrollbar-track {
|
||||
border-radius: calc(1rem*1.2);
|
||||
background: rgba(238, 238, 244, 0);
|
||||
}
|
||||
.generalScroll.generalScroll:hover {
|
||||
/* 轨道 */
|
||||
}
|
||||
.generalScroll.generalScroll:hover.generalScroll::-webkit-scrollbar-thumb {
|
||||
background: #543087;
|
||||
}
|
||||
.generalScroll.generalScroll:hover.generalScroll::-webkit-scrollbar-track {
|
||||
background: rgba(84, 48, 135, 0.2);
|
||||
}
|
||||
.scroll_style::-webkit-scrollbar-button:single-button {
|
||||
display: block;
|
||||
border-style: solid;
|
||||
|
||||
@@ -42,7 +42,7 @@ input:focus{
|
||||
border: 2px solid;
|
||||
}
|
||||
.button_second{
|
||||
width: 11.85rem;
|
||||
width: 14rem;
|
||||
text-align: center;
|
||||
// background: #343579;
|
||||
height: 4rem;
|
||||
@@ -1305,7 +1305,7 @@ input:focus{
|
||||
}
|
||||
}
|
||||
//collection 弹窗
|
||||
.collection_modal,.generalModel_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page,.Export{
|
||||
.collection_modal,.generalModel_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page,.Export,.productImg_modal{
|
||||
|
||||
.ant-modal-body{
|
||||
overflow-y: hidden;
|
||||
@@ -1407,7 +1407,7 @@ textarea:focus{
|
||||
outline: none; /* 清除默认焦点样式 */
|
||||
}
|
||||
//设计input和上传按钮样式
|
||||
.collection_modal_body,.design_detail_modal_component,.library_page{
|
||||
.collection_modal_body,.design_detail_modal_component,.library_page,{
|
||||
.input_border{
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
@@ -1424,15 +1424,21 @@ textarea:focus{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
.inputShowText{
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
&.active{
|
||||
input{
|
||||
.input_box_btnBox,textarea{
|
||||
// color: rgb(255, 0, .7);
|
||||
border: 1px solid rgb(255, 0, .7);
|
||||
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
span{
|
||||
opacity: 1;
|
||||
display: block;
|
||||
color: rgba(255, 0, .7);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1468,6 +1474,7 @@ textarea:focus{
|
||||
padding: .5rem 1rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search_keyword_center_item:last-child{
|
||||
@@ -1480,6 +1487,9 @@ textarea:focus{
|
||||
width: var(--width);
|
||||
display: flex;
|
||||
float: left;
|
||||
.ant-spin-text{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.upload_item{
|
||||
.upload_file_item{
|
||||
@@ -1523,8 +1533,12 @@ textarea:focus{
|
||||
z-index: 4;
|
||||
width: 4rem;
|
||||
align-items: center;
|
||||
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
&.fi-br-loading{
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
&.active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -1558,7 +1572,7 @@ textarea:focus{
|
||||
width: var(--width);
|
||||
border-radius: 4px;
|
||||
height: 20rem;
|
||||
top: .2rem;
|
||||
top: 0rem;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
@@ -1729,7 +1743,33 @@ textarea:focus{
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.generalScroll{
|
||||
&.generalScroll::-webkit-scrollbar {
|
||||
width: calc(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
transition: all .3s;
|
||||
}
|
||||
/* 进度 */
|
||||
&.generalScroll::-webkit-scrollbar-thumb {
|
||||
border-radius: calc(1rem*1.2);
|
||||
background: rgba(238, 238, 244, 0);
|
||||
}
|
||||
/* 轨道 */
|
||||
&.generalScroll::-webkit-scrollbar-track {
|
||||
border-radius: calc(1rem*1.2);
|
||||
background: rgba(238, 238, 244, 0);
|
||||
}
|
||||
&.generalScroll:hover {
|
||||
// overflow-x: scroll;
|
||||
&.generalScroll::-webkit-scrollbar-thumb {
|
||||
background: #543087;
|
||||
}
|
||||
/* 轨道 */
|
||||
&.generalScroll::-webkit-scrollbar-track {
|
||||
background: rgba(84, 48, 135,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll_style{
|
||||
&::-webkit-scrollbar-button:single-button {
|
||||
// background-color: #ffffff;
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
<div class="habit_btn">
|
||||
<div class="model_current">
|
||||
<div class="model_text">{{ $t('Habit.Current') }}</div>
|
||||
<div class="model_img">
|
||||
<div class="model_img generalScroll">
|
||||
<img :src="workspaceItem.mannequinUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,14 +149,14 @@
|
||||
{{ $t('Habit.User') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="model_img" v-show="systemSeleves" v-mousewheel>
|
||||
<div class="model_img generalScroll" v-show="systemSeleves" v-mousewheel>
|
||||
<div class="model_img_item">
|
||||
<div v-for="(item,index) in mannequins?.[0]?.modelList" :key="item.id">
|
||||
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'Library')" :class="[driver__.index == 4?driver__.driver?'Guide_img':'':'']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model_img" v-show="!systemSeleves" v-mousewheel>
|
||||
<div class="model_img generalScroll" v-show="!systemSeleves" v-mousewheel>
|
||||
<div class="model_img_item">
|
||||
<div v-for="(item,index) in mannequins?.[1]?.modelList" :key="item.id">
|
||||
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')" :class="[driver__.index == 4?driver__.driver?'Guide_img':'':'']">
|
||||
@@ -1128,33 +1128,7 @@ export default defineComponent({
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
&.model_img::-webkit-scrollbar {
|
||||
/* 竖轴的宽度 */
|
||||
width: calc(1rem*1.2);
|
||||
/* 横轴的高度 */
|
||||
height: calc(1rem*1.2);
|
||||
transition: all .3s;
|
||||
}
|
||||
/* 进度 */
|
||||
&.model_img::-webkit-scrollbar-thumb {
|
||||
border-radius: calc(1rem*1.2);
|
||||
background: rgba(238, 238, 244, 0);
|
||||
}
|
||||
/* 轨道 */
|
||||
&.model_img::-webkit-scrollbar-track {
|
||||
border-radius: calc(1rem*1.2);
|
||||
background: rgba(238, 238, 244, 0);
|
||||
}
|
||||
&.model_img:hover {
|
||||
// overflow-x: scroll;
|
||||
&.model_img::-webkit-scrollbar-thumb {
|
||||
background: #543087;
|
||||
}
|
||||
/* 轨道 */
|
||||
&.model_img::-webkit-scrollbar-track {
|
||||
background: rgba(84, 48, 135,.2);
|
||||
}
|
||||
}
|
||||
|
||||
>div{
|
||||
display: flex;
|
||||
|
||||
|
||||
@@ -465,7 +465,8 @@ export default defineComponent({
|
||||
position.y = maxHeight;
|
||||
}
|
||||
}
|
||||
setCanvasImage(img,key,position.x,position.y)//设置图片
|
||||
console.log(allItem,key);
|
||||
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
|
||||
position.height = img.height * scaleWH + margin;
|
||||
if (key == "sketchboardFiles") {
|
||||
if (sketchGroupingItem.length <3) {
|
||||
@@ -611,7 +612,27 @@ export default defineComponent({
|
||||
}
|
||||
return imgWidth
|
||||
}
|
||||
let setCanvasImage = (img,key,left,top)=>{
|
||||
let setCanvasImage = (img,key,left,top,data)=>{
|
||||
// data
|
||||
console.log(data);
|
||||
let imgId = 0
|
||||
let designType = ''//表示收藏或者generate
|
||||
let level1Type = ''//表示sketch或者print
|
||||
if(key == 'disposeMoodboard'){
|
||||
imgId = data.id
|
||||
|
||||
}else if(key == 'moodboardFiles'){
|
||||
|
||||
}else if(key == 'sketchboardFiles'){
|
||||
|
||||
}else if(key == 'printboardFiles'){
|
||||
|
||||
}else if(key == 'likeDesignCollectionList'){
|
||||
|
||||
}else if(key == 'upImgFiles'){
|
||||
|
||||
}
|
||||
// let id =
|
||||
let proportion = img.height / img.width; //计算图形宽高比例
|
||||
let imgWidth = setImageWidth(key)
|
||||
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
|
||||
@@ -916,6 +937,10 @@ export default defineComponent({
|
||||
//设置画布监听修改添加事件，用来做撤回功能
|
||||
let updateCanvasState = (str) =>{
|
||||
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
||||
console.log(canvas.toJSON());
|
||||
var json = canvas.toJSON(['aaaID']);
|
||||
const d = canvas.toObject(['myFabricType1', 'myFabricType2'])
|
||||
console.log(json,d);
|
||||
if(str == 'loadingCompleted'){
|
||||
// reverseCanvasState.value.push(canvasAsJson);
|
||||
}
|
||||
@@ -1128,7 +1153,7 @@ export default defineComponent({
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
fabric.Image.fromURL(e.target.result,(img) => {
|
||||
setCanvasImage(img,"sketchboardFiles",0,canvas.wrapperEl.parentNode.scrollTop)
|
||||
setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,e.target.result)
|
||||
canvas.add(img);
|
||||
},{ crossOrigin: "Anonymous" })
|
||||
input.value = ''
|
||||
|
||||
@@ -1,40 +1,6 @@
|
||||
<template>
|
||||
<div class="generate">
|
||||
<div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'" class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
|
||||
<!-- <div v-show="type_.type2 != 'Sketchboard'">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="checkbox[0].type"
|
||||
@click="setKeyword(0)"
|
||||
/>
|
||||
<span>{{ $t('Generate.ImageOnly') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
:class="[driver__.driver ? driver__.index == 29?'showEvents':'':'',type_.type2 == 'Sketchboard'?'Guide_1_9_1':'']"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="checkbox[1].type"
|
||||
@click="setKeyword(1)"
|
||||
/>
|
||||
<span>{{ $t('Generate.TextOnly') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="Guide_1_2_3" :class="[driver__.driver?'showEvents':'']">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="checkbox[2].type"
|
||||
@click="setKeyword(2)"
|
||||
/>
|
||||
<span>{{ $t('Generate.TextImage') }}</span>
|
||||
</label>
|
||||
</div> -->
|
||||
<!-- <generalMenu :dataList="checkbox" @setprintModel="emitSetKeyword" :item="selectCheckbox" :deleteItem="type_.type2 == 'Sketchboard'?0:-1" :driver__="driver__.driver" :driverClass="{class1: '',class2:'',classList:{item1:'',item2:'',item3:''}}"></generalMenu> -->
|
||||
|
||||
<div v-if="type_.type2 == 'Printboard' && scene.value == 'Pattern'" class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
|
||||
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_2_4',class2:'Guide_1_2_5'}"></generalMenu>
|
||||
<!-- <generalMenu :dataList="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
|
||||
<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
|
||||
@@ -54,26 +20,19 @@
|
||||
class="upload_file_item Guide_1_2_7"
|
||||
v-for="(file, index) in sketchboardList"
|
||||
:key="file"
|
||||
:class="[checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
|
||||
:class="[driver__.driver?'showEvents':'']"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin :indicator="indicator" tip="Uploading..." />
|
||||
<a-spin size="small" :indicator="indicator" tip="Uploading..." />
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done' || file?.base64"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<!-- <div
|
||||
class="delete_file_block"
|
||||
:class="[driver__.driver?'hideEvents':'']"
|
||||
@click.stop="deleteFile(index)"
|
||||
>
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div> -->
|
||||
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
|
||||
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
|
||||
</div>
|
||||
@@ -89,7 +48,7 @@
|
||||
@keydown.enter="getgenerate()"
|
||||
@click="inputFocus()"
|
||||
/>
|
||||
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard'">
|
||||
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
||||
<a-upload
|
||||
class="search_upImg"
|
||||
:capture="null"
|
||||
@@ -107,10 +66,9 @@
|
||||
>
|
||||
</a-upload>
|
||||
</i>
|
||||
<i v-show="scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
|
||||
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
|
||||
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
|
||||
<i v-show="scene?.value == 'slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
|
||||
<!-- <i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i> -->
|
||||
</div>
|
||||
<textarea
|
||||
v-show="isTextarea"
|
||||
@@ -131,7 +89,7 @@
|
||||
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
<span ref="inputShowText"></span>
|
||||
<span class="inputShowText" ref="inputShowText"></span>
|
||||
</div>
|
||||
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
|
||||
<div class="search_keyword_center">
|
||||
@@ -172,7 +130,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="generage_img Guide_1_6" :style="[loadingShow?'overflow:hidden':'']">
|
||||
<div class="generage_img Guide_1_6" :style="[isGenerate?'overflow:hidden':'']">
|
||||
<div
|
||||
class="generage_img_item"
|
||||
v-for="(item, index) in fileList"
|
||||
@@ -181,6 +139,7 @@
|
||||
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
|
||||
>
|
||||
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
|
||||
<sketchCategory v-if="type_.type2 == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
|
||||
<div
|
||||
class="delete_like_file_block left1"
|
||||
:class="[driver__.driver?'hideEvents':'',]"
|
||||
@@ -195,10 +154,6 @@
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
<div v-show="remGenerate" :class="[driver__.driver?'hideEvents':'']" class="mark_loading_btn" @click="removeGenerate">{{$t('Generate.Close')}}</div>
|
||||
</div>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
||||
@@ -220,33 +175,18 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
||||
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
scaleImage,
|
||||
generalMenu,
|
||||
createSlogan,
|
||||
sketchCategory,
|
||||
},
|
||||
props: ["msg",'sketchCatecoryList','scene'],
|
||||
setup(props) {
|
||||
// console.log(prop.msg);
|
||||
let checkbox = ref([
|
||||
{
|
||||
name: "image",
|
||||
type: true,
|
||||
label:useI18n().t('Generate.ImageOnly'),
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
type: false,
|
||||
label:useI18n().t('Generate.TextOnly'),
|
||||
},
|
||||
{
|
||||
name: "text-image",
|
||||
type: false,
|
||||
label:useI18n().t('Generate.TextImage')
|
||||
},
|
||||
]);
|
||||
let selectCheckbox = checkbox.value[0]
|
||||
|
||||
let printModelList = ref([
|
||||
{
|
||||
num:'',
|
||||
@@ -271,69 +211,37 @@ export default defineComponent({
|
||||
value:'Painting Style',
|
||||
label:useI18n().t('Generate.Model1')
|
||||
})
|
||||
let checkboxImage = ref()
|
||||
let imgList = ref([]);
|
||||
let selectImgList: any = ref([]);
|
||||
let selectImgListIds: any = ref([]);
|
||||
let isShowLoading: any = ref(false);
|
||||
let selectCode: any = ref("");
|
||||
let currentPage: any = ref(1);
|
||||
let searchPictureName = ref("");
|
||||
let pageSize = ref(20);
|
||||
let total = ref(0);
|
||||
let searcMaterialhName: any = ref(""); //搜索名字
|
||||
let designType: any = ref(null);
|
||||
let store = useStore();
|
||||
let fileList: any = ref([
|
||||
|
||||
]);
|
||||
let sketchboardList:any = ref([])
|
||||
let collectionElementid = ref()
|
||||
let level2Type = ref('')
|
||||
|
||||
// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
|
||||
// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
|
||||
// let sketchCatecoryList:any = ref([])
|
||||
let workspace:any = ref({})
|
||||
|
||||
let loadingShow = ref(false)
|
||||
let isGenerate = ref(false)//判断是否正在进行generate
|
||||
let inputShow = ref(false)//表示是否出现红框
|
||||
let inputTime = ref()
|
||||
let driver__:any = inject('driver__')
|
||||
let {t} = useI18n()
|
||||
let isMmerge = ref(false)
|
||||
let isTest = ref()
|
||||
let userInfo:any = {}
|
||||
let generateId:any = ref([])
|
||||
let generateTime:any = ref()
|
||||
let generateProceedList = ref([])
|
||||
let remGenerate:any = ref(false)
|
||||
let remGenerateTime:any = ref()
|
||||
let scene:any = props.scene
|
||||
return {
|
||||
imgList,
|
||||
selectImgList,
|
||||
selectImgListIds,
|
||||
isShowLoading,
|
||||
selectCode,
|
||||
currentPage,
|
||||
searchPictureName,
|
||||
pageSize,
|
||||
total,
|
||||
searcMaterialhName,
|
||||
designType,
|
||||
checkbox,
|
||||
selectCheckbox,
|
||||
store,
|
||||
fileList,
|
||||
sketchboardList,
|
||||
collectionElementid,
|
||||
level2Type,
|
||||
checkboxImage,
|
||||
printModel,
|
||||
printModelList,
|
||||
loadingShow,
|
||||
isGenerate,
|
||||
scene,
|
||||
|
||||
@@ -345,10 +253,8 @@ export default defineComponent({
|
||||
inputTime,
|
||||
driver__,
|
||||
t,
|
||||
isMmerge,
|
||||
isTest,
|
||||
userInfo,
|
||||
generateId,
|
||||
generateTime,
|
||||
generateProceedList,
|
||||
remGenerate,
|
||||
@@ -376,6 +282,7 @@ export default defineComponent({
|
||||
type1: "generate",
|
||||
type2: prop.msg,
|
||||
},
|
||||
workspaceCom:{},
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
@@ -394,39 +301,15 @@ export default defineComponent({
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl();
|
||||
this.workspace = computed(()=>{
|
||||
this.workspaceCom = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
if(this.type_.type2 == 'Sketchboard'){
|
||||
this.checkbox=[
|
||||
{
|
||||
name: "image",
|
||||
type: false,
|
||||
label:useI18n().t('Generate.ImageOnly'),
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
type: true,
|
||||
label:useI18n().t('Generate.TextOnly'),
|
||||
},
|
||||
{
|
||||
name: "text-image",
|
||||
type: false,
|
||||
label:useI18n().t('Generate.TextImage')
|
||||
},
|
||||
]
|
||||
this.selectCheckbox = this.checkbox[1]
|
||||
|
||||
}
|
||||
|
||||
this.$emit('generateCheckbox',this.checkbox[0].type)
|
||||
},
|
||||
watch:{
|
||||
driver__:{
|
||||
handler(newVal,oldVal){
|
||||
if(this.type_.type2 == 'Printboard'){
|
||||
if(newVal.index >= 14 && newVal.index < 15){
|
||||
this.setKeyword(newVal.index-14)
|
||||
}else{
|
||||
}
|
||||
}else if(this.type_.type2 == 'Sketchboard'){
|
||||
@@ -435,7 +318,8 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
},
|
||||
workspace(newVal,oldVal){
|
||||
workspaceCom(newVal,oldVal){
|
||||
this.workspace = newVal
|
||||
this.upload.gender = newVal?.sexEnum?.name
|
||||
},
|
||||
// moodboarList(newVal,oldVal){
|
||||
@@ -480,7 +364,6 @@ export default defineComponent({
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file: any) {
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
@@ -495,61 +378,12 @@ export default defineComponent({
|
||||
message.info(this.t('Generate.jsContent2'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
emitSetKeyword(data:any){
|
||||
this.selectCheckbox = data
|
||||
this.checkbox.forEach((item:any,index:any) => {
|
||||
if(item.name == data.name){
|
||||
this.setKeyword(index)
|
||||
}
|
||||
});
|
||||
},
|
||||
setKeyword(num: any) {
|
||||
this.checkbox.forEach((v: any) => {
|
||||
v.type = false;
|
||||
});
|
||||
|
||||
nextTick().then(()=>{
|
||||
this.checkbox[num].type = true
|
||||
this.$emit('generateCheckbox',this.checkbox[0].type)
|
||||
this.checkboxImage = this.checkbox[1].type
|
||||
// if(this.checkboxImage){
|
||||
// this.sketchboardList.forEach((v:any)=>{
|
||||
// v.checked = false
|
||||
// })
|
||||
// }
|
||||
})
|
||||
if(num == 1){
|
||||
this.level2Type = ''//点击文字生成就把衣服类型清空
|
||||
}
|
||||
if(num == 2 || num == 1){
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
}
|
||||
},
|
||||
setprintModel(value:any){
|
||||
this.printModel = value
|
||||
},
|
||||
getgenerate(){
|
||||
clearInterval(this.remGenerateTime)
|
||||
// this.remGenerate = false
|
||||
// // if(this.isTest){//试用用户禁止使用
|
||||
// // message.info(
|
||||
// // this.t('isTest.available')
|
||||
// // );
|
||||
// // return
|
||||
// // }
|
||||
// if(this.isGenerate){
|
||||
// return
|
||||
// }
|
||||
// // if(!this.searchPictureName){
|
||||
// // message.info(
|
||||
// // this.t('Generate.jsContent3')
|
||||
// // );
|
||||
// // return
|
||||
// // }
|
||||
|
||||
if(this.searchPictureName){
|
||||
let arr = this.searchPictureName.split(/\s+/).length
|
||||
if(arr > 250){
|
||||
@@ -559,7 +393,7 @@ export default defineComponent({
|
||||
return
|
||||
}
|
||||
}else{
|
||||
if(this.sketchboardList[0].imgUrl){
|
||||
if(this.sketchboardList?.[0]?.imgUrl){
|
||||
|
||||
}else{
|
||||
message.info(
|
||||
@@ -569,23 +403,36 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
}
|
||||
let level2Type = ''
|
||||
let collectionElementId = ''
|
||||
let base64 = ''
|
||||
if(this.sketchboardList?.[0]){
|
||||
level2Type = this.sketchboardList[0].categoryValue?this.sketchboardList[0].categoryValue:''
|
||||
collectionElementId = this.sketchboardList[0].id
|
||||
if(this.sketchboardList[0].base64){
|
||||
base64 = this.sketchboardList[0].imgUrl
|
||||
}
|
||||
}
|
||||
if(this.upload.level1Type == "Sketchboard"){
|
||||
|
||||
console.log(this.sketchboardList);
|
||||
}else if(this.upload.level1Type == "Printboard"){
|
||||
level2Type = this.scene?.value
|
||||
}
|
||||
let data = {
|
||||
generateType:'',
|
||||
generateType:'text',
|
||||
designType:'collection',
|
||||
collectionElementId:this.sketchboardList[0].id?this.sketchboardList[0].id:'',
|
||||
collectionElementId:collectionElementId,
|
||||
level1Type:this.upload.level1Type,
|
||||
level2Type:this.scene?.value?this.scene?.value:'',
|
||||
level2Type:level2Type,
|
||||
text:this.searchPictureName,
|
||||
userId:this?.userInfo?.userId,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:1,//为1就是Print
|
||||
isTestUser:this.driver__.driver?false:this.isTest,
|
||||
gender:'',
|
||||
base64:this.sketchboardList[0].base64?this.sketchboardList[0].imgUrl:'',
|
||||
gender:this.workspace.sexEnum.name,
|
||||
base64:base64,
|
||||
}
|
||||
console.log(data);
|
||||
|
||||
return
|
||||
this.isGenerate = true
|
||||
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
|
||||
(rv) => {
|
||||
@@ -610,31 +457,6 @@ export default defineComponent({
|
||||
).catch(res=>{
|
||||
this.isGenerate = false
|
||||
});
|
||||
// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
||||
// (rv) => {
|
||||
// console.log(rv)
|
||||
// if(rv){
|
||||
// this.fileList = []
|
||||
// let arr
|
||||
// rv.generatedCollectionItems.forEach((v:any,index:number)=>{
|
||||
// arr = {
|
||||
// id:rv.generatedCollectionItems[index].generateItemId,
|
||||
// imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
|
||||
// like:rv.generatedCollectionItems[index].isLiked
|
||||
// }
|
||||
// this.fileList.push(arr)
|
||||
// this.loadingShow = false
|
||||
// })
|
||||
// nextTick().then(()=>{
|
||||
// if(this.driver__.driver){
|
||||
// driverObj__.moveNext()
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// ).catch(res=>{
|
||||
// this.loadingShow = false
|
||||
// });
|
||||
},
|
||||
setGenerate(dataList:any){
|
||||
this.remGenerateTime = setTimeout(()=>{
|
||||
@@ -653,6 +475,12 @@ export default defineComponent({
|
||||
element.id_ = GO.id++
|
||||
this.fileList.unshift(element)
|
||||
data = data.filter((item:any) => item !== element.taskId);
|
||||
this.sketchCatecoryList.forEach((itemCategory:any) => {
|
||||
if(itemCategory.value == element.category){
|
||||
element.categoryValue = itemCategory?.name
|
||||
element.category = itemCategory?.value
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
|
||||
@@ -794,39 +622,7 @@ export default defineComponent({
|
||||
setSloganData(data:any){
|
||||
this.sketchboardList = data
|
||||
},
|
||||
// setSketchboardItem(item:any){
|
||||
// if(this.checkboxImage){
|
||||
// return
|
||||
// }
|
||||
// let parent:any = this.$parent
|
||||
|
||||
// if(item.checked){
|
||||
// item.checked = false
|
||||
// this.collectionElementid = ''
|
||||
// }else{
|
||||
// let obj = {
|
||||
// imgId : item.id,
|
||||
// imgUr: item.imgUrl,
|
||||
// level2Type:item.category,
|
||||
// designType:'collection'
|
||||
// }
|
||||
// // parent.useGenerate.designType = 'collection'
|
||||
// this.$emit('setGenerate',obj)
|
||||
// this.sketchboardList.forEach((v:any)=>{
|
||||
// if(v.checked){
|
||||
// v.checked = false
|
||||
// }
|
||||
// })
|
||||
// item.checked = true
|
||||
// this.collectionElementid = item.id
|
||||
// }
|
||||
// this.level2Type = item.category
|
||||
// if(this.driver__.driver){
|
||||
// driverObj__.moveNext()
|
||||
// }
|
||||
// },
|
||||
deleteFile(item: any) {
|
||||
this.collectionElementid = ''
|
||||
this.sketchboardList.splice(item, 1);
|
||||
// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
|
||||
// this.printModel = {
|
||||
@@ -839,10 +635,18 @@ export default defineComponent({
|
||||
},
|
||||
likeFile(item:any,str:string){
|
||||
if(str == 'like'){
|
||||
console.log();
|
||||
|
||||
let level2Type = ''
|
||||
if(this.upload.level1Type == "Sketchboard"){
|
||||
level2Type = item.category
|
||||
}else if(this.upload.level1Type == "Printboard"){
|
||||
level2Type = this.scene?.value
|
||||
}
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
level1Type:"Moodboard",
|
||||
level2Type: '',
|
||||
level1Type:this.type_.type2,
|
||||
level2Type: level2Type,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
||||
@@ -888,13 +692,6 @@ export default defineComponent({
|
||||
closeModal() {
|
||||
// this.myMaterialModalShow = false
|
||||
this.searchPictureName = "";
|
||||
this.designType = null;
|
||||
this.selectImgList = [];
|
||||
this.selectImgListIds = [];
|
||||
this.imgList = [];
|
||||
this.currentPage = 1;
|
||||
// this.pageSize = 10;
|
||||
this.total = 0;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -930,21 +727,6 @@ export default defineComponent({
|
||||
z-index: 2;
|
||||
}
|
||||
.generate_checkbox {
|
||||
z-index: 10;
|
||||
div {
|
||||
label {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
input {
|
||||
margin-right: calc(0.5rem*1.2);
|
||||
padding-left: calc(1.5rem*1.2);
|
||||
}
|
||||
span {
|
||||
font-size: calc(1.2rem*1.2);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.generage_input {
|
||||
}
|
||||
@@ -968,6 +750,9 @@ export default defineComponent({
|
||||
.delete_like_file_block{
|
||||
pointer-events:none;
|
||||
}
|
||||
.operate_file_block{
|
||||
pointer-events:none;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: calc(10rem*1.2);
|
||||
@@ -995,13 +780,6 @@ export default defineComponent({
|
||||
// img {
|
||||
// }
|
||||
// }
|
||||
&.forbidden{
|
||||
cursor:not-allowed;
|
||||
img{
|
||||
cursor:not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_file_item_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -22,17 +22,17 @@
|
||||
<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
|
||||
<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
|
||||
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
|
||||
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
|
||||
<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
|
||||
<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
|
||||
<img src="@/assets/images/homePage/loading.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="no_data_block loading_block" v-show="isShowLoading">
|
||||
<!-- <div class="no_data_block loading_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<!-- </a-modal> -->
|
||||
@@ -519,7 +519,7 @@ export default defineComponent({
|
||||
&.material_content_body::-webkit-scrollbar{display: none;}
|
||||
|
||||
.content_img_item{
|
||||
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
|
||||
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||
display: inline-block;
|
||||
width: calc(10rem*1.2);
|
||||
height: calc(10rem*1.2);
|
||||
|
||||
@@ -53,9 +53,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin_block" v-show="file?.status === 'done'">
|
||||
<!-- <div class="pin_block" v-show="file?.status === 'done'">
|
||||
<a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="printboardList.length < 8">
|
||||
@@ -92,7 +92,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<Material v-show="openClick == 2" ref="Material" msg="Printboard" @setLibrary = setSetchboardGenerate @confirmSelect="confirmSelect"></Material>
|
||||
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
|
||||
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard"></Generate>
|
||||
</div>
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
@@ -100,90 +100,40 @@
|
||||
<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
|
||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<!-- <div class="modal_img">
|
||||
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<div class="input_border">
|
||||
<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
|
||||
<div class="input_box_btnBox">
|
||||
<input class="search_input"
|
||||
@click="inputFocus()"
|
||||
@input="ifMaximumLength"
|
||||
@keydown.enter="getgenerate"
|
||||
:maxlength='inputShow?0:9999'
|
||||
:class="{forbidden:generateCheckbox}"
|
||||
:readonly="generateCheckbox"
|
||||
:placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
||||
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
|
||||
</div>
|
||||
<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
|
||||
</textarea>
|
||||
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
|
||||
<!-- <div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
|
||||
{{ $t('PrintboardUpload.Generate') }}
|
||||
</div> -->
|
||||
<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
|
||||
{{ $t('PrintboardUpload.Generate') }}
|
||||
<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
|
||||
</div>
|
||||
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
|
||||
<i class="fi fi-br-loading"></i>
|
||||
</div>
|
||||
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
<span ref="inputShowText"></span>
|
||||
</div>
|
||||
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
|
||||
<div class="search_keyword_center">
|
||||
<div class="search_keyword_center_left">
|
||||
<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
|
||||
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="modal_img" :style="[loadingShow?'overflow:hidden':'']">
|
||||
<div v-for="item,index in generateList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'',driver__.driver?'showEvents':'']" >
|
||||
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
|
||||
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
|
||||
<div
|
||||
<div class="modal_accomplish">
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
|
||||
<img v-lazy="item.imgUrl">
|
||||
<!-- <div
|
||||
class="delete_like_file_block left1"
|
||||
:class="[driver__.driver?'hideEvents':'']"
|
||||
>
|
||||
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
|
||||
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
|
||||
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
|
||||
</div>
|
||||
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
|
||||
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
</div>
|
||||
<div class="pin_block">
|
||||
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
<div v-show="remGenerate" :class="[driver__.driver?'hideEvents':'']" class="mark_loading_btn" @click="removeGenerate">{{$t('Generate.Close')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 取消请求 -->
|
||||
<!-- <button @click="canelAxios">9999999999999999999</button> -->
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
||||
</div>
|
||||
@@ -220,28 +170,12 @@ export default defineComponent({
|
||||
let store:any =useStore()
|
||||
let fileList:any = ref([]),//选中的文件id数据
|
||||
printImgList:any = ref([]), //print的印花图片
|
||||
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard}),
|
||||
printBoards:any = computed(()=>{
|
||||
return store.state.UploadFilesModule.printboard
|
||||
|
||||
})
|
||||
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
|
||||
let openClick: any = ref(1);
|
||||
let generateCheckbox:any = ref()
|
||||
let generateList:any = ref([
|
||||
])
|
||||
let loadingShow = ref(false)
|
||||
let isGenerate = ref(false)
|
||||
let inputShow = ref(false)
|
||||
let inputTime = ref()
|
||||
let driver__:any = inject('driver__')
|
||||
let {t} = useI18n()
|
||||
let isTest = ref()
|
||||
let userInfo:any = {}
|
||||
let generateTime:any = ref()
|
||||
let generateProceedList = ref([])
|
||||
let remGenerate:any = ref(false)
|
||||
let remGenerateTime:any = ref()
|
||||
let isUseGenerate = ref(false)
|
||||
let useGenerate:any = ref({
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
@@ -252,43 +186,31 @@ export default defineComponent({
|
||||
let workspace = ref({})
|
||||
let sceneList = ref([
|
||||
{
|
||||
label:'pattern',
|
||||
value:'pattern'
|
||||
label:'Pattern',
|
||||
value:'Pattern'
|
||||
},{
|
||||
label:'slogan',
|
||||
value:'slogan'
|
||||
label:'Slogan',
|
||||
value:'Slogan'
|
||||
},{
|
||||
label:'logo',
|
||||
value:'logo'
|
||||
label:'Logo',
|
||||
value:'Logo'
|
||||
},
|
||||
])
|
||||
let scene = ref({
|
||||
label:'pattern',
|
||||
value:'pattern'
|
||||
label:'Pattern',
|
||||
value:'Pattern'
|
||||
})
|
||||
let openMenu = ref(false)
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
moodBoards,
|
||||
printBoards,
|
||||
openClick,
|
||||
generateCheckbox,
|
||||
generateList,
|
||||
loadingShow,
|
||||
isGenerate,
|
||||
inputShow,
|
||||
inputTime,
|
||||
driver__,
|
||||
t,
|
||||
isTest,
|
||||
userInfo,
|
||||
generateProceedList,
|
||||
generateTime,
|
||||
remGenerate,
|
||||
remGenerateTime,
|
||||
useGenerate,
|
||||
isUseGenerate,
|
||||
workspace,
|
||||
sceneList,
|
||||
scene,
|
||||
@@ -296,24 +218,9 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
// getPinLength(){
|
||||
// let selectLength:any = 0
|
||||
// for(let item of this.printBoards){
|
||||
// if(item.pin){
|
||||
// selectLength++
|
||||
// }
|
||||
// }
|
||||
// return selectLength
|
||||
// }
|
||||
|
||||
},
|
||||
watch:{
|
||||
printBoards:{
|
||||
handler(newVal:any,oldVal:any){
|
||||
// if(newVal.length>=2 && this.driver__.driver && newVal.length!=oldVal.length){
|
||||
// driverObj__.moveTo(7)
|
||||
// }
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
@@ -340,7 +247,6 @@ export default defineComponent({
|
||||
printboardList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.printboard
|
||||
}),
|
||||
source:axios.CancelToken.source(),
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
}
|
||||
@@ -362,26 +268,6 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//设置library里面选择generate图片
|
||||
setUseGenerate(){
|
||||
this.isUseGenerate = !this.isUseGenerate
|
||||
let printMaterialFiles:any = computed(()=>{
|
||||
return this.store.state.UploadFilesModule.printMaterialFiles
|
||||
})
|
||||
let Material:any = this.$refs.Material
|
||||
Material.setUseGenerate(printMaterialFiles.value)
|
||||
if(this.isUseGenerate){
|
||||
let generate:any = this.$refs.Generate
|
||||
generate.checkbox.forEach((item:any)=>{
|
||||
if(item.name == "text-image"){
|
||||
item.type = true
|
||||
}else{
|
||||
item.type = false
|
||||
}
|
||||
})
|
||||
this.generateCheckbox = false
|
||||
}
|
||||
},
|
||||
setSetchboardGenerate(item:any){
|
||||
this.useGenerate.imgId = item.imgId
|
||||
this.useGenerate.imgUrl = item.imgUrl
|
||||
@@ -391,19 +277,12 @@ export default defineComponent({
|
||||
let generate:any = this.$refs.Generate
|
||||
|
||||
if(item.designType == 'collection'){
|
||||
Material.setUseGenerate([])
|
||||
}else {
|
||||
generate.sketchboardList.forEach((item:any) => {
|
||||
item.checked = false
|
||||
});
|
||||
}
|
||||
},
|
||||
//取消请求测试
|
||||
canelAxios(){
|
||||
// Https.axiosCanel()
|
||||
this.source.cancel('请求被取消');
|
||||
this.source = axios.CancelToken.source()
|
||||
},
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
let material:any = this.$refs.Material
|
||||
@@ -525,21 +404,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
},
|
||||
deleteGenerate(index:any){
|
||||
if(this.isGenerate)return
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('LibraryPage.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.generateList.splice(index,1)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
customRequest(data:any){
|
||||
let new_data = {
|
||||
@@ -661,7 +525,6 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
recollection(){
|
||||
this.isUseGenerate = false
|
||||
this.useGenerate = {
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
@@ -711,337 +574,17 @@ export default defineComponent({
|
||||
}
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
|
||||
},
|
||||
getgenerateCheckbox(value:any){
|
||||
this.generateCheckbox = value
|
||||
},
|
||||
setTextareaShow(){
|
||||
if(this.generateCheckbox) return
|
||||
this.isTextarea = !this.isTextarea
|
||||
},
|
||||
cliSetKeyword(value:any){
|
||||
let str = ''
|
||||
if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
|
||||
str = ','
|
||||
}
|
||||
this.captionGeneration += str + value
|
||||
},
|
||||
ifMaximumLength(){
|
||||
this.inputTime = setTimeout(()=>{
|
||||
if(this.captionGeneration?.split(/\s+/).length > 250){
|
||||
(this.$refs.inputShowText as any).innerHTML = this.t('PrintboardUpload.maximumLength')
|
||||
this.inputShow = true
|
||||
}else{
|
||||
this.inputShow = false
|
||||
}
|
||||
},500)
|
||||
},
|
||||
inputFocus(){
|
||||
if(this.isInputFocus) return
|
||||
if(this.generateCheckbox) return
|
||||
this.isInputFocus = true
|
||||
let setDomCli = ()=>{
|
||||
this.isInputFocus = false
|
||||
document.removeEventListener('click',setDomCli)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
document.addEventListener('click',setDomCli)
|
||||
},200)
|
||||
},
|
||||
getgenerate(){
|
||||
clearInterval(this.remGenerateTime)
|
||||
this.remGenerate = false
|
||||
// if(this.isTest){//试用用户禁止使用
|
||||
// message.warning(
|
||||
// this.t('isTest.available')
|
||||
// );
|
||||
// return
|
||||
// }
|
||||
if(this.isGenerate){
|
||||
return
|
||||
}
|
||||
let generage:any = this.$refs.Generate
|
||||
|
||||
if(generage.printModel.num == 'Generate'){
|
||||
this.generatePrint()
|
||||
return
|
||||
}
|
||||
//如果是通过moodboard随即图片生成
|
||||
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
|
||||
|
||||
let data = {
|
||||
generateType:generateType,
|
||||
// designType:this.useGenerate.designType,
|
||||
designType:'collection',
|
||||
collectionElementId:this.useGenerate.imgId,
|
||||
// collectionElementId:generage?.collectionElementid,
|
||||
level1Type:this.upload.level1Type,
|
||||
level2Type:'',
|
||||
text:`${generage.printModel.value},${this.captionGeneration}`,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
userId:this?.userInfo?.userId,
|
||||
isTestUser:this.driver__.driver?false:this.isTest,
|
||||
version:1,//为1就是Print
|
||||
gender:'',
|
||||
}
|
||||
if(generateType == 'image'){
|
||||
if(generage?.collectionElementid){
|
||||
data.text = generage.printModel.value
|
||||
|
||||
}else{
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent4')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
// this.beforeUpload(false)
|
||||
if(this.captionGeneration){
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 250){
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent5')
|
||||
);
|
||||
return
|
||||
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent6')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text-image'){
|
||||
if(this.useGenerate.imgId){
|
||||
if(this.captionGeneration){
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 250){
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent5')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent6')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent4')
|
||||
);
|
||||
return
|
||||
}
|
||||
}
|
||||
this.isGenerate = true
|
||||
//取消请求
|
||||
// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data,{cancelToken: this.source?.token}).then(
|
||||
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
|
||||
(rv) => {
|
||||
if(data.isTestUser){
|
||||
if(rv.leftUsageCount >= 1){
|
||||
message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Printboard')}));
|
||||
}else if(rv.leftUsageCount == 0){
|
||||
message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Printboard')}));
|
||||
this.isGenerate = false
|
||||
return
|
||||
}
|
||||
}
|
||||
// rv.uniqueId.forEach((item:any) => {
|
||||
// let arr:any = {}
|
||||
// arr.taskId = item
|
||||
// arr.status = 'execution'
|
||||
// this.generateList.unshift(arr)
|
||||
// });
|
||||
this.setGenerate(rv.uniqueId)
|
||||
|
||||
}
|
||||
).catch(res=>{
|
||||
this.isGenerate = false
|
||||
});
|
||||
},
|
||||
setGenerate(dataList:any){
|
||||
this.remGenerateTime = setTimeout(()=>{
|
||||
this.remGenerate = true
|
||||
},10000)
|
||||
let data = dataList
|
||||
let dataNum = dataList.length
|
||||
this.generateTime = setInterval(()=>{
|
||||
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
||||
(rv) => {
|
||||
if(this.isGenerate){//防止取消后有正在执行的获取状态
|
||||
this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
||||
rv.forEach((element:any) => {
|
||||
if(element.status == 'Success'){
|
||||
element.imgUrl = element.url
|
||||
element.id_ = GO.id++
|
||||
this.generateList.unshift(element)
|
||||
data = data.filter((item:any) => item !== element.taskId);
|
||||
}
|
||||
});
|
||||
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
|
||||
if(rv.filter((item:any)=>item.status == 'Invalid').length == dataNum){
|
||||
message.info(this.t('Generate.effectPoor'));
|
||||
}
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
clearInterval(this.generateTime)
|
||||
clearInterval(this.remGenerateTime)
|
||||
this.remGenerate = false
|
||||
this.isGenerate = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
).catch(res=>{
|
||||
clearInterval(this.generateTime)
|
||||
clearInterval(this.remGenerateTime)
|
||||
this.remGenerate = false
|
||||
this.isGenerate = false
|
||||
});
|
||||
},1000)
|
||||
},
|
||||
removeGenerate(){
|
||||
//取消操作
|
||||
this.isGenerate = false
|
||||
this.remGenerate = false
|
||||
clearInterval(this.generateTime)
|
||||
if(this.generateProceedList){
|
||||
let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
|
||||
let data = {uniqueId:str,userId:this?.userInfo?.userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
|
||||
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
||||
(rv) => {
|
||||
this.generateProceedList = []
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
},
|
||||
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
|
||||
|
||||
},
|
||||
|
||||
generatePrint(){
|
||||
let data:any = {}
|
||||
//随机获取图片id
|
||||
let generage:any = this.$refs.Generate
|
||||
let generateList = generage.sketchboardList
|
||||
let isGenerateListChecked = generateList.filter((item:any) => item.checked)
|
||||
if(!this.moodBoards.length){ //mood没有图片
|
||||
let index1 = -1
|
||||
let index2 = -2
|
||||
if(isGenerateListChecked.length == 0){ //没pin住
|
||||
index1 = this.randomRange(0, generateList.length, -1)
|
||||
index2 = this.randomRange(0, generateList.length, index1)
|
||||
}else if(isGenerateListChecked.lengthh === 1){ //pin住1个
|
||||
generateList.forEach((element:any,index:number) => {
|
||||
if(element.checked){
|
||||
index1 = index
|
||||
}
|
||||
});
|
||||
index2 = this.randomRange(0, generateList.length, index1)
|
||||
}else{ //pin住多个
|
||||
let selectIndexList:any = []
|
||||
generateList.forEach((element:any,index:number) => {
|
||||
if(element.pin){
|
||||
selectIndexList.push(index)
|
||||
}
|
||||
});
|
||||
index1 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
|
||||
index2 = this.randomRange(0, generateList.length, selectIndexList[index1]) //除了选中的外再来一个
|
||||
}
|
||||
data = {
|
||||
select1Id:generateList[index1].id,
|
||||
select2Id:generateList[index2].id
|
||||
}
|
||||
}else{
|
||||
let index1 = this.randomRange(0, this.moodBoards.length, -1)
|
||||
let index2 = -2
|
||||
if(isGenerateListChecked.length == 0){ //没pin住
|
||||
index2 = this.randomRange(0, generateList.length, -1)
|
||||
}else if(isGenerateListChecked.lengthh === 1){ //pin住1个
|
||||
generateList.forEach((element:any,index:number) => {
|
||||
if(element.pin){
|
||||
index2 = index
|
||||
}
|
||||
});
|
||||
}else{ //pin住多个
|
||||
let selectIndexList:any = []
|
||||
generateList.forEach((element:any,index:number) => {
|
||||
if(element.pin){
|
||||
selectIndexList.push(index)
|
||||
}
|
||||
});
|
||||
index2 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
|
||||
}
|
||||
data = {
|
||||
select1Id:this.moodBoards[index1].resData.id,
|
||||
select2Id:generateList[index2].id
|
||||
}
|
||||
}
|
||||
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
this.loadingShow = true
|
||||
Https.axiosPost(Https.httpUrls.elementGeneratePrint, data).then((rv) =>{
|
||||
if(rv){
|
||||
this.generateList = []
|
||||
let value = {
|
||||
id:rv.generateItemId,
|
||||
imgUrl:rv.generateItemUrl,
|
||||
id_:GO.id++,
|
||||
like:rv.isLiked
|
||||
}
|
||||
this.generateList.push(value)
|
||||
this.loadingShow = false
|
||||
|
||||
}
|
||||
}).catch(res=>{
|
||||
this.loadingShow = false
|
||||
})
|
||||
|
||||
},
|
||||
scaleImage(index:any){
|
||||
let scaleImage:any = this.$refs.scaleImage
|
||||
scaleImage.init(this.generateList,index)
|
||||
},
|
||||
generageAdd(item:any){
|
||||
// if(this.isUseGenerate){
|
||||
// let data = {
|
||||
// imgId:item.id,
|
||||
// imgUrl:item.imgUrl,
|
||||
// designType:'generate',
|
||||
// level2Type:'',
|
||||
// }
|
||||
// this.setSetchboardGenerate(data)
|
||||
// }else{
|
||||
item.type_ = {
|
||||
type1: "generate",
|
||||
type2: 'Printboard',
|
||||
},
|
||||
item.resData = JSON.parse(JSON.stringify(item))
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
// }
|
||||
|
||||
scaleImage.init(this.printboardList,index)
|
||||
},
|
||||
setSceneList(data:any){
|
||||
if(this.scene.value === data.value) return
|
||||
this.scene = data
|
||||
console.log(data);
|
||||
let generate:any = this.$refs.Generate
|
||||
generate.sketchboardList = []
|
||||
generate.scene = data
|
||||
this.openMenu = false
|
||||
},
|
||||
@@ -1163,7 +706,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
|
||||
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||
// margin: 0 2rem*1.2) 2rem*1.2) 0;
|
||||
display: inline-block;
|
||||
width: calc(10rem*1.2);
|
||||
@@ -1252,7 +795,7 @@ export default defineComponent({
|
||||
margin-left: calc(3rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_layout{
|
||||
.modal_text{
|
||||
font-size: var(--aida-fsize1-4);
|
||||
font-weight: 400;
|
||||
@@ -1263,6 +806,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
padding-bottom: 4.8rem;
|
||||
.modal_img{
|
||||
width: calc(40rem*1.2);
|
||||
height: calc(5rem*1.2);
|
||||
@@ -1326,11 +870,6 @@ export default defineComponent({
|
||||
padding-top: calc(2rem*1.2);
|
||||
padding-block: calc(2rem*1.2);
|
||||
}
|
||||
.input_box{
|
||||
input{
|
||||
|
||||
}
|
||||
}
|
||||
.modal_img{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -1338,11 +877,17 @@ export default defineComponent({
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
align-content: flex-start;
|
||||
.modal_imgItem:hover .delete_like_file_block{
|
||||
// display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
.modal_imgItem{
|
||||
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
|
||||
display: inline-block;
|
||||
width: calc(10rem*1.2);
|
||||
height: calc(10rem*1.2);
|
||||
// width: calc(10rem*1.2);
|
||||
// height: calc(10rem*1.2);
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@@ -1352,10 +897,7 @@ export default defineComponent({
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
// display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active{
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
|
||||
@@ -56,14 +56,14 @@
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
<!-- <div
|
||||
class="pin_block"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<a-checkbox v-model:checked="file.pin"
|
||||
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
|
||||
>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
@@ -114,8 +114,6 @@
|
||||
ref="Generate"
|
||||
msg="Sketchboard"
|
||||
:sketchCatecoryList="sketchCatecoryList"
|
||||
@generateCheckbox="getgenerateCheckbox"
|
||||
@setGenerate = setSetchboardGenerate
|
||||
></Generate>
|
||||
</div>
|
||||
<div class="modal_right">
|
||||
@@ -124,7 +122,7 @@
|
||||
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
|
||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||
</div>
|
||||
<div class="modal_img modal_img_x" v-mousewheel>
|
||||
<!-- <div class="modal_img modal_img_x" v-mousewheel>
|
||||
<div class="mousewheel">
|
||||
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
@@ -134,79 +132,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<div class="input_border">
|
||||
<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
|
||||
<div class="input_box_btnBox">
|
||||
<input class="search_input"
|
||||
@click="inputFocus()"
|
||||
@input="ifMaximumLength"
|
||||
@keydown.enter="getgenerate"
|
||||
:maxlength='inputShow?0:9999'
|
||||
:class="{forbidden:generateCheckbox}"
|
||||
:readonly="generateCheckbox"
|
||||
:placeholder="$t('PrintboardUpload.inputContent1')"
|
||||
v-model="captionGeneration">
|
||||
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
|
||||
</div>
|
||||
<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
|
||||
</textarea>
|
||||
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
|
||||
<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
|
||||
{{ $t('LibraryPage.Generate') }}
|
||||
</div>
|
||||
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
|
||||
<i class="fi fi-br-loading"></i>
|
||||
</div>
|
||||
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
<span ref="inputShowText"></span>
|
||||
</div>
|
||||
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
|
||||
<div class="search_keyword_center">
|
||||
<div class="search_keyword_center_left">
|
||||
<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
|
||||
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="modal_img" :style="[loadingShow?'overflow:hidden':'']">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[item.status != 'Success'?'hideEvents':'',driver__.driver?'showEvents':'',item?.checked?'active':'']" :key="item">
|
||||
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
|
||||
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
|
||||
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
|
||||
<div
|
||||
<div class="modal_accomplish">
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
|
||||
<img v-lazy="item.imgUrl">
|
||||
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :item="item" :driver__="driver__.driver"></sketchCategory>
|
||||
|
||||
<!-- <div
|
||||
class="delete_like_file_block left1"
|
||||
:class="[driver__.driver?'hideEvents':'']"
|
||||
>
|
||||
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
|
||||
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
|
||||
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
|
||||
</div>
|
||||
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
|
||||
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
</div>
|
||||
<div class="pin_block">
|
||||
<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
|
||||
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
|
||||
<div v-show="remGenerate" class="mark_loading_btn" :class="[driver__.driver?'hideEvents':'']" @click="removeGenerate">{{$t('Generate.Close')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
|
||||
@@ -238,20 +190,13 @@ export default defineComponent({
|
||||
let fileList: any = ref([
|
||||
]);
|
||||
let openClick: any = ref(1);
|
||||
let generateList:any = ref([
|
||||
])
|
||||
let store:any =useStore()
|
||||
|
||||
let generateCheckbox:any = ref()
|
||||
let loadingShow = ref(false)
|
||||
let isGenerate = ref(false)
|
||||
let store:any =useStore()
|
||||
|
||||
let sketchCatecoryList:any = computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
})
|
||||
let workspace:any = ref({})
|
||||
let inputShow = ref(false)
|
||||
let inputTime = ref()
|
||||
let sketchboardList:any = computed(()=>{
|
||||
return store.state.UploadFilesModule.sketchboard
|
||||
})
|
||||
@@ -259,11 +204,6 @@ export default defineComponent({
|
||||
let driver__:any = inject('driver__')
|
||||
let isTest = ref()
|
||||
let userInfo:any = {}
|
||||
let generateTime:any = ref()
|
||||
let generateProceedList = ref([])
|
||||
let remGenerate:any = ref(false)
|
||||
let remGenerateTime:any = ref()
|
||||
let isUseGenerate = ref(false)
|
||||
let useGenerate:any = ref({
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
@@ -274,26 +214,15 @@ export default defineComponent({
|
||||
return {
|
||||
fileList,
|
||||
openClick,
|
||||
generateList,
|
||||
store,
|
||||
generateCheckbox,
|
||||
loadingShow,
|
||||
isGenerate,
|
||||
sketchCatecoryList,
|
||||
workspace,
|
||||
inputShow,
|
||||
inputTime,
|
||||
sketchboardList,
|
||||
t,
|
||||
driver__,
|
||||
isTest,
|
||||
userInfo,
|
||||
generateTime,
|
||||
remGenerate,
|
||||
generateProceedList,
|
||||
remGenerateTime,
|
||||
useGenerate,
|
||||
isUseGenerate,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -314,6 +243,7 @@ export default defineComponent({
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
captionGeneration:'',
|
||||
workspaceCom:{},
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
@@ -362,7 +292,8 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
workspace(newVal,oldVal){
|
||||
workspaceCom(newVal,oldVal){
|
||||
this.workspace = newVal
|
||||
this.upload.gender = newVal?.sexEnum?.name
|
||||
},
|
||||
sketchboardList:{
|
||||
@@ -392,7 +323,7 @@ export default defineComponent({
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl();
|
||||
this.workspace = computed(()=>{
|
||||
this.workspaceCom = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
if(this.driver__.driver){
|
||||
@@ -402,25 +333,6 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setUseGenerate(){
|
||||
this.isUseGenerate = !this.isUseGenerate
|
||||
let sketchMaterialFiles:any = computed(()=>{
|
||||
return this.store.state.UploadFilesModule.sketchMaterialFiles
|
||||
})
|
||||
let Material:any = this.$refs.Material
|
||||
Material.setUseGenerate(sketchMaterialFiles.value)
|
||||
if(this.isUseGenerate){
|
||||
let generate:any = this.$refs.Generate
|
||||
generate.checkbox.forEach((item:any)=>{
|
||||
if(item.name == "text-image"){
|
||||
item.type = true
|
||||
}else{
|
||||
item.type = false
|
||||
}
|
||||
})
|
||||
this.generateCheckbox = false
|
||||
}
|
||||
},
|
||||
setSetchboardGenerate(item:any){
|
||||
this.useGenerate.imgId = item.imgId
|
||||
this.useGenerate.imgUrl = item.imgUrl
|
||||
@@ -430,7 +342,6 @@ export default defineComponent({
|
||||
let generate:any = this.$refs.Generate
|
||||
|
||||
if(item.designType == 'collection'){
|
||||
Material.setUseGenerate([])
|
||||
}else {
|
||||
generate.sketchboardList.forEach((item:any) => {
|
||||
item.checked = false
|
||||
@@ -454,11 +365,9 @@ export default defineComponent({
|
||||
},
|
||||
scaleImage(index:any){
|
||||
let scaleImage:any = this.$refs.scaleImage
|
||||
scaleImage.init(this.generateList,index)
|
||||
},
|
||||
getgenerateCheckbox(value:any){
|
||||
this.generateCheckbox = value
|
||||
scaleImage.init(this.sketchboardList,index)
|
||||
},
|
||||
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
@@ -528,10 +437,6 @@ export default defineComponent({
|
||||
message.info(this.t('SketchboardUpload.jsContent3'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
setTextareaShow(){
|
||||
if(this.generateCheckbox) return
|
||||
this.isTextarea = !this.isTextarea
|
||||
},
|
||||
cliSetKeyword(value:any){
|
||||
let str = ''
|
||||
@@ -540,34 +445,6 @@ export default defineComponent({
|
||||
}
|
||||
this.captionGeneration += str + value
|
||||
},
|
||||
ifMaximumLength(){
|
||||
clearTimeout(this.inputTime)
|
||||
let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
|
||||
let input = inputBox.getElementsByClassName('search_input')[0]
|
||||
this.inputTime = setTimeout(()=>{
|
||||
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
|
||||
// let num2 = (input as HTMLInputElement).value.split(' ').length
|
||||
|
||||
if(this.captionGeneration?.split(/\s+/).length > 250){
|
||||
(this.$refs.inputShowText as any).innerHTML = this.t('SketchboardUpload.maximumLength')
|
||||
this.inputShow = true
|
||||
}else{
|
||||
this.inputShow = false
|
||||
}
|
||||
},500)
|
||||
},
|
||||
inputFocus(){
|
||||
if(this.isInputFocus) return
|
||||
if(this.generateCheckbox) return
|
||||
this.isInputFocus = true
|
||||
let setDomCli = ()=>{
|
||||
this.isInputFocus = false
|
||||
document.removeEventListener('click',setDomCli)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
document.addEventListener('click',setDomCli)
|
||||
},200)
|
||||
},
|
||||
deleteFile(item: any) {
|
||||
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
||||
@@ -585,51 +462,7 @@ export default defineComponent({
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
likeFile(item:any,str:string){
|
||||
if(str == 'like'){
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
level1Type:"Sketchboard",
|
||||
level2Type: item.category,
|
||||
gender:this.workspace.sex,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
||||
(rv) => {
|
||||
item.like = true
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}else{
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
|
||||
(rv) => {
|
||||
item.like = false
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteGenerate(index:any){
|
||||
if(this.isGenerate)return
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('LibraryPage.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.generateList.splice(index,1)
|
||||
}
|
||||
});
|
||||
},
|
||||
recollection() {
|
||||
this.isUseGenerate = false
|
||||
this.useGenerate = {
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
@@ -682,202 +515,6 @@ export default defineComponent({
|
||||
}
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
//发送请求生成图片
|
||||
getgenerate(){
|
||||
clearInterval(this.remGenerateTime)
|
||||
this.remGenerate = false
|
||||
// this.sketchCatecoryList = this.store.state.Workspace.workspacePosition
|
||||
let sketchCatecoryList = this.sketchCatecoryList
|
||||
// if(this.isTest){//试用用户禁止使用
|
||||
// message.warning(
|
||||
// this.t('isTest.available')
|
||||
// );
|
||||
// return
|
||||
// }
|
||||
if(this.isGenerate){
|
||||
return
|
||||
}
|
||||
let generage:any = this.$refs.Generate
|
||||
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
|
||||
let data = {
|
||||
generateType:generateType,
|
||||
// designType:this.useGenerate.designType,
|
||||
designType:'collection',
|
||||
collectionElementId:this.useGenerate.imgId,
|
||||
level1Type:this.upload.level1Type,
|
||||
level2Type:this.useGenerate.level2Type,
|
||||
text:this.captionGeneration,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
userId:this?.userInfo?.userId,
|
||||
isTestUser:this.driver__.driver?false:this.isTest,
|
||||
version:1,//为1就是Print
|
||||
gender:this.workspace.sex,
|
||||
}
|
||||
if(generateType == 'image'){
|
||||
if(this.useGenerate.imgId){
|
||||
data.text = ''
|
||||
}else{
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent4')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
// this.beforeUpload(false)
|
||||
if(this.captionGeneration){
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 250){
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent5')
|
||||
);
|
||||
return
|
||||
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent6')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text-image'){
|
||||
if(this.useGenerate.imgId){
|
||||
if(this.captionGeneration){
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 250){
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent5')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent6')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('PrintboardUpload.jsContent4')
|
||||
);
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.isGenerate = true
|
||||
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
|
||||
(rv) => {
|
||||
if(data.isTestUser){
|
||||
if(rv.leftUsageCount >= 1){
|
||||
message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Printboard')}));
|
||||
}else if(rv.leftUsageCount == 0){
|
||||
message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Printboard')}));
|
||||
this.isGenerate = false
|
||||
return
|
||||
}
|
||||
}
|
||||
// rv.uniqueId.forEach((item:any) => {
|
||||
// let arr:any = {}
|
||||
// arr.taskId = item
|
||||
// arr.status = 'execution'
|
||||
// this.generateList.unshift(arr)
|
||||
// });
|
||||
this.setGenerate(rv.uniqueId)
|
||||
|
||||
}
|
||||
).catch(res=>{
|
||||
this.isGenerate = false
|
||||
});
|
||||
},
|
||||
setGenerate(dataList:any){
|
||||
let generage:any = this.$refs.Generate
|
||||
let sketchCatecoryList = this.sketchCatecoryList
|
||||
let categoryValue:any
|
||||
let data = dataList
|
||||
let dataNum = dataList.length
|
||||
this.remGenerateTime = setTimeout(()=>{
|
||||
this.remGenerate = true
|
||||
},10000)
|
||||
generage.sketchboardList.forEach((item:any) => {
|
||||
if(item.checked){
|
||||
categoryValue = item.categoryValue
|
||||
}
|
||||
});
|
||||
this.generateTime = setInterval(()=>{
|
||||
// let data = this.generateList.filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
|
||||
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
||||
(rv) => {
|
||||
if(this.isGenerate){//防止取消后有正在执行的获取状态
|
||||
this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
||||
rv.forEach((element:any) => {
|
||||
if(element.status === 'Success'){
|
||||
element.imgUrl = element.url
|
||||
element.id_ = GO.id++
|
||||
this.sketchCatecoryList.forEach((itemCategory:any) => {
|
||||
if(itemCategory.value == element.category){
|
||||
element.categoryValue = itemCategory?.name
|
||||
element.category = itemCategory?.value
|
||||
}
|
||||
});
|
||||
this.generateList.unshift(element)
|
||||
data = data.filter((item:any) => item !== element.taskId);
|
||||
}
|
||||
});
|
||||
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
|
||||
if(rv.filter((item:any)=>item.status == 'Invalid').length == dataNum){
|
||||
message.info(this.t('Generate.effectPoor'));
|
||||
}
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
clearInterval(this.generateTime)
|
||||
clearInterval(this.remGenerateTime)
|
||||
this.remGenerate = false
|
||||
this.isGenerate = false
|
||||
}
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
clearInterval(this.generateTime)
|
||||
clearInterval(this.remGenerateTime)
|
||||
this.remGenerate = false
|
||||
this.isGenerate = false
|
||||
});
|
||||
},1000)
|
||||
},
|
||||
removeGenerate(){
|
||||
//取消操作
|
||||
this.isGenerate = false
|
||||
this.remGenerate = false
|
||||
clearInterval(this.generateTime)
|
||||
if(this.generateProceedList){
|
||||
let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
|
||||
let data = {uniqueId:str,userId:this?.userInfo?.userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
|
||||
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
||||
(rv) => {
|
||||
this.generateProceedList = []
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
},
|
||||
generageAdd(item:any){
|
||||
item.type_ = {
|
||||
type1: "generate",
|
||||
type2: 'Sketchboard',
|
||||
},
|
||||
item.resData = JSON.parse(JSON.stringify(item))
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -963,7 +600,7 @@ export default defineComponent({
|
||||
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
|
||||
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||
// margin: 0 2rem*1.2) 2rem*1.2) 0;
|
||||
display: inline-block;
|
||||
width: calc(10rem*1.2);
|
||||
@@ -1058,6 +695,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
padding-bottom: 4.8rem;
|
||||
.modal_img{
|
||||
width: calc(40rem*1.2);
|
||||
height: calc(5rem*1.2);
|
||||
@@ -1144,6 +782,8 @@ export default defineComponent({
|
||||
display: inline-block;
|
||||
width: calc(10rem*1.2);
|
||||
height: calc(10rem*1.2);
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@@ -1152,7 +792,7 @@ export default defineComponent({
|
||||
opacity: 1;
|
||||
}
|
||||
img{
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -101,6 +101,7 @@ export default defineComponent({
|
||||
let { t } = useI18n();
|
||||
let canvas = reactive({});
|
||||
let scale = 2;
|
||||
let exportWH = 512
|
||||
let canvasWH = ref(0);
|
||||
let textData = reactive({
|
||||
fill:'#000000',
|
||||
@@ -143,6 +144,7 @@ export default defineComponent({
|
||||
let height = canvasBox.offsetHeight;
|
||||
canvasBox.style.width = height+'px'
|
||||
canvasWH.value = height
|
||||
scale = exportWH/canvasWH.value
|
||||
var canvasDom = document.createElement("canvas");
|
||||
let oldCanvasDom = canvasBox.querySelector('canvas')
|
||||
if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容
|
||||
|
||||
500
src/component/HomePage/productImg.vue
Normal file
500
src/component/HomePage/productImg.vue
Normal file
@@ -0,0 +1,500 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="productImg_modal generalModel"
|
||||
v-model:visible="productImg"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="productImgMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content">
|
||||
<div class="modal_title_text">
|
||||
<div>Finalize</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="productImg_content_bottom">
|
||||
<div class="productImg_left">
|
||||
<div class="productImg_content_item_title">Select Collection</div>
|
||||
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
|
||||
<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
|
||||
<img v-lazy="item.designOutfitUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content_item_title">Up Load</div>
|
||||
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
|
||||
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content content_item_imgBox_itemImg"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component ">
|
||||
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
v-model:file-list="fileList"
|
||||
:multiple="true"
|
||||
:maxCount="8"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content_item_title">Magic Tools</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="productImg_right">
|
||||
<div class="productImg_content_item_title">Selected Product</div>
|
||||
<div class="productImg_right_item_box generalScroll" v-mousewheel>
|
||||
<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
|
||||
<img v-lazy="item.url" alt="">
|
||||
<div class="productImg_right_item_like">
|
||||
<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content_item_title productImg_right_titleBtn">
|
||||
Selected Product
|
||||
<div class="button_second">Export</div>
|
||||
</div>
|
||||
<div class="productImg_right_item_box generalScroll" v-mousewheel>
|
||||
<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
|
||||
<img v-lazy="item.url" alt="">
|
||||
<div class="productImg_right_item_like">
|
||||
<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
||||
// import { getCookie } from "@/tool/cookie";
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie,setCookie } from "@/tool/cookie";
|
||||
// import domTurnImg from '@/tool/domTurnImg'
|
||||
import { getUploadUrl,isMoible } from "@/tool/util";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Upload,message,Modal } from 'ant-design-vue';
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import ExportModel from "@/component/HomePage/ExportModel.vue";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
ExportModel,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n()
|
||||
let productImg: any = ref(false);//弹窗
|
||||
let productImgMask:any = ref(false)//弹窗遮罩
|
||||
let productImgData:any = reactive({
|
||||
isShowMark:false,
|
||||
fileList:[],
|
||||
generateList:[
|
||||
{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:2,
|
||||
}
|
||||
],
|
||||
likeList:[
|
||||
{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},
|
||||
],
|
||||
})
|
||||
let likeDesignCollectionList: any = computed(() => {
|
||||
return store.state.HomeStoreModule.likeDesignCollectionList;
|
||||
});
|
||||
let init = ()=>{
|
||||
productImg.value = true
|
||||
console.log(likeDesignCollectionList);
|
||||
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
Modal.confirm({
|
||||
title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
cleardata()
|
||||
}
|
||||
});
|
||||
}
|
||||
let cleardata = ()=>{
|
||||
productImg.value = false
|
||||
productImgData.isShowMark = false
|
||||
}
|
||||
|
||||
let fileUploadChange = (data: any)=> {
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0){
|
||||
file.imgUrl = res.data.url;
|
||||
// file.type_ = {
|
||||
// type1:'upload',
|
||||
// type2:'Moodboard'
|
||||
// };
|
||||
file.id = res.data.id
|
||||
productImgData.fileList.filter((v: any) => v.status === "done");
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
// this.showFileList = productImgData.fileList
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
}
|
||||
let beforeUpload = (file: any)=>{
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.info(useI18n().t('MoodboardUpload.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.info(useI18n().t('MoodboardUpload.jsContent4'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
let deleteFile = (index:any)=>{
|
||||
productImgData.fileList.splice(index,1)
|
||||
}
|
||||
let likeFile = (item:any,str:any,index:any) =>{
|
||||
if(str == 'like'){
|
||||
productImgData.likeList.push(item)
|
||||
productImgData.generateList.splice(index,1)
|
||||
|
||||
}else{
|
||||
productImgData.generateList.push(item)
|
||||
productImgData.likeList.splice(index,1)
|
||||
}
|
||||
}
|
||||
let setExport = ()=>{
|
||||
// let exportModel:any = this.$refs.ExportModel
|
||||
// exportModel.init()
|
||||
}
|
||||
let setTask = (data:any)=>{
|
||||
emit('setTask',data)
|
||||
}
|
||||
return {
|
||||
productImg,
|
||||
productImgMask,
|
||||
...toRefs(productImgData),
|
||||
likeDesignCollectionList,
|
||||
init,
|
||||
cancelDsign,
|
||||
fileUploadChange,
|
||||
beforeUpload,
|
||||
deleteFile,
|
||||
likeFile,
|
||||
setExport,
|
||||
setTask,
|
||||
};
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
},{ passive: true })
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
// moodTemplateId: "", //模板id
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
upload: {
|
||||
isPin: 0,
|
||||
gender:'',
|
||||
level1Type: "Moodboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
methods: {
|
||||
// init(list:any,index:any,dialogueIndex:any){
|
||||
|
||||
// },
|
||||
// cancelDsign(){
|
||||
// this.productImg = false
|
||||
// // this.productImgList = []
|
||||
// // this.productImgIndex = 0
|
||||
// },
|
||||
// download(){
|
||||
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
|
||||
// },
|
||||
// setScaleImageIndex(index:any){
|
||||
// // this.productImgIndex = index
|
||||
// // console.log(this.productImgIndex);
|
||||
|
||||
// },
|
||||
// LikeFile(item:any,str:string){
|
||||
// let parent:any = this.$parent
|
||||
// parent.likeFile(item,str)
|
||||
// },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.productImg_modal {
|
||||
.productImg_page{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
&.productImg_page::-webkit-scrollbar{display: none;}
|
||||
}
|
||||
.productImg_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.modal_title_text{
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_bottom{
|
||||
height: calc(100% - 4rem - 2.4rem);
|
||||
--border-color: #c4c4c4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.upload_item{
|
||||
|
||||
}
|
||||
.upload_file_item{
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
&.upload_file_item:last-child{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.productImg_content_item_intro{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.productImg_content_item_imgBox{
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
width: auto;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
.content_item_imgBox_itemImg{
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
height: 12rem;
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.content_item_imgBox_itemImg:hover{
|
||||
.content_item_imgBox_itemImg_delete{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content_item_imgBox_itemImg_delete{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.2);
|
||||
position: absolute;
|
||||
i{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.content_item_imgBox_itemImg:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.productImg_left,.productImg_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.productImg_content_item:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.productImg_left{
|
||||
width: 25%;
|
||||
// width: 45%;
|
||||
.productImg_content_item_imgBox{
|
||||
.content_item_imgBox_itemImg{
|
||||
width: 5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productImg_right{
|
||||
width: 75%;
|
||||
padding-left: 2rem;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
.productImg_right_item_box{
|
||||
height: 40%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
background: #f6f6fa;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 2%;
|
||||
padding: 0 1.5rem;
|
||||
.productImg_right_item{
|
||||
height: 100%;
|
||||
padding: 1rem 0;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.productImg_right_item_like{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
.fi-sr-heart{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productImg_right_item:hover{
|
||||
.productImg_right_item_like{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.productImg_right_item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.productImg_right_item_box:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.productImg_right_titleBtn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -34,7 +34,7 @@
|
||||
cate, index
|
||||
) in disignTypeList"
|
||||
:key="index"
|
||||
@click="
|
||||
@click.stop="
|
||||
selectFileCategory(
|
||||
item,
|
||||
cate
|
||||
|
||||
337
src/component/WorksPage/Falls.vue
Normal file
337
src/component/WorksPage/Falls.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="Falls">
|
||||
<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
|
||||
:style="{
|
||||
width: item.style.width + 'px',
|
||||
height: item.style.height + 'px',
|
||||
top: item.style.top + 'px',
|
||||
left: item.style.left + 'px',
|
||||
}"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<div class="falls_item_img">
|
||||
<img
|
||||
v-lazy="item.designPythonOutfitUrl"
|
||||
:style="{
|
||||
height: item.style.imgHeihgt + 'px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 文字 -->
|
||||
<div class="falls_item_bottom">
|
||||
<div class="falls_item_text" :title="item.text">
|
||||
{{item.text}}
|
||||
</div>
|
||||
<div class="falls_item_content">
|
||||
<div class="falls_item_user">
|
||||
<img src="http://121.40.53.210:3000/falls/5.png" alt="">
|
||||
<div class="falls_item_user_detail">
|
||||
<div>{{item.name}}</div>
|
||||
<span>地区</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="falls_item_detail">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
|
||||
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<span>321</span>
|
||||
</div>
|
||||
<div>
|
||||
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
|
||||
<i v-else class="fi fi-rr-social-network"></i>
|
||||
<span>321</span>
|
||||
</div>
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
|
||||
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
|
||||
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
|
||||
</svg>
|
||||
<span>321</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue'
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
props:{
|
||||
isScroll:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
},
|
||||
setup(){
|
||||
let list = ref([])
|
||||
let wait_list = ref([])
|
||||
let width = ref(300)
|
||||
let num_x = ref(1)
|
||||
let gap_x = ref(0)
|
||||
let gap_y = ref(0)
|
||||
let poss = ref([])
|
||||
let loading = ref(false)
|
||||
let computedHeight = 0
|
||||
return{
|
||||
list,
|
||||
wait_list,
|
||||
width,
|
||||
num_x,
|
||||
gap_x,
|
||||
gap_y,
|
||||
poss,
|
||||
loading,
|
||||
computedHeight,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
fadeIn:{
|
||||
mounted (el,binding) {
|
||||
let dom
|
||||
if(binding.value){
|
||||
dom = document.querySelector('.works_page .page_content')
|
||||
}else{
|
||||
dom = document.querySelector('.homeRecommend_content_body')
|
||||
}
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.from(el,1, {y:'30px',opacity:0},)
|
||||
ScrollTrigger.create({
|
||||
trigger: el, // 触发器元素
|
||||
start: "top 90%", // 滚动触发器的起始滚动位置
|
||||
end: '100% 80%', // 滚动触发器的结束滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
scrub: true,
|
||||
animation:tl1,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:2,
|
||||
// onUpdate:(v)=>{
|
||||
// if(v.progress < 0.1){
|
||||
// v.trigger?.classList.remove('active')
|
||||
// }else{
|
||||
// v.trigger?.classList.add('active')
|
||||
// // v.trigger?.classList.add('active')
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.resize()
|
||||
window.addEventListener("resize", this.resize);
|
||||
let domFalls = document.querySelector('.Falls')
|
||||
let domCss = getComputedStyle(domFalls);
|
||||
const paddingBottom = domCss.getPropertyValue('--paddingBottom').split('px')[0]*1;
|
||||
const textMarginTop = domCss.getPropertyValue('--textMarginTop').split('px')[0]*1;
|
||||
const textHeight = domCss.getPropertyValue('--textHeight').split('px')[0]*1;
|
||||
const contentHeight = domCss.getPropertyValue('--contentHeight').split('px')[0]*1;
|
||||
this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight;
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.wait_list = []
|
||||
window.removeEventListener("resize", this.resize);
|
||||
},
|
||||
// 挂载方法
|
||||
methods: {
|
||||
push(arr) {
|
||||
this.wait_list = this.wait_list.concat(arr);
|
||||
if (!this.loading) {
|
||||
this.loading = true;
|
||||
this.loadImg();
|
||||
}
|
||||
},
|
||||
loadImg() {
|
||||
if (this.wait_list.length <= 0) {
|
||||
this.loading = false;
|
||||
this.$emit("loadend");
|
||||
return;
|
||||
}
|
||||
|
||||
let url = this.wait_list[0].designPythonOutfitUrl;
|
||||
let data = this.wait_list[0]
|
||||
let img = document.createElement("img");
|
||||
img.src = url;
|
||||
img.style.width = this.width + "px";
|
||||
img.style.maxHeight = this.width+330 + "px";
|
||||
img.style.position = "absolute";
|
||||
img.style.top = "-99999px";
|
||||
document.body.appendChild(img);
|
||||
img.addEventListener("load", () => {
|
||||
var idx = 0;
|
||||
var pos_num = this.poss[idx];
|
||||
for (var i = 1; i < this.poss.length; i++) {
|
||||
if (pos_num > this.poss[i]) {
|
||||
idx = i;
|
||||
pos_num = this.poss[i];
|
||||
}
|
||||
}
|
||||
let width = img.offsetWidth;
|
||||
let height = img.offsetHeight+this.computedHeight;
|
||||
let top = this.poss[idx] + this.gap_y;
|
||||
let left = (idx + 1) * this.gap_x + idx * width;
|
||||
let imgHeight = height - this.computedHeight
|
||||
this.poss[idx] = top + height;
|
||||
let obj = {
|
||||
designPythonOutfitUrl:url,
|
||||
style: { width, height, top, left, imgHeight },
|
||||
...data
|
||||
};
|
||||
this.list.push(obj);
|
||||
img.remove();
|
||||
this.wait_list.splice(0, 1);
|
||||
this.$el.style.height =
|
||||
Math.max(...this.poss) + this.gap_y + "px";
|
||||
if (this.wait_list.length <= 0) {
|
||||
this.loading = false;
|
||||
this.$emit("loadend");
|
||||
} else {
|
||||
this.loadImg();
|
||||
}
|
||||
});
|
||||
},
|
||||
resize() {
|
||||
var t_width = this.$el.offsetWidth;
|
||||
var width = this.width;
|
||||
var num_x = parseInt(t_width / (width + 20));
|
||||
if (num_x < 1) num_x = 1;
|
||||
var remain = t_width - width * num_x;
|
||||
var gap_x = remain / (num_x + 1);
|
||||
this.gap_x = gap_x;
|
||||
this.gap_y = gap_x > 30 ? 30 : gap_x;
|
||||
this.num_x = num_x;
|
||||
var poss = [];
|
||||
for (var i = 0; i < num_x; i++) poss.push(0);
|
||||
this.poss = poss;
|
||||
this.reset();
|
||||
},
|
||||
reset() {
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
let width = this.list[i].style.width;
|
||||
let height = this.list[i].style.height;
|
||||
var idx = 0;
|
||||
var pos_num = this.poss[idx];
|
||||
for (var j = 1; j < this.poss.length; j++) {
|
||||
if (pos_num > this.poss[j]) {
|
||||
idx = j;
|
||||
pos_num = this.poss[j];
|
||||
}
|
||||
}
|
||||
let top = this.poss[idx] + this.gap_y;
|
||||
let left = (idx + 1) * this.gap_x + idx * width;
|
||||
this.poss[idx] = top + height;
|
||||
this.list[i].style = { width, height, top, left };
|
||||
}
|
||||
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.Falls {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
--paddingBottom:10px;
|
||||
--textMarginTop:10px;
|
||||
--textHeight:25px;
|
||||
--contentHeight:35px;
|
||||
.falls_item{
|
||||
position: absolute;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
padding-bottom: var(--paddingBottom);
|
||||
&.falls_item:hover{
|
||||
.falls_item_img{
|
||||
img{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.falls_item_img{
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
.falls_item_bottom{
|
||||
padding: 0 10px;
|
||||
.falls_item_text{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-top: var(--textMarginTop);
|
||||
height: var(--textHeight);
|
||||
}
|
||||
.falls_item_content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #525252;
|
||||
height: var(--contentHeight);
|
||||
.falls_item_user{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.falls_item_user_detail{
|
||||
line-height: 1;
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
div{
|
||||
font-size: 16px;
|
||||
}
|
||||
span{
|
||||
font-size: 12px;
|
||||
color: #525252;
|
||||
}
|
||||
}
|
||||
}
|
||||
.falls_item_detail{
|
||||
display: flex;
|
||||
width: 40%;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
svg,i{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
span{
|
||||
margin-left: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,8 +10,12 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "/",
|
||||
// redirect重定向
|
||||
redirect: "/login"
|
||||
// redirect: "/login"
|
||||
// redirect: "/upgrade"
|
||||
name: "HomeRecommend",
|
||||
component: _import('HomeRecommend'),
|
||||
children:[]
|
||||
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
@@ -36,6 +40,7 @@ const routes: Array<RouteRecordRaw> = [
|
||||
children:[
|
||||
{
|
||||
path: "",
|
||||
name:'""',
|
||||
redirect: "home/homePage"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,22 +1,31 @@
|
||||
import {Module} from 'vuex'
|
||||
import {RootState} from '../index'
|
||||
import { Https } from "@/tool/https";
|
||||
interface DesignDetail{
|
||||
interface UserHabit{
|
||||
clothingType:any,
|
||||
credits:any,
|
||||
// devise:any,
|
||||
// deviseType:any,
|
||||
// system_per:any,
|
||||
// model:any,
|
||||
|
||||
printType:any,
|
||||
designElementsType:any,
|
||||
FemalePosition:any,
|
||||
MalePosition:any,
|
||||
Position:any,
|
||||
}
|
||||
|
||||
const HomeStoreModule : Module<DesignDetail,RootState> = {
|
||||
const userHabit : Module<UserHabit,RootState> = {
|
||||
state:{
|
||||
clothingType:[],
|
||||
credits:{
|
||||
value:0
|
||||
},
|
||||
printType:[],
|
||||
designElementsType:[],
|
||||
FemalePosition:[],
|
||||
MalePosition:[],
|
||||
Position:[],
|
||||
},
|
||||
mutations:{
|
||||
res_clothingType(state,data){
|
||||
@@ -25,6 +34,25 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
|
||||
setCredits(state,data){
|
||||
state.credits.value = data
|
||||
},
|
||||
setPrintType(state,data){
|
||||
state.printType = data
|
||||
},
|
||||
setDesignElementsType(state,data){
|
||||
state.designElementsType = data
|
||||
},
|
||||
setFemalePosition(state,data){
|
||||
state.FemalePosition = data
|
||||
},
|
||||
setMalePosition(state,data){
|
||||
state.MalePosition = data
|
||||
},
|
||||
setPosition(state,data){
|
||||
if(data == 'Female'){
|
||||
state.Position = state.FemalePosition
|
||||
}else{
|
||||
state.Position = state.MalePosition
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
actions:{
|
||||
@@ -54,9 +82,51 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
|
||||
resolve(true)
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
getLangType(context){
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'DesignElementsEnum'}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
rv.forEach((item:any) => {
|
||||
let name = item.name
|
||||
item.name = item.value
|
||||
item.value = name
|
||||
});
|
||||
context.commit('setDesignElementsType',rv)
|
||||
}
|
||||
})
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'PrintboardLevel2TypeEnum'}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
rv.forEach((item:any) => {
|
||||
let name = item.name
|
||||
item.name = item.value
|
||||
item.value = name
|
||||
});
|
||||
context.commit('setPrintType',rv)
|
||||
}
|
||||
})
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'FemalePosition'}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
rv.forEach((item:any) => {
|
||||
let name = item.name
|
||||
item.name = item.value
|
||||
item.value = name
|
||||
});
|
||||
context.commit('setFemalePosition',rv)
|
||||
}
|
||||
})
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'MalePosition'}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
rv.forEach((item:any) => {
|
||||
let name = item.name
|
||||
item.name = item.value
|
||||
item.value = name
|
||||
});
|
||||
context.commit('setMalePosition',rv)
|
||||
context.commit('setPosition','MalePosition')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default HomeStoreModule
|
||||
export default userHabit
|
||||
@@ -208,6 +208,8 @@ export default defineComponent({
|
||||
}
|
||||
this.getCredits()
|
||||
this.getLang('')
|
||||
//语言适配
|
||||
this.store.dispatch('getLangType')
|
||||
},
|
||||
methods: {
|
||||
setTask(data){
|
||||
@@ -394,13 +396,15 @@ export default defineComponent({
|
||||
.homeMain_max{
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
.homeMain_content_body{
|
||||
flex: 1;
|
||||
height: calc(100vh - 7rem);
|
||||
}
|
||||
}
|
||||
.homeMain_heade {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// padding: 0 30px;
|
||||
|
||||
376
src/views/HomeRecommend.vue
Normal file
376
src/views/HomeRecommend.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div class="homeRecommend_max Guide_1_16_1">
|
||||
<header class="homeRecommend_heade">
|
||||
<div class="homeRecommend_right_content">
|
||||
<div class="homeRecommend_user_content">
|
||||
<img
|
||||
class="homeRecommend_logo"
|
||||
@click="turnToNewPage('https://www.aidlab.hk/en/')"
|
||||
src="@/assets/images/loginPage/aida_logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homeRecommend_right">
|
||||
<div class="started_btn" @click="setLogin">登录</div>
|
||||
<div class="started_btn started_btn2">注册</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homeRecommend_content_body">
|
||||
<div class="homeRecommend_content_body_recommend" id="aaaa">
|
||||
<div class="content_body_recommend_left">
|
||||
<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
</div>
|
||||
<div class="content_body_recommend_center content_body_text">
|
||||
<div class="content_body_recommend_center_title">
|
||||
<h1>全球<div>最佳创作者</div>齐聚AIDA</h1>
|
||||
</div>
|
||||
<div class="content_body_recommend_center_btn">
|
||||
<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">立即购买</a>
|
||||
<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">立即试用</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_body_recommend_right">
|
||||
<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<Works :isScroll="false"></Works>
|
||||
</div>
|
||||
<div class="homeRecommend_content_adminTop" @click="setAdminUp">
|
||||
<i class="fi fi-rr-arrow-small-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script >
|
||||
import { defineComponent, createVNode, ref , nextTick } from "vue";
|
||||
import { isEmail } from "@/tool/util";
|
||||
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
import Habit from "@/component/Detail/habit.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import Works from "@/views/HomeView/Works.vue";
|
||||
import { useStore } from "vuex";
|
||||
import { setLang } from "@/tool/guide";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from 'vue-router';
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
Habit,
|
||||
Works,
|
||||
},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
let setLogin = ()=>{
|
||||
router.push("/login");
|
||||
}
|
||||
let setAdminUp = ()=>{
|
||||
let scrollDom = document.querySelector('.homeRecommend_content_body')
|
||||
scrollDom.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth' // 平滑滚动到顶部
|
||||
});
|
||||
}
|
||||
return {
|
||||
setLogin,
|
||||
setAdminUp,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// credits.value(newVal,oldVal){
|
||||
// console.log(String(newVal).length);
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
nextTick().then(()=>{
|
||||
let dom = document.querySelector('.homeRecommend_content_body')
|
||||
let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
|
||||
let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
|
||||
for (let index = 0; index < codeTween.length; index++) {
|
||||
gsap.from(codeTween[index],.5, {scale:.6 },);
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
|
||||
ScrollTrigger.create({
|
||||
trigger: codeTween[index], // 触发器元素
|
||||
start: "top 0%", // 滚动触发器的起始滚动位置
|
||||
end: '200% 20%', // 滚动触发器的结束滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
scrub: true,
|
||||
animation:tl1,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:2,
|
||||
// onUpdate:(v)=>{
|
||||
// if(v.progress < 0.1){
|
||||
// v.trigger?.classList.remove('active')
|
||||
// }else{
|
||||
// v.trigger?.classList.add('active')
|
||||
// // v.trigger?.classList.add('active')
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
|
||||
ScrollTrigger.create({
|
||||
trigger: codeTweenText, // 触发器元素
|
||||
start: "top 0%", // 滚动触发器的起始滚动位置
|
||||
end: '200% 20%', // 滚动触发器的结束滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
scrub: true,
|
||||
animation:tl1,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:2,
|
||||
|
||||
});
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.homeRecommend_max{
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
.homeRecommend_content_body{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.homeRecommend_heade {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// padding: 0 30px;
|
||||
padding: 0 9rem;
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
// border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
z-index: 1049;
|
||||
background-color: #fff;
|
||||
.homeRecommend_right{
|
||||
width: 33%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.started_btn2{
|
||||
color: #000;
|
||||
background: #fff;
|
||||
border: 2px solid #39215b;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
.homeRecommend_logo {
|
||||
width: 14.4rem;
|
||||
height: 3.2rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
.homeRecommend_right_content {
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
.homeRecommend_user_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 3.7rem;
|
||||
&.marLeft2{
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.username {
|
||||
font-size: 1.8rem;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0.8rem;
|
||||
font-weight: 900;
|
||||
span{
|
||||
margin: .7rem;
|
||||
}
|
||||
}
|
||||
.icon-xiala {
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
transition: .3s all;
|
||||
}
|
||||
.icon_rotate {
|
||||
-moz-transform: rotate(180deg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
animation-direction: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.homeRecommend_content_body{
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
&.homeRecommend_content_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.homeRecommend_content_body_recommend{
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ececec;
|
||||
|
||||
.content_body_recommend_left,
|
||||
.content_body_recommend_right{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
img{
|
||||
border-radius: 2rem;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
}
|
||||
--margin:3rem;
|
||||
.content_body_recommend_right{
|
||||
right: 0;
|
||||
.content_body_img1{
|
||||
width: 20rem;
|
||||
top: 10rem;
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img2{
|
||||
width: 15rem;
|
||||
top: calc(30rem + var(--margin));
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img3{
|
||||
top: 38rem;
|
||||
width: 30rem;
|
||||
right: calc(-13rem + var(--margin));
|
||||
}
|
||||
.content_body_img4{
|
||||
width: 20rem;
|
||||
top: 51rem;
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img5{
|
||||
width: 20rem;
|
||||
top: 15rem;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.content_body_recommend_left{
|
||||
left: 0;
|
||||
.content_body_img1{
|
||||
width: 15rem;
|
||||
top: 5rem;
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img2{
|
||||
width: 25rem;
|
||||
top: calc(20rem + var(--margin));
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img3{
|
||||
width: 20rem;
|
||||
top: calc(10rem + var(--margin));
|
||||
left: calc(0 + var(--margin));
|
||||
}
|
||||
.content_body_img4{
|
||||
width: 30rem;
|
||||
top: 36rem;
|
||||
left: calc(-13rem + var(--margin));
|
||||
}
|
||||
.content_body_img5{
|
||||
width: 20rem;
|
||||
top: 51rem;
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img6{
|
||||
width: 20rem;
|
||||
top: 20rem;
|
||||
left: calc(0 + var(--margin));
|
||||
}
|
||||
}
|
||||
.content_body_recommend_center{
|
||||
padding: 20rem 0;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
.content_body_recommend_center_title{
|
||||
h1{
|
||||
line-height: 1;
|
||||
font-size: 13rem;
|
||||
font-weight: 600;
|
||||
div{
|
||||
color: #341e57;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_body_recommend_center_btn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
a{
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeRecommend_content_adminTop{
|
||||
position: fixed;
|
||||
bottom: 5rem;
|
||||
right: 5rem;
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
i{
|
||||
display: flex;
|
||||
font-size: 3rem;
|
||||
transition: all .3s;
|
||||
}
|
||||
&.homeRecommend_content_adminTop:hover{
|
||||
i{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -117,7 +117,8 @@
|
||||
<div class="right_content_export" v-show="likeDesignCollectionList.length">
|
||||
<!-- <div class="button_second Guide_1_31" @click="exportCanvas()"> -->
|
||||
<div class="button_second Guide_1_31" @click="exportModel()">
|
||||
{{ $t('HomeView.Export') }}
|
||||
<!-- {{ $t('HomeView.Export') }} -->
|
||||
finalize collection
|
||||
</div>
|
||||
<!-- <div
|
||||
:class="[
|
||||
@@ -194,9 +195,9 @@
|
||||
<KeepAlive>
|
||||
<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
|
||||
</KeepAlive>
|
||||
<productImg ref="productImg" @setTask="setTask"></productImg>
|
||||
<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
|
||||
<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
|
||||
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
|
||||
<!-- 导出缩略图的蒙层 start-->
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
@@ -227,7 +228,7 @@ import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode}
|
||||
import CollectionModal from "@/component/HomePage/collectionModal.vue";
|
||||
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
|
||||
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
|
||||
import ExportModel from "@/component/HomePage/ExportModel.vue";
|
||||
import productImg from "@/component/HomePage/productImg.vue";
|
||||
import affiche from "@/component/HomePage/affiche.vue";
|
||||
import DesignDetail from "@/component/Detail/DesignDetail.vue";
|
||||
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||
@@ -252,10 +253,10 @@ export default defineComponent({
|
||||
NewCollectionReview,
|
||||
DesignDetail,
|
||||
ExportNewCoolection,
|
||||
ExportModel,
|
||||
affiche,
|
||||
// RobotAssist,
|
||||
draggable
|
||||
draggable,
|
||||
productImg
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
@@ -1074,8 +1075,10 @@ export default defineComponent({
|
||||
document.removeEventListener("click", this.closeShowOperateContent);
|
||||
},
|
||||
exportModel(){
|
||||
let exportModel:any = this.$refs.ExportModel
|
||||
exportModel.init()
|
||||
|
||||
let productImg:any = this.$refs.productImg
|
||||
productImg.productImgMask = true
|
||||
productImg.init()
|
||||
},
|
||||
|
||||
//打开图片详情
|
||||
|
||||
@@ -1,59 +1,27 @@
|
||||
<template>
|
||||
<div class="works_page">
|
||||
<div class="works_page" :class="{active:isScroll}">
|
||||
<!-- <div class="modal_title_text">
|
||||
<div>Works</div>
|
||||
</div> -->
|
||||
<div class="modal_title_text">
|
||||
<div v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">{{ item.name }}</div>
|
||||
<div class="modal_title_text modal_search">
|
||||
<div v-for="item in worksType" :key="item" v-show="isScroll?true:(item.value != 'myWorks')" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="modal_search_menu">
|
||||
<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page_content" >
|
||||
<div class="page_content_item" v-for="item,index in worksList" :key="item">
|
||||
<div class="page_content_item_img" @click.stop="getImgScale(index)">
|
||||
<img v-lazy="item.designPythonOutfitUrl" alt="">
|
||||
<div class="delete_like_file_block" >
|
||||
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
|
||||
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page_content_item_text">
|
||||
<div class="page_content_item_text_name" :title="item.portfolioName">
|
||||
{{item.portfolioName}}
|
||||
</div>
|
||||
<div class="page_content_item_text_bottom">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
|
||||
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<span>321</span>
|
||||
<!-- <span>{{ item.likeNum }}</span> -->
|
||||
</div>
|
||||
<div>
|
||||
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
|
||||
<i v-else class="fi fi-rr-social-network"></i>
|
||||
<span>321</span>
|
||||
</div>
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
|
||||
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
|
||||
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
|
||||
</svg>
|
||||
<span>321</span>
|
||||
<!-- <span>{{ item.lookNum }}</span> -->
|
||||
</div>
|
||||
<!-- <div>
|
||||
<i class="fi fi-rr-comment-alt-dots"></i>
|
||||
<span>{{ item.lookNum }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<newScaleImage ref="newScaleImage"></newScaleImage>
|
||||
<!-- 蒙层 start-->
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<Falls ref="fall" @loadend="isShowMark = false" :isScroll="isScroll"></Falls>
|
||||
<div class="page_loading_box">
|
||||
<span class="page_loading" v-show="!isShowMark"></span>
|
||||
<span v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
<!-- 蒙层 end-->
|
||||
</div>
|
||||
|
||||
<newScaleImage ref="newScaleImage"></newScaleImage>
|
||||
<!-- <RobotAssist></RobotAssist> -->
|
||||
|
||||
</div>
|
||||
@@ -73,9 +41,20 @@ import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ElCascader } from 'element-plus'
|
||||
import { remove } from "jszip";
|
||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||
|
||||
import Falls from "@/component/WorksPage/Falls.vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
newScaleImage,
|
||||
Falls,
|
||||
generalMenu,
|
||||
},
|
||||
props:{
|
||||
isScroll:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
let filter:any = reactive({
|
||||
@@ -93,101 +72,121 @@ export default defineComponent({
|
||||
name: 'freehand sketching',
|
||||
value: 'freehandSketching'
|
||||
},
|
||||
{
|
||||
name: 'My Works',
|
||||
value: 'myWorks'
|
||||
},
|
||||
],
|
||||
worksList: [
|
||||
{
|
||||
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'bbb',
|
||||
lookNum:'999',
|
||||
likeNum:'123',
|
||||
like: true,
|
||||
},
|
||||
{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'bbb',
|
||||
lookNum:'999',
|
||||
likeNum:'123',
|
||||
like: true,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14368520/file/original-253a09d85fc1d5ff83c96c046d535ff7.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/11.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'bbb',
|
||||
lookNum:'999',
|
||||
likeNum:'123',
|
||||
like: true,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/1.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
like: false,
|
||||
},{
|
||||
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
||||
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
|
||||
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
|
||||
name:'aaa',
|
||||
lookNum:'213',
|
||||
likeNum:'123',
|
||||
@@ -198,9 +197,36 @@ export default defineComponent({
|
||||
page:1,
|
||||
size:10,
|
||||
},
|
||||
isShowMark:false
|
||||
isShowMark:false,
|
||||
isNoData:false,//如果数据为空就不加载
|
||||
})
|
||||
let menuList:any = ref([
|
||||
{
|
||||
label:'全部',
|
||||
value:'all',
|
||||
},{
|
||||
label:'男装',
|
||||
value:'man',
|
||||
},{
|
||||
label:'女装',
|
||||
value:'woman',
|
||||
},{
|
||||
label:'鞋子',
|
||||
value:'shoes',
|
||||
},{
|
||||
label:'包包',
|
||||
value:'bag',
|
||||
},{
|
||||
label:'配饰',
|
||||
value:'accessories',
|
||||
}
|
||||
])
|
||||
let selectMenu:any = ref({
|
||||
label:'全部',
|
||||
value:'all',
|
||||
})
|
||||
let newScaleImage:any = ref()
|
||||
let fall:any = ref()
|
||||
let setWorksSelect = (val:any) => {
|
||||
filter.worksSelect = val.value
|
||||
}
|
||||
@@ -211,25 +237,49 @@ export default defineComponent({
|
||||
newScaleImage.value.init(filter.worksList,index)
|
||||
}
|
||||
let getPorfolio = ()=>{
|
||||
let data = filter.getListDate
|
||||
Https.axiosPost(Https.httpUrls.getPorfolio, data)
|
||||
.then((rv) => {
|
||||
console.log(rv);
|
||||
filter.worksList = rv.content
|
||||
})
|
||||
.catch((rv) => {});
|
||||
// let data = filter.getListDate
|
||||
// Https.axiosPost(Https.httpUrls.getPorfolio, data)
|
||||
// .then((rv) => {
|
||||
// console.log(rv);
|
||||
// filter.worksList = rv.content
|
||||
// })
|
||||
// .catch((rv) => {});
|
||||
if(filter.isShowMark && !filter.isNoData)return
|
||||
filter.isShowMark = true
|
||||
setTimeout(() => {
|
||||
filter.isShowMark = false
|
||||
fall.value.push(filter.worksList);
|
||||
}, 1000);
|
||||
}
|
||||
let {t} = useI18n()
|
||||
let setprintModel= (data:any)=>{
|
||||
selectMenu.value = data
|
||||
}
|
||||
onMounted (()=>{
|
||||
getPorfolio()
|
||||
let worksPage:any = document.querySelector('.works_page')
|
||||
let imgParent:any = document.querySelector('.page_loading')
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交，则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
getPorfolio()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(imgParent);
|
||||
})
|
||||
return {
|
||||
...toRefs(filter),
|
||||
menuList,
|
||||
selectMenu,
|
||||
newScaleImage,
|
||||
fall,
|
||||
setWorksSelect,
|
||||
likeFile,
|
||||
getImgScale,
|
||||
t,
|
||||
setprintModel,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -273,14 +323,20 @@ export default defineComponent({
|
||||
font-size: 14px;
|
||||
}
|
||||
.works_page {
|
||||
border-radius: 4rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
// height: 100%;
|
||||
height: auto;
|
||||
padding: 0 9rem;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
padding-top: 5rem;
|
||||
|
||||
.modal_title_text{
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding-bottom: 2.4rem;
|
||||
.modal_title_text_assistant{
|
||||
padding: 1rem 3rem;
|
||||
border-radius: 2rem;
|
||||
@@ -295,84 +351,36 @@ export default defineComponent({
|
||||
background: #39215b;
|
||||
color: #fff;
|
||||
}
|
||||
.modal_search_menu{
|
||||
margin-left: auto;
|
||||
z-index: 10;
|
||||
.generalMenu_printModel{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
height: 125rem;
|
||||
align-content: flex-start;
|
||||
.page_content_item{
|
||||
height: auto;
|
||||
background: #f7f8fa;
|
||||
.page_loading_box{
|
||||
text-align: center;
|
||||
.page_loading{
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
width: 30rem;
|
||||
}
|
||||
.page_content_item_text,.page_content_item_img{
|
||||
display: flex;
|
||||
}
|
||||
.page_content_item_img{
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
overflow: hidden;
|
||||
padding: 2rem 0;
|
||||
justify-content: center;
|
||||
border-radius: 2rem;
|
||||
position: relative;
|
||||
img{
|
||||
// width: 100%;
|
||||
cursor: pointer;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
transform: scale(1.15);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.delete_like_file_block{
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover{
|
||||
.delete_like_file_block{
|
||||
display: block;
|
||||
}
|
||||
img{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.page_content_item_text{
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
>div{
|
||||
font-size: 2rem;
|
||||
}
|
||||
.page_content_item_text_name{
|
||||
width: 30%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.page_content_item_text_bottom{
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
>div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
i{
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
}
|
||||
span{
|
||||
margin-left: calc(var(--padding) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 100%;
|
||||
.page_content{
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -16,7 +16,7 @@
|
||||
<i :class="[menu.icon]"></i>
|
||||
<div>{{menu.title}}</div>
|
||||
</div>
|
||||
<div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div>
|
||||
<!-- <div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div> -->
|
||||
</div>
|
||||
<div v-show="menu.showChildren && menu.children.length">
|
||||
<div :class="['menu_item','child_menu_item', selectCode==child.code ? 'select_menu_item' :'']" v-for="child in menu.children" :key="child.title" @click="selectMenuItem(child,index)">
|
||||
@@ -37,10 +37,11 @@
|
||||
</div>
|
||||
|
||||
<div class="librart_headr_right">
|
||||
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'">
|
||||
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="sex.value"
|
||||
v-show="selectCode != 'DesignElements' && selectCode != 'Printboard'"
|
||||
v-model:value="sex"
|
||||
:options="sexList"
|
||||
@change="sexChange"
|
||||
>
|
||||
@@ -53,10 +54,26 @@
|
||||
</a-select>
|
||||
<a-select
|
||||
ref="select"
|
||||
v-show="selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
|
||||
v-model:value="designType.value"
|
||||
:options="disignTypeList"
|
||||
v-show="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'"
|
||||
v-model:value="designType"
|
||||
:options="designTypeList[selectCode]"
|
||||
@change="handleChange"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
<a-select
|
||||
ref="select"
|
||||
v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
|
||||
v-model:value="designType.value"
|
||||
:options="designTypeList[selectCode]"
|
||||
@change="handleChange"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
@@ -169,57 +186,78 @@
|
||||
</div>
|
||||
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
|
||||
<div class="content_body_header content_body_header_generate">
|
||||
<div class="content_body_header_right" >
|
||||
<div class="content_body_header_right" v-show="selectCode != 'Moodboard'">
|
||||
<div class="checkboxItem" v-show="selectCode != 'Sketchboard'">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="checkbox[0].type"
|
||||
@click="setKeyword(0)"
|
||||
/>
|
||||
<span>{{ $t('LibraryPage.ImageOnly') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxItem">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="checkbox[1].type"
|
||||
@click="setKeyword(1)"
|
||||
/>
|
||||
<span>{{ $t('LibraryPage.TextOnly') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxItem">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="checkbox[2].type"
|
||||
@click="setKeyword(2)"
|
||||
/>
|
||||
<span>{{ $t('LibraryPage.TextImage') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_body_header_right"></div>
|
||||
<div v-show="selectCode == 'Printboard'" class="printModel">
|
||||
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
||||
<ul v-show="printModel.optype">
|
||||
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
|
||||
<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
|
||||
<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="input_border">
|
||||
<div class="input_box" :class="{active:inputShow}">
|
||||
<div class="input_box_btnBox">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in selectGenerateList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin :indicator="indicator" tip="Uploading..." />
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done' || file?.base64"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
|
||||
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
class="search_input "
|
||||
@input="ifMaximumLength"
|
||||
:maxlength='inputShow?0:9999'
|
||||
:class="{active:checkbox[0].type && selectCode != 'Moodboard'}"
|
||||
@keydown.enter="getgenerate" :readonly="checkbox[0].type && selectCode != 'Moodboard'"
|
||||
@keydown.enter="getgenerate"
|
||||
@click="inputFocus()"
|
||||
:placeholder="$t('LibraryPage.inputContent2')"
|
||||
v-model="captionGeneration">
|
||||
<i class="icon iconfont icon-xiala" :class="{active:isTextarea, forbidden:checkbox[0].type&& selectCode != 'Moodboard'}" @click.stop="setTextareaShow"></i>
|
||||
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
||||
<a-upload
|
||||
class="search_upImg"
|
||||
:capture="null"
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="selectGenerateList"
|
||||
multiple
|
||||
:maxCount="1"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="generateFileUploadChange"
|
||||
>
|
||||
</a-upload>
|
||||
</i>
|
||||
<i v-show="scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
|
||||
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
|
||||
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
|
||||
</div>
|
||||
<textarea
|
||||
v-show="isTextarea "
|
||||
class="search_textarea "
|
||||
@input="ifMaximumLength"
|
||||
:maxlength='inputShow?0:9999'
|
||||
@keydown.enter="getgenerate" :readonly="checkbox[0].type && selectCode != 'Moodboard'"
|
||||
@keydown.enter="getgenerate"
|
||||
v-model="captionGeneration"
|
||||
></textarea>
|
||||
<div v-show="!isGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
|
||||
@@ -232,67 +270,16 @@
|
||||
<div v-show="remGenerate[selectCode]" @click="removeGenerate" class="generage_btn started_btn">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
<span ref="inputShowText"></span>
|
||||
<span class="inputShowText" ref="inputShowText"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="selectCode == 'Printboard'" class="printModel">
|
||||
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
||||
<ul v-show="printModel.optype">
|
||||
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
|
||||
<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
|
||||
<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-show="selectCode != 'Moodboard'" class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in selectGenerateList"
|
||||
:key="file"
|
||||
:class="[file?.checked?'active':'']"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin :indicator="indicator" tip="Uploading..." />
|
||||
</div>
|
||||
<div class="upload_file_item_content" @click.stop="setSketchboardItem(file)" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
|
||||
<div class="delete_file_block rightTop" @click.stop="deleteFile(index)" >
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
|
||||
<div class="search_keyword_center">
|
||||
<div class="search_keyword_center_left">
|
||||
<div v-for="item in workspace?.keyWord?.[selectCode]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="upload_component upload_file_item"
|
||||
v-show="selectGenerateList.length <= 2"
|
||||
>
|
||||
<a-upload
|
||||
:capture="null"
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:disabled="checkbox[1].type"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="selectGenerateList"
|
||||
multiple
|
||||
:maxCount="3"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="generateFileUploadChange"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content_body_table scroll_style">
|
||||
@@ -318,7 +305,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
|
||||
<sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
|
||||
</div>
|
||||
<div class="content_img_name"></div>
|
||||
</div>
|
||||
@@ -351,7 +338,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { defineComponent,h ,ref,createVNode,nextTick,provide,computed} from 'vue'
|
||||
import { defineComponent,h ,ref,createVNode,nextTick,reactive,provide,computed} from 'vue'
|
||||
// import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
|
||||
import setLabel from '@/component/LibraryPage/setLabel.vue';
|
||||
@@ -382,14 +369,15 @@ export default defineComponent({
|
||||
sketchCategory,
|
||||
},
|
||||
setup() {
|
||||
|
||||
const store = useStore();
|
||||
let menuList = computed(()=>{
|
||||
return [
|
||||
{title:useI18n().t('LibraryPage.Moodboard'),code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
|
||||
{title:useI18n().t('LibraryPage.Prints'),code:'Printboard',icon:'fi fi-rs-objects-column',showChildren:false,children:[]},
|
||||
// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
|
||||
{title:useI18n().t('LibraryPage.Sketches'),code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
|
||||
// {title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
|
||||
// {title:'Market Sketch',code:'Elements',icon:'icon-fuwushichang',showChildren:false,children:[]},
|
||||
{title:'Design Elements',code:'DesignElements',icon:'fi fi-rs-people',showChildren:false,children:[]},
|
||||
{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
|
||||
|
||||
]
|
||||
@@ -397,15 +385,32 @@ export default defineComponent({
|
||||
let selectImgList:any = ref([])
|
||||
let selectCode:any = ref('Moodboard')
|
||||
let searchPictureName = ref('')
|
||||
let newSearchPictureName = ref('')
|
||||
let designType:any = ref('Outwear')
|
||||
let sex:any = ref('Meal')
|
||||
let sexList:any = [
|
||||
let designType:any = ref({
|
||||
name:'',
|
||||
value:''
|
||||
})
|
||||
let sex:any = ref({
|
||||
label:'',
|
||||
value:''
|
||||
})
|
||||
const sexList:any = ref([])
|
||||
const printType = computed(() => {
|
||||
return store.state.UserHabit.printType;
|
||||
});
|
||||
const designElementsType = computed(() => {
|
||||
return store.state.UserHabit.designElementsType;
|
||||
});
|
||||
const positionType = computed(() => {
|
||||
return store.state.UserHabit.Position;
|
||||
});
|
||||
|
||||
]
|
||||
let disignTypeList:any = [
|
||||
|
||||
]
|
||||
let designTypeList:any = ref({
|
||||
Sketchboard:positionType,
|
||||
Moodboard:[],
|
||||
Printboard:printType,
|
||||
Models:[],
|
||||
DesignElements:designElementsType,
|
||||
})
|
||||
let imgList = ref([])
|
||||
let currentPage:any = ref(1)
|
||||
let pageSize:any = ref(18)
|
||||
@@ -413,32 +418,17 @@ export default defineComponent({
|
||||
let uploadUrl:any = ref('')
|
||||
let currentUploadFileNum:any = ref(0) //当次上传文件数量
|
||||
let isShowMark:any = ref(false) //蒙层
|
||||
let store = useStore();
|
||||
let uploadGenerate:any = ref('Upload')
|
||||
let checkbox = ref([
|
||||
{
|
||||
name: "image",
|
||||
type: true,
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
type: false,
|
||||
},
|
||||
{
|
||||
name: "text-image",
|
||||
type: false,
|
||||
},
|
||||
]);
|
||||
let inputShow = ref(false)
|
||||
let generateCheckbox:any = ref()
|
||||
let captionGeneration:any = ref()
|
||||
let captionGeneration:any = ref('')
|
||||
let inputTime = ref()
|
||||
let generateList:any = ref({
|
||||
Sketchboard:[],
|
||||
Moodboard:[],
|
||||
Printboard:[],
|
||||
Models:[]
|
||||
|
||||
Models:[],
|
||||
DesignElements:[],
|
||||
})
|
||||
let selectGenerateList:any = ref([])
|
||||
let printModel = ref({
|
||||
@@ -449,7 +439,6 @@ export default defineComponent({
|
||||
let {t} = useI18n()
|
||||
let type:any = {
|
||||
selectCode:selectCode,
|
||||
designType:designType
|
||||
}
|
||||
provide('type',type)
|
||||
let value = ref({
|
||||
@@ -466,27 +455,32 @@ export default defineComponent({
|
||||
Sketchboard:'',
|
||||
Moodboard:'',
|
||||
Printboard:'',
|
||||
Models:''
|
||||
Models:'',
|
||||
DesignElements:'',
|
||||
})
|
||||
let generateProceedList = ref([])
|
||||
let isGenerate:any = ref({
|
||||
Sketchboard:false,
|
||||
Moodboard:false,
|
||||
Printboard:false,
|
||||
Models:false
|
||||
Models:false,
|
||||
DesignElements:false,
|
||||
})
|
||||
let remGenerate:any = ref({
|
||||
Sketchboard:false,
|
||||
Moodboard:false,
|
||||
Printboard:false,
|
||||
Models:false
|
||||
Models:false,
|
||||
DesignElements:false,
|
||||
})
|
||||
let remGenerateTime:any = ref({
|
||||
Sketchboard:'',
|
||||
Moodboard:'',
|
||||
Printboard:'',
|
||||
Models:''
|
||||
Models:'',
|
||||
DesignElements:'',
|
||||
})
|
||||
let scene:any = ref({})
|
||||
let dragIdx:any=ref(0)
|
||||
let getLibraryListInputTime:any = ref()
|
||||
const options:any = ref([
|
||||
@@ -500,15 +494,15 @@ export default defineComponent({
|
||||
label:'classificationName',
|
||||
}
|
||||
let isTextarea = ref(false)
|
||||
let workspace:any = ref({})
|
||||
return {
|
||||
menuList,
|
||||
selectImgList,
|
||||
selectCode,
|
||||
searchPictureName,
|
||||
newSearchPictureName,
|
||||
sexList,
|
||||
sex,
|
||||
disignTypeList,
|
||||
designTypeList,
|
||||
designType,
|
||||
imgList,
|
||||
currentPage,
|
||||
@@ -519,7 +513,6 @@ export default defineComponent({
|
||||
isShowMark,
|
||||
store,
|
||||
uploadGenerate,
|
||||
checkbox,
|
||||
inputShow,
|
||||
generateCheckbox,
|
||||
captionGeneration,
|
||||
@@ -537,11 +530,13 @@ export default defineComponent({
|
||||
isGenerate,
|
||||
remGenerate,
|
||||
remGenerateTime,
|
||||
scene,
|
||||
dragIdx,
|
||||
getLibraryListInputTime,
|
||||
props,
|
||||
options,
|
||||
isTextarea,
|
||||
workspace,
|
||||
}
|
||||
},
|
||||
data(this_) {
|
||||
@@ -560,6 +555,7 @@ export default defineComponent({
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token: "",
|
||||
isInputFocus:false,
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
@@ -585,6 +581,9 @@ export default defineComponent({
|
||||
this.getClass()
|
||||
this.getSex()
|
||||
this.token = getCookie("token") || "";
|
||||
this.workspace = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
|
||||
@@ -606,31 +605,36 @@ export default defineComponent({
|
||||
})
|
||||
},
|
||||
async getPosition(){
|
||||
let params
|
||||
if(this.sex.value == 'Female'){
|
||||
params = 'FemalePosition'
|
||||
}else{
|
||||
params = 'MalePosition'
|
||||
}
|
||||
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
let arr:any = []
|
||||
rv.forEach((item:any) => {
|
||||
arr.push({
|
||||
value:item.name,
|
||||
label:item.value,
|
||||
name:item.value
|
||||
})
|
||||
});
|
||||
this.designType = arr[0]
|
||||
this.disignTypeList = arr
|
||||
// this.workspaceItem.position = this.totalTypeList[0].label
|
||||
}
|
||||
})
|
||||
// let params
|
||||
// if(this.sex.value == 'Female'){
|
||||
// params = 'FemalePosition'
|
||||
// }else{
|
||||
// params = 'MalePosition'
|
||||
// }
|
||||
this.store.commit('setPosition',this.sex.value)
|
||||
this.designType = this.designTypeList.Sketchboard[0]
|
||||
|
||||
// await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
|
||||
// if (rv) {
|
||||
// let arr:any = []
|
||||
// rv.forEach((item:any) => {
|
||||
// arr.push({
|
||||
// value:item.name,
|
||||
// label:item.value,
|
||||
// name:item.value
|
||||
// })
|
||||
// });
|
||||
// this.designType = arr[0]
|
||||
// this.designTypeList['Sketchboard'] = arr
|
||||
// // this.workspaceItem.position = this.totalTypeList[0].label
|
||||
// }
|
||||
// })
|
||||
},
|
||||
likeFile(item:any,str:string){
|
||||
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? item.category : ''
|
||||
|
||||
let designType = ''
|
||||
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
|
||||
designType = this.designType.value
|
||||
}
|
||||
if(str == 'like'){
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
@@ -668,42 +672,29 @@ export default defineComponent({
|
||||
this.total = 0,
|
||||
this.searchPictureName = ''
|
||||
this.imgList = [],
|
||||
// this.sex = 'Female',
|
||||
// this.designType = 'Outwear',
|
||||
this.selectImgList = []
|
||||
this.isTextarea = false
|
||||
this.value.labelValue = []
|
||||
this.getLibraryList('')
|
||||
this.getClass()
|
||||
if(this.designTypeList[this.selectCode].length >= 1){
|
||||
this.designType = this.designTypeList[this.selectCode][0]
|
||||
}else{
|
||||
this.designType = {
|
||||
name:'',
|
||||
value:'',
|
||||
}
|
||||
}
|
||||
if(this.selectCode == 'Models')this.uploadGenerate = 'Upload'
|
||||
|
||||
if(this.selectCode == 'Printboard')this.uploadGenerate = 'Upload'
|
||||
if(this.selectCode != 'DesignElements'){
|
||||
this.getClass()
|
||||
}
|
||||
this.getLibraryList('')
|
||||
this.captionGeneration = ''
|
||||
this.selectGenerateList = []
|
||||
// this.generateList = {
|
||||
// 'Sketchboard':[],
|
||||
// 'Moodboard':[],
|
||||
// 'Printboard':[]
|
||||
// }
|
||||
this.inputShow = false
|
||||
}
|
||||
this.upload.level1Type = menu.code
|
||||
}
|
||||
if(this.selectCode == 'Sketchboard'){
|
||||
this.checkbox=[
|
||||
{
|
||||
name: "image",
|
||||
type: false,
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
type: true,
|
||||
},
|
||||
{
|
||||
name: "text-image",
|
||||
type: false,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
async sexChange(){
|
||||
@@ -933,7 +924,10 @@ export default defineComponent({
|
||||
// message.info(this.t('isTest.image'));
|
||||
// return
|
||||
// }
|
||||
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
|
||||
let designType = ''
|
||||
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
|
||||
designType = this.designType.value
|
||||
}
|
||||
let new_data = {
|
||||
file:event.file,
|
||||
level1Type:this.selectCode,
|
||||
@@ -1001,7 +995,10 @@ export default defineComponent({
|
||||
this.value.labelValue.forEach((item:any)=>{
|
||||
labelArr.push(item[item.length-1])
|
||||
})
|
||||
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
|
||||
let designType = ''
|
||||
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
|
||||
designType = this.designType.value
|
||||
}
|
||||
let data = {
|
||||
classificationIdList:labelArr,
|
||||
level1Type:this.selectCode,
|
||||
@@ -1020,13 +1017,12 @@ export default defineComponent({
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
(rv: any) => {
|
||||
if(rv.content.length == 0 && this.currentPage != 1){
|
||||
if(rv.content?.length == 0 && this.currentPage != 1){
|
||||
this.currentPage = 1
|
||||
this.getLibraryList('')
|
||||
}else{
|
||||
this.imgList = rv.content
|
||||
this.total = rv.total
|
||||
this.newSearchPictureName = this.searchPictureName
|
||||
this.isShowMark = false
|
||||
}
|
||||
}
|
||||
@@ -1050,25 +1046,17 @@ export default defineComponent({
|
||||
placementClick(data:any){
|
||||
let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
|
||||
placementModal.showPlacementModal(data,this.sex)
|
||||
},
|
||||
//generate
|
||||
setKeyword(num: any) {
|
||||
this.checkbox.forEach((v: any) => {
|
||||
v.type = false;
|
||||
});
|
||||
nextTick().then(()=>{
|
||||
this.checkbox[num].type = true
|
||||
if(this.checkbox[1].type){
|
||||
this.selectGenerateList.forEach((v:any)=>{
|
||||
v.checked = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
setTextareaShow(){
|
||||
if(this.checkbox[0].type && this.selectCode != 'Moodboard') return
|
||||
this.isTextarea = !this.isTextarea
|
||||
},
|
||||
cliSetKeyword(value:any){
|
||||
let str = ''
|
||||
if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
|
||||
str = ','
|
||||
}
|
||||
this.captionGeneration += str + value
|
||||
},
|
||||
ifMaximumLength(){
|
||||
clearTimeout(this.inputTime)
|
||||
this.inputTime = setTimeout(()=>{
|
||||
@@ -1080,16 +1068,41 @@ export default defineComponent({
|
||||
}
|
||||
},500)
|
||||
},
|
||||
inputFocus(){
|
||||
if(this.isInputFocus) return
|
||||
this.isInputFocus = true
|
||||
let setDomCli = ()=>{
|
||||
this.isInputFocus = false
|
||||
document.removeEventListener('click',setDomCli)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
document.addEventListener('click',setDomCli)
|
||||
},200)
|
||||
},
|
||||
generateFileUploadChange(data:any){
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res:any = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0){
|
||||
let category:any={
|
||||
value:'',
|
||||
name:'',
|
||||
}
|
||||
file.id = res.data.id;
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
file.type_ = "upload";
|
||||
if(this.designTypeList[this.selectCode] && this.selectCode == 'Sketchboard'){
|
||||
this.designTypeList[this.selectCode].forEach((item:any) => {
|
||||
if(item.name == res.data.level2Type){
|
||||
category.value = item?.value
|
||||
category.name = item?.name
|
||||
}
|
||||
});
|
||||
}
|
||||
file.categoryValue = category?.value;
|
||||
file.category = category?.name;
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
@@ -1114,21 +1127,6 @@ export default defineComponent({
|
||||
deleteFile(index: any) {
|
||||
this.selectGenerateList.splice(index, 1);
|
||||
|
||||
},
|
||||
setSketchboardItem(item:any){
|
||||
if(this.checkbox[1].type){
|
||||
return
|
||||
}
|
||||
if(item.checked){
|
||||
item.checked = false
|
||||
}else{
|
||||
this.selectGenerateList.forEach((v:any)=>{
|
||||
if(v.checked){
|
||||
v.checked = false
|
||||
}
|
||||
})
|
||||
item.checked = true
|
||||
}
|
||||
},
|
||||
PrintModel(){
|
||||
if(!this.printModel.optype){
|
||||
@@ -1154,79 +1152,36 @@ export default defineComponent({
|
||||
if(this.isGenerate[selectCodeStr]){
|
||||
return
|
||||
}
|
||||
let arr = ["Painting Style","Illustration Style","Real Style"]
|
||||
let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
|
||||
if(selectCodeStr == 'Moodboard'){
|
||||
generateType = this.checkbox[1].name
|
||||
let level2Type = ''
|
||||
let collectionElementId = ''
|
||||
let base64 = ''
|
||||
if(this.selectGenerateList?.[0]){
|
||||
level2Type = this.selectGenerateList[0].categoryValue?this.selectGenerateList[0].categoryValue:''
|
||||
collectionElementId = this.selectGenerateList[0].id
|
||||
if(this.selectGenerateList[0].base64){
|
||||
base64 = this.selectGenerateList[0].imgUrl
|
||||
}
|
||||
let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
|
||||
}
|
||||
if(this.selectCode == "Sketchboard"){
|
||||
console.log(this.selectGenerateList);
|
||||
}else if(this.selectCode == "Printboard"){
|
||||
level2Type = this.scene?.value
|
||||
}
|
||||
let arr = ["Painting Style","Illustration Style","Real Style"]
|
||||
let data = {
|
||||
generateType:generateType,
|
||||
generateType:'text',
|
||||
designType:'collection',
|
||||
collectionElementId:generageImg?.id,
|
||||
collectionElementId:collectionElementId,
|
||||
level1Type:selectCodeStr,
|
||||
level2Type:selectCodeStr == 'Sketchboard'?this.designType.value:'',
|
||||
level2Type:level2Type,
|
||||
userId:(this?.userInfo as any).userId,
|
||||
isTestUser:this.driver__.driver?false:this.isTest,
|
||||
text:selectCodeStr == 'Printboard'?`${arr[this.printModel.num-1]},${this.captionGeneration}`:this.captionGeneration,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:1,//为1就是Print
|
||||
gender:selectCodeStr == 'Sketchboard'?this.sex.value:'',
|
||||
base64:base64,
|
||||
}
|
||||
if(generateType == 'image'){
|
||||
if(generageImg?.id){
|
||||
data.text = arr[this.printModel.num-1]
|
||||
}else{
|
||||
message.info(
|
||||
this.t('LibraryPage.jsContent9')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
// this.beforeUpload(false)
|
||||
if(this.captionGeneration){
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 250){
|
||||
message.info(
|
||||
this.t('LibraryPage.jsContent6')
|
||||
);
|
||||
return
|
||||
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('LibraryPage.jsContent7')
|
||||
);
|
||||
return
|
||||
}
|
||||
|
||||
}else if(generateType == 'text-image'){
|
||||
if(generageImg?.id){
|
||||
if(this.captionGeneration){
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 250){
|
||||
message.info(
|
||||
this.t('LibraryPage.jsContent6')
|
||||
);
|
||||
return
|
||||
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('LibraryPage.jsContent7')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('LibraryPage.jsContent9')
|
||||
);
|
||||
return
|
||||
}
|
||||
}
|
||||
// this.isShowMark = true
|
||||
this.isGenerate[selectCodeStr] = true
|
||||
this.isTextarea = false
|
||||
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
|
||||
@@ -1249,12 +1204,6 @@ export default defineComponent({
|
||||
return
|
||||
}
|
||||
}
|
||||
// rv.uniqueId.forEach((item:any) => {
|
||||
// let arr:any = {}
|
||||
// arr.taskId = item
|
||||
// arr.status = 'execution'
|
||||
// this.generateList[selectCodeStr].unshift(arr)
|
||||
// });
|
||||
this.setGenerate(selectCodeStr,rv.uniqueId)
|
||||
|
||||
}
|
||||
@@ -1278,7 +1227,7 @@ export default defineComponent({
|
||||
rv.forEach((element:any) => {
|
||||
if(element.status === 'Success'){
|
||||
element.imgUrl = element.url
|
||||
this.disignTypeList.forEach((itemCategory:any) => {
|
||||
this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
|
||||
if(itemCategory.value == element.category){
|
||||
element.categoryValue = itemCategory?.label
|
||||
element.category = itemCategory?.value
|
||||
@@ -1376,7 +1325,6 @@ export default defineComponent({
|
||||
|
||||
},
|
||||
getClass(){
|
||||
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
|
||||
let data = {
|
||||
"classificationIdList": [],
|
||||
"classificationName": "",
|
||||
@@ -1449,7 +1397,8 @@ export default defineComponent({
|
||||
display: flex;
|
||||
padding-top: 2rem;
|
||||
.library_body_left{
|
||||
width: 27.5rem;
|
||||
// width: 27.5rem;
|
||||
width: 36.5rem;
|
||||
height: 100%;
|
||||
background: rgba(255,255,255,0.4);
|
||||
margin-right: 5rem;
|
||||
@@ -1715,57 +1664,14 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.input_border{
|
||||
padding-bottom: 0;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
padding: 0;
|
||||
.input_box{
|
||||
background:initial;
|
||||
position: relative;
|
||||
padding: 1.5rem 0;
|
||||
padding: 0;
|
||||
// &:hover{
|
||||
// .search_textarea{
|
||||
// display: block
|
||||
// }
|
||||
// }
|
||||
|
||||
input{
|
||||
width: 30rem;
|
||||
width: 50rem;
|
||||
.input_box_btnBox{
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
.search_input{
|
||||
height: 3rem;
|
||||
&.active{
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
.icon-xiala{
|
||||
display: inline-block;
|
||||
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
&.active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.forbidden{
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
.search_textarea{
|
||||
z-index:3;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 30rem;
|
||||
border-radius: 4px;
|
||||
height: 20rem;
|
||||
top: .5rem;
|
||||
border: 1px solid #dcdfe6;
|
||||
&.forbidden{
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
.started_btn{
|
||||
}
|
||||
|
||||
.generage_btn{
|
||||
margin: 0 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1773,6 +1679,7 @@ export default defineComponent({
|
||||
.printModel{
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
margin-right: 2rem;
|
||||
>div{
|
||||
width: 13rem;
|
||||
// display: flex;
|
||||
@@ -1809,38 +1716,6 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload_item{
|
||||
margin-left: 4rem;
|
||||
.upload_file_item{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
margin: 0;
|
||||
margin-right: 2rem;
|
||||
.delete_file_block{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
span{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload_component{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
.upload_item:hover{
|
||||
.upload_file_item{
|
||||
.delete_file_block{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user