generate交互更新

This commit is contained in:
X1627315083
2024-05-28 16:00:26 +08:00
26 changed files with 1536 additions and 412 deletions

View File

@@ -3,7 +3,10 @@ NODE_ENV = 'development'
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
# VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
# VUE_APP_BASE_URL = 'http://192.168.1.9:17088'
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
# 佩佩
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
# 海波
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,56 @@
@font-face {
font-family: 'EN_slogan_art1';
font-weight: normal;
src: url('slogan/EN_Wallhynd.ttf') format('truetype');
}
@font-face {
font-family: 'EN_slogan_art2';
font-weight: normal;
src: url('slogan/EN_Caveat-VariableFont_wght.ttf') format('truetype');
}
@font-face {
font-family: 'EN_slogan_art3';
font-weight: normal;
src: url('slogan/EN_EvgenyRegular.ttf') format('truetype');
}
@font-face {
font-family: 'EN_slogan_art4';
font-weight: normal;
src: url('slogan/EN_AngryFontNew-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'EN_slogan_art5';
font-weight: normal;
src: url('slogan/EN_skeleboom.ttf') format('truetype');
}
@font-face {
font-family: 'EN_slogan_art6';
font-weight: normal;
src: url('slogan/EN_Jaro-Regular-VariableFont_opsz.ttf') format('truetype');
}
@font-face {
font-family: 'EN_slogan_art7';
font-weight: normal;
src: url('slogan/EN_NaughtySwines-Regular.ttf') format('truetype');
}
/* cn */
@font-face {
font-family: 'CN_slogan_art1';
font-weight: normal;
src: url('slogan/CN_LongCang-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'CN_slogan_art2';
font-weight: normal;
src: url('slogan/CN_ZCOOLQingKeHuangYou-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'CN_slogan_art3';
font-weight: normal;
src: url('slogan/CN_ZCOOLXiaoWei-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'CN_slogan_art4';
font-weight: normal;
src: url('slogan/CN_ZhiMangXing-Regular.ttf') format('truetype');
}

View File

@@ -10,6 +10,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" href="/css/googleapis.css">
<link rel="stylesheet" href="/css/roboto.css">
<link rel="stylesheet" href="/css/sloganFamily.css">
</head>
<body>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> -->

View File

@@ -618,6 +618,23 @@ li {
.generalModel .fi-rr-arrow-small-left {
font-size: 2rem;
}
.generalModel .collection_title {
position: absolute;
top: calc(4rem*1.2);
display: flex;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0, 0, 0, 0.65);
align-items: center;
}
.generalModel .collection_title .collection_title_text {
margin-right: calc(4rem*1.2);
}
.generalModel .collection_title .collection_title_text_intro {
font-size: calc(1.2rem*1.2);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
}
.generalModel .generalModel_btn .generalModel_closeIcon {
position: absolute;
top: calc(2rem*1.2);
@@ -1292,7 +1309,6 @@ textarea:focus {
display: flex;
align-items: center;
position: sticky;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
background: #fff;
top: 0;
@@ -1305,6 +1321,8 @@ textarea:focus {
position: relative;
z-index: 2;
flex: 1;
display: flex;
align-items: center;
}
.collection_modal_body .input_border .input_box.active input,
.design_detail_modal_component .input_border .input_box.active input,
@@ -1365,14 +1383,28 @@ textarea:focus {
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
margin-right: 0;
}
.collection_modal_body .input_border .input_box_btnBox,
.design_detail_modal_component .input_border .input_box_btnBox,
.library_page .input_border .input_box_btnBox {
border: calc(0.1rem*1.2) solid #F1F1F1;
width: var(--width);
display: flex;
float: left;
}
.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 {
width: 8rem;
height: 8rem;
}
.collection_modal_body .input_border input,
.design_detail_modal_component .input_border input,
.library_page .input_border input {
width: 100%;
border-radius: calc(0.5rem*1.2);
width: var(--width);
border: 1px solid rgba(0, 0, 0, 0.15);
padding-left: calc(1.5rem*1.2);
border: calc(0.1rem*1.2) solid #F1F1F1;
border: calc(0.1rem*1.2) solid #ffffff00;
font-size: calc(1.6rem*1.2);
font-weight: 400;
}
@@ -1396,24 +1428,56 @@ textarea:focus {
.library_page .input_border input.forbidden {
cursor: no-drop;
}
.collection_modal_body .input_border .icon-xiala,
.design_detail_modal_component .input_border .icon-xiala,
.library_page .input_border .icon-xiala {
margin-left: 1rem;
display: inline-block;
.collection_modal_body .input_border .input_box_btnBox_upImg,
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
.library_page .input_border .input_box_btnBox_upImg {
height: 100%;
}
.collection_modal_body .input_border .fi,
.design_detail_modal_component .input_border .fi,
.library_page .input_border .fi {
margin-right: 1rem;
display: flex;
cursor: pointer;
transition: all 0.3s;
position: relative;
z-index: 4;
width: 4rem;
align-items: center;
justify-content: center;
}
.collection_modal_body .input_border .icon-xiala.active,
.design_detail_modal_component .input_border .icon-xiala.active,
.library_page .input_border .icon-xiala.active {
.collection_modal_body .input_border .fi.active,
.design_detail_modal_component .input_border .fi.active,
.library_page .input_border .fi.active {
transform: rotate(180deg);
}
.collection_modal_body .input_border .icon-xiala.forbidden,
.design_detail_modal_component .input_border .icon-xiala.forbidden,
.library_page .input_border .icon-xiala.forbidden {
.collection_modal_body .input_border .fi.forbidden,
.design_detail_modal_component .input_border .fi.forbidden,
.library_page .input_border .fi.forbidden {
cursor: no-drop;
}
.collection_modal_body .input_border .search_upImg,
.design_detail_modal_component .input_border .search_upImg,
.library_page .input_border .search_upImg {
width: 4rem;
height: 100%;
position: absolute;
opacity: 0;
font-size: 1.2rem;
}
.collection_modal_body .input_border .search_upImg span,
.design_detail_modal_component .input_border .search_upImg span,
.library_page .input_border .search_upImg span {
position: absolute;
width: 100%;
}
.collection_modal_body .input_border .search_upImg .ant-upload-select-picture-card,
.design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
.library_page .input_border .search_upImg .ant-upload-select-picture-card {
width: 100%;
height: 100%;
display: block !important;
}
.collection_modal_body .input_border .search_textarea,
.design_detail_modal_component .input_border .search_textarea,
.library_page .input_border .search_textarea {
@@ -1428,18 +1492,6 @@ textarea:focus {
top: 0.2rem;
border: 1px solid #dcdfe6;
}
.collection_modal_body .input_border span,
.design_detail_modal_component .input_border span,
.library_page .input_border span {
position: absolute;
bottom: -2rem;
left: 0;
zoom: 0.8;
font-size: 1.2rem;
color: red;
opacity: 0;
width: 100%;
}
.collection_modal_body .input_border .generage_btn,
.design_detail_modal_component .input_border .generage_btn,
.library_page .input_border .generage_btn {
@@ -1515,6 +1567,11 @@ textarea:focus {
width: 100%;
position: relative;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover div,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover div,
.library_page .upload_item .upload_file_item .upload_file_item_content:hover div {
opacity: 1;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
@@ -1570,6 +1627,11 @@ textarea:focus {
.library_page .upload_item .upload_file_item .upload_img_icon {
width: calc(4.6rem*1.2);
}
.collection_modal_body .upload_item .upload_file_item:last-child,
.design_detail_modal_component .upload_item .upload_file_item:last-child,
.library_page .upload_item .upload_file_item:last-child {
margin: 0;
}
.generalModel_modal .ant-modal-content {
border-radius: calc(1rem * 1.2);
overflow: hidden;

View File

@@ -707,6 +707,23 @@ input:focus{
.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
font-size: 2rem;
}
.collection_title{
position: absolute;
top: calc(4rem*1.2);
display: flex;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: calc(4rem*1.2);
}
.collection_title_text_intro{
font-size: calc(1.2rem*1.2);
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.generalModel_btn {
.generalModel_closeIcon{
position: absolute;
@@ -1396,7 +1413,6 @@ textarea:focus{
display: flex;
align-items: center;
position: sticky;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
background: #fff;
top: 0;
@@ -1406,6 +1422,8 @@ textarea:focus{
position: relative;
z-index: 2;
flex: 1;
display: flex;
align-items: center;
&.active{
input{
// color: rgb(255, 0, .7);
@@ -1457,12 +1475,25 @@ textarea:focus{
}
}
}
input{
border-radius: calc(.5rem*1.2);
.input_box_btnBox{
border: calc(0.1rem*1.2) solid #F1F1F1;
width: var(--width);
display: flex;
float: left;
}
.upload_item{
.upload_file_item{
width: 8rem;
height: 8rem;
}
}
input{
width: 100%;
border-radius: calc(.5rem*1.2);
border: 1px solid rgba(0,0,0,.15);
padding-left: calc(1.5rem*1.2);
border: calc(0.1rem*1.2) solid #F1F1F1;
border: calc(0.1rem*1.2) solid #ffffff00;
// border: calc(0.1rem*1.2) solid #F1F1F1;
font-size: calc(1.6rem*1.2);
font-weight: 400;
&input:-moz-placeholder{
@@ -1480,11 +1511,20 @@ textarea:focus{
cursor: no-drop;
}
}
.icon-xiala{
margin-left:1rem;
display: inline-block;
.input_box_btnBox_upImg{
height: 100%;
}
.fi{
margin-right:1rem;
display: flex;
cursor: pointer;
transition: all .3s;
position: relative;
z-index: 4;
width: 4rem;
align-items: center;
justify-content: center;
&.active{
transform: rotate(180deg);
}
@@ -1492,6 +1532,22 @@ textarea:focus{
cursor: no-drop;
}
}
.search_upImg{
width: 4rem;
height: 100%;
position: absolute;
opacity: 0;
font-size: 1.2rem;
span{
position: absolute;
width: 100%;
}
.ant-upload-select-picture-card{
width: 100%;
height: 100%;
display: block !important;
}
}
.search_textarea{
z-index:3;
height: auto;
@@ -1506,20 +1562,15 @@ textarea:focus{
border: 1px solid #dcdfe6;
}
span{
position: absolute;
// bottom: calc(0rem*1.2);
bottom: -2rem;
left: 0;
zoom: .8;
// font-size: calc(1.2rem*1.2);
font-size: 1.2rem;
color: red;
opacity: 0;
// transform: scale(.7);
// transform-origin: left bottom;
width: 100%;
}
// span{
// // bottom: -2rem;
// left: 0;
// // zoom: .8;
// top: 0;
// font-size: 1.2rem;
// color: red;
// width: 100%;
// }
.generage_btn{
// margin: 0 auto;
margin-left: 2rem;
@@ -1581,7 +1632,9 @@ textarea:focus{
height: 100%;
width: 100%;
position: relative;
&:hover div {
opacity: 1;
}
&:hover .delete_file_block {
display: block;
}
@@ -1593,7 +1646,6 @@ textarea:focus{
max-width: 100%;
object-fit: cover;
}
.delete_file_block {
display: none;
width: 100%;
@@ -1630,6 +1682,9 @@ textarea:focus{
width: calc(4.6rem*1.2);
}
}
.upload_file_item:last-child{
margin: 0;
}
}
}
.generalModel_modal{//公共弹窗

View File

@@ -264,12 +264,12 @@ export default defineComponent({
}
let data = this.workspaceItem
delete data.isLastIndex
this.putWorkspace(data,'')
this.putWorkspace(data,this.workspaceItem.id)
this.openType.model = false
// this.getDetail(this.workspaceItem.id)
this.store.commit("setWorkspace", this.workspaceItem);
}else{
this.getworkspace()
this.getworkspace('detail')
}
}
},
@@ -281,19 +281,20 @@ export default defineComponent({
}
}
},
'workspaceItem.id_':{
'workspace.id':{
handler(newVal:any,oldVal:any){
this.workspace.workspaceList.forEach((v:any)=>{
if(v.id == this.workspaceItem.id_){
this.workspaceItem = v
this.workspaceItem.id_ = v.id
}
if(v.id == oldVal){
delete v.isLastIndex
this.putWorkspace(v,newVal)
}
})
this.getMannequins()
// this.workspace.workspaceList.forEach((v:any)=>{
// if(v.id == this.workspaceItem.id_){
// this.workspaceItem = v
// this.workspaceItem.id_ = v.id
// }
// if(v.id == oldVal){
// delete v.isLastIndex
// this.putWorkspace(v,newVal)
// this.getDetail(newVal)
// }
// })
this.getDetail(newVal)
}
},
'openType.workspace':{
@@ -334,10 +335,8 @@ export default defineComponent({
// new Promise((resolve) => {
// this.getPosition(resolve)
// })
await this.getPosition()
if(this.workspaceItem.id == -1){
this.getworkspace()
}
await this.getPosition()//获取衣服类型
this.getworkspace('')
this.getSex()
},
directives:{
@@ -449,7 +448,7 @@ export default defineComponent({
// this.getworkspace()
// this.setPosition('')
},
getworkspace(){
getworkspace(str:any){
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
// if (rv) {
// console.log(rv,'workspace');
@@ -464,58 +463,23 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
if (rv) {
this.getDetail(rv.id)
this.total = rv.page.total
// rv.page.content.forEach((v:any) => {
// v.id_ = v.id
// if(v.position == "Overall"){
// v.overallSingle = false
// }else{
// v.overallSingle = true
// }
// v.putName = false
// });
this.workspace.id = rv.id
this.total = rv.page.total
this.workspace.workspaceList = rv.page.content
return
rv.page.content.forEach((v:any) => {
// v.id_ = v.id
// if(v.position == "Overall"){
// v.overallSingle = false
// }else{
// v.overallSingle = true
// }
// v.putName = false
if(v.id == (this.workspaceItem.id == -1 ?rv.id:this.workspaceItem.id)){
// this.workspaceItem = v
// this.workspaceItem.keyWord = {
// Moodboard:[{
// name:'Moodboard',
// id:1,
// },{
// name:'Moodboard',
// id:2,
// },{
// name:'Moodboard',
// id:3,
// }],
// Printboard:[{
// name:'Printboard',
// id:1,
// },{
// name:'Printboard',
// id:2,
// },{
// name:'Printboard',
// id:3,
// }],
// Sketchboard:[{
// name:'Sketchboard',
// id:1,
// },{
// name:'Sketchboard',
// id:2,
// },{
// name:'Sketchboard',
// id:3,
// }],
// }
// this.setMannequinsSex()
// this.setPosition('')
}
});
// this.workspaceItem = v
// this.setMannequinsSex()
// this.setPosition('')
}
})
},
@@ -527,12 +491,43 @@ export default defineComponent({
}else{
rv.overallSingle = true
}
rv.keyWord = {
Moodboard:[{
name:'Moodboard',
id:1,
},{
name:'Moodboard',
id:2,
},{
name:'Moodboard',
id:3,
}],
Printboard:[{
name:'Printboard',
id:1,
},{
name:'Printboard',
id:2,
},{
name:'Printboard',
id:3,
}],
Sketchboard:[{
name:'Sketchboard',
id:1,
},{
name:'Sketchboard',
id:2,
},{
name:'Sketchboard',
id:3,
}],
}
rv.putName = false
this.workspaceItem = rv
console.log(rv);
this.setMannequinsSex()
this.setPosition('')
// this.getworkspace()
}
})
},
@@ -558,25 +553,30 @@ export default defineComponent({
if(this.workspaceItem.id == -1){
return
}
this.openType.model = false
Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
if (rv) {
if(index){
// this.getDetail(index)
}else{
// this.getworkspace()
}
if(index){
this.getDetail(index)
}else{
this.getworkspace('')
}
this.workspace.workspaceList[index].workSpaceName = this.workspaceItemName
this.workspace.workspaceList[index].putName = false
this.openType.addWorkspace = false
}
}).catch((res)=>{
this.getworkspace()
// this.getworkspace()
});
},
deleteWorkspace(data:any){
Https.axiosDelete(Https.httpUrls.workspaceRemove,data).then((rv: any) => {
if (rv) {
this.getworkspace()
this.getworkspace('')
}
})
},
@@ -631,6 +631,7 @@ export default defineComponent({
message.info(this.t('Habit.jsContent2'));
}else{
if(index == -1){
let data = {
workSpaceName:this.workspaceItemName,
}
@@ -644,7 +645,7 @@ export default defineComponent({
}
})
data.workSpaceName = this.workspaceItemName
this.putWorkspace(data,'')
this.putWorkspace(data,this.workspaceItem.id)
}
}
@@ -666,8 +667,9 @@ export default defineComponent({
this.workspace.workspaceList.forEach((v:any) => {
v.putName = false
});
this.workspaceItem.id_ = num
this.putWorkspace(this.workspaceItem,'')
this.workspace.id = num
// this.workspaceItem.id_ = num
this.openType.workspace = false
},
//新建参数

View File

@@ -1,7 +1,7 @@
<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'">
<!-- <div v-show="type_.type2 != 'Sketchboard'">
<label>
<input
type="checkbox"
@@ -32,29 +32,86 @@
/>
<span>{{ $t('Generate.TextImage') }}</span>
</label>
</div>
<div v-if="type_.type2 == 'Printboard'" class="printModel">
</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> -->
<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">
<div @click.stop="PrintModel" class="Guide_1_2_4" :class="[driver__.driver?'showEvents':'']">{{ printModel.name }}</div>
<ul v-show="printModel.optype" class="Guide_1_2_5" :class="[driver__.driver?'showEvents':'']">
<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
<li class="printModel_item" @click="setprintModel(3)">{{ $t('Generate.Model3') }}</li>
<!-- <li v-show="(sketchboardList.length>=1 && moodboarList.length>=1&& checkbox[0].type) || (sketchboardList.length>=2 && checkbox[0].type) " class="printModel_item" @click="setprintModel(4)">{{ $t('Generate.Merge') }}</li> -->
</ul>
</div>
</div> -->
</div>
<div v-else class="input_border" >
<div class="input_border" >
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
<input
class="search_input"
@input="ifMaximumLength"
:placeholder="$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
@click="inputFocus()"
/>
<i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i>
<div class="input_box_btnBox">
<div class="upload_item">
<div
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
:key="file"
:class="[checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
>
<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_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>
</div>
</div>
</div>
<input
class="search_input"
@input="ifMaximumLength"
:placeholder="$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
@click="inputFocus()"
/>
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard'">
<a-upload
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
v-model:file-list="sketchboardList"
:before-upload="beforeUpload"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</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"
class="search_textarea "
@@ -79,22 +136,12 @@
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
<div class="search_keyword_center">
<div class="search_keyword_center_left">
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div v-for="item in workspace?.keyWord?.[type_.type2]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
</div>
</div>
</div>
</div>
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
<!-- <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
<div class="upload_item">
<div
class="upload_file_item Guide_1_2_7"
@@ -123,36 +170,9 @@
</div>
</div>
</div>
<div
class="upload_file_item upload_component Guide_1_2_6"
:class="[driver__.driver?'showEvents':'']"
>
<a-upload
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:disabled="checkbox[1].type"
:headers="{ Authorization: token }"
v-model:file-list="sketchboardList"
:before-upload="beforeUpload"
multiple
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>
<div v-else class="generage_img Guide_1_6" :style="[loadingShow?'overflow:hidden':'']">
</div> -->
<div class="generage_img Guide_1_6" :style="[loadingShow?'overflow:hidden':'']">
<div
class="generage_img_item"
v-for="(item, index) in fileList"
@@ -160,7 +180,6 @@
@click="generageAdd(item)"
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
>
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<div
class="delete_like_file_block left1"
@@ -176,14 +195,13 @@
<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>
</div>
</template>
<script lang="ts">
@@ -197,30 +215,62 @@ import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
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";
export default defineComponent({
components: {
scaleImage,
generalMenu,
createSlogan,
},
props: ["msg",'sketchCatecoryList'],
setup() {
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:'',
optype:false,
value:'Painting Style',
label:useI18n().t('Generate.Model1')
},{
num:'',
optype:false,
value:'Illustration Style',
label:useI18n().t('Generate.Model2')
},{
num:'',
optype:false,
value:'Real Style',
label:useI18n().t('Generate.Model3')
},
])
let printModel = ref({
num:'',
optype:false,
value:'Painting Style',
label:useI18n().t('Generate.Model1')
})
let checkboxImage = ref()
let imgList = ref([]);
let selectImgList: any = ref([]);
@@ -240,14 +290,9 @@ export default defineComponent({
let sketchboardList:any = ref([])
let collectionElementid = ref()
let level2Type = ref('')
let printModel = ref({
num:'',
optype:false,
value:'Painting Style',
name:useI18n().t('Generate.Model'+1)
})
// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
// let sketchCatecoryList:any = ref([])
let workspace:any = ref({})
@@ -258,7 +303,6 @@ export default defineComponent({
let driver__:any = inject('driver__')
let {t} = useI18n()
let isMmerge = ref(false)
let isTest = ref()
let userInfo:any = {}
let generateId:any = ref([])
@@ -266,6 +310,7 @@ export default defineComponent({
let generateProceedList = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let scene:any = props.scene
return {
imgList,
selectImgList,
@@ -279,6 +324,7 @@ export default defineComponent({
searcMaterialhName,
designType,
checkbox,
selectCheckbox,
store,
fileList,
sketchboardList,
@@ -286,10 +332,13 @@ export default defineComponent({
level2Type,
checkboxImage,
printModel,
printModelList,
loadingShow,
isGenerate,
scene,
// printBoards,
moodboarList,
// moodboarList,
// sketchCatecoryList,
workspace,
inputShow,
@@ -327,7 +376,6 @@ export default defineComponent({
type1: "generate",
type2: prop.msg,
},
workspaceCom:{},
isTextarea:false,
isInputFocus:false,
};
@@ -346,26 +394,31 @@ export default defineComponent({
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
this.workspaceCom = computed(()=>{
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
this.workspace = this.store.state.Workspace.workspace
if(this.type_.type2 == 'Sketchboard'){
this.checkbox=[
{
name: "image",
type: false,
},
{
name: "text",
type: true,
},
{
name: "text-image",
type: false,
},
]
{
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:{
@@ -382,21 +435,20 @@ export default defineComponent({
}
},
workspaceCom(newVal,oldVal){
this.workspace = newVal
workspace(newVal,oldVal){
this.upload.gender = newVal?.sexEnum?.name
},
moodboarList(newVal,oldVal){
if(newVal.length>=1 || this.sketchboardList.length >= 2){
}else{
this.printModel = {
num:'',
optype:false,
value:'Painting Style',
name:this.t('Generate.Model'+1)
}
}
},
// moodboarList(newVal,oldVal){
// if(newVal.length>=1 || this.sketchboardList.length >= 2){
// }else{
// this.printModel = {
// num:'',
// optype:false,
// value:'Painting Style',
// name:this.t('Generate.Model'+1)
// }
// }
// },
},
computed: {
getSketchLabel(value: any) {
@@ -444,6 +496,14 @@ export default defineComponent({
}
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;
@@ -466,70 +526,30 @@ export default defineComponent({
if(this.driver__.driver){
driverObj__.moveNext()
}
this.printModel = {
num:'',
optype:false,
value:'Painting Style',
name:this.t('Generate.Model'+1)
}
}
},
PrintModel(){
if(!this.printModel.optype){
document.addEventListener('click',this.removePrintModel)
}
this.printModel.optype = !this.printModel.optype
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
},
removePrintModel(){
this.printModel.optype = false
document.removeEventListener('click',this.removePrintModel)
},
setprintModel(num:any){
let arr = ["Painting Style","Illustration Style","Real Style"]
if(num == 4){
this.printModel = {
num : 'Generate',
optype:false,
value:'',
name:this.t('Generate.Merge')
}
}else{
this.printModel = {
num : num,
value:arr[num-1],
optype:false,
name:this.t('Generate.Model'+num)
}
}
nextTick().then(()=>{
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')
// );
// 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){
@@ -539,24 +559,33 @@ export default defineComponent({
return
}
}else{
message.info(
this.t('Generate.jsContent5')
);
return
if(this.sketchboardList[0].imgUrl){
}else{
message.info(
this.t('Generate.jsContent5')
);
return
}
}
let data = {
generateType:'text',
designType:'',
collectionElementId:'',
generateType:'',
designType:'collection',
collectionElementId:this.sketchboardList[0].id?this.sketchboardList[0].id:'',
level1Type:this.upload.level1Type,
level2Type:'',
level2Type:this.scene?.value?this.scene?.value:'',
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:'',
}
console.log(data);
return
this.isGenerate = true
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => {
@@ -670,8 +699,6 @@ export default defineComponent({
this.isTextarea = !this.isTextarea
},
cliSetKeyword(value:any){
console.log(this.workspace);
let str = ''
if(this.searchPictureName[this.searchPictureName.length-1] != ',' && this.searchPictureName.length != 0){
str = ','
@@ -732,12 +759,7 @@ export default defineComponent({
let fileList = this.sketchboardList.filter(
(v: any) => v.status === "done"
);
let arr = this.store.state.UploadFilesModule.sketchboard;
if (arr.length >= 8) {
message.info(this.t('Generate.jsContent6'));
} else {
this.sketchboardList = fileList
}
this.sketchboardList = fileList
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
@@ -765,50 +787,55 @@ export default defineComponent({
message.warning(res.errMsg);
}
},
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()
}
setSlogan(){
let createSlogan:any = this.$refs.createSlogan
createSlogan.init()
},
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.sketchboardList
this.collectionElementid = ''
this.sketchboardList.splice(item, 1);
if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
this.printModel = {
num:'',
optype:false,
value:'Painting Style',
name:this.t('Generate.Model'+1)
}
}
// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
// this.printModel = {
// num:'',
// optype:false,
// value:'Painting Style',
// label:this.t('Generate.Model'+1)
// }
// }
},
likeFile(item:any,str:string){
if(str == 'like'){
@@ -882,6 +909,7 @@ export default defineComponent({
flex-direction: column;
border-right: 1px solid #e5e5e5;
position: relative;
padding-top: calc(2.5rem*1.2);
&.generate::-webkit-scrollbar {
display: none;
}
@@ -898,13 +926,12 @@ export default defineComponent({
position: sticky;
top: 0;
background: #fff;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
z-index: 2;
}
.generate_checkbox {
z-index: 10;
div {
margin-right: calc(4rem*1.2);
label {
display: flex;
cursor: pointer;
@@ -919,42 +946,6 @@ export default defineComponent({
}
}
}
.printModel{
>div{
width: calc(13rem*1.2);
// display: flex;
display: block;
border-radius: calc(1rem*1.2);
margin: 0;
border: 2px solid;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 calc(1rem*1.2);
text-align: center;
}
ul{
position: absolute;
width: calc(13rem*1.2);
text-align: center;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
overflow: hidden;
li{
background: rgba(0,0,0,.2);
line-height: 2;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 calc(1rem*1.2);
&.printModel_item:hover{
background: rgba(0,0,0,.4);
}
}
}
}
.generage_input {
}
.generage_img {

View File

@@ -6,25 +6,32 @@
<div class="upload_header_item">
<div class="switch_type_list">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('PrintboardUpload.Upload') }}</span>
<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('PrintboardUpload.Library') }}</span>
<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item Guide_1_2_1"
:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
>
<span>{{ $t('PrintboardUpload.Generate') }}</span>
<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
</div>
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel">{{ scene.label }} <i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
<ul v-show="openMenu">
<li v-for="item,index in sceneList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.label }}</li>
</ul>
</div>
</div>
</div>
@@ -85,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" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
@@ -105,8 +112,17 @@
<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':'']">
<input class="search_input" @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 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> -->
@@ -125,6 +141,13 @@
</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>
@@ -166,7 +189,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent,h,ref,computed,inject,createVNode, nextTick } from 'vue'
import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl} from '@/tool/util'
@@ -182,6 +205,7 @@ import { openGuide,driverObj__ } from "@/tool/guide";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import axios from 'axios'
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
export default defineComponent({
@@ -190,6 +214,7 @@ export default defineComponent({
Material,
Generate,
scaleImage,
generalMenu,
},
setup(){
let store:any =useStore()
@@ -224,6 +249,24 @@ export default defineComponent({
level2Type:'',
designType:''
})
let workspace = ref({})
let sceneList = ref([
{
label:'pattern',
value:'pattern'
},{
label:'slogan',
value:'slogan'
},{
label:'logo',
value:'logo'
},
])
let scene = ref({
label:'pattern',
value:'pattern'
})
let openMenu = ref(false)
return {
fileList,
printImgList,
@@ -246,6 +289,10 @@ export default defineComponent({
remGenerateTime,
useGenerate,
isUseGenerate,
workspace,
sceneList,
scene,
openMenu,
}
},
computed:{
@@ -295,7 +342,7 @@ export default defineComponent({
}),
source:axios.CancelToken.source(),
isTextarea:false,
isInputFocus:false,
}
},
mounted(){
@@ -305,6 +352,9 @@ export default defineComponent({
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl()
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
if(this.driver__.driver){
this.captionGeneration = 'Elegant floral print for high-fashion attire'
}else{
@@ -669,6 +719,13 @@ export default defineComponent({
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){
@@ -679,6 +736,18 @@ export default defineComponent({
}
},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
@@ -967,6 +1036,23 @@ export default defineComponent({
}
// }
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
console.log(data);
let generate:any = this.$refs.Generate
generate.scene = data
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
}
@@ -986,7 +1072,7 @@ export default defineComponent({
display: flex;
align-items: center;
position: relative;
z-index: 11;
.switch_type_item {
display: flex;
align-items: center;
@@ -1025,12 +1111,34 @@ export default defineComponent({
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-top: auto;
>div{
width: 14rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 14rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.printboard_body{

View File

@@ -139,8 +139,18 @@
<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':'']">
<input class="search_input" @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 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> -->
@@ -155,6 +165,13 @@
</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>
@@ -297,8 +314,8 @@ export default defineComponent({
token: "",
uploadUrl: "",
captionGeneration:'',
workspaceCom:{},
isTextarea:false,
isInputFocus:false,
};
},
computed: {
@@ -345,8 +362,7 @@ export default defineComponent({
}
},
watch:{
workspaceCom(newVal,oldVal){
this.workspace = newVal
workspace(newVal,oldVal){
this.upload.gender = newVal?.sexEnum?.name
},
sketchboardList:{
@@ -376,7 +392,7 @@ export default defineComponent({
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
this.workspaceCom = computed(()=>{
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
if(this.driver__.driver){
@@ -517,6 +533,13 @@ export default defineComponent({
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(){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
@@ -533,7 +556,18 @@ export default defineComponent({
}
},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})

View File

@@ -78,19 +78,29 @@
<label>
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
<img src="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
PayPal
<span>PayPal</span>
</label>
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
</div>
<!-- <label>
<label>
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
支付宝
<span>支付宝</span>
<div v-show="modeOfPayment == 'alipay'" class="UpgradePlan_payAffirm_content_detail">
<label>
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
<span>HK</span>
</label>
<label>
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
<span>大陆</span>
</label>
</div>
</label>
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
</div> -->
</div>
</div>
<div class="UpgradePlan_payAffirm_clause" ref="labelDisclaimer">
<label>
@@ -142,6 +152,7 @@ export default defineComponent({
credits:45,
})
let modeOfPayment = ref('paypal')
let modeOfPaymentDetail = ref('ALIPAYHK')
let clause = ref(false)//同意条款
let productList:any = ref([])
let payIndex = ref(0)
@@ -155,6 +166,7 @@ export default defineComponent({
stepNum,
price,
modeOfPayment,
modeOfPaymentDetail,
clause,
productList,
payIndex,
@@ -209,7 +221,6 @@ export default defineComponent({
}
},
payment(){//付款
// console.log(this.modeOfPayment,'alipay','paypal');
let url = window.location.href
// url = url.replace(/\/[^/]+$/, '') + '/home';
// console.log(url);
@@ -227,12 +238,13 @@ export default defineComponent({
return
}
let httpsUrl = Https.httpUrls.payAlipay
let httpsUrl
if(this.modeOfPayment == 'paypal'){
httpsUrl = Https.httpUrls.payPaypal
httpsUrl = Https.httpUrls.payAlipay+`/${this.price.num}?returnUrl=${url}`
}else{
httpsUrl = Https.httpUrls.payAlipayHK+`?amount=${this.price.num}&wallet=${this.modeOfPaymentDetail}`
}
Https.axiosPost(httpsUrl+`/${this.price.num}?returnUrl=${url}`,).then(
Https.axiosPost(httpsUrl).then(
(rv: any) => {
var width = 800;
var height = 600;
@@ -241,10 +253,12 @@ export default defineComponent({
this.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
if(this.modeOfPayment == 'paypal'){
// 在新窗口中写入内容
// newWindow.document.write(rv.approve);
this.newWindow.location.href = rv.approve;
}else{
this.newWindow.document.write(rv);
let data = JSON.parse(rv)
let herf = `${data.url}?${data.alipay_order_string}`
this.newWindow.location.href = herf;
// this.newWindow.document.write(herf);
}
this.isShowMark = true
// this.isShowMark = true
@@ -445,7 +459,7 @@ export default defineComponent({
display: flex;
flex-direction: column;
margin: 3rem 0;
label{
>label{
display: flex;
align-items: center;
padding: 1rem;
@@ -458,6 +472,22 @@ export default defineComponent({
// max-width: 4rem;
width: 4rem;
}
.UpgradePlan_payAffirm_content_detail{
margin-left: auto;
display: flex;
>label{
cursor: pointer;
display: flex;
align-items: center;
margin-right: 1rem;
span{
margin-left: .5rem;
}
}
>label:last-child{
margin: 0;
}
}
}
}
.UpgradePlan_payAffirm_clause{

View File

@@ -0,0 +1,433 @@
<template>
<a-modal
class="clearSlogan_modal generalModel"
v-model:visible="showPayOrder"
:footer="null"
width="50%"
:maskClosable="false"
:centered="true"
:closable="false"
wrapClassName="#app"
:keyboard="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
</div>
<div class="clearSlogan_center">
<div class="modal_title_text">
<div>Create Slogan</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="exportCanvasBox_center">
<div v-show="textBtnShow" class="clearSlogan_center_item clearSlogan_center_btn_move">
<div class="clearSlogan_center_btn_item">
<div>Color</div>
<input type="color" v-model="fill">
</div>
<div class="clearSlogan_center_btn_item">
<div>font Size</div>
<input type="Number" v-model="fontSize">
</div>
<div class="clearSlogan_center_btn_item">
<div>Font Align</div>
<ul>
<i class="fi fi-br-align-left" @click="setTextData('textAlign','left')" :class="{active:textAlign === 'left'}"></i>
<i class="fi fi-br-align-center" @click="setTextData('textAlign','center')" :class="{active:textAlign === 'center'}"></i>
<i class="fi fi-br-symbol" @click="setTextData('textAlign','right')" :class="{active:textAlign === 'right'}"></i>
</ul>
</div>
<div class="clearSlogan_center_btn_item">
<div>Font Style</div>
<ul>
<i class="fi fi-br-border-top" @click="setTextData('overline','')" :class="{active:overline}"></i>
<i class="fi fi-br-border-center-h" @click="setTextData('linethrough','')" :class="{active:linethrough}"></i>
<i class="fi fi-br-border-bottom" @click="setTextData('underline','')" :class="{active:underline}"></i>
</ul>
</div>
<div class="clearSlogan_center_btn_item">
<div>Font Family</div>
<select v-model="fontFamily" :style="{'font-family':fontFamily}">
<option v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">{{item.name}}</option>
</select>
</div>
</div>
<div class="clearSlogan_center_btn clearSlogan_center_item">
<div @click="setTextFun('')" class="clearSlogan_center_btn_item">
<div>新增</div>
</div>
<div @click="removeTextFun()" class="clearSlogan_center_btn_item">
<div>删除</div>
</div>
</div>
</div>
<div class="exportCanvasBox_submit" @click="setSubmit">
<div class="started_btn">
submit
</div>
</div>
</div>
<div></div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
creditsDetail,
allOrder,
},
emits: ['setSloganData'],
setup(props,{emit}) {
let presentState = ref('paypal');
let showPayOrder = ref(false);
let loadingShow = ref(false);
let textBtnShow = ref(false)
let { t } = useI18n();
let canvas = reactive({});
let scale = 2;
let canvasWH = ref(0);
let textData = reactive({
fill:'#000000',
fontSize:'20',
fontFamily:'Arial',
textAlign:'left',
overline: false,
linethrough: false,
underline: false,
})
onMounted(()=>{
let arr = [
{ value: 'Arial', name: 'select font' },
{ value: 'EN_slogan_art1', name: 'select font' },
{ value: 'EN_slogan_art2', name: 'select font' },
{ value: 'EN_slogan_art3', name: 'select font' },
{ value: 'EN_slogan_art4', name: 'select font' },
{ value: 'EN_slogan_art5', name: 'select font' },
{ value: 'EN_slogan_art6', name: 'select font' },
{ value: 'EN_slogan_art7', name: 'select font' },
{ value: '微软雅黑', name: '请选择字体' },
{ value: 'CN_slogan_art1', name: '请选择字体' },
{ value: 'CN_slogan_art2', name: '请选择字体' },
{ value: 'CN_slogan_art3', name: '请选择字体' },
{ value: 'CN_slogan_art4', name: '请选择字体' },
{ value: '华文行楷', name: '请选择字体' },
{ value: '隶书', name: '请选择字体' },
]
textDataList.textFontFamilyList = arr
textData.fontFamily = arr[0].value
})
let textDataList = reactive({
textFontFamilyList: [],
})
let init = ()=>{
showPayOrder.value = true;
nextTick(()=>{
let canvasBox = document.querySelector(".clearSlogan_modal .exportCanvasBox_center");
let height = canvasBox.offsetHeight;
canvasBox.style.width = height+'px'
canvasWH.value = height
var canvasDom = document.createElement("canvas");
let oldCanvasDom = canvasBox.querySelector('canvas')
if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#e6e6e6",
width: canvasWH.value,
height: canvasWH.value,
isDrawingMode: false, // 开启绘图模式
});
canvas.on('object:moving',canvasMoving)
setTextFun('请输入一段话吧~')
// setRemoveImage()
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
canvas.on('mouse:down',setTextBtn)
})
}
let selectTextbox = ref(null)
let setTextBtn = (e) =>{//点击判断是否点击到文字
var clickedObject = e.target;
if (clickedObject instanceof fabric.IText){
selectTextbox.value = clickedObject
textData.fill = clickedObject.fill
textData.fontSize = clickedObject.fontSize
textData.fontFamily = clickedObject.fontFamily
textData.textAlign = clickedObject.textAlign
textData.overline = clickedObject.overline
textData.linethrough = clickedObject.linethrough
textData.underline = clickedObject.underline
setBtnPosition(clickedObject)
}else{
selectTextbox.value = null
textBtnShow.value = false
}
}
let messageShow = false
let canvasMoving = (options)=>{
let obj = options.target
isCanvasMoving(obj)
}
let isCanvasMoving = (obj)=>{
canvas.forEachObject(function(options) {
setBtnPosition(obj)
if(messageShow) return
if (options === obj) return
// 检查对象是否与另一个对象相交
if (obj.intersectsWithObject(options)) {
messageShow = true
message.info('看到输入的内容可能存在重叠,重叠会影响最终效果哦~',()=>{
messageShow = false
});
}
})
}
let setBtnPosition = (obj)=>{//传入文字对象,设置工具位置
let domXY = {x:0,y:0}
textBtnShow.value = true
let scaleY = obj.scaleY?obj.scaleY:1
domXY = {
y:obj.top+obj.height * scaleY,
x:obj.left,
}
let dom = document.querySelector('.clearSlogan_modal .clearSlogan_center_btn_move')
domXY.x = domXY.x<0?0:domXY.x
dom.style.left = domXY.x+'px'
dom.style.top = (domXY.y + 5)+'px'
}
let setTextFun = (str)=>{
let textbox
textbox = new fabric.IText(str, {
fontSize: 20,
textAlign:'center'
// fill:canvasPencilColor.value,
})
textbox.set(textData)
textbox.set({
left:canvasWH.value/2 - textbox.width / 2,
top:canvasWH.value/2 - textbox.height / 2,
})
setBtnPosition(textbox)
canvas.add(textbox)
isCanvasMoving(textbox)
textbox.enterEditing();
canvas.setActiveObject(textbox).renderAll();
selectTextbox.value = textbox
}
let removeTextFun = ()=>{
let selectObj = canvas.getActiveObjects();
if(selectObj){
selectObj.forEach(function(object) {
canvas.remove(object);
textBtnShow.value = false
});
}
}
let watchTime
watch(textData,(newValue,oldValue)=>{
clearTimeout(watchTime)
watchTime = setTimeout(()=>{
if(selectTextbox.value){
selectTextbox.value.set(newValue)
canvas.renderAll();
}
},500)
})
let setTextData = (name,value)=>{
textData[name] = value?value:!textData[name]
}
let setSubmit = ()=>{
var allObjects = canvas.getObjects();
if(allObjects.length == 0){
message.info('最少需要创建一个文字')
return
}
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255,0)",
width: canvasWH.value*scale,
height: canvasWH.value*scale,
isDrawingMode: false, // 开启绘图模式
});
let canvasArr = canvas.getObjects()
canvasArr.forEach(item=>{
// let obj = fabric.util.object.clone(item);
let obj
item.clone((cloned)=>{
obj = cloned
})
obj.set(
{
scaleX:(item.scaleX?item.scaleX:1)*scale,
scaleY:(item.scaleY?item.scaleY:1)*scale,
left:item.left*scale,
top:item.top*scale,
}
)
exportCanvas.add(obj)
})
// textbox.set({
// left:canvasWH.value.width/2 - textbox.width / 2,
// top:canvasWH.value.height/2 - textbox.height / 2,
// })
let data = [{
imgUrl : exportCanvas.toDataURL('png'),
base64:true
}]
emit('setSloganData',data)
showPayOrder.value = false;
// console.log(exportCanvas.toDataURL('png') );
}
return {
presentState,
showPayOrder,
loadingShow,
...toRefs(textData),
...toRefs(textDataList),
textBtnShow,
t,
init,
setTextFun,
removeTextFun,
setTextData,
setSubmit,
};
},
data() {
return {
};
},
mounted() {},
methods: {
cancelDsign(){
this.showPayOrder = false
}
},
});
</script>
<style lang="less">
.clearSlogan_modal {
.closeIcon {
z-index: 2;
}
.clearSlogan_center{
position: relative;
// width: calc(512px / 2);
// width: 256px;
height: 100%;
display: flex;
flex-direction: column;
// height: calc(512px / 2);
margin: 0 auto;
.clearSlogan_center_item{
// position: relative;
background: #fff;
position: absolute;
display: flex;
border: 0.2rem solid #c4c4c4;
width: 25rem;
border-radius: 4px; /* 设置圆角半径 */
flex-wrap: wrap;
.clearSlogan_center_btn_item{
display: flex;
align-items: center;
padding: 1rem 0;
>*{
cursor: pointer;
}
>input{
width: 4rem;
height: 2.5rem;
border-radius: 4px; /* 设置圆角半径 */
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
>select{
height: 2.5rem;
border: 0.2rem solid #c4c4c4 !important;
border-radius: 4px; /* 设置圆角半径 */
}
>select:focus-visible{
border: 0.2rem solid #c4c4c4;
}
div{
padding: 0 1rem;
font-weight: 600;
}
ul{
display: flex;
margin: 0;
i{
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
&.active{
border: 1px solid;
border-radius: 0.4rem;
}
}
}
}
}
.clearSlogan_center_btn{
top: 0px;
left: 50%;
width: auto;
transition: all 0.3s;
transform: translate(-50%,-100%);
}
.exportCanvasBox_center:hover .clearSlogan_center_btn{
transform: translate(-50%,0%);
z-index: 4;
}
.clearSlogan_center_btn_move{
position: absolute;
z-index: 2;
}
.exportCanvasBox_center{
height: 100%;
flex: 1;
position: relative;
margin: 0 auto;
overflow: hidden;
// overflow: scroll;
.canvas-container{
margin: 0 auto;
}
}
}
.exportCanvasBox_submit{
margin-top: 2.4rem;
text-align: center;
}
}
</style>

View File

@@ -0,0 +1,124 @@
<template>
<div class="generalMenu_printModel">
<div @click.stop="openPrintModel" :class="driverClass.class1">{{ item.label }}</div>
<ul :class="driverClass.class2" v-show="openClick">
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">{{ item.label }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent,ref ,nextTick} from "vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
name:'filterComponent',
props:{
item:{
type:Object
},
dataList:{
type:Array
},
driver__:{
type:Boolean,
default:false,
},
deleteItem:{
type:Number,
default:-1
},
driverClass:{
type:Object,
default:{class1:'',class2:'',classList:{item1:'',item2:'',item3:''}},
}
},
emits:['setprintModel'],
setup(props:any,{emit}){
let selectIndex = ref(0)
let openClick = ref(false)
let openPrintModel = ()=>{
document.addEventListener('click',removePrintModel)
openClick.value = true
nextTick().then(()=>{
if(props.driver__.driver){
driverObj__.moveNext()
}
})
}
let setprintModel = (item:any,index:any)=>{
if(props.deleteItem == index) return
openClick.value = false
selectIndex = index
nextTick().then(()=>{
if(props.driver__.driver){
driverObj__.moveNext()
}
})
emit('setprintModel',item)
}
let removePrintModel = ()=>{
openClick.value = false
document.removeEventListener('click',removePrintModel)
}
return {
selectIndex,
openClick,
setprintModel,
openPrintModel,
}
},
});
</script>
<style lang="less">
//衣服类型下拉菜单
.generalMenu_printModel{
margin-right: 2rem;
>div{
width: calc(13rem*1.2);
// display: flex;
display: block;
border-radius: calc(1rem*1.2);
margin: 0;
border: 2px solid;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 calc(1rem*1.2);
text-align: center;
}
ul{
position: absolute;
width: calc(13rem*1.2);
text-align: center;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
overflow: hidden;
li{
// background: rgba(0,0,0,.2);
background: #cccccc;
line-height: 2;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 calc(1rem*1.2);
&.active{
// opacity: .4;
color: #a4a4a4 !important;
background: #ebebeb !important;
cursor: not-allowed;
}
}
.printModel_item:hover{
// background: rgba(0,0,0,.4);
background: #999999;
color: #000;
}
}
}
</style>

View File

@@ -0,0 +1,204 @@
<template>
<div class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
:class="driverClass.class1"
@click.stop="showFileCategory(item)"
>
{{ item.categoryValue }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
item.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
:class="driverClass.class2"
v-show="item.categoryShow"
>
<div
:class="[
'category_item',
item.category == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in disignTypeList"
:key="index"
@click="
selectFileCategory(
item,
cate
)
"
>
{{ cate.name }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref ,nextTick} from "vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
name:'filterComponent',
props:{
disignTypeList:{
type:Object
},
item:{
type:Object
},
generateList:{
type:Array
},
isSetSketchCategory:{
type:Boolean,
default:false,
},
driver__:{
type:Boolean,
default:false,
},
driverClass:{
type:Object,
default:{class1:'',class2:''},
}
},
setup(props:any){
let showFileCategory = (file:any)=> {
file.categoryShow = true;
nextTick().then(()=>{
if(props.driver__){
driverObj__.moveNext()
}
})
document.addEventListener("click", hiddenFileCategory);
}
let hiddenFileCategory = () => {
for (let item of props.generateList) {
item.categoryShow = false;
}
document.removeEventListener("click", hiddenFileCategory);
}
let selectFileCategory = (file: any, cate: any) => {
for (let item of props.generateList) {
item.categoryShow = false;
}
file.categoryValue = cate.name;
file.category = cate.value;
if(props.isSetSketchCategory){
setSketchLibrary(props.item)
}
if(props.driver__){
driverObj__.moveNext()
}
// this.store.commit("sketchGenerateFiles", this.fileList);
}
let setSketchLibrary = (item:any)=>{
let data = {
libraryId:[item.id],
level2Type:item.category,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
}
).catch((res)=>{
});
}
return {
showFileCategory,
selectFileCategory,
}
},
});
</script>
<style lang="less">
//衣服类型下拉菜单
.operate_file_block{
width: 100%;
height: 3rem;
font-size: 1.6rem;
color: #FFFFFF;
position: absolute;
left: 0;
bottom: 0;
.select_img_type{
height: 100%;
line-height: 3rem;
text-align: center;
background: rgba(0,0,0,0.6);
position: relative;
overflow: initial !important;
.select_category{
display: flex;
align-items: center;
justify-content: center;
.icon-xiala{
margin-left: 0.8rem;
}
}
.icon_rotate{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.category_list{
position: absolute;
width: 100%;
cursor: pointer;
position: absolute;
// top: 3.1rem;
margin-top: .2rem;
left: 0;
// background: rgba(0,0,0,0.4);
background-color: rgb(177 177 177);
border: 1px solid #343579;
border-radius: 0.8rem;
// overflow: hidden;
z-index: 3;
height: 9rem;
overflow-x: hidden;
&.category_list::-webkit-scrollbar{display: none;}
.category_item{
text-align: left;
font-size: 1.4rem;
padding: 1rem 1.5rem;
line-height: 1.6rem;
font-weight: 600;
color: #595959;
&.select_category_item{
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
}
&:hover{
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
}
}
}
}
}
</style>

View File

@@ -139,6 +139,7 @@ export const Https = {
//充值相关
productList:`/api/product/list`, //获取商品列表
payAlipay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
payAlipayHK:`/api/alipay-hk/createOrder`, //香港支付宝确认支付
payPaypal:`/api/paypal/trade`, //paypal确认支付
getCredits:`/api/credits/getCredits`, //查询用户积分

View File

@@ -875,7 +875,27 @@ export default defineComponent({
centered:true,
onOk() {
data.deleteModelConfirm = 1
let id = _this.store.state.Workspace.workspace.id
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
if (rv) {
if(rv.position == "Overall"){
rv.overallSingle = false
}else{
rv.overallSingle = true
}
if(rv.sexEnum.name == 'Female'){
rv.mannequinUrl = rv.femalePresignedUrl
rv.mannequinType = rv.mannequinFemaleType
rv.mannequinId = rv.mannequinFemaleId
}else if(rv.sexEnum.name == 'Male'){
rv.mannequinUrl = rv.malePresignedUrl
rv.mannequinType = rv.mannequinMaleType
rv.mannequinId = rv.mannequinMaleId
}
_this.store.commit("setWorkspace", rv);
}
})
_this.confirmDeletePic(data,index)
},
onCancel(){