2023-10-30-语言适配 en
This commit is contained in:
@@ -1,343 +0,0 @@
|
||||
<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>
|
||||
@@ -10,8 +10,8 @@
|
||||
:closable="false"
|
||||
>
|
||||
<div class="design_title_text">
|
||||
<div>Details</div>
|
||||
<div class="design_title_text_intro">Edit the details of your design</div>
|
||||
<div>{{ $t('DesignDetail.Details') }}</div>
|
||||
<div class="design_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
@@ -59,7 +59,7 @@
|
||||
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
||||
</div>
|
||||
<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
|
||||
Submit
|
||||
{{ $t('DesignDetail.Submit') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail_modal_body_category">
|
||||
@@ -67,7 +67,7 @@
|
||||
<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>
|
||||
<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
|
||||
</div>
|
||||
<img :src="designItemDetail?.clothes?.[currentIndex]?.path" alt="" class="centent" @click="openCurrent(1)">
|
||||
@@ -75,7 +75,7 @@
|
||||
<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>
|
||||
<div>{{ $t('DesignDetail.CurrentPrint') }}</div>
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
|
||||
</div>
|
||||
<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" @click="openCurrent(2)">
|
||||
@@ -86,7 +86,7 @@
|
||||
<div class="clothes_detail_item clothes_detail_item_color">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Color</div>
|
||||
<div>{{ $t('DesignDetail.CurrentColor') }}</div>
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
|
||||
</div>
|
||||
<div class="img_block_item centent" @click.stop="openCurrent(3)">
|
||||
@@ -120,8 +120,6 @@
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- <ElementReplace ref="ElementReplace"></ElementReplace> -->
|
||||
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
@@ -130,10 +128,8 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide } from 'vue'
|
||||
import ElementReplace from '@/component/Detail/ElementReplace.vue'
|
||||
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
||||
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
|
||||
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
|
||||
import setDesignItem from '@/component/Detail/setDesignItem.vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { Https } from "@/tool/https";
|
||||
@@ -141,10 +137,9 @@ import {getUploadUrl,isMoible} from '@/tool/util'
|
||||
import { useStore } from "vuex";
|
||||
import GO from '@/tool/GO';
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
ElementReplace,
|
||||
AccessoryReplace,
|
||||
Draggable,
|
||||
DesignDetailAlter,
|
||||
setDesignItem,
|
||||
@@ -182,6 +177,8 @@ export default defineComponent({
|
||||
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
|
||||
let oppositeRevocationShow:any = ref()
|
||||
let revocationShow:any = ref()
|
||||
|
||||
let {t} = useI18n()
|
||||
return{
|
||||
designItemDetail,
|
||||
store,
|
||||
@@ -198,7 +195,8 @@ export default defineComponent({
|
||||
designItemDetailUrl,
|
||||
setRevocationShow,
|
||||
oppositeRevocationShow,
|
||||
revocationShow
|
||||
revocationShow,
|
||||
t,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
|
||||
@@ -8,19 +8,19 @@
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
<span>{{ $t('DesignDetailAlter.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
<span>{{ $t('DesignDetailAlter.Library') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 2" class="detail_Library">
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
<!-- clothesPrint -->
|
||||
@@ -159,7 +159,7 @@
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Palette</span>
|
||||
<span>{{ $t('DesignDetailAlter.Palette') }}</span>
|
||||
</div>
|
||||
<div class="color_setting_block">
|
||||
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||
@@ -168,10 +168,10 @@
|
||||
<div class="color_block">
|
||||
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||
<div v-show="colorBlockHex">
|
||||
HEX
|
||||
{{ $t('DesignDetailAlter.HEX') }}
|
||||
</div>
|
||||
<div v-show="!colorBlockHex">
|
||||
RGBA
|
||||
{{ $t('DesignDetailAlter.RGBA') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_right">
|
||||
@@ -196,7 +196,7 @@
|
||||
<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>
|
||||
<span>{{ $t('DesignDetailAlter.AutoRecognize') }}</span>
|
||||
</div>
|
||||
<div class="upload_centetn">
|
||||
<div class="upload_item">
|
||||
@@ -206,7 +206,7 @@
|
||||
</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 class="delete_file_block" @click="colorDeleteFile(index)">{{ $t('DesignDetailAlter.Delete') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
@@ -237,7 +237,7 @@
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Color Code</span>
|
||||
<span>{{ $t('DesignDetailAlter.ColorCode') }}</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()"/>
|
||||
@@ -265,6 +265,7 @@ import { Sketch} from '@ans1998/vue3-color'
|
||||
import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
||||
import DesignDetailEnd from './DesignDetailEnd.vue';
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
components:{
|
||||
@@ -318,6 +319,7 @@ export default defineComponent({
|
||||
})
|
||||
let workspace = ref({})
|
||||
|
||||
let {t} = useI18n()
|
||||
return{
|
||||
store,
|
||||
current,
|
||||
@@ -339,6 +341,7 @@ export default defineComponent({
|
||||
selectColor,
|
||||
selectColorList,
|
||||
workspace,
|
||||
t,
|
||||
}
|
||||
},
|
||||
|
||||
@@ -360,8 +363,6 @@ export default defineComponent({
|
||||
spin: true,
|
||||
}),
|
||||
designShowPrview:1, //展示图片预览步骤
|
||||
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
||||
|
||||
//颜色
|
||||
reviewColor:{}, //预览的颜色
|
||||
colorPickerVisible: true,
|
||||
@@ -476,7 +477,7 @@ export default defineComponent({
|
||||
// return `rgb(${r}, ${g}, ${b})`;
|
||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||
} catch (e) {
|
||||
message.error("Your browser does not support it")
|
||||
message.error(this.t('DesignDetailAlter.jsContent1'))
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -555,7 +556,7 @@ export default defineComponent({
|
||||
(v) => v.status === "done"
|
||||
);
|
||||
if (this.uploadList.length >= 8) {
|
||||
message.warning("You can select up to 8 images");
|
||||
message.warning(this.t('DesignDetailAlter.jsContent2'));
|
||||
} else {
|
||||
// this.store.commit("setSketchboardFile", fileList);
|
||||
this.uploadList = fileList
|
||||
@@ -576,7 +577,7 @@ export default defineComponent({
|
||||
if (index > -1) {
|
||||
this.uploadList.splice(index, 1);
|
||||
}
|
||||
message.warning(file.name + "upload failed");
|
||||
message.warning(file.name + this.t('DesignDetailAlter.jsContent3'));
|
||||
}
|
||||
|
||||
},
|
||||
@@ -699,11 +700,11 @@ export default defineComponent({
|
||||
beforeUpload(file){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.warning('You can only upload Image file!');
|
||||
message.warning(this.t('DesignDetailAlter.jsContent4'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 5MB!');
|
||||
message.warning(this.t('DesignDetailAlter.jsContent5'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
@@ -786,7 +787,7 @@ export default defineComponent({
|
||||
this.setColorboardList(colorList)
|
||||
this.getColorBg = true
|
||||
}else{
|
||||
message.warning("Can't find the TCX color")
|
||||
message.warning(this.t('DesignDetailAlter.jsContent6'))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<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>
|
||||
<span>{{ $t('DesignDetailEnd.NewApparel') }}</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>
|
||||
<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
|
||||
</div>
|
||||
<div class="print_left">
|
||||
<!-- <img :src="current.path" :title="current.type"> -->
|
||||
@@ -27,7 +27,7 @@
|
||||
<div>
|
||||
<div class="upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>Placement</span>
|
||||
<span>{{ $t('DesignDetailEnd.Placement') }}</span>
|
||||
</div>
|
||||
<div class="print_right">
|
||||
<div class="habit_Overal_Single">
|
||||
@@ -35,14 +35,14 @@
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !overallSingle }"
|
||||
>
|
||||
Overall
|
||||
{{ $t('DesignDetailEnd.Overall') }}
|
||||
</div>
|
||||
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: overallSingle }"
|
||||
>
|
||||
Single
|
||||
{{ $t('DesignDetailEnd.Single') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-show="!overallSingle" class="habit_System_Designer">
|
||||
@@ -68,7 +68,7 @@
|
||||
<div v-show="type_ == 3">
|
||||
<div class="result_color upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>New Color</span>
|
||||
<span>{{ $t('DesignDetailEnd.NewColor') }}</span>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
||||
@@ -84,9 +84,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
|
||||
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
|
||||
<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
|
||||
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
|
||||
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
|
||||
<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
@@ -102,6 +102,7 @@ import { useStore } from "vuex";
|
||||
import { Sketch} from '@ans1998/vue3-color'
|
||||
import DesignPrintOperation from './DesignPrintOperation.vue';
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
@@ -123,6 +124,8 @@ export default defineComponent({
|
||||
|
||||
//加载中
|
||||
let loadingShow = ref(false)
|
||||
|
||||
let {t} = useI18n()
|
||||
return{
|
||||
store,
|
||||
current,
|
||||
@@ -133,6 +136,7 @@ export default defineComponent({
|
||||
systemDesignerPercentage,
|
||||
colorList,
|
||||
loadingShow,
|
||||
t,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -175,7 +179,7 @@ export default defineComponent({
|
||||
let DesignPrintOperation = this.$refs.DesignPrintOperation
|
||||
DesignPrintOperation.init()
|
||||
}else{
|
||||
message.warning('Please select print');
|
||||
message.warning(this.t('DesignDetailEnd.jsContent1'));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
>
|
||||
<div class="designOpenrtion_content">
|
||||
<div class="design_title_text">
|
||||
<div>Placement</div>
|
||||
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
@@ -25,14 +25,14 @@
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !overallSingle }"
|
||||
>
|
||||
Overall
|
||||
{{ $t('DesignPrintOperation.Overall') }}
|
||||
</div>
|
||||
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: overallSingle }"
|
||||
>
|
||||
Single
|
||||
{{ $t('DesignPrintOperation.Single') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!overallSingle" class="habit_System_Designer">
|
||||
@@ -43,9 +43,9 @@
|
||||
>
|
||||
</a-slider>
|
||||
</div>
|
||||
<div v-show="overallSingle" @click="random" class="button_second">Random</div>
|
||||
<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
|
||||
<div v-show="overallSingle" class="print_input">
|
||||
<input class="search_input" placeholder="Please input" type="Number" v-model="printAmount" @input="setprintAmount">
|
||||
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
|
||||
<i class="fi fi-rr-trash" @click="deletePrint"></i>
|
||||
</div>
|
||||
<div class="designOpenrtion_nav">
|
||||
@@ -56,7 +56,7 @@
|
||||
<img :src="designOpenrtionList[0].path">
|
||||
</div>
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">preview</div>
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||
@@ -107,6 +107,7 @@ import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
@@ -151,6 +152,8 @@ export default defineComponent({
|
||||
height:''
|
||||
})
|
||||
let loadingShow = ref(false)
|
||||
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
designOpenrtion,
|
||||
designOpenrtionList,
|
||||
@@ -166,7 +169,8 @@ export default defineComponent({
|
||||
print,
|
||||
sketch,
|
||||
loadingShow,
|
||||
setRevocation
|
||||
setRevocation,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -674,7 +678,7 @@ export default defineComponent({
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'The above changes are not saved, being sure to continue? ',
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
|
||||
@@ -1,900 +0,0 @@
|
||||
<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.warning('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 2MB!');
|
||||
}
|
||||
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>
|
||||
@@ -1,565 +0,0 @@
|
||||
<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>
|
||||
@@ -1,570 +0,0 @@
|
||||
<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>
|
||||
@@ -2,13 +2,13 @@
|
||||
<div class="habit">
|
||||
<div v-show="openType.habit" class="habit_mask"></div>
|
||||
<div class="habit_button" @click.stop="setOpenType('habit')" >
|
||||
Workspace
|
||||
{{ $t('Habit.Workspace') }}
|
||||
<i class="fi fi-bs-angle-down"></i>
|
||||
</div>
|
||||
<div class="habit_content" v-fade="openType.habit">
|
||||
<div class="habit_title">
|
||||
<h3>Workspace Setting</h3>
|
||||
<div class="habit_intro">adjust your workspace setting</div>
|
||||
<h3>{{ $t('Habit.WorkspaceSetting') }}</h3>
|
||||
<div class="habit_intro">{{ $t('Habit.settingWorkspace') }}</div>
|
||||
</div>
|
||||
<div class="habit_type" trigger="['click']" >
|
||||
<a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
|
||||
@@ -56,15 +56,14 @@
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !workspaceItem.overallSingle }"
|
||||
>
|
||||
Overall
|
||||
{{ $t('Habit.Overall') }}
|
||||
</div>
|
||||
<a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: workspaceItem.overallSingle }"
|
||||
>
|
||||
Single
|
||||
|
||||
{{ $t('Habit.Single') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="habit_habit_singleton" v-show="workspaceItem.overallSingle">
|
||||
@@ -91,8 +90,8 @@
|
||||
>
|
||||
</a-slider>
|
||||
<div class="habit_System_Designer_text_max">
|
||||
<div class="habit_System_Designer_text">System</div>
|
||||
<div class="habit_System_Designer_text">Designer</div>
|
||||
<div class="habit_System_Designer_text">{{ $t('Habit.System') }}</div>
|
||||
<div class="habit_System_Designer_text">{{ $t('Habit.Designer') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="habit_model">
|
||||
@@ -102,7 +101,7 @@
|
||||
>
|
||||
<a-button>
|
||||
<UserOutlined />
|
||||
Mannequin
|
||||
{{ $t('Habit.Mannequin') }}
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
@@ -110,7 +109,7 @@
|
||||
<div id="modelShow" class="habit_model_show" v-fade="openType.model">
|
||||
<div class="habit_btn">
|
||||
<div class="model_current">
|
||||
<div class="model_text">Current</div>
|
||||
<div class="model_text">{{ $t('Habit.Current') }}</div>
|
||||
<div class="model_img">
|
||||
<img :src="workspaceItem.mannequinUrl" alt="">
|
||||
</div>
|
||||
@@ -121,14 +120,14 @@
|
||||
class="habit_System_Seleves_text"
|
||||
:class="{ active: !systemSeleves }"
|
||||
>
|
||||
System
|
||||
{{ $t('Habit.System') }}
|
||||
</div>
|
||||
<a-switch :disabled="mannequins?.[0]==null?true:false" v-model:checked="systemSeleves" />
|
||||
<div
|
||||
class="habit_System_Seleves_text"
|
||||
:class="{ active: systemSeleves }"
|
||||
>
|
||||
User
|
||||
{{ $t('Habit.User') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="model_img" v-show="systemSeleves" v-mousewheel>
|
||||
@@ -144,11 +143,9 @@
|
||||
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,6 +158,7 @@ import { Https } from "@/tool/https";
|
||||
import type { MenuProps } from "ant-design-vue";
|
||||
import { Modal,message,Upload} from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
@@ -200,6 +198,7 @@ export default defineComponent({
|
||||
let sex = ref([
|
||||
|
||||
])
|
||||
const {t} = useI18n()
|
||||
|
||||
return{
|
||||
systemSeleves,
|
||||
@@ -209,7 +208,8 @@ export default defineComponent({
|
||||
workspaceItem,
|
||||
workspaceItemName,
|
||||
singleTypeList,
|
||||
sex
|
||||
sex,
|
||||
t
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
@@ -427,7 +427,7 @@ export default defineComponent({
|
||||
cancelDsign(index:any){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'Whether to delete the workspace?',
|
||||
title: _this.t('Habit.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
@@ -461,7 +461,7 @@ export default defineComponent({
|
||||
// this.deleteWorkspace(data)
|
||||
}else{
|
||||
if(this.workspaceItemName == ''){
|
||||
message.warning('Please enter a workbench name');
|
||||
message.warning(this.t('Habit.jsContent2'));
|
||||
}else{
|
||||
if(index == -1){
|
||||
let data = {
|
||||
|
||||
Reference in New Issue
Block a user