2023-11-13-dist

This commit is contained in:
X1627315083
2023-11-13 09:52:57 +08:00
parent 1298a3051e
commit 6cad540fbb
40 changed files with 360 additions and 147 deletions

View File

@@ -233,7 +233,7 @@ export default defineComponent({
height: 100%;
padding: 0 9rem;
overflow: hidden;
min-width: 1440px;
// min-width: 1440px;
position: relative;
.page_content {
position: relative;

View File

@@ -37,6 +37,8 @@
<div class="left_info_content scroll_style">
<div class="left_info_content_body" ref="collection_canvas">
<NewCollectionReview id="collectionReview"></NewCollectionReview>
<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
</div>
</div>
</div>
@@ -101,9 +103,26 @@
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
</div>
<div class="button_second" v-show="likeDesignCollectionList.length" @click="exportCanvas()">
{{ $t('HomeView.Export') }}
<div class="right_content_export" v-show="likeDesignCollectionList.length">
<div class="button_second" @click="exportCanvas()">
{{ $t('HomeView.Export') }}
</div>
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
isShowOperate ? 'icon_rotate' : '',
]"
@click.stop="changeShowOperateContent()"
></div>
<div class="export_nav" v-show="isShowOperate" @click.stop="">
<a-checkbox v-for="item in exportNav" v-model:checked="item.change" :disabled='item.noChange'>
{{ item.name }}
</a-checkbox>
</div>
</div>
</div>
<div class="right_content_body">
@@ -186,7 +205,7 @@
</template>
<script lang="ts">
import { defineComponent, h, ref, computed ,inject} from "vue";
import { defineComponent, h, ref, computed ,inject,provide} from "vue";
import HeaderComponent from "@/component/HomePage/Header.vue";
import CollectionModal from "@/component/HomePage/collectionModal.vue";
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
@@ -241,6 +260,36 @@ export default defineComponent({
width:'',
height:'',
}
let exportNav = ref([
{
name:useI18n().t('HomeView.moodboard'),
change:true,
noChange:true,
value:'moodboardFiles',
},{
name:useI18n().t('HomeView.printboard'),
change:true,
noChange:false,
value:'printboardFiles',
},{
name:useI18n().t('HomeView.colorboard'),
change:true,
noChange:false,
value:'colorBoards',
},{
name:useI18n().t('HomeView.sketchboard'),
change:true,
noChange:false,
value:'sketchboardFiles',
},{
name:useI18n().t('HomeView.mannequins'),
change:true,
noChange:true,
value:'',
},
])
provide('exportNav',exportNav)
let isShowOperate = ref(false)
let userInfo:any = {}
let {t} = useI18n()
return {
@@ -252,6 +301,8 @@ export default defineComponent({
designId,
contentImgMax,
contentImg,
exportNav,
isShowOperate,
userInfo,
t,
};
@@ -810,6 +861,20 @@ export default defineComponent({
});
return colorList;
},
//点击下拉图标出现操作
changeShowOperateContent() {
this.isShowOperate = !this.isShowOperate;
document.addEventListener(
"click",
this.closeShowOperateContent,
false
);
},
//关闭下拉图标
closeShowOperateContent() {
this.isShowOperate = false;
document.removeEventListener("click", this.closeShowOperateContent);
},
//导出合成图
async exportCanvas() {
@@ -834,21 +899,26 @@ export default defineComponent({
imgUrl: URL.createObjectURL(blob),
name: "collection.png",
})
let num = 0
for (let key in allBoardData) {
if (key !== "colorBoards" && key !== "moodTemplateId") {
for (let item of allBoardData[key]) {
let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
let data = {
imgUrl: item.imgUrl,
name:
item?.resData?.name +
index +
"." +
nameTail,
};
img.push(data);
index++;
if(!this.exportNav[num]?.change){
}else{
for (let item of allBoardData[key]) {
let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
let data = {
imgUrl: item.imgUrl,
name:
item?.resData?.name +
index +
"." +
nameTail,
};
img.push(data);
index++;
}
}
num++
}
}
// a.setAttribute('href', URL.createObjectURL(blob));
@@ -856,47 +926,28 @@ export default defineComponent({
// a.click();
}
);
await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
(canvas) => {
let blob: any = dataURLtoBlob(
canvas.toDataURL("image/png")
);
let allBoardData: any =
this.store.state.UploadFilesModule.allBoardData;
let index = 0;
img.push({
imgUrl: URL.createObjectURL(blob),
name: "achievement.png",
},)
this.likeDesignCollectionList.forEach((item:any) => {
let data = {
imgUrl:item.designItemUrl,
name:item.pictureName
}
img.push(data)
});
// for (let key in allBoardData) {
// if (key !== "colorBoards" && key !== "moodTemplateId") {
// for (let item of allBoardData[key]) {
// // console.log(item, 666);
// let nameTail = item.imgUrl.split(".").pop().split("?").shift();
// let data = {
// imgUrl: item.imgUrl,
// name:
// item?.resData?.name +
// index +
// "." +
// nameTail,
// };
// img.push(data);
// index++;
// }
// }
// }
}
);
//单独导出模特图
// await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
// (canvas) => {
// let blob: any = dataURLtoBlob(
// canvas.toDataURL("image/png")
// );
// let allBoardData: any =
// this.store.state.UploadFilesModule.allBoardData;
// let index = 0;
// img.push({
// imgUrl: URL.createObjectURL(blob),
// name: "achievement.png",
// },)
// this.likeDesignCollectionList.forEach((item:any) => {
// let data = {
// imgUrl:item.designItemUrl,
// name:item.pictureName
// }
// img.push(data)
// });
// }
// );
this.downImg(img);
},
@@ -959,7 +1010,6 @@ export default defineComponent({
let zip = new JSZip();
let cache: any = {};
let promises = [];
for (let item of imagesParams) {
const promise = _this
.getImgArrayBuffer(item.imgUrl)
@@ -992,7 +1042,7 @@ export default defineComponent({
height: 100%;
padding: 0 9rem;
overflow: hidden;
min-width: 1440px;
// min-width: 1440px;
position: relative;
// left: 50%;
// margin-left: -50%;
@@ -1140,7 +1190,37 @@ export default defineComponent({
align-items: center;
padding: 0 3.2rem 0 1.9rem;
background: rgba(255, 255, 255, 0.2);
position: relative;
.right_content_export{
display: flex;
align-items: center;
position: relative;
.icon-xiala{
cursor: pointer;
transition: .3s all;
margin-left: 1rem;
}
.icon_rotate{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.export_nav{
display: flex;
flex-direction: column;
position: absolute;
top: 4.5rem;
width: 100%;
background: #fff;
padding: 1rem;
border: 2px solid;
z-index: 2;
label{
margin: 0;
}
}
}
.content_header_left {
display: flex;
justify-content: space-between;
@@ -1301,7 +1381,7 @@ export default defineComponent({
.ant-modal-mask{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
min-width: 1440px;
// min-width: 1440px;
border-radius: 1rem;
overflow: hidden;
height: calc(100% - 7rem);
@@ -1311,11 +1391,11 @@ export default defineComponent({
}
.ant-modal-centered{
top: 7rem;
min-width: 1440px;
// min-width: 1440px;
// left: 50%;
// margin-left: -50%;
.ant-modal{
min-width: .65*1440px;
// min-width: .65*1440px;
}
}

View File

@@ -86,6 +86,7 @@
<div class="content_body_header_right">
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">{{ $t('LibraryPage.Rename') }}</div>
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">{{ $t('LibraryPage.Rename') }}</div>
</div>
<div class="content_search_block">
<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
@@ -1081,7 +1082,7 @@ export default defineComponent({
overflow: hidden;
height: 100%;
padding: 0 9rem;
min-width: 1440px;
// min-width: 1440px;
position: relative;
.page_content {
position: relative;