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(){
|
||||
|
||||
Reference in New Issue
Block a user