09-12
This commit is contained in:
WangXiaoDong
@@ -168,6 +168,9 @@ export default defineComponent({
|
||||
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
|
||||
hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
|
||||
}
|
||||
if(data.a != 1 || data.a != 0){
|
||||
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
@@ -233,12 +236,12 @@ export default defineComponent({
|
||||
selectColorItem(index,color){
|
||||
let hex
|
||||
if(color.r){
|
||||
hex = this.rgbaToHex([color.r,color.g,color.b])
|
||||
hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
|
||||
}else{
|
||||
hex = '#FFFFFF'
|
||||
}
|
||||
this.selectIndex = index
|
||||
this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1},hex:hex} : {hex:''}
|
||||
this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} : {hex:''}
|
||||
this.fileList = []
|
||||
this.tcxColor = ''
|
||||
this.pantongName = ''
|
||||
@@ -256,7 +259,7 @@ export default defineComponent({
|
||||
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
|
||||
if(rv && rv.name){
|
||||
// let hex = this.rgbaToHex([color.r,color.g,color.b])
|
||||
let hex = this.rgbaToHex([rv.r,rv.g,rv.b])
|
||||
let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a?rv.a:1])
|
||||
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
|
||||
this.selectColor = this.reviewColor
|
||||
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
|
||||
@@ -326,9 +329,14 @@ export default defineComponent({
|
||||
},
|
||||
rgbaToHex(rgba) { // rgba转16进制
|
||||
let hex = '#';
|
||||
for (const i of rgba) {
|
||||
hex += Number(i).toString(16).padStart(2, '0');
|
||||
}
|
||||
rgba.forEach((i,index) => {
|
||||
if(index == 3){
|
||||
hex += Math.round(i * 255).toString(16)
|
||||
}else{
|
||||
hex += Number(i).toString(16).padStart(2, '0');
|
||||
}
|
||||
});
|
||||
|
||||
return hex;
|
||||
},
|
||||
setUplpadColor(color){
|
||||
@@ -393,7 +401,6 @@ export default defineComponent({
|
||||
rv.forEach(element => {
|
||||
this.pantongNameList.push(element.name)
|
||||
});
|
||||
console.log(rv);
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
@@ -414,10 +421,13 @@ export default defineComponent({
|
||||
|
||||
recollection(){
|
||||
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
||||
let hex
|
||||
colorList.forEach((ele, index) => {
|
||||
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
|
||||
|
||||
this.colorList[index] = ele.rgbValue
|
||||
});
|
||||
this.selectColor = {rgba:this.colorList[0]}, //顔色选择器默认颜色
|
||||
this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
|
||||
this.store.commit('setColorboardList',colorList)
|
||||
},
|
||||
|
||||
|
||||
@@ -2,17 +2,21 @@
|
||||
<a-modal class="modal_component cut_pricture_modal"
|
||||
v-model:visible="cutPicuterModal"
|
||||
:footer="null"
|
||||
title="Cut picture"
|
||||
width="115rem"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="header_right_block" @click.stop="">
|
||||
<div class="collection_title">
|
||||
<div class="collection_title_text">
|
||||
<div>Cut picture</div>
|
||||
</div>
|
||||
<div class="header_right_block" @click.stop="">
|
||||
<div class="next_step_button" @click.stop="finishCropper()">Finish</div>
|
||||
<div class="header_cancel_button" @click.stop="cancleCropper()">Cancel</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="collection_modal_body">
|
||||
<div class="cut_picture_left">
|
||||
<div class="cut_picture_body">
|
||||
@@ -153,6 +157,25 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.cut_pricture_modal{
|
||||
max-width: 1150px ;
|
||||
.collection_title{
|
||||
position: absolute;
|
||||
width: calc(100% - 10rem);
|
||||
top: 4rem;
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,.65);
|
||||
align-items: center;
|
||||
.collection_title_text{
|
||||
margin-right: 4rem;
|
||||
}
|
||||
.collection_title_text_intro{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0,0,0,.45);
|
||||
}
|
||||
}
|
||||
.header_right_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -163,10 +186,12 @@ export default defineComponent({
|
||||
.next_step_button{
|
||||
padding: 0 1.2rem;
|
||||
height: 3.2rem;
|
||||
background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
// background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
||||
|
||||
border-radius: 1.6rem;
|
||||
font-size: 1.4rem;
|
||||
color: #FFFFFF;
|
||||
color: #000;
|
||||
line-height: 3.2rem;
|
||||
margin-right: 1.6rem;
|
||||
white-space: nowrap;
|
||||
@@ -188,9 +213,9 @@ export default defineComponent({
|
||||
|
||||
.collection_modal_body{
|
||||
height: 100%;
|
||||
padding: 1rem 2.5rem 1.4rem 1.4rem;
|
||||
// padding: 1rem 2.5rem 1.4rem 1.4rem;
|
||||
box-sizing: border-box;
|
||||
background: #F2F3FB;
|
||||
// background: #F2F3FB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -204,7 +229,8 @@ export default defineComponent({
|
||||
|
||||
.cut_picture_body{
|
||||
width: 100%;
|
||||
height: 53rem;
|
||||
height: 40rem;
|
||||
// height: 53rem;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
@@ -279,7 +305,7 @@ export default defineComponent({
|
||||
.cut_picture_review_block{
|
||||
width: 100%;
|
||||
padding: 0 2rem;
|
||||
height: calc(100% - 5.8rem);
|
||||
height: calc(100% - 6.8rem);
|
||||
|
||||
.cut_picture_review_item{
|
||||
width: 100%;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="generate">
|
||||
<div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'" class="generate_checkbox">
|
||||
<div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'" class="generate_checkbox">
|
||||
<div>
|
||||
<label>
|
||||
<input
|
||||
@@ -37,11 +37,11 @@
|
||||
class="search_input"
|
||||
placeholder="Promopt input"
|
||||
v-model="searchPictureName"
|
||||
@keydown.enter="getLibraryList()"
|
||||
@keydown.enter="getgenerate()"
|
||||
/>
|
||||
<div class="generage_btn started_btn">Generate</div>
|
||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
||||
</div>
|
||||
<div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'" class="generage_img">
|
||||
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
@@ -61,7 +61,7 @@
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div class="operate_file_block">
|
||||
<div v-if="type_.type2 == 'Sketchboard'" class="operate_file_block">
|
||||
<div class="select_img_type">
|
||||
<div
|
||||
class="select_category"
|
||||
@@ -148,6 +148,13 @@
|
||||
:class="{ active: item?.checked }"
|
||||
>
|
||||
<img v-lazy="item.imgUrl" alt="" />
|
||||
<div
|
||||
class="delete_like_file_block"
|
||||
@click.stop="likeFile(item)"
|
||||
>
|
||||
<i v-if="item" class="fi fi-rr-heart"></i>
|
||||
<i v-else class="fi fi-sr-heart"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -308,6 +315,7 @@ export default defineComponent({
|
||||
methods: {
|
||||
generageAdd(data: any) {
|
||||
data.type_ = this.type_;
|
||||
data.resData = JSON.parse(JSON.stringify(data))
|
||||
this.store.commit("addGenerateMaterialFils", data);
|
||||
},
|
||||
beforeUpload(file: any) {
|
||||
@@ -341,25 +349,28 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
},
|
||||
getLibraryList() {
|
||||
// let data = {
|
||||
// level1Type: this.selectCode,
|
||||
// level2Type: this.designType,
|
||||
// page: this.currentPage,
|
||||
// pictureName: this.searchPictureName,
|
||||
// size: this.pageSize,
|
||||
// };
|
||||
// this.isShowLoading = true;
|
||||
// Https.axiosPost(Https.httpUrls.queryLibraryPage, data)
|
||||
// .then((rv: any) => {
|
||||
// this.imgList = rv.content;
|
||||
// this.total = rv.total;
|
||||
// this.isShowLoading = false;
|
||||
// })
|
||||
// .catch((res) => {
|
||||
// this.isShowLoading = false;
|
||||
// });
|
||||
},
|
||||
getgenerate(){
|
||||
let data = {
|
||||
generateType:'',
|
||||
designType:'',
|
||||
collectionElementId:'',
|
||||
level1Type:this.upload.level1Type,
|
||||
level2Type:'',
|
||||
text:this.searchPictureName,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:1,//为1就是Print
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
||||
(rv) => {
|
||||
// if(rv){
|
||||
|
||||
// }
|
||||
console.log(rv);
|
||||
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
if (file.status === "done") {
|
||||
@@ -377,9 +388,7 @@ export default defineComponent({
|
||||
if (arr.length >= 8) {
|
||||
message.error("You can select up to 8 images");
|
||||
} else {
|
||||
// this.store.commit("setSketchboardFile", fileList);
|
||||
this.sketchboardList = fileList
|
||||
// this.store.commit("clearMoodTemplateId");
|
||||
}
|
||||
} else if (file.status === "error") {
|
||||
let index = -1;
|
||||
@@ -444,8 +453,10 @@ export default defineComponent({
|
||||
this.sketchboardList.splice(moodboard, 1);
|
||||
this.store.commit("setSketchboardFile", this.sketchboardList);
|
||||
}
|
||||
this.store.commit("clearMoodTemplateId");
|
||||
},
|
||||
likeFile(item:any){
|
||||
|
||||
},
|
||||
closeModal() {
|
||||
// this.myMaterialModalShow = false
|
||||
this.searchPictureName = "";
|
||||
@@ -462,7 +473,8 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less">
|
||||
.generate {
|
||||
height: 30rem;
|
||||
flex: 1;
|
||||
// height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&.generate::-webkit-scrollbar {
|
||||
@@ -505,6 +517,7 @@ export default defineComponent({
|
||||
.generage_img_item {
|
||||
cursor: pointer;
|
||||
margin: 0 2rem 2rem 0;
|
||||
position: relative;
|
||||
&.active {
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
@@ -512,11 +525,40 @@ export default defineComponent({
|
||||
img {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.delete_like_file_block{
|
||||
pointer-events:none;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.delete_like_file_block{
|
||||
display: none;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 0.4rem;
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
left: auto;
|
||||
i{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
&.fi-rr-heart{
|
||||
|
||||
}
|
||||
&.fi-sr-heart{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.upload_item {
|
||||
.upload_file_item {
|
||||
@@ -525,6 +567,9 @@ export default defineComponent({
|
||||
// border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
transform: scale(0.9);
|
||||
.delete_file_block{
|
||||
pointer-events:none;
|
||||
}
|
||||
img {
|
||||
}
|
||||
}
|
||||
@@ -568,84 +613,6 @@ export default defineComponent({
|
||||
&:hover .delete_file_block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.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: 0.2rem;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid #343579;
|
||||
border-radius: 0.8rem;
|
||||
// overflow: hidden;
|
||||
z-index: 2;
|
||||
height: 9rem;
|
||||
overflow-x: hidden;
|
||||
&.category_list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category_item {
|
||||
text-align: left;
|
||||
font-size: 1.4rem;
|
||||
padding: 1rem 1.9rem;
|
||||
line-height: 1.6rem;
|
||||
|
||||
&.select_category_item {
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
#ac2a3b,
|
||||
#292161
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
#ac2a3b,
|
||||
#292161
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,88 +17,55 @@
|
||||
</div>
|
||||
|
||||
<div class="my_material_content">
|
||||
<!-- <div class="material_content_top">
|
||||
<div class="material_content_top_title"></div>
|
||||
<div class="material_content_top_right">
|
||||
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="designType"
|
||||
:options="disignTypeList"
|
||||
placeholder="All"
|
||||
:allowClear="true"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()" v-show="imgList.length">
|
||||
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
|
||||
<div>all</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="material_content_body scroll_style">
|
||||
<div class="content_img_item" v-for="(file) in imgList" :key="file.id" :class="{active:type_.type2 !== 'Moodboard'}">
|
||||
<div class="content_img_item_block" :class="{active:file?.checked}">
|
||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
|
||||
<div class="operate_file_block" v-if="type_.type2 == 'Sketchboard'">
|
||||
<div class="select_img_type">
|
||||
<div
|
||||
class="select_category"
|
||||
@click.stop="showFileCategory(file)"
|
||||
>
|
||||
{{ getSketchLabel(file.category) }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
file.categoryShow
|
||||
? 'icon_rotate'
|
||||
: '',
|
||||
]"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="category_list"
|
||||
v-show="file.categoryShow"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'category_item',
|
||||
file.category == cate.value
|
||||
? 'select_category_item'
|
||||
: '',
|
||||
]"
|
||||
v-for="(
|
||||
cate, index
|
||||
) in disignTypeList"
|
||||
:key="index"
|
||||
@click.stop="
|
||||
selectFileCategory(
|
||||
file,
|
||||
cate
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ cate.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
|
||||
<img :src="item.imgUrl" @click.stop="selectImgItem(item)">
|
||||
<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
|
||||
<div class="select_img_type">
|
||||
<div
|
||||
class="select_category"
|
||||
@click.stop="showFileCategory(item)"
|
||||
>
|
||||
{{ getSketchLabel(item.category) }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
item.categoryShow
|
||||
? 'icon_rotate'
|
||||
: '',
|
||||
]"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="category_list"
|
||||
v-show="item.categoryShow"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'category_item',
|
||||
item.category == cate.value
|
||||
? 'select_category_item'
|
||||
: '',
|
||||
]"
|
||||
v-for="(
|
||||
cate, index
|
||||
) in disignTypeList"
|
||||
:key="index"
|
||||
@click.stop="selectFileCategory(item, cate)"
|
||||
>
|
||||
{{ cate.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin_block">
|
||||
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
|
||||
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
|
||||
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
||||
</div>
|
||||
<!-- <div class="content_img_name">{{img.name}}</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="no_data_block loading_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
@@ -120,7 +87,24 @@ export default defineComponent({
|
||||
props: ["msg"],
|
||||
setup(prop) {
|
||||
let myMaterialModalShow = ref(false)
|
||||
let imgList = ref([])
|
||||
let imgList = ref([
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
|
||||
id_: 1,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
|
||||
id_: 2,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
|
||||
id_: 3,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
|
||||
id_: 4,
|
||||
},
|
||||
])
|
||||
let store = useStore()
|
||||
let isShowLoading:any = ref(false)
|
||||
let selectCode:any = ref('')
|
||||
@@ -152,12 +136,6 @@ export default defineComponent({
|
||||
label: "Skirt",
|
||||
},
|
||||
]
|
||||
let boardList = {
|
||||
Moodboard:'Mood',
|
||||
Printboard:'Print',
|
||||
Sketchboard:'Sketch',
|
||||
MarketingSketch:'MarketingSketch'
|
||||
}
|
||||
return{
|
||||
myMaterialModalShow,
|
||||
imgList,
|
||||
@@ -171,7 +149,6 @@ export default defineComponent({
|
||||
searcMaterialhName,
|
||||
designType,
|
||||
disignTypeList,
|
||||
boardList,
|
||||
}
|
||||
},
|
||||
data (prop) {
|
||||
@@ -218,10 +195,11 @@ export default defineComponent({
|
||||
// this.selectImgListIds.splice(index,1)
|
||||
// }
|
||||
imgData.type_ = this.type_
|
||||
|
||||
imgData.resData = JSON.parse(JSON.stringify(imgData))
|
||||
this.store.commit("addGenerateMaterialFils", imgData);
|
||||
},
|
||||
|
||||
|
||||
//改变页码
|
||||
changePage(current: number, pageSize: number){
|
||||
this.currentPage = current
|
||||
@@ -304,6 +282,8 @@ export default defineComponent({
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
flex: 1;
|
||||
border-radius: 0;
|
||||
&.my_material_modal::-webkit-scrollbar{display: none;}
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
@@ -337,6 +317,7 @@ export default defineComponent({
|
||||
background-color: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
.my_material_header_right{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -391,7 +372,8 @@ export default defineComponent({
|
||||
.my_material_content{
|
||||
// padding: 0 3rem 3.5rem 3rem;
|
||||
padding: 0;
|
||||
height: calc(100% - 6.6rem);
|
||||
// height: calc(100% - 6.6rem);
|
||||
height: auto;
|
||||
position: relative;
|
||||
|
||||
.material_content_top{
|
||||
@@ -460,54 +442,36 @@ export default defineComponent({
|
||||
&.generate::-webkit-scrollbar{display: none;}
|
||||
|
||||
.content_img_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
// padding: 0 1.4rem;
|
||||
// margin-bottom: 2.8rem;
|
||||
margin: 0 2rem 2rem 0;
|
||||
margin: 0 2rem 5rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.moodb{
|
||||
margin: 0 2rem 2rem 0;
|
||||
}
|
||||
&.active{
|
||||
height: 10rem;
|
||||
margin: 0 2rem 4rem 0;
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
transform: scale(0.9);
|
||||
img {
|
||||
}
|
||||
.pin_block{
|
||||
display: block;
|
||||
pointer-events:none;
|
||||
}
|
||||
.operate_file_block{
|
||||
pointer-events:none;
|
||||
}
|
||||
}
|
||||
.pin_block{
|
||||
display: none;
|
||||
}
|
||||
.content_img_item_block{
|
||||
// border: 0.1rem solid transparent;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
opacity: .5;
|
||||
img{
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.select_item_img{
|
||||
// border-color: #343579;
|
||||
}
|
||||
|
||||
.print_content_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.content_img_name{
|
||||
width: 16.5rem;
|
||||
height: 3.5rem;
|
||||
|
||||
@@ -94,7 +94,6 @@
|
||||
<Material
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
@confirmSelect="confirmSelect"
|
||||
msg="Moodboard"
|
||||
></Material>
|
||||
<Generate
|
||||
@@ -123,14 +122,17 @@
|
||||
<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-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
|
||||
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
|
||||
<img :src="item.imgUrl">
|
||||
<img :src="item.imgUrl" v-modelImg>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="modal_img">
|
||||
<img :src="modalImg[0].imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
|
||||
@@ -138,21 +140,24 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,computed} from "vue";
|
||||
import { defineComponent, h, ref ,computed,nextTick} 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 { Https } from "@/tool/https";
|
||||
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 domTurnImg from '@/tool/domTurnImg'
|
||||
import GO from "@/tool/GO";
|
||||
import moodb from "@/tool/moodb";
|
||||
export default defineComponent({
|
||||
components: { Material, MoodTemplate, Generate,layout },
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let lessenList: any = ref([]);
|
||||
let fileList: any = ref([]);
|
||||
let templateModal: any = ref(false);
|
||||
@@ -162,6 +167,12 @@ export default defineComponent({
|
||||
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
||||
let layoutList:any = []//选中后随机生成的list
|
||||
let layoutOpen = ref(false)
|
||||
let loadingShow = ref(false)
|
||||
let modalImg:any= computed(()=>{
|
||||
console.log(store.state.UploadFilesModule.disposeMoodboard);
|
||||
|
||||
return store.state.UploadFilesModule.disposeMoodboard
|
||||
})
|
||||
return {
|
||||
fileList,
|
||||
lessenList,
|
||||
@@ -171,7 +182,9 @@ export default defineComponent({
|
||||
moodb_className,
|
||||
flex_direction,
|
||||
layoutList,
|
||||
layoutOpen
|
||||
layoutOpen,
|
||||
loadingShow,
|
||||
modalImg
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -208,8 +221,31 @@ export default defineComponent({
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
|
||||
},
|
||||
directives:{
|
||||
modelImg:{
|
||||
mounted(el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
el.style.width = 100+'%'
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
},
|
||||
updated (el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
el.style.width = 100+'%'
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
@@ -240,7 +276,6 @@ export default defineComponent({
|
||||
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;
|
||||
@@ -254,25 +289,6 @@ export default defineComponent({
|
||||
}
|
||||
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 =
|
||||
@@ -306,15 +322,22 @@ export default defineComponent({
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
}
|
||||
this.store.commit("clearMoodTemplateId");
|
||||
if(this.store.state.UploadFilesModule.moodboard.length == 0){
|
||||
this.store.commit("setDisposeMoodboard", {});
|
||||
}
|
||||
},
|
||||
|
||||
recollection() {
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.moodboardFiles
|
||||
)
|
||||
);
|
||||
let disposeMoodboard = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.disposeMoodboard
|
||||
)
|
||||
);
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
@@ -333,10 +356,8 @@ export default defineComponent({
|
||||
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
|
||||
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
||||
this.store.commit("setMoodboardFile", setboard.moodboard);
|
||||
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
|
||||
this.fileList = setboard.moodboard
|
||||
let moodTemplateId =
|
||||
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
|
||||
this.store.commit("setMoodTemplateId", moodTemplateId);
|
||||
},
|
||||
|
||||
changeTemplateModal() {
|
||||
@@ -350,7 +371,9 @@ export default defineComponent({
|
||||
|
||||
},
|
||||
layout(){
|
||||
let arr = this.store.state.UploadFilesModule.moodboard
|
||||
this.loadingShow = true
|
||||
this.store.commit("setDisposeMoodboard", []);
|
||||
let arr = JSON.parse(JSON.stringify(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]
|
||||
@@ -361,47 +384,40 @@ export default defineComponent({
|
||||
}
|
||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||
this.layoutOpen = true
|
||||
//提交模板
|
||||
// this.loadingShow = true
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
|
||||
nextTick().then(async ()=>{
|
||||
let layoutCentent = document.getElementById('modal_img')
|
||||
let file = await domTurnImg(layoutCentent)
|
||||
let param = new FormData();
|
||||
param.append('inPin','0')
|
||||
param.append('level1Type','Moodboard')
|
||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||
param.append('file',file);
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
|
||||
.then((rv: any) => {
|
||||
let img:any = rv
|
||||
img.imgUrl = rv.url
|
||||
img.resData = JSON.parse(JSON.stringify(img))
|
||||
this.store.commit("setDisposeMoodboard", img);
|
||||
this.loadingShow = false
|
||||
}
|
||||
).catch(rv=>{
|
||||
this.loadingShow = false
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
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>
|
||||
@@ -413,6 +429,8 @@ export default defineComponent({
|
||||
.modal_left {
|
||||
padding-top: 4rem;
|
||||
width: 47%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// width: 50rem;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
@@ -466,8 +484,8 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.moodboard_body {
|
||||
height: calc(100% - 5rem);
|
||||
padding-top: 2.5rem;
|
||||
flex: 1;
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
@@ -475,7 +493,7 @@ export default defineComponent({
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body {
|
||||
height: calc(100% - 3rem);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -563,16 +581,23 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
>img{
|
||||
height: 100%;
|
||||
}
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
img{
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
}
|
||||
.wh1{
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<!-- 生成collention缩略图用的 -->
|
||||
<div class="collection_review">
|
||||
<div class="collection_review_mark"></div>
|
||||
<div class="img_block_item" v-if="allBoardData?.moodTemplateId">
|
||||
<!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
|
||||
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
|
||||
</div>
|
||||
<div class="img_block_item" v-else>
|
||||
<div class="lager_img_item" v-for="(mood) in allBoardData.moodboardFiles" :key="mood">
|
||||
</div> -->
|
||||
<div class="img_block_item">
|
||||
<div class="lager_img_item lager_img_disposeMoodboard" v-for="(mood) in allBoardData.disposeMoodboard" :key="mood">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="mood.imgUrl" >
|
||||
</div>
|
||||
@@ -62,7 +62,9 @@ export default defineComponent({
|
||||
components:{MoodTemplate},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
|
||||
let allBoardData:any = computed(()=>{
|
||||
console.log(store.state.UploadFilesModule.allBoardData,"===============")
|
||||
return store.state.UploadFilesModule.allBoardData})
|
||||
return {
|
||||
allBoardData,
|
||||
}
|
||||
@@ -98,6 +100,10 @@ export default defineComponent({
|
||||
width: 20.4rem;
|
||||
height: 20.4rem;
|
||||
vertical-align: top;
|
||||
&.lager_img_disposeMoodboard{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sketch_img_item{
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
|
||||
<div class="delete_file_block" @click.stop="deleteFile(file)">
|
||||
<div class="delete_like_file_block" @click.stop="deleteFile(file)">
|
||||
<span
|
||||
class="icon iconfont icon-shanchu"
|
||||
></span>
|
||||
@@ -80,7 +80,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
<Material v-show="openClick == 2" ref="Material" msg="Printboard" @confirmSelect="confirmSelect"></Material>
|
||||
<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate>
|
||||
</div>
|
||||
<div class="modal_right">
|
||||
@@ -106,6 +106,13 @@
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
|
||||
<img :src="item.imgUrl" @click.stop="generageAdd(item)">
|
||||
<div
|
||||
class="delete_like_file_block"
|
||||
@click.stop="likeFile(item)"
|
||||
>
|
||||
<i v-if="item" class="fi fi-rr-heart"></i>
|
||||
<i v-else class="fi fi-sr-heart"></i>
|
||||
</div>
|
||||
<div class="pin_block">
|
||||
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
||||
</div>
|
||||
@@ -216,17 +223,17 @@ export default defineComponent({
|
||||
methods:{
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
},
|
||||
openLibrary(){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Printboard')
|
||||
let material:any = this.$refs.Material
|
||||
if(num == 2){
|
||||
material.init('Printboard')
|
||||
}
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
file.id_ = GO.id++
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Moodboard'
|
||||
type2:'Printboard'
|
||||
};
|
||||
file.pin = false;
|
||||
let Cropper:any = this.$refs.Cropper
|
||||
@@ -277,18 +284,21 @@ export default defineComponent({
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
this.fileList = this.store.state.UploadFilesModule.printboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||||
this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
this.store.commit("setPrintboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
likeFile(item:any){
|
||||
|
||||
},
|
||||
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
|
||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
while(index === num){
|
||||
@@ -558,7 +568,7 @@ export default defineComponent({
|
||||
collectionElementId:generage.collectionElementid,
|
||||
level1Type:generage.upload.level1Type,
|
||||
level2Type:generage.level2Type,
|
||||
// text:this.captionGeneration,
|
||||
text:this.captionGeneration,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:1,//为1就是Print
|
||||
}
|
||||
@@ -571,6 +581,8 @@ export default defineComponent({
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
// this.beforeUpload(false)
|
||||
// if(this.captionGeneration){
|
||||
// }else{
|
||||
@@ -580,10 +592,6 @@ export default defineComponent({
|
||||
// return
|
||||
// }
|
||||
}
|
||||
if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
||||
(rv) => {
|
||||
// if(rv){
|
||||
@@ -600,6 +608,7 @@ export default defineComponent({
|
||||
type1: "generate",
|
||||
type2: 'Printboard',
|
||||
},
|
||||
item.resData = JSON.parse(JSON.stringify(item))
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}
|
||||
}
|
||||
@@ -617,6 +626,8 @@ export default defineComponent({
|
||||
// background: #fff;
|
||||
// padding: 0.5rem 2.2rem 2rem 2.6rem;
|
||||
// box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 4rem;
|
||||
width: 47%;
|
||||
.switch_type_list {
|
||||
@@ -671,7 +682,8 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.printboard_body{
|
||||
height: calc(100% - 5rem);
|
||||
// height: calc(100% - 5rem);
|
||||
flex: 1;
|
||||
padding-top: 2.5rem;
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
@@ -733,117 +745,54 @@ export default defineComponent({
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 0.4rem;
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
left: auto;
|
||||
.icon-shanchu{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.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);
|
||||
border: 1px solid #343579;
|
||||
border-radius: 0.8rem;
|
||||
// overflow: hidden;
|
||||
z-index: 2;
|
||||
height: 9rem;
|
||||
overflow-x: hidden;
|
||||
&.category_list::-webkit-scrollbar{display: none;}
|
||||
|
||||
.category_item{
|
||||
text-align: left;
|
||||
font-size: 1.4rem;
|
||||
padding: 1rem 1.9rem;
|
||||
line-height: 1.6rem;
|
||||
|
||||
&.select_category_item{
|
||||
background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload_img_icon{
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.delete_like_file_block{
|
||||
display: none;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 0.4rem;
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
left: auto;
|
||||
.icon-shanchu{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
i{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
&.fi-rr-heart{
|
||||
|
||||
}
|
||||
&.fi-sr-heart{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
margin-left: 3rem;
|
||||
@@ -935,12 +884,21 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
}
|
||||
&.active{
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
transform: scale(0.9);
|
||||
img {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.pin_block{
|
||||
pointer-events:none;
|
||||
}
|
||||
.delete_like_file_block{
|
||||
pointer-events:none
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -92,8 +92,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteFile(file)"
|
||||
class="delete_like_file_block"
|
||||
@click.stop="deleteFile(file)"
|
||||
>
|
||||
<span
|
||||
class="icon iconfont icon-shanchu"
|
||||
@@ -192,6 +192,7 @@
|
||||
: '',
|
||||
]"
|
||||
></div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="category_list"
|
||||
@@ -220,6 +221,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="delete_like_file_block"
|
||||
@click.stop="likeFile(item)"
|
||||
>
|
||||
<i v-if="item" class="fi fi-rr-heart"></i>
|
||||
<i v-else class="fi fi-sr-heart"></i>
|
||||
</div>
|
||||
<div class="pin_block">
|
||||
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
||||
</div>
|
||||
@@ -343,7 +351,7 @@ export default defineComponent({
|
||||
this.openClick = num;
|
||||
if (num == 2) {
|
||||
let material: any = this.$refs.Material;
|
||||
material.init("Moodboard");
|
||||
material.init("Sketchboard");
|
||||
} else if (num == 3) {
|
||||
// let Generate:any = this.$refs.Generate
|
||||
// Generate.init('generate')
|
||||
@@ -364,7 +372,7 @@ export default defineComponent({
|
||||
file.id_ = GO.id++
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Moodboard'
|
||||
type2:'Sketchboard'
|
||||
};
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
@@ -439,9 +447,9 @@ export default defineComponent({
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||||
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
@@ -451,7 +459,25 @@ export default defineComponent({
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
|
||||
likeFile(item:any){
|
||||
console.log(item);
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
level1Type:"Sketchboard",
|
||||
level2Type: item.category,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
// Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
||||
// (rv) => {
|
||||
// // if(rv){
|
||||
|
||||
// // }
|
||||
// console.log(rv);
|
||||
|
||||
// }
|
||||
// ).catch(res=>{
|
||||
// });
|
||||
},
|
||||
recollection() {
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
@@ -523,6 +549,8 @@ export default defineComponent({
|
||||
}
|
||||
}else if(generateType == 'text'){
|
||||
// this.beforeUpload(false)
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
if(this.captionGeneration){
|
||||
}else{
|
||||
message.error(
|
||||
@@ -531,10 +559,6 @@ export default defineComponent({
|
||||
return
|
||||
}
|
||||
}
|
||||
if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
||||
(rv) => {
|
||||
// if(rv){
|
||||
@@ -551,6 +575,7 @@ export default defineComponent({
|
||||
type1: "generate",
|
||||
type2: 'Sketchboard',
|
||||
},
|
||||
item.resData = JSON.parse(JSON.stringify(item))
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}
|
||||
},
|
||||
@@ -563,6 +588,8 @@ export default defineComponent({
|
||||
.modal_left {
|
||||
padding-top: 4rem;
|
||||
width: 47%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -614,7 +641,8 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.sketchboard_body {
|
||||
height: calc(100% - 5rem);
|
||||
// height: calc(100% - 5rem);
|
||||
flex: 1;
|
||||
padding-top: 2.5rem;
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
@@ -687,28 +715,10 @@ export default defineComponent({
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 0.4rem;
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
left: auto;
|
||||
.icon-shanchu{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -717,7 +727,35 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.delete_like_file_block{
|
||||
display: none;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 0.4rem;
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
left: auto;
|
||||
.icon-shanchu{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
i{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
&.fi-rr-heart{
|
||||
|
||||
}
|
||||
&.fi-sr-heart{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
margin-left: 3rem;
|
||||
@@ -806,6 +844,9 @@ export default defineComponent({
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
}
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
@@ -815,8 +856,17 @@ export default defineComponent({
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
img {
|
||||
transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
// img {
|
||||
// }
|
||||
.operate_file_block{
|
||||
pointer-events:none
|
||||
}
|
||||
.pin_block{
|
||||
pointer-events:none
|
||||
}
|
||||
.delete_like_file_block{
|
||||
pointer-events:none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -104,7 +104,6 @@ export default defineComponent({
|
||||
file.resData = res.data
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setMoodboardFile',fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
@@ -121,7 +120,6 @@ export default defineComponent({
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
},
|
||||
|
||||
|
||||
|
||||
@@ -243,7 +243,7 @@ export default defineComponent({
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.collection_modal{
|
||||
.collection_modal,.layout_modal{
|
||||
// max-width: 1200px ;
|
||||
max-width: 1150px ;
|
||||
.ant-modal-content{
|
||||
|
||||
@@ -12,13 +12,14 @@
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<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="collection_title">
|
||||
<div class="collection_title_text">
|
||||
<div class="layout_title">MoodBoard Design</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<div class="layout_nav">
|
||||
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)">
|
||||
<img :src="item.imgUrl">
|
||||
@@ -26,7 +27,7 @@
|
||||
</div>
|
||||
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
|
||||
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false">
|
||||
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" v-modelImg>
|
||||
<ul v-show="item.setPitch" class="layout_btn" >
|
||||
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
||||
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
|
||||
@@ -76,50 +77,63 @@
|
||||
Submit
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
multiple
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
</a-upload>
|
||||
</a-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
|
||||
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
import GO from "@/tool/GO";
|
||||
import moodb from "@/tool/moodb";
|
||||
import draggable from 'vuedraggable'
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import domTurnImg from '@/tool/domTurnImg'
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
|
||||
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;
|
||||
let layoutList:any = ref([])
|
||||
const content = ref<HTMLElement | null>(null);
|
||||
let loadingShow = ref(false)
|
||||
return {
|
||||
fileList,
|
||||
layout,
|
||||
templateFileList,
|
||||
openClick,
|
||||
drag,
|
||||
layoutList,
|
||||
content,
|
||||
loadingShow
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
// moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
|
||||
@@ -132,11 +146,19 @@ export default defineComponent({
|
||||
moodbList:{},
|
||||
moodbClassName:[],
|
||||
setabsolute:false,
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
upload: {
|
||||
isPin: 0,
|
||||
level1Type: "Moodboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
directives:{
|
||||
//操作移动
|
||||
@@ -260,27 +282,34 @@ export default defineComponent({
|
||||
},
|
||||
//操作旋转
|
||||
rotote:{
|
||||
|
||||
mounted(el){
|
||||
let mouse = true;
|
||||
let angle :any = 0
|
||||
let num:any
|
||||
let x = 0
|
||||
let y = 0
|
||||
let elParent = el.parentNode.parentNode
|
||||
|
||||
if(document.defaultView){
|
||||
num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3])
|
||||
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
|
||||
num = Number(transform[3])
|
||||
}
|
||||
// 添加鼠标按下事件监听器
|
||||
el.addEventListener('mousedown', (e:MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
mouse = true;
|
||||
let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2
|
||||
let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2
|
||||
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
|
||||
// let eY = elParent.offsetTop + el.offsetTop
|
||||
var info = el.getBoundingClientRect();
|
||||
let eX = info.x + info.width / 2;
|
||||
let eY = info.y + info.height / 2;
|
||||
|
||||
document.addEventListener('mousemove', (e:MouseEvent) => {
|
||||
if (mouse) {
|
||||
let X = eX
|
||||
let Y = eY
|
||||
let x:any = e.pageX - X
|
||||
let y:any = Y - e.pageY
|
||||
let x:any = e.clientX - X
|
||||
let y:any = Y - e.clientY
|
||||
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
|
||||
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
|
||||
@@ -290,6 +319,8 @@ export default defineComponent({
|
||||
// 添加鼠标松开事件监听器
|
||||
document.addEventListener('mouseup', () => {
|
||||
mouse = false;
|
||||
// x = e.pageX
|
||||
// y = e.pageY
|
||||
});
|
||||
});
|
||||
//缩放
|
||||
@@ -477,20 +508,47 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
modelImg:{
|
||||
mounted(el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
el.style.width = 100+'%'
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
},
|
||||
updated (el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
el.style.width = 100+'%'
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.layout = !this.layout
|
||||
let layoutList = this.store.state.UploadFilesModule.moodboard
|
||||
let parentList:any = this.$parent
|
||||
parentList = parentList.layoutList
|
||||
this.layout = true
|
||||
// let layoutList = this.store.state.UploadFilesModule.moodboard
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
this.layoutList = layoutList
|
||||
this.layoutList = parentList
|
||||
|
||||
this.moodbList = this.moodb[layoutList.length-1]
|
||||
this.moodbList = this.moodb[parentList.length-1]
|
||||
this.moodbClassName = this.moodb_className
|
||||
},
|
||||
cancelDsign(){
|
||||
this.layout = false
|
||||
},
|
||||
setpitch(item:any,index:any){
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
@@ -516,105 +574,57 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
},
|
||||
//开始拖拽事件
|
||||
layoutBtnTop(){
|
||||
|
||||
},
|
||||
// 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;
|
||||
// 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')
|
||||
// }
|
||||
// },
|
||||
|
||||
|
||||
//随机重置图片顺序
|
||||
// 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();
|
||||
this.loadingShow = true
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
let layoutCentent = document.getElementById('layoutCentent')
|
||||
setTimeout(() => {
|
||||
console.log(domTurnImg(layoutCentent));
|
||||
this.layout = false
|
||||
|
||||
}, 0);
|
||||
nextTick().then(async ()=>{
|
||||
let layoutCentent = document.getElementById('layoutCentent')
|
||||
let file = await domTurnImg(layoutCentent)
|
||||
let param = new FormData();
|
||||
param.append('inPin','0')
|
||||
param.append('level1Type','Moodboard')
|
||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||
param.append('file',file);
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
|
||||
.then((rv: any) => {
|
||||
// console.log(rv);
|
||||
rv.imgUrl = rv.url
|
||||
this.layout = false
|
||||
this.loadingShow = false
|
||||
this.store.commit("setDisposeMoodboard", rv);
|
||||
}
|
||||
).catch(rv=>{
|
||||
this.loadingShow = false
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
beforeUpload(){
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.layout_modal {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
max-width: 1150px;
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: 60rem;
|
||||
height: 65rem;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: 1rem;
|
||||
@@ -624,25 +634,46 @@ export default defineComponent({
|
||||
// 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;
|
||||
.collection_title{
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,.65);
|
||||
align-items: center;
|
||||
.collection_title_text{
|
||||
margin-right: 4rem;
|
||||
}
|
||||
.collection_title_text_intro{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0,0,0,.45);
|
||||
}
|
||||
}
|
||||
.collection_closeIcon{
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout_title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.close_icon {
|
||||
font-size: 1.8rem;
|
||||
color: #aeb2b7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.fi-rr-cross-small::before{
|
||||
padding: .2rem;
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
.layout_nav{
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
@@ -798,6 +829,7 @@ export default defineComponent({
|
||||
// object-fit: cover;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
pointer-events: none;
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
|
||||
Reference in New Issue
Block a user