aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

09-12

Browse Source
This commit is contained in:
WangXiaoDong
2023-09-12 10:11:27 +08:00
parent 3440f2f868
commit 173f35042d
71 changed files with 4291 additions and 1865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/component/Detail/AccessoryReplaceModal.vue
View File

@@ -127,7 +127,6 @@ export default defineComponent({
this.loadingShow = false
})
},
//提交
submitOthers(){
this.othersData.color = this.othersData.color ? `${this.modifyColor.r} ${this.modifyColor.g} ${this.modifyColor.b}` : ''

334
src/component/Detail/DesignDetail.vue
View File

@@ -4,16 +4,11 @@
<a-modal class="design_detail_modal_component"
v-model:visible="designDetailShow"
:footer="null"
title="Mailbox binding"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
>
<!-- <template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template> -->
<div class="design_title_text">
<div>Details</div>
<div class="design_title_text_intro">edit the details of your design</div>
@@ -30,27 +25,33 @@
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
<div class="detail_modal_body_img" @click="showDesignImgDetail()">
<div class="detail_modal_body_img">
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
<img class="detial_img" :src="designItemDetail.designItemUrl">
<div v-for="item,index in designItemDetail.clothes" :key="item">
<div class="clothes_item_img_block" @click="clothesDetail(item,index)">
<img class="clothes_item_img" :src="item.path">
</div>
</div>
<img v-show="imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<div>
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt"></i>
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit"></i>
<i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- 层 -->
<i class="fi fi-rr-copy"></i>
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
</div>
</div>
<div class="detail_modal_body_category">
<div class="detail_modal_right_top scroll_style">
<div v-show="designOrder" class="detail_modal_right_top scroll_style">
<div class="clothes_detail_item clothes_detail_item_apparel">
<div class="clothes_item_header">
<i class="fi fi-rs-comments"></i>
<div>Current Apparel</div>
<i class="fi fi-rr-edit"></i>
</div>
<img src="" alt="" class="centent" @click="openCurrent(1)">
<img :src="currentItem.path" alt="" class="centent" @click="openCurrent(1)">
</div>
<div class="clothes_detail_item clothes_detail_item_print">
<div class="clothes_item_header">
@@ -58,7 +59,10 @@
<div>Current Print</div>
<i class="fi fi-rr-edit"></i>
</div>
<i class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
<div class="centent_div" v-if="currentItem?.printObject?.path && currentItem?.printObject?.path != 'none'" @click="openCurrent(2)">
<img src="" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
</div>
<div class="clothes_detail_item clothes_detail_item_color">
<div class="clothes_item_header">
@@ -68,20 +72,17 @@
</div>
<div class="img_block_item centent" @click="openCurrent(3)">
<div class="color_item">
<div class="color_content" :style="{background:`#6c6cac`}"></div>
<div class="color_content" :style="{background:`rgba(${currentItem.color?.r},${currentItem.color?.g},${currentItem.color?.b},${currentItem.color?.a?currentItem.color.a:1})`}"></div>
<div class="color_content_body">
<div class="color_des">222</div>
<div class="color_des">111</div>
<div class="color_des">{{currentItem.color?.tcx}}</div>
<div class="color_des">{{currentItem.color?.name}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail_modal_right_bottom">
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
<div class="clothes_detail_item subitOkPreviewBtn">
Submit
</div>
</div>
</div>
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
@@ -93,24 +94,16 @@
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
</div>
</div>
<div class="design_detail_perview" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem ref="setDesignItem"></setDesignItem>
</div>
<div class="design_detail_perview design_detail_perview_second" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
</div>
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
<div class="img_item_hover">
<div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
</div>
</a-modal>
<ElementReplace ref="ElementReplace"></ElementReplace>
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
@@ -118,23 +111,28 @@
</template>
<script lang="ts">
import { defineComponent,computed,ref } from 'vue'
import { defineComponent,computed,ref,provide } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
export default defineComponent({
components:{
ElementReplace,
AccessoryReplace,
Draggable,
DesignDetailAlter
DesignDetailAlter,
setDesignItem,
},
setup() {
const store = useStore();
let designItemDetail :any = computed(()=>{return store.state.DesignDetailModule.designItemDetail})
let designItemDetail :any = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let parentData:any = ref({
design:{},
index:0,
@@ -142,44 +140,52 @@ export default defineComponent({
type:'',
})//父组件传过来的数据
let others:any = ref({
left:200+'px',
top:100+'px',
})
let currentItem:any = ref({})//点击上衣或者下衣
let current:any = ref({})//点击上衣或者下衣
provide('current',current)
return{
designItemDetail,
store,
parentData,
others,
currentItem,
current,
}
},
data(){
return{
loadingShow:false,
loadingShow:false,//加载中
designDetailShow:true,
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
imgListr:[
{
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,
},
],
imgDesignImg:true,
designOrder:false,
}
},
mounted(){
let url = Https.httpUrls.getDesignDetail + `?designItemId=33130&designPythonOutfitId=32929`
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
console.log(rv);
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
},
methods:{
openCurrent(num: Number) {
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.init(num)
if(num ==2 ){
}
},
@@ -187,9 +193,12 @@ export default defineComponent({
closeModal(){
if(this.designShowPrview == 1){
this.designDetailShow = false
}else if(this.designShowPrview == 2){
this.designShowPrview = this.designShowPrview - 1
}else if(this.designShowPrview == 3){
this.designOrder = false
this.currentItem = {}
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
}else{
this.designShowPrview = 1
}
},
@@ -239,71 +248,52 @@ export default defineComponent({
},
//显示图片详情
showDesignImgDetail(){
if(this.generateHighDesignImg){
this.designShowPrview = 3
}else{
this.designShowPrview = 2
}
},
showDesignImgDetail(num:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
//生成高级图片
generateHighDesign(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
(rv: any) => {
this.generateHighDesignImg = rv
this.loadingShow = false
this.designShowPrview = 3
}
).catch(rv=>{
this.loadingShow = false
})
},
this.designShowPrview = num
let setDesignItem:any = this.$refs.setDesignItem
console.log(setDesignItem);
//删除生成的真人图
deleteGeneratePic(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
(rv: any) => {
this.loadingShow = false
this.generateHighDesignImg = ''
this.designShowPrview = 2
}
).catch(rv=>{
this.loadingShow = false
})
if(this.designShowPrview == 3){
setDesignItem.init()
}
// this.others = designItemDetail.others
// if(this.generateHighDesignImg){
// this.designShowPrview = 3
// }else{
// this.designShowPrview = 2
// }
},
//图片按下样子
mousedownDesignImg(){
this.imgDesignImg = false
},
//图片抬起样子
mouseupDesignImg(){
this.imgDesignImg = true
},
//元素替换
clothesDetail(clothes:any, index:number){
let elementReplace:any = this.$refs.ElementReplace
let data ={
clothes:clothes,
index:index,
}
elementReplace.showelementReplaceModal(data)
if(this.currentItem?.id == clothes.id){
return
}
this.designOrder = true
this.current = JSON.parse(JSON.stringify(clothes))
this.currentItem = clothes
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
// let elementReplace:any = this.$refs.ElementReplace
// let data ={
// clothes:clothes,
// index:index,
// }
// elementReplace.showelementReplaceModal(data)
},
othersDetail(others:any, index:number){
let accessoryReplace:any = this.$refs.AccessoryReplace
let data ={
others:others,
index:index,
}
accessoryReplace.showAccessoryReplaceModal(data)
},
//重新设计
redesignItem(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -339,23 +329,12 @@ export default defineComponent({
<style lang="less">
.design_detail_modal_component{
color: #000;
max-width: 1150px ;
.design_title_text{
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
margin-bottom: 2rem;
.design_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
max-width: 1440px ;
.ant-modal-content{
border-radius: 10px;
overflow: hidden;
// overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
@@ -365,6 +344,7 @@ export default defineComponent({
// height: calc(65vh - 6.4rem);
height: 65rem;
display: flex;
overflow-y: hidden;
flex-direction: column;
}
}
@@ -381,28 +361,7 @@ export default defineComponent({
}
.design_closeIcon{
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
.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);
}
}
.turn_button{
width: 3.6rem;
@@ -436,6 +395,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
width: 100%;
overflow: hidden;
// padding: 1.5rem 1rem 2.5rem;
box-sizing: border-box;
.detail_modal_body_img{
@@ -447,6 +407,14 @@ export default defineComponent({
justify-content: center;
align-items: center;
position: relative;
flex-direction: column;
>div{
height: 50%;
.clothes_item_img_block{
display: flex;
}
}
.detial_img{
max-width: 100%;
max-height: 100%;
@@ -454,6 +422,8 @@ export default defineComponent({
div{
i{
position: absolute;
cursor: pointer;
zoom: 1.2;
&.fi-bs-expand-arrows-alt{
top: 0;
left: 0;
@@ -473,14 +443,18 @@ export default defineComponent({
.detail_modal_body_category{
width: 17%;
height: 100%;
position: relative;
.detail_modal_right_top{
width: 100%;
height: calc(100% - 3.9rem);
background: #fff;
overflow-y: auto;
.clothes_detail_item{
.centent_div{
display: flex;
justify-content: space-between;
}
.centent{
cursor: pointer;
@@ -510,13 +484,21 @@ export default defineComponent({
width: 10rem;
height: 10rem;
}
&.clothes_detail_item_apparel{
img{
max-height: 100%;
}
}
.color_item{
display: inline-block;
vertical-align: top;
border: 1px solid #ebe9e9;
.color_content{
width: 6rem;
width: 8rem;
height: 4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.color_content_body{
.color_des{
@@ -537,35 +519,10 @@ export default defineComponent({
margin: 1rem 0;
}
}
}
}
.detail_modal_right_bottom{
position: relative;
.detail_page_num{
position: absolute;
top: 2rem;
left: 12.4rem;
font-size: 1.8rem;
font-family: Roboto;
font-weight: 400;
color: #000000;
}
.detail_redesign_button{
position: absolute;
top: 1.4rem;
right: 0;
padding: 0 1.8rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
&.subitOkPreviewBtn{
position: relative;
margin-top: 2rem;
}
}
}
}
@@ -628,7 +585,6 @@ export default defineComponent({
.design_detail_perview{
width: 100%;
height: 100%;
padding: 0.7rem 0 0.6rem;
&.design_detail_perview_second{
width: 100%;

609
src/component/Detail/DesignDetailAlter.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="detail_modal_body_select">
<div v-show="type_ == 1 && select == true">
<div v-show="(type_ == 1 || type_ == 2) && select == true">
<div class="detail_uploadLibrary">
<div class="switch_type_list">
<div
@@ -18,40 +18,57 @@
<span>Library</span>
</div>
</div>
<!-- <div v-show="openClick == 1">
<div v-show="openClick == 1" class="moodboard_body">
<div v-show="openClick == 2" class="detail_Library">
<div class="content_search_block">
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
</div>
</div>
<div v-show="openClick == 1" class="detail_Upload_item">
<div 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"
v-for="(file, index) in uploadList"
:key="file"
@click.stop="selectImgItem(file)"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="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" />
<img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ current.type }}
</div>
</div>
</div>
<div
class="delete_file_block"
@click="deleteFile(file)"
@click.stop="deleteFile(index)"
>
Delete
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="moodboarList.length != 8"
v-show="uploadList.length != 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
@@ -60,34 +77,40 @@
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="fileList"
v-model:file-list="uploadList"
:before-upload="beforeUpload"
multiple
:maxCount="8 - moodboarList.length+fileList.length"
:maxCount="8 - uploadList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
@change="(file) => upFileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show=" moodboarList.length != 8"
v-show="uploadList.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>
</div> -->
<div v-show="openClick == 2">
</div>
</div>
</div>
<div v-show="type_ == 2 && select == true">
1111111111111111111111111
<div v-show="openClick == 2" class="detail_Library_item">
<div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
</div>
</div>
</div>
<div class="no_data_block loading_block" v-show="isShowLoading">
<a-spin size="large"></a-spin>
</div>
</div>
</div>
<div v-show="type_ == 3 && select == true">
<div class="detail_color">
<div class="right_content_line">
@@ -179,9 +202,6 @@
<span class="icon iconfont icon-huoquduixiang"></span>
<span class="get_color_des"></span>
</div>
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
<img src="#" :title="pantongName">
</div>
</div>
</div>
</div>
@@ -191,7 +211,7 @@
<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
</template>
<script>
import { defineComponent,computed,ref, h ,nextTick } from 'vue'
import { defineComponent,computed,ref, h ,nextTick ,inject,provide } from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
@@ -200,7 +220,7 @@ import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
export default defineComponent({
props: ["msg"],
components:{
@@ -210,11 +230,39 @@ export default defineComponent({
const store = useStore();
let type_ = ref(1);
let select = ref(false);
let parentData = ref({
})//父组件传过来的数据
let current = inject('current')//父组件传过来的数据
let openClick = ref(1);
let searchPictureName = ref('')
//模型印花
let disignTypeList = [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
]
let isShowLoading = ref(false)
let clothesList = ref([])
let uploadList = ref([])
let apparelList = ref([])
let printList = ref([])
let selectCode = ref('Sketchboard')
//颜色
let selectColor = ref({
rgba:{},
@@ -223,8 +271,17 @@ export default defineComponent({
})
return{
store,
parentData,
current,
openClick,
searchPictureName,
disignTypeList,
isShowLoading,
clothesList,
uploadList,
apparelList,
printList,
selectCode,
type_,
select,
selectColor,
@@ -235,12 +292,30 @@ export default defineComponent({
selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
// console.log(DesignDetailEnd.selectIndex);
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
}
},
computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){
return (selectColor)=>{
@@ -250,14 +325,32 @@ export default defineComponent({
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
}
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
}
return data
}
},
},
data(){
return{
token: "",
uploadUrl:'',
upload: {
isPin: 0,
level1Type: 'Sketchboard',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
@@ -278,26 +371,187 @@ export default defineComponent({
},
spin: true,
}),
getPantongNameTime:true
}
},
mounted () {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
let dropperDom = document.getElementsByClassName('vc-sketch-color-wrap')[0]
dropperDom.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.error("Your browser does not support it")
}
})
},
methods:{
//点击判断
init(num){
this.type_ = num
this.select = true
let arr = this.current.color
// if(!arr[3]){
// arr[3] = 1
// }
this.selectColor = {
rgba:{
r:108,
g:108,
b:172,
a:1
r:Number(arr.r),
g:Number(arr.g),
b:Number(arr.g),
a:Number(arr.a?arr.a:1),
},
hex:'#6c6cac'
hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
}
console.log(this.selectColor);
this.uploadList = []
if (num == 1) {
this.selectCode = 'Sketchboard'
this.upload.level1Type = 'Sketchboard'
this.uploadList = this.apparelList
}else if (num == 2){
this.selectCode = 'Printboard'
this.upload.level1Type = 'Printboard'
this.uploadList = this.printList
}
if(num == 1 || num == 2){
this.clothesList = []
this.getLibraryList()
}
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.init(num)
},
deleteFile(num){
this.uploadList.splice(num, 1)
},
upFileUploadChange(data) {
let file = data.file;
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
file.id = res.data.id;
file.url = res.data.url;
file.resData = res.data;
file.designType = res.data.designType
file.category = this.current;
console.log(file);
let fileList = this.uploadList.filter(
(v) => v.status === "done"
);
if (this.uploadList.length >= 8) {
message.error("You can select up to 8 images");
} else {
// this.store.commit("setSketchboardFile", fileList);
this.uploadList = fileList
// this.store.commit("clearMoodTemplateId");
if(this.selectCode == 'Sketchboard'){
this.apparelList = this.uploadList
}else{
this.printList = this.uploadList
}
}
} else if (file.status === "error") {
let index = -1;
this.uploadList.forEach((ele, index1) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.uploadList.splice(index, 1);
}
message.error(file.name + "upload failed");
}
},
//关闭
terminate(){
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.selectIndex = 0
DesignDetailEnd.type_ = 0
},
//切换整体衣服
changePlace(){
this.uploadList = []
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.type_ = 0
this.uploadList = []
this.apparelList = []
this.printList = []
this.select = false
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
DesignDetailEnd.selectIndex = 0
},
// this.getLibraryList('Moodboard')
// this.getLibraryList('Printboard')
showFileCategory(file) {
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file, cate,list) {
file.category = cate.value;
for (let item of list) {
item.categoryShow = false;
}
},
hiddenFileCategory() {
for (let item of this.clothesList) {
item.categoryShow = false;
}
document.removeEventListener("click", this.hiddenFileCategory);
},
selectImgItem(imgData){
if(this.selectCode == 'Sketchboard'){
this.current.id_ = imgData.id
this.current.path = imgData.url
}else{
console.log(imgData,this.current.printObject);
this.current.printObject.url = imgData.url
this.current.printObject.id = imgData.id
}
// imgData.type_ = this.type_
// this.store.commit("addGenerateMaterialFils", imgData);
},
//请求我的印花&&模型
getLibraryList(){
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
page:1,
pictureName:this.searchPictureName,
size:10,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
this.clothesList = rv.content
this.isShowLoading = false
}
).catch((res)=>{
this.isShowLoading = false
});
},
//衣服
open(num) {
this.openClick = num;
@@ -306,6 +560,7 @@ export default defineComponent({
},
//印花
@@ -322,15 +577,6 @@ export default defineComponent({
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
//清除当前的颜色
clearCurrentColor(){
this.selectColor = {
rgba:{}
}
this.colorFileList = []
this.pantongName = ''
this.pantongNameList = []
this.tcxColor = ''
},
colorDeleteFile(index){
this.colorFileList.splice(index, 1)
this.selectColorList = []
@@ -340,9 +586,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;
},
//通过HSV获取颜色
@@ -373,40 +624,34 @@ export default defineComponent({
}
hsvList.push(obj)
})
// let data = []
// Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
// if(rv){
// this.pantongName = rv.name
// console.log(rv);
// }
// })
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
(rv) => {
if(rv){
rv.forEach(element => {
this.pantongNameList.push(element.name)
});
console.log(rv);
}
}
).catch(res=>{
});
},
//通过tcx获取颜色
getTcxColor(){
if(!this.tcxColor){
return
}
let DesignDetailEnd = this.$refs.DesignDetailEnd
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}
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
this.pantongName = rv.name
let colorList =this.colorList.filter((v) => Object.keys(v).length)
let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
this.setColorboardList(colorList)
this.getColorBg = true
}else{
@@ -414,16 +659,43 @@ export default defineComponent({
}
})
},
//查询颜色的潘通值和txc
getPantongName(v) {
if(!v.r){
return
}
let color = [v.r, v.g, v.b];
let hsv = rgbToHsv(color);
let data = [{
h: hsv[0],
s: hsv[1],
v: hsv[2],
}]
return new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv) => {
if (rv) {
this.selectColor.tcx = rv[0].tcx
this.selectColor.name = rv[0].name
resolve();
}
})
.catch((res) => {
reject();
});
});
},
setColorboardList(colorList){
let newColorList = colorList.map((v)=>{
let data = {
id:'',
name:'',
rgbValue:v
}
return data
})
// this.store.commit('setColorboardList',newColorList)
},
fileUploadChange(data){
@@ -450,8 +722,7 @@ export default defineComponent({
let colorHex = this.rgbaToHex(color)
let selectColorList = [];
let selectColor = colorThief.getPalette(domImg,7)
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
selectColor = selectColor.join('&').split("&")
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
@@ -479,6 +750,8 @@ export default defineComponent({
width: 20%;
>div{
height: 100%;
display: flex;
flex-direction: column;
}
i{
font-size: 1.8rem;
@@ -486,6 +759,8 @@ export default defineComponent({
}
.detail_uploadLibrary{
.switch_type_list {
margin-bottom: 1rem;
margin-top: -1rem;
display: flex;
align-items: center;
position: relative;
@@ -537,7 +812,185 @@ export default defineComponent({
}
}
}
.detail_Library{
.content_search_block{
display: flex;
margin-bottom: 1rem;
.search_input{
width: 15rem;
padding-left: 1.5rem;
// height: 4rem;
// line-height: 3.8rem;
// background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
// font-size: 1.6rem;
font-size: 1.2rem;
font-weight: 400;
height: 3rem;
&::placeholder {
color: #C2C2C2;
}
}
.search_icon_block{
width: 5rem;
height: 3rem;
line-height: 3rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
color: #FFFFFF;
}
}
}
}
.detail_Library_item,.detail_Upload_item{
width: 100%;
// height: calc(100% - 19rem);
flex: 1;
overflow: hidden;
position: relative;
&.generate::-webkit-scrollbar{display: none;}
>div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
overflow-X: hidden;
height: 100%;
&.scroll_style::-webkit-scrollbar{display: none;}
}
.content_img_item{
display: inline-block;
vertical-align: top;
// padding: 0 1.4rem;
// margin-bottom: 2.8rem;
margin-bottom: 2rem;
padding: 0;
height: 9rem;
&.active{
margin-bottom: 2rem;
.pin_block{
display: block;
}
}
.pin_block{
display: none;
}
.content_img_item_block{
// border: 0.1rem solid transparent;
width: 9rem;
height: 9rem;
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;
line-height: 3.5rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.4rem;
color: #030303;
}
}
.upload_img_body{
width: 100%;
.upload_item{
justify-content: space-between;
}
}
.moodboard_body{
.upload_file_item{
margin: 0;
margin-bottom: 2rem;
width: 9rem;
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.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%;
object-fit: cover;
}
.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;
}
}
}
}
}
.detail_color{
// height: calc(100% - 5.4rem);
height: 100%;
@@ -904,21 +1357,7 @@ export default defineComponent({
vertical-align: middle;
}
}
.get_color_bg{
width: 18rem;
height: 18rem;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 1.5rem;
img{
opacity: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
}
}
}

219
src/component/Detail/DesignDetailEnd.vue
View File

@@ -14,7 +14,16 @@
<span>New Print</span>
</div>
<div class="print_left">
<img src="" alt="">
<!-- <img :src="current.path" :title="current.type"> -->
<img :src="current?.printObject?.url" v-if="current?.printObject?.url && current?.printObject?.url != 'none'">
<div src="@/assets/images/homePage/null_img.png" v-else ></div>
<div
v-show="current?.printObject?.url && current?.printObject?.url != 'none'"
class="delete_file_block"
@click="deleteFile"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
<div>
@@ -26,14 +35,14 @@
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !overalSingle }"
:class="{ active: !overallSingle }"
>
Overal
</div>
<a-switch v-model:checked="overalSingle" />
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
<div
class="habit_Overal_Single_text"
:class="{ active: overalSingle }"
:class="{ active: overallSingle }"
>
Single
</div>
@@ -46,17 +55,15 @@
>
</a-slider>
</div>
</div>
</div>
</div>
<div class="result_apparel_print_img">
<img v-show="type_==1" class="result_appare_img" src="" alt="">
<img v-show="type_==2" class="result_print_img" src="" alt="">
<img v-show="type_==1" class="result_appare_img" :src="current.path" :title="current.type">
<img v-show="type_==2" class="result_print_img" :src="current.path" :title="current.type" @click="setPrint">
</div>
</div>
<div v-show="type_ == 2"></div>
<div v-show="type_ == 3">
<div class="result_color upload_title">
<i class="color_edit fi fi-bs-comments"></i>
@@ -64,53 +71,62 @@
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> -->
<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
</div>
<div class="color_content_body">
<div class="color_des">22</div>
<div class="color_des">111</div>
<div class="color_des">{{color.tcx}}</div>
<div class="color_des">{{ color.name }}</div>
</div>
</div>
</div>
</div>
</div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
<div v-show="type_ == 2" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
</div>
</template>
<script>
import { defineComponent,computed,ref, h } from 'vue'
import { defineComponent,computed,ref, h ,inject} from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { LoadingOutlined } from '@ant-design/icons-vue';
import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignPrintOperation from './DesignPrintOperation.vue';
import { message,Upload} from 'ant-design-vue';
export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,
Draggable,Sketch,DesignPrintOperation
},
setup(prop) {
const store = useStore();
let type_ = ref(0);
let current = inject('current')//父组件传过来的数据
//印花
let overalSingle = ref()
let systemDesignerPercentage = ref(30)
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
//颜色
let colorList = ref([{},{},{},{},{},{},{},{}])
//加载中
let loadingShow = ref(false)
return{
overalSingle,
systemDesignerPercentage,
store,
current,
type_,
overallSingle,
systemDesignerPercentage,
colorList,
loadingShow,
}
},
data(){
@@ -127,40 +143,126 @@ export default defineComponent({
init(num){
this.type_ = num
this.colorList[this.selectIndex] = this.$parent.selectColor
this.overallSingle = this.current.printObject.ifSingle
this.systemDesignerPercentage = this.current.printObject.scale*100
console.log(this.current);
},
//模型
//印花
systemDesigner(num) {
console.log(num);
this.current.printObject.scale = num
},
setOveralSingle(){
this.current.printObject.ifSingle = this.overallSingle
},
formatter(value) {
return `${value}%`;
},
setPrint(){
if(this.current.printObject.url && this.current?.printObject?.url != 'none'){
let DesignPrintOperation = this.$refs.DesignPrintOperation
DesignPrintOperation.init()
}else{
message.error('Please select print');
}
},
deleteFile(){
this.current.printObject = {}
},
//颜色
selectColorItem(index,color){
let hex
let parent = this.$parent
this.selectIndex = index
this.$parent.selectIndex = index
if(this.$parent.selectColor.rgba.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
return
}
if(color.rgba?.r){
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a])
}else{
hex = '#FFFFFF'
}
this.selectIndex = index
this.$parent.selectIndex = index
this.$parent.selectColor = color?.rgba + ''? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{},hex:''}
this.$parent.selectColor = color?.rgba?.r != '' ? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {}
this.$parent.tcxColor = ''
this.$parent.pantongName = ''
},
setSelectColorItem(color){
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a}`
this.current.color = string
designItemDetail.clothes.forEach((element,index) => {
if(element.id == this.current.id){
designItemDetail.clothes[index] = this.current
}
});
},
//提交
setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
console.log(this.current,designItemDetail);
if(this.type_ == 1){
designItemDetail.clothes[index].id = this.current.id_
designItemDetail.clothes[index].path = this.current.path
return
}else if(this.type_ == 2){
this.setPrint()
return
}else if(this.type_ == 3){
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
designItemDetail.clothes[index].color = color
}
let priority = designItemDetail.clothes.map((v)=>{
return v.type
})
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// this.parentData.design.designItemUrl = rv.designItemUrl
// this.$emit('finishRedesign',this.parentData)
// this.closeModal()
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
this.loadingShow = false
// this.closeModal()
console.log(rv);
}
).catch(res=>{
this.loadingShow = false
});
}
}
})
</script>
<style lang="less" scoped>
.detail_modal_body_result{
width: 26%;
position: relative;
i{
font-size: 1.8rem;
display: block;
}
.upload_title{
display: flex;
margin-bottom: 1rem;
@@ -180,16 +282,20 @@ export default defineComponent({
display: flex;
flex-direction: column;
.result_apparel_print_img{
position: relative;
flex: 1;
img{
width: 100%;
width: auto;
height: 100%;
max-height: 35rem;
margin-top: 2rem;
}
.result_print_img{
transform: scale(.7);
transform: scale(.85);
transform-origin: right top;
position: absolute;
right: 0;
cursor: pointer;
}
}
}
@@ -198,11 +304,33 @@ export default defineComponent({
display: flex;
justify-content: space-between;
.print_left{
position: relative;
img{
width: 8rem;
width: auto;
height: 8rem;
margin: auto;
display: block;
}
.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;
}
}
.print_right{
.habit_Overal_Single {
@@ -211,7 +339,6 @@ export default defineComponent({
justify-content: center;
// margin: 2rem 0;
transform: scale(.8);
// margin: 3rem 0;
.habit_Overal_Single_text {
font-weight: 600;
@@ -248,13 +375,6 @@ export default defineComponent({
:deep(.ant-slider-handle:hover) {
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
// .habit_System_Designer_text_max {
// display: flex;
// justify-content: space-between;
// .habit_System_Designer_text {
// }
// }
}
}
}
@@ -273,14 +393,21 @@ export default defineComponent({
position: relative;
cursor: pointer;
border: 0.1rem solid #DCDCEC;
height: 8.5rem;
width: 7rem;
box-sizing: border-box;
.color_content{
width: 7rem;
width: 100%;
height: 4rem;
}
.color_content_body{
.color_des{
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}
}
.select_upload_color{
@@ -292,8 +419,10 @@ export default defineComponent({
}
}
}
.subitOkPreviewBtn{
bottom: 4rem;
position: absolute;
}
}

530
src/component/Detail/DesignDetailOld.vue
View File

@@ -1,530 +0,0 @@
<template>
<div>
<a-modal class="design_detail_modal_component"
v-model:visible="designDetailShow"
:footer="null"
title="Mailbox binding"
width="80%"
:maskClosable="false"
:centered="true"
>
<template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template>
<div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
<div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
<div class="detail_modal_body_left" @click="showDesignImgDetail()">
<img class="detial_img" :src="designItemDetail.designItemUrl">
</div>
<div class="detail_modal_body_right">
<div class="detail_modal_right_top scroll_style">
<div class="clothes_detail_item">
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Apparel</div>
<div class="clothes_item_content">
<!-- 拖拽功能 -->
<Draggable :list="designItemDetail.clothes" item-key="id" :animation="100">
<template #item="{ element,index }">
<div class="clothes_item_img_block" @click="clothesDetail(element,index)">
<img class="clothes_item_img" :src="element.path">
</div>
</template>
</Draggable>
</div>
</div>
<div class="clothes_detail_item" v-show="designItemDetail.others && designItemDetail.others.length">
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Others</div>
<div class="clothes_item_content others_clothes_item_content">
<div class="clothes_item_img_block" v-for="(element,index) in designItemDetail.others" :key="element.path" @click="othersDetail(element,index)">
<img class="clothes_item_img" :src="element.path">
</div>
</div>
</div>
</div>
<div class="detail_modal_right_bottom">
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
</div>
</div>
</div>
<div class="design_detail_perview" v-show="designShowPrview == 2">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
</div>
</div>
<div class="design_detail_perview design_detail_perview_second" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
</div>
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
<div class="img_item_hover">
<div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
</div>
</a-modal>
<ElementReplace ref="ElementReplace"></ElementReplace>
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
export default defineComponent({
components:{
ElementReplace,
AccessoryReplace,
Draggable,
},
setup() {
const store = useStore();
let designItemDetail :any = computed(()=>{return store.state.DesignDetailModule.designItemDetail})
let parentData:any = ref({
design:{},
index:0,
collectionList:[],
type:'',
})//父组件传过来的数据
return{
designItemDetail,
store,
parentData
}
},
data(){
return{
loadingShow:false,
designDetailShow:false,
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
}
},
methods:{
closeModal(){
if(this.designShowPrview == 1){
this.designDetailShow = false
}else if(this.designShowPrview == 2){
this.designShowPrview = this.designShowPrview - 1
}else if(this.designShowPrview == 3){
this.designShowPrview = 1
}
},
showDesignDetailModal(data:any){
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
this.parentData = data
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
},
//切换上一张或下一张图的详情
changeDesignItem(type:string){
let {design,index,collectionList} = this.parentData
let newDesign = {}
let newIndex = 0
if(type === 'last'){
if(index>0){
newIndex = this.parentData.index - 1
}else{
newIndex = this.parentData.collectionList.length - 1
}
}else{
if(index < this.parentData.collectionList.length - 1){
newIndex = this.parentData.index + 1
}else{
newIndex = 0
}
}
newDesign = collectionList[newIndex]
let data = {
design:newDesign,
index:newIndex,
collectionList:collectionList
}
this.showDesignDetailModal(data)
},
//显示图片详情
showDesignImgDetail(){
if(this.generateHighDesignImg){
this.designShowPrview = 3
}else{
this.designShowPrview = 2
}
},
//生成高级图片
generateHighDesign(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
(rv: any) => {
this.generateHighDesignImg = rv
this.loadingShow = false
this.designShowPrview = 3
}
).catch(rv=>{
this.loadingShow = false
})
},
//删除生成的真人图
deleteGeneratePic(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
(rv: any) => {
this.loadingShow = false
this.generateHighDesignImg = ''
this.designShowPrview = 2
}
).catch(rv=>{
this.loadingShow = false
})
},
//元素替换
clothesDetail(clothes:any, index:number){
let elementReplace:any = this.$refs.ElementReplace
let data ={
clothes:clothes,
index:index,
}
elementReplace.showelementReplaceModal(data)
},
othersDetail(others:any, index:number){
let accessoryReplace:any = this.$refs.AccessoryReplace
let data ={
others:others,
index:index,
}
accessoryReplace.showAccessoryReplaceModal(data)
},
//重新设计
redesignItem(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
delete designItemDetail.designItemUrl
let priority = designItemDetail.clothes.map((v:any)=>{
return v.type
})
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv: any) => {
this.parentData.design.designItemUrl = rv.designItemUrl
this.$emit('finishRedesign',this.parentData)
this.closeModal()
this.loadingShow = false
this.closeModal()
}
).catch(res=>{
this.loadingShow = false
});
}
}
})
</script>
<style lang="less">
.design_detail_modal_component{
color: #000;
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
background: #F2F3FB;
height: 80vh;
overflow-y: hidden;
padding: 0;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.turn_button{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
position: absolute;
top: calc(50% - 1.8rem);
cursor: pointer;
line-height: 3.6rem;
text-align: center;
&.turn_left_button{
left: -8rem;
}
&.turn_right_button{
right: -8rem;
}
.icon_turn{
font-size: 2.4rem;
color: #ffffff;
}
}
.design_detail_modal_body{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 1.5rem 1rem 2.5rem;
box-sizing: border-box;
.detail_modal_body_left{
width: 43.3rem;
height: 100%;
background: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
.detial_img{
max-width: 100%;
max-height: 100%;
}
}
.detail_modal_body_right{
width: calc(100% - 44rem);
height: 100%;
.detail_modal_right_top{
width: 100%;
height: calc(100% - 3.9rem);
background: #fff;
overflow-y: auto;
.clothes_detail_item{
padding-left: 1.5rem;
.clothes_item_header{
height: 6.4rem;
display: flex;
align-items: center;
font-size: 18px;
color: #000000;
.icon-dangqianweizhi{
font-size: 1.8rem;
color: #000000;
margin-right: 1rem;
}
}
.clothes_item_content{
padding:0 0.5rem 2.3rem;
border-bottom: 0.1rem solid #F2F3FB;
&.others_clothes_item_content{
border-bottom:none
}
.clothes_item_img_block{
width: 20.5rem;
height: 20.5rem;
border: 0.1rem solid #F5F5F5;
display: inline-block;
text-align: center;
line-height: 21.3rem;
margin-right: 1rem;
margin-bottom: 1rem;
.clothes_item_img{
max-width: 100%;
max-height: 100%;
}
}
}
}
}
.detail_modal_right_bottom{
position: relative;
.detail_page_num{
position: absolute;
top: 2rem;
left: 12.4rem;
font-size: 1.8rem;
font-family: Roboto;
font-weight: 400;
color: #000000;
}
.detail_redesign_button{
position: absolute;
top: 1.4rem;
right: 0;
padding: 0 1.8rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
}
}
}
}
.design_detail_perview{
width: 100%;
height: 100%;
padding: 0.7rem 0 0.6rem;
&.design_detail_perview_second{
width: 100%;
height: 100%;
padding: 0.7rem 9.1rem 0.6rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.design_detail_perview_content{
width: 46.2rem;
height: 100%;
background: #fff;
position: relative;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
.perview_img{
max-width: 100%;
max-height: 100%;
}
.generate_button{
position: absolute;
top: 0;
right: -20.2rem;
padding: 0 1.5rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
}
&:hover .img_item_hover{
display: block;
}
.img_item_hover{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
background: rgba(0,0,0,0.4);
display: none;
.img_operate_block{
width: 3.6rem;
height: 3.6rem;
background: rgba(0,0,0,0.6);
border-radius: 50%;
position: absolute;
right: 2.2rem;
text-align: center;
line-height: 3.6rem;
cursor: pointer;
&.delete_img_block{
top: 2rem;
}
.operate_icon{
font-size: 1.8rem;
color: #fff;
}
}
}
}
}
}
</style>

848
src/component/Detail/DesignPrintOperation.vue Normal file
View File

@@ -0,0 +1,848 @@
<template>
<div>
<a-modal
class="designOpenrtion_modal"
v-model:visible="designOpenrtion"
:footer="null"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="false"
>
<div class="designOpenrtion_content">
<div class="design_title_text">
<div>Placement</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="designOpenrtion_open">
<!-- -->
<div class="print_right">
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
Overal
</div>
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
<div
class="habit_Overal_Single_text"
:class="{ active: overallSingle }"
>
Single
</div>
</div>
<div class="habit_System_Designer">
<a-slider id="system_silder"
v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
>
</a-slider>
</div>
<div v-show="current.printObject.ifSingle" @click="random" class="button_second">Random</div>
<div v-show="current.printObject.ifSingle" class="print_input">
<input class="search_input" placeholder="Please input" type="Number" v-model="printAmount" @input="setprintAmount">
</div>
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-show="current.printObject.ifSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
<img :src="item.url" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_overall" v-show="!current.printObject.ifSingle">
<img :src="designOpenrtionList[0].url">
</div>
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">preview</div>
</div>
</div>
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask" :style="sketch">
<div class="designOpenrtion_print">
<div
v-for="item,index in designOpenrtionList"
:key="item"
:style="[printStyleList[index].style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.url" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
</div>
</div>
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<div class="designOpenrtion_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</div>
</template>
<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup(prop) {
let designOpenrtion = ref(false);
let designOpenrtionList = ref([])
let current = inject('current')//父组件传过来的数据
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
let printAmount = ref(1)//印花数量
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([{
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
}]);
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let print = ref({
width:'',
height:''
})
let sketch = ref({
width:'',
height:''
})
let loadingShow = ref(false)
return {
designOpenrtion,
designOpenrtionList,
overallSingle,
systemDesignerPercentage,
current,
printAmount,
printZIndex,
printStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
print,
sketch,
loadingShow,
};
},
data() {
return {
store: useStore(),
};
},
directives:{
//操作旋转
rotote:{
mounted(el,value){
let mouse = true;
let angle = 0
let num = 1
let x = 0
let y = 0
num = value.value[1].scale
angle = value.value[1].rotateZ
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.value[0]]
// 添加鼠标按下事件监听器
el.style.transform = "rotateZ("+ angle + "deg)"
el.addEventListener('mousedown', (e) => {
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
e.stopPropagation()
mouse = true;
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
document.addEventListener('mousemove', (e) => {
if (mouse) {
let X = eX
let Y = eY
let x = e.clientX - X
let y = Y - e.clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
el.style.transform = "rotateZ("+ angle + "deg)"
}
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
});
});
//缩放
// let timeSwitch = true
// el.parentNode.addEventListener('mousemove', (e) => {
// el.parentNode.addEventListener('mousewheel',(e) => {
// if(timeSwitch){
// timeSwitch = false
// if(e.deltaY > 0){
// if(num <= 1){
// num -= 0.05
// }else{
// num -= 0.1
// }
// }else{
// //放大
// if(num <= 1){
// num += 0.05
// }else{
// num += 0.1
// }
// }
// if(num >= 3){
// num = 3
// }else if (num < .2){
// num = .2
// }
// setTimeout(() => {
// timeSwitch = true
// }, 100);
// elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
// console.log(num);
// }
// });
// });
}
},
},
methods: {
init(){
let DesignPrintOperationParent = this.$parent
this.designOpenrtion = true
this.clearModal()
this.designOpenrtionList.push(this.current.printObject)
this.overallSingle = DesignPrintOperationParent.overallSingle
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
}
let print = new Image
print.src = this.current.printObject.url
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
this.printStyleList[0].style.width = print.width+'px'
this.printStyleList[0].style.height = print.height+'px'
}
},
systemDesigner(num) {
this.current.printObject.scale = num
},
setOveralSingle(){
},
formatter(value) {
return `${value}%`;
},
setOveralSingle(){
this.current.printObject.ifSingle = this.overallSingle
if (!this.current.printObject.ifSingle) {
this.printAmount = 1
this.setprintAmount()
}
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
},
//设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
this.printStyleList[this.imgDomIndex].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
document.addEventListener("mousemove", this.sizeMousemove);
},
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
}
},
sizeMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let num = width/height
let w,h
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
top:this.imgDom.offsetTop+'px',
height:this.imgDom.offsetHeight+'px',
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
},
mouseup(e) {
document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove);
},
setprintAmount(){
if(this.printAmount < 1){
this.printAmount = 1
return
}
if(this.printAmount > 10){
this.printAmount = 10
return
}
let printTiemNum
if(this.printAmount>this.printStyleList.length){
let num = this.printAmount - this.printStyleList.length
for (let index = 0; index < num; index++) {
this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject)
}
}else{
let num = this.printStyleList.length - this.printAmount
this.designOpenrtionList.splice(this.printStyleList.length-num,num)
this.printStyleList.splice(this.printStyleList.length-num,num)
}
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
this.imgDomIndex = this.printStyleList.length-1
},
random(){
this.printStyleList.forEach((v,index)=>{
this.refetchTemplate(index)
})
},
//随机重置图片顺序
refetchTemplate(index) {
let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName('designOpenrtion_sketch')[0]
console.log(sketch.offsetHeight);
let x = sketch.width-Number(this.print.width.replace(/px/g,''))
let y = sketch.height-Number(this.print.height.replace(/px/g,''))
this.printStyleList[index]={
centers:{
left:0,
top:0,
},
style:{
left:Math.trunc(Math.random()*x)+1+"px",
top:Math.trunc(Math.random()*y)+1+"px",
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')*scale+'px',
height:this.print.height.replace(/px/g,'')*scale+'px',
zIndex:this.printZIndex++
},
transform:{
// scale:scale<.2?.2:scale,//0.2-3
rotateZ:rotateZ1-rotateZ2,
},
designOpenrtionBtn:false
}
},
setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
let priority = designItemDetail.clothes.map((v)=>{
return v.type
})
// let
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
// this.loadingShow = true
// Https.axiosPost(Https.httpUrls.designSingle, data).then(
// (rv) => {
// // this.parentData.design.designItemUrl = rv.designItemUrl
// // this.$emit('finishRedesign',this.parentData)
// // this.closeModal()
// let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
// console.log(designItemDetail);
// this.loadingShow = false
// // this.closeModal()
// console.log(rv);
// }
// ).catch(res=>{
// this.loadingShow = false
// });
},
clearModal(){
this.printAmount = 1//显示数量
this.designOpenrtion = true//modal页面关闭
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.designOpenrtionList = []
this.printStyleList.splice(1,this.printStyleList.length-1)
this.printStyleList[0] = {
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
}
},
closeModal(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let _this = this
Modal.confirm({
title: 'The above changes are not saved, being sure to continue? ',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
onOk() {
_this.designOpenrtion=false
}
});
},
},
});
</script>
<style lang="less">
.designOpenrtion_modal {
max-width: 1440px;
.ant-modal-body{
padding: 4rem 5rem 0rem!important;
// height: calc(65vh - 6.4rem);
height: 65rem;
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: 1rem;
overflow: hidden;
}
.designOpenrtion_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
display: flex;
flex-direction: column;
height: 100%;
.designOpenrtion_header {
position: relative;
height: 6.6rem;
width: 100%;
background: #F7F7F7;
.placement_modal_title{
position: absolute;
height: 100%;
line-height: 6.6rem;
left: 3.7rem;
top: 0;
font-size: 1.8rem;
color: #030303;
}
}
.designOpenrtion_open{
position: absolute;
top: 50%;
transform: translateY(-50%);
.print_right{
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
padding: 2rem 0;
width: 16rem;
border-radius: 1rem;
.habit_Overal_Single {
display: flex;
align-items: center;
justify-content: center;
// margin: 2rem 0;
transform: scale(.8);
// margin: 3rem 0;
.habit_Overal_Single_text {
font-weight: 600;
color: rgba(0, 0, 0, 0.5);
&.active {
color: rgba(0, 0, 0, 0.7);
// font-weight: 900;
transform: scale(1.2);
}
}
.ant-switch {
margin: 0 1rem;
background-color: #efefef;
}
.ant-switch-checked {
background-color: #000;
}
}
.habit_System_Designer {
margin-top: 4rem;
transform: scale(.8);
width: 100%;
.ant-slider-track,
.ant-slider-rail {
height: .6rem;
background-color: #e1e1e1;
border-radius: 0.5rem;
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
background-color: #2d2e76 !important;
border: none !important;
}
.ant-slider-handle:hover{
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
}
.button_second{
margin-top: 1rem;
}
.print_input{
margin-top: 1rem;
.search_input{
width: 9.85rem;
padding: 0 1.5rem;
border: 2px solid #000;
font-size: 1.2rem;
font-weight: 400;
height: 3rem;
border-radius: 1.5rem;
&::placeholder {
color: #C2C2C2;
}
}
}
.designOpenrtion_nav{
display: flex;
margin-top: 2rem;
flex-wrap: wrap;
width: 100%;
height: 10rem;
overflow-x: hidden;
justify-content: space-evenly;
&.designOpenrtion_nav::-webkit-scrollbar {
display: none;
}
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
.designOpenrtion_single{
width: 40%;
}
img{
width: 100%;
cursor: pointer;
}
.designOpenrtion_overall{
width: 80%;
}
}
}
}
.designOpenrtion_centent{
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
&.active{
flex-direction: row;
}
.designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
>img{
z-index: 2;
position: relative;
max-width: 100%;
max-height: 100%;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.designOpenrtion_print{
z-index: 1;
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designOpenrtion_btn{
z-index: 3;
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
li{
cursor: pointer;
// border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designOpenrtion_btn_top{
top: 0;
}
.designOpenrtion_btn_bottom{
top: 100%;
}
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designOpenrtion_btn_left{
left: 0;
}
.designOpenrtion_btn_right{
left: 100%;
}
.designOpenrtion_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designOpenrtion_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin: 1rem 0;
width: 10rem;
text-align: center;
position: initial;
transform: none;
}
}
}
</style>

523
src/component/Detail/habit.vue
View File

@@ -1,41 +1,51 @@
<template>
<div class="habit">
<div class="habit_button" @click="habitBtn" >
<div v-show="openType.habit" class="habit_mask"></div>
<div class="habit_button" @click.stop="setOpenType('habit')" >
Workspace
<i class="fi fi-bs-angle-down"></i>
</div>
<div class="habit_content" v-fade="habit">
<div class="habit_content" v-fade="openType.habit">
<div class="habit_title">
<h3 class="" @click="aaa()">Workspace Setting</h3>
<h3>Workspace Setting</h3>
<div class="habit_intro">adjust your workspace setting</div>
</div>
<div class="habit_type" trigger="['click']">
<a-dropdown placement="bottomRight">
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1"> 上衣 </a-menu-item>
<a-menu-item key="2"> 裤子 </a-menu-item>
</a-menu>
</template>
<div class="habit_type" trigger="['click']" >
<a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
<a-button>
<UserOutlined />
{{habitType.habitTypeone}}
{{workspaceItem.workSpaceName}}
<DownOutlined />
</a-button>
</a-dropdown>
<div class="habit_model_show habit_workspace_show" v-fade="openType.workspace">
<ul class="habit_model_list">
<li v-for="item,index in workspace.workspaceList">
<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.name }}</div>
<input v-show="item.putName" type="text" v-model="workspaceItemName">
<i @click.stop="putName(index,'put')" v-show="!item.putName" class="fi fi-rr-edit"></i>
<i @click.stop="putName(index,'affirm')" v-show="item.putName" class="fi fi-br-check"></i>
<i @click.stop="putName(index,'delete')" class="fi fi-rr-trash"></i>
</li>
<li @click="newWorkspace" class="newWorkspace">
<input v-show="openType.addWorkspace" type="text" v-model="workspaceItemName">
<i @click.stop="putName(-1,'affirm')" v-show="openType.addWorkspace" class="fi fi-br-check"></i>
<div v-show="!openType.addWorkspace">+</div>
</li>
</ul>
</div>
</div>
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !checked }"
:class="{ active: !workspaceItem.sexType }"
>
男
</div>
<a-switch v-model:checked="checked" />
<a-switch @change="setSex" v-model:checked="workspaceItem.sexType" />
<div
class="habit_Overal_Single_text"
:class="{ active: checked }"
:class="{ active: workspaceItem.sexType }"
>
女
</div>
@@ -43,36 +53,37 @@
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !checked }"
:class="{ active: !workspaceItem.overallSingle }"
>
Overal
</div>
<a-switch v-model:checked="checked" />
<a-switch @change="setOverall" v-model:checked="workspaceItem.overallSingle" />
<div
class="habit_Overal_Single_text"
:class="{ active: checked }"
:class="{ active: workspaceItem.overallSingle }"
>
Single
</div>
</div>
<div class="habit_habit_singleton" v-show="checked">
<a-dropdown >
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1"> 上衣 </a-menu-item>
<a-menu-item key="2"> 裤子 </a-menu-item>
</a-menu>
</template>
<div class="habit_habit_singleton" v-show="!workspaceItem.overallSingle">
<a-dropdown @click.stop="setOpenType('singleton')">
<a-button>
<UserOutlined />
{{ workspace.position }}
{{ workspaceItem.position }}
<DownOutlined />
</a-button>
</a-dropdown>
<div class="habit_model_show habit_singleton_show" v-fade="openType.singleton">
<ul class="habit_model_list">
<li v-for="item,index in singleTypeList">
<div @click.stop="setSingle(item.value)">{{ item.label }}</div>
</li>
</ul>
</div>
</div>
<div class="habit_System_Designer">
<a-slider id="system_silder"
v-model:value="workspace.systemDesignerPercentage"
v-model:value="workspaceItem.systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
>
@@ -85,7 +96,7 @@
<div class="habit_model">
<a-dropdown placement="bottomRight"
trigger="['click']"
@click="modelBtn"
@click.stop="setOpenType('model')"
>
<a-button>
<UserOutlined />
@@ -94,7 +105,7 @@
</a-button>
</a-dropdown>
</div>
<div id="modelShow" class="habit_model_show" v-fade="model">
<div id="modelShow" class="habit_model_show" v-fade="openType.model">
<div class="habit_btn">
<div class="model_current">
<div class="model_text">Current</div>
@@ -106,20 +117,20 @@
<div class="model_text">
<div
class="habit_System_Seleves_text"
:class="{ active: !checked }"
:class="{ active: systemSeleves }"
>
System
</div>
<a-switch v-model:checked="checked" />
<a-switch @change="setSystemSeleves" v-model:checked="systemSeleves" />
<div
class="habit_System_Seleves_text"
:class="{ active: checked }"
:class="{ active: !systemSeleves }"
>
Seleves
</div>
</div>
<div class="model_img">
<div v-for="(item,index) in checked?obj:obj2" :key="item.id">
<div v-for="(item,index) in systemSeleves?workspaceItem.system:workspaceItem.seleves" :key="item.id">
<img :src="item.url" alt="">
</div>
</div>
@@ -128,104 +139,192 @@
</div>
</div>
<!-- <ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal> -->
</div>
</template>
<script lang="ts">
import { useStore } from "vuex";
import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import type { MenuProps } from "ant-design-vue";
import axios from "axios";
import ModelsModal from "@/component/LibraryPage/ModelsModal.vue";
import { message,Upload} from 'ant-design-vue';
export default defineComponent({
components: {
DownOutlined,
UserOutlined,
ModelsModal,
},
setup(){
let workspace = ref({
sex:'male',
let workspaceItem = ref({
id:1,
name:"工作台2",
putName:false,
systemDesignerPercentage:30,
position:'top'
position:'top',
sex:'male',
sexType:false,
overallSingle:false,
current:{
})
let checked:any= ref(true);
let value = ref<number>(30);
let tooltip = ref(true);
let habit = ref(false);
let model = ref(false);
let habitType = ref({
habitTypeone:"Workspace Setting",
habitTypeList:[
{
id:1,
name:"11111"
},
{
id:2,
name:"222"
},
{
id:2,
name:"333"
},
],
});
let obj= ref([
{
},
system:[{
id:1,
url:"11111"
},
{
id:2,
url:"11111"
},
]);
let obj2= ref([
{
}],
seleves:[{
id:1,
url:"22"
},
{
id:2,
url:"222"
}],
})
let systemSeleves= ref(true);
let openType = ref({
workspace:false,
singleton:false,
habit:false,
model:false,
addWorkspace:false,
})
let workspace = ref({
id:'2',
workspaceList:[
{
id:1,
name:"工作台2",
putName:false,
systemDesignerPercentage:24,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
{
id:2,
name:"工作台3",
putName:false,
systemDesignerPercentage:23,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
{
id:3,
name:"工作台1",
putName:false,
systemDesignerPercentage:100,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
],
});
let workspaceItemName = ref('')//设置单独name公共使用
let singleTypeList = ref([
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
])
// const stringg = ref()
const habitTypeclick : MenuProps['onClick'] = (e)=>{
// this.habitType.habitTypeone = e
}
// const stringg:Ref<HTMLElement | null> = ref(null)
// const aaa = ()=>{
// if(stringg.value){
// console.log(stringg.value.classList)
// }
// }
return{
habitTypeclick,
checked,
value,
tooltip,
habit,
model,
habitType,
obj,
obj2,
workspace
systemSeleves,
openType,
workspace,
workspaceItem,
workspaceItemName,
singleTypeList
}
},
watch:{
'openType.habit':{
handler(newVal:any,oldVal:any){
console.log(newVal);
// this.store.state.Workspace.workspace
if(!newVal){
this.store.commit("setWoekspace", this.workspaceItem);
}
}
},
'workspaceItem.id':{
handler(newVal:any,oldVal:any){
console.log(newVal);
// this.store.state.Workspace.workspace
// if(!newVal){
// this.store.commit("setWoekspace", this.workspaceItem);
// }
this.workspace.workspaceList = this.workspace.workspaceList
}
},
workspaceItem:{
handler(newVal:any,oldVal:any){
console.log(123123);
// this.store.state.Workspace.workspace
}
}
},
data() {
return {
store: useStore(),
};
},
mounted() {
this.getworkspace()
},
directives:{
fade:{
mounted (el) {
el.addEventListener('click',()=>{
})
},
updated (el,model){
if(model.value){
el.style.display="block"
@@ -243,38 +342,154 @@ export default defineComponent({
},
methods: {
getworkspace(){
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
console.log(123);
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
// if (rv) {
// console.log(rv,'workspace');
// }
// })
// let url = Https.httpUrls.workspaceList + `?page=0&size=10`
// Https.axiosGet(url).then(
// (rv: any) => {
// console.log(rv);
// }
// ).catch(rv=>{
// })
let data = {
page:1,
size:10,
}
Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
if (rv) {
console.log(rv,'workspace');
this.workspace.workspaceList = rv.page.content
this.workspace.workspaceList.forEach((rv:any)=>{
if(rv.sex == '男装'){
rv.sexType == true
}else{
rv.sexType == false
}
})
}
})
},
handleButtonClick(e: Event) {
setSex(){
if(this.workspaceItem.sexType){
this.workspaceItem.sex = 'female'
}else{
this.workspaceItem.sex = 'male'
}
},
setOverall(){
if(this.workspaceItem.sexType){
this.workspaceItem.sex = 'female'
}else{
this.workspaceItem.sex = 'male'
}
},
//修改名字
putName(index:number,v:string){
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
if(v == 'put'){
this.workspaceItemName = this.workspace.workspaceList[index].name
this.workspace.workspaceList[index].putName = true
}else if (v == 'delete'){
this.workspace.workspaceList.splice(index,1)
}else{
if(this.workspaceItemName == ''){
message.error('Please enter a workbench name');
}else{
if(index == -1){
this.workspace.workspaceList.push(this.workspaceItem)
console.log("click left button", e);
},
handleMenuClick(e: Event) {
// console.log("click", e);
this.getworkspace()
},
systemDesigner(num: Number) {
console.log(num);
this.workspaceItem.id = 2
this.workspaceItem.name = this.workspaceItemName
this.openType.addWorkspace = false
}else{
console.log(this.workspaceItemName,this.workspaceItem);
this.workspace.workspaceList[index].name = this.workspaceItemName
this.workspace.workspaceList[index].putName = false
}
}
}
},
//设置系统设计占比
systemDesigner(num: number) {
this.workspaceItem.systemDesignerPercentage = num
},
formatter(value: number) {
return `${value}%`;
},
habitBtn(){
this.habit = !this.habit
if(!this.habit){
this.model = false
console.log(this.habit);
//根据id设置当前参数
setWorkspace(num:number){
this.openType.addWorkspace = false
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
this.workspace.workspaceList.forEach((v:any)=>{
if(v.id == num){
this.workspaceItem = v
}
})
this.openType.workspace = false
},
//新建参数
newWorkspace(){
this.openType.addWorkspace = true
},
//设置single & overall
setSingle(v:string){
this.openType.singleton = false
this.workspaceItem.position = v
},
//切换系统还是自己的模特
setSystemSeleves(){
},
setOpenType(v:string){
if(v == 'habit'){
this.openType.habit = !this.openType.habit
}else if(v == 'workspace'){
this.openType.singleton = false
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
this.openType.workspace = !this.openType.workspace
}else if(v == 'model'){
this.openType.singleton = false
this.openType.workspace = false
this.openType.model = !this.openType.model
}else if(v == 'singleton'){
this.openType.singleton = !this.openType.singleton
this.openType.workspace = false
}
let mask = document.getElementsByClassName("habit_mask")[0]
mask.addEventListener("click", this.documentClick,true);
},
modelBtn(){
this.model = !this.model
documentClick(){
let mask = document.getElementsByClassName("habit_mask")[0]
mask.removeEventListener("click", this.documentClick);
this.openType.habit = false
this.openType.workspace = false
this.openType.model = false
this.openType.singleton = false
},
// //选择模特
// selectModels() {
// let modelsModal: any = this.$refs.modelsModal;
// modelsModal.init();
// },
// //确定选择模特
// sureSelectModel(event: any) {
// this.store.commit("setTemplateData", event);
// },
},
});
</script>
@@ -292,12 +507,24 @@ export default defineComponent({
padding: .4rem 1.5rem;
font-size: 1.2rem;
cursor: pointer;
position: relative;
.fi-bs-angle-down {
margin-left: 1rem;
display: inline-block;
transform: translateY(2px);
}
}
.habit_mask{
position: absolute;
top: -20px;
left: auto;
right: -30px;
bottom: 0;
// background: #000;
opacity: 0;
width: 100vw;
height: 100vh;
}
.habit_content {
border: solid 2px #000;
border-radius: 1rem;
@@ -333,12 +560,19 @@ export default defineComponent({
}
.habit_type {
margin-top: 1.5rem;
// cursor: pointer;
button{
cursor: pointer;
position: relative;
.habit_workspace_show{
width: 100%;
z-index: 1;
transform: translateY(10%);
top: 4rem;
height: 14rem;
overflow-x: hidden;
cursor: auto;
}
button:hover{
color: rgba(0, 0, 0, 0.5);
&.active{
transform: translateY(0%);
}
}
}
.habit_Overal_Single {
@@ -361,6 +595,19 @@ export default defineComponent({
}
.habit_habit_singleton {
margin-bottom: 3rem;
position: relative;
.habit_singleton_show{
width: 100%;
z-index: 1;
transform: translateY(10%);
top: 4rem;
height: 14rem;
overflow-x: hidden;
cursor: auto;
&.active{
transform: translateY(0%);
}
}
}
.habit_System_Designer {
margin-top: 8rem;
@@ -388,7 +635,6 @@ export default defineComponent({
}
.habit_model{
margin-top: 2rem;
}
.habit_model_show{
@@ -412,6 +658,49 @@ export default defineComponent({
display: flex;
justify-content: space-between;
}
.habit_model_list{
margin: 0;
li{
padding: .5rem 0;
display: flex;
input{
border: 0;
width: 80%;
background: rgba(0,0,0,0);
}
>div{
cursor: pointer;
width: 80%;
}
&.newWorkspace{
text-align: center;
justify-content: center;
div{
border-radius: 50%;
border: 1px solid #000;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
}
i{
flex: 1;
}
}
i{
cursor: pointer;
}
.fi-rr-trash{
margin-left: 1rem;
}
}
li:hover{
background: rgba(0, 0, 0, 0.1);
}
}
.model_Designer{
.model_text{
display: flex;

26
src/component/HomePage/ColorboardUpload.vue
View File

@@ -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)
},

48
src/component/HomePage/Cropper.vue
View File

@@ -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%;

179
src/component/HomePage/Generate.vue
View File

@@ -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
);
}
}
}
}
}
}
}
}

224
src/component/HomePage/Material.vue
View File

@@ -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;

179
src/component/HomePage/MoodboardUpload.vue
View File

@@ -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{

16
src/component/HomePage/NewCollectionReview.vue
View File

@@ -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{

206
src/component/HomePage/PrintboardUpload.vue
View File

@@ -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
}
}
}

124
src/component/HomePage/SketchboardUpload.vue
View File

@@ -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
}
}

2
src/component/HomePage/Upload.vue
View File

@@ -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')
},

2
src/component/HomePage/collectionModal.vue
View File

@@ -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{

282
src/component/HomePage/layout.vue
View File

@@ -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;

696
src/component/LibraryPage/ModelPlacementNew.vue Normal file
View File

@@ -0,0 +1,696 @@
<template>
<div v-show="placementShow">
<a-modal class="models_placement_component"
v-model:visible="placementShow"
:footer="null"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="design_title_text">
<div>Registration</div>
<div class="design_title_text_intro">Please change the pure white inside the mannequin for another color to enhance your experience</div>
</div>
<div class="models_placement_body" >
<div class="models_placement_content">
<div class="plcaement_point_content">
<div class="palcement_modal_header">
<div class="placement_operate_list">
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
<div class="icon iconfont icon-baocun1 operate_icon"></div>
<div class="operate_item_des">Submit</div>
</div>
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
<div class="operate_item_des">Preview</div>
</div>
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
<div class="operate_item_des">Back</div>
</div>
<div class="operate_item" @click="restoreLocationList">
<div class="icon iconfont icon-huifu operate_icon"></div>
<div class="operate_item_des">Restore</div>
</div>
</div>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<div class="ponit_title">{{point.title}}</div>
<div class="point_list">
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</div>
</div>
<div class="placement_content_operate_list">
<div class="placement_content_operate_item" @click="changeRemoveStatus">
<div class="placement_remove_point_block"></div>
<div class="placement_content_operate_des">Remove Point</div>
</div>
</div>
<div class="img_preview_block" >
<div class="perview_mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
<img class="placement_img" :src="perviewUrl || printObject?.url">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile} from "@/tool/util"
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup() {
const store = useStore()
let oldLocationList:any = ref([])
let locationList:any = ref([])
let printObject:any = ref({})
let imgBox:any = ref({})
let intObj:any = ref(null)
let currentSign:any = ref({})
let oldPointList:any = ref([]) //备份点
let pointList:any = ref([])
let isSubmit:any = ref(false) //判断历史是否有提交过
return {
store,
oldLocationList,
locationList,
printObject,
imgBox,
intObj,
currentSign,
oldPointList,
pointList,
isSubmit
}
},
data(){
return{
placementShow:false,
collectionIndex:0,
startDian:false,
moveOriginal:{posX: 0, posY: 0},
isRemoveStatus:false,
placement_sacle:30,
perviewUrl:'',//预览的图片地址
isShowMark:false,
}
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
setTimeout(()=>{
let imgbox:any = this.$refs.imgbox
let position = imgbox.getBoundingClientRect()
this.imgBox = {
width:imgbox.clientWidth,
height:imgbox.scrollHeight,
left : position.left,
top:position.top,
scrollTop:imgbox.scrollTop || 0,
}
this.getDefaultPointList(this.imgBox)
},500)
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
this.isSubmit = false
this.pointList = [
{
title:'SHOULDER',
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
},
{
title:'WAISTBAND',
pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
},
{
title:'HAND',
pointList:[{type:'handLeft',color:'#CCFF7B',show:true,field:'hand'},{type:'handRight',color:'#CCFF7B',show:true,field:'hand'}]
},
]
if(this.printObject.templateId){//编辑
this.isSubmit = true
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
pointItem.show = false
let data = {
left:this.printObject[pointItem.type][0] * imgBox.width - 12,
top:this.printObject[pointItem.type][1] * imgBox.height - 12,
color:pointItem.color,
type:pointItem.type,
field:pointItem.field,
}
this.locationList.push(data)
}
}
}
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
}
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
},
AddDian(point:any){
if(!point.show){
return
}
this.startDian = true
this.isRemoveStatus = false
this.intObj = point
},
changeRemoveStatus(){
this.isRemoveStatus = true
},
startMove(event:any){
if(this.isRemoveStatus){
return
}
let imgbox:any = this.$refs.imgbox
let scrollTop = imgbox.scrollTop;
if(this.intObj){
this.currentSign.left = event.clientX - this.imgBox.left
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
this.currentSign.color = this.intObj.color
this.currentSign.type= this.intObj.type
this.currentSign.field = this.intObj.field
this.locationList.push(this.currentSign)
this.intObj.show = false
this.intObj = null
}else{
if(this.startDian){
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
document.addEventListener('mouseup', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
},
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
}
if (this.currentSign.left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
}
},
getMouseDown(event:any,item:any,index:number){
if(this.isRemoveStatus){
for(let itemPoint of this.pointList){
for(let point of itemPoint.pointList){
if(item.type == point.type){
point.show = true
break
}
}
}
this.locationList.splice(index,1)
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.offsetX
this.moveOriginal.posY = event.offsetY // 1为边框
this.startDian = true
}
},
getMouseOver(){
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
},
closeModal(){
let _this = this
if(!this.isSubmit){
Modal.confirm({
title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok',
cancelText: 'Cancel',
// centered:true,
onOk() {
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
});
}else{
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
},
restoreLocationList(){
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
},
submitPlacement(){
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
},
confrimSubmit(){
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
this.isShowMark = false
this.isSubmit = true
this.$emit('submitModelPlacement')
this.closeModal()
}
).catch(res=>{
this.isShowMark = false
});
},
customRequest(){
let new_data = {
file:this.printObject.file,
level1Type:'Models',
level2Type:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.isShowMark = true
return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
resolve(rv)
}
).catch((res)=>{
reject(res)
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
let locationData:any = {}
let returnData:any = {}
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
//进行字段归类
for(let item of newLocationList){
locationData[item.field] = locationData[item.field] || []
locationData[item.field].push(item)
}
for(let key in locationData){
locationData[key].sort(this.sortBy("left")) //通过left字段进行排序
locationData[key].forEach((v:any,index:any) => {
v.type = !index ?v.field + 'Left' :v.field +'Right' //第一个是left，第二个是right
v.left = ((v.left + 12) / width).toFixed(4)
v.top = ((v.top + 12) / height).toFixed(4)
returnData[v.type] = [v.left, v.top]
});
}
return returnData
},
sortBy(field:any) {
return function(a:any,b:any) {
return a[field] - b[field];
}
},
printPreview(){
let file = this.printObject.templateId ? null :this.printObject.file,
models = {
libraryId:this.printObject.libraryId || null,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
let formData = new FormData();
formData.append('file', file);
formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
if(this.isShowMark){
return
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
this.perviewUrl = rv
this.isShowMark = false
}
).catch(res=>{
this.isShowMark = false
});
},
backPreview(){
this.perviewUrl = ''
}
}
})
</script>
<style lang="less">
.models_placement_component{
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
display: flex;
flex-direction: column;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.models_placement_body{
width: 100%;
flex: 1;
.palcement_modal_header{
position: relative;
height: 6.6rem;
width: 100%;
margin-bottom: 3rem;
.placement_operate_list{
display: flex;
align-items: center;
margin:0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
.operate_item{
margin-right: 4rem;
text-align: center;
cursor: pointer;
.operate_icon{
font-size: 2.1rem;
color: #64686D;
}
.operate_item_des{
height: 1.2rem;
font-size: 1.3rem;
color: #64686D;
}
&:last-child{
margin-right: 0;
}
}
}
}
.models_placement_content{
position: relative;
// height: calc(100% - 6.6rem);
height: 100%;
width: 100%;
.plcaement_point_content{
border: 2px solid #000;
border-radius: 10px;
width: 22rem;
background: #EBECF4;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
padding: 0 1.4rem;
.placement_point_item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
.ponit_title{
font-size: 1.3rem;
color: #64686D;
user-select:none; /* CSS3属性 */
}
.point_list{
display: flex;
align-items: center;
width: 6.2rem;
justify-content: space-between;
.point_item{
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
border:solid 0.2rem transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
.point_block{
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
}
}
}
}
}
.placement_content_operate_list{
width: 10.6rem;
background: #EBECF4;
position: absolute;
right: 0;
top:18.4rem;
.placement_content_operate_item{
padding: 1.5rem 0;
text-align: center;
cursor: pointer;
.placement_content_operate_des{
width: 100%;
font-size: 1.3rem;
color: #64686D;
-moz-user-select:none;
user-select:none
}
.print_scale_value{
height: 1.1rem;
font-size: 1.2rem;
text-align: center;
margin-bottom: 0.3rem;
color: #64686D;
}
.ant-tooltip-placement-top{
top: -37px !important;
}
.ant-slider-track{
background: #343579;
}
.ant-slider-handle{
border-color: #343579;
}
.placement_remove_point_block{
width: 2.4rem;
height: 2.4rem;
border: 2px solid #000000;
border-radius: 50%;
margin: 0 auto 0.4rem;
}
}
}
.placement_tip_content{
position: absolute;
right: 2rem;
bottom: 2rem;
width: 30rem;
font-size: 1.3rem;
color: #64686D;
}
.img_preview_block{
width: 40.8rem;
background: #ffffff;
margin: 0 auto;
position: relative;
user-select:none;
-moz-user-select:none;
position: relative;
.img_content_block{
width: 40.8rem;
height: 100%;
max-height: 63.2rem;
overflow-y: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
position: relative;
&::-webkit-scrollbar { width: 0 !important }
}
.perview_mark_loading{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}
.placement_img{
width: 100%;
user-select:none;
-moz-user-select:none;
}
.ponit_click{
width: 24px;
height: 24px;
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;
}
.placement_add_point_content{
width: 4px;
height: 4px;
border-radius: 50%;
background: #6E70FF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.icon-guanbi{
font-size: 20px;
line-height: 20px;
color:#ffffff;
}
}
}
}
}
}
</style>