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

commit

Browse Source
This commit is contained in:
WangXiaoDong
2023-08-21 10:55:39 +08:00
parent fbac0907c4
commit d41b331e38
18 changed files with 3227 additions and 1162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,21 +3,21 @@
<div class="modal_left">
<div class="switch_type_list">
<div
@click="open(1)"
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>Upload</span>
</div>
<div
@click="open(2)"
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>Library</span>
</div>
<div
@click="open(3)"
@click.stop="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
@@ -95,11 +95,12 @@
v-show="openClick == 2"
ref="Material"
@confirmSelect="confirmSelect"
msg="Moodboard"
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
:msg="sonData"
msg="Moodboard"
></Generate>
</div>
<div v-show="moodboarList.length" class="modal_right">
@@ -188,15 +189,9 @@ export default defineComponent({
uploadUrl: "",
moodTemplateId: "", //模板id
store: useStore(),
sonData: {
cli: "Moodboard",
},
moodb_:moodb.moodb_,
moodboarList:computed(()=>{
return [...useStore().state.UploadFilesModule.moodboardFiles,
...useStore().state.UploadFilesModule.generateFiles,
...useStore().state.UploadFilesModule.MaterialFiles]
return useStore().state.UploadFilesModule.moodboard
}),
};
@@ -235,7 +230,7 @@ export default defineComponent({
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
let arr = this.store.state.UploadFilesModule.moodboard
if(arr.length >= 8){
message.error('You can select up to 8 images')
}else{
@@ -291,7 +286,7 @@ export default defineComponent({
},
deleteFile(item: any) {
if(item.type_ == 'generate' || item.type_ == 'material'){
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
this.store.commit("addGenerateMaterialFils", item);
}else{
@@ -303,7 +298,11 @@ export default defineComponent({
}
})
console.log(this.fileList);
this.fileList.splice(moodboard,1)
console.log(this.fileList);
this.store.commit("setMoodboardFile", this.fileList);
}
this.store.commit("clearMoodTemplateId");
@@ -328,13 +327,10 @@ export default defineComponent({
layout.init()
},
layout(){
let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
let arr = this.store.state.UploadFilesModule.moodboard
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
console.log(moodb.filter((item,index)=> item == 'w2h1'));
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
this.flex_direction = true
}else{
@@ -460,70 +456,7 @@ export default defineComponent({
margin-bottom: 1rem;
}
.upload_file_item {
margin: 0 2rem 2rem 0;
display: inline-block;
// width: 16.5rem;
// height: 16.5rem;
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
&.upload_component {
border: none;
}
:deep(.ant-upload-picture-card-wrapper) {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
:deep(.ant-upload-select-picture-card) {
width: 6rem;
height: 6rem;
border: 0.3rem solid #ededed;
border-radius: 10px;
margin: 0;
}
.upload_file_item_content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: relative;
&:hover .delete_file_block {
display: block;
}
.upload_img {
display: block;
height: 100%;
width: 100%;
}
.delete_file_block {
display: none;
width: 100%;
cursor: pointer;
height: 3rem;
background: rgba(0, 0, 0, 0.2);
font-size: 1.6rem;
color: #ffffff;
line-height: 3rem;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
}
}
.upload_img_icon {
width: 4.6rem;
}
}
.upload_max_tip {
display: flex;