600 lines
19 KiB
Vue
600 lines
19 KiB
Vue
<template>
|
||
<div class="collection_modal_item">
|
||
<div class="modal_left">
|
||
<div class="switch_type_list">
|
||
<div
|
||
@click.stop="open(1)"
|
||
class="switch_type_item"
|
||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||
>
|
||
<span>Upload</span>
|
||
</div>
|
||
<div
|
||
@click.stop="open(2)"
|
||
class="switch_type_item"
|
||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||
>
|
||
<span>Library</span>
|
||
</div>
|
||
<div
|
||
@click.stop="open(3)"
|
||
class="switch_type_item"
|
||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||
>
|
||
<span>Generate</span>
|
||
</div>
|
||
</div>
|
||
<div v-show="openClick == 1" class="moodboard_body">
|
||
<div class="upload_img_body scroll_style">
|
||
<div class="upload_item">
|
||
<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"
|
||
v-show="file?.status === 'done'"
|
||
>
|
||
<img :src="file?.imgUrl" class="upload_img" />
|
||
<div
|
||
class="delete_file_block"
|
||
@click="deleteFile(file)"
|
||
>
|
||
Delete
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="upload_file_item upload_component"
|
||
v-show="moodboarList.length != 8"
|
||
>
|
||
<a-upload
|
||
:action="uploadUrl + '/api/element/upload'"
|
||
list-type="picture-card"
|
||
:data="{
|
||
...upload,
|
||
}"
|
||
:headers="{ Authorization: token }"
|
||
v-model:file-list="fileList"
|
||
:before-upload="beforeUpload"
|
||
multiple
|
||
:maxCount="8 - moodboarList.length+fileList.length"
|
||
accept=".jpg,.png,.jpeg,.bmp"
|
||
@change="(file) => fileUploadChange(file)"
|
||
>
|
||
<div
|
||
class="upload_tip_block"
|
||
v-show=" moodboarList.length != 8"
|
||
>
|
||
<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="upload_max_tip">
|
||
<span class="icon iconfont icon-zhuyi"></span>
|
||
<span
|
||
>Maximum 10 images can be uploaded, Maximum 2M per
|
||
image</span
|
||
>
|
||
</div> -->
|
||
</div>
|
||
<Material
|
||
v-show="openClick == 2"
|
||
ref="Material"
|
||
@confirmSelect="confirmSelect"
|
||
msg="Moodboard"
|
||
></Material>
|
||
<Generate
|
||
v-show="openClick == 3"
|
||
ref="Generate"
|
||
msg="Moodboard"
|
||
></Generate>
|
||
</div>
|
||
<div v-show="moodboarList.length" class="modal_right">
|
||
<div class="modal_layout">
|
||
<div class="modal_text">
|
||
<div>Thumbnail preview of selected moodboard</div>
|
||
<div class="modal_btn started_btn" @click="layout()">layout</div>
|
||
</div>
|
||
<div class="modal_img">
|
||
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
|
||
<img v-lazy="item.imgUrl">
|
||
<div class="checked" >
|
||
<i class="fi fi-rr-trash"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal_accomplish">
|
||
<div class="modal_text">
|
||
<div>Layout of selected moodboard</div>
|
||
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
|
||
</div>
|
||
<div class="modal_img" :class="{active:flex_direction}">
|
||
<!-- <div v-for="item,index in moodb_className" :class="[item]" class="modal_imgItem">
|
||
<img :src="moodboarList[index].imgUrl">
|
||
</div> -->
|
||
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
|
||
<img :src="item.imgUrl">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
|
||
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, h, ref ,computed} from "vue";
|
||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||
import { getCookie } from "@/tool/cookie";
|
||
import { getUploadUrl } from "@/tool/util";
|
||
import { useStore } from "vuex";
|
||
import { message, Upload } from "ant-design-vue";
|
||
import Material from "@/component/HomePage/Material.vue";
|
||
import Generate from "@/component/HomePage/Generate.vue";
|
||
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
|
||
import layout from "@/component/HomePage/layout.vue";
|
||
import GO from "@/tool/GO";
|
||
import moodb from "@/tool/moodb";
|
||
export default defineComponent({
|
||
components: { Material, MoodTemplate, Generate,layout },
|
||
setup() {
|
||
let lessenList: any = ref([]);
|
||
let fileList: any = ref([]);
|
||
let templateModal: any = ref(false);
|
||
let templateFileList: any = ref([]);
|
||
let openClick: any = ref(1);
|
||
let moodb_className:any = ref([]);
|
||
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
||
let layoutList:any = []//选中后随机生成的list
|
||
let layoutOpen = ref(false)
|
||
return {
|
||
fileList,
|
||
lessenList,
|
||
templateModal,
|
||
templateFileList,
|
||
openClick,
|
||
moodb_className,
|
||
flex_direction,
|
||
layoutList,
|
||
layoutOpen
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
indicator: h(LoadingOutlined, {
|
||
style: {
|
||
fontSize: "2.4rem",
|
||
},
|
||
spin: true,
|
||
}),
|
||
upload: {
|
||
isPin: 0,
|
||
level1Type: "Moodboard",
|
||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
},
|
||
token: "",
|
||
uploadUrl: "",
|
||
moodTemplateId: "", //模板id
|
||
store: useStore(),
|
||
moodb_:moodb.moodb_,
|
||
moodboarList:computed(()=>{
|
||
return useStore().state.UploadFilesModule.moodboard
|
||
}),
|
||
|
||
};
|
||
},
|
||
// watcheffect(){
|
||
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
|
||
// (v: any) => v.checked == true
|
||
// );
|
||
// this.store.commit("setMoodboardFile", breviaryList);
|
||
// console.log(22);
|
||
// },
|
||
mounted() {
|
||
this.token = getCookie("token") || "";
|
||
this.uploadUrl = getUploadUrl();
|
||
|
||
},
|
||
methods: {
|
||
open(num: Number) {
|
||
this.openClick = num;
|
||
if(num ==2 ){
|
||
let material:any = this.$refs.Material
|
||
material.init('Moodboard')
|
||
}else if (num == 3){
|
||
// let Generate:any = this.$refs.Generate
|
||
// Generate.init('generate')
|
||
}
|
||
},
|
||
fileUploadChange(data: any) {
|
||
let file = data.file;
|
||
if (file.status === "done") {
|
||
let res = JSON.parse(file.xhr.response);
|
||
file.imgUrl = res.data.url;
|
||
file.resData = res.data;
|
||
file.type_ = {
|
||
type1:'upload',
|
||
type2:'Moodboard'
|
||
};
|
||
file.id_ = GO.id++
|
||
let fileList = this.fileList.filter(
|
||
(v: any) => v.status === "done"
|
||
);
|
||
let arr = this.store.state.UploadFilesModule.moodboard
|
||
if(arr.length >= 8){
|
||
message.error('You can select up to 8 images')
|
||
}else{
|
||
this.store.commit("setMoodboardFile", fileList);
|
||
this.store.commit("clearMoodTemplateId");
|
||
}
|
||
} else if (file.status === "error") {
|
||
let index = -1;
|
||
this.fileList.forEach((ele: any, index1: any) => {
|
||
if (file.uid === ele.uid) {
|
||
index = index1;
|
||
}
|
||
});
|
||
if (index > -1) {
|
||
this.fileList.splice(index, 1);
|
||
}
|
||
message.error(file.name + "upload failed");
|
||
}
|
||
|
||
},
|
||
confirmSelect(event:any){
|
||
for(let item of event){
|
||
let data = {
|
||
imgUrl:item.url,
|
||
resData:item,
|
||
status:'done',
|
||
}
|
||
if(this.fileList.length == 8){
|
||
message.error('Maximum number of allowable file uploads has been exceeded')
|
||
break
|
||
}else{
|
||
this.fileList.push(data)
|
||
}
|
||
}
|
||
this.store.commit('setMoodboardFile',this.fileList)
|
||
this.store.commit('clearMoodTemplateId')
|
||
|
||
},
|
||
beforeUpload(file: any) {
|
||
const isJpgOrPng =
|
||
file.type === "image/jpeg" ||
|
||
file.type === "image/png" ||
|
||
file.type === "image/jpg" ||
|
||
file.type === "image/bmp";
|
||
if (!isJpgOrPng) {
|
||
message.error("You can only upload Image file!");
|
||
}
|
||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
if (!isLt2M) {
|
||
message.error("Image must smaller than 5MB!");
|
||
}
|
||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||
},
|
||
|
||
deleteFile(item: any) {
|
||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||
this.store.commit("addGenerateMaterialFils", item);
|
||
|
||
}else{
|
||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||
let moodboard
|
||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||
if(items.id_ == item.id_){
|
||
moodboard = index
|
||
|
||
}
|
||
})
|
||
this.fileList.splice(moodboard,1)
|
||
this.store.commit("setMoodboardFile", this.fileList);
|
||
}
|
||
this.store.commit("clearMoodTemplateId");
|
||
},
|
||
|
||
recollection() {
|
||
let arr = JSON.parse(
|
||
JSON.stringify(
|
||
this.store.state.UploadFilesModule.allBoardData
|
||
.moodboardFiles
|
||
)
|
||
);
|
||
let setboard = {
|
||
generate:[] as any,
|
||
material:[] as any,
|
||
moodboard:[] as any,
|
||
}
|
||
arr.forEach((v:any)=>{
|
||
if(v.type_.type1 == 'generate'){
|
||
setboard.generate.push(v)
|
||
}else if(v.type_.type1 == 'material'){
|
||
setboard.material.push(v)
|
||
}else{
|
||
setboard.moodboard.push(v)
|
||
}
|
||
})
|
||
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
|
||
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
||
this.store.commit("setMoodboardFile", setboard.moodboard);
|
||
this.fileList = setboard.moodboard
|
||
let moodTemplateId =
|
||
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
|
||
this.store.commit("setMoodTemplateId", moodTemplateId);
|
||
},
|
||
|
||
changeTemplateModal() {
|
||
if(this.layoutOpen){
|
||
let layout:any = this.$refs.layout
|
||
// layout.init('moodboard')
|
||
layout.init()
|
||
}else{
|
||
message.error('Please click Layout to sort randomlys')
|
||
}
|
||
|
||
},
|
||
layout(){
|
||
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]
|
||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||
this.flex_direction = true
|
||
}else{
|
||
this.flex_direction = false
|
||
}
|
||
this.moodb_className = this.moodb_[arr.length-1][random]
|
||
this.layoutOpen = true
|
||
},
|
||
setmoodbClass(val:any){
|
||
this.moodb_className = val
|
||
}
|
||
// randomRange(min: any, max: any, num: any) {
|
||
// // min最小值，max最大值 num排除的值
|
||
// let index = Math.floor(Math.random() * (max - min)) + min;
|
||
// while (index === num) {
|
||
// index = Math.floor(Math.random() * (max - min)) + min;
|
||
// }
|
||
// return index;
|
||
// },
|
||
|
||
// //随机重置图片顺序
|
||
// refetchTemplate() {
|
||
// let arr = Array.from({ length: this.templateFileList.length });
|
||
// for (let item of this.templateFileList) {
|
||
// let index = this.randomRange(
|
||
// 0,
|
||
// this.templateFileList.length,
|
||
// -1
|
||
// );
|
||
// while (arr[index]) {
|
||
// index = this.randomRange(
|
||
// 0,
|
||
// this.templateFileList.length,
|
||
// -1
|
||
// );
|
||
// }
|
||
// arr[index] = item;
|
||
// }
|
||
// this.templateFileList = arr;
|
||
// },
|
||
|
||
// //提交模板
|
||
// submitTemplate() {
|
||
// // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
|
||
// // this.store.commit("setMoodboardFile", this.fileList);
|
||
// // this.store.commit("setMoodTemplateId", this.moodTemplateId);
|
||
// // this.changeTemplateModal();
|
||
// },
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.collection_modal_item {
|
||
// padding: 1.5rem 2.6rem 4rem;
|
||
height: 100%;
|
||
display: flex;
|
||
.modal_left {
|
||
padding-top: 4rem;
|
||
width: 47%;
|
||
// width: 50rem;
|
||
.switch_type_list {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.switch_type_item {
|
||
display: flex;
|
||
align-items: center;
|
||
// padding: 0 2rem;
|
||
height: 4rem;
|
||
background: #fff;
|
||
border-radius: 0.8rem;
|
||
line-height: 4rem;
|
||
font-size: 1.6rem;
|
||
// margin-right: 2.2rem;
|
||
margin-right: 8rem;
|
||
color: #000;
|
||
cursor: pointer;
|
||
position: relative;
|
||
text-align: center;
|
||
transform-origin: left;
|
||
transform: scale(1);
|
||
transition: 0.3s all;
|
||
&.switch_type_item::before {
|
||
position: absolute;
|
||
content: "";
|
||
display: block;
|
||
background: #000;
|
||
height: 3px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 6px;
|
||
width: 0px;
|
||
transition: 0.3s all;
|
||
}
|
||
&.select_swtich {
|
||
color: #000;
|
||
// font-weight: 900;
|
||
transform: scale(1.15);
|
||
}
|
||
&.select_swtich::before {
|
||
width: 100%;
|
||
}
|
||
|
||
.switch_icon {
|
||
font-size: 1.8rem;
|
||
margin-right: 0.8rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.moodboard_body {
|
||
height: calc(100% - 5rem);
|
||
padding-top: 2.5rem;
|
||
height: 30rem;
|
||
overflow-x: hidden;
|
||
border-right: 1px solid #e5e5e5;
|
||
&.moodboard_body::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.upload_img_body {
|
||
height: calc(100% - 3rem);
|
||
overflow-y: auto;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
|
||
|
||
.upload_max_tip {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.4rem;
|
||
color: #030303;
|
||
|
||
.icon-zhuyi {
|
||
font-size: 1.6rem;
|
||
margin-right: 0.7rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.modal_right{
|
||
flex: 1;
|
||
margin-left: 3rem;
|
||
.modal_layout,.modal_accomplish{
|
||
.modal_text{
|
||
font-size: 1.2rem;
|
||
font-weight: 400;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.modal_layout{
|
||
.modal_img{
|
||
width: 40rem;
|
||
height: 5rem;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
&.modal_img::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.modal_img_item{
|
||
width: 4rem;
|
||
height: 4rem;
|
||
margin: 0 1rem 1rem 0;
|
||
position: relative;
|
||
cursor: pointer;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.checked{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
&.modal_img_item:hover .checked{
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.modal_accomplish{
|
||
// margin-top: 2rem;
|
||
height: 30rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.modal_text{
|
||
padding-top: 2rem;
|
||
padding-block: 2rem;
|
||
}
|
||
.modal_img{
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
&.active{
|
||
flex-direction: row;
|
||
}
|
||
.modal_imgItem{
|
||
position: relative;
|
||
img{
|
||
position: absolute;
|
||
object-fit: cover;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.wh1{
|
||
width: 23%;
|
||
height: 48%;
|
||
}
|
||
.wh4{
|
||
width: 48.5%;
|
||
height: 100%;
|
||
}
|
||
.w1h2{
|
||
width: 23%;
|
||
height: 100%;
|
||
}
|
||
.w2h1{
|
||
width: 48.5%;
|
||
height: 48%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|