first commit
This commit is contained in:
LiaoFJ
344
src/component/Detail/AccessoryReplaceModal.vue
Normal file
344
src/component/Detail/AccessoryReplaceModal.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<a-modal class="accessory_replace_modal"
|
||||
v-model:visible="accessoryReplaceShow"
|
||||
:footer="null"
|
||||
width="40rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
|
||||
<div class="accessory_replace_content">
|
||||
<div class="new_accessory_block">
|
||||
<div class="new_accessory_title">New {{othersData?.type}}</div>
|
||||
<div class="new_accessory_img_block">
|
||||
<img class="element_img" :src="othersData?.path">
|
||||
<div class="element_img_loading" v-show="loadingShow">
|
||||
<a-spin :indicator="indicator"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="new_accessory_operate_list">
|
||||
<div class="new_accessory_operate_button pervious_button" @click="changeElement('PREV')">Previous</div>
|
||||
<div class="new_accessory_operate_button fetch_button" @click="changeElement('NEXT')">Re-fetch</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accessory_color_block" v-show="othersData?.type !== 'Earring' && othersData?.type !== 'Hairstyle'">
|
||||
<div class="accessory_color_block_header">Modify Color</div>
|
||||
<div class="accessory_color_block_body">
|
||||
<div class="review_color_block" :style="{background:`rgb(${modifyColor.r},${modifyColor.g},${modifyColor.b})`}"></div>
|
||||
<div class="setting_color_block">
|
||||
<div class="setting_color_content">
|
||||
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
|
||||
<Slider class="sileder_color" v-model="selectColor"></Slider>
|
||||
</div>
|
||||
<div class="color_rgb_block">
|
||||
<div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
|
||||
<div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
|
||||
<div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit_button" @click="submitOthers()">Submit</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,h} from 'vue'
|
||||
import { Chrome,Slider } from '@ans1998/vue3-color'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components:{Chrome,Slider},
|
||||
setup(){
|
||||
let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
|
||||
let othersData:any = ref({})
|
||||
const store = useStore();
|
||||
return {
|
||||
selectColor,
|
||||
othersData,
|
||||
store
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
loadingShow:false,
|
||||
accessoryReplaceShow:false,
|
||||
modifyColor:{r:255,g:255,b:255},
|
||||
othersIndex:0, //该元素在列表中的索引
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
selectColor(newVal:any,oldVal:any){
|
||||
this.modifyColor = newVal.rgba || {}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getSelectRGB(selectColor){
|
||||
return (selectColor:any)=>{
|
||||
let rgba = selectColor.rgba
|
||||
let data = {
|
||||
r:rgba?.r || 255,
|
||||
g:rgba?.g || 255,
|
||||
b:rgba?.b || 255
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
showAccessoryReplaceModal(data:any){
|
||||
this.othersData = JSON.parse(JSON.stringify(data.others))
|
||||
this.othersIndex = data.index
|
||||
this.accessoryReplaceShow = true
|
||||
let color = this.othersData.color ? this.othersData.color.split(' ') :''
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2]}}
|
||||
},
|
||||
|
||||
//关闭弹窗
|
||||
closeModal(){
|
||||
this.accessoryReplaceShow = false
|
||||
this.othersData = {}
|
||||
this.othersIndex = 0
|
||||
},
|
||||
|
||||
//切换元素
|
||||
changeElement(type:string){
|
||||
let url = Https.httpUrls.getNextSysElement + `?id=${this.othersData.id}&operateType=${type}&type=${this.othersData.type}`
|
||||
this.loadingShow = true
|
||||
Https.axiosGet(url).then(
|
||||
(rv: any) => {
|
||||
this.othersData.id = rv.id
|
||||
this.othersData.path = rv.path
|
||||
this.loadingShow = false
|
||||
}
|
||||
).catch(rv=>{
|
||||
this.loadingShow = false
|
||||
})
|
||||
},
|
||||
|
||||
//提交
|
||||
submitOthers(){
|
||||
this.othersData.color = this.othersData.color ? `${this.modifyColor.r} ${this.modifyColor.g} ${this.modifyColor.b}` : ''
|
||||
let data = {
|
||||
others:this.othersData,
|
||||
index:this.othersIndex
|
||||
}
|
||||
this.store.commit('setDesignItemOthers',data)
|
||||
this.closeModal()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.accessory_replace_modal{
|
||||
|
||||
.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{
|
||||
padding: 2rem 1.8rem 3rem;
|
||||
box-sizing: border-box;
|
||||
background: #F2F3FB;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.accessory_replace_content{
|
||||
|
||||
.new_accessory_block{
|
||||
padding: 2rem 2rem 1.2rem;
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
|
||||
.new_accessory_title{
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
color: #030303;
|
||||
margin-bottom: 1.3rem;
|
||||
}
|
||||
.new_accessory_img_block{
|
||||
width: 20rem;
|
||||
height: 16rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F5F5F5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin:0 auto 1.7rem;
|
||||
position: relative;
|
||||
|
||||
.element_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.element_img_loading{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.new_accessory_operate_list{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.new_accessory_operate_button{
|
||||
padding: 0 1.5rem;
|
||||
height: 3.2rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pervious_button{
|
||||
background: #343579;
|
||||
color: #ffffff;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.fetch_button{
|
||||
background: #E6E6F6;
|
||||
color: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accessory_color_block{
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 0 2rem;
|
||||
margin: 1.3rem 0 1.8rem;
|
||||
|
||||
.accessory_color_block_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 3.7rem;
|
||||
font-size: 1.6rem;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.accessory_color_block_body{
|
||||
padding:0 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.review_color_block{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #343579;
|
||||
}
|
||||
|
||||
.setting_color_block{
|
||||
|
||||
.setting_color_content{
|
||||
|
||||
.vc-chrome-body{
|
||||
display: none;
|
||||
}
|
||||
.chrome_color{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-chrome-saturation-wrap{
|
||||
height: 100%;
|
||||
}
|
||||
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
.sileder_color{
|
||||
width: 1.6rem;
|
||||
|
||||
.vc-slider-swatches{
|
||||
display:none
|
||||
}
|
||||
.vc-slider-hue-warp {
|
||||
width: 11.5rem;
|
||||
height: 1.6rem;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-hue-picker{
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(-0.6rem, -0.4rem);
|
||||
|
||||
}
|
||||
}
|
||||
.vc-hue-pointer{
|
||||
top: 0.5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.color_rgb_block{
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.4rem;
|
||||
color: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit_button{
|
||||
width: 9.8rem;
|
||||
height: 3.6rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
font-size: 1.4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #FFFFFF;
|
||||
margin: 1.8rem auto 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
529
src/component/Detail/DesignDetail.vue
Normal file
529
src/component/Detail/DesignDetail.vue
Normal file
@@ -0,0 +1,529 @@
|
||||
<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>
|
||||
900
src/component/Detail/ElementReplace.vue
Normal file
900
src/component/Detail/ElementReplace.vue
Normal file
@@ -0,0 +1,900 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal class="element_replace_modal"
|
||||
v-model:visible="elementReplaceShow"
|
||||
:footer="null"
|
||||
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="element_replace_content">
|
||||
<div class="element_replace_content_left">
|
||||
<div class="content_left_block">
|
||||
<div class="content_left_block_header">New {{swtich_type}}</div>
|
||||
<div class="content_left_block_body">
|
||||
<div class="content_body_img_block">
|
||||
<img class="element_img" :src="clothesData?.path">
|
||||
<div class="upload_block">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
:data="{
|
||||
...upload,
|
||||
level1Type:clothesData?.level1Type
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
:before-upload="beforeUpload"
|
||||
:maxCount="1"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file,'top')"
|
||||
:showUploadList="false"
|
||||
>
|
||||
<div class="upload_icon_block">
|
||||
<span class="icon iconfont icon-tianjiatupian_huaban"></span>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="operate_file_block">
|
||||
<div class="select_category" @click.stop="showNewTopOperate()">
|
||||
{{clothesData?.type}}
|
||||
<div :class="['icon','iconfont', 'icon-xiala', newTopOperateShow?'icon_rotate':'']"></div>
|
||||
</div>
|
||||
<div class="category_list" v-show="newTopOperateShow">
|
||||
<div :class="['category_item', clothesData?.type == cate.value?'select_category_item':'']" v-for="(cate,index) in sketchCatecoryList" :key="index" @click="selectNewTopOperate(cate)">{{cate.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content_left_block">
|
||||
<div class="content_left_block_header">
|
||||
<div>New Print</div>
|
||||
<div class="placement_button" @click="placementClick()" v-show="clothesData?.printObject?.path && clothesData?.printObject?.path != 'none'">Placement</div>
|
||||
</div>
|
||||
<div class="content_left_block_body">
|
||||
<div class="content_body_img_block">
|
||||
<img class="element_img print_element_img" :src="clothesData?.printObject?.path" v-if="clothesData?.printObject?.path && clothesData?.printObject?.path != 'none'">
|
||||
<img class="element_null_img" src="@/assets/images/homePage/null_img.png" v-else />
|
||||
<div class="upload_block">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
:data="{
|
||||
...upload,
|
||||
level1Type:clothesData?.printObject?.level1Type || Printboard
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
:before-upload="beforeUpload"
|
||||
:maxCount="1"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file,'print')"
|
||||
:showUploadList="false"
|
||||
>
|
||||
<div class="upload_icon_block">
|
||||
<span class="icon iconfont icon-tianjiatupian_huaban"></span>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="delete_file_block" @click="deletePrintFile()">
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content_left_block">
|
||||
<div class="content_left_block_header content_color_block_header">Edit Color</div>
|
||||
<div class="content_left_block_body content_color_block_body">
|
||||
<div class="review_color_block" :style="{background:`rgb(${modifyColor.r},${modifyColor.g},${modifyColor.b})`}"></div>
|
||||
<div class="setting_color_block">
|
||||
<div class="setting_color_content">
|
||||
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
|
||||
<Slider class="sileder_color" v-model="selectColor"></Slider>
|
||||
</div>
|
||||
<div class="color_rgb_block">
|
||||
<div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
|
||||
<div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
|
||||
<div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit_button" @click="submitElement()">Submit</div>
|
||||
</div>
|
||||
|
||||
<div class="element_replace_content_right">
|
||||
<div class="content_right_header"><div class="content_right_header_content">Select from library</div></div>
|
||||
|
||||
<div class="content_right_search_block">
|
||||
<input class="search_input" placeholder="Search by your style code" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
|
||||
<div class="content_right_table_block">
|
||||
<div class="table_block_header">
|
||||
<div class="table_block_header_left">
|
||||
<div v-show="['Outwear','Dress','Blouse'].indexOf(clothesData.type) > -1" @click="select_type('Top')" :class="['switch_type_item', swtich_type === 'Top' ? 'select_swtich' : '']">
|
||||
<span>Top</span>
|
||||
</div>
|
||||
<div v-show="['Skirt','Trousers'].indexOf(clothesData.type) > -1" @click="select_type('Bottom')" :class="['switch_type_item', swtich_type === 'Bottom' ? 'select_swtich' : '']">
|
||||
<span>Bottom</span>
|
||||
</div>
|
||||
<div @click="select_type('Print')" :class="['switch_type_item', swtich_type === 'Print' ? 'select_swtich' : '']">
|
||||
<span>Print</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table_header_select_block select_block" v-show="swtich_type != 'Print'">
|
||||
<a-select
|
||||
ref="select"
|
||||
placeholder="All"
|
||||
v-model:value="designType"
|
||||
:allowClear="true"
|
||||
:options="disignTypeList"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table_img_list scroll_style">
|
||||
<div class="table_img_item_block" v-for="img in imgList" :key="img" @click="selectImgItem(img)">
|
||||
<div class="img_item_block">
|
||||
<img :class="[swtich_type === 'Print'?'print_img_body':'img_item_body']" v-lazy="img.url" :key="img.url">
|
||||
</div>
|
||||
<div class="img_item_name">{{img.name}}</div>
|
||||
</div>
|
||||
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
|
||||
<img src="@/assets/images/homePage/null_img.png">
|
||||
</div>
|
||||
<div class="no_data_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table_pagination" v-show="imgList.length">
|
||||
<a-pagination
|
||||
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
:showQuickJumper="true"
|
||||
:showSizeChanger="false"
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-modal>
|
||||
<PlacementModal ref="PlacementModal" @submitPlacement="submitPlacement"></PlacementModal>
|
||||
<PlacementModalMobile ref="PlacementModalMobile" @submitPlacement="submitPlacement"></PlacementModalMobile>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref } from 'vue'
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl,isMoible} from '@/tool/util'
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import { Chrome,Slider } from '@ans1998/vue3-color'
|
||||
import PlacementModal from '@/component/Detail/PlacementModal.vue'
|
||||
import PlacementModalMobile from '@/component/Detail/PlacementModalMobile.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components:{Chrome,Slider,PlacementModal,PlacementModalMobile},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
|
||||
let clothesData:any = ref({})
|
||||
let disignTypeList:any = ref([])
|
||||
return {
|
||||
store,
|
||||
selectColor,
|
||||
clothesData,
|
||||
disignTypeList
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
elementReplaceShow:false,
|
||||
newTopOperateShow:false,
|
||||
sketchCatecoryList:[
|
||||
{
|
||||
value: 'Outwear',
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: 'Blouse',
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: 'Dress',
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: 'Trousers',
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: 'Skirt',
|
||||
label: "Skirt",
|
||||
},
|
||||
],
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Moodboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
modifyColor:{r:255,g:255,b:255},
|
||||
designType:null,
|
||||
swtich_type:'Top',
|
||||
imgList:[], //图片列表
|
||||
currentPage:1, //当前页码
|
||||
pageSize:20,
|
||||
total:0,//图片总数
|
||||
clothesIndex:0, //该元素在列表中的索引
|
||||
isShowLoading:false,
|
||||
searchPictureName:'',//搜索图片的名称
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
selectColor(newVal:any,oldVal:any){
|
||||
this.modifyColor = newVal.rgba || {}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getSelectRGB(selectColor){
|
||||
return (selectColor:any)=>{
|
||||
let rgba = selectColor.rgba
|
||||
let data = {
|
||||
r:rgba?.r || 255,
|
||||
g:rgba?.g || 255,
|
||||
b:rgba?.b || 255
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
select_type(type:string){
|
||||
this.imgList = []
|
||||
this.currentPage = 1
|
||||
this.searchPictureName = ''
|
||||
this.designType = null
|
||||
this.swtich_type = type
|
||||
this.getLibraryList()
|
||||
},
|
||||
showNewTopOperate(){
|
||||
this.newTopOperateShow = !this.newTopOperateShow
|
||||
document.addEventListener('click', this.hiddenNewTopOperate)
|
||||
},
|
||||
|
||||
selectNewTopOperate(cate:any){
|
||||
this.clothesData.type = cate.value
|
||||
},
|
||||
|
||||
hiddenNewTopOperate(){
|
||||
this.newTopOperateShow = false
|
||||
document.removeEventListener('click', this.hiddenNewTopOperate)
|
||||
},
|
||||
|
||||
fileUploadChange(data:any,type:any){
|
||||
let file = data.file
|
||||
if(file.status === 'done'){
|
||||
let res = JSON.parse(file.xhr.response)
|
||||
if(type === 'top'){
|
||||
this.clothesData.path = res.data.url
|
||||
this.clothesData.type = 'Outwear'
|
||||
}else if(type === 'print'){
|
||||
this.clothesData.printObject.path = res.data.url
|
||||
this.clothesData.printObject.location = []
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
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 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
|
||||
//改变页码
|
||||
changePage(current: number, pageSize: number){
|
||||
this.currentPage = current
|
||||
this.pageSize = pageSize
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
handleChange(){
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
showelementReplaceModal(data:any){
|
||||
this.clothesData = JSON.parse(JSON.stringify(data.clothes))
|
||||
this.clothesIndex = data.index
|
||||
this.elementReplaceShow = true
|
||||
let color = this.clothesData.color.split(' ')
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2]}}
|
||||
let topList = ['Outwear','Dress','Blouse']
|
||||
if(topList.indexOf(this.clothesData.type) > -1){
|
||||
this.swtich_type = 'Top'
|
||||
this.disignTypeList = [{
|
||||
value: "Outwear",
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: "Blouse",
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: "Dress",
|
||||
label: "Dress",
|
||||
}]
|
||||
}else{
|
||||
this.swtich_type = 'Bottom'
|
||||
this.disignTypeList = [{
|
||||
value: "Trousers",
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: "Skirt",
|
||||
label: "Skirt",
|
||||
},]
|
||||
}
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
//关闭弹窗
|
||||
closeModal(){
|
||||
this.elementReplaceShow = false
|
||||
this.swtich_type = 'Top'
|
||||
this.clothesData = {}
|
||||
this.clothesIndex = 0
|
||||
},
|
||||
|
||||
//提交元素
|
||||
submitElement(){
|
||||
this.clothesData.color = `${this.modifyColor.r} ${this.modifyColor.g} ${this.modifyColor.b}`
|
||||
let data = {
|
||||
clothes:this.clothesData,
|
||||
index:this.clothesIndex
|
||||
}
|
||||
this.store.commit('setDesignItemColthes',data)
|
||||
this.closeModal()
|
||||
},
|
||||
|
||||
//删除print的图片
|
||||
deletePrintFile(){
|
||||
this.clothesData.printObject.path = ''
|
||||
},
|
||||
|
||||
placementClick(){
|
||||
let placementModal:any = isMoible() ? this.$refs.PlacementModalMobile : this.$refs.PlacementModal
|
||||
let data = {
|
||||
clothesData:this.clothesData,
|
||||
index:this.clothesIndex
|
||||
}
|
||||
placementModal.showPlacementModal(data)
|
||||
},
|
||||
|
||||
|
||||
//placement提交
|
||||
submitPlacement(e:any){
|
||||
this.clothesData.printObject = e
|
||||
},
|
||||
|
||||
getLibraryList(){
|
||||
let data = {
|
||||
level2Type:this.designType,
|
||||
page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize,
|
||||
type:this.swtich_type
|
||||
}
|
||||
this.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryTopAndBottomPage,data).then(
|
||||
(rv: any) => {
|
||||
this.imgList = rv.content
|
||||
this.total = rv.total
|
||||
this.isShowLoading = false
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.isShowLoading = false
|
||||
});
|
||||
},
|
||||
|
||||
//选择库里的图片
|
||||
selectImgItem(img:any){
|
||||
if(this.swtich_type != 'Print'){
|
||||
this.clothesData.path = img.url
|
||||
}else{
|
||||
this.clothesData.printObject.path = img.url
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.element_replace_modal{
|
||||
|
||||
.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;
|
||||
min-height: 72rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.element_replace_content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1.5rem 1rem 2rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.element_replace_content_left{
|
||||
width: 36.4rem;
|
||||
height: 100%;
|
||||
|
||||
.content_left_block{
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.content_left_block_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 5rem;
|
||||
font-size: 1.6rem;
|
||||
color: #030303;
|
||||
|
||||
&.content_color_block_header{
|
||||
height: 3.7rem;
|
||||
}
|
||||
|
||||
.placement_button{
|
||||
padding: 0 0.9rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
background: #E6E6F6;
|
||||
font-size: 1.2rem;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content_left_block_body{
|
||||
width: 100%;
|
||||
|
||||
&.content_color_block_body{
|
||||
padding:0 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content_body_img_block{
|
||||
width: 20rem;
|
||||
height: 15.8rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F5F5F5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin:0 auto;
|
||||
position: relative;
|
||||
|
||||
|
||||
.element_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&.print_element_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.element_null_img{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.operate_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.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.3rem;
|
||||
left: 0;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #000000;
|
||||
box-shadow: 0 0.4rem 0.4rem 0 rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
color: #4D4D4D;
|
||||
|
||||
.category_item{
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
height: 3.5rem;
|
||||
line-height:3.5rem;
|
||||
|
||||
&.select_category_item{
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: #F7F7F7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_block{
|
||||
display: none;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: 1.1rem;
|
||||
right: 0.9rem;
|
||||
border-radius: 50%;
|
||||
|
||||
.upload_icon_block{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-tianjiatupian_huaban{
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 1.1rem;
|
||||
right: 5.5rem;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-shanchu{
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .delete_file_block, &:hover .operate_file_block, &:hover .upload_block{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.review_color_block{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #343579;
|
||||
}
|
||||
|
||||
.setting_color_block{
|
||||
|
||||
.setting_color_content{
|
||||
|
||||
.vc-chrome-body{
|
||||
display: none;
|
||||
}
|
||||
.chrome_color{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-chrome-saturation-wrap{
|
||||
height: 100%;
|
||||
}
|
||||
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
.sileder_color{
|
||||
width: 1.6rem;
|
||||
|
||||
.vc-slider-swatches{
|
||||
display:none
|
||||
}
|
||||
.vc-slider-hue-warp {
|
||||
width: 11.5rem;
|
||||
height: 1.6rem;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-hue-picker{
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(-0.6rem, -0.4rem);
|
||||
|
||||
}
|
||||
}
|
||||
.vc-hue-pointer{
|
||||
top: 0.5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.color_rgb_block{
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.4rem;
|
||||
color: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit_button{
|
||||
width: 9.8rem;
|
||||
height: 3.6rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
font-size: 1.4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #FFFFFF;
|
||||
margin: 1.8rem auto 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.element_replace_content_right{
|
||||
width: calc(100% - 37rem);
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.content_right_header{
|
||||
padding: 1.8rem 2.2rem 2.2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #030303;
|
||||
|
||||
.content_right_header_content{
|
||||
height: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content_right_search_block{
|
||||
padding: 0 2.2rem;
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 50.3rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.6rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 7.2rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content_right_table_block{
|
||||
height: calc(100% - 10.5rem);
|
||||
|
||||
.table_block_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1.7rem 1.7rem 0 2.3rem;
|
||||
border-bottom: 0.1rem solid #EBEBEC;
|
||||
|
||||
.table_block_header_left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
height: 4.2rem;
|
||||
width: 6rem;
|
||||
text-align: center;
|
||||
line-height: 4.2rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 3rem;
|
||||
border-bottom: 0.2rem solid transparent;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
border-bottom: 0.2rem solid #343579;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.select_block {
|
||||
|
||||
.ant-select-selector{
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
.icon-xiala{
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table_img_list{
|
||||
padding: 2rem 0 0 2.3rem;
|
||||
height: calc(100% - 13rem);
|
||||
overflow-y: auto;
|
||||
|
||||
.table_img_item_block{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin:0 1.6rem 3rem 0;
|
||||
cursor: pointer;
|
||||
|
||||
.img_item_block{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 0.1rem solid #343579;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.print_img_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img_item_body{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img_item_name{
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.4rem;
|
||||
color: #343579;
|
||||
text-align: center;
|
||||
width: 16.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no_data_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.table_pagination{
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
src/component/Detail/HistoryDetail.vue
Normal file
116
src/component/Detail/HistoryDetail.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<a-modal class="hsitory_detail_modal_component"
|
||||
v-model:visible="hsitoryDetailShow"
|
||||
:footer="null"
|
||||
:title="collectionName"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="close_icon" @click.stop="changeDetailShow()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
<div class="history_detail_content scroll_style">
|
||||
<div class="history_img_block" v-for="img in groupDetails" :key="img">
|
||||
<div class="history_img_item" >
|
||||
<img class="element_img" :src="img.url">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
props:{
|
||||
groupDetails:{
|
||||
default:{},
|
||||
},
|
||||
collectionName:{
|
||||
default:''
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
hsitoryDetailShow:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
changeDetailShow(){
|
||||
this.hsitoryDetailShow = !this.hsitoryDetailShow
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.hsitory_detail_modal_component{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
height: 80vh;
|
||||
min-height: 72rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.history_detail_content{
|
||||
padding: 2.6rem 2.0rem 2.6rem 3.7rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y:auto;
|
||||
background: #FFFFFF;
|
||||
|
||||
.history_img_block{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 0.1rem solid #343579;
|
||||
margin: 0 1.7rem 1.7rem 0;
|
||||
display: inline-block;
|
||||
|
||||
.history_img_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.element_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
565
src/component/Detail/PlacementModal.vue
Normal file
565
src/component/Detail/PlacementModal.vue
Normal file
@@ -0,0 +1,565 @@
|
||||
<template>
|
||||
<div v-show="placementShow">
|
||||
<a-modal class="placement_modal_component"
|
||||
v-model:visible="placementShow"
|
||||
:footer="null"
|
||||
width="111.5rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
<div class="placement_modal_body" >
|
||||
<div class="palcement_modal_header">
|
||||
<div class="placement_modal_title">Placement</div>
|
||||
<div class="placement_operate_list">
|
||||
<div class="operate_item" @click="submitPlacement">
|
||||
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
||||
<div class="operate_item_des">Submit</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="printPreview">
|
||||
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
||||
<div class="operate_item_des">Preview</div>
|
||||
</div>
|
||||
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
||||
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
||||
<div class="operate_item_des">Back</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="restoreLocationList">
|
||||
<div class="icon iconfont icon-huifu operate_icon"></div>
|
||||
<div class="operate_item_des">Restore</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placement_modal_content">
|
||||
<div class="placement_content_operate_list">
|
||||
<!-- <div class="placement_content_operate_item" @click="overallClick()">
|
||||
<div class="placement_overall_icon">
|
||||
<div class="placement_overall_content" v-show="!printObject.ifSingle"></div>
|
||||
</div>
|
||||
<div class="placement_content_operate_des">Overall</div>
|
||||
</div> -->
|
||||
|
||||
<div class="placement_content_operate_item">
|
||||
<div class="print_scale_value">{{placement_sacle}}%</div>
|
||||
<a-slider
|
||||
id="placement_silder"
|
||||
:tooltipVisible="false"
|
||||
v-model:value="placement_sacle"
|
||||
:min="30"
|
||||
:max="300"
|
||||
/>
|
||||
<div class="placement_content_operate_des">Print Scale</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="placement_content_operate_item" @mousedown="AddDian()" v-show="!perviewUrl">
|
||||
<div class="placement_add_point_block">
|
||||
<div class="placement_add_point_content"></div>
|
||||
</div>
|
||||
<div class="placement_content_operate_des" >Add Point</div>
|
||||
</div>
|
||||
|
||||
<div class="placement_content_operate_item" @click="changeRemoveStatus" v-show="!perviewUrl">
|
||||
<div class="placement_remove_point_block"></div>
|
||||
<div class="placement_content_operate_des">Remove Point</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="img_preview_block" >
|
||||
<div class="perview_mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
|
||||
<img class="placement_img" v-lazy="perviewUrl || clothesData?.path" :key="perviewUrl || clothesData?.path">
|
||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px'}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
|
||||
<div class="placement_add_point_content" v-show="!isRemoveStatus"></div>
|
||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let oldLocationList:any = ref([])
|
||||
let locationList:any = ref([])
|
||||
let printObject:any = ref({})
|
||||
let imgBox:any = ref({})
|
||||
let intObj:any = ref(null)
|
||||
let currentSign:any = ref({})
|
||||
let clothesData:any = ref({})
|
||||
return {
|
||||
store,
|
||||
oldLocationList,
|
||||
locationList,
|
||||
printObject,
|
||||
imgBox,
|
||||
intObj,
|
||||
currentSign,
|
||||
clothesData
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
placementShow:false,
|
||||
collectionIndex:0,
|
||||
startDian:false,
|
||||
moveOriginal:{posX: 0, posY: 0},
|
||||
isRemoveStatus:false,
|
||||
placement_sacle:30,
|
||||
perviewUrl:'',//预览的图片地址
|
||||
isShowMark:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatter(value:number){
|
||||
return `${value}%`;
|
||||
},
|
||||
|
||||
showPlacementModal(data:any){
|
||||
this.clothesData = JSON.parse(JSON.stringify(data.clothesData))
|
||||
this.printObject = this.clothesData.printObject
|
||||
this.collectionIndex = data.index
|
||||
this.placement_sacle = this.printObject.scale ? this.printObject.scale * 100 : 30
|
||||
this.placementShow = true
|
||||
setTimeout(()=>{
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let position = imgbox.getBoundingClientRect()
|
||||
this.imgBox = {
|
||||
width:imgbox.clientWidth,
|
||||
height:imgbox.scrollHeight,
|
||||
left : position.left,
|
||||
top:position.top,
|
||||
scrollTop:imgbox.scrollTop || 0,
|
||||
}
|
||||
this.getLocationList(this.imgBox)
|
||||
},500)
|
||||
},
|
||||
|
||||
getLocationList(imgBox:any){
|
||||
if(this.printObject.location){
|
||||
this.locationList = this.printObject.location.map((v:any)=>{
|
||||
let data = {
|
||||
left:(v[0] * imgBox.width) - 12,
|
||||
top:(v[1] * imgBox.height) -12
|
||||
}
|
||||
return data
|
||||
})
|
||||
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
}
|
||||
},
|
||||
|
||||
overallClick(){
|
||||
this.printObject.ifSingle = !this.printObject.ifSingle
|
||||
},
|
||||
|
||||
AddDian(){
|
||||
this.startDian = true
|
||||
this.isRemoveStatus = false
|
||||
this.intObj = true
|
||||
},
|
||||
|
||||
changeRemoveStatus(){
|
||||
this.isRemoveStatus = true
|
||||
},
|
||||
|
||||
startMove(event:any){
|
||||
if(this.isRemoveStatus){
|
||||
return
|
||||
}
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let scrollTop = imgbox.scrollTop;
|
||||
if(this.intObj){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
|
||||
this.locationList.push(this.currentSign)
|
||||
this.printObject.ifSingle = true
|
||||
this.intObj = null
|
||||
}else{
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
|
||||
document.addEventListener('mouseup', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 在边界上的签名域处理
|
||||
setBoundarySign() {
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let height = imgbox.offsetHeight + imgbox.scrollTop;
|
||||
// 2 为签名域的边框
|
||||
let maxPosHeight = height - 24
|
||||
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top <= 0) {
|
||||
this.currentSign.top = 0
|
||||
} else if (this.currentSign.top >= maxPosHeight ) {
|
||||
this.currentSign.top = maxPosHeight;
|
||||
}
|
||||
if (this.currentSign.left <= 0) {
|
||||
this.currentSign.left = 0
|
||||
} else if (this.currentSign.left >= maxPosWidth) {
|
||||
this.currentSign.left = maxPosWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getMouseDown(event:any,item:any,index:number){
|
||||
if(this.isRemoveStatus){
|
||||
this.locationList.splice(index,1)
|
||||
}else{
|
||||
this.currentSign = item
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
this.moveOriginal.posX = event.offsetX
|
||||
this.moveOriginal.posY = event.offsetY // 1为边框
|
||||
this.startDian = true
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getMouseOver(){
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('mouseup', this.getMouseOver);
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
this.oldLocationList = []
|
||||
this.locationList = []
|
||||
this.printObject = {}
|
||||
this.intObj = null
|
||||
this.currentSign = {}
|
||||
this.isRemoveStatus = false
|
||||
this.placementShow = false
|
||||
this.perviewUrl = ''
|
||||
},
|
||||
|
||||
restoreLocationList(){
|
||||
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
|
||||
},
|
||||
|
||||
submitPlacement(){
|
||||
this.printObject.scale = this.placement_sacle / 100
|
||||
this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() : []
|
||||
this.$emit('submitPlacement',this.printObject)
|
||||
this.closeModal()
|
||||
|
||||
},
|
||||
|
||||
getPrintLocation(){
|
||||
let {width , height} = this.imgBox
|
||||
let location = this.locationList.map((v:any)=>{
|
||||
let left = ((v.left + 12) / width).toFixed(4)
|
||||
let top = ((v.top + 12) / height).toFixed(4)
|
||||
let data = [left,top]
|
||||
return data
|
||||
})
|
||||
return location
|
||||
},
|
||||
|
||||
printPreview(){
|
||||
this.printObject.scale = this.placement_sacle / 100
|
||||
this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() : []
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
designItemDetail.clothes[this.collectionIndex] = this.clothesData
|
||||
delete designItemDetail.designItemUrl
|
||||
let priority = designItemDetail.clothes.map((v:any)=>{
|
||||
return v.type
|
||||
})
|
||||
let data = {
|
||||
...designItemDetail,
|
||||
priority:priority,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
if(this.isShowMark){
|
||||
return
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.detailPrintDot, data).then(
|
||||
(rv: any) => {
|
||||
this.perviewUrl = rv
|
||||
this.isShowMark = false
|
||||
}
|
||||
).catch(res=>{
|
||||
this.isShowMark = false
|
||||
});
|
||||
},
|
||||
|
||||
backPreview(){
|
||||
this.perviewUrl = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.placement_modal_component{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
min-height: 72rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_modal_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.palcement_modal_header{
|
||||
position: relative;
|
||||
height: 6.6rem;
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
|
||||
.placement_modal_title{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
line-height: 6.6rem;
|
||||
left: 3.7rem;
|
||||
top: 0;
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
}
|
||||
.placement_operate_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 100%;
|
||||
|
||||
.operate_item{
|
||||
margin-right: 4rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.operate_icon{
|
||||
font-size: 2.1rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.operate_item_des{
|
||||
height: 1.2rem;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placement_modal_content{
|
||||
position: relative;
|
||||
height: calc(100% - 6.6rem);
|
||||
width: 100%;
|
||||
padding: 1.1rem 0;
|
||||
|
||||
.placement_content_operate_list{
|
||||
width: 9rem;
|
||||
background: #EBECF4;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top:6.8rem;
|
||||
|
||||
.placement_content_operate_item{
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.placement_overall_icon{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
padding: 0.3rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
margin: 0 auto 0.4rem;
|
||||
|
||||
.placement_overall_content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_content_operate_des{
|
||||
width: 100%;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
-moz-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
|
||||
.print_scale_value{
|
||||
height: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.ant-tooltip-placement-top{
|
||||
top: -37px !important;
|
||||
}
|
||||
|
||||
.ant-slider-track{
|
||||
background: #343579;
|
||||
}
|
||||
.ant-slider-handle{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.placement_add_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
position: relative;
|
||||
border: 2px solid #6E70FF;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.placement_remove_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border: 2px solid #000000;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img_preview_block{
|
||||
width: 40.8rem;
|
||||
background: #ffffff;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
position: relative;
|
||||
|
||||
.img_content_block{
|
||||
width: 40.8rem;
|
||||
height: 100%;
|
||||
max-height: 63.2rem;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
position: relative;
|
||||
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
}
|
||||
|
||||
.perview_mark_loading{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.placement_img{
|
||||
width: 100%;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
}
|
||||
|
||||
.ponit_click{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
border: 2px solid #6E70FF;
|
||||
border-radius: 50%;
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
cursor: pointer;
|
||||
|
||||
&.remove_point_click{
|
||||
border-color: transparent;
|
||||
background: #EF3C3C;
|
||||
}
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
570
src/component/Detail/PlacementModalMobile.vue
Normal file
570
src/component/Detail/PlacementModalMobile.vue
Normal file
@@ -0,0 +1,570 @@
|
||||
<template>
|
||||
<div v-show="placementShow">
|
||||
<a-modal class="placement_modal_mobile_component"
|
||||
v-model:visible="placementShow"
|
||||
:footer="null"
|
||||
width="111.5rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
<div class="placement_modal_body" >
|
||||
<div class="palcement_modal_header">
|
||||
<div class="placement_modal_title">Placement</div>
|
||||
<div class="placement_operate_list">
|
||||
<div class="operate_item" @click="submitPlacement">
|
||||
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
||||
<div class="operate_item_des">Submit</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="printPreview">
|
||||
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
||||
<div class="operate_item_des">Preview</div>
|
||||
</div>
|
||||
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
||||
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
||||
<div class="operate_item_des">Back</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="restoreLocationList">
|
||||
<div class="icon iconfont icon-huifu operate_icon"></div>
|
||||
<div class="operate_item_des">Restore</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placement_modal_content" @touchmove="startMove($event)">
|
||||
<div class="placement_content_operate_list">
|
||||
<!-- <div class="placement_content_operate_item" @click="overallClick()">
|
||||
<div class="placement_overall_icon">
|
||||
<div class="placement_overall_content" v-show="!printObject.ifSingle"></div>
|
||||
</div>
|
||||
<div class="placement_content_operate_des">Overall</div>
|
||||
</div> -->
|
||||
|
||||
<div class="placement_content_operate_item">
|
||||
<div class="print_scale_value">{{placement_sacle}}%</div>
|
||||
<a-slider
|
||||
id="placement_silder"
|
||||
:tooltipVisible="false"
|
||||
v-model:value="placement_sacle"
|
||||
:min="30"
|
||||
:max="300"
|
||||
/>
|
||||
<div class="placement_content_operate_des">Print Scale</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="placement_content_operate_item" @touchstart="AddDian()">
|
||||
<div class="placement_add_point_block">
|
||||
<div class="placement_add_point_content"></div>
|
||||
</div>
|
||||
<div class="placement_content_operate_des" >Add Point</div>
|
||||
</div>
|
||||
|
||||
<div class="placement_content_operate_item" @click="changeRemoveStatus">
|
||||
<div class="placement_remove_point_block"></div>
|
||||
<div class="placement_content_operate_des">Remove Point</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="img_preview_block" >
|
||||
<div class="perview_mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="img_content_block" ref="imgbox" @touchmove="startMove($event)">
|
||||
<img class="placement_img" v-lazy="perviewUrl || clothesData?.path" :key="perviewUrl || clothesData?.path">
|
||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px'}" @touchstart="getMouseDown($event,item,index)" @touchmove="startMove($event)">
|
||||
<div class="placement_add_point_content" v-show="!isRemoveStatus"></div>
|
||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let oldLocationList:any = ref([])
|
||||
let locationList:any = ref([])
|
||||
let printObject:any = ref({})
|
||||
let imgBox:any = ref({})
|
||||
let intObj:any = ref(null)
|
||||
let currentSign:any = ref({})
|
||||
let clothesData:any = ref({})
|
||||
return {
|
||||
store,
|
||||
oldLocationList,
|
||||
locationList,
|
||||
printObject,
|
||||
imgBox,
|
||||
intObj,
|
||||
currentSign,
|
||||
clothesData
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
placementShow:false,
|
||||
collectionIndex:0,
|
||||
startDian:false,
|
||||
moveOriginal:{posX: 0, posY: 0},
|
||||
isRemoveStatus:false,
|
||||
placement_sacle:30,
|
||||
isShowMark:false,
|
||||
perviewUrl:'',//预览的图片地址
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatter(value:number){
|
||||
return `${value}%`;
|
||||
},
|
||||
|
||||
showPlacementModal(data:any){
|
||||
this.clothesData = JSON.parse(JSON.stringify(data.clothesData))
|
||||
this.printObject = this.clothesData.printObject
|
||||
this.collectionIndex = data.index
|
||||
this.placement_sacle = this.printObject.scale ? this.printObject.scale * 100 : 30
|
||||
this.placementShow = true
|
||||
setTimeout(()=>{
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let position = imgbox.getBoundingClientRect()
|
||||
this.imgBox = {
|
||||
width:imgbox.clientWidth,
|
||||
height:imgbox.scrollHeight,
|
||||
left : position.left,
|
||||
top:position.top,
|
||||
scrollTop:imgbox.scrollTop || 0,
|
||||
}
|
||||
this.getLocationList(this.imgBox)
|
||||
},500)
|
||||
},
|
||||
|
||||
getLocationList(imgBox:any){
|
||||
if(this.printObject.location){
|
||||
this.locationList = this.printObject.location.map((v:any)=>{
|
||||
let data = {
|
||||
left:v[0] * imgBox.width,
|
||||
top:v[1] * imgBox.height
|
||||
}
|
||||
return data
|
||||
})
|
||||
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
}
|
||||
},
|
||||
|
||||
overallClick(){
|
||||
this.printObject.ifSingle = !this.printObject.ifSingle
|
||||
},
|
||||
|
||||
AddDian(){
|
||||
this.startDian = true
|
||||
this.isRemoveStatus = false
|
||||
this.intObj = true
|
||||
},
|
||||
|
||||
changeRemoveStatus(){
|
||||
this.isRemoveStatus = true
|
||||
},
|
||||
|
||||
startMove(event:any){
|
||||
if(this.isRemoveStatus){
|
||||
return
|
||||
}
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let scrollTop = imgbox.scrollTop;
|
||||
if(event.targetTouches[0].pageX > this.imgBox.left){
|
||||
if(this.intObj){
|
||||
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left
|
||||
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top
|
||||
this.locationList.push(this.currentSign)
|
||||
this.printObject.ifSingle = true
|
||||
this.intObj = null
|
||||
}else{
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left - this.moveOriginal.posX
|
||||
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -this.moveOriginal.posY
|
||||
document.addEventListener('touchend', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 在边界上的签名域处理
|
||||
setBoundarySign() {
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let height = imgbox.offsetHeight + imgbox.scrollTop;
|
||||
// 2 为签名域的边框
|
||||
let maxPosHeight = height - 24
|
||||
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top <= 0) {
|
||||
this.currentSign.top = 0
|
||||
} else if (this.currentSign.top >= maxPosHeight ) {
|
||||
this.currentSign.top = maxPosHeight;
|
||||
}
|
||||
if (this.currentSign.left <= 0) {
|
||||
this.currentSign.left = 0
|
||||
} else if (this.currentSign.left >= maxPosWidth) {
|
||||
this.currentSign.left = maxPosWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getMouseDown(event:any,item:any,index:number){
|
||||
if(this.isRemoveStatus){
|
||||
this.locationList.splice(index,1)
|
||||
}else{
|
||||
this.currentSign = item
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
|
||||
this.moveOriginal.posY = event.targetTouches[0].pageY - this.imgBox.top- this.currentSign.top // 1为边框
|
||||
this.startDian = true
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getMouseOver(){
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('touchend', this.getMouseOver);
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
this.oldLocationList = []
|
||||
this.locationList = []
|
||||
this.printObject = {}
|
||||
this.intObj = null
|
||||
this.currentSign = {}
|
||||
this.isRemoveStatus = false
|
||||
this.placementShow = false
|
||||
this.perviewUrl = ''
|
||||
},
|
||||
|
||||
restoreLocationList(){
|
||||
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
|
||||
},
|
||||
|
||||
submitPlacement(){
|
||||
this.printObject.scale = (this.placement_sacle / 100).toFixed(2)
|
||||
this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() :[]
|
||||
this.$emit('submitPlacement',this.printObject)
|
||||
this.closeModal()
|
||||
|
||||
},
|
||||
|
||||
getPrintLocation(){
|
||||
let {width , height} = this.imgBox
|
||||
let location = this.locationList.map((v:any)=>{
|
||||
let left = (v.left + 12) / width
|
||||
let top = (v.top + 12) / height
|
||||
let data = [left,top]
|
||||
return data
|
||||
})
|
||||
return location
|
||||
},
|
||||
|
||||
//preview打点图
|
||||
printPreview(){
|
||||
this.printObject.scale = this.placement_sacle / 100
|
||||
this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() :[]
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
designItemDetail.clothes[this.collectionIndex] = this.clothesData
|
||||
delete designItemDetail.designItemUrl
|
||||
let priority = designItemDetail.clothes.map((v:any)=>{
|
||||
return v.type
|
||||
})
|
||||
let data = {
|
||||
...designItemDetail,
|
||||
priority:priority,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
if(this.isShowMark){
|
||||
return
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.detailPrintDot, data).then(
|
||||
(rv: any) => {
|
||||
this.perviewUrl = rv
|
||||
this.isShowMark = false
|
||||
}
|
||||
).catch(res=>{
|
||||
this.isShowMark = false
|
||||
});
|
||||
},
|
||||
|
||||
backPreview(){
|
||||
this.perviewUrl = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.placement_modal_mobile_component{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
min-height: 72rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_modal_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.palcement_modal_header{
|
||||
position: relative;
|
||||
height: 6.6rem;
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
|
||||
.placement_modal_title{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
line-height: 6.6rem;
|
||||
left: 3.7rem;
|
||||
top: 0;
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
}
|
||||
.placement_operate_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 100%;
|
||||
|
||||
.operate_item{
|
||||
margin-right: 4rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.operate_icon{
|
||||
font-size: 2.1rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.operate_item_des{
|
||||
height: 1.2rem;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placement_modal_content{
|
||||
position: relative;
|
||||
height: calc(100% - 6.6rem);
|
||||
width: 100%;
|
||||
padding: 1.1rem 0;
|
||||
|
||||
.placement_content_operate_list{
|
||||
width: 9rem;
|
||||
background: #EBECF4;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top:6.8rem;
|
||||
|
||||
.placement_content_operate_item{
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.placement_overall_icon{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
padding: 0.3rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
margin: 0 auto 0.4rem;
|
||||
|
||||
.placement_overall_content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_content_operate_des{
|
||||
width: 100%;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
-moz-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
|
||||
.print_scale_value{
|
||||
height: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.ant-tooltip-placement-top{
|
||||
top: -37px !important;
|
||||
}
|
||||
|
||||
.ant-slider-track{
|
||||
background: #343579;
|
||||
}
|
||||
.ant-slider-handle{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.placement_add_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
position: relative;
|
||||
border: 2px solid #6E70FF;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.placement_remove_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border: 2px solid #000000;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img_preview_block{
|
||||
width: 40.8rem;
|
||||
background: #ffffff;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
position: relative;
|
||||
|
||||
.img_content_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 63.2rem;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
position: relative;
|
||||
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
}
|
||||
|
||||
.perview_mark_loading{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.placement_img{
|
||||
width: 100%;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
}
|
||||
|
||||
.ponit_click{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
border: 2px solid #6E70FF;
|
||||
border-radius: 50%;
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
cursor: pointer;
|
||||
|
||||
&.remove_point_click{
|
||||
border-color: transparent;
|
||||
background: #EF3C3C;
|
||||
}
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user