This commit is contained in:
WangXiaoDong
2023-08-23 17:50:09 +08:00
parent d41b331e38
commit 2fda4a8c36
20 changed files with 2587 additions and 332 deletions

View File

@@ -37,9 +37,13 @@
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
<a-spin :indicator="indicator" tip="Uploading..."/>
</div>
<div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
<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)">Delete</div>
<div class="delete_file_block" @click.stop="deleteFile(file)">
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
</div>
<div class="pin_block" v-show="file?.status === 'done'">
@@ -86,7 +90,7 @@
<!-- <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 printboardList" :key="item" @click="deleteFile(item)">
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
@@ -97,16 +101,19 @@
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box">
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
<img :src="item.imgUrl">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
<img :src="item.imgUrl" @click.stop="generageAdd(item)">
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
</div>
</div>
</div>
</div>
</div>
<!-- <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> -->
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
</div>
</template>
<script lang="ts">
@@ -120,6 +127,8 @@ import { message,Upload} from 'ant-design-vue';
import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
import GO from "@/tool/GO";
export default defineComponent({
components:{
Cropper,
@@ -214,6 +223,12 @@ export default defineComponent({
},
fileUploadChange(data:any){
let file = data.file
file.id_ = GO.id++
file.type_ = {
type1:'upload',
type2:'Moodboard'
};
file.pin = false;
let Cropper:any = this.$refs.Cropper
if(this.currentFileNum === 1){
var reader = new FileReader();
@@ -487,10 +502,29 @@ export default defineComponent({
},
recollection(){
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
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("setPrintboardGenerateFiles", setboard.generate);
this.store.commit("setPrintboardMaterialFiles", setboard.material);
this.store.commit("setPrintboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
// this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
this.store.commit('setPrintboardFile',this.fileList)
this.store.commit('setGeneratePrintFile',this.printImgList)
// this.store.commit('setGeneratePrintFile',this.printImgList)
},
confirmSelect(event:any){
@@ -655,7 +689,7 @@ export default defineComponent({
}
.upload_file_item{
margin: 0 2rem 4rem 0;
margin: 0 2rem 5rem 0;
// margin: 0 2rem 2rem 0;
display: inline-block;
width: 10rem;
@@ -668,10 +702,7 @@ export default defineComponent({
height: 100%;
}
.pin_block{
text-align: center;
margin-top:1.6rem;
}
&.upload_component{
border: none;
@@ -816,6 +847,8 @@ export default defineComponent({
.modal_right{
flex: 1;
margin-left: 3rem;
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: 1.2rem;
@@ -869,14 +902,18 @@ export default defineComponent({
height: 30rem;
display: flex;
flex-direction: column;
flex: 1;
overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: 2rem;
padding-block: 2rem;
}
.input_box{
input{
&.forbidden{
cursor:not-allowed;
&.forbidden{
}
}
}
@@ -886,7 +923,7 @@ export default defineComponent({
flex-wrap: wrap;
justify-content: flex-start;
.modal_imgItem{
margin: 0 2rem 2rem 0;
margin: 0 2rem 5rem 0;
display: inline-block;
width: 10rem;
height: 10rem;