commit
This commit is contained in:
WangXiaoDong
@@ -18,13 +18,14 @@ input {
|
|||||||
.button_first {
|
.button_first {
|
||||||
width: 9.85rem;
|
width: 9.85rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #E0E0F6;
|
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
line-height: 4rem;
|
line-height: 4rem;
|
||||||
font-size: 1.3rem;
|
font-size: 1.4rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #343579;
|
color: #000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
border: 2px solid;
|
||||||
}
|
}
|
||||||
.button_second {
|
.button_second {
|
||||||
width: 9.85rem;
|
width: 9.85rem;
|
||||||
@@ -109,6 +110,70 @@ input {
|
|||||||
.modal_component .ant-modal-content .ant-modal-body {
|
.modal_component .ant-modal-content .ant-modal-body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
.operate_file_block {
|
||||||
|
width: 100%;
|
||||||
|
height: 3rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type .select_category {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type .select_category .icon-xiala {
|
||||||
|
margin-left: 0.8rem;
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type .icon_rotate {
|
||||||
|
-moz-transform: rotate(180deg);
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
animation-direction: 0.5s;
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type .category_list {
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
left: 0;
|
||||||
|
background-color: #b1b1b1;
|
||||||
|
border: 1px solid #343579;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
z-index: 3;
|
||||||
|
height: 9rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type .category_list.category_list::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type .category_list .category_item {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
line-height: 1.6rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #595959;
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type .category_list .category_item.select_category_item {
|
||||||
|
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
||||||
|
}
|
||||||
|
.operate_file_block .select_img_type .category_list .category_item:hover {
|
||||||
|
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
||||||
|
}
|
||||||
|
.pin_block {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
.collection_modal .ant-modal-body {
|
.collection_modal .ant-modal-body {
|
||||||
height: calc(80vh - 6.4rem);
|
height: calc(80vh - 6.4rem);
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
|||||||
@@ -15,15 +15,17 @@ input{
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.button_first{
|
.button_first{
|
||||||
width: 9.85rem;
|
width: 9.85rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #E0E0F6;
|
// background: #343579;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
line-height: 4rem;
|
line-height: 4rem;
|
||||||
font-size: 1.3rem;
|
font-size: 1.4rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #343579;
|
color: #000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
border: 2px solid;
|
||||||
}
|
}
|
||||||
.button_second{
|
.button_second{
|
||||||
width: 9.85rem;
|
width: 9.85rem;
|
||||||
@@ -125,7 +127,81 @@ input{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//衣服类型下拉菜单
|
||||||
|
.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);
|
||||||
|
background-color: rgb(177 177 177);
|
||||||
|
border: 1px solid #343579;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
// overflow: hidden;
|
||||||
|
z-index: 3;
|
||||||
|
height: 9rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
&.category_list::-webkit-scrollbar{display: none;}
|
||||||
|
|
||||||
|
.category_item{
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
line-height: 1.6rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #595959;
|
||||||
|
|
||||||
|
&.select_category_item{
|
||||||
|
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pin_block{
|
||||||
|
text-align: center;
|
||||||
|
margin-top:.5rem;
|
||||||
|
}
|
||||||
//collection 弹窗
|
//collection 弹窗
|
||||||
.collection_modal{
|
.collection_modal{
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<!-- designDetailShow -->
|
||||||
<a-modal class="design_detail_modal_component"
|
<a-modal class="design_detail_modal_component"
|
||||||
v-model:visible="designDetailShow"
|
v-model:visible="designDetailShow"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
@@ -7,49 +8,85 @@
|
|||||||
width="80%"
|
width="80%"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
|
:closable="false"
|
||||||
|
|
||||||
>
|
>
|
||||||
<template #closeIcon>
|
<!-- <template #closeIcon>
|
||||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||||
</template>
|
</template> -->
|
||||||
|
<div class="design_title_text">
|
||||||
|
<div>Details</div>
|
||||||
|
<div class="design_title_text_intro">edit the details of your design</div>
|
||||||
|
</div>
|
||||||
|
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||||
|
<i class="fi fi-rr-cross-small"></i>
|
||||||
|
</div>
|
||||||
<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_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="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_centent">
|
||||||
|
|
||||||
|
|
||||||
|
</div> -->
|
||||||
|
|
||||||
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
|
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
|
||||||
<div class="detail_modal_body_left" @click="showDesignImgDetail()">
|
|
||||||
|
<div class="detail_modal_body_img" @click="showDesignImgDetail()">
|
||||||
|
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
|
||||||
<img class="detial_img" :src="designItemDetail.designItemUrl">
|
<img class="detial_img" :src="designItemDetail.designItemUrl">
|
||||||
|
<div>
|
||||||
|
<!-- 全屏 -->
|
||||||
|
<i class="fi fi-bs-expand-arrows-alt"></i>
|
||||||
|
<!-- 编辑 -->
|
||||||
|
<i class="fi fi-rr-edit"></i>
|
||||||
|
<!-- 层 -->
|
||||||
|
<i class="fi fi-rr-copy"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail_modal_body_right">
|
<div class="detail_modal_body_category">
|
||||||
<div class="detail_modal_right_top scroll_style">
|
<div class="detail_modal_right_top scroll_style">
|
||||||
<div class="clothes_detail_item">
|
<div class="clothes_detail_item clothes_detail_item_apparel">
|
||||||
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Apparel</div>
|
<div class="clothes_item_header">
|
||||||
<div class="clothes_item_content">
|
<i class="fi fi-rs-comments"></i>
|
||||||
<Draggable :list="designItemDetail.clothes" item-key="id" :animation="100">
|
<div>Current Apparel</div>
|
||||||
<template #item="{ element,index }">
|
<i class="fi fi-rr-edit"></i>
|
||||||
<div class="clothes_item_img_block" @click="clothesDetail(element,index)">
|
</div>
|
||||||
<img class="clothes_item_img" :src="element.path">
|
<img src="" alt="" class="centent" @click="openCurrent(1)">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="clothes_detail_item clothes_detail_item_print">
|
||||||
</Draggable>
|
<div class="clothes_item_header">
|
||||||
|
<i class="fi fi-rs-comments"></i>
|
||||||
</div>
|
<div>Current Print</div>
|
||||||
|
<i class="fi fi-rr-edit"></i>
|
||||||
|
</div>
|
||||||
|
<i 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">
|
||||||
|
<i class="fi fi-rs-comments"></i>
|
||||||
|
<div>Current Print</div>
|
||||||
|
<i class="fi fi-rr-edit"></i>
|
||||||
|
</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_body">
|
||||||
|
<div class="color_des">222</div>
|
||||||
|
<div class="color_des">111</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</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>
|
||||||
<div class="detail_modal_right_bottom">
|
<div class="detail_modal_right_bottom">
|
||||||
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
|
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
|
||||||
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
|
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="design_detail_perview" v-show="designShowPrview == 2">
|
<div class="design_detail_perview" v-show="designShowPrview == 2">
|
||||||
<div class="design_detail_perview_content" >
|
<div class="design_detail_perview_content" >
|
||||||
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
|
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
|
||||||
@@ -83,6 +120,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,ref } from 'vue'
|
import { defineComponent,computed,ref } from 'vue'
|
||||||
import ElementReplace from '@/component/Detail/ElementReplace.vue'
|
import ElementReplace from '@/component/Detail/ElementReplace.vue'
|
||||||
|
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
||||||
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
|
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
|
||||||
import Draggable from 'vuedraggable'
|
import Draggable from 'vuedraggable'
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
@@ -92,6 +130,7 @@ export default defineComponent({
|
|||||||
ElementReplace,
|
ElementReplace,
|
||||||
AccessoryReplace,
|
AccessoryReplace,
|
||||||
Draggable,
|
Draggable,
|
||||||
|
DesignDetailAlter
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
@@ -101,23 +140,50 @@ export default defineComponent({
|
|||||||
index:0,
|
index:0,
|
||||||
collectionList:[],
|
collectionList:[],
|
||||||
type:'',
|
type:'',
|
||||||
|
|
||||||
})//父组件传过来的数据
|
})//父组件传过来的数据
|
||||||
return{
|
return{
|
||||||
designItemDetail,
|
designItemDetail,
|
||||||
store,
|
store,
|
||||||
parentData
|
parentData,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
loadingShow:false,
|
loadingShow:false,
|
||||||
designDetailShow:false,
|
designDetailShow:true,
|
||||||
designShowPrview:1, //展示图片预览步骤
|
designShowPrview:1, //展示图片预览步骤
|
||||||
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
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,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
openCurrent(num: Number) {
|
||||||
|
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
||||||
|
DesignDetailAlter.init(num)
|
||||||
|
|
||||||
|
if(num ==2 ){
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
closeModal(){
|
closeModal(){
|
||||||
if(this.designShowPrview == 1){
|
if(this.designShowPrview == 1){
|
||||||
this.designDetailShow = false
|
this.designDetailShow = false
|
||||||
@@ -127,7 +193,7 @@ export default defineComponent({
|
|||||||
this.designShowPrview = 1
|
this.designShowPrview = 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
showDesignDetailModal(data:any){
|
showDesignDetailModal(data:any){
|
||||||
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
|
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
|
||||||
this.parentData = data
|
this.parentData = data
|
||||||
@@ -273,7 +339,35 @@ export default defineComponent({
|
|||||||
<style lang="less">
|
<style lang="less">
|
||||||
.design_detail_modal_component{
|
.design_detail_modal_component{
|
||||||
color: #000;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal-content{
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
.ant-modal-header{
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.ant-modal-body{
|
||||||
|
padding: 4rem 5rem 0rem!important;
|
||||||
|
// height: calc(65vh - 6.4rem);
|
||||||
|
height: 65rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
.ant-modal-close{
|
.ant-modal-close{
|
||||||
width: 3.6rem;
|
width: 3.6rem;
|
||||||
height: 3.6rem;
|
height: 3.6rem;
|
||||||
@@ -286,26 +380,29 @@ export default defineComponent({
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-modal-body{
|
|
||||||
background: #F2F3FB;
|
|
||||||
height: 80vh;
|
|
||||||
overflow-y: hidden;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close_icon{
|
.design_closeIcon{
|
||||||
width: 3.6rem;
|
top: 2rem;
|
||||||
height: 3.6rem;
|
right: 2rem;
|
||||||
background: #000000;
|
cursor: pointer;
|
||||||
border-radius: 50%;
|
width: 4rem;
|
||||||
line-height: 3.6rem;
|
height: 4rem;
|
||||||
text-align: center;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
.icon-guanbi{
|
justify-content: center;
|
||||||
font-size: 2rem;
|
position: absolute;
|
||||||
color: #ffffff;
|
.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{
|
.turn_button{
|
||||||
width: 3.6rem;
|
width: 3.6rem;
|
||||||
@@ -335,78 +432,111 @@ export default defineComponent({
|
|||||||
|
|
||||||
|
|
||||||
.design_detail_modal_body{
|
.design_detail_modal_body{
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
// padding: 1.5rem 1rem 2.5rem;
|
||||||
padding: 1.5rem 1rem 2.5rem;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
.detail_modal_body_img{
|
||||||
.detail_modal_body_left{
|
// width: 43.3rem;
|
||||||
width: 43.3rem;
|
width: 23%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
.detial_img{
|
.detial_img{
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
div{
|
||||||
|
i{
|
||||||
|
position: absolute;
|
||||||
|
&.fi-bs-expand-arrows-alt{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&.fi-rr-edit{
|
||||||
|
left: 0;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
&.fi-rr-copy{
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail_modal_body_right{
|
.detail_modal_body_category{
|
||||||
width: calc(100% - 44rem);
|
width: 17%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.detail_modal_right_top{
|
.detail_modal_right_top{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 3.9rem);
|
height: calc(100% - 3.9rem);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
.clothes_detail_item{
|
.clothes_detail_item{
|
||||||
padding-left: 1.5rem;
|
.centent{
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
.clothes_item_header{
|
.clothes_item_header{
|
||||||
height: 6.4rem;
|
// height: 6.4rem;
|
||||||
display: flex;
|
margin-bottom: 1rem;
|
||||||
align-items: center;
|
display: flex;
|
||||||
font-size: 18px;
|
font-size: 1.8rem;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
justify-content: space-between;
|
||||||
.icon-dangqianweizhi{
|
.icon-dangqianweizhi{
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
i{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
img{
|
||||||
.clothes_item_content{
|
width: 10rem;
|
||||||
padding:0 0.5rem 2.3rem;
|
height: 10rem;
|
||||||
border-bottom: 0.1rem solid #F2F3FB;
|
}
|
||||||
|
.color_item{
|
||||||
&.others_clothes_item_content{
|
display: inline-block;
|
||||||
border-bottom:none
|
vertical-align: top;
|
||||||
}
|
border: 1px solid #ebe9e9;
|
||||||
|
.color_content{
|
||||||
.clothes_item_img_block{
|
width: 6rem;
|
||||||
width: 20.5rem;
|
height: 4rem;
|
||||||
height: 20.5rem;
|
}
|
||||||
border: 0.1rem solid #F5F5F5;
|
.color_content_body{
|
||||||
display: inline-block;
|
.color_des{
|
||||||
text-align: center;
|
font-size: 1.2rem;
|
||||||
line-height: 21.3rem;
|
font-weight: 600;
|
||||||
margin-right: 1rem;
|
}
|
||||||
margin-bottom: 1rem;
|
}
|
||||||
|
&:nth-child(4n){
|
||||||
.clothes_item_img{
|
margin-right: 0;
|
||||||
max-width: 100%;
|
}
|
||||||
max-height: 100%;
|
}
|
||||||
}
|
&.clothes_detail_item_print{
|
||||||
}
|
.fi-rr-picture{
|
||||||
}
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
zoom: 3;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -439,6 +569,60 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.detail_modal_body_select{
|
||||||
|
width: 20%;
|
||||||
|
.switch_type_list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.switch_type_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// padding: 0 2rem;
|
||||||
|
height: 4rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
line-height: 4rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
// margin-right: 2.2rem;
|
||||||
|
color: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
transform-origin: left;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: 0.3s all;
|
||||||
|
&.switch_type_item::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
background: #000;
|
||||||
|
height: 3px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 6px;
|
||||||
|
width: 0px;
|
||||||
|
transition: 0.3s all;
|
||||||
|
}
|
||||||
|
&.select_swtich {
|
||||||
|
color: #000;
|
||||||
|
font-weight: 600;
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
&.select_swtich::before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch_icon {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.design_detail_perview{
|
.design_detail_perview{
|
||||||
@@ -526,4 +710,4 @@ export default defineComponent({
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
952
src/component/Detail/DesignDetailAlter.vue
Normal file
952
src/component/Detail/DesignDetailAlter.vue
Normal file
@@ -0,0 +1,952 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail_modal_body_select">
|
||||||
|
<div v-show="type_ == 1 && select == true">
|
||||||
|
<div class="detail_uploadLibrary">
|
||||||
|
<div class="switch_type_list">
|
||||||
|
<div
|
||||||
|
@click.stop="open(1)"
|
||||||
|
class="switch_type_item"
|
||||||
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||||
|
>
|
||||||
|
<span>Upload</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
@click.stop="open(2)"
|
||||||
|
class="switch_type_item"
|
||||||
|
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||||
|
>
|
||||||
|
<span>Library</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div v-show="openClick == 1">
|
||||||
|
<div v-show="openClick == 1" 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"
|
||||||
|
:key="file"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="upload_file_item_content"
|
||||||
|
v-show="file?.status === '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" />
|
||||||
|
<div
|
||||||
|
class="delete_file_block"
|
||||||
|
@click="deleteFile(file)"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="upload_file_item upload_component"
|
||||||
|
v-show="moodboarList.length != 8"
|
||||||
|
>
|
||||||
|
<a-upload
|
||||||
|
:action="uploadUrl + '/api/element/upload'"
|
||||||
|
list-type="picture-card"
|
||||||
|
:data="{
|
||||||
|
...upload,
|
||||||
|
}"
|
||||||
|
:headers="{ Authorization: token }"
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
multiple
|
||||||
|
:maxCount="8 - moodboarList.length+fileList.length"
|
||||||
|
accept=".jpg,.png,.jpeg,.bmp"
|
||||||
|
@change="(file) => fileUploadChange(file)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="upload_tip_block"
|
||||||
|
v-show=" moodboarList.length != 8"
|
||||||
|
>
|
||||||
|
<i class="fi fi-br-upload"></i>
|
||||||
|
</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>
|
||||||
|
<div v-show="type_ == 3 && select == true">
|
||||||
|
<div class="detail_color">
|
||||||
|
<div class="right_content_line">
|
||||||
|
<div class="upload_right_header">
|
||||||
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
|
<span>Palette</span>
|
||||||
|
</div>
|
||||||
|
<div class="color_setting_block">
|
||||||
|
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||||
|
<!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
|
||||||
|
<!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
|
||||||
|
<div class="color_block">
|
||||||
|
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||||
|
<div v-show="colorBlockHex">
|
||||||
|
HEX
|
||||||
|
</div>
|
||||||
|
<div v-show="!colorBlockHex">
|
||||||
|
RGBA
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color_right">
|
||||||
|
<div class="color_HEX_block" v-show="colorBlockHex">
|
||||||
|
<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
|
||||||
|
<div>
|
||||||
|
{{getSelectRGB(selectColor).hex}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color_rgb_block" v-show="!colorBlockHex">
|
||||||
|
<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
|
||||||
|
<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
|
||||||
|
<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
|
||||||
|
<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right_content_line right_content_line_upload">
|
||||||
|
<div class="upload_right_header">
|
||||||
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
|
<span>Auto Recognize</span>
|
||||||
|
</div>
|
||||||
|
<div class="upload_centetn">
|
||||||
|
<div class="upload_item">
|
||||||
|
<div class="upload_file_item" v-for="(file) in colorFileList" :key="file">
|
||||||
|
<div class="upload_file_item_content" v-show="file.status !== 'done'">
|
||||||
|
<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" ref="colorImage">
|
||||||
|
<div class="delete_file_block" @click="colorDeleteFile(index)">Delete</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-upload
|
||||||
|
v-show="colorFileList.length < 1"
|
||||||
|
list-type="picture-card"
|
||||||
|
:customRequest="function(){}"
|
||||||
|
@change="fileUploadChange"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
accept=".jpg,.png,.jpeg,.bmp"
|
||||||
|
>
|
||||||
|
<div class="upload_tip_block">
|
||||||
|
<i class="fi fi-rr-picture"></i>
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
<div class="upload_color">
|
||||||
|
<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item">
|
||||||
|
<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
|
||||||
|
</div>
|
||||||
|
<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
|
||||||
|
<img src="#" :title="pantongNameList[index]">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="right_content_line">
|
||||||
|
<div class="upload_right_header">
|
||||||
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
|
<span>Color Code</span>
|
||||||
|
</div>
|
||||||
|
<div class="get_color_block">
|
||||||
|
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
||||||
|
<div class="get_color_button" @click="getTcxColor()">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="detail_modal_body_result"></div> -->
|
||||||
|
<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { defineComponent,computed,ref, h ,nextTick } 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 DesignDetailEnd from './DesignDetailEnd.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: ["msg"],
|
||||||
|
components:{
|
||||||
|
Draggable,Sketch,DesignDetailEnd
|
||||||
|
},
|
||||||
|
setup(prop) {
|
||||||
|
const store = useStore();
|
||||||
|
let type_ = ref(1);
|
||||||
|
let select = ref(false);
|
||||||
|
let parentData = ref({
|
||||||
|
})//父组件传过来的数据
|
||||||
|
let openClick = ref(1);
|
||||||
|
|
||||||
|
|
||||||
|
//颜色
|
||||||
|
let selectColor = ref({
|
||||||
|
rgba:{},
|
||||||
|
}) //顔色选择器默认颜色
|
||||||
|
let selectColorList = ref({
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
store,
|
||||||
|
parentData,
|
||||||
|
openClick,
|
||||||
|
type_,
|
||||||
|
select,
|
||||||
|
selectColor,
|
||||||
|
selectColorList,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
getSelectRGB(selectColor){
|
||||||
|
|
||||||
|
return (selectColor)=>{
|
||||||
|
let rgba = selectColor.rgba
|
||||||
|
let data = {
|
||||||
|
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
|
||||||
|
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
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
designShowPrview:1, //展示图片预览步骤
|
||||||
|
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
||||||
|
|
||||||
|
//颜色
|
||||||
|
reviewColor:{}, //预览的颜色
|
||||||
|
colorPickerVisible: true,
|
||||||
|
colorBlockHex:true,
|
||||||
|
getColorBg:false,
|
||||||
|
pantongName:'',//潘通值
|
||||||
|
pantongNameList:[],
|
||||||
|
tcxColor:'',
|
||||||
|
selectColorList: [],
|
||||||
|
colorFileList: [],
|
||||||
|
selectIndex:0,
|
||||||
|
indicator : h(LoadingOutlined, {
|
||||||
|
style: {
|
||||||
|
fontSize: '2.4rem',
|
||||||
|
},
|
||||||
|
spin: true,
|
||||||
|
}),
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
//点击判断
|
||||||
|
init(num){
|
||||||
|
this.type_ = num
|
||||||
|
this.select = true
|
||||||
|
this.selectColor = {
|
||||||
|
rgba:{
|
||||||
|
r:108,
|
||||||
|
g:108,
|
||||||
|
b:172,
|
||||||
|
a:1
|
||||||
|
},
|
||||||
|
hex:'#6c6cac'
|
||||||
|
}
|
||||||
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
||||||
|
DesignDetailEnd.init(num)
|
||||||
|
},
|
||||||
|
//衣服
|
||||||
|
open(num) {
|
||||||
|
this.openClick = num;
|
||||||
|
if(num ==2 ){
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//印花
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//颜色
|
||||||
|
beforeUpload(file){
|
||||||
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||||
|
if (!isJpgOrPng) {
|
||||||
|
message.error('You can only upload Image file!');
|
||||||
|
}
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||||
|
if (!isLt2M) {
|
||||||
|
message.error('Image must smaller than 5MB!');
|
||||||
|
}
|
||||||
|
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 = []
|
||||||
|
},
|
||||||
|
setUplpadColor(color){
|
||||||
|
this.selectColor = color
|
||||||
|
},
|
||||||
|
rgbaToHex(rgba) { // rgba转16进制
|
||||||
|
let hex = '#';
|
||||||
|
for (const i of rgba) {
|
||||||
|
hex += Number(i).toString(16).padStart(2, '0');
|
||||||
|
}
|
||||||
|
return hex;
|
||||||
|
},
|
||||||
|
//通过HSV获取颜色
|
||||||
|
getHsvColor(color){
|
||||||
|
// let hsv = rgbToHsv(color)
|
||||||
|
this.pantongName = ''
|
||||||
|
// {params:{id:3}}
|
||||||
|
// console.log(color);
|
||||||
|
let colorList = []
|
||||||
|
color.forEach((item,index)=>{
|
||||||
|
let arr = [item.rgba.r,item.rgba.g,item.rgba.b,item.rgba.a]
|
||||||
|
colorList.push(arr)
|
||||||
|
})
|
||||||
|
|
||||||
|
let hsvList = []
|
||||||
|
colorList.forEach((item)=>{
|
||||||
|
let hsv = rgbToHsv(item)
|
||||||
|
if(hsvList.length == 0){
|
||||||
|
}else{
|
||||||
|
if(hsvList[0].h+5){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let obj = {
|
||||||
|
h:Number(hsv[0]),
|
||||||
|
s:Number(hsv[1]),
|
||||||
|
v:Number(hsv[2]),
|
||||||
|
}
|
||||||
|
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
|
||||||
|
}
|
||||||
|
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])
|
||||||
|
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}
|
||||||
|
this.pantongName = rv.name
|
||||||
|
let colorList =this.colorList.filter((v) => Object.keys(v).length)
|
||||||
|
this.setColorboardList(colorList)
|
||||||
|
this.getColorBg = true
|
||||||
|
}else{
|
||||||
|
message.error("Can't find the TCX color")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setColorboardList(colorList){
|
||||||
|
let newColorList = colorList.map((v)=>{
|
||||||
|
let data = {
|
||||||
|
id:'',
|
||||||
|
name:'',
|
||||||
|
rgbValue:v
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
})
|
||||||
|
// this.store.commit('setColorboardList',newColorList)
|
||||||
|
|
||||||
|
},
|
||||||
|
fileUploadChange(data){
|
||||||
|
let file = data.file
|
||||||
|
let fileData = file.originFileObj
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
let data_new;
|
||||||
|
if (typeof e.target.result === 'object') {
|
||||||
|
// 把Array Buffer转化为blob 如果是base64不需要
|
||||||
|
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||||
|
} else {
|
||||||
|
data_new = e.target.result;
|
||||||
|
}
|
||||||
|
file.imgUrl = data_new
|
||||||
|
file.status = 'done'
|
||||||
|
this.colorFileList.push(file)
|
||||||
|
|
||||||
|
setTimeout(()=>{
|
||||||
|
const colorThief = new ColorThief();
|
||||||
|
let colorImage = this.$refs.colorImage
|
||||||
|
let domImg = colorImage[0];
|
||||||
|
let color = colorThief.getColor(domImg)
|
||||||
|
let colorHex = this.rgbaToHex(color)
|
||||||
|
let selectColorList = [];
|
||||||
|
let selectColor = colorThief.getPalette(domImg,7)
|
||||||
|
selectColor = selectColor.join('&')
|
||||||
|
selectColor = selectColor.split("&")
|
||||||
|
let colorLi = []
|
||||||
|
new Set(selectColor).forEach((item)=>{
|
||||||
|
colorLi.push(item.split(","))
|
||||||
|
})
|
||||||
|
colorLi.forEach(element => {
|
||||||
|
let colorLiHex = this.rgbaToHex(element)
|
||||||
|
selectColorList.push(
|
||||||
|
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
|
||||||
|
)
|
||||||
|
});
|
||||||
|
this.selectColorList = selectColorList
|
||||||
|
this.getHsvColor(selectColorList)
|
||||||
|
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
|
||||||
|
},100)
|
||||||
|
};
|
||||||
|
// 转化为base64S
|
||||||
|
reader.readAsDataURL(fileData)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
|
||||||
|
.detail_modal_body_select{
|
||||||
|
width: 20%;
|
||||||
|
>div{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.detail_uploadLibrary{
|
||||||
|
.switch_type_list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.switch_type_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// padding: 0 2rem;
|
||||||
|
height: 4rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
line-height: 4rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
// margin-right: 2.2rem;
|
||||||
|
color: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
transform-origin: left;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: 0.3s all;
|
||||||
|
&.switch_type_item::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
background: #000;
|
||||||
|
height: 3px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 6px;
|
||||||
|
width: 0px;
|
||||||
|
transition: 0.3s all;
|
||||||
|
}
|
||||||
|
&.select_swtich {
|
||||||
|
color: #000;
|
||||||
|
font-weight: 600;
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
&.select_swtich::before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch_icon {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.detail_color{
|
||||||
|
// height: calc(100% - 5.4rem);
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.right_content_line{
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
.upload_right_header{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
&.upload_right_header:nth-child(1){
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
margin-left: 1rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upload_centetn{
|
||||||
|
// overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.upload_centetn::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.color_review_block{
|
||||||
|
margin-right: 4rem;
|
||||||
|
|
||||||
|
.color_review_content{
|
||||||
|
width: 16.5rem;
|
||||||
|
height: 16.5rem;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 0.1rem solid #DCDCEC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pantong_name{
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #030303;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear_button{
|
||||||
|
padding: 0 2.8rem;
|
||||||
|
height: 3.2rem;
|
||||||
|
line-height: 3.2rem;
|
||||||
|
background: #EFEEFF;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: Roboto;
|
||||||
|
color: #343579;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload_file_item{
|
||||||
|
// margin: 0 2rem 2rem 0;
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
// width: 16.5rem;
|
||||||
|
// height: 16.5rem;
|
||||||
|
width: 6rem;
|
||||||
|
height: 6rem;
|
||||||
|
border: 1px solid #F5F5F5;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
.upload_file_item_content{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover .delete_file_block{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload_img{
|
||||||
|
display: block;
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete_file_block{
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 4rem;
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 4rem;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload_img_icon{
|
||||||
|
width: 4.6rem;
|
||||||
|
}
|
||||||
|
.upload_color{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
height: 2rem;
|
||||||
|
.upload_color_item{
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 1rem;
|
||||||
|
.upload_color_item_bg{
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
// .upload_color_item_text{
|
||||||
|
// font-size: 12px;
|
||||||
|
// line-height: 1;
|
||||||
|
// text-align: center;
|
||||||
|
// }
|
||||||
|
div{
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.color_setting_block{
|
||||||
|
// width: 16.5rem;
|
||||||
|
width: 18rem;
|
||||||
|
margin: auto;
|
||||||
|
background: #f0eaee;
|
||||||
|
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
// box-shadow: 2px 2px 8px #000;
|
||||||
|
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
|
||||||
|
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
|
||||||
|
.sketch_color{
|
||||||
|
box-shadow: none;
|
||||||
|
width: 18rem;
|
||||||
|
background: rgba(0,0,0,0);
|
||||||
|
padding-top: 1rem !important;
|
||||||
|
max-width: 170px;
|
||||||
|
padding: 0;
|
||||||
|
.vc-sketch{
|
||||||
|
}
|
||||||
|
.vc-sketch-saturation-wrap{
|
||||||
|
width: 16rem;
|
||||||
|
height: 16rem;
|
||||||
|
max-height: 170px;
|
||||||
|
max-width: 170px;
|
||||||
|
margin: auto;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.vc-sketch-presets{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.vc-botton-container{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.vc-chrome-body{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.vc-sketch-field{
|
||||||
|
display: none;
|
||||||
|
.vc-input__input{
|
||||||
|
text-align: center;
|
||||||
|
padding: .4rem 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vc-sketch-color-wrap{
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: inset 0 0 0 1px #ccc;
|
||||||
|
.vc-sketch-active-color{
|
||||||
|
}
|
||||||
|
.vc-sketch-active-color{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.vc-checkerboard{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-sketch-color-wrap{
|
||||||
|
background-image: url(@../../../../assets/images/homePage/dropper.png);
|
||||||
|
background-size: 15px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
// .vc-sketch-color-wrap{
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
.vc-sketch-controls{
|
||||||
|
width: 90%;
|
||||||
|
margin: .5rem auto;
|
||||||
|
.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
|
||||||
|
.vc-hue{
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.vc-alpha{
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vc-sketch-alpha-wrap{
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chrome_color{
|
||||||
|
width: 16.5rem;
|
||||||
|
height: 16.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.vc-chrome-saturation-wrap{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sileder_color{
|
||||||
|
margin-top:1.3rem;
|
||||||
|
|
||||||
|
.vc-slider-swatches{
|
||||||
|
display:none
|
||||||
|
}
|
||||||
|
.vc-slider-hue-warp {
|
||||||
|
width: 16.5rem;
|
||||||
|
height: 2.4rem;
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.vc-hue-picker{
|
||||||
|
width: 1.4rem;
|
||||||
|
height: 1.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-0.7rem, -0.2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vc-hue-pointer{
|
||||||
|
top: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.color_block{
|
||||||
|
// margin-top: 1rem;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// font-size: 1.6rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 5%;
|
||||||
|
padding-bottom: 5%;
|
||||||
|
margin: 0.5rem auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.color_right{
|
||||||
|
width: 11rem;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666666;
|
||||||
|
.color_rgb_block{
|
||||||
|
display: flex;
|
||||||
|
.rgb_item{
|
||||||
|
margin-left: .2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.color_left{
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgb(153, 153, 153);
|
||||||
|
}
|
||||||
|
.color_right,.color_left{
|
||||||
|
>div{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.color_HEX_block,.color_rgb_block{
|
||||||
|
padding: .2rem .5rem;
|
||||||
|
box-shadow: inset 0 0 0 1px #ccc;
|
||||||
|
border-radius: .4rem;
|
||||||
|
justify-content: space-around;
|
||||||
|
text-transform:uppercase;
|
||||||
|
.color_block_bg{
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
// margin-right: .5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.color_block_bg{
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.get_color_block{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
.get_color_input{
|
||||||
|
width: 15rem;
|
||||||
|
height: 2.8rem;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 0.1rem solid #DCDCEC;
|
||||||
|
padding: 1rem 1.3rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #B7B7B7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.get_color_button{
|
||||||
|
padding: 0 .2rem;
|
||||||
|
height: 2.8rem;
|
||||||
|
background: #EFEEFF;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 3rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #343579;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
.icon-huoquduixiang{
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
color:#343579;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.get_color_des{
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload_item{
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.ant-upload-picture-card-wrapper{
|
||||||
|
.ant-upload-list{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.ant-upload-select-picture-card{
|
||||||
|
// margin: 0 2rem 2rem 0;
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 6rem;
|
||||||
|
height: 6rem;
|
||||||
|
border: 1px solid #F5F5F5;
|
||||||
|
vertical-align: top;
|
||||||
|
i{
|
||||||
|
zoom: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
301
src/component/Detail/DesignDetailEnd.vue
Normal file
301
src/component/Detail/DesignDetailEnd.vue
Normal file
@@ -0,0 +1,301 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail_modal_body_result">
|
||||||
|
|
||||||
|
|
||||||
|
<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
|
||||||
|
<div class="upload_title result_apparel" v-show="type_ == 1">
|
||||||
|
<i class="color_edit fi fi-bs-comments"></i>
|
||||||
|
<span>New Apparel</span>
|
||||||
|
</div>
|
||||||
|
<div v-show="type_ == 2" class="result_print">
|
||||||
|
<div>
|
||||||
|
<div class="upload_title">
|
||||||
|
<i class="color_edit fi fi-bs-comments"></i>
|
||||||
|
<span>New Print</span>
|
||||||
|
</div>
|
||||||
|
<div class="print_left">
|
||||||
|
<img src="" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="upload_title">
|
||||||
|
<i class="color_edit fi fi-bs-comments"></i>
|
||||||
|
<span>Placement</span>
|
||||||
|
</div>
|
||||||
|
<div class="print_right">
|
||||||
|
<div class="habit_Overal_Single">
|
||||||
|
<div
|
||||||
|
class="habit_Overal_Single_text"
|
||||||
|
:class="{ active: !overalSingle }"
|
||||||
|
>
|
||||||
|
Overal
|
||||||
|
</div>
|
||||||
|
<a-switch v-model:checked="overalSingle" />
|
||||||
|
<div
|
||||||
|
class="habit_Overal_Single_text"
|
||||||
|
:class="{ active: overalSingle }"
|
||||||
|
>
|
||||||
|
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>
|
||||||
|
</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="">
|
||||||
|
</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>
|
||||||
|
<span>New Color</span>
|
||||||
|
</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 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { defineComponent,computed,ref, h } 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'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: ["msg"],
|
||||||
|
components:{
|
||||||
|
Draggable,Sketch,
|
||||||
|
},
|
||||||
|
setup(prop) {
|
||||||
|
const store = useStore();
|
||||||
|
let type_ = ref(0);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//印花
|
||||||
|
let overalSingle = ref()
|
||||||
|
let systemDesignerPercentage = ref(30)
|
||||||
|
|
||||||
|
//颜色
|
||||||
|
let colorList = ref([{},{},{},{},{},{},{},{}])
|
||||||
|
return{
|
||||||
|
overalSingle,
|
||||||
|
systemDesignerPercentage,
|
||||||
|
type_,
|
||||||
|
colorList,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
//颜色
|
||||||
|
selectIndex:0,//选中的文件索引
|
||||||
|
getRGBA:{},
|
||||||
|
selectColor:{},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
//点击判断
|
||||||
|
init(num){
|
||||||
|
this.type_ = num
|
||||||
|
this.colorList[this.selectIndex] = this.$parent.selectColor
|
||||||
|
},
|
||||||
|
|
||||||
|
//印花
|
||||||
|
systemDesigner(num) {
|
||||||
|
console.log(num);
|
||||||
|
},
|
||||||
|
formatter(value) {
|
||||||
|
return `${value}%`;
|
||||||
|
},
|
||||||
|
//颜色
|
||||||
|
selectColorItem(index,color){
|
||||||
|
let hex
|
||||||
|
let parent = this.$parent
|
||||||
|
if(color.rgba?.r){
|
||||||
|
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
|
||||||
|
}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.tcxColor = ''
|
||||||
|
this.$parent.pantongName = ''
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.detail_modal_body_result{
|
||||||
|
width: 26%;
|
||||||
|
i{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.upload_title{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
&.upload_title:nth-child(1){
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
margin-left: 1rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//模型和印花
|
||||||
|
.result_apparel_print{
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.result_apparel_print_img{
|
||||||
|
flex: 1;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 35rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.result_print_img{
|
||||||
|
transform: scale(.7);
|
||||||
|
transform-origin: right top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//印花
|
||||||
|
.result_print{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.print_left{
|
||||||
|
img{
|
||||||
|
width: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.print_right{
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-switch) {
|
||||||
|
margin: 0 1rem;
|
||||||
|
background-color: #efefef;
|
||||||
|
}
|
||||||
|
:deep(.ant-switch-checked) {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.habit_System_Designer {
|
||||||
|
margin-top: 4rem;
|
||||||
|
transform: scale(.8);
|
||||||
|
|
||||||
|
:deep(.ant-slider-track),
|
||||||
|
:deep(.ant-slider-rail) {
|
||||||
|
height: .6rem;
|
||||||
|
background-color: #e1e1e1;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
|
||||||
|
:deep(.ant-slider-handle) {
|
||||||
|
background-color: #2d2e76 !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
: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 {
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//颜色
|
||||||
|
.modal_img{
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-left: 2rem;
|
||||||
|
&.modal_img::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modal_img_item{
|
||||||
|
margin: 0 1rem 1rem 0;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0.1rem solid #DCDCEC;
|
||||||
|
.color_content{
|
||||||
|
width: 7rem;
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
.color_content_body{
|
||||||
|
.color_des{
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select_upload_color{
|
||||||
|
border: 0.1rem solid #343579;
|
||||||
|
}
|
||||||
|
.upload_color{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
530
src/component/Detail/DesignDetailOld.vue
Normal file
530
src/component/Detail/DesignDetailOld.vue
Normal file
@@ -0,0 +1,530 @@
|
|||||||
|
<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>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="habit">
|
<div class="habit">
|
||||||
<div class="habit_button" @click="habitBtn" ref="stringg">
|
<div class="habit_button" @click="habitBtn" >
|
||||||
Workspace
|
Workspace
|
||||||
<i class="fi fi-bs-angle-down"></i>
|
<i class="fi fi-bs-angle-down"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -12,7 +12,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="habit_type" trigger="['click']">
|
<div class="habit_type" trigger="['click']">
|
||||||
<a-dropdown placement="bottomRight">
|
<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>
|
||||||
<a-button>
|
<a-button>
|
||||||
<UserOutlined />
|
<UserOutlined />
|
||||||
{{habitType.habitTypeone}}
|
{{habitType.habitTypeone}}
|
||||||
@@ -60,14 +65,14 @@
|
|||||||
</template>
|
</template>
|
||||||
<a-button>
|
<a-button>
|
||||||
<UserOutlined />
|
<UserOutlined />
|
||||||
上衣
|
{{ workspace.position }}
|
||||||
<DownOutlined />
|
<DownOutlined />
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-dropdown>
|
</a-dropdown>
|
||||||
</div>
|
</div>
|
||||||
<div class="habit_System_Designer">
|
<div class="habit_System_Designer">
|
||||||
<a-slider id="system_silder"
|
<a-slider id="system_silder"
|
||||||
v-model:value="value"
|
v-model:value="workspace.systemDesignerPercentage"
|
||||||
@afterChange="systemDesigner"
|
@afterChange="systemDesigner"
|
||||||
:tip-formatter="formatter"
|
:tip-formatter="formatter"
|
||||||
>
|
>
|
||||||
@@ -138,6 +143,13 @@ export default defineComponent({
|
|||||||
UserOutlined,
|
UserOutlined,
|
||||||
},
|
},
|
||||||
setup(){
|
setup(){
|
||||||
|
let workspace = ref({
|
||||||
|
sex:'male',
|
||||||
|
systemDesignerPercentage:30,
|
||||||
|
position:'top'
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
let checked:any= ref(true);
|
let checked:any= ref(true);
|
||||||
let value = ref<number>(30);
|
let value = ref<number>(30);
|
||||||
let tooltip = ref(true);
|
let tooltip = ref(true);
|
||||||
@@ -202,6 +214,7 @@ export default defineComponent({
|
|||||||
habitType,
|
habitType,
|
||||||
obj,
|
obj,
|
||||||
obj2,
|
obj2,
|
||||||
|
workspace
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -214,7 +227,6 @@ export default defineComponent({
|
|||||||
directives:{
|
directives:{
|
||||||
fade:{
|
fade:{
|
||||||
updated (el,model){
|
updated (el,model){
|
||||||
|
|
||||||
if(model.value){
|
if(model.value){
|
||||||
el.style.display="block"
|
el.style.display="block"
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -243,7 +255,7 @@ export default defineComponent({
|
|||||||
console.log("click left button", e);
|
console.log("click left button", e);
|
||||||
},
|
},
|
||||||
handleMenuClick(e: Event) {
|
handleMenuClick(e: Event) {
|
||||||
console.log("click", e);
|
// console.log("click", e);
|
||||||
this.getworkspace()
|
this.getworkspace()
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -254,13 +266,10 @@ export default defineComponent({
|
|||||||
return `${value}%`;
|
return `${value}%`;
|
||||||
},
|
},
|
||||||
habitBtn(){
|
habitBtn(){
|
||||||
const aa = this.$refs.stringg
|
|
||||||
// const aa = this.$refs.stringg;
|
|
||||||
// aa.style
|
|
||||||
|
|
||||||
this.habit = !this.habit
|
this.habit = !this.habit
|
||||||
if(!this.habit){
|
if(!this.habit){
|
||||||
this.model = false
|
this.model = false
|
||||||
|
console.log(this.habit);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
modelBtn(){
|
modelBtn(){
|
||||||
|
|||||||
@@ -410,7 +410,6 @@ export default defineComponent({
|
|||||||
return data
|
return data
|
||||||
})
|
})
|
||||||
this.store.commit('setColorboardList',newColorList)
|
this.store.commit('setColorboardList',newColorList)
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
recollection(){
|
recollection(){
|
||||||
|
|||||||
@@ -290,8 +290,6 @@ export default defineComponent({
|
|||||||
// this.store.commit("addGenerateFils", this.fileList);
|
// this.store.commit("addGenerateFils", this.fileList);
|
||||||
this.token = getCookie("token") || "";
|
this.token = getCookie("token") || "";
|
||||||
this.uploadUrl = getUploadUrl();
|
this.uploadUrl = getUploadUrl();
|
||||||
console.log(getUploadUrl());
|
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
getSketchLabel(value: any) {
|
getSketchLabel(value: any) {
|
||||||
@@ -334,14 +332,14 @@ export default defineComponent({
|
|||||||
|
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
this.checkbox[num].type = true
|
this.checkbox[num].type = true
|
||||||
|
this.$emit('generateCheckbox',this.checkbox[0].type)
|
||||||
|
this.checkboxImage = this.checkbox[1].type
|
||||||
|
if(this.checkboxImage){
|
||||||
|
this.sketchboardList.forEach((v:any)=>{
|
||||||
|
v.checked = false
|
||||||
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
this.$emit('generateCheckbox',this.checkbox[0].type)
|
|
||||||
this.checkboxImage = this.checkbox[1].type
|
|
||||||
if(this.checkboxImage){
|
|
||||||
this.sketchboardList.forEach((v:any)=>{
|
|
||||||
v.checked = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
getLibraryList() {
|
getLibraryList() {
|
||||||
// let data = {
|
// let data = {
|
||||||
@@ -363,8 +361,6 @@ export default defineComponent({
|
|||||||
// });
|
// });
|
||||||
},
|
},
|
||||||
fileUploadChange(data: any) {
|
fileUploadChange(data: any) {
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
let file = data.file;
|
let file = data.file;
|
||||||
if (file.status === "done") {
|
if (file.status === "done") {
|
||||||
let res = JSON.parse(file.xhr.response);
|
let res = JSON.parse(file.xhr.response);
|
||||||
@@ -458,7 +454,7 @@ export default defineComponent({
|
|||||||
this.selectImgListIds = [];
|
this.selectImgListIds = [];
|
||||||
this.imgList = [];
|
this.imgList = [];
|
||||||
this.currentPage = 1;
|
this.currentPage = 1;
|
||||||
this.pageSize = 10;
|
// this.pageSize = 10;
|
||||||
this.total = 0;
|
this.total = 0;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
<div class="my_material_header_right">
|
<div class="my_material_header_right">
|
||||||
<div class="content_search_block">
|
<div class="content_search_block">
|
||||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -44,10 +44,58 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="material_content_body scroll_style">
|
<div class="material_content_body scroll_style">
|
||||||
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
|
<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:img?.checked}">
|
<div class="content_img_item_block" :class="{active:file?.checked}">
|
||||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url" :alt="img.name"/>
|
<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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pin_block">
|
||||||
|
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
|
||||||
|
</div>
|
||||||
<!-- <div class="content_img_name">{{img.name}}</div> -->
|
<!-- <div class="content_img_name">{{img.name}}</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -134,6 +182,21 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
getSketchLabel(value:any) {
|
||||||
|
return (value: any) => {
|
||||||
|
let lable = "";
|
||||||
|
for (let item of this.disignTypeList) {
|
||||||
|
if (item.value === value) {
|
||||||
|
lable = item.label;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return lable;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
|
||||||
init(code:any){
|
init(code:any){
|
||||||
@@ -187,6 +250,10 @@ export default defineComponent({
|
|||||||
let aa:any = []
|
let aa:any = []
|
||||||
this.imgList = rv.content
|
this.imgList = rv.content
|
||||||
rv.content.forEach((item:any) => {
|
rv.content.forEach((item:any) => {
|
||||||
|
if(this.type_.type2 == 'Sketchboard'){
|
||||||
|
item.category = "Outwear";
|
||||||
|
item.categoryShow = false;
|
||||||
|
}
|
||||||
if(!item.id_){
|
if(!item.id_){
|
||||||
item.id_ = GO.id++
|
item.id_ = GO.id++
|
||||||
aa.push(item)
|
aa.push(item)
|
||||||
@@ -212,7 +279,23 @@ export default defineComponent({
|
|||||||
this.currentPage = 1
|
this.currentPage = 1
|
||||||
this.pageSize = 10
|
this.pageSize = 10
|
||||||
this.total = 0
|
this.total = 0
|
||||||
}
|
},
|
||||||
|
showFileCategory(file: any) {
|
||||||
|
file.categoryShow = true;
|
||||||
|
document.addEventListener("click", this.hiddenFileCategory);
|
||||||
|
},
|
||||||
|
selectFileCategory(file: any, cate: any) {
|
||||||
|
file.category = cate.value;
|
||||||
|
for (let item of (this.imgList as any)) {
|
||||||
|
item.categoryShow = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hiddenFileCategory() {
|
||||||
|
for (let item of (this.imgList as any)) {
|
||||||
|
item.categoryShow = false;
|
||||||
|
}
|
||||||
|
document.removeEventListener("click", this.hiddenFileCategory);
|
||||||
|
},
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@@ -383,6 +466,16 @@ export default defineComponent({
|
|||||||
// margin-bottom: 2.8rem;
|
// margin-bottom: 2.8rem;
|
||||||
margin: 0 2rem 2rem 0;
|
margin: 0 2rem 2rem 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
&.active{
|
||||||
|
height: 10rem;
|
||||||
|
margin: 0 2rem 4rem 0;
|
||||||
|
.pin_block{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pin_block{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.content_img_item_block{
|
.content_img_item_block{
|
||||||
// border: 0.1rem solid transparent;
|
// border: 0.1rem solid transparent;
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
|
|||||||
@@ -161,6 +161,7 @@ export default defineComponent({
|
|||||||
let moodb_className:any = ref([]);
|
let moodb_className:any = ref([]);
|
||||||
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
||||||
let layoutList:any = []//选中后随机生成的list
|
let layoutList:any = []//选中后随机生成的list
|
||||||
|
let layoutOpen = ref(false)
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
lessenList,
|
lessenList,
|
||||||
@@ -170,6 +171,7 @@ export default defineComponent({
|
|||||||
moodb_className,
|
moodb_className,
|
||||||
flex_direction,
|
flex_direction,
|
||||||
layoutList,
|
layoutList,
|
||||||
|
layoutOpen
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -225,7 +227,10 @@ export default defineComponent({
|
|||||||
let res = JSON.parse(file.xhr.response);
|
let res = JSON.parse(file.xhr.response);
|
||||||
file.imgUrl = res.data.url;
|
file.imgUrl = res.data.url;
|
||||||
file.resData = res.data;
|
file.resData = res.data;
|
||||||
file.type_ = 'upload';
|
file.type_ = {
|
||||||
|
type1:'upload',
|
||||||
|
type2:'Moodboard'
|
||||||
|
};
|
||||||
file.id_ = GO.id++
|
file.id_ = GO.id++
|
||||||
let fileList = this.fileList.filter(
|
let fileList = this.fileList.filter(
|
||||||
(v: any) => v.status === "done"
|
(v: any) => v.status === "done"
|
||||||
@@ -298,33 +303,51 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.log(this.fileList);
|
|
||||||
|
|
||||||
this.fileList.splice(moodboard,1)
|
this.fileList.splice(moodboard,1)
|
||||||
console.log(this.fileList);
|
|
||||||
|
|
||||||
this.store.commit("setMoodboardFile", this.fileList);
|
this.store.commit("setMoodboardFile", this.fileList);
|
||||||
}
|
}
|
||||||
this.store.commit("clearMoodTemplateId");
|
this.store.commit("clearMoodTemplateId");
|
||||||
},
|
},
|
||||||
|
|
||||||
recollection() {
|
recollection() {
|
||||||
this.fileList = JSON.parse(
|
let arr = JSON.parse(
|
||||||
JSON.stringify(
|
JSON.stringify(
|
||||||
this.store.state.UploadFilesModule.allBoardData
|
this.store.state.UploadFilesModule.allBoardData
|
||||||
.moodboardFiles
|
.moodboardFiles
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
let setboard = {
|
||||||
|
generate:[] as any,
|
||||||
|
material:[] as any,
|
||||||
|
moodboard:[] as any,
|
||||||
|
}
|
||||||
|
arr.forEach((v:any)=>{
|
||||||
|
if(v.type_.type1 == 'generate'){
|
||||||
|
setboard.generate.push(v)
|
||||||
|
}else if(v.type_.type1 == 'material'){
|
||||||
|
setboard.material.push(v)
|
||||||
|
}else{
|
||||||
|
setboard.moodboard.push(v)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
|
||||||
|
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
||||||
|
this.store.commit("setMoodboardFile", setboard.moodboard);
|
||||||
|
this.fileList = setboard.moodboard
|
||||||
let moodTemplateId =
|
let moodTemplateId =
|
||||||
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
|
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
|
||||||
this.store.commit("setMoodboardFile", this.fileList);
|
|
||||||
this.store.commit("setMoodTemplateId", moodTemplateId);
|
this.store.commit("setMoodTemplateId", moodTemplateId);
|
||||||
},
|
},
|
||||||
|
|
||||||
changeTemplateModal() {
|
changeTemplateModal() {
|
||||||
let layout:any = this.$refs.layout
|
if(this.layoutOpen){
|
||||||
|
let layout:any = this.$refs.layout
|
||||||
// layout.init('moodboard')
|
// layout.init('moodboard')
|
||||||
layout.init()
|
layout.init()
|
||||||
|
}else{
|
||||||
|
message.error('Please click Layout to sort randomlys')
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
layout(){
|
layout(){
|
||||||
let arr = this.store.state.UploadFilesModule.moodboard
|
let arr = this.store.state.UploadFilesModule.moodboard
|
||||||
@@ -337,6 +360,7 @@ export default defineComponent({
|
|||||||
this.flex_direction = false
|
this.flex_direction = false
|
||||||
}
|
}
|
||||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||||
|
this.layoutOpen = true
|
||||||
},
|
},
|
||||||
setmoodbClass(val:any){
|
setmoodbClass(val:any){
|
||||||
this.moodb_className = val
|
this.moodb_className = val
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
|
|
||||||
<div class="img_block_item">
|
<div class="img_block_item">
|
||||||
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
|
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
|
||||||
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
|
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
|
||||||
<div class="color_content_body">
|
<div class="color_content_body">
|
||||||
<div class="color_des">{{color.tcx}}</div>
|
<div class="color_des">{{color.tcx}}</div>
|
||||||
<div class="color_des">{{color.name}}</div>
|
<div class="color_des">{{color.name}}</div>
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="img_block_item">
|
<div class="img_block_item">
|
||||||
<div class="lager_img_item" v-for="(skecth) in allBoardData.skecthboardFiles" :key="skecth">
|
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
|
||||||
<div class="all_img_item_block">
|
<div class="all_img_item_block">
|
||||||
<img class="all_img_content" :src="skecth.imgUrl">
|
<img class="all_img_content" :src="skecth.imgUrl">
|
||||||
</div>
|
</div>
|
||||||
@@ -66,7 +66,9 @@ export default defineComponent({
|
|||||||
return {
|
return {
|
||||||
allBoardData,
|
allBoardData,
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
mounted () {
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|||||||
@@ -37,9 +37,13 @@
|
|||||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
<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>
|
||||||
<div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
|
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||||
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
|
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
|
||||||
<div class="delete_file_block" @click.stop="deleteFile(file)">Delete</div>
|
<div class="delete_file_block" @click.stop="deleteFile(file)">
|
||||||
|
<span
|
||||||
|
class="icon iconfont icon-shanchu"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pin_block" v-show="file?.status === 'done'">
|
<div class="pin_block" v-show="file?.status === 'done'">
|
||||||
@@ -86,7 +90,7 @@
|
|||||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
|
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
|
||||||
<img v-lazy="item.imgUrl">
|
<img v-lazy="item.imgUrl">
|
||||||
<div class="checked" >
|
<div class="checked" >
|
||||||
<i class="fi fi-rr-trash"></i>
|
<i class="fi fi-rr-trash"></i>
|
||||||
@@ -97,16 +101,19 @@
|
|||||||
<div v-show="openClick == 3" class="modal_accomplish">
|
<div v-show="openClick == 3" class="modal_accomplish">
|
||||||
<div class="input_box">
|
<div class="input_box">
|
||||||
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
|
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
|
||||||
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
|
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
|
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
|
||||||
<img :src="item.imgUrl">
|
<img :src="item.imgUrl" @click.stop="generageAdd(item)">
|
||||||
|
<div class="pin_block">
|
||||||
|
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> -->
|
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -120,6 +127,8 @@ import { message,Upload} from 'ant-design-vue';
|
|||||||
import Cropper from '@/component/HomePage/Cropper.vue'
|
import Cropper from '@/component/HomePage/Cropper.vue'
|
||||||
import Material from '@/component/HomePage/Material.vue'
|
import Material from '@/component/HomePage/Material.vue'
|
||||||
import Generate from "@/component/HomePage/Generate.vue";
|
import Generate from "@/component/HomePage/Generate.vue";
|
||||||
|
import GO from "@/tool/GO";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
Cropper,
|
Cropper,
|
||||||
@@ -214,6 +223,12 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
fileUploadChange(data:any){
|
fileUploadChange(data:any){
|
||||||
let file = data.file
|
let file = data.file
|
||||||
|
file.id_ = GO.id++
|
||||||
|
file.type_ = {
|
||||||
|
type1:'upload',
|
||||||
|
type2:'Moodboard'
|
||||||
|
};
|
||||||
|
file.pin = false;
|
||||||
let Cropper:any = this.$refs.Cropper
|
let Cropper:any = this.$refs.Cropper
|
||||||
if(this.currentFileNum === 1){
|
if(this.currentFileNum === 1){
|
||||||
var reader = new FileReader();
|
var reader = new FileReader();
|
||||||
@@ -487,10 +502,29 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
recollection(){
|
recollection(){
|
||||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
|
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
|
||||||
this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
|
let setboard = {
|
||||||
|
generate:[] as any,
|
||||||
|
material:[] as any,
|
||||||
|
moodboard:[] as any,
|
||||||
|
}
|
||||||
|
arr.forEach((v:any)=>{
|
||||||
|
if(v.type_.type1 == 'generate'){
|
||||||
|
setboard.generate.push(v)
|
||||||
|
}else if(v.type_.type1 == 'material'){
|
||||||
|
setboard.material.push(v)
|
||||||
|
}else{
|
||||||
|
setboard.moodboard.push(v)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.store.commit("setPrintboardGenerateFiles", setboard.generate);
|
||||||
|
this.store.commit("setPrintboardMaterialFiles", setboard.material);
|
||||||
|
this.store.commit("setPrintboardFile", setboard.moodboard);
|
||||||
|
this.fileList = setboard.moodboard
|
||||||
|
// this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
|
||||||
this.store.commit('setPrintboardFile',this.fileList)
|
this.store.commit('setPrintboardFile',this.fileList)
|
||||||
this.store.commit('setGeneratePrintFile',this.printImgList)
|
// this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
confirmSelect(event:any){
|
confirmSelect(event:any){
|
||||||
@@ -655,7 +689,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.upload_file_item{
|
.upload_file_item{
|
||||||
margin: 0 2rem 4rem 0;
|
margin: 0 2rem 5rem 0;
|
||||||
// margin: 0 2rem 2rem 0;
|
// margin: 0 2rem 2rem 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
@@ -668,10 +702,7 @@ export default defineComponent({
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pin_block{
|
|
||||||
text-align: center;
|
|
||||||
margin-top:1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.upload_component{
|
&.upload_component{
|
||||||
border: none;
|
border: none;
|
||||||
@@ -816,6 +847,8 @@ export default defineComponent({
|
|||||||
.modal_right{
|
.modal_right{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 3rem;
|
margin-left: 3rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
.modal_layout,.modal_accomplish{
|
.modal_layout,.modal_accomplish{
|
||||||
.modal_text{
|
.modal_text{
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@@ -869,14 +902,18 @@ export default defineComponent({
|
|||||||
height: 30rem;
|
height: 30rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: hidden;
|
||||||
|
&.modal_accomplish::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.modal_text{
|
.modal_text{
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
padding-block: 2rem;
|
padding-block: 2rem;
|
||||||
}
|
}
|
||||||
.input_box{
|
.input_box{
|
||||||
input{
|
input{
|
||||||
&.forbidden{
|
&.forbidden{
|
||||||
cursor:not-allowed;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -886,7 +923,7 @@ export default defineComponent({
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
.modal_imgItem{
|
.modal_imgItem{
|
||||||
margin: 0 2rem 2rem 0;
|
margin: 0 2rem 5rem 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
|
|||||||
@@ -173,8 +173,56 @@
|
|||||||
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
|
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
|
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
|
||||||
<img :src="item.imgUrl">
|
<img :src="item.imgUrl" @click="generageAdd(item)">
|
||||||
|
<div 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 sketchCatecoryList"
|
||||||
|
:key="index"
|
||||||
|
@click.stop="
|
||||||
|
selectFileCategory(
|
||||||
|
item,
|
||||||
|
cate
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ cate.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pin_block">
|
||||||
|
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -314,7 +362,10 @@ export default defineComponent({
|
|||||||
file.category = "Outwear";
|
file.category = "Outwear";
|
||||||
file.categoryShow = false;
|
file.categoryShow = false;
|
||||||
file.id_ = GO.id++
|
file.id_ = GO.id++
|
||||||
file.type_ = 'upload';
|
file.type_ = {
|
||||||
|
type1:'upload',
|
||||||
|
type2:'Moodboard'
|
||||||
|
};
|
||||||
let fileList = this.fileList.filter(
|
let fileList = this.fileList.filter(
|
||||||
(v: any) => v.status === "done"
|
(v: any) => v.status === "done"
|
||||||
);
|
);
|
||||||
@@ -355,13 +406,32 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
selectFileCategory(file: any, cate: any) {
|
selectFileCategory(file: any, cate: any) {
|
||||||
file.category = cate.value;
|
|
||||||
this.store.commit("setSketchboardFile", this.fileList);
|
if(this.openClick == 3){
|
||||||
|
for (let item of this.generateList) {
|
||||||
|
item.categoryShow = false;
|
||||||
|
}
|
||||||
|
file.category = cate.value;
|
||||||
|
// this.store.commit("sketchGenerateFiles", this.fileList);
|
||||||
|
}else{
|
||||||
|
for (let item of this.fileList) {
|
||||||
|
item.categoryShow = false;
|
||||||
|
}
|
||||||
|
file.category = cate.value;
|
||||||
|
this.store.commit("setSketchboardFile", this.fileList);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
hiddenFileCategory() {
|
hiddenFileCategory() {
|
||||||
for (let item of this.fileList) {
|
if(this.openClick == 3){
|
||||||
item.categoryShow = false;
|
for (let item of this.generateList) {
|
||||||
}
|
item.categoryShow = false;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
for (let item of this.fileList) {
|
||||||
|
item.categoryShow = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.removeEventListener("click", this.hiddenFileCategory);
|
document.removeEventListener("click", this.hiddenFileCategory);
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -383,13 +453,30 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
recollection() {
|
recollection() {
|
||||||
this.fileList = JSON.parse(
|
let arr = JSON.parse(
|
||||||
JSON.stringify(
|
JSON.stringify(
|
||||||
this.store.state.UploadFilesModule.allBoardData
|
this.store.state.UploadFilesModule.allBoardData
|
||||||
.skecthboardFiles
|
.sketchboardFiles
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
this.store.commit("setSketchboardFile", this.fileList);
|
let setboard = {
|
||||||
|
generate:[] as any,
|
||||||
|
material:[] as any,
|
||||||
|
moodboard:[] as any,
|
||||||
|
}
|
||||||
|
arr.forEach((v:any)=>{
|
||||||
|
if(v.type_.type1 == 'generate'){
|
||||||
|
setboard.generate.push(v)
|
||||||
|
}else if(v.type_.type1 == 'material'){
|
||||||
|
setboard.material.push(v)
|
||||||
|
}else{
|
||||||
|
setboard.moodboard.push(v)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
|
||||||
|
this.store.commit("setSketchboardMaterialFiles", setboard.material);
|
||||||
|
this.store.commit("setSketchboardFile", setboard.moodboard);
|
||||||
|
this.fileList = setboard.moodboard
|
||||||
},
|
},
|
||||||
confirmSelect(event: any) {
|
confirmSelect(event: any) {
|
||||||
for (let item of event) {
|
for (let item of event) {
|
||||||
@@ -623,77 +710,9 @@ export default defineComponent({
|
|||||||
display: 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.pin_block{
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -702,6 +721,8 @@ export default defineComponent({
|
|||||||
.modal_right{
|
.modal_right{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 3rem;
|
margin-left: 3rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
.modal_layout,.modal_accomplish{
|
.modal_layout,.modal_accomplish{
|
||||||
.modal_text{
|
.modal_text{
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@@ -755,11 +776,17 @@ export default defineComponent({
|
|||||||
height: 30rem;
|
height: 30rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: hidden;
|
||||||
|
&.modal_accomplish::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.modal_text{
|
.modal_text{
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
padding-block: 2rem;
|
padding-block: 2rem;
|
||||||
}
|
}
|
||||||
.input_box{
|
.input_box{
|
||||||
|
z-index: 1;
|
||||||
input{
|
input{
|
||||||
&.forbidden{
|
&.forbidden{
|
||||||
cursor:not-allowed;
|
cursor:not-allowed;
|
||||||
@@ -772,7 +799,7 @@ export default defineComponent({
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
.modal_imgItem{
|
.modal_imgItem{
|
||||||
margin: 0 2rem 2rem 0;
|
margin: 0 2rem 4rem 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
@@ -792,6 +819,7 @@ export default defineComponent({
|
|||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<div v-show="collectionStep === 2">Printboard</div>
|
<div v-show="collectionStep === 2">Printboard</div>
|
||||||
<div v-show="collectionStep === 3">Colorboard</div>
|
<div v-show="collectionStep === 3">Colorboard</div>
|
||||||
<div v-show="collectionStep === 4">Sketchboard</div>
|
<div v-show="collectionStep === 4">Sketchboard</div>
|
||||||
<div v-show="collectionStep === 5">Markets Sketch</div>
|
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
|
||||||
<div class="collection_title_text_intro">select moodboard for your collection</div>
|
<div class="collection_title_text_intro">select moodboard for your collection</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -32,8 +32,9 @@
|
|||||||
<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
|
<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
|
||||||
<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
|
<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
|
||||||
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||||
<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
|
<i v-if="collectionStep < 4" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
|
||||||
<i v-else class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i>
|
<!-- <i v-else class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i> -->
|
||||||
|
<i v-else class="fi fi-rr-check" @click.stop="finishCollection()"></i>
|
||||||
<!-- <span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->
|
<!-- <span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -42,7 +43,7 @@
|
|||||||
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
|
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
|
||||||
<ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
|
<ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
|
||||||
<SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
|
<SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
|
||||||
<MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload>
|
<!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
@@ -90,7 +91,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
recollection(){
|
recollection(){
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
|
let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload']
|
||||||
|
// let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
|
||||||
for(let child of childredCom){
|
for(let child of childredCom){
|
||||||
let childRef:any = this.$refs[child]
|
let childRef:any = this.$refs[child]
|
||||||
childRef.recollection()
|
childRef.recollection()
|
||||||
@@ -254,7 +256,7 @@ export default defineComponent({
|
|||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: 8rem 5rem !important;
|
padding: 8rem 5rem !important;
|
||||||
// height: calc(65vh - 6.4rem);
|
// height: calc(65vh - 6.4rem);
|
||||||
height: 60rem;
|
height: 65rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,12 +20,12 @@
|
|||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout_nav">
|
<div class="layout_nav">
|
||||||
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
|
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)">
|
||||||
<img :src="item.imgUrl">
|
<img :src="item.imgUrl">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
|
<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)" ref="content" >
|
<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">
|
||||||
<ul v-show="item.setPitch" class="layout_btn" >
|
<ul v-show="item.setPitch" class="layout_btn" >
|
||||||
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
||||||
@@ -109,7 +109,7 @@ export default defineComponent({
|
|||||||
openClick,
|
openClick,
|
||||||
drag,
|
drag,
|
||||||
layoutList,
|
layoutList,
|
||||||
content
|
content,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -491,11 +491,15 @@ export default defineComponent({
|
|||||||
this.moodbList = this.moodb[layoutList.length-1]
|
this.moodbList = this.moodb[layoutList.length-1]
|
||||||
this.moodbClassName = this.moodb_className
|
this.moodbClassName = this.moodb_className
|
||||||
},
|
},
|
||||||
setpitch(item:any){
|
setpitch(item:any,index:any){
|
||||||
this.layoutList.forEach((v:any)=>{
|
this.layoutList.forEach((v:any)=>{
|
||||||
v.setPitch = false
|
v.setPitch = false
|
||||||
})
|
})
|
||||||
item.setPitch = true
|
item.setPitch = true
|
||||||
|
if(this.content){
|
||||||
|
(this.content as any)[index].style.zIndex = GO.zIndex++
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
setmoodb(item:any){
|
setmoodb(item:any){
|
||||||
this.moodbClassName = item
|
this.moodbClassName = item
|
||||||
@@ -593,7 +597,6 @@ export default defineComponent({
|
|||||||
v.setPitch = false
|
v.setPitch = false
|
||||||
})
|
})
|
||||||
let layoutCentent = document.getElementById('layoutCentent')
|
let layoutCentent = document.getElementById('layoutCentent')
|
||||||
console.log(layoutCentent);
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
console.log(domTurnImg(layoutCentent));
|
console.log(domTurnImg(layoutCentent));
|
||||||
this.layout = false
|
this.layout = false
|
||||||
@@ -752,6 +755,11 @@ export default defineComponent({
|
|||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
}
|
}
|
||||||
|
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
|
||||||
|
// opacity: 0;
|
||||||
|
width: .8rem;
|
||||||
|
height: .8rem;
|
||||||
|
}
|
||||||
.layout_angle_tr{
|
.layout_angle_tr{
|
||||||
right: 0%;
|
right: 0%;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
@@ -1,76 +0,0 @@
|
|||||||
import {Module} from 'vuex'
|
|
||||||
import {RootState} from '../index'
|
|
||||||
import { message } from "ant-design-vue";
|
|
||||||
import UploadFile from './uploadFile'
|
|
||||||
|
|
||||||
interface UploadList{
|
|
||||||
moodboardList:any,
|
|
||||||
generateList:any,
|
|
||||||
MaterialList:any,
|
|
||||||
}
|
|
||||||
|
|
||||||
const Moodboard : Module<UploadList,RootState> = {
|
|
||||||
state:{
|
|
||||||
moodboardList:[],
|
|
||||||
generateList:[],
|
|
||||||
MaterialList:[],
|
|
||||||
},
|
|
||||||
mutations:{
|
|
||||||
setMoodboardFile(state,files){
|
|
||||||
state.moodboardList = files;
|
|
||||||
// (UploadFile.mutations as any).setMoodboard();
|
|
||||||
},
|
|
||||||
|
|
||||||
addGenerateMaterialFils(state,data){
|
|
||||||
let file
|
|
||||||
let arr = [...state.generateList,...state.MaterialList,...state.moodboardList]
|
|
||||||
if(data.type_ == 'generate'){
|
|
||||||
file = state.generateList
|
|
||||||
}else{
|
|
||||||
file = state.MaterialList
|
|
||||||
}
|
|
||||||
if(file.length == 0){
|
|
||||||
if(arr.length >= 8){
|
|
||||||
message.error('You can select up to 8 images')
|
|
||||||
}else{
|
|
||||||
data.checked = true
|
|
||||||
file.push(data)
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
let str = true
|
|
||||||
for (let index = 0; index < file.length; index++) {
|
|
||||||
if(file[index].id_ == data.id_){
|
|
||||||
// data.id_ = GO.id++
|
|
||||||
str = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(str){
|
|
||||||
if(arr.length >= 8){
|
|
||||||
message.error('You can select up to 8 images')
|
|
||||||
}else{
|
|
||||||
data.checked = true
|
|
||||||
file.push(data)
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
data.checked = false
|
|
||||||
file = file.filter((v:any)=> v.id_ != data.id_)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(data.type_ == 'generate'){
|
|
||||||
state.generateList = file
|
|
||||||
}else{
|
|
||||||
state.MaterialList = file
|
|
||||||
}
|
|
||||||
// (UploadFile.mutations as any).setMoodboard();
|
|
||||||
},
|
|
||||||
setGenerateFils(state,files){
|
|
||||||
state.generateList = files
|
|
||||||
// (UploadFile.mutations as any).setMoodboard();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actions:{
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Moodboard
|
|
||||||
@@ -46,6 +46,14 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
setMoodboardFile(state,files){
|
setMoodboardFile(state,files){
|
||||||
state.moodboardFiles = files
|
state.moodboardFiles = files
|
||||||
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
|
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
|
||||||
|
},
|
||||||
|
setMoodboardGenerateFiles(state,files){
|
||||||
|
state.moodboardGenerateFiles = files
|
||||||
|
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
|
||||||
|
},
|
||||||
|
setMoodboardMaterialFiles(state,files){
|
||||||
|
state.moodboardMaterialFiles = files
|
||||||
|
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
|
||||||
},
|
},
|
||||||
addGenerateMaterialFils(state,data){
|
addGenerateMaterialFils(state,data){
|
||||||
let file
|
let file
|
||||||
@@ -119,13 +127,27 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
setSketchboardFile(state,files){
|
setSketchboardFile(state,files){
|
||||||
state.sketchboardFiles = files
|
state.sketchboardFiles = files
|
||||||
state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]
|
state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]
|
||||||
|
},
|
||||||
|
setSketchboardGenerateFiles(state,files){
|
||||||
|
state.sketchGenerateFiles = files
|
||||||
|
state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]
|
||||||
|
},
|
||||||
|
setSketchboardMaterialFiles(state,files){
|
||||||
|
state.sketchMaterialFiles = files
|
||||||
|
state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]
|
||||||
},
|
},
|
||||||
setPrintboardFile(state,files){
|
setPrintboardFile(state,files){
|
||||||
state.printboardFiles = files
|
state.printboardFiles = files
|
||||||
state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]
|
state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]
|
||||||
},
|
},
|
||||||
|
setPrintboardGenerateFiles(state,files){
|
||||||
|
state.printGenerateFiles = files
|
||||||
|
state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]
|
||||||
|
},
|
||||||
|
setPrintboardMaterialFiles(state,files){
|
||||||
|
state.printMaterialFiles = files
|
||||||
|
state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
setColorboardList(state,colorBoards){
|
setColorboardList(state,colorBoards){
|
||||||
@@ -137,7 +159,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
setAllBoardData(state){
|
setAllBoardData(state){
|
||||||
state.allBoardData = {
|
state.allBoardData = {
|
||||||
moodboardFiles:state.moodboard,
|
moodboardFiles:state.moodboard,
|
||||||
printboardFiles:state.printboardFiles,
|
printboardFiles:state.printboard,
|
||||||
colorBoards:state.colorBoards,
|
colorBoards:state.colorBoards,
|
||||||
sketchboardFiles:state.sketchboard,
|
sketchboardFiles:state.sketchboard,
|
||||||
marketingSketchFiles:state.marketingSketchFiles,
|
marketingSketchFiles:state.marketingSketchFiles,
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ const getJpeg = dom =>{
|
|||||||
html2canvas(dom,{useCORS: true,}).then(canvas =>{
|
html2canvas(dom,{useCORS: true,}).then(canvas =>{
|
||||||
const jpeg = canvas.toDataURL('image/jpeg',1.0);
|
const jpeg = canvas.toDataURL('image/jpeg',1.0);
|
||||||
resolve(base64ToFile(jpeg))
|
resolve(base64ToFile(jpeg))
|
||||||
console.log(jpeg);
|
console.log(jpeg,'=========');
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -394,6 +394,8 @@ export default defineComponent({
|
|||||||
designNewCollection() {
|
designNewCollection() {
|
||||||
let { colorBoards } =
|
let { colorBoards } =
|
||||||
this.store.state.UploadFilesModule.allBoardData;
|
this.store.state.UploadFilesModule.allBoardData;
|
||||||
|
// console.log(colorBoards);
|
||||||
|
|
||||||
if (!colorBoards || colorBoards?.length < 1) {
|
if (!colorBoards || colorBoards?.length < 1) {
|
||||||
message.error(
|
message.error(
|
||||||
"You must choose one or more colors for further process."
|
"You must choose one or more colors for further process."
|
||||||
@@ -460,20 +462,21 @@ export default defineComponent({
|
|||||||
let {
|
let {
|
||||||
moodboardFiles,
|
moodboardFiles,
|
||||||
printboardFiles,
|
printboardFiles,
|
||||||
generatePrintFiles,
|
// generatePrintFiles,
|
||||||
colorBoards,
|
colorBoards,
|
||||||
skecthboardFiles,
|
sketchboardFiles,
|
||||||
marketingSketchFiles,
|
marketingSketchFiles,
|
||||||
moodTemplateId,
|
moodTemplateId,
|
||||||
} = this.store.state.UploadFilesModule.allBoardData;
|
} = this.store.state.UploadFilesModule.allBoardData;
|
||||||
let new_printboardFiles =
|
// let new_printboardFiles =
|
||||||
printboardFiles.concat(generatePrintFiles);
|
// printboardFiles.concat(generatePrintFiles);
|
||||||
let data: any = {
|
let data: any = {
|
||||||
colorBoards: this.getColorBoard(colorBoards),
|
colorBoards: this.getColorBoard(colorBoards),
|
||||||
marketingSketchs: this.getBoardId(marketingSketchFiles),
|
marketingSketchs: this.getBoardId(marketingSketchFiles),
|
||||||
moodBoards: this.getBoardId(moodboardFiles),
|
moodBoards: this.getBoardId(moodboardFiles),
|
||||||
printBoards: this.getPrintId(new_printboardFiles),
|
printBoards: this.getPrintId(printboardFiles),
|
||||||
sketchBoards: this.getSkecthBoard(skecthboardFiles),
|
// printBoards: this.getPrintId(new_printboardFiles),
|
||||||
|
sketchBoards: this.getSkecthBoard(sketchboardFiles),
|
||||||
switchCategory: !this.switch_open ? this.designType : "",
|
switchCategory: !this.switch_open ? this.designType : "",
|
||||||
singleOverall: !this.switch_open ? "single" : "overall",
|
singleOverall: !this.switch_open ? "single" : "overall",
|
||||||
systemScale: this.system_scale_value / 100,
|
systemScale: this.system_scale_value / 100,
|
||||||
|
|||||||
Reference in New Issue
Block a user