commit 8.5
This commit is contained in:
WangXiaoDong
394
src/component/HomePage/layout.vue
Normal file
394
src/component/HomePage/layout.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
class="layout_modal"
|
||||
v-model:visible="layout"
|
||||
:footer="null"
|
||||
width="47rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="false"
|
||||
>
|
||||
<div class="layout_content">
|
||||
<div class="layout_header">
|
||||
<div class="layout_title">MoodBoard Design</div>
|
||||
<div
|
||||
class="icon iconfont icon-guanbi close_icon"
|
||||
@click.stop="init()"
|
||||
></div>
|
||||
</div>
|
||||
<div class="layout_nav">
|
||||
<div v-for="item,index in layoutList" :key="item">
|
||||
<img :src="item.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_centent" :class="{active:flex_direction}">
|
||||
<!-- <div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem">
|
||||
<img :src="item.imgUrl">
|
||||
</div> -->
|
||||
<draggable
|
||||
v-model="layoutList"
|
||||
group="people"
|
||||
@start="drag=true"
|
||||
@end="drag=false"
|
||||
animation= "150"
|
||||
item-key="id">
|
||||
<template #item="{element,index}">
|
||||
<div :data-id="element.id_" :class="moodbClassName[index]" class="modal_imgItem">
|
||||
<img :src="element.imgUrl">
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<!-- <div v-for="item,index in moodb_className" :class="item" class="modal_imgItem">
|
||||
<img :src="layoutList[index].imgUrl" alt="">
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="layout_left">
|
||||
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
||||
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_right">
|
||||
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
||||
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="button_second submit_button"
|
||||
@click="submitTemplate()"
|
||||
>
|
||||
Submit
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
import moodb from "@/tool/moodb";
|
||||
import draggable from 'vuedraggable'
|
||||
export default defineComponent({
|
||||
props:["moodb_className",'flex_direction'],
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
setup(prop) {
|
||||
let fileList: any = ref([]);
|
||||
let layout: any = ref(false);
|
||||
let templateFileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let drag = false;
|
||||
return {
|
||||
fileList,
|
||||
layout,
|
||||
templateFileList,
|
||||
openClick,
|
||||
drag,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
|
||||
layoutList:computed(()=>{
|
||||
return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
||||
...(useStore().state.UploadFilesModule.generateFiles),
|
||||
...(useStore().state.UploadFilesModule.MaterialFiles)]
|
||||
}),
|
||||
layoutListaa:[
|
||||
{
|
||||
id_:1,
|
||||
name:'2',
|
||||
},
|
||||
{
|
||||
id_:2,
|
||||
name:'2',
|
||||
},
|
||||
{
|
||||
id_:3,
|
||||
name:'2',
|
||||
},
|
||||
],
|
||||
moodb : moodb.moodb_,
|
||||
moodbList:{},
|
||||
moodbClassName:[],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
directives:{
|
||||
layout:{
|
||||
mounted (el,layout) {
|
||||
// console.log(el,layout);
|
||||
layout.value.style = {
|
||||
rotate:'',
|
||||
left:'',
|
||||
top:'',
|
||||
width:'',
|
||||
height:'',
|
||||
}
|
||||
},
|
||||
updated (el,layout) {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.layout = !this.layout
|
||||
let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
|
||||
...this.store.state.UploadFilesModule.generateFiles,
|
||||
...this.store.state.UploadFilesModule.MaterialFiles]
|
||||
console.log(this.moodb[layoutList.length]);
|
||||
this.moodbList = this.moodb[layoutList.length-1]
|
||||
this.moodbClassName = this.moodb_className
|
||||
},
|
||||
setmoodb(item:any){
|
||||
console.log(item);
|
||||
this.moodbClassName = item
|
||||
this.$emit('setmoodbClass',this.moodbClassName)
|
||||
},
|
||||
//开始拖拽事件
|
||||
onStart(){
|
||||
this.drag=true;
|
||||
},
|
||||
//拖拽结束事件
|
||||
onEnd() {
|
||||
this.drag=false;
|
||||
},
|
||||
// setmoodbClassName(){
|
||||
// },
|
||||
//获取图片宽高
|
||||
// getimgWH(){
|
||||
// let layoutList = [...(useStore().state.UploadFilesModule.moodboardFiles),
|
||||
// ...(useStore().state.UploadFilesModule.generateFiles),
|
||||
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
|
||||
|
||||
|
||||
// return new Promise(res => {
|
||||
// var img = document.createElement("img");
|
||||
// img.src = item.imgUrl
|
||||
// img.addEventListener("load", function () {
|
||||
// document.body.appendChild(img);
|
||||
// var w = img.offsetWidth;
|
||||
// var h = img.offsetHeight;
|
||||
// img.remove()
|
||||
// res({ w, h });
|
||||
// })
|
||||
// })
|
||||
// layoutList.forEach(item => {
|
||||
// let img = document.createElement('img')
|
||||
// img.addEventListener("load",function(){
|
||||
// document.body.appendChild(img);
|
||||
// var w = img.offsetWidth;
|
||||
// var h = img.offsetHeight;
|
||||
// console.log(w,h);
|
||||
// img.remove()
|
||||
// })
|
||||
|
||||
// });
|
||||
// },
|
||||
// layoutcli(num: Number) {
|
||||
// this.openClick = num;
|
||||
// if(num ==2 ){
|
||||
// let material:any = this.$refs.Material
|
||||
// material.init('Moodboard')
|
||||
// }else if (num == 3){
|
||||
// let material:any = this.$refs.Material
|
||||
// material.init('generate')
|
||||
// }
|
||||
// },
|
||||
|
||||
|
||||
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;
|
||||
// },
|
||||
changeTemplateModal(){
|
||||
this.layout = !this.layout
|
||||
},
|
||||
//提交模板
|
||||
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">
|
||||
.layout_modal {
|
||||
width: 80% !important;
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
height: calc(60vh - 6.4rem);
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.layout_content {
|
||||
// background: #f2f3fb;
|
||||
// padding-bottom: 2.9rem;
|
||||
height: 100%;
|
||||
.layout_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 6.6rem;
|
||||
|
||||
.layout_title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.close_icon {
|
||||
font-size: 1.8rem;
|
||||
color: #aeb2b7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.layout_nav{
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
justify-content: center;
|
||||
img{
|
||||
width:5rem;
|
||||
cursor: pointer;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
.layout_centent{
|
||||
display: flex;
|
||||
height: 60%;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 3rem 0;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.active{
|
||||
>div{
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.layout_centent_bor{
|
||||
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.layout_left{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
// background-color: #000;
|
||||
width: 8%;
|
||||
height: 50%;
|
||||
&.layout_left::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.layout_left_items{
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
.layout_left_item{
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit_button {
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user