commit
This commit is contained in:
WangXiaoDong
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- designDetailShow -->
|
||||
<a-modal class="design_detail_modal_component"
|
||||
v-model:visible="designDetailShow"
|
||||
:footer="null"
|
||||
@@ -7,49 +8,85 @@
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
|
||||
>
|
||||
<template #closeIcon>
|
||||
<!-- <template #closeIcon>
|
||||
<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_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="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">
|
||||
<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 class="detail_modal_body_right">
|
||||
<div class="detail_modal_body_category">
|
||||
<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 class="clothes_detail_item clothes_detail_item_apparel">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Apparel</div>
|
||||
<i class="fi fi-rr-edit"></i>
|
||||
</div>
|
||||
<img src="" alt="" class="centent" @click="openCurrent(1)">
|
||||
</div>
|
||||
<div class="clothes_detail_item clothes_detail_item_print">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<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 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>
|
||||
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
|
||||
|
||||
</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">
|
||||
@@ -83,6 +120,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref } from 'vue'
|
||||
import ElementReplace from '@/component/Detail/ElementReplace.vue'
|
||||
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
||||
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { Https } from "@/tool/https";
|
||||
@@ -92,6 +130,7 @@ export default defineComponent({
|
||||
ElementReplace,
|
||||
AccessoryReplace,
|
||||
Draggable,
|
||||
DesignDetailAlter
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
@@ -101,23 +140,50 @@ export default defineComponent({
|
||||
index:0,
|
||||
collectionList:[],
|
||||
type:'',
|
||||
|
||||
})//父组件传过来的数据
|
||||
return{
|
||||
designItemDetail,
|
||||
store,
|
||||
parentData
|
||||
parentData,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
loadingShow:false,
|
||||
designDetailShow:false,
|
||||
designDetailShow:true,
|
||||
designShowPrview:1, //展示图片预览步骤
|
||||
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
||||
imgListr:[
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
|
||||
id: 4,
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
openCurrent(num: Number) {
|
||||
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
||||
DesignDetailAlter.init(num)
|
||||
|
||||
if(num ==2 ){
|
||||
}
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
if(this.designShowPrview == 1){
|
||||
this.designDetailShow = false
|
||||
@@ -127,7 +193,7 @@ export default defineComponent({
|
||||
this.designShowPrview = 1
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
showDesignDetailModal(data:any){
|
||||
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
|
||||
this.parentData = data
|
||||
@@ -273,7 +339,35 @@ export default defineComponent({
|
||||
<style lang="less">
|
||||
.design_detail_modal_component{
|
||||
color: #000;
|
||||
|
||||
max-width: 1150px ;
|
||||
.design_title_text{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,.65);
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
.design_title_text_intro{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0,0,0,.45);
|
||||
}
|
||||
}
|
||||
|
||||
.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{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
@@ -286,26 +380,29 @@ export default defineComponent({
|
||||
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;
|
||||
}
|
||||
}
|
||||
.design_closeIcon{
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
.fi-rr-cross-small::before{
|
||||
padding: .2rem;
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.turn_button{
|
||||
width: 3.6rem;
|
||||
@@ -335,78 +432,111 @@ export default defineComponent({
|
||||
|
||||
|
||||
.design_detail_modal_body{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1.5rem 1rem 2.5rem;
|
||||
// padding: 1.5rem 1rem 2.5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.detail_modal_body_left{
|
||||
width: 43.3rem;
|
||||
.detail_modal_body_img{
|
||||
// width: 43.3rem;
|
||||
width: 23%;
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: relative;
|
||||
.detial_img{
|
||||
max-width: 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{
|
||||
width: calc(100% - 44rem);
|
||||
.detail_modal_body_category{
|
||||
width: 17%;
|
||||
height: 100%;
|
||||
|
||||
.detail_modal_right_top{
|
||||
width: 100%;
|
||||
height: calc(100% - 3.9rem);
|
||||
height: calc(100% - 3.9rem);
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
|
||||
.clothes_detail_item{
|
||||
padding-left: 1.5rem;
|
||||
.centent{
|
||||
cursor: pointer;
|
||||
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.clothes_item_header{
|
||||
height: 6.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
// height: 6.4rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
color: #000000;
|
||||
|
||||
justify-content: space-between;
|
||||
.icon-dangqianweizhi{
|
||||
font-size: 1.8rem;
|
||||
color: #000000;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
i{
|
||||
font-size: 1.8rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.color_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ebe9e9;
|
||||
.color_content{
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.color_content_body{
|
||||
.color_des{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&:nth-child(4n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&.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{
|
||||
@@ -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>
|
||||
<div class="habit">
|
||||
<div class="habit_button" @click="habitBtn" ref="stringg">
|
||||
<div class="habit_button" @click="habitBtn" >
|
||||
Workspace
|
||||
<i class="fi fi-bs-angle-down"></i>
|
||||
</div>
|
||||
@@ -12,7 +12,12 @@
|
||||
</div>
|
||||
<div class="habit_type" trigger="['click']">
|
||||
<a-dropdown placement="bottomRight">
|
||||
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick">
|
||||
<a-menu-item key="1"> 上衣 </a-menu-item>
|
||||
<a-menu-item key="2"> 裤子 </a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button>
|
||||
<UserOutlined />
|
||||
{{habitType.habitTypeone}}
|
||||
@@ -60,14 +65,14 @@
|
||||
</template>
|
||||
<a-button>
|
||||
<UserOutlined />
|
||||
上衣
|
||||
{{ workspace.position }}
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<div class="habit_System_Designer">
|
||||
<a-slider id="system_silder"
|
||||
v-model:value="value"
|
||||
v-model:value="workspace.systemDesignerPercentage"
|
||||
@afterChange="systemDesigner"
|
||||
:tip-formatter="formatter"
|
||||
>
|
||||
@@ -138,6 +143,13 @@ export default defineComponent({
|
||||
UserOutlined,
|
||||
},
|
||||
setup(){
|
||||
let workspace = ref({
|
||||
sex:'male',
|
||||
systemDesignerPercentage:30,
|
||||
position:'top'
|
||||
|
||||
|
||||
})
|
||||
let checked:any= ref(true);
|
||||
let value = ref<number>(30);
|
||||
let tooltip = ref(true);
|
||||
@@ -202,6 +214,7 @@ export default defineComponent({
|
||||
habitType,
|
||||
obj,
|
||||
obj2,
|
||||
workspace
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -214,7 +227,6 @@ export default defineComponent({
|
||||
directives:{
|
||||
fade:{
|
||||
updated (el,model){
|
||||
|
||||
if(model.value){
|
||||
el.style.display="block"
|
||||
setTimeout(() => {
|
||||
@@ -243,7 +255,7 @@ export default defineComponent({
|
||||
console.log("click left button", e);
|
||||
},
|
||||
handleMenuClick(e: Event) {
|
||||
console.log("click", e);
|
||||
// console.log("click", e);
|
||||
this.getworkspace()
|
||||
|
||||
},
|
||||
@@ -254,13 +266,10 @@ export default defineComponent({
|
||||
return `${value}%`;
|
||||
},
|
||||
habitBtn(){
|
||||
const aa = this.$refs.stringg
|
||||
// const aa = this.$refs.stringg;
|
||||
// aa.style
|
||||
|
||||
this.habit = !this.habit
|
||||
if(!this.habit){
|
||||
this.model = false
|
||||
console.log(this.habit);
|
||||
}
|
||||
},
|
||||
modelBtn(){
|
||||
|
||||
@@ -410,7 +410,6 @@ export default defineComponent({
|
||||
return data
|
||||
})
|
||||
this.store.commit('setColorboardList',newColorList)
|
||||
|
||||
},
|
||||
|
||||
recollection(){
|
||||
|
||||
@@ -290,8 +290,6 @@ export default defineComponent({
|
||||
// this.store.commit("addGenerateFils", this.fileList);
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
console.log(getUploadUrl());
|
||||
|
||||
},
|
||||
computed: {
|
||||
getSketchLabel(value: any) {
|
||||
@@ -334,14 +332,14 @@ export default defineComponent({
|
||||
|
||||
nextTick().then(()=>{
|
||||
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() {
|
||||
// let data = {
|
||||
@@ -363,8 +361,6 @@ export default defineComponent({
|
||||
// });
|
||||
},
|
||||
fileUploadChange(data: any) {
|
||||
console.log(data);
|
||||
|
||||
let file = data.file;
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
@@ -458,7 +454,7 @@ export default defineComponent({
|
||||
this.selectImgListIds = [];
|
||||
this.imgList = [];
|
||||
this.currentPage = 1;
|
||||
this.pageSize = 10;
|
||||
// this.pageSize = 10;
|
||||
this.total = 0;
|
||||
},
|
||||
},
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<div class="my_material_header_right">
|
||||
<div class="content_search_block">
|
||||
<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>
|
||||
@@ -44,10 +44,58 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<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_block" :class="{active:img?.checked}">
|
||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url" :alt="img.name"/>
|
||||
<div class="content_img_item" v-for="(file) in imgList" :key="file.id" :class="{active:type_.type2 !== 'Moodboard'}">
|
||||
<div class="content_img_item_block" :class="{active:file?.checked}">
|
||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
|
||||
<div class="operate_file_block" v-if="type_.type2 == 'Sketchboard'">
|
||||
<div class="select_img_type">
|
||||
<div
|
||||
class="select_category"
|
||||
@click.stop="showFileCategory(file)"
|
||||
>
|
||||
{{ getSketchLabel(file.category) }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
file.categoryShow
|
||||
? 'icon_rotate'
|
||||
: '',
|
||||
]"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="category_list"
|
||||
v-show="file.categoryShow"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'category_item',
|
||||
file.category == cate.value
|
||||
? 'select_category_item'
|
||||
: '',
|
||||
]"
|
||||
v-for="(
|
||||
cate, index
|
||||
) in disignTypeList"
|
||||
:key="index"
|
||||
@click.stop="
|
||||
selectFileCategory(
|
||||
file,
|
||||
cate
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ cate.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -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:{
|
||||
|
||||
init(code:any){
|
||||
@@ -187,6 +250,10 @@ export default defineComponent({
|
||||
let aa:any = []
|
||||
this.imgList = rv.content
|
||||
rv.content.forEach((item:any) => {
|
||||
if(this.type_.type2 == 'Sketchboard'){
|
||||
item.category = "Outwear";
|
||||
item.categoryShow = false;
|
||||
}
|
||||
if(!item.id_){
|
||||
item.id_ = GO.id++
|
||||
aa.push(item)
|
||||
@@ -212,7 +279,23 @@ export default defineComponent({
|
||||
this.currentPage = 1
|
||||
this.pageSize = 10
|
||||
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>
|
||||
@@ -383,6 +466,16 @@ export default defineComponent({
|
||||
// margin-bottom: 2.8rem;
|
||||
margin: 0 2rem 2rem 0;
|
||||
padding: 0;
|
||||
&.active{
|
||||
height: 10rem;
|
||||
margin: 0 2rem 4rem 0;
|
||||
.pin_block{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.pin_block{
|
||||
display: none;
|
||||
}
|
||||
.content_img_item_block{
|
||||
// border: 0.1rem solid transparent;
|
||||
width: 10rem;
|
||||
|
||||
@@ -161,6 +161,7 @@ export default defineComponent({
|
||||
let moodb_className:any = ref([]);
|
||||
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
||||
let layoutList:any = []//选中后随机生成的list
|
||||
let layoutOpen = ref(false)
|
||||
return {
|
||||
fileList,
|
||||
lessenList,
|
||||
@@ -170,6 +171,7 @@ export default defineComponent({
|
||||
moodb_className,
|
||||
flex_direction,
|
||||
layoutList,
|
||||
layoutOpen
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -225,7 +227,10 @@ export default defineComponent({
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
file.type_ = 'upload';
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Moodboard'
|
||||
};
|
||||
file.id_ = GO.id++
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
@@ -298,33 +303,51 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
})
|
||||
console.log(this.fileList);
|
||||
|
||||
this.fileList.splice(moodboard,1)
|
||||
console.log(this.fileList);
|
||||
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
}
|
||||
this.store.commit("clearMoodTemplateId");
|
||||
},
|
||||
|
||||
recollection() {
|
||||
this.fileList = JSON.parse(
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.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 =
|
||||
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
this.store.commit("setMoodTemplateId", moodTemplateId);
|
||||
},
|
||||
|
||||
changeTemplateModal() {
|
||||
let layout:any = this.$refs.layout
|
||||
if(this.layoutOpen){
|
||||
let layout:any = this.$refs.layout
|
||||
// layout.init('moodboard')
|
||||
layout.init()
|
||||
}else{
|
||||
message.error('Please click Layout to sort randomlys')
|
||||
}
|
||||
|
||||
},
|
||||
layout(){
|
||||
let arr = this.store.state.UploadFilesModule.moodboard
|
||||
@@ -337,6 +360,7 @@ export default defineComponent({
|
||||
this.flex_direction = false
|
||||
}
|
||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||
this.layoutOpen = true
|
||||
},
|
||||
setmoodbClass(val:any){
|
||||
this.moodb_className = val
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<div class="img_block_item">
|
||||
<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_des">{{color.tcx}}</div>
|
||||
<div class="color_des">{{color.name}}</div>
|
||||
@@ -37,7 +37,7 @@
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<img class="all_img_content" :src="skecth.imgUrl">
|
||||
</div>
|
||||
@@ -66,7 +66,9 @@ export default defineComponent({
|
||||
return {
|
||||
allBoardData,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -37,9 +37,13 @@
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
|
||||
<div class="delete_file_block" @click.stop="deleteFile(file)">Delete</div>
|
||||
<div class="delete_file_block" @click.stop="deleteFile(file)">
|
||||
<span
|
||||
class="icon iconfont icon-shanchu"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin_block" v-show="file?.status === 'done'">
|
||||
@@ -86,7 +90,7 @@
|
||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
|
||||
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
@@ -97,16 +101,19 @@
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<div class="input_box">
|
||||
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
|
||||
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
|
||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
|
||||
<img :src="item.imgUrl">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
|
||||
<img :src="item.imgUrl" @click.stop="generageAdd(item)">
|
||||
<div class="pin_block">
|
||||
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> -->
|
||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -120,6 +127,8 @@ import { message,Upload} from 'ant-design-vue';
|
||||
import Cropper from '@/component/HomePage/Cropper.vue'
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import GO from "@/tool/GO";
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Cropper,
|
||||
@@ -214,6 +223,12 @@ export default defineComponent({
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
file.id_ = GO.id++
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Moodboard'
|
||||
};
|
||||
file.pin = false;
|
||||
let Cropper:any = this.$refs.Cropper
|
||||
if(this.currentFileNum === 1){
|
||||
var reader = new FileReader();
|
||||
@@ -487,10 +502,29 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
recollection(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
|
||||
this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
material:[] as any,
|
||||
moodboard:[] as any,
|
||||
}
|
||||
arr.forEach((v:any)=>{
|
||||
if(v.type_.type1 == 'generate'){
|
||||
setboard.generate.push(v)
|
||||
}else if(v.type_.type1 == 'material'){
|
||||
setboard.material.push(v)
|
||||
}else{
|
||||
setboard.moodboard.push(v)
|
||||
}
|
||||
})
|
||||
this.store.commit("setPrintboardGenerateFiles", setboard.generate);
|
||||
this.store.commit("setPrintboardMaterialFiles", setboard.material);
|
||||
this.store.commit("setPrintboardFile", setboard.moodboard);
|
||||
this.fileList = setboard.moodboard
|
||||
// this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||
// this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
@@ -655,7 +689,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 4rem 0;
|
||||
margin: 0 2rem 5rem 0;
|
||||
// margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
@@ -668,10 +702,7 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pin_block{
|
||||
text-align: center;
|
||||
margin-top:1.6rem;
|
||||
}
|
||||
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
@@ -816,6 +847,8 @@ export default defineComponent({
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
margin-left: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size: 1.2rem;
|
||||
@@ -869,14 +902,18 @@ export default defineComponent({
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
&.modal_accomplish::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_text{
|
||||
padding-top: 2rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.input_box{
|
||||
input{
|
||||
&.forbidden{
|
||||
cursor:not-allowed;
|
||||
&.forbidden{
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -886,7 +923,7 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
.modal_imgItem{
|
||||
margin: 0 2rem 2rem 0;
|
||||
margin: 0 2rem 5rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
|
||||
@@ -173,8 +173,56 @@
|
||||
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
|
||||
<img :src="item.imgUrl">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
|
||||
<img :src="item.imgUrl" @click="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>
|
||||
@@ -314,7 +362,10 @@ export default defineComponent({
|
||||
file.category = "Outwear";
|
||||
file.categoryShow = false;
|
||||
file.id_ = GO.id++
|
||||
file.type_ = 'upload';
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Moodboard'
|
||||
};
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
@@ -355,13 +406,32 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
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() {
|
||||
for (let item of this.fileList) {
|
||||
item.categoryShow = false;
|
||||
}
|
||||
if(this.openClick == 3){
|
||||
for (let item of this.generateList) {
|
||||
item.categoryShow = false;
|
||||
}
|
||||
}else{
|
||||
for (let item of this.fileList) {
|
||||
item.categoryShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.removeEventListener("click", this.hiddenFileCategory);
|
||||
},
|
||||
|
||||
@@ -383,13 +453,30 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
recollection() {
|
||||
this.fileList = JSON.parse(
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
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) {
|
||||
for (let item of event) {
|
||||
@@ -623,77 +710,9 @@ export default defineComponent({
|
||||
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{
|
||||
flex: 1;
|
||||
margin-left: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size: 1.2rem;
|
||||
@@ -755,11 +776,17 @@ export default defineComponent({
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
&.modal_accomplish::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_text{
|
||||
padding-top: 2rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.input_box{
|
||||
z-index: 1;
|
||||
input{
|
||||
&.forbidden{
|
||||
cursor:not-allowed;
|
||||
@@ -772,7 +799,7 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
.modal_imgItem{
|
||||
margin: 0 2rem 2rem 0;
|
||||
margin: 0 2rem 4rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
@@ -792,6 +819,7 @@ export default defineComponent({
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<div v-show="collectionStep === 2">Printboard</div>
|
||||
<div v-show="collectionStep === 3">Colorboard</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>
|
||||
<div>
|
||||
@@ -32,8 +32,9 @@
|
||||
<!-- <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> -->
|
||||
<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-else class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></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-check" @click.stop="finishCollection()"></i>
|
||||
<!-- <span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->
|
||||
|
||||
</div>
|
||||
@@ -42,7 +43,7 @@
|
||||
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
|
||||
<ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
|
||||
<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>
|
||||
</a-modal>
|
||||
</div>
|
||||
@@ -90,7 +91,8 @@ export default defineComponent({
|
||||
|
||||
recollection(){
|
||||
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){
|
||||
let childRef:any = this.$refs[child]
|
||||
childRef.recollection()
|
||||
@@ -254,7 +256,7 @@ export default defineComponent({
|
||||
.ant-modal-body{
|
||||
padding: 8rem 5rem !important;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: 60rem;
|
||||
height: 65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
></div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
|
||||
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item)" 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">
|
||||
<ul v-show="item.setPitch" class="layout_btn" >
|
||||
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
||||
@@ -109,7 +109,7 @@ export default defineComponent({
|
||||
openClick,
|
||||
drag,
|
||||
layoutList,
|
||||
content
|
||||
content,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -491,11 +491,15 @@ export default defineComponent({
|
||||
this.moodbList = this.moodb[layoutList.length-1]
|
||||
this.moodbClassName = this.moodb_className
|
||||
},
|
||||
setpitch(item:any){
|
||||
setpitch(item:any,index:any){
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
item.setPitch = true
|
||||
if(this.content){
|
||||
(this.content as any)[index].style.zIndex = GO.zIndex++
|
||||
|
||||
}
|
||||
},
|
||||
setmoodb(item:any){
|
||||
this.moodbClassName = item
|
||||
@@ -593,7 +597,6 @@ export default defineComponent({
|
||||
v.setPitch = false
|
||||
})
|
||||
let layoutCentent = document.getElementById('layoutCentent')
|
||||
console.log(layoutCentent);
|
||||
setTimeout(() => {
|
||||
console.log(domTurnImg(layoutCentent));
|
||||
this.layout = false
|
||||
@@ -752,6 +755,11 @@ export default defineComponent({
|
||||
cursor: crosshair;
|
||||
cursor: move;
|
||||
}
|
||||
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
|
||||
// opacity: 0;
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
}
|
||||
.layout_angle_tr{
|
||||
right: 0%;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user