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"
|
:closable="false"
|
||||||
>
|
>
|
||||||
<div class="design_title_text">
|
<div class="design_title_text">
|
||||||
<div>Details</div>
|
<div>{{ $t('DesignDetail.Details') }}</div>
|
||||||
<div class="design_title_text_intro">Edit the details of your design</div>
|
<div class="design_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||||
<i class="fi fi-rr-cross-small"></i>
|
<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>
|
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
|
<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
|
||||||
Submit
|
{{ $t('DesignDetail.Submit') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail_modal_body_category">
|
<div class="detail_modal_body_category">
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
<div class="clothes_detail_item clothes_detail_item_apparel">
|
<div class="clothes_detail_item clothes_detail_item_apparel">
|
||||||
<div class="clothes_item_header">
|
<div class="clothes_item_header">
|
||||||
<i class="fi fi-rs-comments"></i>
|
<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>
|
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
|
||||||
</div>
|
</div>
|
||||||
<img :src="designItemDetail?.clothes?.[currentIndex]?.path" alt="" class="centent" @click="openCurrent(1)">
|
<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_detail_item clothes_detail_item_print">
|
||||||
<div class="clothes_item_header">
|
<div class="clothes_item_header">
|
||||||
<i class="fi fi-rs-comments"></i>
|
<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>
|
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" @click="openCurrent(2)">
|
<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_detail_item clothes_detail_item_color">
|
||||||
<div class="clothes_item_header">
|
<div class="clothes_item_header">
|
||||||
<i class="fi fi-rs-comments"></i>
|
<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>
|
<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="img_block_item centent" @click.stop="openCurrent(3)">
|
<div class="img_block_item centent" @click.stop="openCurrent(3)">
|
||||||
@@ -120,8 +120,6 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<!-- <ElementReplace ref="ElementReplace"></ElementReplace> -->
|
|
||||||
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
|
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
@@ -130,10 +128,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,ref,provide } from 'vue'
|
import { defineComponent,computed,ref,provide } from 'vue'
|
||||||
import ElementReplace from '@/component/Detail/ElementReplace.vue'
|
|
||||||
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
||||||
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
|
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
|
||||||
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
|
|
||||||
import setDesignItem from '@/component/Detail/setDesignItem.vue'
|
import setDesignItem from '@/component/Detail/setDesignItem.vue'
|
||||||
import Draggable from 'vuedraggable'
|
import Draggable from 'vuedraggable'
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
@@ -141,10 +137,9 @@ import {getUploadUrl,isMoible} from '@/tool/util'
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import GO from '@/tool/GO';
|
import GO from '@/tool/GO';
|
||||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
ElementReplace,
|
|
||||||
AccessoryReplace,
|
|
||||||
Draggable,
|
Draggable,
|
||||||
DesignDetailAlter,
|
DesignDetailAlter,
|
||||||
setDesignItem,
|
setDesignItem,
|
||||||
@@ -182,6 +177,8 @@ export default defineComponent({
|
|||||||
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
|
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
|
||||||
let oppositeRevocationShow:any = ref()
|
let oppositeRevocationShow:any = ref()
|
||||||
let revocationShow:any = ref()
|
let revocationShow:any = ref()
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return{
|
return{
|
||||||
designItemDetail,
|
designItemDetail,
|
||||||
store,
|
store,
|
||||||
@@ -198,7 +195,8 @@ export default defineComponent({
|
|||||||
designItemDetailUrl,
|
designItemDetailUrl,
|
||||||
setRevocationShow,
|
setRevocationShow,
|
||||||
oppositeRevocationShow,
|
oppositeRevocationShow,
|
||||||
revocationShow
|
revocationShow,
|
||||||
|
t,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
|
|||||||
@@ -8,19 +8,19 @@
|
|||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Upload</span>
|
<span>{{ $t('DesignDetailAlter.Upload') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click.stop="open(2)"
|
@click.stop="open(2)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Library</span>
|
<span>{{ $t('DesignDetailAlter.Library') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 2" class="detail_Library">
|
<div v-show="openClick == 2" class="detail_Library">
|
||||||
<div class="content_search_block">
|
<div class="content_search_block">
|
||||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
<input class="search_input" :placeholder="$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 class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- clothesPrint -->
|
<!-- clothesPrint -->
|
||||||
@@ -159,7 +159,7 @@
|
|||||||
<div class="right_content_line">
|
<div class="right_content_line">
|
||||||
<div class="upload_right_header">
|
<div class="upload_right_header">
|
||||||
<i class="color_edit fi fi-bs-comments" ></i>
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
<span>Palette</span>
|
<span>{{ $t('DesignDetailAlter.Palette') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="color_setting_block">
|
<div class="color_setting_block">
|
||||||
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||||
@@ -168,10 +168,10 @@
|
|||||||
<div class="color_block">
|
<div class="color_block">
|
||||||
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||||
<div v-show="colorBlockHex">
|
<div v-show="colorBlockHex">
|
||||||
HEX
|
{{ $t('DesignDetailAlter.HEX') }}
|
||||||
</div>
|
</div>
|
||||||
<div v-show="!colorBlockHex">
|
<div v-show="!colorBlockHex">
|
||||||
RGBA
|
{{ $t('DesignDetailAlter.RGBA') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="color_right">
|
<div class="color_right">
|
||||||
@@ -196,7 +196,7 @@
|
|||||||
<div class="right_content_line right_content_line_upload">
|
<div class="right_content_line right_content_line_upload">
|
||||||
<div class="upload_right_header">
|
<div class="upload_right_header">
|
||||||
<i class="color_edit fi fi-bs-comments" ></i>
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
<span>Auto Recognize</span>
|
<span>{{ $t('DesignDetailAlter.AutoRecognize') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload_centetn">
|
<div class="upload_centetn">
|
||||||
<div class="upload_item">
|
<div class="upload_item">
|
||||||
@@ -206,7 +206,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="upload_file_item_content" v-show="file.status === 'done'">
|
<div class="upload_file_item_content" v-show="file.status === 'done'">
|
||||||
<img :src="file?.imgUrl" class="upload_img" ref="colorImage">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<a-upload
|
<a-upload
|
||||||
@@ -237,7 +237,7 @@
|
|||||||
<div class="right_content_line">
|
<div class="right_content_line">
|
||||||
<div class="upload_right_header">
|
<div class="upload_right_header">
|
||||||
<i class="color_edit fi fi-bs-comments" ></i>
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
<span>Color Code</span>
|
<span>{{ $t('DesignDetailAlter.ColorCode') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="get_color_block">
|
<div class="get_color_block">
|
||||||
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
<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 {getUploadUrl,rgbToHsv} from '@/tool/util'
|
||||||
import DesignDetailEnd from './DesignDetailEnd.vue';
|
import DesignDetailEnd from './DesignDetailEnd.vue';
|
||||||
import { getCookie } from "@/tool/cookie";
|
import { getCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: ["msg"],
|
props: ["msg"],
|
||||||
components:{
|
components:{
|
||||||
@@ -318,6 +319,7 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
let workspace = ref({})
|
let workspace = ref({})
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return{
|
return{
|
||||||
store,
|
store,
|
||||||
current,
|
current,
|
||||||
@@ -339,6 +341,7 @@ export default defineComponent({
|
|||||||
selectColor,
|
selectColor,
|
||||||
selectColorList,
|
selectColorList,
|
||||||
workspace,
|
workspace,
|
||||||
|
t,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -360,8 +363,6 @@ export default defineComponent({
|
|||||||
spin: true,
|
spin: true,
|
||||||
}),
|
}),
|
||||||
designShowPrview:1, //展示图片预览步骤
|
designShowPrview:1, //展示图片预览步骤
|
||||||
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
|
||||||
|
|
||||||
//颜色
|
//颜色
|
||||||
reviewColor:{}, //预览的颜色
|
reviewColor:{}, //预览的颜色
|
||||||
colorPickerVisible: true,
|
colorPickerVisible: true,
|
||||||
@@ -476,7 +477,7 @@ export default defineComponent({
|
|||||||
// return `rgb(${r}, ${g}, ${b})`;
|
// return `rgb(${r}, ${g}, ${b})`;
|
||||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||||
} catch (e) {
|
} 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"
|
(v) => v.status === "done"
|
||||||
);
|
);
|
||||||
if (this.uploadList.length >= 8) {
|
if (this.uploadList.length >= 8) {
|
||||||
message.warning("You can select up to 8 images");
|
message.warning(this.t('DesignDetailAlter.jsContent2'));
|
||||||
} else {
|
} else {
|
||||||
// this.store.commit("setSketchboardFile", fileList);
|
// this.store.commit("setSketchboardFile", fileList);
|
||||||
this.uploadList = fileList
|
this.uploadList = fileList
|
||||||
@@ -576,7 +577,7 @@ export default defineComponent({
|
|||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
this.uploadList.splice(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){
|
beforeUpload(file){
|
||||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning('You can only upload Image file!');
|
message.warning(this.t('DesignDetailAlter.jsContent4'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning('Image must smaller than 5MB!');
|
message.warning(this.t('DesignDetailAlter.jsContent5'));
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
@@ -786,7 +787,7 @@ export default defineComponent({
|
|||||||
this.setColorboardList(colorList)
|
this.setColorboardList(colorList)
|
||||||
this.getColorBg = true
|
this.getColorBg = true
|
||||||
}else{
|
}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 v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
|
||||||
<div class="upload_title result_apparel" v-show="type_ == 1">
|
<div class="upload_title result_apparel" v-show="type_ == 1">
|
||||||
<i class="color_edit fi fi-bs-comments"></i>
|
<i class="color_edit fi fi-bs-comments"></i>
|
||||||
<span>New Apparel</span>
|
<span>{{ $t('DesignDetailEnd.NewApparel') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="type_ == 2" class="result_print">
|
<div v-show="type_ == 2" class="result_print">
|
||||||
<div>
|
<div>
|
||||||
<div class="upload_title">
|
<div class="upload_title">
|
||||||
<i class="color_edit fi fi-bs-comments"></i>
|
<i class="color_edit fi fi-bs-comments"></i>
|
||||||
<span>New Print</span>
|
<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="print_left">
|
<div class="print_left">
|
||||||
<!-- <img :src="current.path" :title="current.type"> -->
|
<!-- <img :src="current.path" :title="current.type"> -->
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="upload_title">
|
<div class="upload_title">
|
||||||
<i class="color_edit fi fi-bs-comments"></i>
|
<i class="color_edit fi fi-bs-comments"></i>
|
||||||
<span>Placement</span>
|
<span>{{ $t('DesignDetailEnd.Placement') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="print_right">
|
<div class="print_right">
|
||||||
<div class="habit_Overal_Single">
|
<div class="habit_Overal_Single">
|
||||||
@@ -35,14 +35,14 @@
|
|||||||
class="habit_Overal_Single_text"
|
class="habit_Overal_Single_text"
|
||||||
:class="{ active: !overallSingle }"
|
:class="{ active: !overallSingle }"
|
||||||
>
|
>
|
||||||
Overall
|
{{ $t('DesignDetailEnd.Overall') }}
|
||||||
</div>
|
</div>
|
||||||
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
|
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
|
||||||
<div
|
<div
|
||||||
class="habit_Overal_Single_text"
|
class="habit_Overal_Single_text"
|
||||||
:class="{ active: overallSingle }"
|
:class="{ active: overallSingle }"
|
||||||
>
|
>
|
||||||
Single
|
{{ $t('DesignDetailEnd.Single') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div v-show="!overallSingle" class="habit_System_Designer">
|
<!-- <div v-show="!overallSingle" class="habit_System_Designer">
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
<div v-show="type_ == 3">
|
<div v-show="type_ == 3">
|
||||||
<div class="result_color upload_title">
|
<div class="result_color upload_title">
|
||||||
<i class="color_edit fi fi-bs-comments"></i>
|
<i class="color_edit fi fi-bs-comments"></i>
|
||||||
<span>New Color</span>
|
<span>{{ $t('DesignDetailEnd.NewColor') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
||||||
@@ -84,9 +84,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="type_ == 1 || type_ == 3" @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">Layout</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">preview</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">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
@@ -102,6 +102,7 @@ import { useStore } from "vuex";
|
|||||||
import { Sketch} from '@ans1998/vue3-color'
|
import { Sketch} from '@ans1998/vue3-color'
|
||||||
import DesignPrintOperation from './DesignPrintOperation.vue';
|
import DesignPrintOperation from './DesignPrintOperation.vue';
|
||||||
import { message,Upload} from 'ant-design-vue';
|
import { message,Upload} from 'ant-design-vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: ["msg"],
|
props: ["msg"],
|
||||||
@@ -123,6 +124,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
//加载中
|
//加载中
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return{
|
return{
|
||||||
store,
|
store,
|
||||||
current,
|
current,
|
||||||
@@ -133,6 +136,7 @@ export default defineComponent({
|
|||||||
systemDesignerPercentage,
|
systemDesignerPercentage,
|
||||||
colorList,
|
colorList,
|
||||||
loadingShow,
|
loadingShow,
|
||||||
|
t,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
@@ -175,7 +179,7 @@ export default defineComponent({
|
|||||||
let DesignPrintOperation = this.$refs.DesignPrintOperation
|
let DesignPrintOperation = this.$refs.DesignPrintOperation
|
||||||
DesignPrintOperation.init()
|
DesignPrintOperation.init()
|
||||||
}else{
|
}else{
|
||||||
message.warning('Please select print');
|
message.warning(this.t('DesignDetailEnd.jsContent1'));
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
>
|
>
|
||||||
<div class="designOpenrtion_content">
|
<div class="designOpenrtion_content">
|
||||||
<div class="design_title_text">
|
<div class="design_title_text">
|
||||||
<div>Placement</div>
|
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||||
<i class="fi fi-rr-cross-small"></i>
|
<i class="fi fi-rr-cross-small"></i>
|
||||||
@@ -25,14 +25,14 @@
|
|||||||
class="habit_Overal_Single_text"
|
class="habit_Overal_Single_text"
|
||||||
:class="{ active: !overallSingle }"
|
:class="{ active: !overallSingle }"
|
||||||
>
|
>
|
||||||
Overall
|
{{ $t('DesignPrintOperation.Overall') }}
|
||||||
</div>
|
</div>
|
||||||
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
|
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
|
||||||
<div
|
<div
|
||||||
class="habit_Overal_Single_text"
|
class="habit_Overal_Single_text"
|
||||||
:class="{ active: overallSingle }"
|
:class="{ active: overallSingle }"
|
||||||
>
|
>
|
||||||
Single
|
{{ $t('DesignPrintOperation.Single') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="!overallSingle" class="habit_System_Designer">
|
<div v-show="!overallSingle" class="habit_System_Designer">
|
||||||
@@ -43,9 +43,9 @@
|
|||||||
>
|
>
|
||||||
</a-slider>
|
</a-slider>
|
||||||
</div>
|
</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">
|
<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>
|
<i class="fi fi-rr-trash" @click="deletePrint"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="designOpenrtion_nav">
|
<div class="designOpenrtion_nav">
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
<img :src="designOpenrtionList[0].path">
|
<img :src="designOpenrtionList[0].path">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">preview</div>
|
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||||
@@ -107,6 +107,7 @@ import { useStore } from "vuex";
|
|||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
@@ -151,6 +152,8 @@ export default defineComponent({
|
|||||||
height:''
|
height:''
|
||||||
})
|
})
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
designOpenrtion,
|
designOpenrtion,
|
||||||
designOpenrtionList,
|
designOpenrtionList,
|
||||||
@@ -166,7 +169,8 @@ export default defineComponent({
|
|||||||
print,
|
print,
|
||||||
sketch,
|
sketch,
|
||||||
loadingShow,
|
loadingShow,
|
||||||
setRevocation
|
setRevocation,
|
||||||
|
t,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -674,7 +678,7 @@ export default defineComponent({
|
|||||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||||
let _this = this
|
let _this = this
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: 'The above changes are not saved, being sure to continue? ',
|
title: this.t('DesignPrintOperation.jsContent1'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
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 class="habit">
|
||||||
<div v-show="openType.habit" class="habit_mask"></div>
|
<div v-show="openType.habit" class="habit_mask"></div>
|
||||||
<div class="habit_button" @click.stop="setOpenType('habit')" >
|
<div class="habit_button" @click.stop="setOpenType('habit')" >
|
||||||
Workspace
|
{{ $t('Habit.Workspace') }}
|
||||||
<i class="fi fi-bs-angle-down"></i>
|
<i class="fi fi-bs-angle-down"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="habit_content" v-fade="openType.habit">
|
<div class="habit_content" v-fade="openType.habit">
|
||||||
<div class="habit_title">
|
<div class="habit_title">
|
||||||
<h3>Workspace Setting</h3>
|
<h3>{{ $t('Habit.WorkspaceSetting') }}</h3>
|
||||||
<div class="habit_intro">adjust your workspace setting</div>
|
<div class="habit_intro">{{ $t('Habit.settingWorkspace') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="habit_type" trigger="['click']" >
|
<div class="habit_type" trigger="['click']" >
|
||||||
<a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
|
<a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
|
||||||
@@ -56,15 +56,14 @@
|
|||||||
class="habit_Overal_Single_text"
|
class="habit_Overal_Single_text"
|
||||||
:class="{ active: !workspaceItem.overallSingle }"
|
:class="{ active: !workspaceItem.overallSingle }"
|
||||||
>
|
>
|
||||||
Overall
|
{{ $t('Habit.Overall') }}
|
||||||
</div>
|
</div>
|
||||||
<a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
|
<a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
|
||||||
<div
|
<div
|
||||||
class="habit_Overal_Single_text"
|
class="habit_Overal_Single_text"
|
||||||
:class="{ active: workspaceItem.overallSingle }"
|
:class="{ active: workspaceItem.overallSingle }"
|
||||||
>
|
>
|
||||||
Single
|
{{ $t('Habit.Single') }}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="habit_habit_singleton" v-show="workspaceItem.overallSingle">
|
<div class="habit_habit_singleton" v-show="workspaceItem.overallSingle">
|
||||||
@@ -91,8 +90,8 @@
|
|||||||
>
|
>
|
||||||
</a-slider>
|
</a-slider>
|
||||||
<div class="habit_System_Designer_text_max">
|
<div class="habit_System_Designer_text_max">
|
||||||
<div class="habit_System_Designer_text">System</div>
|
<div class="habit_System_Designer_text">{{ $t('Habit.System') }}</div>
|
||||||
<div class="habit_System_Designer_text">Designer</div>
|
<div class="habit_System_Designer_text">{{ $t('Habit.Designer') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="habit_model">
|
<div class="habit_model">
|
||||||
@@ -102,7 +101,7 @@
|
|||||||
>
|
>
|
||||||
<a-button>
|
<a-button>
|
||||||
<UserOutlined />
|
<UserOutlined />
|
||||||
Mannequin
|
{{ $t('Habit.Mannequin') }}
|
||||||
<DownOutlined />
|
<DownOutlined />
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-dropdown>
|
</a-dropdown>
|
||||||
@@ -110,7 +109,7 @@
|
|||||||
<div id="modelShow" class="habit_model_show" v-fade="openType.model">
|
<div id="modelShow" class="habit_model_show" v-fade="openType.model">
|
||||||
<div class="habit_btn">
|
<div class="habit_btn">
|
||||||
<div class="model_current">
|
<div class="model_current">
|
||||||
<div class="model_text">Current</div>
|
<div class="model_text">{{ $t('Habit.Current') }}</div>
|
||||||
<div class="model_img">
|
<div class="model_img">
|
||||||
<img :src="workspaceItem.mannequinUrl" alt="">
|
<img :src="workspaceItem.mannequinUrl" alt="">
|
||||||
</div>
|
</div>
|
||||||
@@ -121,14 +120,14 @@
|
|||||||
class="habit_System_Seleves_text"
|
class="habit_System_Seleves_text"
|
||||||
:class="{ active: !systemSeleves }"
|
:class="{ active: !systemSeleves }"
|
||||||
>
|
>
|
||||||
System
|
{{ $t('Habit.System') }}
|
||||||
</div>
|
</div>
|
||||||
<a-switch :disabled="mannequins?.[0]==null?true:false" v-model:checked="systemSeleves" />
|
<a-switch :disabled="mannequins?.[0]==null?true:false" v-model:checked="systemSeleves" />
|
||||||
<div
|
<div
|
||||||
class="habit_System_Seleves_text"
|
class="habit_System_Seleves_text"
|
||||||
:class="{ active: systemSeleves }"
|
:class="{ active: systemSeleves }"
|
||||||
>
|
>
|
||||||
User
|
{{ $t('Habit.User') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="model_img" v-show="systemSeleves" v-mousewheel>
|
<div class="model_img" v-show="systemSeleves" v-mousewheel>
|
||||||
@@ -144,11 +143,9 @@
|
|||||||
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')">
|
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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 type { MenuProps } from "ant-design-vue";
|
||||||
import { Modal,message,Upload} from 'ant-design-vue';
|
import { Modal,message,Upload} from 'ant-design-vue';
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
DownOutlined,
|
DownOutlined,
|
||||||
@@ -200,6 +198,7 @@ export default defineComponent({
|
|||||||
let sex = ref([
|
let sex = ref([
|
||||||
|
|
||||||
])
|
])
|
||||||
|
const {t} = useI18n()
|
||||||
|
|
||||||
return{
|
return{
|
||||||
systemSeleves,
|
systemSeleves,
|
||||||
@@ -209,7 +208,8 @@ export default defineComponent({
|
|||||||
workspaceItem,
|
workspaceItem,
|
||||||
workspaceItemName,
|
workspaceItemName,
|
||||||
singleTypeList,
|
singleTypeList,
|
||||||
sex
|
sex,
|
||||||
|
t
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
@@ -427,7 +427,7 @@ export default defineComponent({
|
|||||||
cancelDsign(index:any){
|
cancelDsign(index:any){
|
||||||
let _this = this
|
let _this = this
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: 'Whether to delete the workspace?',
|
title: _this.t('Habit.jsContent1'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
@@ -461,7 +461,7 @@ export default defineComponent({
|
|||||||
// this.deleteWorkspace(data)
|
// this.deleteWorkspace(data)
|
||||||
}else{
|
}else{
|
||||||
if(this.workspaceItemName == ''){
|
if(this.workspaceItemName == ''){
|
||||||
message.warning('Please enter a workbench name');
|
message.warning(this.t('Habit.jsContent2'));
|
||||||
}else{
|
}else{
|
||||||
if(index == -1){
|
if(index == -1){
|
||||||
let data = {
|
let data = {
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="colorboard_upload_modal">
|
<div class="colorboard_upload_modal">
|
||||||
<div class="modal_layout">
|
<div class="modal_layout">
|
||||||
<div class="modal_text">
|
<div class="modal_text">
|
||||||
<div>Thumbnail preview of selected moodboard</div>
|
<div>{{ $t('ColorboardUpload.Thumbnail') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="started_btn" @click="clearCurrentColor">Clear</span>
|
<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
<div class="right_content_line">
|
<div class="right_content_line">
|
||||||
<div class="upload_right_header">
|
<div class="upload_right_header">
|
||||||
<i class="color_edit fi fi-bs-comments" ></i>
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
<span>Palette</span>
|
<span>{{ $t('ColorboardUpload.Palette') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="color_setting_block">
|
<div class="color_setting_block">
|
||||||
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||||
@@ -28,10 +28,10 @@
|
|||||||
<div class="color_block">
|
<div class="color_block">
|
||||||
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||||
<div v-show="colorBlockHex">
|
<div v-show="colorBlockHex">
|
||||||
HEX
|
{{ $t('ColorboardUpload.HEX') }}
|
||||||
</div>
|
</div>
|
||||||
<div v-show="!colorBlockHex">
|
<div v-show="!colorBlockHex">
|
||||||
RGBA
|
{{ $t('ColorboardUpload.RGBA') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="color_right">
|
<div class="color_right">
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
<div class="right_content_line right_content_line_upload">
|
<div class="right_content_line right_content_line_upload">
|
||||||
<div class="upload_right_header">
|
<div class="upload_right_header">
|
||||||
<i class="color_edit fi fi-bs-comments" ></i>
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
<span>Auto Recognize</span>
|
<span>{{ $t('ColorboardUpload.AutoRecognize') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload_centetn">
|
<div class="upload_centetn">
|
||||||
<div class="upload_item">
|
<div class="upload_item">
|
||||||
@@ -99,13 +99,13 @@
|
|||||||
<div class="right_content_line">
|
<div class="right_content_line">
|
||||||
<div class="upload_right_header">
|
<div class="upload_right_header">
|
||||||
<i class="color_edit fi fi-bs-comments" ></i>
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
<span>Color Code</span>
|
<span>{{ $t('ColorboardUpload.ColorCode') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="get_color_block">
|
<div class="get_color_block">
|
||||||
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
||||||
<div class="get_color_button" @click="getTcxColor()">
|
<div class="get_color_button" @click="getTcxColor()">
|
||||||
<span class="icon iconfont icon-huoquduixiang"></span>
|
<span class="icon iconfont icon-huoquduixiang"></span>
|
||||||
<span class="get_color_des">Extract Color</span>
|
<span class="get_color_des">{{ $t('ColorboardUpload.ExtractColor') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
|
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
|
||||||
<img src="#" :title="pantongName">
|
<img src="#" :title="pantongName">
|
||||||
@@ -127,6 +127,7 @@ import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
|||||||
import {useStore} from 'vuex'
|
import {useStore} from 'vuex'
|
||||||
import ColorThief from '@/tool/colorthief/colorthief'
|
import ColorThief from '@/tool/colorthief/colorthief'
|
||||||
import { message,Upload} from 'ant-design-vue';
|
import { message,Upload} from 'ant-design-vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
Chrome,
|
Chrome,
|
||||||
@@ -141,11 +142,14 @@ export default defineComponent({
|
|||||||
}) //顔色选择器默认颜色
|
}) //顔色选择器默认颜色
|
||||||
let selectColorList = ref({
|
let selectColorList = ref({
|
||||||
})
|
})
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
colorList,
|
colorList,
|
||||||
selectColor,
|
selectColor,
|
||||||
selectColorList,
|
selectColorList,
|
||||||
|
t,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
@@ -218,7 +222,7 @@ export default defineComponent({
|
|||||||
// return `rgb(${r}, ${g}, ${b})`;
|
// return `rgb(${r}, ${g}, ${b})`;
|
||||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
message.warning("Your browser does not support it")
|
message.warning(this.t('ColorboardUpload.jsContent1'))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// if ("EyeDropper" in window) {
|
// if ("EyeDropper" in window) {
|
||||||
@@ -266,7 +270,7 @@ export default defineComponent({
|
|||||||
this.setColorboardList(colorList)
|
this.setColorboardList(colorList)
|
||||||
this.getColorBg = true
|
this.getColorBg = true
|
||||||
}else{
|
}else{
|
||||||
message.warning("Can't find the TCX color")
|
message.warning(this.t('ColorboardUpload.jsContent2'))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -371,11 +375,11 @@ export default defineComponent({
|
|||||||
beforeUpload(file){
|
beforeUpload(file){
|
||||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning('You can only upload Image file!');
|
message.warning(this.t('ColorboardUpload.jsContent3'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning('Image must smaller than 5MB!');
|
message.warning(this.t('ColorboardUpload.jsContent4'));
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -10,11 +10,11 @@
|
|||||||
>
|
>
|
||||||
<div class="collection_title">
|
<div class="collection_title">
|
||||||
<div class="collection_title_text">
|
<div class="collection_title_text">
|
||||||
<div>Cut picture</div>
|
<div>{{ $t('Cropper.Cutpicture') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header_right_block" @click.stop="">
|
<div class="header_right_block" @click.stop="">
|
||||||
<div class="next_step_button" @click.stop="finishCropper()">Finish</div>
|
<div class="next_step_button" @click.stop="finishCropper()">{{ $t('Cropper.Finish') }}</div>
|
||||||
<div class="header_cancel_button" @click.stop="cancleCropper()">Cancel</div>
|
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="collection_modal_body">
|
<div class="collection_modal_body">
|
||||||
@@ -45,7 +45,7 @@
|
|||||||
<div class="cut_picture_right">
|
<div class="cut_picture_right">
|
||||||
<div class="cur_picture_right_header">
|
<div class="cur_picture_right_header">
|
||||||
<div class="review_logo icon iconfont icon-yulan"></div>
|
<div class="review_logo icon iconfont icon-yulan"></div>
|
||||||
<div>Crop Preview</div>
|
<div>{{ $t('Cropper.CropPreview') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cut_picture_review_block">
|
<div class="cut_picture_review_block">
|
||||||
<div class="cut_picture_review_item">
|
<div class="cut_picture_review_item">
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
v-model="checkbox[0].type"
|
v-model="checkbox[0].type"
|
||||||
@click="setKeyword(0)"
|
@click="setKeyword(0)"
|
||||||
/>
|
/>
|
||||||
<span>Image Only</span>
|
<span>{{ $t('Generate.ImageOnly') }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
v-model="checkbox[1].type"
|
v-model="checkbox[1].type"
|
||||||
@click="setKeyword(1)"
|
@click="setKeyword(1)"
|
||||||
/>
|
/>
|
||||||
<span>Text Only</span>
|
<span>{{ $t('Generate.TextOnly') }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -28,14 +28,14 @@
|
|||||||
v-model="checkbox[2].type"
|
v-model="checkbox[2].type"
|
||||||
@click="setKeyword(2)"
|
@click="setKeyword(2)"
|
||||||
/>
|
/>
|
||||||
<span>Text-Image</span>
|
<span>{{ $t('Generate.TextImage') }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="type_.type2 == 'Printboard'" class="printModel">
|
<div v-if="type_.type2 == 'Printboard'" class="printModel">
|
||||||
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
||||||
<ul v-show="printModel.optype">
|
<ul v-show="printModel.optype">
|
||||||
<li class="printModel_item" @click="setprintModel(1)">Model1</li>
|
<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
|
||||||
<li class="printModel_item" @click="setprintModel(2)">Model2</li>
|
<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -43,13 +43,13 @@
|
|||||||
<input
|
<input
|
||||||
class="search_input"
|
class="search_input"
|
||||||
@input="ifMaximumLength"
|
@input="ifMaximumLength"
|
||||||
placeholder="Prompt input"
|
:placeholder="$t('Generate.inputContent1')"
|
||||||
:maxlength='inputShow?0:9999'
|
:maxlength='inputShow?0:9999'
|
||||||
v-model="searchPictureName"
|
v-model="searchPictureName"
|
||||||
@keydown.enter="getgenerate()"
|
@keydown.enter="getgenerate()"
|
||||||
/>
|
/>
|
||||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
|
||||||
<span>The entered content exceeds the maximum length.</span>
|
<span>{{ $t('Generate.maximumLength') }}</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img">
|
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img">
|
||||||
@@ -182,6 +182,7 @@ import GO from "@/tool/GO";
|
|||||||
import { getCookie } from "@/tool/cookie";
|
import { getCookie } from "@/tool/cookie";
|
||||||
import { getUploadUrl } from "@/tool/util";
|
import { getUploadUrl } from "@/tool/util";
|
||||||
import { forEach } from "jszip";
|
import { forEach } from "jszip";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: ["msg",'sketchCatecoryList'],
|
props: ["msg",'sketchCatecoryList'],
|
||||||
setup() {
|
setup() {
|
||||||
@@ -230,6 +231,8 @@ export default defineComponent({
|
|||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
let inputShow = ref(false)
|
let inputShow = ref(false)
|
||||||
let inputTime = ref()
|
let inputTime = ref()
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
imgList,
|
imgList,
|
||||||
selectImgList,
|
selectImgList,
|
||||||
@@ -255,6 +258,7 @@ export default defineComponent({
|
|||||||
workspace,
|
workspace,
|
||||||
inputShow,
|
inputShow,
|
||||||
inputTime,
|
inputTime,
|
||||||
|
t,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data(prop) {
|
data(prop) {
|
||||||
@@ -320,11 +324,11 @@ export default defineComponent({
|
|||||||
file.type === "image/jpg" ||
|
file.type === "image/jpg" ||
|
||||||
file.type === "image/bmp";
|
file.type === "image/bmp";
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning("You can only upload Image file!");
|
message.warning(this.t('Generate.jsContent1'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning("Image must smaller than 2MB!");
|
message.warning(this.t('Generate.jsContent2'));
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
@@ -364,7 +368,7 @@ export default defineComponent({
|
|||||||
getgenerate(){
|
getgenerate(){
|
||||||
if(!this.searchPictureName){
|
if(!this.searchPictureName){
|
||||||
message.warning(
|
message.warning(
|
||||||
"Please enter content"
|
this.t('Generate.jsContent3')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -372,13 +376,13 @@ export default defineComponent({
|
|||||||
let arr = this.searchPictureName.split(/\s+/).length
|
let arr = this.searchPictureName.split(/\s+/).length
|
||||||
if(arr > 75){
|
if(arr > 75){
|
||||||
message.warning(
|
message.warning(
|
||||||
"The entered content exceeds the maximum length."
|
this.t('Generate.jsContent4')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
message.warning(
|
message.warning(
|
||||||
"Please enter content"
|
this.t('Generate.jsContent5')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -444,7 +448,7 @@ export default defineComponent({
|
|||||||
);
|
);
|
||||||
let arr = this.store.state.UploadFilesModule.sketchboard;
|
let arr = this.store.state.UploadFilesModule.sketchboard;
|
||||||
if (arr.length >= 8) {
|
if (arr.length >= 8) {
|
||||||
message.warning("You can select up to 8 images");
|
message.warning(this.t('Generate.jsContent6'));
|
||||||
} else {
|
} else {
|
||||||
this.sketchboardList = fileList
|
this.sketchboardList = fileList
|
||||||
}
|
}
|
||||||
@@ -458,7 +462,7 @@ export default defineComponent({
|
|||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
this.sketchboardList.splice(index, 1);
|
this.sketchboardList.splice(index, 1);
|
||||||
}
|
}
|
||||||
message.error(file.name + "upload failed");
|
message.error(file.name + this.t('Generate.jsContent5'));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showFileCategory(file: any) {
|
showFileCategory(file: any) {
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<div class="header_user_icon"></div>
|
<div class="header_user_icon"></div>
|
||||||
<!-- <div class="header_icon icon iconfont icon-touxiang3"></div> -->
|
<!-- <div class="header_icon icon iconfont icon-touxiang3"></div> -->
|
||||||
<div class="header_user_content">
|
<div class="header_user_content">
|
||||||
<div class="username"><span>/</span> hello@{{ userInfo?.userName }}</div>
|
<div class="username"><span>/</span> {{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'icon',
|
'icon',
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
]"
|
]"
|
||||||
@click="turnToPage('home')"
|
@click="turnToPage('home')"
|
||||||
>
|
>
|
||||||
HOME
|
{{$t('Header.HOME')}}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
]"
|
]"
|
||||||
@click="turnToPage('library')"
|
@click="turnToPage('library')"
|
||||||
>
|
>
|
||||||
LIBRARY
|
{{$t('Header.LIBRARY')}}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
@@ -45,7 +45,8 @@
|
|||||||
]"
|
]"
|
||||||
@click="turnToPage('history')"
|
@click="turnToPage('history')"
|
||||||
>
|
>
|
||||||
HISTORY
|
{{$t('Header.HISTORY')}}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -60,12 +61,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<nav class="select_block" v-show="isShowOperate">
|
<nav class="select_block" v-show="isShowOperate">
|
||||||
<!-- <div class="select_item" @click="showBindEmailModal()">
|
<div class="select_item" @click="showBindEmailModal()">
|
||||||
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
|
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">{{$t('Header.bindEmail')}}</span>
|
||||||
</div> -->
|
</div>
|
||||||
<div class="select_item" @click="logout()">
|
<div class="select_item" @click="logout()">
|
||||||
<span class="icon iconfont icon-tuichu"></span
|
<span class="icon iconfont icon-tuichu"></span
|
||||||
><span class="select_item_des">log off</span>
|
><span class="select_item_des">{{$t('Header.logOff')}}</span>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<a-modal
|
<a-modal
|
||||||
@@ -78,17 +79,17 @@
|
|||||||
:centered="true"
|
:centered="true"
|
||||||
>
|
>
|
||||||
<template #closeIcon v-if="!isHaveBindEmail && bindEmailStep === 1">
|
<template #closeIcon v-if="!isHaveBindEmail && bindEmailStep === 1">
|
||||||
<div class="skip_content">skip</div>
|
<div class="skip_content">{{$t('Header.skip')}}</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="bind_email_content" v-if="isHaveBindEmail">
|
<div class="bind_email_content" v-if="isHaveBindEmail">
|
||||||
<div class="bind_email_tip">you have binded email</div>
|
<div class="bind_email_tip">{{$t('Header.emailContent')}}</div>
|
||||||
<div class="bind_email">{{ userInfo.email }}</div>
|
<div class="bind_email">{{ userInfo.email }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bind_email_content" v-else>
|
<div class="bind_email_content" v-else>
|
||||||
<!-- 绑定邮箱第一步 start -->
|
<!-- 绑定邮箱第一步 start -->
|
||||||
<div v-show="bindEmailStep === 1">
|
<div v-show="bindEmailStep === 1">
|
||||||
<div class="bind_email_form_content">
|
<div class="bind_email_form_content">
|
||||||
<div class="bind_email_form_title">Email</div>
|
<div class="bind_email_form_title">{{$t('Header.Email')}}</div>
|
||||||
<input
|
<input
|
||||||
class="bind_email_form_input"
|
class="bind_email_form_input"
|
||||||
placeholder="Enter a new email"
|
placeholder="Enter a new email"
|
||||||
@@ -100,7 +101,7 @@
|
|||||||
class="bind_email_submit_button"
|
class="bind_email_submit_button"
|
||||||
@click="emailNextStepFun()"
|
@click="emailNextStepFun()"
|
||||||
>
|
>
|
||||||
Next step
|
{{$t('Header.NextStep')}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 绑定邮箱第一步 end -->
|
<!-- 绑定邮箱第一步 end -->
|
||||||
@@ -110,17 +111,17 @@
|
|||||||
<div @click="emailLastStepFun()">
|
<div @click="emailLastStepFun()">
|
||||||
<span class="icon iconfont icon--shangyibu"></span
|
<span class="icon iconfont icon--shangyibu"></span
|
||||||
><span class="email_last_step_content"
|
><span class="email_last_step_content"
|
||||||
>Enter verification code</span
|
>{{$t('Header.verification')}}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
<div class="sent_email_content">
|
<div class="sent_email_content">
|
||||||
Sent to {{ email }}
|
{{$t('Header.SentTo')}} {{ email }}
|
||||||
</div>
|
</div>
|
||||||
<div class="tip_content">
|
<div class="tip_content">
|
||||||
<span v-show="time">{{ time }}s</span>
|
<span v-show="time">{{ time }}s</span>
|
||||||
<span v-show="!time" @click="emailNextStepFun()"
|
<span v-show="!time" @click="emailNextStepFun()"
|
||||||
>Resend</span
|
>{{$t('Header.Resend')}}Resend</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -143,11 +144,18 @@ import Habit from "@/component/Detail/habit.vue";
|
|||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { Modal, message } from "ant-design-vue";
|
import { Modal, message } from "ant-design-vue";
|
||||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VerificationCodeInput,
|
VerificationCodeInput,
|
||||||
Habit,
|
Habit,
|
||||||
},
|
},
|
||||||
|
setup(){
|
||||||
|
const {t} = useI18n()
|
||||||
|
return {
|
||||||
|
t
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isShowOperate: false,
|
isShowOperate: false,
|
||||||
@@ -210,7 +218,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
emailNextStepFun() {
|
emailNextStepFun() {
|
||||||
if (!isEmail(this.email)) {
|
if (!isEmail(this.email)) {
|
||||||
message.warning("The email format is incorrect");
|
message.warning(this.t('Header.jsContent1'));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let data = {
|
let data = {
|
||||||
@@ -225,7 +233,7 @@ export default defineComponent({
|
|||||||
(this.emailCode = ["", "", "", "", "", ""]),
|
(this.emailCode = ["", "", "", "", "", ""]),
|
||||||
this.createTimer();
|
this.createTimer();
|
||||||
hide();
|
hide();
|
||||||
message.success("Succeeded in binding the mailbox.");
|
message.success(this.t('Header.jsContent2'));
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((res) => {
|
.catch((res) => {
|
||||||
@@ -312,7 +320,7 @@ export default defineComponent({
|
|||||||
this.timer = setTimeout(() => {
|
this.timer = setTimeout(() => {
|
||||||
this.modalWarning = Modal.warning({
|
this.modalWarning = Modal.warning({
|
||||||
title: () =>
|
title: () =>
|
||||||
`You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
|
this.t('Header.jsContent3',{numTime:_this.numTime}),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: "Ok",
|
okText: "Ok",
|
||||||
onOk() {
|
onOk() {
|
||||||
|
|||||||
@@ -2,10 +2,10 @@
|
|||||||
<div class="collection_modal_item">
|
<div class="collection_modal_item">
|
||||||
<div class="switch_type_list">
|
<div class="switch_type_list">
|
||||||
<div class="switch_type_item select_swtich">
|
<div class="switch_type_item select_swtich">
|
||||||
<span>Upload</span>
|
<span>{{ $t('MarketingSketchUpload.Upload') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div @click="openLibrary()" class="switch_type_item">
|
<div @click="openLibrary()" class="switch_type_item">
|
||||||
<span>My Library</span>
|
<span>{{ $t('MarketingSketchUpload.MyLibrary') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="upload_max_tip">
|
<div class="upload_max_tip">
|
||||||
<span class="icon iconfont icon-zhuyi"></span>
|
<span class="icon iconfont icon-zhuyi"></span>
|
||||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
<span>{{ $t('MarketingSketchUpload.maximumLength') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -61,12 +61,15 @@ import {getUploadUrl} from '@/tool/util'
|
|||||||
import {useStore} from 'vuex'
|
import {useStore} from 'vuex'
|
||||||
import { message,Upload} from 'ant-design-vue';
|
import { message,Upload} from 'ant-design-vue';
|
||||||
import Material from '@/component/HomePage/Material.vue'
|
import Material from '@/component/HomePage/Material.vue'
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{Material},
|
components:{Material},
|
||||||
setup(){
|
setup(){
|
||||||
let fileList:any = ref([])
|
let fileList:any = ref([])
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
fileList
|
fileList,
|
||||||
|
t,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
@@ -115,18 +118,18 @@ export default defineComponent({
|
|||||||
if(index > -1){
|
if(index > -1){
|
||||||
this.fileList.splice(index, 1)
|
this.fileList.splice(index, 1)
|
||||||
}
|
}
|
||||||
message.error(file.name + 'upload failed')
|
message.error(file.name + this.t('MarketingSketchUpload.jsContent1'))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeUpload(file:any){
|
beforeUpload(file:any){
|
||||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning('You can only upload Image file!');
|
message.warning(this.t('MarketingSketchUpload.jsContent2'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning('Image must smaller than 2MB!');
|
message.warning(this.t('MarketingSketchUpload.jsContent3'));
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
@@ -149,7 +152,7 @@ export default defineComponent({
|
|||||||
status:'done',
|
status:'done',
|
||||||
}
|
}
|
||||||
if(this.fileList.length == 15){
|
if(this.fileList.length == 15){
|
||||||
message.warning('Maximum number of allowable file uploads has been exceeded')
|
message.warning(this.t('MarketingSketchUpload.jsContent5'))
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
this.fileList.push(data)
|
this.fileList.push(data)
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<div class="my_material_header">
|
<div class="my_material_header">
|
||||||
<div class="my_material_header_right">
|
<div class="my_material_header_right">
|
||||||
<div class="content_search_block">
|
<div class="content_search_block">
|
||||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -62,7 +62,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
|
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
|
||||||
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="total > imgList.length" class="material_content_list_loding" v-observe>
|
<div v-show="total > imgList.length" class="material_content_list_loding" v-observe>
|
||||||
|
|||||||
@@ -7,21 +7,21 @@
|
|||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Upload</span>
|
<span>{{ $t('MoodboardUpload.Upload') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click.stop="open(2)"
|
@click.stop="open(2)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Library</span>
|
<span>{{ $t('MoodboardUpload.Library') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click.stop="open(3)"
|
@click.stop="open(3)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Generate</span>
|
<span>{{ $t('MoodboardUpload.Generate') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 1" class="moodboard_body">
|
<div v-show="openClick == 1" class="moodboard_body">
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
class="delete_file_block"
|
class="delete_file_block"
|
||||||
@click="deleteFile(file)"
|
@click="deleteFile(file)"
|
||||||
>
|
>
|
||||||
Delete
|
{{ $t('MoodboardUpload.Delete') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -106,8 +106,10 @@
|
|||||||
<div v-show="moodboarList.length" class="modal_right">
|
<div v-show="moodboarList.length" class="modal_right">
|
||||||
<div class="modal_layout">
|
<div class="modal_layout">
|
||||||
<div class="modal_text">
|
<div class="modal_text">
|
||||||
<div>Thumbnail preview of selected moodboard</div>
|
<div>
|
||||||
<div class="modal_btn started_btn" @click="layout()">layout</div>
|
{{ $t('MoodboardUpload.Thumbnail') }}
|
||||||
|
</div>
|
||||||
|
<div class="modal_btn started_btn" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
|
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
|
||||||
@@ -155,6 +157,7 @@ import layout from "@/component/HomePage/layout.vue";
|
|||||||
import domTurnImg from '@/tool/domTurnImg'
|
import domTurnImg from '@/tool/domTurnImg'
|
||||||
import GO from "@/tool/GO";
|
import GO from "@/tool/GO";
|
||||||
import moodb from "@/tool/moodb";
|
import moodb from "@/tool/moodb";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { Material, MoodTemplate, Generate,layout },
|
components: { Material, MoodTemplate, Generate,layout },
|
||||||
setup() {
|
setup() {
|
||||||
@@ -174,6 +177,7 @@ export default defineComponent({
|
|||||||
return store.state.UploadFilesModule.disposeMoodboard
|
return store.state.UploadFilesModule.disposeMoodboard
|
||||||
})
|
})
|
||||||
let uploading:any = ref([])
|
let uploading:any = ref([])
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
showFileList,
|
showFileList,
|
||||||
@@ -187,7 +191,8 @@ export default defineComponent({
|
|||||||
layoutOpen,
|
layoutOpen,
|
||||||
loadingShow,
|
loadingShow,
|
||||||
modalImg,
|
modalImg,
|
||||||
uploading
|
uploading,
|
||||||
|
t,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -292,7 +297,7 @@ export default defineComponent({
|
|||||||
);
|
);
|
||||||
let arr = this.store.state.UploadFilesModule.moodboard
|
let arr = this.store.state.UploadFilesModule.moodboard
|
||||||
if(arr.length >= 8){
|
if(arr.length >= 8){
|
||||||
message.warning('You can select up to 8 images')
|
message.warning(this.t('MoodboardUpload.jsContent1'))
|
||||||
}else{
|
}else{
|
||||||
this.store.commit("setMoodboardFile", fileList);
|
this.store.commit("setMoodboardFile", fileList);
|
||||||
}
|
}
|
||||||
@@ -307,7 +312,7 @@ export default defineComponent({
|
|||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
this.fileList.splice(index, 1);
|
this.fileList.splice(index, 1);
|
||||||
}
|
}
|
||||||
message.error(file.name + "upload failed");
|
message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -318,11 +323,11 @@ export default defineComponent({
|
|||||||
file.type === "image/jpg" ||
|
file.type === "image/jpg" ||
|
||||||
file.type === "image/bmp";
|
file.type === "image/bmp";
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning("You can only upload Image file!");
|
message.warning(this.t('MoodboardUpload.jsContent3'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning("Image must smaller than 2MB!");
|
message.warning(this.t('MoodboardUpload.jsContent4'));
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
@@ -390,7 +395,7 @@ export default defineComponent({
|
|||||||
// layout.init('moodboard')
|
// layout.init('moodboard')
|
||||||
layout.init()
|
layout.init()
|
||||||
}else{
|
}else{
|
||||||
message.warning('Please click Layout to sort randomly')
|
message.warning(this.t('MoodboardUpload.jsContent5'))
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -406,7 +411,15 @@ export default defineComponent({
|
|||||||
}else{
|
}else{
|
||||||
this.flex_direction = false
|
this.flex_direction = false
|
||||||
}
|
}
|
||||||
|
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
|
||||||
|
this.layout()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(this.moodb_[arr.length-1].length == 2){
|
||||||
|
this.moodb_className = this.moodb_[arr.length-1][0]
|
||||||
|
}else{
|
||||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||||
|
}
|
||||||
this.layoutOpen = true
|
this.layoutOpen = true
|
||||||
//提交模板
|
//提交模板
|
||||||
// this.loadingShow = true
|
// this.loadingShow = true
|
||||||
|
|||||||
@@ -10,21 +10,21 @@
|
|||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Upload</span>
|
<span>{{ $t('PrintboardUpload.Upload') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click.stop="open(2)"
|
@click.stop="open(2)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Library</span>
|
<span>{{ $t('PrintboardUpload.Library') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click.stop="open(3)"
|
@click.stop="open(3)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Generate</span>
|
<span>{{ $t('PrintboardUpload.Generate') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pin_block" v-show="file?.status === 'done'">
|
<div class="pin_block" v-show="file?.status === 'done'">
|
||||||
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
|
<a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -86,7 +86,7 @@
|
|||||||
<div class="modal_right">
|
<div class="modal_right">
|
||||||
<div class="modal_layout">
|
<div class="modal_layout">
|
||||||
<div class="modal_text">
|
<div class="modal_text">
|
||||||
<div>Thumbnail preview of selected moodboard</div>
|
<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
|
||||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
@@ -100,9 +100,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 3" class="modal_accomplish">
|
<div v-show="openClick == 3" class="modal_accomplish">
|
||||||
<div class="input_box" :class="{active:inputShow}">
|
<div class="input_box" :class="{active:inputShow}">
|
||||||
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
|
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
||||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
|
||||||
<span>The entered content exceeds the maximum length.</span>
|
<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
|
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
|
||||||
@@ -114,7 +114,7 @@
|
|||||||
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
|
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="pin_block">
|
<div class="pin_block">
|
||||||
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -138,6 +138,7 @@ import Cropper from '@/component/HomePage/Cropper.vue'
|
|||||||
import Material from '@/component/HomePage/Material.vue'
|
import Material from '@/component/HomePage/Material.vue'
|
||||||
import Generate from "@/component/HomePage/Generate.vue";
|
import Generate from "@/component/HomePage/Generate.vue";
|
||||||
import GO from "@/tool/GO";
|
import GO from "@/tool/GO";
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
@@ -156,6 +157,7 @@ export default defineComponent({
|
|||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
let inputShow = ref(false)
|
let inputShow = ref(false)
|
||||||
let inputTime = ref()
|
let inputTime = ref()
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
printImgList,
|
printImgList,
|
||||||
@@ -166,6 +168,7 @@ export default defineComponent({
|
|||||||
loadingShow,
|
loadingShow,
|
||||||
inputShow,
|
inputShow,
|
||||||
inputTime,
|
inputTime,
|
||||||
|
t,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
@@ -256,11 +259,11 @@ export default defineComponent({
|
|||||||
beforeUpload(file:any,fileList:any){
|
beforeUpload(file:any,fileList:any){
|
||||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning('You can only upload Image file!');
|
message.warning(this.t('PrintboardUpload.jsContent1'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning('Image must smaller than 2MB!');
|
message.warning(this.t('PrintboardUpload.jsContent2'));
|
||||||
}
|
}
|
||||||
if(isJpgOrPng && isLt2M){
|
if(isJpgOrPng && isLt2M){
|
||||||
this.currentFileNum = fileList.length
|
this.currentFileNum = fileList.length
|
||||||
@@ -316,102 +319,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
|
|
||||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
|
||||||
while(index === num){
|
|
||||||
index = Math.floor(Math.random() * (max - min)) + min;
|
|
||||||
}
|
|
||||||
return index
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
generatePrint(){
|
|
||||||
let data:any = {}
|
|
||||||
//随机获取图片id
|
|
||||||
if(!this.moodBoards.length){ //mood没有图片
|
|
||||||
let index1 = -1
|
|
||||||
let index2 = -2
|
|
||||||
if(!this.getPinLength){ //没pin住
|
|
||||||
index1 = this.randomRange(0, this.fileList.length, -1)
|
|
||||||
index2 = this.randomRange(0, this.fileList.length, index1)
|
|
||||||
|
|
||||||
}else if(this.getPinLength === 1){ //pin住1个
|
|
||||||
this.fileList.forEach((element:any,index:number) => {
|
|
||||||
if(element.pin){
|
|
||||||
index1 = index
|
|
||||||
}
|
|
||||||
});
|
|
||||||
index2 = this.randomRange(0, this.fileList.length, index1)
|
|
||||||
}else{ //pin住多个
|
|
||||||
let selectIndexList:any = []
|
|
||||||
this.fileList.forEach((element:any,index:number) => {
|
|
||||||
if(element.pin){
|
|
||||||
selectIndexList.push(index)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
index1 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
|
|
||||||
index2 = this.randomRange(0, this.fileList.length, selectIndexList[index1]) //除了选中的外再来一个
|
|
||||||
|
|
||||||
}
|
|
||||||
data = {
|
|
||||||
select1Id:this.fileList[index1].id,
|
|
||||||
select2Id:this.fileList[index2].id
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
let index1 = this.randomRange(0, this.moodBoards.length, -1)
|
|
||||||
let index2 = -2
|
|
||||||
if(!this.getPinLength){ //没pin住
|
|
||||||
index2 = this.randomRange(0, this.fileList.length, -1)
|
|
||||||
}else if(this.getPinLength === 1){ //pin住1个
|
|
||||||
this.fileList.forEach((element:any,index:number) => {
|
|
||||||
if(element.pin){
|
|
||||||
index2 = index
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}else{ //pin住多个
|
|
||||||
let selectIndexList:any = []
|
|
||||||
this.fileList.forEach((element:any,index:number) => {
|
|
||||||
if(element.pin){
|
|
||||||
selectIndexList.push(index)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
index2 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
|
|
||||||
}
|
|
||||||
data = {
|
|
||||||
select1Id:this.moodBoards[index1].resData.id,
|
|
||||||
select2Id:this.fileList[index2].id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
||||||
this.generateloading = true
|
|
||||||
Https.axiosPost(Https.httpUrls.elementGeneratePrint, data).then((rv) =>{
|
|
||||||
if(rv){
|
|
||||||
let data = {
|
|
||||||
imgUrl:rv.url,
|
|
||||||
resData:rv
|
|
||||||
}
|
|
||||||
this.printImgList.push(data)
|
|
||||||
this.store.commit('setGeneratePrintFile',this.printImgList)
|
|
||||||
this.generateloading = false
|
|
||||||
}
|
|
||||||
}).catch(res=>{
|
|
||||||
this.generateloading = false
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
savePrint(){
|
|
||||||
let printId = this.printImgList.map((v:any) => v.resData.id)
|
|
||||||
let data = {
|
|
||||||
printId:printId,
|
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.elementSavePrint, data).then((rv) =>{
|
|
||||||
if(rv){
|
|
||||||
message.success('Save successfully')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
customRequest(data:any){
|
customRequest(data:any){
|
||||||
@@ -564,7 +471,7 @@ export default defineComponent({
|
|||||||
status:'done',
|
status:'done',
|
||||||
}
|
}
|
||||||
if(this.fileList.length == 15){
|
if(this.fileList.length == 15){
|
||||||
message.warning('Maximum number of allowable file uploads has been exceeded')
|
message.warning(this.t('PrintboardUpload.jsContent3'))
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
this.fileList.push(data)
|
this.fileList.push(data)
|
||||||
@@ -604,7 +511,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
}else{
|
}else{
|
||||||
message.warning(
|
message.warning(
|
||||||
"Please select a picture"
|
this.t('PrintboardUpload.jsContent4')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -616,14 +523,14 @@ export default defineComponent({
|
|||||||
let arr = this.captionGeneration.split(/\s+/).length
|
let arr = this.captionGeneration.split(/\s+/).length
|
||||||
if(arr > 75){
|
if(arr > 75){
|
||||||
message.warning(
|
message.warning(
|
||||||
"The entered content exceeds the maximum length."
|
this.t('PrintboardUpload.jsContent5')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
|
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
message.warning(
|
message.warning(
|
||||||
"Please enter content"
|
this.t('PrintboardUpload.jsContent6')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
<div class="robot_bottom">
|
<div class="robot_bottom">
|
||||||
<div class="robot_input" v-fade="robotInput,'flex'">
|
<div class="robot_input" v-fade="robotInput,'flex'">
|
||||||
<input
|
<input
|
||||||
placeholder="write a message~"
|
:placeholder="$t('RobotAssist.inputContent1')"
|
||||||
v-model="chatCentent"
|
v-model="chatCentent"
|
||||||
@keydown.enter="roborSend()"
|
@keydown.enter="roborSend()"
|
||||||
@input="robotmax"
|
@input="robotmax"
|
||||||
@@ -49,6 +49,7 @@ import { getCookie } from "@/tool/cookie";
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
import { message } from "ant-design-vue";
|
import { message } from "ant-design-vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
DownOutlined,
|
DownOutlined,
|
||||||
@@ -67,6 +68,7 @@ export default defineComponent({
|
|||||||
])
|
])
|
||||||
const userInfo:any = {}
|
const userInfo:any = {}
|
||||||
let bloodBars:any = ref(0)
|
let bloodBars:any = ref(0)
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
robotTop,
|
robotTop,
|
||||||
robotInput,
|
robotInput,
|
||||||
@@ -78,6 +80,7 @@ export default defineComponent({
|
|||||||
timeInput,
|
timeInput,
|
||||||
userInfo,
|
userInfo,
|
||||||
bloodBars,
|
bloodBars,
|
||||||
|
t,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -154,7 +157,7 @@ export default defineComponent({
|
|||||||
roborSend (){
|
roborSend (){
|
||||||
this.clearTimer()
|
this.clearTimer()
|
||||||
if(!this.chatCentent){
|
if(!this.chatCentent){
|
||||||
message.warning("Please enter content");
|
message.warning(this.t('RobotAssist.jsContent1'));
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.record.push({
|
this.record.push({
|
||||||
|
|||||||
@@ -7,21 +7,21 @@
|
|||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Upload</span>
|
<span>{{ $t('SketchboardUpload.Upload') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click.stop="open(2)"
|
@click.stop="open(2)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Library</span>
|
<span>{{ $t('SketchboardUpload.Library') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click.stop="open(3)"
|
@click.stop="open(3)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Generate</span>
|
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 1" class="sketchboard_body">
|
<div v-show="openClick == 1" class="sketchboard_body">
|
||||||
@@ -105,7 +105,7 @@
|
|||||||
v-show="file?.status === 'done'"
|
v-show="file?.status === 'done'"
|
||||||
>
|
>
|
||||||
<a-checkbox v-model:checked="file.pin"
|
<a-checkbox v-model:checked="file.pin"
|
||||||
>PIN</a-checkbox
|
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -158,7 +158,7 @@
|
|||||||
<div class="modal_right">
|
<div class="modal_right">
|
||||||
<div class="modal_layout">
|
<div class="modal_layout">
|
||||||
<div class="modal_text">
|
<div class="modal_text">
|
||||||
<div>Thumbnail preview of selected moodboard</div>
|
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
|
||||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
@@ -172,9 +172,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 3" class="modal_accomplish">
|
<div v-show="openClick == 3" class="modal_accomplish">
|
||||||
<div class="input_box" :class="{active:inputShow}">
|
<div class="input_box" :class="{active:inputShow}">
|
||||||
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
|
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('SketchboardUpload.inputContent1')" v-model="captionGeneration">
|
||||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
||||||
<span>The entered content exceeds the maximum length.</span>
|
<span>{{ $t('SketchboardUpload.maximumLength') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
|
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
|
||||||
@@ -232,7 +232,7 @@
|
|||||||
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
|
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="pin_block">
|
<div class="pin_block">
|
||||||
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
|
<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -257,6 +257,7 @@ import { message, Upload } from "ant-design-vue";
|
|||||||
import Material from "@/component/HomePage/Material.vue";
|
import Material from "@/component/HomePage/Material.vue";
|
||||||
import Generate from "@/component/HomePage/Generate.vue";
|
import Generate from "@/component/HomePage/Generate.vue";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { Material, Generate },
|
components: { Material, Generate },
|
||||||
setup() {
|
setup() {
|
||||||
@@ -273,6 +274,7 @@ export default defineComponent({
|
|||||||
let inputShow = ref(false)
|
let inputShow = ref(false)
|
||||||
let inputTime = ref()
|
let inputTime = ref()
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
openClick,
|
openClick,
|
||||||
@@ -283,6 +285,7 @@ export default defineComponent({
|
|||||||
workspace,
|
workspace,
|
||||||
inputShow,
|
inputShow,
|
||||||
inputTime,
|
inputTime,
|
||||||
|
t,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -399,7 +402,8 @@ export default defineComponent({
|
|||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
this.fileList.splice(index, 1);
|
this.fileList.splice(index, 1);
|
||||||
}
|
}
|
||||||
message.error(file.name + "upload failed");
|
message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -410,11 +414,11 @@ export default defineComponent({
|
|||||||
file.type === "image/jpg" ||
|
file.type === "image/jpg" ||
|
||||||
file.type === "image/bmp";
|
file.type === "image/bmp";
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning("You can only upload Image file!");
|
message.warning(this.t('SketchboardUpload.jsContent2'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning("Image must smaller than 2MB!");
|
message.warning(this.t('SketchboardUpload.jsContent3'));
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
@@ -550,7 +554,7 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
if (this.fileList.length == 15) {
|
if (this.fileList.length == 15) {
|
||||||
message.warning(
|
message.warning(
|
||||||
"Maximum number of allowable file uploads has been exceeded"
|
this.t('SketchboardUpload.jsContent4')
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -577,7 +581,7 @@ export default defineComponent({
|
|||||||
if(generage.collectionElementid){
|
if(generage.collectionElementid){
|
||||||
}else{
|
}else{
|
||||||
message.warning(
|
message.warning(
|
||||||
"Please select a picture"
|
this.t('SketchboardUpload.jsContent5')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -589,13 +593,14 @@ export default defineComponent({
|
|||||||
let arr = this.captionGeneration.split(/\s+/).length
|
let arr = this.captionGeneration.split(/\s+/).length
|
||||||
if(arr > 75){
|
if(arr > 75){
|
||||||
message.warning(
|
message.warning(
|
||||||
"The entered content exceeds the maximum length."
|
this.t('SketchboardUpload.jsContent6')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
message.warning(
|
message.warning(
|
||||||
"Please enter content"
|
this.t('SketchboardUpload.jsContent7')
|
||||||
|
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||||
<img :src="file?.imgUrl" class="upload_img">
|
<img :src="file?.imgUrl" class="upload_img">
|
||||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
<div class="delete_file_block" @click="deleteFile(index)">{{ $t('Upload.Delete') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
|
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="upload_max_tip">
|
<div class="upload_max_tip">
|
||||||
<span class="icon iconfont icon-zhuyi"></span>
|
<span class="icon iconfont icon-zhuyi"></span>
|
||||||
<span>Maximum 10 images can be uploaded, Maximum 2M per image</span>
|
<span>{{ $t('Upload.Maximum2M') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -48,14 +48,17 @@ import {getUploadUrl} from '@/tool/util'
|
|||||||
import {getCookie} from '@/tool/cookie'
|
import {getCookie} from '@/tool/cookie'
|
||||||
import { message, Upload } from 'ant-design-vue';
|
import { message, Upload } from 'ant-design-vue';
|
||||||
import {useStore} from 'vuex'
|
import {useStore} from 'vuex'
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: ["msg"],
|
props: ["msg"],
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
let fileList:any = ref([])
|
let fileList:any = ref([])
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return{
|
return{
|
||||||
fileList
|
fileList,
|
||||||
|
t
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
@@ -86,11 +89,11 @@ export default defineComponent({
|
|||||||
beforeUpload(file:any){
|
beforeUpload(file:any){
|
||||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning('You can only upload Image file!');
|
message.warning((this.t('Upload.jsContent2'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning('Image must smaller than 2MB!');
|
message.warning(this.t('Upload.jsContent2'));
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
@@ -112,7 +115,7 @@ export default defineComponent({
|
|||||||
if(index > -1){
|
if(index > -1){
|
||||||
this.fileList.splice(index, 1)
|
this.fileList.splice(index, 1)
|
||||||
}
|
}
|
||||||
message.error(file.name + 'upload failed')
|
message.error(file.name + this.t('Upload.jsContent3'))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deleteFile(index:any){
|
deleteFile(index:any){
|
||||||
|
|||||||
@@ -11,12 +11,12 @@
|
|||||||
>
|
>
|
||||||
<div class="collection_title">
|
<div class="collection_title">
|
||||||
<div class="collection_title_text">
|
<div class="collection_title_text">
|
||||||
<div v-show="collectionStep === 1">Moodboard</div>
|
<div v-show="collectionStep === 1">{{ $t('collectionModal.Moodboard') }}</div>
|
||||||
<div v-show="collectionStep === 2">Printboard</div>
|
<div v-show="collectionStep === 2">{{ $t('collectionModal.Printboard') }}</div>
|
||||||
<div v-show="collectionStep === 3">Colorboard</div>
|
<div v-show="collectionStep === 3">{{ $t('collectionModal.Colorboard') }}</div>
|
||||||
<div v-show="collectionStep === 4">Sketchboard</div>
|
<div v-show="collectionStep === 4">{{ $t('collectionModal.Sketchboard') }}</div>
|
||||||
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
|
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
|
||||||
<div class="collection_title_text_intro">select moodboard for your collection</div>
|
<div class="collection_title_text_intro">{{ $t('collectionModal.collection') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="collection_progress">
|
<div class="collection_progress">
|
||||||
<a-progress :strokeWidth= 13 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
|
<a-progress :strokeWidth= 13 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
|
||||||
@@ -63,6 +63,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import {useStore} from 'vuex'
|
import {useStore} from 'vuex'
|
||||||
import GO from "@/tool/GO";
|
import GO from "@/tool/GO";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
Generate,
|
Generate,
|
||||||
@@ -72,6 +73,12 @@ export default defineComponent({
|
|||||||
SketchboardUpload,
|
SketchboardUpload,
|
||||||
MarketingSketchUpload
|
MarketingSketchUpload
|
||||||
},
|
},
|
||||||
|
state(){
|
||||||
|
let {t} = useI18n()
|
||||||
|
return {
|
||||||
|
t,
|
||||||
|
}
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
showCollectionModal:false,
|
showCollectionModal:false,
|
||||||
@@ -86,7 +93,7 @@ export default defineComponent({
|
|||||||
let moodboard = this.store.state.UploadFilesModule.moodboard
|
let moodboard = this.store.state.UploadFilesModule.moodboard
|
||||||
if(moodboard.length > 1){
|
if(moodboard.length > 1){
|
||||||
if (!disposeMoodboard || disposeMoodboard.length == 0) {
|
if (!disposeMoodboard || disposeMoodboard.length == 0) {
|
||||||
message.warning('You must select the image and then use the layout.')
|
message.warning(this.$t('collectionModal.jsContent1'))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -119,7 +126,7 @@ export default defineComponent({
|
|||||||
cancelDsign(){
|
cancelDsign(){
|
||||||
let _this = this
|
let _this = this
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: 'The uploaded files will not be saved, being sure to continue? ',
|
title: this.$t('collectionModal.jsContent2'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
@@ -139,7 +146,7 @@ export default defineComponent({
|
|||||||
let colorBoards = this.store.state.UploadFilesModule.colorBoards
|
let colorBoards = this.store.state.UploadFilesModule.colorBoards
|
||||||
|
|
||||||
if(!colorBoards || colorBoards?.length < 1){
|
if(!colorBoards || colorBoards?.length < 1){
|
||||||
message.warning('You must choose one or more colors for further process.')
|
message.warning(this.$t('collectionModal.jsContent3'))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.store.commit('clearAllId')
|
this.store.commit('clearAllId')
|
||||||
@@ -163,6 +170,7 @@ export default defineComponent({
|
|||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: rgba(0,0,0,.65);
|
color: rgba(0,0,0,.65);
|
||||||
|
z-index: 2;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.collection_progress{
|
.collection_progress{
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<div class="layout_content">
|
<div class="layout_content">
|
||||||
<div class="collection_title">
|
<div class="collection_title">
|
||||||
<div class="collection_title_text">
|
<div class="collection_title_text">
|
||||||
<div class="layout_title">MoodBoard Design</div>
|
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="collection_closeIcon" @click.stop="cancelDsign()">
|
<div class="collection_closeIcon" @click.stop="cancelDsign()">
|
||||||
@@ -74,7 +74,7 @@
|
|||||||
class="button_second submit_button"
|
class="button_second submit_button"
|
||||||
@click="submitTemplate()"
|
@click="submitTemplate()"
|
||||||
>
|
>
|
||||||
Submit
|
{{ $t('layout.Submit') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
|
|||||||
@@ -12,23 +12,23 @@
|
|||||||
</template>
|
</template>
|
||||||
<div class="models_placement_body" >
|
<div class="models_placement_body" >
|
||||||
<div class="palcement_modal_header">
|
<div class="palcement_modal_header">
|
||||||
<div class="models_placement_title">Registration</div>
|
<div class="models_placement_title">{{ $t('ModelPlacement.Registration') }}</div>
|
||||||
<div class="placement_operate_list">
|
<div class="placement_operate_list">
|
||||||
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
|
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
|
||||||
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
||||||
<div class="operate_item_des">Submit</div>
|
<div class="operate_item_des">{{ $t('ModelPlacement.Submit') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
|
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
|
||||||
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
||||||
<div class="operate_item_des">Preview</div>
|
<div class="operate_item_des">{{ $t('ModelPlacement.Preview') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
||||||
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
||||||
<div class="operate_item_des">Back</div>
|
<div class="operate_item_des">{{ $t('ModelPlacement.Back') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="operate_item" @click="restoreLocationList">
|
<div class="operate_item" @click="restoreLocationList">
|
||||||
<div class="icon iconfont icon-huifu operate_icon"></div>
|
<div class="icon iconfont icon-huifu operate_icon"></div>
|
||||||
<div class="operate_item_des">Restore</div>
|
<div class="operate_item_des">{{ $t('ModelPlacement.Restore') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -36,11 +36,11 @@
|
|||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
|
<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
|
||||||
System
|
{{ $t('ModelPlacement.System') }}
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<input type="checkbox" model="false" @click="()=>{modelType = 'Library'}">
|
<input type="checkbox" model="false" @click="()=>{modelType = 'Library'}">
|
||||||
Library
|
{{ $t('ModelPlacement.Library') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -67,18 +67,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="placement_point_item placement_point_item_btn">
|
<div class="placement_point_item placement_point_item_btn">
|
||||||
<span class="started_btn" @click="setPoint">Point</span>
|
<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="placement_content_operate_list">
|
<div class="placement_content_operate_list">
|
||||||
<div class="placement_content_operate_item" @click="changeRemoveStatus">
|
<div class="placement_content_operate_item" @click="changeRemoveStatus">
|
||||||
<div class="placement_remove_point_block"></div>
|
<div class="placement_remove_point_block"></div>
|
||||||
<div class="placement_content_operate_des">Remove Point</div>
|
<div class="placement_content_operate_des">{{ $t('ModelPlacement.RemovePoint') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="placement_tip_content">Please change the pure white inside the mannequin for another color to enhance your experience</div>
|
<div class="placement_tip_content">{{ $t('ModelPlacement.mannequinHint') }}</div>
|
||||||
|
|
||||||
<div class="img_preview_block" >
|
<div class="img_preview_block" >
|
||||||
<div class="perview_mark_loading" v-show="isShowMark">
|
<div class="perview_mark_loading" v-show="isShowMark">
|
||||||
@@ -139,6 +139,7 @@ import { VueCropper } from "vue-cropper";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
VueCropper,
|
VueCropper,
|
||||||
@@ -158,6 +159,8 @@ export default defineComponent({
|
|||||||
let userInfo:any = ref()
|
let userInfo:any = ref()
|
||||||
|
|
||||||
let cropperTime:any = ref()
|
let cropperTime:any = ref()
|
||||||
|
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
oldLocationList,
|
oldLocationList,
|
||||||
@@ -172,7 +175,9 @@ export default defineComponent({
|
|||||||
manager,
|
manager,
|
||||||
userInfo,
|
userInfo,
|
||||||
|
|
||||||
cropperTime
|
cropperTime,
|
||||||
|
|
||||||
|
t
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
@@ -343,15 +348,15 @@ export default defineComponent({
|
|||||||
this.locationList=[]
|
this.locationList=[]
|
||||||
this.pointList = [
|
this.pointList = [
|
||||||
{
|
{
|
||||||
title:'SHOULDER',
|
title:this.t('ModelPlacement.SHOULDER'),
|
||||||
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
|
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:'WAISTBAND',
|
title:this.t('ModelPlacement.WAISTBAND'),
|
||||||
pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
|
pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:'HAND',
|
title:this.t('ModelPlacement.HAND'),
|
||||||
pointList:[{type:'handLeft',color:'#d88e8e',show:true,field:'hand'},{type:'handRight',color:'#d88e8e',show:true,field:'hand'}]
|
pointList:[{type:'handLeft',color:'#d88e8e',show:true,field:'hand'},{type:'handRight',color:'#d88e8e',show:true,field:'hand'}]
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
@@ -523,7 +528,7 @@ export default defineComponent({
|
|||||||
let _this = this
|
let _this = this
|
||||||
if(!this.isSubmit){
|
if(!this.isSubmit){
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
|
title: this.t('ModelPlacement.jsContent1'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Ok',
|
okText: 'Ok',
|
||||||
cancelText: 'Cancel',
|
cancelText: 'Cancel',
|
||||||
@@ -651,7 +656,7 @@ export default defineComponent({
|
|||||||
let _this = this
|
let _this = this
|
||||||
return new Promise((resolve,reject)=>{
|
return new Promise((resolve,reject)=>{
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: 'This picture has been uploaded whether to continue uploading？ ',
|
title: this.t('ModelPlacement.jsContent2'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
|
|||||||
@@ -12,23 +12,23 @@
|
|||||||
</template>
|
</template>
|
||||||
<div class="models_placement_body" >
|
<div class="models_placement_body" >
|
||||||
<div class="palcement_modal_header">
|
<div class="palcement_modal_header">
|
||||||
<div class="models_placement_title">Registration</div>
|
<div class="models_placement_title">{{ $t('ModelPlacementMobile.Registration') }}</div>
|
||||||
<div class="placement_operate_list">
|
<div class="placement_operate_list">
|
||||||
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
|
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
|
||||||
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
||||||
<div class="operate_item_des">Submit</div>
|
<div class="operate_item_des">{{ $t('ModelPlacementMobile.Submit') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
|
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
|
||||||
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
||||||
<div class="operate_item_des">Preview</div>
|
<div class="operate_item_des">{{ $t('ModelPlacementMobile.Preview') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
||||||
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
||||||
<div class="operate_item_des">Back</div>
|
<div class="operate_item_des">{{ $t('ModelPlacementMobile.Back') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="operate_item" @click="restoreLocationList">
|
<div class="operate_item" @click="restoreLocationList">
|
||||||
<div class="icon iconfont icon-huifu operate_icon"></div>
|
<div class="icon iconfont icon-huifu operate_icon"></div>
|
||||||
<div class="operate_item_des">Restore</div>
|
<div class="operate_item_des">{{ $t('ModelPlacementMobile.Restore') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
295
src/lang/en.ts
295
src/lang/en.ts
@@ -0,0 +1,295 @@
|
|||||||
|
export default {
|
||||||
|
Header:{
|
||||||
|
hello:'hello',
|
||||||
|
HOME:'HOME',
|
||||||
|
LIBRARY:'LIBRARY',
|
||||||
|
HISTORY:'HISTORY',
|
||||||
|
bindEmail:'bind email',
|
||||||
|
logOff:'log off',
|
||||||
|
skip:'skip',
|
||||||
|
emailContent:'you have binded email',
|
||||||
|
Email:'Email',
|
||||||
|
NextStep:'Next step',
|
||||||
|
verification:'Enter verification code',
|
||||||
|
SentTo:'Sent to',
|
||||||
|
Resend:'Resend',
|
||||||
|
jsContent1:'The email format is incorrect',
|
||||||
|
jsContent2:'Succeeded in binding the mailbox.',
|
||||||
|
jsContent3:`You have not performed any operation for a long time. You must be active;otherwise, you will log out in {numTime} S`,
|
||||||
|
},
|
||||||
|
Habit:{
|
||||||
|
Workspace:'Workspace',
|
||||||
|
WorkspaceSetting:'Workspace Setting',
|
||||||
|
settingWorkspace:'adjust your workspace setting',
|
||||||
|
Overall:'Overall',
|
||||||
|
Single:'Single',
|
||||||
|
System:'System',
|
||||||
|
Designer:'Designer',
|
||||||
|
Mannequin:'Mannequin',
|
||||||
|
Current:'Current',
|
||||||
|
User:'User',
|
||||||
|
jsContent1:'Whether to delete the workspace?',
|
||||||
|
jsContent2:'Please enter a workbench name',
|
||||||
|
},
|
||||||
|
RobotAssist:{
|
||||||
|
inputContent1:"write a message~",
|
||||||
|
jsContent1:"Please enter content",
|
||||||
|
},
|
||||||
|
HomeView:{
|
||||||
|
GetStarted:'Get Started',
|
||||||
|
Start:'Start',
|
||||||
|
Edit:'Edit',
|
||||||
|
Design:'Design',
|
||||||
|
Redesign:'Redesign',
|
||||||
|
GeneratedDesign:'Generated Design',
|
||||||
|
SelectedDesign:'Selected Design',
|
||||||
|
Export:'Export',
|
||||||
|
jsContent1:'You must choose one or more colors for further process.',
|
||||||
|
jsContent2:'You must choose one or more colors for further process.',
|
||||||
|
jsContent3:'Failed to export the file',
|
||||||
|
},
|
||||||
|
LibraryPage:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Generate:'Generate',
|
||||||
|
Delete:'Delete',
|
||||||
|
Rename:'Rename',
|
||||||
|
inputContent1:'Search by your style code',
|
||||||
|
all:'all',
|
||||||
|
ImageOnly:'Image Only',
|
||||||
|
TextOnly:'Text Only',
|
||||||
|
TextImage:'Text-Image',
|
||||||
|
inputContent2:'Prompt input',
|
||||||
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
Model1:'Model1',
|
||||||
|
Model2:'Model2',
|
||||||
|
inputContent3:'Prompt input',
|
||||||
|
Cancel:'Cancel',
|
||||||
|
Sure:'Sure',
|
||||||
|
Moodboard:'Moodboard',
|
||||||
|
Prints:'Prints',
|
||||||
|
Sketches:'Sketches',
|
||||||
|
Mannequins:'Mannequins',
|
||||||
|
jsContent1:'Are you sure to delete the picture?',
|
||||||
|
jsContent2:'Are you sure to delete the picture?',
|
||||||
|
jsContent3:'You can only upload Image file!',
|
||||||
|
jsContent4:'Image must smaller than 2MB!',
|
||||||
|
jsContent5:'This picture has been uploaded whether to continue uploading？',
|
||||||
|
jsContent6:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent7:'Please enter content"',
|
||||||
|
},
|
||||||
|
HistoryPage:{
|
||||||
|
History:'History',
|
||||||
|
StartDate:'Start Date',
|
||||||
|
EndDate:'End Date',
|
||||||
|
inputContent1:'Search by collection name',
|
||||||
|
Detail:'Detail',
|
||||||
|
Rename:'Rename',
|
||||||
|
Retrieve:'Retrieve',
|
||||||
|
Delete:'Delete',
|
||||||
|
inputContent2:'Enter a new name',
|
||||||
|
Submit:'Submit',
|
||||||
|
CollectionsName:'Collections Name',
|
||||||
|
UptateTime:'Uptate Time',
|
||||||
|
SketchCounts:'Sketch Counts',
|
||||||
|
Operations:'Operations',
|
||||||
|
jsContent1:'Deleted successfully',
|
||||||
|
jsContent2:'Do you really want to delete this collection? ',
|
||||||
|
jsContent3:'Change successfully',
|
||||||
|
jsContent4:'Image must smaller than 2MB!',
|
||||||
|
jsContent5:'This picture has been uploaded whether to continue uploading？',
|
||||||
|
jsContent6:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent7:'Please enter content"',
|
||||||
|
},
|
||||||
|
ModelPlacement:{
|
||||||
|
Registration:'Registration',
|
||||||
|
Submit:'Submit',
|
||||||
|
Preview:'Preview',
|
||||||
|
Back:'Back',
|
||||||
|
Restore:'Restore',
|
||||||
|
System:'System',
|
||||||
|
Library:'Library',
|
||||||
|
Point:'Point',
|
||||||
|
RemovePoint:'Remove Point',
|
||||||
|
mannequinHint:'Please change the pure white inside the mannequin for another color to enhance your experience',
|
||||||
|
SHOULDER:'SHOULDER',
|
||||||
|
WAISTBAND:'WAISTBAND',
|
||||||
|
HAND:'HAND',
|
||||||
|
jsContent1:"You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
|
||||||
|
jsContent2:'This picture has been uploaded whether to continue uploading？',
|
||||||
|
},
|
||||||
|
ModelPlacementMobile:{
|
||||||
|
Registration:'Registration',
|
||||||
|
Submit:'Submit',
|
||||||
|
Preview:'Preview',
|
||||||
|
Back:'Back',
|
||||||
|
Restore:'Restore',
|
||||||
|
Point:'Point',
|
||||||
|
RemovePoint:'Remove Point',
|
||||||
|
mannequinHint:'Please change the pure white inside the mannequin for another color to enhance your experience',
|
||||||
|
SHOULDER:'SHOULDER',
|
||||||
|
WAISTBAND:'WAISTBAND',
|
||||||
|
HAND:'HAND',
|
||||||
|
jsContent1:"You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
|
||||||
|
jsContent2:'This picture has been uploaded whether to continue uploading？',
|
||||||
|
},
|
||||||
|
Upload:{
|
||||||
|
Delete:'Delete',
|
||||||
|
Maximum2M:'Maximum 10 images can be uploaded, Maximum 2M per image',
|
||||||
|
jsContent1:'You can only upload Image file!',
|
||||||
|
jsContent2:'Image must smaller than 2MB!',
|
||||||
|
jsContent3:'upload failed',
|
||||||
|
},
|
||||||
|
SketchboardUpload:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Library:'Library',
|
||||||
|
Generate:'Generate',
|
||||||
|
PIN:'PIN',
|
||||||
|
Thumbnail:'Thumbnail preview of selected sketchboard',
|
||||||
|
inputContent1:'Caption generation',
|
||||||
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent1:"upload failed",
|
||||||
|
jsContent2:"You can only upload Image file!",
|
||||||
|
jsContent3:'Image must smaller than 2MB!',
|
||||||
|
jsContent4:"Maximum number of allowable file uploads has been exceeded",
|
||||||
|
jsContent5:"Please select a picture",
|
||||||
|
jsContent6:"The entered content exceeds the maximum length.",
|
||||||
|
jsContent7:"Please enter content",
|
||||||
|
},
|
||||||
|
PrintboardUpload:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Library:'Library',
|
||||||
|
Generate:'Generate',
|
||||||
|
PIN:'PIN',
|
||||||
|
Thumbnail:'Thumbnail preview of selected printboard',
|
||||||
|
inputContent1:'Caption generation',
|
||||||
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent1:"You can only upload Image file!",
|
||||||
|
jsContent2:'Image must smaller than 2MB!',
|
||||||
|
jsContent3:"Maximum number of allowable file uploads has been exceeded",
|
||||||
|
jsContent4:"Please select a picture",
|
||||||
|
jsContent5:"The entered content exceeds the maximum length.",
|
||||||
|
jsContent6:"Please enter content",
|
||||||
|
},
|
||||||
|
ColorboardUpload:{
|
||||||
|
Thumbnail:'Thumbnail preview of selected colorboard',
|
||||||
|
Clear:'Clear',
|
||||||
|
Palette:'Palette',
|
||||||
|
HEX:'HEX',
|
||||||
|
RGBA:'RGBA',
|
||||||
|
AutoRecognize:'Auto Recognize',
|
||||||
|
ColorCode:'Color Code',
|
||||||
|
ExtractColor:'Extract Color',
|
||||||
|
jsContent1:"Your browser does not support it",
|
||||||
|
jsContent2:"Can't find the TCX color",
|
||||||
|
jsContent3:"You can only upload Image file!",
|
||||||
|
jsContent4:'Image must smaller than 2MB!',
|
||||||
|
},
|
||||||
|
MoodboardUpload:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Library:'Library',
|
||||||
|
Generate:'Generate',
|
||||||
|
Delete:'Delete',
|
||||||
|
Thumbnail:'Thumbnail preview of selected moodboard',
|
||||||
|
layout:'layout',
|
||||||
|
jsContent1:'You can select up to 8 images',
|
||||||
|
jsContent2:"upload failed",
|
||||||
|
jsContent3:"You can only upload Image file!",
|
||||||
|
jsContent4:'Image must smaller than 2MB!',
|
||||||
|
jsContent5:'Please click Layout to sort randomly',
|
||||||
|
},
|
||||||
|
Cropper:{
|
||||||
|
Cutpicture:'Cut picture',
|
||||||
|
Finish:'Finish',
|
||||||
|
Cancel:'Cancel',
|
||||||
|
CropPreview:'Crop Preview',
|
||||||
|
},
|
||||||
|
Material:{
|
||||||
|
inputContent1:'Please input',
|
||||||
|
PIN:'PIN',
|
||||||
|
},
|
||||||
|
MarketingSketchUpload:{
|
||||||
|
Upload:'Upload',
|
||||||
|
MyLibrary:'My Library',
|
||||||
|
maximumLength:'Maximum 15 images can be uploaded, Maximum 2M per image',
|
||||||
|
jsContent1:'upload failed',
|
||||||
|
jsContent2:"You can only upload Image file!",
|
||||||
|
jsContent3:'Image must smaller than 2MB!',
|
||||||
|
jsContent5:'Maximum number of allowable file uploads has been exceeded',
|
||||||
|
},
|
||||||
|
layout:{
|
||||||
|
MoodBoardDesign:'MoodBoard Design',
|
||||||
|
Submit:'Submit',
|
||||||
|
},
|
||||||
|
Generate:{
|
||||||
|
ImageOnly:'Image Only',
|
||||||
|
TextOnly:'Text Only',
|
||||||
|
TextImage:'Text-Image',
|
||||||
|
Model1:'Model1',
|
||||||
|
Model2:'Model2',
|
||||||
|
inputContent1:'Prompt input',
|
||||||
|
Generate:'Generate',
|
||||||
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent1:"You can only upload Image file!",
|
||||||
|
jsContent2:'Image must smaller than 2MB!',
|
||||||
|
jsContent3:"Please enter content",
|
||||||
|
jsContent4:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent5:"Please enter content",
|
||||||
|
jsContent6:"You can select up to 8 images",
|
||||||
|
jsContent7:"upload failed",
|
||||||
|
},
|
||||||
|
collectionModal:{
|
||||||
|
Moodboard:'Moodboard',
|
||||||
|
Printboard:'Printboard',
|
||||||
|
Colorboard:'Colorboard',
|
||||||
|
Sketchboard:'Sketchboard',
|
||||||
|
collection:'select moodboard for your collection',
|
||||||
|
jsContent1:'You must select the image and then use the layout.',
|
||||||
|
jsContent2:'The uploaded files will not be saved, being sure to continue? ',
|
||||||
|
jsContent3:'You must choose one or more colors for further process.',
|
||||||
|
},
|
||||||
|
DesignDetail:{
|
||||||
|
Details:'Details',
|
||||||
|
EditDetails:'Edit the details of your design',
|
||||||
|
Submit:'Submit',
|
||||||
|
CurrentApparel:'Current Apparel',
|
||||||
|
CurrentPrint:'Current Print',
|
||||||
|
CurrentColor:'Current Color',
|
||||||
|
},
|
||||||
|
DesignDetailAlter:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Library:'Library',
|
||||||
|
inputContent1:'Please input',
|
||||||
|
Palette:'Palette',
|
||||||
|
HEX:'HEX',
|
||||||
|
RGBA:'RGBA',
|
||||||
|
AutoRecognize:'Auto Recognize',
|
||||||
|
Delete:'Delete',
|
||||||
|
ColorCode:'Color Code',
|
||||||
|
jsContent1:"Your browser does not support it",
|
||||||
|
jsContent2:"You can select up to 8 images",
|
||||||
|
jsContent3:"upload failed",
|
||||||
|
jsContent4:'You can only upload Image file!',
|
||||||
|
jsContent5:'Image must smaller than 5MB!',
|
||||||
|
jsContent6:"Can't find the TCX color",
|
||||||
|
},
|
||||||
|
DesignDetailEnd:{
|
||||||
|
NewApparel:'New Apparel',
|
||||||
|
NewPrint:'New Print',
|
||||||
|
Placement:'Placement',
|
||||||
|
Overall:'Overall',
|
||||||
|
Single:'Single',
|
||||||
|
NewColor:'New Color',
|
||||||
|
preview:'preview',
|
||||||
|
Layout:'Layout',
|
||||||
|
jsContent1:'Please select print',
|
||||||
|
},
|
||||||
|
DesignPrintOperation:{
|
||||||
|
Placement:'Placement',
|
||||||
|
Overall:'Overall',
|
||||||
|
Single:'Single',
|
||||||
|
Random:'Random',
|
||||||
|
inputContent:'Please input',
|
||||||
|
preview:'preview',
|
||||||
|
jsContent1:'The above changes are not saved, being sure to continue? ',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { createI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
// element-plus 中的语言配置
|
||||||
|
import elementEnLocale from './en'
|
||||||
|
import elementZhLocale from './zh-cn'
|
||||||
|
|
||||||
|
// 自己的语言配置
|
||||||
|
import enLocale from './en'
|
||||||
|
import zhLocale from './zh-cn'
|
||||||
|
|
||||||
|
// 语言配置整合
|
||||||
|
const messages = {
|
||||||
|
'en':{
|
||||||
|
...enLocale,
|
||||||
|
...elementEnLocale
|
||||||
|
},
|
||||||
|
'zh-cn':{
|
||||||
|
...zhLocale,
|
||||||
|
...elementZhLocale
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 i18n
|
||||||
|
const i18n = createI18n({
|
||||||
|
legacy: false,
|
||||||
|
globalInjection:true, // 全局模式，可以直接使用 $t
|
||||||
|
locale: 'en',
|
||||||
|
messages: messages
|
||||||
|
})
|
||||||
|
|
||||||
|
export default i18n
|
||||||
|
|||||||
295
src/lang/zh-cn.ts
Normal file
295
src/lang/zh-cn.ts
Normal file
@@ -0,0 +1,295 @@
|
|||||||
|
export default {
|
||||||
|
Header:{
|
||||||
|
hello:'你好',
|
||||||
|
HOME:'首页',
|
||||||
|
LIBRARY:'收藏',
|
||||||
|
HISTORY:'历史',
|
||||||
|
bindEmail:'绑定邮箱',
|
||||||
|
logOff:'退出登录',
|
||||||
|
skip:'跳过',
|
||||||
|
emailContent:'你绑定了的邮箱',
|
||||||
|
Email:'邮箱',
|
||||||
|
NextStep:'下一步',
|
||||||
|
verification:'输入验证码',
|
||||||
|
SentTo:'发送',
|
||||||
|
Resend:'重发',
|
||||||
|
jsContent1:'邮箱格式不正确',
|
||||||
|
jsContent2:'绑定邮箱成功',
|
||||||
|
jsContent3:`已经长时间未操作，您必须活跃起来，否则将会在{numTime} S 后退出登录`,
|
||||||
|
},
|
||||||
|
Habit:{
|
||||||
|
Workspace:'工作空间',
|
||||||
|
WorkspaceSetting:'设置工作空间',
|
||||||
|
settingWorkspace:'调整您的工作空间',
|
||||||
|
Overall:'整体',
|
||||||
|
Single:'单件',
|
||||||
|
System:'系统',
|
||||||
|
Designer:'设计师',
|
||||||
|
Mannequin:'模特',
|
||||||
|
Current:'当前',
|
||||||
|
User:'用户',
|
||||||
|
jsContent1:'是否删除指定工作空间',
|
||||||
|
jsContent2:'请输入当前工作空间的名字',
|
||||||
|
},
|
||||||
|
RobotAssist:{
|
||||||
|
inputContent1:"问我什么都行~",
|
||||||
|
jsContent1:"请输入内容~",
|
||||||
|
},
|
||||||
|
HomeView:{
|
||||||
|
GetStarted:'开始设计',
|
||||||
|
Start:'重新开始',
|
||||||
|
Edit:'编辑',
|
||||||
|
Design:'设计',
|
||||||
|
Redesign:'重新设计',
|
||||||
|
GeneratedDesign:'生成的设计',
|
||||||
|
SelectedDesign:'喜欢的设计',
|
||||||
|
Export:'导出',
|
||||||
|
jsContent1:'你必须选择一种或多种颜色进行下一步处理。',
|
||||||
|
jsContent2:'你必须选择一种或多种颜色进行下一步处理。',
|
||||||
|
jsContent3:'导出文件失败。',
|
||||||
|
},
|
||||||
|
LibraryPage:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Generate:'Generate',
|
||||||
|
Delete:'Delete',
|
||||||
|
Rename:'Rename',
|
||||||
|
inputContent1:'Search by your style code',
|
||||||
|
all:'all',
|
||||||
|
ImageOnly:'Image Only',
|
||||||
|
TextOnly:'Text Only',
|
||||||
|
TextImage:'Text-Image',
|
||||||
|
inputContent2:'Prompt input',
|
||||||
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
Model1:'Model1',
|
||||||
|
Model2:'Model2',
|
||||||
|
inputContent3:'Prompt input',
|
||||||
|
Cancel:'Cancel',
|
||||||
|
Sure:'Sure',
|
||||||
|
Moodboard:'Moodboard',
|
||||||
|
Prints:'Prints',
|
||||||
|
Sketches:'Sketches',
|
||||||
|
Mannequins:'Mannequins',
|
||||||
|
jsContent1:'Are you sure to delete the picture?',
|
||||||
|
jsContent2:'Are you sure to delete the picture?',
|
||||||
|
jsContent3:'You can only upload Image file!',
|
||||||
|
jsContent4:'Image must smaller than 2MB!',
|
||||||
|
jsContent5:'This picture has been uploaded whether to continue uploading？',
|
||||||
|
jsContent6:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent7:'Please enter content"',
|
||||||
|
},
|
||||||
|
HistoryPage:{
|
||||||
|
History:'History',
|
||||||
|
StartDate:'Start Date',
|
||||||
|
EndDate:'End Date',
|
||||||
|
inputContent1:'Search by collection name',
|
||||||
|
Detail:'Detail',
|
||||||
|
Rename:'Rename',
|
||||||
|
Retrieve:'Retrieve',
|
||||||
|
Delete:'Delete',
|
||||||
|
inputContent2:'Enter a new name',
|
||||||
|
Submit:'Submit',
|
||||||
|
CollectionsName:'Collections Name',
|
||||||
|
UptateTime:'Uptate Time',
|
||||||
|
SketchCounts:'Sketch Counts',
|
||||||
|
Operations:'Operations',
|
||||||
|
jsContent1:'Deleted successfully',
|
||||||
|
jsContent2:'Do you really want to delete this collection? ',
|
||||||
|
jsContent3:'Change successfully',
|
||||||
|
jsContent4:'Image must smaller than 2MB!',
|
||||||
|
jsContent5:'This picture has been uploaded whether to continue uploading？',
|
||||||
|
jsContent6:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent7:'Please enter content"',
|
||||||
|
},
|
||||||
|
ModelPlacement:{
|
||||||
|
Registration:'Registration',
|
||||||
|
Submit:'Submit',
|
||||||
|
Preview:'Preview',
|
||||||
|
Back:'Back',
|
||||||
|
Restore:'Restore',
|
||||||
|
System:'System',
|
||||||
|
Library:'Library',
|
||||||
|
Point:'Point',
|
||||||
|
RemovePoint:'Remove Point',
|
||||||
|
mannequinHint:'Please change the pure white inside the mannequin for another color to enhance your experience',
|
||||||
|
SHOULDER:'SHOULDER',
|
||||||
|
WAISTBAND:'WAISTBAND',
|
||||||
|
HAND:'HAND',
|
||||||
|
jsContent1:"You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
|
||||||
|
jsContent2:'This picture has been uploaded whether to continue uploading？',
|
||||||
|
},
|
||||||
|
ModelPlacementMobile:{
|
||||||
|
Registration:'Registration',
|
||||||
|
Submit:'Submit',
|
||||||
|
Preview:'Preview',
|
||||||
|
Back:'Back',
|
||||||
|
Restore:'Restore',
|
||||||
|
Point:'Point',
|
||||||
|
RemovePoint:'Remove Point',
|
||||||
|
mannequinHint:'Please change the pure white inside the mannequin for another color to enhance your experience',
|
||||||
|
SHOULDER:'SHOULDER',
|
||||||
|
WAISTBAND:'WAISTBAND',
|
||||||
|
HAND:'HAND',
|
||||||
|
jsContent1:"You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
|
||||||
|
jsContent2:'This picture has been uploaded whether to continue uploading？',
|
||||||
|
},
|
||||||
|
Upload:{
|
||||||
|
Delete:'Delete',
|
||||||
|
Maximum2M:'Maximum 10 images can be uploaded, Maximum 2M per image',
|
||||||
|
jsContent1:'You can only upload Image file!',
|
||||||
|
jsContent2:'Image must smaller than 2MB!',
|
||||||
|
jsContent3:'upload failed',
|
||||||
|
},
|
||||||
|
SketchboardUpload:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Library:'Library',
|
||||||
|
Generate:'Generate',
|
||||||
|
PIN:'PIN',
|
||||||
|
Thumbnail:'Thumbnail preview of selected sketchboard',
|
||||||
|
inputContent1:'Caption generation',
|
||||||
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent1:"upload failed",
|
||||||
|
jsContent2:"You can only upload Image file!",
|
||||||
|
jsContent3:'Image must smaller than 2MB!',
|
||||||
|
jsContent4:"Maximum number of allowable file uploads has been exceeded",
|
||||||
|
jsContent5:"Please select a picture",
|
||||||
|
jsContent6:"The entered content exceeds the maximum length.",
|
||||||
|
jsContent7:"Please enter content",
|
||||||
|
},
|
||||||
|
PrintboardUpload:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Library:'Library',
|
||||||
|
Generate:'Generate',
|
||||||
|
PIN:'PIN',
|
||||||
|
Thumbnail:'Thumbnail preview of selected printboard',
|
||||||
|
inputContent1:'Caption generation',
|
||||||
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent1:"You can only upload Image file!",
|
||||||
|
jsContent2:'Image must smaller than 2MB!',
|
||||||
|
jsContent3:"Maximum number of allowable file uploads has been exceeded",
|
||||||
|
jsContent4:"Please select a picture",
|
||||||
|
jsContent5:"The entered content exceeds the maximum length.",
|
||||||
|
jsContent6:"Please enter content",
|
||||||
|
},
|
||||||
|
ColorboardUpload:{
|
||||||
|
Thumbnail:'Thumbnail preview of selected colorboard',
|
||||||
|
Clear:'Clear',
|
||||||
|
Palette:'Palette',
|
||||||
|
HEX:'HEX',
|
||||||
|
RGBA:'RGBA',
|
||||||
|
AutoRecognize:'Auto Recognize',
|
||||||
|
ColorCode:'Color Code',
|
||||||
|
ExtractColor:'Extract Color',
|
||||||
|
jsContent1:"Your browser does not support it",
|
||||||
|
jsContent2:"Can't find the TCX color",
|
||||||
|
jsContent3:"You can only upload Image file!",
|
||||||
|
jsContent4:'Image must smaller than 2MB!',
|
||||||
|
},
|
||||||
|
MoodboardUpload:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Library:'Library',
|
||||||
|
Generate:'Generate',
|
||||||
|
Delete:'Delete',
|
||||||
|
Thumbnail:'Thumbnail preview of selected moodboard',
|
||||||
|
layout:'layout',
|
||||||
|
jsContent1:'You can select up to 8 images',
|
||||||
|
jsContent2:"upload failed",
|
||||||
|
jsContent3:"You can only upload Image file!",
|
||||||
|
jsContent4:'Image must smaller than 2MB!',
|
||||||
|
jsContent5:'Please click Layout to sort randomly',
|
||||||
|
},
|
||||||
|
Cropper:{
|
||||||
|
Cutpicture:'Cut picture',
|
||||||
|
Finish:'Finish',
|
||||||
|
Cancel:'Cancel',
|
||||||
|
CropPreview:'Crop Preview',
|
||||||
|
},
|
||||||
|
Material:{
|
||||||
|
inputContent1:'Please input',
|
||||||
|
PIN:'PIN',
|
||||||
|
},
|
||||||
|
MarketingSketchUpload:{
|
||||||
|
Upload:'Upload',
|
||||||
|
MyLibrary:'My Library',
|
||||||
|
maximumLength:'Maximum 15 images can be uploaded, Maximum 2M per image',
|
||||||
|
jsContent1:'upload failed',
|
||||||
|
jsContent2:"You can only upload Image file!",
|
||||||
|
jsContent3:'Image must smaller than 2MB!',
|
||||||
|
jsContent5:'Maximum number of allowable file uploads has been exceeded',
|
||||||
|
},
|
||||||
|
layout:{
|
||||||
|
MoodBoardDesign:'MoodBoard Design',
|
||||||
|
Submit:'Submit',
|
||||||
|
},
|
||||||
|
Generate:{
|
||||||
|
ImageOnly:'Image Only',
|
||||||
|
TextOnly:'Text Only',
|
||||||
|
TextImage:'Text-Image',
|
||||||
|
Model1:'Model1',
|
||||||
|
Model2:'Model2',
|
||||||
|
inputContent1:'Prompt input',
|
||||||
|
Generate:'Generate',
|
||||||
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent1:"You can only upload Image file!",
|
||||||
|
jsContent2:'Image must smaller than 2MB!',
|
||||||
|
jsContent3:"Please enter content",
|
||||||
|
jsContent4:'The entered content exceeds the maximum length.',
|
||||||
|
jsContent5:"Please enter content",
|
||||||
|
jsContent6:"You can select up to 8 images",
|
||||||
|
jsContent7:"upload failed",
|
||||||
|
},
|
||||||
|
collectionModal:{
|
||||||
|
Moodboard:'Moodboard',
|
||||||
|
Printboard:'Printboard',
|
||||||
|
Colorboard:'Colorboard',
|
||||||
|
Sketchboard:'Sketchboard',
|
||||||
|
collection:'select moodboard for your collection',
|
||||||
|
jsContent1:'You must select the image and then use the layout.',
|
||||||
|
jsContent2:'The uploaded files will not be saved, being sure to continue? ',
|
||||||
|
jsContent3:'You must choose one or more colors for further process.',
|
||||||
|
},
|
||||||
|
DesignDetail:{
|
||||||
|
Details:'Details',
|
||||||
|
EditDetails:'Edit the details of your design',
|
||||||
|
Submit:'Submit',
|
||||||
|
CurrentApparel:'Current Apparel',
|
||||||
|
CurrentPrint:'Current Print',
|
||||||
|
CurrentColor:'Current Color',
|
||||||
|
},
|
||||||
|
DesignDetailAlter:{
|
||||||
|
Upload:'Upload',
|
||||||
|
Library:'Library',
|
||||||
|
inputContent1:'Please input',
|
||||||
|
Palette:'Palette',
|
||||||
|
HEX:'HEX',
|
||||||
|
RGBA:'RGBA',
|
||||||
|
AutoRecognize:'Auto Recognize',
|
||||||
|
Delete:'Delete',
|
||||||
|
ColorCode:'Color Code',
|
||||||
|
jsContent1:"Your browser does not support it",
|
||||||
|
jsContent2:"You can select up to 8 images",
|
||||||
|
jsContent3:"upload failed",
|
||||||
|
jsContent4:'You can only upload Image file!',
|
||||||
|
jsContent5:'Image must smaller than 5MB!',
|
||||||
|
jsContent6:"Can't find the TCX color",
|
||||||
|
},
|
||||||
|
DesignDetailEnd:{
|
||||||
|
NewApparel:'New Apparel',
|
||||||
|
NewPrint:'New Print',
|
||||||
|
Placement:'Placement',
|
||||||
|
Overall:'Overall',
|
||||||
|
Single:'Single',
|
||||||
|
NewColor:'New Color',
|
||||||
|
preview:'preview',
|
||||||
|
Layout:'Layout',
|
||||||
|
jsContent1:'Please select print',
|
||||||
|
},
|
||||||
|
DesignPrintOperation:{
|
||||||
|
Placement:'Placement',
|
||||||
|
Overall:'Overall',
|
||||||
|
Single:'Single',
|
||||||
|
Random:'Random',
|
||||||
|
inputContent:'Please input',
|
||||||
|
preview:'preview',
|
||||||
|
jsContent1:'The above changes are not saved, being sure to continue? ',
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -10,6 +10,7 @@ import 'ant-design-vue/dist/antd.css';
|
|||||||
import Antd from 'ant-design-vue';
|
import Antd from 'ant-design-vue';
|
||||||
import './assets/style/style.less'
|
import './assets/style/style.less'
|
||||||
import VueLazyload from "vue-lazyload";
|
import VueLazyload from "vue-lazyload";
|
||||||
|
import i18n from './lang/index'
|
||||||
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
|
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
|
||||||
flexible()
|
flexible()
|
||||||
|
|
||||||
@@ -22,4 +23,4 @@ let loadingParam = {
|
|||||||
attempt: 1
|
attempt: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
createApp(App).use(store).use(router).use(Antd).use(VueLazyload,loadingParam).mount('#app')
|
createApp(App).use(store).use(router).use(Antd).use(VueLazyload,loadingParam).use(i18n).mount('#app')
|
||||||
|
|||||||
@@ -103,9 +103,6 @@ export const Https = {
|
|||||||
updateUserGroupName:`/api/history/updateUserGroupName`, //History修改用户分组名
|
updateUserGroupName:`/api/history/updateUserGroupName`, //History修改用户分组名
|
||||||
historyChoose:`/api/history/choose`, //History choose
|
historyChoose:`/api/history/choose`, //History choose
|
||||||
getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
|
getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
|
||||||
putDesignDetail:`/api/design/detail/editLayers`,//编辑单间衣服大小位置
|
|
||||||
|
|
||||||
generateHighDesign:'/api/design/detail/generateHighDesign',//生成高级design图片
|
|
||||||
getNextSysElement:'/api/design/detail/getNextSysElement',//切换系统的element
|
getNextSysElement:'/api/design/detail/getNextSysElement',//切换系统的element
|
||||||
detailPrintDot:'/api/design/detail/printDot',//print打点预览
|
detailPrintDot:'/api/design/detail/printDot',//print打点预览
|
||||||
designSingle:`/api/design/detail/designSingle`,//单个design
|
designSingle:`/api/design/detail/designSingle`,//单个design
|
||||||
@@ -116,11 +113,8 @@ export const Https = {
|
|||||||
batchUpdateLibraryName:'/api/library/batchUpdateLibraryName',//Library修改用户文件名
|
batchUpdateLibraryName:'/api/library/batchUpdateLibraryName',//Library修改用户文件名
|
||||||
batchDeleteLibrary:'/api/library/batchDeleteLibrary',//删除library
|
batchDeleteLibrary:'/api/library/batchDeleteLibrary',//删除library
|
||||||
queryLibraryTopAndBottomPage:'/api/library/queryLibraryTopAndBottomPage',//Library分页列表(查询top和bottom)
|
queryLibraryTopAndBottomPage:'/api/library/queryLibraryTopAndBottomPage',//Library分页列表(查询top和bottom)
|
||||||
deleteHighDesign:'/api/design/detail/deleteHighDesign',//删除高级design图片
|
|
||||||
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
|
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
|
||||||
libraryModelsDot:'/api/library/modelsDot',//Models打点预览
|
libraryModelsDot:'/api/library/modelsDot',//Models打点预览
|
||||||
// pythonChatStream:'/api/python/chatStream',//机器人助力
|
|
||||||
// chatStreamTest:`/robot/chat_stream_test`,//机器人助力
|
|
||||||
chatStreamTest:`/api/python/chatStream`,//机器人助力
|
chatStreamTest:`/api/python/chatStream`,//机器人助力
|
||||||
pictureLikeOrUnLike:`/api/python/pictureLikeOrUnLike`,//机器人生成图喜欢
|
pictureLikeOrUnLike:`/api/python/pictureLikeOrUnLike`,//机器人生成图喜欢
|
||||||
getBloodBars:`/api/python/getBloodBars`,//机器人血条
|
getBloodBars:`/api/python/getBloodBars`,//机器人血条
|
||||||
|
|||||||
@@ -8,15 +8,15 @@
|
|||||||
<div class="page_content_body">
|
<div class="page_content_body">
|
||||||
<HeaderComponent></HeaderComponent>
|
<HeaderComponent></HeaderComponent>
|
||||||
<div class="history_page_body">
|
<div class="history_page_body">
|
||||||
<div class="history_header">History</div>
|
<div class="history_header">{{ $t('HistoryPage.History') }}History</div>
|
||||||
<div class="history_table_search">
|
<div class="history_table_search">
|
||||||
<a-range-picker class="range_picker" v-model:value="rangePickerValue" :placeholder="['Start Date', 'End Date']" valueFormat="YYYY-MM-DD">
|
<a-range-picker class="range_picker" v-model:value="rangePickerValue" :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]" valueFormat="YYYY-MM-DD">
|
||||||
<template #suffixIcon>
|
<template #suffixIcon>
|
||||||
<span class="icon iconfont range_picker_icon icon-rili"></span>
|
<span class="icon iconfont range_picker_icon icon-rili"></span>
|
||||||
</template>
|
</template>
|
||||||
</a-range-picker>
|
</a-range-picker>
|
||||||
<div class="content_search_block">
|
<div class="content_search_block">
|
||||||
<input class="search_input" placeholder="Search by collection name" v-model="searchCollectionName" @keydown.enter="searchHistoryList()">
|
<input class="search_input" :placeholder="$t('HistoryPage.inputContent1')" v-model="searchCollectionName" @keydown.enter="searchHistoryList()">
|
||||||
<div class="search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
<div class="search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -33,10 +33,10 @@
|
|||||||
}">
|
}">
|
||||||
<template #bodyCell="{ column, text, record ,index}">
|
<template #bodyCell="{ column, text, record ,index}">
|
||||||
<div class="operate_list" v-if="column.title === 'Operations'">
|
<div class="operate_list" v-if="column.title === 'Operations'">
|
||||||
<div class="operate_item" @click="turnToDetail(record)">Detail</div>
|
<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
|
||||||
<div class="operate_item" @click="renameCollection(record,index)">Rename</div>
|
<div class="operate_item" @click="renameCollection(record,index)">{{ $t('HistoryPage.Rename') }}</div>
|
||||||
<div class="operate_item" @click="retrieveHome(record)">Retrieve</div>
|
<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
|
||||||
<div class="operate_item" @click="deleteGroup(record, index)">Delete</div>
|
<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
@@ -56,9 +56,9 @@
|
|||||||
>
|
>
|
||||||
<div class="collection_rename_content">
|
<div class="collection_rename_content">
|
||||||
<div class="rename_form_content">
|
<div class="rename_form_content">
|
||||||
<input class="rename_form_input" placeholder="Enter a new name" v-model="newCollectionName" @keydown.enter="confrimRename()">
|
<input class="rename_form_input" :placeholder="$t('HistoryPage.inputContent2')" v-model="newCollectionName" @keydown.enter="confrimRename()">
|
||||||
</div>
|
</div>
|
||||||
<div class="rename_submit_button" @click="confrimRename()">Submit</div>
|
<div class="rename_submit_button" @click="confrimRename()">{{ $t('HistoryPage.Submit') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<RobotAssist></RobotAssist>
|
<RobotAssist></RobotAssist>
|
||||||
@@ -73,6 +73,7 @@ import { formatTime } from "@/tool/util"
|
|||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
@@ -83,14 +84,14 @@ export default defineComponent({
|
|||||||
let rangePickerValue:any = ref([])
|
let rangePickerValue:any = ref([])
|
||||||
let renameData:any = ref({}) //修改名字选中的数据
|
let renameData:any = ref({}) //修改名字选中的数据
|
||||||
const columns:any = ref([
|
const columns:any = ref([
|
||||||
{ title: 'Collections Name', align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
|
{ title: useI18n().t('HistoryPage.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
|
||||||
{ title: 'Uptate Time', align:'center', ellipsis: true,width: 150, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
|
{ title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 150, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
|
||||||
let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
||||||
return time
|
return time
|
||||||
}},
|
}},
|
||||||
{ title: 'Sketch Counts', align:'center', ellipsis: true, width: 150, dataIndex: 'sketchCount', key: 'sketchCounts' },
|
{ title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 150, dataIndex: 'sketchCount', key: 'sketchCounts' },
|
||||||
{
|
{
|
||||||
title: 'Operations',
|
title: useI18n().t('HistoryPage.Operations'),
|
||||||
key: 'operation',
|
key: 'operation',
|
||||||
align:'center',
|
align:'center',
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
@@ -99,11 +100,13 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
let collectionList:any = ref([])
|
let collectionList:any = ref([])
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
rangePickerValue,
|
rangePickerValue,
|
||||||
columns,
|
columns,
|
||||||
collectionList,
|
collectionList,
|
||||||
renameData,
|
renameData,
|
||||||
|
t,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
@@ -172,16 +175,17 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
message.success('Deleted successfully')
|
message.success(this.t('HistoryPage.jsContent1'))
|
||||||
this.collectionList.splice(index,1)
|
this.collectionList.splice(index,1)
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: 'Do you really want to delete this collection? ',
|
title: this.t('HistoryPage.jsContent2'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
|
mask:false,
|
||||||
onOk() {
|
onOk() {
|
||||||
deleteGroupFun(record.id,index)
|
deleteGroupFun(record.id,index)
|
||||||
}
|
}
|
||||||
@@ -206,7 +210,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.updateUserGroupName,data).then(
|
Https.axiosPost(Https.httpUrls.updateUserGroupName,data).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
message.success('Change successfully')
|
message.success(this.t('HistoryPage.jsContent3'))
|
||||||
this.collectionList[this.renameData.index].name = this.newCollectionName
|
this.collectionList[this.renameData.index].name = this.newCollectionName
|
||||||
this.collectionList[this.renameData.index].updateDate = rv.updateDate
|
this.collectionList[this.renameData.index].updateDate = rv.updateDate
|
||||||
this.renameVisivle = false
|
this.renameVisivle = false
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
src="@/assets/images/homePage/null_img.png"
|
src="@/assets/images/homePage/null_img.png"
|
||||||
/> -->
|
/> -->
|
||||||
<div class="new_collection_button" @click="startNewCollection()">
|
<div class="new_collection_button" @click="startNewCollection()">
|
||||||
Get Started
|
{{ $t('HomeView.GetStarted') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="is_finish_loading" v-show="isFinishLoading">
|
<div class="is_finish_loading" v-show="isFinishLoading">
|
||||||
@@ -28,10 +28,10 @@
|
|||||||
<div class="home_left_info" v-show="isHaveReviewCollection">
|
<div class="home_left_info" v-show="isHaveReviewCollection">
|
||||||
<div class="left_info_top">
|
<div class="left_info_top">
|
||||||
<div class="button_second" @click="startNewCollection()">
|
<div class="button_second" @click="startNewCollection()">
|
||||||
Start
|
{{ $t('HomeView.Start') }}
|
||||||
</div>
|
</div>
|
||||||
<div class="button_first button_margin" @click="recollection()">
|
<div class="button_first button_margin" @click="recollection()">
|
||||||
Edit
|
{{ $t('HomeView.Edit') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="left_info_content scroll_style">
|
<div class="left_info_content scroll_style">
|
||||||
@@ -48,11 +48,11 @@
|
|||||||
<div class="right_top">
|
<div class="right_top">
|
||||||
<div class="right_top_left">
|
<div class="right_top_left">
|
||||||
<div class="button_second" @click="designNewCollection()">
|
<div class="button_second" @click="designNewCollection()">
|
||||||
Design
|
{{ $t('HomeView.Design') }}
|
||||||
</div>
|
</div>
|
||||||
<div class="button_first button_margin_14" v-show="designCollectionId"
|
<div class="button_first button_margin_14" v-show="designCollectionId"
|
||||||
@click="resDesignCollection()">
|
@click="resDesignCollection()">
|
||||||
Redesign
|
{{ $t('HomeView.Redesign') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -60,8 +60,9 @@
|
|||||||
<div class="right_content_block">
|
<div class="right_content_block">
|
||||||
<div class="right_content_header">
|
<div class="right_content_header">
|
||||||
<div class="content_header_left">
|
<div class="content_header_left">
|
||||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">Generated
|
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||||||
Design</span>
|
{{ $t('HomeView.GeneratedDesign') }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -98,10 +99,10 @@
|
|||||||
|
|
||||||
<div class="right_content_header">
|
<div class="right_content_header">
|
||||||
<div class="content_header_left">
|
<div class="content_header_left">
|
||||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">Selected Design</span>
|
<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="button_second" v-show="likeDesignCollectionList.length" @click="exportCanvas()">
|
<div class="button_second" v-show="likeDesignCollectionList.length" @click="exportCanvas()">
|
||||||
Export
|
{{ $t('HomeView.Export') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -201,6 +202,8 @@ import { LoadingOutlined } from "@ant-design/icons-vue";
|
|||||||
import draggable from 'vuedraggable'
|
import draggable from 'vuedraggable'
|
||||||
import JSZip from "jszip";
|
import JSZip from "jszip";
|
||||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import i18n from "@/lang";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
const FileSaver = require("file-saver");
|
const FileSaver = require("file-saver");
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@@ -239,6 +242,7 @@ export default defineComponent({
|
|||||||
height:'',
|
height:'',
|
||||||
}
|
}
|
||||||
let userInfo:any = {}
|
let userInfo:any = {}
|
||||||
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
likeDesignCollectionList,
|
likeDesignCollectionList,
|
||||||
@@ -249,6 +253,7 @@ export default defineComponent({
|
|||||||
contentImgMax,
|
contentImgMax,
|
||||||
contentImg,
|
contentImg,
|
||||||
userInfo,
|
userInfo,
|
||||||
|
t,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -444,7 +449,7 @@ export default defineComponent({
|
|||||||
this.store.state.UploadFilesModule.allBoardData;
|
this.store.state.UploadFilesModule.allBoardData;
|
||||||
if (!colorBoards || colorBoards?.length < 1) {
|
if (!colorBoards || colorBoards?.length < 1) {
|
||||||
message.warning(
|
message.warning(
|
||||||
"You must choose one or more colors for further process."
|
this.t('HomeView.jsContent1')
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -481,7 +486,7 @@ export default defineComponent({
|
|||||||
this.store.state.UploadFilesModule.allBoardData;
|
this.store.state.UploadFilesModule.allBoardData;
|
||||||
if (!colorBoards || colorBoards?.length < 1) {
|
if (!colorBoards || colorBoards?.length < 1) {
|
||||||
message.warning(
|
message.warning(
|
||||||
"You must choose one or more colors for further process."
|
this.t('HomeView.jsContent2')
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -976,7 +981,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch((res) => {
|
.catch((res) => {
|
||||||
message.warning("Failed to export the file");
|
message.warning(this.t('HomeView.jsContent3'));
|
||||||
this.isShowMark = false;
|
this.isShowMark = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -40,11 +40,11 @@
|
|||||||
accept=".jpg,.png,.jpeg,.bmp"
|
accept=".jpg,.png,.jpeg,.bmp"
|
||||||
@change="fileUploadChange"
|
@change="fileUploadChange"
|
||||||
>
|
>
|
||||||
<div>Upload</div>
|
<div>{{ $t('LibraryPage.Upload') }}</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
<div v-show="uploadGenerate != 'Upload'">Upload</div>
|
<div v-show="uploadGenerate != 'Upload'">{{ $t('LibraryPage.Upload') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="selectCode != 'Models'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">Generate</div>
|
<div v-show="selectCode != 'Models'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="librart_headr_right">
|
<div class="librart_headr_right">
|
||||||
@@ -84,11 +84,11 @@
|
|||||||
<div class="content_body_header">
|
<div class="content_body_header">
|
||||||
<div class="content_body_header_left">
|
<div class="content_body_header_left">
|
||||||
<div class="content_body_header_right">
|
<div class="content_body_header_right">
|
||||||
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">Delete</div>
|
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
|
||||||
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">Rename</div>
|
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">{{ $t('LibraryPage.Rename') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_search_block">
|
<div class="content_search_block">
|
||||||
<input class="search_input" placeholder="Search by your style code" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||||
<!-- <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> -->
|
<!-- <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> -->
|
||||||
<div class="generage_btn search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
<div class="generage_btn search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||||
|
|
||||||
@@ -96,7 +96,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
|
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
|
||||||
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
|
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
|
||||||
<div>all</div>
|
<div>{{ $t('LibraryPage.all') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
v-model="checkbox[0].type"
|
v-model="checkbox[0].type"
|
||||||
@click="setKeyword(0)"
|
@click="setKeyword(0)"
|
||||||
/>
|
/>
|
||||||
<span>Image Only</span>
|
<span>{{ $t('LibraryPage.ImageOnly') }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkboxItem">
|
<div class="checkboxItem">
|
||||||
@@ -157,7 +157,7 @@
|
|||||||
v-model="checkbox[1].type"
|
v-model="checkbox[1].type"
|
||||||
@click="setKeyword(1)"
|
@click="setKeyword(1)"
|
||||||
/>
|
/>
|
||||||
<span>Text Only</span>
|
<span>{{ $t('LibraryPage.TextOnly') }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkboxItem">
|
<div class="checkboxItem">
|
||||||
@@ -167,21 +167,21 @@
|
|||||||
v-model="checkbox[2].type"
|
v-model="checkbox[2].type"
|
||||||
@click="setKeyword(2)"
|
@click="setKeyword(2)"
|
||||||
/>
|
/>
|
||||||
<span>Text-Image</span>
|
<span>{{ $t('LibraryPage.TextImage') }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input_box" :class="{active:inputShow}">
|
<div class="input_box" :class="{active:inputShow}">
|
||||||
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" placeholder="Prompt input" v-model="captionGeneration">
|
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" :placeholder="$t('LibraryPage.inputContent2')" v-model="captionGeneration">
|
||||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('LibraryPage.Generate') }}</div>
|
||||||
<span>The entered content exceeds the maximum length.</span>
|
<span>{{ $t('LibraryPage.maximumLength') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="selectCode == 'Printboard'" class="printModel">
|
<div v-show="selectCode == 'Printboard'" class="printModel">
|
||||||
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
||||||
<ul v-show="printModel.optype">
|
<ul v-show="printModel.optype">
|
||||||
<li class="printModel_item" @click="setprintModel(1)">Model1</li>
|
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
|
||||||
<li class="printModel_item" @click="setprintModel(2)">Model2</li>
|
<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload_item">
|
<div class="upload_item">
|
||||||
@@ -287,11 +287,11 @@
|
|||||||
>
|
>
|
||||||
<div class="collection_rename_content">
|
<div class="collection_rename_content">
|
||||||
<div class="rename_form_content">
|
<div class="rename_form_content">
|
||||||
<input class="rename_form_input" placeholder="Enter a new name" v-model="newPicName" @keydown.enter="confrimRename()">
|
<input class="rename_form_input" :placeholder="$t('LibraryPage.inputContent3')" v-model="newPicName" @keydown.enter="confrimRename()">
|
||||||
</div>
|
</div>
|
||||||
<div class="rename_button_list">
|
<div class="rename_button_list">
|
||||||
<div class="rename_button_item rename_cancel_button" @click="closeRenameModal()">Cancel</div>
|
<div class="rename_button_item rename_cancel_button" @click="closeRenameModal()">{{ $t('LibraryPage.Cancel') }}</div>
|
||||||
<div class="rename_button_item rename_submit_button" @click="confrimRename()">Sure</div>
|
<div class="rename_button_item rename_submit_button" @click="confrimRename()">{{ $t('LibraryPage.Sure') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
@@ -321,6 +321,7 @@ import {getUploadUrl,isMoible} from '@/tool/util'
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { getCookie } from "@/tool/cookie";
|
import { getCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
@@ -330,12 +331,12 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let menuList = ref([
|
let menuList = ref([
|
||||||
{title:'Moodboard',code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
|
{title:useI18n().t('LibraryPage.Moodboard'),code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
|
||||||
{title:'Prints',code:'Printboard',icon:'fi fi-rs-objects-column',showChildren:false,children:[]},
|
{title:useI18n().t('LibraryPage.Prints'),code:'Printboard',icon:'fi fi-rs-objects-column',showChildren:false,children:[]},
|
||||||
// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
|
// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
|
||||||
{title:'Sketches',code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
|
{title:useI18n().t('LibraryPage.Sketches'),code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
|
||||||
// {title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
|
// {title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
|
||||||
{title:'Mannequins',code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
|
{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
|
||||||
|
|
||||||
])
|
])
|
||||||
let selectImgList:any = ref([])
|
let selectImgList:any = ref([])
|
||||||
@@ -387,6 +388,9 @@ export default defineComponent({
|
|||||||
optype:false,
|
optype:false,
|
||||||
name:'model1'
|
name:'model1'
|
||||||
})
|
})
|
||||||
|
let {t} = useI18n()
|
||||||
|
console.log();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
menuList,
|
menuList,
|
||||||
selectImgList,
|
selectImgList,
|
||||||
@@ -416,7 +420,8 @@ export default defineComponent({
|
|||||||
inputTime,
|
inputTime,
|
||||||
generateList,
|
generateList,
|
||||||
selectGenerateList,
|
selectGenerateList,
|
||||||
printModel
|
printModel,
|
||||||
|
t
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(this_) {
|
data(this_) {
|
||||||
@@ -614,10 +619,11 @@ export default defineComponent({
|
|||||||
deleteSinglePic(data:any,index:any){
|
deleteSinglePic(data:any,index:any){
|
||||||
let _this = this
|
let _this = this
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: 'Are you sure to delete the picture?',
|
title: this.t('LibraryPage.jsContent1'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
|
mask:false,
|
||||||
// centered:true,
|
// centered:true,
|
||||||
onOk() {
|
onOk() {
|
||||||
_this.confirmDeletePic(data,index)
|
_this.confirmDeletePic(data,index)
|
||||||
@@ -632,7 +638,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
let _this = this
|
let _this = this
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: 'Are you sure to delete the picture?',
|
title: this.t('LibraryPage.jsContent2'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
@@ -665,11 +671,11 @@ export default defineComponent({
|
|||||||
beforeUpload(file:any,fileList:any){
|
beforeUpload(file:any,fileList:any){
|
||||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.warning('You can only upload Image file!');
|
message.warning(this.t('LibraryPage.jsContent3'));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.warning('Image must smaller than 2MB!');
|
message.warning(this.t('LibraryPage.jsContent4'));
|
||||||
}
|
}
|
||||||
if(isJpgOrPng && isLt2M){
|
if(isJpgOrPng && isLt2M){
|
||||||
this.currentUploadFileNum = fileList.length
|
this.currentUploadFileNum = fileList.length
|
||||||
@@ -717,11 +723,12 @@ export default defineComponent({
|
|||||||
affirmCstomRequest(data:any){
|
affirmCstomRequest(data:any){
|
||||||
let _this = this
|
let _this = this
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: 'This picture has been uploaded whether to continue uploading？ ',
|
title: this.t('LibraryPage.jsContent5'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
mask:false,
|
mask:false,
|
||||||
|
zIndex:99999,
|
||||||
// centered:true,
|
// centered:true,
|
||||||
onOk() {
|
onOk() {
|
||||||
data.checkMd5 = 0
|
data.checkMd5 = 0
|
||||||
@@ -895,14 +902,14 @@ export default defineComponent({
|
|||||||
let arr = this.captionGeneration.split(/\s+/).length
|
let arr = this.captionGeneration.split(/\s+/).length
|
||||||
if(arr > 75){
|
if(arr > 75){
|
||||||
message.warning(
|
message.warning(
|
||||||
"The entered content exceeds the maximum length."
|
this.t('LibraryPage.jsContent6')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
|
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
message.warning(
|
message.warning(
|
||||||
"Please enter content"
|
this.t('LibraryPage.jsContent7')
|
||||||
);
|
);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user