2023-10-30-语言适配 en
This commit is contained in:
@@ -1,343 +0,0 @@
|
||||
<template>
|
||||
<a-modal class="accessory_replace_modal"
|
||||
v-model:visible="accessoryReplaceShow"
|
||||
:footer="null"
|
||||
width="40rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
|
||||
<div class="accessory_replace_content">
|
||||
<div class="new_accessory_block">
|
||||
<div class="new_accessory_title">New {{othersData?.type}}</div>
|
||||
<div class="new_accessory_img_block">
|
||||
<img class="element_img" :src="othersData?.path">
|
||||
<div class="element_img_loading" v-show="loadingShow">
|
||||
<a-spin :indicator="indicator"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="new_accessory_operate_list">
|
||||
<div class="new_accessory_operate_button pervious_button" @click="changeElement('PREV')">Previous</div>
|
||||
<div class="new_accessory_operate_button fetch_button" @click="changeElement('NEXT')">Re-fetch</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accessory_color_block" v-show="othersData?.type !== 'Earring' && othersData?.type !== 'Hairstyle'">
|
||||
<div class="accessory_color_block_header">Modify Color</div>
|
||||
<div class="accessory_color_block_body">
|
||||
<div class="review_color_block" :style="{background:`rgb(${modifyColor.r},${modifyColor.g},${modifyColor.b})`}"></div>
|
||||
<div class="setting_color_block">
|
||||
<div class="setting_color_content">
|
||||
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
|
||||
<Slider class="sileder_color" v-model="selectColor"></Slider>
|
||||
</div>
|
||||
<div class="color_rgb_block">
|
||||
<div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
|
||||
<div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
|
||||
<div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit_button" @click="submitOthers()">Submit</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,h} from 'vue'
|
||||
import { Chrome,Slider } from '@ans1998/vue3-color'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components:{Chrome,Slider},
|
||||
setup(){
|
||||
let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
|
||||
let othersData:any = ref({})
|
||||
const store = useStore();
|
||||
return {
|
||||
selectColor,
|
||||
othersData,
|
||||
store
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
loadingShow:false,
|
||||
accessoryReplaceShow:false,
|
||||
modifyColor:{r:255,g:255,b:255},
|
||||
othersIndex:0, //该元素在列表中的索引
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
selectColor(newVal:any,oldVal:any){
|
||||
this.modifyColor = newVal.rgba || {}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getSelectRGB(selectColor){
|
||||
return (selectColor:any)=>{
|
||||
let rgba = selectColor.rgba
|
||||
let data = {
|
||||
r:rgba?.r || 255,
|
||||
g:rgba?.g || 255,
|
||||
b:rgba?.b || 255
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
showAccessoryReplaceModal(data:any){
|
||||
this.othersData = JSON.parse(JSON.stringify(data.others))
|
||||
this.othersIndex = data.index
|
||||
this.accessoryReplaceShow = true
|
||||
let color = this.othersData.color ? this.othersData.color.split(' ') :''
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2]}}
|
||||
},
|
||||
|
||||
//关闭弹窗
|
||||
closeModal(){
|
||||
this.accessoryReplaceShow = false
|
||||
this.othersData = {}
|
||||
this.othersIndex = 0
|
||||
},
|
||||
|
||||
//切换元素
|
||||
changeElement(type:string){
|
||||
let url = Https.httpUrls.getNextSysElement + `?id=${this.othersData.id}&operateType=${type}&type=${this.othersData.type}`
|
||||
this.loadingShow = true
|
||||
Https.axiosGet(url).then(
|
||||
(rv: any) => {
|
||||
this.othersData.id = rv.id
|
||||
this.othersData.path = rv.path
|
||||
this.loadingShow = false
|
||||
}
|
||||
).catch(rv=>{
|
||||
this.loadingShow = false
|
||||
})
|
||||
},
|
||||
//提交
|
||||
submitOthers(){
|
||||
this.othersData.color = this.othersData.color ? `${this.modifyColor.r} ${this.modifyColor.g} ${this.modifyColor.b}` : ''
|
||||
let data = {
|
||||
others:this.othersData,
|
||||
index:this.othersIndex
|
||||
}
|
||||
this.store.commit('setDesignItemOthers',data)
|
||||
this.closeModal()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.accessory_replace_modal{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
padding: 2rem 1.8rem 3rem;
|
||||
box-sizing: border-box;
|
||||
background: #F2F3FB;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.close_icon{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
line-height: 3.6rem;
|
||||
text-align: center;
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.accessory_replace_content{
|
||||
|
||||
.new_accessory_block{
|
||||
padding: 2rem 2rem 1.2rem;
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
|
||||
.new_accessory_title{
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
color: #030303;
|
||||
margin-bottom: 1.3rem;
|
||||
}
|
||||
.new_accessory_img_block{
|
||||
width: 20rem;
|
||||
height: 16rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F5F5F5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin:0 auto 1.7rem;
|
||||
position: relative;
|
||||
|
||||
.element_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.element_img_loading{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.new_accessory_operate_list{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.new_accessory_operate_button{
|
||||
padding: 0 1.5rem;
|
||||
height: 3.2rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pervious_button{
|
||||
background: #343579;
|
||||
color: #ffffff;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.fetch_button{
|
||||
background: #E6E6F6;
|
||||
color: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accessory_color_block{
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 0 2rem;
|
||||
margin: 1.3rem 0 1.8rem;
|
||||
|
||||
.accessory_color_block_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 3.7rem;
|
||||
font-size: 1.6rem;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.accessory_color_block_body{
|
||||
padding:0 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.review_color_block{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #343579;
|
||||
}
|
||||
|
||||
.setting_color_block{
|
||||
|
||||
.setting_color_content{
|
||||
|
||||
.vc-chrome-body{
|
||||
display: none;
|
||||
}
|
||||
.chrome_color{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-chrome-saturation-wrap{
|
||||
height: 100%;
|
||||
}
|
||||
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
.sileder_color{
|
||||
width: 1.6rem;
|
||||
|
||||
.vc-slider-swatches{
|
||||
display:none
|
||||
}
|
||||
.vc-slider-hue-warp {
|
||||
width: 11.5rem;
|
||||
height: 1.6rem;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-hue-picker{
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(-0.6rem, -0.4rem);
|
||||
|
||||
}
|
||||
}
|
||||
.vc-hue-pointer{
|
||||
top: 0.5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.color_rgb_block{
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.4rem;
|
||||
color: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit_button{
|
||||
width: 9.8rem;
|
||||
height: 3.6rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
font-size: 1.4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #FFFFFF;
|
||||
margin: 1.8rem auto 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,8 +10,8 @@
|
||||
:closable="false"
|
||||
>
|
||||
<div class="design_title_text">
|
||||
<div>Details</div>
|
||||
<div class="design_title_text_intro">Edit the details of your design</div>
|
||||
<div>{{ $t('DesignDetail.Details') }}</div>
|
||||
<div class="design_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
@@ -59,7 +59,7 @@
|
||||
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
||||
</div>
|
||||
<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
|
||||
Submit
|
||||
{{ $t('DesignDetail.Submit') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail_modal_body_category">
|
||||
@@ -67,7 +67,7 @@
|
||||
<div class="clothes_detail_item clothes_detail_item_apparel">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Apparel</div>
|
||||
<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
|
||||
</div>
|
||||
<img :src="designItemDetail?.clothes?.[currentIndex]?.path" alt="" class="centent" @click="openCurrent(1)">
|
||||
@@ -75,7 +75,7 @@
|
||||
<div class="clothes_detail_item clothes_detail_item_print">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Print</div>
|
||||
<div>{{ $t('DesignDetail.CurrentPrint') }}</div>
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
|
||||
</div>
|
||||
<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" @click="openCurrent(2)">
|
||||
@@ -86,7 +86,7 @@
|
||||
<div class="clothes_detail_item clothes_detail_item_color">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Color</div>
|
||||
<div>{{ $t('DesignDetail.CurrentColor') }}</div>
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
|
||||
</div>
|
||||
<div class="img_block_item centent" @click.stop="openCurrent(3)">
|
||||
@@ -120,8 +120,6 @@
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- <ElementReplace ref="ElementReplace"></ElementReplace> -->
|
||||
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
@@ -130,10 +128,8 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide } from 'vue'
|
||||
import ElementReplace from '@/component/Detail/ElementReplace.vue'
|
||||
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
||||
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
|
||||
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
|
||||
import setDesignItem from '@/component/Detail/setDesignItem.vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { Https } from "@/tool/https";
|
||||
@@ -141,10 +137,9 @@ import {getUploadUrl,isMoible} from '@/tool/util'
|
||||
import { useStore } from "vuex";
|
||||
import GO from '@/tool/GO';
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
ElementReplace,
|
||||
AccessoryReplace,
|
||||
Draggable,
|
||||
DesignDetailAlter,
|
||||
setDesignItem,
|
||||
@@ -182,6 +177,8 @@ export default defineComponent({
|
||||
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
|
||||
let oppositeRevocationShow:any = ref()
|
||||
let revocationShow:any = ref()
|
||||
|
||||
let {t} = useI18n()
|
||||
return{
|
||||
designItemDetail,
|
||||
store,
|
||||
@@ -198,7 +195,8 @@ export default defineComponent({
|
||||
designItemDetailUrl,
|
||||
setRevocationShow,
|
||||
oppositeRevocationShow,
|
||||
revocationShow
|
||||
revocationShow,
|
||||
t,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
|
||||
@@ -8,19 +8,19 @@
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
<span>{{ $t('DesignDetailAlter.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
<span>{{ $t('DesignDetailAlter.Library') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 2" class="detail_Library">
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
<!-- clothesPrint -->
|
||||
@@ -159,7 +159,7 @@
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Palette</span>
|
||||
<span>{{ $t('DesignDetailAlter.Palette') }}</span>
|
||||
</div>
|
||||
<div class="color_setting_block">
|
||||
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||
@@ -168,10 +168,10 @@
|
||||
<div class="color_block">
|
||||
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||
<div v-show="colorBlockHex">
|
||||
HEX
|
||||
{{ $t('DesignDetailAlter.HEX') }}
|
||||
</div>
|
||||
<div v-show="!colorBlockHex">
|
||||
RGBA
|
||||
{{ $t('DesignDetailAlter.RGBA') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_right">
|
||||
@@ -196,7 +196,7 @@
|
||||
<div class="right_content_line right_content_line_upload">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Auto Recognize</span>
|
||||
<span>{{ $t('DesignDetailAlter.AutoRecognize') }}</span>
|
||||
</div>
|
||||
<div class="upload_centetn">
|
||||
<div class="upload_item">
|
||||
@@ -206,7 +206,7 @@
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img" ref="colorImage">
|
||||
<div class="delete_file_block" @click="colorDeleteFile(index)">Delete</div>
|
||||
<div class="delete_file_block" @click="colorDeleteFile(index)">{{ $t('DesignDetailAlter.Delete') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
@@ -237,7 +237,7 @@
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Color Code</span>
|
||||
<span>{{ $t('DesignDetailAlter.ColorCode') }}</span>
|
||||
</div>
|
||||
<div class="get_color_block">
|
||||
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
||||
@@ -265,6 +265,7 @@ import { Sketch} from '@ans1998/vue3-color'
|
||||
import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
||||
import DesignDetailEnd from './DesignDetailEnd.vue';
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
components:{
|
||||
@@ -318,6 +319,7 @@ export default defineComponent({
|
||||
})
|
||||
let workspace = ref({})
|
||||
|
||||
let {t} = useI18n()
|
||||
return{
|
||||
store,
|
||||
current,
|
||||
@@ -339,6 +341,7 @@ export default defineComponent({
|
||||
selectColor,
|
||||
selectColorList,
|
||||
workspace,
|
||||
t,
|
||||
}
|
||||
},
|
||||
|
||||
@@ -360,8 +363,6 @@ export default defineComponent({
|
||||
spin: true,
|
||||
}),
|
||||
designShowPrview:1, //展示图片预览步骤
|
||||
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
||||
|
||||
//颜色
|
||||
reviewColor:{}, //预览的颜色
|
||||
colorPickerVisible: true,
|
||||
@@ -476,7 +477,7 @@ export default defineComponent({
|
||||
// return `rgb(${r}, ${g}, ${b})`;
|
||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||
} catch (e) {
|
||||
message.error("Your browser does not support it")
|
||||
message.error(this.t('DesignDetailAlter.jsContent1'))
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -555,7 +556,7 @@ export default defineComponent({
|
||||
(v) => v.status === "done"
|
||||
);
|
||||
if (this.uploadList.length >= 8) {
|
||||
message.warning("You can select up to 8 images");
|
||||
message.warning(this.t('DesignDetailAlter.jsContent2'));
|
||||
} else {
|
||||
// this.store.commit("setSketchboardFile", fileList);
|
||||
this.uploadList = fileList
|
||||
@@ -576,7 +577,7 @@ export default defineComponent({
|
||||
if (index > -1) {
|
||||
this.uploadList.splice(index, 1);
|
||||
}
|
||||
message.warning(file.name + "upload failed");
|
||||
message.warning(file.name + this.t('DesignDetailAlter.jsContent3'));
|
||||
}
|
||||
|
||||
},
|
||||
@@ -699,11 +700,11 @@ export default defineComponent({
|
||||
beforeUpload(file){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.warning('You can only upload Image file!');
|
||||
message.warning(this.t('DesignDetailAlter.jsContent4'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 5MB!');
|
||||
message.warning(this.t('DesignDetailAlter.jsContent5'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
@@ -786,7 +787,7 @@ export default defineComponent({
|
||||
this.setColorboardList(colorList)
|
||||
this.getColorBg = true
|
||||
}else{
|
||||
message.warning("Can't find the TCX color")
|
||||
message.warning(this.t('DesignDetailAlter.jsContent6'))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
|
||||
<div class="upload_title result_apparel" v-show="type_ == 1">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>New Apparel</span>
|
||||
<span>{{ $t('DesignDetailEnd.NewApparel') }}</span>
|
||||
</div>
|
||||
<div v-show="type_ == 2" class="result_print">
|
||||
<div>
|
||||
<div class="upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>New Print</span>
|
||||
<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
|
||||
</div>
|
||||
<div class="print_left">
|
||||
<!-- <img :src="current.path" :title="current.type"> -->
|
||||
@@ -27,7 +27,7 @@
|
||||
<div>
|
||||
<div class="upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>Placement</span>
|
||||
<span>{{ $t('DesignDetailEnd.Placement') }}</span>
|
||||
</div>
|
||||
<div class="print_right">
|
||||
<div class="habit_Overal_Single">
|
||||
@@ -35,14 +35,14 @@
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !overallSingle }"
|
||||
>
|
||||
Overall
|
||||
{{ $t('DesignDetailEnd.Overall') }}
|
||||
</div>
|
||||
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: overallSingle }"
|
||||
>
|
||||
Single
|
||||
{{ $t('DesignDetailEnd.Single') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-show="!overallSingle" class="habit_System_Designer">
|
||||
@@ -68,7 +68,7 @@
|
||||
<div v-show="type_ == 3">
|
||||
<div class="result_color upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>New Color</span>
|
||||
<span>{{ $t('DesignDetailEnd.NewColor') }}</span>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
||||
@@ -84,9 +84,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
|
||||
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
|
||||
<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
|
||||
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
|
||||
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
|
||||
<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
@@ -102,6 +102,7 @@ import { useStore } from "vuex";
|
||||
import { Sketch} from '@ans1998/vue3-color'
|
||||
import DesignPrintOperation from './DesignPrintOperation.vue';
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
@@ -123,6 +124,8 @@ export default defineComponent({
|
||||
|
||||
//加载中
|
||||
let loadingShow = ref(false)
|
||||
|
||||
let {t} = useI18n()
|
||||
return{
|
||||
store,
|
||||
current,
|
||||
@@ -133,6 +136,7 @@ export default defineComponent({
|
||||
systemDesignerPercentage,
|
||||
colorList,
|
||||
loadingShow,
|
||||
t,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -175,7 +179,7 @@ export default defineComponent({
|
||||
let DesignPrintOperation = this.$refs.DesignPrintOperation
|
||||
DesignPrintOperation.init()
|
||||
}else{
|
||||
message.warning('Please select print');
|
||||
message.warning(this.t('DesignDetailEnd.jsContent1'));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
>
|
||||
<div class="designOpenrtion_content">
|
||||
<div class="design_title_text">
|
||||
<div>Placement</div>
|
||||
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
@@ -25,14 +25,14 @@
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !overallSingle }"
|
||||
>
|
||||
Overall
|
||||
{{ $t('DesignPrintOperation.Overall') }}
|
||||
</div>
|
||||
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: overallSingle }"
|
||||
>
|
||||
Single
|
||||
{{ $t('DesignPrintOperation.Single') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!overallSingle" class="habit_System_Designer">
|
||||
@@ -43,9 +43,9 @@
|
||||
>
|
||||
</a-slider>
|
||||
</div>
|
||||
<div v-show="overallSingle" @click="random" class="button_second">Random</div>
|
||||
<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
|
||||
<div v-show="overallSingle" class="print_input">
|
||||
<input class="search_input" placeholder="Please input" type="Number" v-model="printAmount" @input="setprintAmount">
|
||||
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
|
||||
<i class="fi fi-rr-trash" @click="deletePrint"></i>
|
||||
</div>
|
||||
<div class="designOpenrtion_nav">
|
||||
@@ -56,7 +56,7 @@
|
||||
<img :src="designOpenrtionList[0].path">
|
||||
</div>
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">preview</div>
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||
@@ -107,6 +107,7 @@ import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
@@ -151,6 +152,8 @@ export default defineComponent({
|
||||
height:''
|
||||
})
|
||||
let loadingShow = ref(false)
|
||||
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
designOpenrtion,
|
||||
designOpenrtionList,
|
||||
@@ -166,7 +169,8 @@ export default defineComponent({
|
||||
print,
|
||||
sketch,
|
||||
loadingShow,
|
||||
setRevocation
|
||||
setRevocation,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -674,7 +678,7 @@ export default defineComponent({
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'The above changes are not saved, being sure to continue? ',
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
|
||||
@@ -1,900 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal class="element_replace_modal"
|
||||
v-model:visible="elementReplaceShow"
|
||||
:footer="null"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
|
||||
<div class="element_replace_content">
|
||||
<div class="element_replace_content_left">
|
||||
<div class="content_left_block">
|
||||
<div class="content_left_block_header">New {{swtich_type}}</div>
|
||||
<div class="content_left_block_body">
|
||||
<div class="content_body_img_block">
|
||||
<img class="element_img" :src="clothesData?.path">
|
||||
<div class="upload_block">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
:data="{
|
||||
...upload,
|
||||
level1Type:clothesData?.level1Type
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
:before-upload="beforeUpload"
|
||||
:maxCount="1"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file,'top')"
|
||||
:showUploadList="false"
|
||||
>
|
||||
<div class="upload_icon_block">
|
||||
<span class="icon iconfont icon-tianjiatupian_huaban"></span>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="operate_file_block">
|
||||
<div class="select_category" @click.stop="showNewTopOperate()">
|
||||
{{clothesData?.type}}
|
||||
<div :class="['icon','iconfont', 'icon-xiala', newTopOperateShow?'icon_rotate':'']"></div>
|
||||
</div>
|
||||
<div class="category_list" v-show="newTopOperateShow">
|
||||
<div :class="['category_item', clothesData?.type == cate.value?'select_category_item':'']" v-for="(cate,index) in sketchCatecoryList" :key="index" @click="selectNewTopOperate(cate)">{{cate.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content_left_block">
|
||||
<div class="content_left_block_header">
|
||||
<div>New Print</div>
|
||||
<div class="placement_button" @click="placementClick()" v-show="clothesData?.printObject?.path && clothesData?.printObject?.path != 'none'">Placement</div>
|
||||
</div>
|
||||
<div class="content_left_block_body">
|
||||
<div class="content_body_img_block">
|
||||
<img class="element_img print_element_img" :src="clothesData?.printObject?.path" v-if="clothesData?.printObject?.path && clothesData?.printObject?.path != 'none'">
|
||||
<img class="element_null_img" src="@/assets/images/homePage/null_img.png" v-else />
|
||||
<div class="upload_block">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
:data="{
|
||||
...upload,
|
||||
level1Type:clothesData?.printObject?.level1Type || Printboard
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
:before-upload="beforeUpload"
|
||||
:maxCount="1"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file,'print')"
|
||||
:showUploadList="false"
|
||||
>
|
||||
<div class="upload_icon_block">
|
||||
<span class="icon iconfont icon-tianjiatupian_huaban"></span>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="delete_file_block" @click="deletePrintFile()">
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content_left_block">
|
||||
<div class="content_left_block_header content_color_block_header">Edit Color</div>
|
||||
<div class="content_left_block_body content_color_block_body">
|
||||
<div class="review_color_block" :style="{background:`rgb(${modifyColor.r},${modifyColor.g},${modifyColor.b})`}"></div>
|
||||
<div class="setting_color_block">
|
||||
<div class="setting_color_content">
|
||||
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
|
||||
<Slider class="sileder_color" v-model="selectColor"></Slider>
|
||||
</div>
|
||||
<div class="color_rgb_block">
|
||||
<div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
|
||||
<div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
|
||||
<div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit_button" @click="submitElement()">Submit</div>
|
||||
</div>
|
||||
|
||||
<div class="element_replace_content_right">
|
||||
<div class="content_right_header"><div class="content_right_header_content">Select from library</div></div>
|
||||
|
||||
<div class="content_right_search_block">
|
||||
<input class="search_input" placeholder="Search by your style code" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
|
||||
<div class="content_right_table_block">
|
||||
<div class="table_block_header">
|
||||
<div class="table_block_header_left">
|
||||
<div v-show="['Outwear','Dress','Blouse'].indexOf(clothesData.type) > -1" @click="select_type('Top')" :class="['switch_type_item', swtich_type === 'Top' ? 'select_swtich' : '']">
|
||||
<span>Top</span>
|
||||
</div>
|
||||
<div v-show="['Skirt','Trousers'].indexOf(clothesData.type) > -1" @click="select_type('Bottom')" :class="['switch_type_item', swtich_type === 'Bottom' ? 'select_swtich' : '']">
|
||||
<span>Bottom</span>
|
||||
</div>
|
||||
<div @click="select_type('Print')" :class="['switch_type_item', swtich_type === 'Print' ? 'select_swtich' : '']">
|
||||
<span>Print</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table_header_select_block select_block" v-show="swtich_type != 'Print'">
|
||||
<a-select
|
||||
ref="select"
|
||||
placeholder="All"
|
||||
v-model:value="designType"
|
||||
:allowClear="true"
|
||||
:options="disignTypeList"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table_img_list scroll_style">
|
||||
<div class="table_img_item_block" v-for="img in imgList" :key="img" @click="selectImgItem(img)">
|
||||
<div class="img_item_block">
|
||||
<img :class="[swtich_type === 'Print'?'print_img_body':'img_item_body']" v-lazy="img.url" :key="img.url">
|
||||
</div>
|
||||
<div class="img_item_name">{{img.name}}</div>
|
||||
</div>
|
||||
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
|
||||
<img src="@/assets/images/homePage/null_img.png">
|
||||
</div>
|
||||
<div class="no_data_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table_pagination" v-show="imgList.length">
|
||||
<a-pagination
|
||||
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
:showQuickJumper="true"
|
||||
:showSizeChanger="false"
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-modal>
|
||||
<PlacementModal ref="PlacementModal" @submitPlacement="submitPlacement"></PlacementModal>
|
||||
<PlacementModalMobile ref="PlacementModalMobile" @submitPlacement="submitPlacement"></PlacementModalMobile>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref } from 'vue'
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl,isMoible} from '@/tool/util'
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import { Chrome,Slider } from '@ans1998/vue3-color'
|
||||
import PlacementModal from '@/component/Detail/PlacementModal.vue'
|
||||
import PlacementModalMobile from '@/component/Detail/PlacementModalMobile.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components:{Chrome,Slider,PlacementModal,PlacementModalMobile},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
|
||||
let clothesData:any = ref({})
|
||||
let disignTypeList:any = ref([])
|
||||
return {
|
||||
store,
|
||||
selectColor,
|
||||
clothesData,
|
||||
disignTypeList
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
elementReplaceShow:false,
|
||||
newTopOperateShow:false,
|
||||
sketchCatecoryList:[
|
||||
{
|
||||
value: 'Outwear',
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: 'Blouse',
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: 'Dress',
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: 'Trousers',
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: 'Skirt',
|
||||
label: "Skirt",
|
||||
},
|
||||
],
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Moodboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
modifyColor:{r:255,g:255,b:255},
|
||||
designType:null,
|
||||
swtich_type:'Top',
|
||||
imgList:[], //图片列表
|
||||
currentPage:1, //当前页码
|
||||
pageSize:20,
|
||||
total:0,//图片总数
|
||||
clothesIndex:0, //该元素在列表中的索引
|
||||
isShowLoading:false,
|
||||
searchPictureName:'',//搜索图片的名称
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
selectColor(newVal:any,oldVal:any){
|
||||
this.modifyColor = newVal.rgba || {}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getSelectRGB(selectColor){
|
||||
return (selectColor:any)=>{
|
||||
let rgba = selectColor.rgba
|
||||
let data = {
|
||||
r:rgba?.r || 255,
|
||||
g:rgba?.g || 255,
|
||||
b:rgba?.b || 255
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
select_type(type:string){
|
||||
this.imgList = []
|
||||
this.currentPage = 1
|
||||
this.searchPictureName = ''
|
||||
this.designType = null
|
||||
this.swtich_type = type
|
||||
this.getLibraryList()
|
||||
},
|
||||
showNewTopOperate(){
|
||||
this.newTopOperateShow = !this.newTopOperateShow
|
||||
document.addEventListener('click', this.hiddenNewTopOperate)
|
||||
},
|
||||
|
||||
selectNewTopOperate(cate:any){
|
||||
this.clothesData.type = cate.value
|
||||
},
|
||||
|
||||
hiddenNewTopOperate(){
|
||||
this.newTopOperateShow = false
|
||||
document.removeEventListener('click', this.hiddenNewTopOperate)
|
||||
},
|
||||
|
||||
fileUploadChange(data:any,type:any){
|
||||
let file = data.file
|
||||
if(file.status === 'done'){
|
||||
let res = JSON.parse(file.xhr.response)
|
||||
if(type === 'top'){
|
||||
this.clothesData.path = res.data.url
|
||||
this.clothesData.type = 'Outwear'
|
||||
}else if(type === 'print'){
|
||||
this.clothesData.printObject.path = res.data.url
|
||||
this.clothesData.printObject.location = []
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.warning('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 2MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
|
||||
//改变页码
|
||||
changePage(current: number, pageSize: number){
|
||||
this.currentPage = current
|
||||
this.pageSize = pageSize
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
handleChange(){
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
showelementReplaceModal(data:any){
|
||||
this.clothesData = JSON.parse(JSON.stringify(data.clothes))
|
||||
this.clothesIndex = data.index
|
||||
this.elementReplaceShow = true
|
||||
let color = this.clothesData.color.split(' ')
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2]}}
|
||||
let topList = ['Outwear','Dress','Blouse']
|
||||
if(topList.indexOf(this.clothesData.type) > -1){
|
||||
this.swtich_type = 'Top'
|
||||
this.disignTypeList = [{
|
||||
value: "Outwear",
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: "Blouse",
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: "Dress",
|
||||
label: "Dress",
|
||||
}]
|
||||
}else{
|
||||
this.swtich_type = 'Bottom'
|
||||
this.disignTypeList = [{
|
||||
value: "Trousers",
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: "Skirt",
|
||||
label: "Skirt",
|
||||
},]
|
||||
}
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
//关闭弹窗
|
||||
closeModal(){
|
||||
this.elementReplaceShow = false
|
||||
this.swtich_type = 'Top'
|
||||
this.clothesData = {}
|
||||
this.clothesIndex = 0
|
||||
},
|
||||
|
||||
//提交元素
|
||||
submitElement(){
|
||||
this.clothesData.color = `${this.modifyColor.r} ${this.modifyColor.g} ${this.modifyColor.b}`
|
||||
let data = {
|
||||
clothes:this.clothesData,
|
||||
index:this.clothesIndex
|
||||
}
|
||||
this.store.commit('setDesignItemColthes',data)
|
||||
this.closeModal()
|
||||
},
|
||||
|
||||
//删除print的图片
|
||||
deletePrintFile(){
|
||||
this.clothesData.printObject.path = ''
|
||||
},
|
||||
|
||||
placementClick(){
|
||||
let placementModal:any = isMoible() ? this.$refs.PlacementModalMobile : this.$refs.PlacementModal
|
||||
let data = {
|
||||
clothesData:this.clothesData,
|
||||
index:this.clothesIndex
|
||||
}
|
||||
placementModal.showPlacementModal(data)
|
||||
},
|
||||
|
||||
|
||||
//placement提交
|
||||
submitPlacement(e:any){
|
||||
this.clothesData.printObject = e
|
||||
},
|
||||
|
||||
getLibraryList(){
|
||||
let data = {
|
||||
level2Type:this.designType,
|
||||
page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize,
|
||||
type:this.swtich_type
|
||||
}
|
||||
this.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryTopAndBottomPage,data).then(
|
||||
(rv: any) => {
|
||||
this.imgList = rv.content
|
||||
this.total = rv.total
|
||||
this.isShowLoading = false
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.isShowLoading = false
|
||||
});
|
||||
},
|
||||
|
||||
//选择库里的图片
|
||||
selectImgItem(img:any){
|
||||
if(this.swtich_type != 'Print'){
|
||||
this.clothesData.path = img.url
|
||||
}else{
|
||||
this.clothesData.printObject.path = img.url
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.element_replace_modal{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
height: 80vh;
|
||||
min-height: 72rem;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.close_icon{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
line-height: 3.6rem;
|
||||
text-align: center;
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.element_replace_content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1.5rem 1rem 2rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.element_replace_content_left{
|
||||
width: 36.4rem;
|
||||
height: 100%;
|
||||
|
||||
.content_left_block{
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.content_left_block_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 5rem;
|
||||
font-size: 1.6rem;
|
||||
color: #030303;
|
||||
|
||||
&.content_color_block_header{
|
||||
height: 3.7rem;
|
||||
}
|
||||
|
||||
.placement_button{
|
||||
padding: 0 0.9rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
background: #E6E6F6;
|
||||
font-size: 1.2rem;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content_left_block_body{
|
||||
width: 100%;
|
||||
|
||||
&.content_color_block_body{
|
||||
padding:0 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content_body_img_block{
|
||||
width: 20rem;
|
||||
height: 15.8rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F5F5F5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin:0 auto;
|
||||
position: relative;
|
||||
|
||||
|
||||
.element_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&.print_element_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.element_null_img{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.operate_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.select_category{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon-xiala{
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_rotate{
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
animation-direction: 0.5s;
|
||||
}
|
||||
|
||||
.category_list{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 3.3rem;
|
||||
left: 0;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #000000;
|
||||
box-shadow: 0 0.4rem 0.4rem 0 rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
color: #4D4D4D;
|
||||
|
||||
.category_item{
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
height: 3.5rem;
|
||||
line-height:3.5rem;
|
||||
|
||||
&.select_category_item{
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: #F7F7F7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_block{
|
||||
display: none;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: 1.1rem;
|
||||
right: 0.9rem;
|
||||
border-radius: 50%;
|
||||
|
||||
.upload_icon_block{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-tianjiatupian_huaban{
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 1.1rem;
|
||||
right: 5.5rem;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-shanchu{
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .delete_file_block, &:hover .operate_file_block, &:hover .upload_block{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.review_color_block{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #343579;
|
||||
}
|
||||
|
||||
.setting_color_block{
|
||||
|
||||
.setting_color_content{
|
||||
|
||||
.vc-chrome-body{
|
||||
display: none;
|
||||
}
|
||||
.chrome_color{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-chrome-saturation-wrap{
|
||||
height: 100%;
|
||||
}
|
||||
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
.sileder_color{
|
||||
width: 1.6rem;
|
||||
|
||||
.vc-slider-swatches{
|
||||
display:none
|
||||
}
|
||||
.vc-slider-hue-warp {
|
||||
width: 11.5rem;
|
||||
height: 1.6rem;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-hue-picker{
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(-0.6rem, -0.4rem);
|
||||
|
||||
}
|
||||
}
|
||||
.vc-hue-pointer{
|
||||
top: 0.5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.color_rgb_block{
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.4rem;
|
||||
color: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit_button{
|
||||
width: 9.8rem;
|
||||
height: 3.6rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
font-size: 1.4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #FFFFFF;
|
||||
margin: 1.8rem auto 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.element_replace_content_right{
|
||||
width: calc(100% - 37rem);
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.content_right_header{
|
||||
padding: 1.8rem 2.2rem 2.2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #030303;
|
||||
|
||||
.content_right_header_content{
|
||||
height: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content_right_search_block{
|
||||
padding: 0 2.2rem;
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 50.3rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.6rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 7.2rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content_right_table_block{
|
||||
height: calc(100% - 10.5rem);
|
||||
|
||||
.table_block_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1.7rem 1.7rem 0 2.3rem;
|
||||
border-bottom: 0.1rem solid #EBEBEC;
|
||||
|
||||
.table_block_header_left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
height: 4.2rem;
|
||||
width: 6rem;
|
||||
text-align: center;
|
||||
line-height: 4.2rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 3rem;
|
||||
border-bottom: 0.2rem solid transparent;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
border-bottom: 0.2rem solid #343579;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.select_block {
|
||||
|
||||
.ant-select-selector{
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
.icon-xiala{
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table_img_list{
|
||||
padding: 2rem 0 0 2.3rem;
|
||||
height: calc(100% - 13rem);
|
||||
overflow-y: auto;
|
||||
|
||||
.table_img_item_block{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin:0 1.6rem 3rem 0;
|
||||
cursor: pointer;
|
||||
|
||||
.img_item_block{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 0.1rem solid #343579;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.print_img_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img_item_body{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img_item_name{
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.4rem;
|
||||
color: #343579;
|
||||
text-align: center;
|
||||
width: 16.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no_data_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.table_pagination{
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,565 +0,0 @@
|
||||
<template>
|
||||
<div v-show="placementShow">
|
||||
<a-modal class="placement_modal_component"
|
||||
v-model:visible="placementShow"
|
||||
:footer="null"
|
||||
width="111.5rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
<div class="placement_modal_body" >
|
||||
<div class="palcement_modal_header">
|
||||
<div class="placement_modal_title">Placement</div>
|
||||
<div class="placement_operate_list">
|
||||
<div class="operate_item" @click="submitPlacement">
|
||||
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
||||
<div class="operate_item_des">Submit</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="printPreview">
|
||||
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
||||
<div class="operate_item_des">Preview</div>
|
||||
</div>
|
||||
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
||||
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
||||
<div class="operate_item_des">Back</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="restoreLocationList">
|
||||
<div class="icon iconfont icon-huifu operate_icon"></div>
|
||||
<div class="operate_item_des">Restore</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placement_modal_content">
|
||||
<div class="placement_content_operate_list">
|
||||
<!-- <div class="placement_content_operate_item" @click="overallClick()">
|
||||
<div class="placement_overall_icon">
|
||||
<div class="placement_overall_content" v-show="!printObject.ifSingle"></div>
|
||||
</div>
|
||||
<div class="placement_content_operate_des">Overall</div>
|
||||
</div> -->
|
||||
|
||||
<div class="placement_content_operate_item">
|
||||
<div class="print_scale_value">{{placement_sacle}}%</div>
|
||||
<a-slider
|
||||
id="placement_silder"
|
||||
:tooltipVisible="false"
|
||||
v-model:value="placement_sacle"
|
||||
:min="30"
|
||||
:max="300"
|
||||
/>
|
||||
<div class="placement_content_operate_des">Print Scale</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="placement_content_operate_item" @mousedown="AddDian()" v-show="!perviewUrl">
|
||||
<div class="placement_add_point_block">
|
||||
<div class="placement_add_point_content"></div>
|
||||
</div>
|
||||
<div class="placement_content_operate_des" >Add Point</div>
|
||||
</div>
|
||||
|
||||
<div class="placement_content_operate_item" @click="changeRemoveStatus" v-show="!perviewUrl">
|
||||
<div class="placement_remove_point_block"></div>
|
||||
<div class="placement_content_operate_des">Remove Point</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="img_preview_block" >
|
||||
<div class="perview_mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
|
||||
<img class="placement_img" v-lazy="perviewUrl || clothesData?.path" :key="perviewUrl || clothesData?.path">
|
||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px'}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
|
||||
<div class="placement_add_point_content" v-show="!isRemoveStatus"></div>
|
||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let oldLocationList:any = ref([])
|
||||
let locationList:any = ref([])
|
||||
let printObject:any = ref({})
|
||||
let imgBox:any = ref({})
|
||||
let intObj:any = ref(null)
|
||||
let currentSign:any = ref({})
|
||||
let clothesData:any = ref({})
|
||||
return {
|
||||
store,
|
||||
oldLocationList,
|
||||
locationList,
|
||||
printObject,
|
||||
imgBox,
|
||||
intObj,
|
||||
currentSign,
|
||||
clothesData
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
placementShow:false,
|
||||
collectionIndex:0,
|
||||
startDian:false,
|
||||
moveOriginal:{posX: 0, posY: 0},
|
||||
isRemoveStatus:false,
|
||||
placement_sacle:30,
|
||||
perviewUrl:'',//预览的图片地址
|
||||
isShowMark:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatter(value:number){
|
||||
return `${value}%`;
|
||||
},
|
||||
|
||||
showPlacementModal(data:any){
|
||||
this.clothesData = JSON.parse(JSON.stringify(data.clothesData))
|
||||
this.printObject = this.clothesData.printObject
|
||||
this.collectionIndex = data.index
|
||||
this.placement_sacle = this.printObject.scale ? this.printObject.scale * 100 : 30
|
||||
this.placementShow = true
|
||||
setTimeout(()=>{
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let position = imgbox.getBoundingClientRect()
|
||||
this.imgBox = {
|
||||
width:imgbox.clientWidth,
|
||||
height:imgbox.scrollHeight,
|
||||
left : position.left,
|
||||
top:position.top,
|
||||
scrollTop:imgbox.scrollTop || 0,
|
||||
}
|
||||
this.getLocationList(this.imgBox)
|
||||
},500)
|
||||
},
|
||||
|
||||
getLocationList(imgBox:any){
|
||||
if(this.printObject.location){
|
||||
this.locationList = this.printObject.location.map((v:any)=>{
|
||||
let data = {
|
||||
left:(v[0] * imgBox.width) - 12,
|
||||
top:(v[1] * imgBox.height) -12
|
||||
}
|
||||
return data
|
||||
})
|
||||
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
}
|
||||
},
|
||||
|
||||
overallClick(){
|
||||
this.printObject.ifSingle = !this.printObject.ifSingle
|
||||
},
|
||||
|
||||
AddDian(){
|
||||
this.startDian = true
|
||||
this.isRemoveStatus = false
|
||||
this.intObj = true
|
||||
},
|
||||
|
||||
changeRemoveStatus(){
|
||||
this.isRemoveStatus = true
|
||||
},
|
||||
|
||||
startMove(event:any){
|
||||
if(this.isRemoveStatus){
|
||||
return
|
||||
}
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let scrollTop = imgbox.scrollTop;
|
||||
if(this.intObj){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
|
||||
this.locationList.push(this.currentSign)
|
||||
this.printObject.ifSingle = true
|
||||
this.intObj = null
|
||||
}else{
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
|
||||
document.addEventListener('mouseup', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 在边界上的签名域处理
|
||||
setBoundarySign() {
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let height = imgbox.offsetHeight + imgbox.scrollTop;
|
||||
// 2 为签名域的边框
|
||||
let maxPosHeight = height - 24
|
||||
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top <= 0) {
|
||||
this.currentSign.top = 0
|
||||
} else if (this.currentSign.top >= maxPosHeight ) {
|
||||
this.currentSign.top = maxPosHeight;
|
||||
}
|
||||
if (this.currentSign.left <= 0) {
|
||||
this.currentSign.left = 0
|
||||
} else if (this.currentSign.left >= maxPosWidth) {
|
||||
this.currentSign.left = maxPosWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getMouseDown(event:any,item:any,index:number){
|
||||
if(this.isRemoveStatus){
|
||||
this.locationList.splice(index,1)
|
||||
}else{
|
||||
this.currentSign = item
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
this.moveOriginal.posX = event.offsetX
|
||||
this.moveOriginal.posY = event.offsetY // 1为边框
|
||||
this.startDian = true
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getMouseOver(){
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('mouseup', this.getMouseOver);
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
this.oldLocationList = []
|
||||
this.locationList = []
|
||||
this.printObject = {}
|
||||
this.intObj = null
|
||||
this.currentSign = {}
|
||||
this.isRemoveStatus = false
|
||||
this.placementShow = false
|
||||
this.perviewUrl = ''
|
||||
},
|
||||
|
||||
restoreLocationList(){
|
||||
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
|
||||
},
|
||||
|
||||
submitPlacement(){
|
||||
this.printObject.scale = this.placement_sacle / 100
|
||||
this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() : []
|
||||
this.$emit('submitPlacement',this.printObject)
|
||||
this.closeModal()
|
||||
|
||||
},
|
||||
|
||||
getPrintLocation(){
|
||||
let {width , height} = this.imgBox
|
||||
let location = this.locationList.map((v:any)=>{
|
||||
let left = ((v.left + 12) / width).toFixed(4)
|
||||
let top = ((v.top + 12) / height).toFixed(4)
|
||||
let data = [left,top]
|
||||
return data
|
||||
})
|
||||
return location
|
||||
},
|
||||
|
||||
printPreview(){
|
||||
this.printObject.scale = this.placement_sacle / 100
|
||||
this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() : []
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
designItemDetail.clothes[this.collectionIndex] = this.clothesData
|
||||
delete designItemDetail.designItemUrl
|
||||
let priority = designItemDetail.clothes.map((v:any)=>{
|
||||
return v.type
|
||||
})
|
||||
let data = {
|
||||
...designItemDetail,
|
||||
priority:priority,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
if(this.isShowMark){
|
||||
return
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.detailPrintDot, data).then(
|
||||
(rv: any) => {
|
||||
this.perviewUrl = rv
|
||||
this.isShowMark = false
|
||||
}
|
||||
).catch(res=>{
|
||||
this.isShowMark = false
|
||||
});
|
||||
},
|
||||
|
||||
backPreview(){
|
||||
this.perviewUrl = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.placement_modal_component{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
min-height: 72rem;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.close_icon{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
line-height: 3.6rem;
|
||||
text-align: center;
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_modal_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.palcement_modal_header{
|
||||
position: relative;
|
||||
height: 6.6rem;
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
|
||||
.placement_modal_title{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
line-height: 6.6rem;
|
||||
left: 3.7rem;
|
||||
top: 0;
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
}
|
||||
.placement_operate_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 100%;
|
||||
|
||||
.operate_item{
|
||||
margin-right: 4rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.operate_icon{
|
||||
font-size: 2.1rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.operate_item_des{
|
||||
height: 1.2rem;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placement_modal_content{
|
||||
position: relative;
|
||||
height: calc(100% - 6.6rem);
|
||||
width: 100%;
|
||||
padding: 1.1rem 0;
|
||||
|
||||
.placement_content_operate_list{
|
||||
width: 9rem;
|
||||
background: #EBECF4;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top:6.8rem;
|
||||
|
||||
.placement_content_operate_item{
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.placement_overall_icon{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
padding: 0.3rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
margin: 0 auto 0.4rem;
|
||||
|
||||
.placement_overall_content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_content_operate_des{
|
||||
width: 100%;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
-moz-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
|
||||
.print_scale_value{
|
||||
height: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.ant-tooltip-placement-top{
|
||||
top: -37px !important;
|
||||
}
|
||||
|
||||
.ant-slider-track{
|
||||
background: #343579;
|
||||
}
|
||||
.ant-slider-handle{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.placement_add_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
position: relative;
|
||||
border: 2px solid #6E70FF;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.placement_remove_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border: 2px solid #000000;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img_preview_block{
|
||||
width: 40.8rem;
|
||||
background: #ffffff;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
position: relative;
|
||||
|
||||
.img_content_block{
|
||||
width: 40.8rem;
|
||||
height: 100%;
|
||||
max-height: 63.2rem;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
position: relative;
|
||||
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
}
|
||||
|
||||
.perview_mark_loading{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.placement_img{
|
||||
width: 100%;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
}
|
||||
|
||||
.ponit_click{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
border: 2px solid #6E70FF;
|
||||
border-radius: 50%;
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
cursor: pointer;
|
||||
|
||||
&.remove_point_click{
|
||||
border-color: transparent;
|
||||
background: #EF3C3C;
|
||||
}
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,570 +0,0 @@
|
||||
<template>
|
||||
<div v-show="placementShow">
|
||||
<a-modal class="placement_modal_mobile_component"
|
||||
v-model:visible="placementShow"
|
||||
:footer="null"
|
||||
width="111.5rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
<div class="placement_modal_body" >
|
||||
<div class="palcement_modal_header">
|
||||
<div class="placement_modal_title">Placement</div>
|
||||
<div class="placement_operate_list">
|
||||
<div class="operate_item" @click="submitPlacement">
|
||||
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
||||
<div class="operate_item_des">Submit</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="printPreview">
|
||||
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
||||
<div class="operate_item_des">Preview</div>
|
||||
</div>
|
||||
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
||||
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
||||
<div class="operate_item_des">Back</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="restoreLocationList">
|
||||
<div class="icon iconfont icon-huifu operate_icon"></div>
|
||||
<div class="operate_item_des">Restore</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placement_modal_content" @touchmove="startMove($event)">
|
||||
<div class="placement_content_operate_list">
|
||||
<!-- <div class="placement_content_operate_item" @click="overallClick()">
|
||||
<div class="placement_overall_icon">
|
||||
<div class="placement_overall_content" v-show="!printObject.ifSingle"></div>
|
||||
</div>
|
||||
<div class="placement_content_operate_des">Overall</div>
|
||||
</div> -->
|
||||
|
||||
<div class="placement_content_operate_item">
|
||||
<div class="print_scale_value">{{placement_sacle}}%</div>
|
||||
<a-slider
|
||||
id="placement_silder"
|
||||
:tooltipVisible="false"
|
||||
v-model:value="placement_sacle"
|
||||
:min="30"
|
||||
:max="300"
|
||||
/>
|
||||
<div class="placement_content_operate_des">Print Scale</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="placement_content_operate_item" @touchstart="AddDian()">
|
||||
<div class="placement_add_point_block">
|
||||
<div class="placement_add_point_content"></div>
|
||||
</div>
|
||||
<div class="placement_content_operate_des" >Add Point</div>
|
||||
</div>
|
||||
|
||||
<div class="placement_content_operate_item" @click="changeRemoveStatus">
|
||||
<div class="placement_remove_point_block"></div>
|
||||
<div class="placement_content_operate_des">Remove Point</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="img_preview_block" >
|
||||
<div class="perview_mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="img_content_block" ref="imgbox" @touchmove="startMove($event)">
|
||||
<img class="placement_img" v-lazy="perviewUrl || clothesData?.path" :key="perviewUrl || clothesData?.path">
|
||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px'}" @touchstart="getMouseDown($event,item,index)" @touchmove="startMove($event)">
|
||||
<div class="placement_add_point_content" v-show="!isRemoveStatus"></div>
|
||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let oldLocationList:any = ref([])
|
||||
let locationList:any = ref([])
|
||||
let printObject:any = ref({})
|
||||
let imgBox:any = ref({})
|
||||
let intObj:any = ref(null)
|
||||
let currentSign:any = ref({})
|
||||
let clothesData:any = ref({})
|
||||
return {
|
||||
store,
|
||||
oldLocationList,
|
||||
locationList,
|
||||
printObject,
|
||||
imgBox,
|
||||
intObj,
|
||||
currentSign,
|
||||
clothesData
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
placementShow:false,
|
||||
collectionIndex:0,
|
||||
startDian:false,
|
||||
moveOriginal:{posX: 0, posY: 0},
|
||||
isRemoveStatus:false,
|
||||
placement_sacle:30,
|
||||
isShowMark:false,
|
||||
perviewUrl:'',//预览的图片地址
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatter(value:number){
|
||||
return `${value}%`;
|
||||
},
|
||||
|
||||
showPlacementModal(data:any){
|
||||
this.clothesData = JSON.parse(JSON.stringify(data.clothesData))
|
||||
this.printObject = this.clothesData.printObject
|
||||
this.collectionIndex = data.index
|
||||
this.placement_sacle = this.printObject.scale ? this.printObject.scale * 100 : 30
|
||||
this.placementShow = true
|
||||
setTimeout(()=>{
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let position = imgbox.getBoundingClientRect()
|
||||
this.imgBox = {
|
||||
width:imgbox.clientWidth,
|
||||
height:imgbox.scrollHeight,
|
||||
left : position.left,
|
||||
top:position.top,
|
||||
scrollTop:imgbox.scrollTop || 0,
|
||||
}
|
||||
this.getLocationList(this.imgBox)
|
||||
},500)
|
||||
},
|
||||
|
||||
getLocationList(imgBox:any){
|
||||
if(this.printObject.location){
|
||||
this.locationList = this.printObject.location.map((v:any)=>{
|
||||
let data = {
|
||||
left:v[0] * imgBox.width,
|
||||
top:v[1] * imgBox.height
|
||||
}
|
||||
return data
|
||||
})
|
||||
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
}
|
||||
},
|
||||
|
||||
overallClick(){
|
||||
this.printObject.ifSingle = !this.printObject.ifSingle
|
||||
},
|
||||
|
||||
AddDian(){
|
||||
this.startDian = true
|
||||
this.isRemoveStatus = false
|
||||
this.intObj = true
|
||||
},
|
||||
|
||||
changeRemoveStatus(){
|
||||
this.isRemoveStatus = true
|
||||
},
|
||||
|
||||
startMove(event:any){
|
||||
if(this.isRemoveStatus){
|
||||
return
|
||||
}
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let scrollTop = imgbox.scrollTop;
|
||||
if(event.targetTouches[0].pageX > this.imgBox.left){
|
||||
if(this.intObj){
|
||||
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left
|
||||
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top
|
||||
this.locationList.push(this.currentSign)
|
||||
this.printObject.ifSingle = true
|
||||
this.intObj = null
|
||||
}else{
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left - this.moveOriginal.posX
|
||||
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -this.moveOriginal.posY
|
||||
document.addEventListener('touchend', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 在边界上的签名域处理
|
||||
setBoundarySign() {
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let height = imgbox.offsetHeight + imgbox.scrollTop;
|
||||
// 2 为签名域的边框
|
||||
let maxPosHeight = height - 24
|
||||
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top <= 0) {
|
||||
this.currentSign.top = 0
|
||||
} else if (this.currentSign.top >= maxPosHeight ) {
|
||||
this.currentSign.top = maxPosHeight;
|
||||
}
|
||||
if (this.currentSign.left <= 0) {
|
||||
this.currentSign.left = 0
|
||||
} else if (this.currentSign.left >= maxPosWidth) {
|
||||
this.currentSign.left = maxPosWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getMouseDown(event:any,item:any,index:number){
|
||||
if(this.isRemoveStatus){
|
||||
this.locationList.splice(index,1)
|
||||
}else{
|
||||
this.currentSign = item
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
|
||||
this.moveOriginal.posY = event.targetTouches[0].pageY - this.imgBox.top- this.currentSign.top // 1为边框
|
||||
this.startDian = true
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getMouseOver(){
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('touchend', this.getMouseOver);
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
this.oldLocationList = []
|
||||
this.locationList = []
|
||||
this.printObject = {}
|
||||
this.intObj = null
|
||||
this.currentSign = {}
|
||||
this.isRemoveStatus = false
|
||||
this.placementShow = false
|
||||
this.perviewUrl = ''
|
||||
},
|
||||
|
||||
restoreLocationList(){
|
||||
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
|
||||
},
|
||||
|
||||
submitPlacement(){
|
||||
this.printObject.scale = (this.placement_sacle / 100).toFixed(2)
|
||||
this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() :[]
|
||||
this.$emit('submitPlacement',this.printObject)
|
||||
this.closeModal()
|
||||
|
||||
},
|
||||
|
||||
getPrintLocation(){
|
||||
let {width , height} = this.imgBox
|
||||
let location = this.locationList.map((v:any)=>{
|
||||
let left = (v.left + 12) / width
|
||||
let top = (v.top + 12) / height
|
||||
let data = [left,top]
|
||||
return data
|
||||
})
|
||||
return location
|
||||
},
|
||||
|
||||
//preview打点图
|
||||
printPreview(){
|
||||
this.printObject.scale = this.placement_sacle / 100
|
||||
this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() :[]
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
designItemDetail.clothes[this.collectionIndex] = this.clothesData
|
||||
delete designItemDetail.designItemUrl
|
||||
let priority = designItemDetail.clothes.map((v:any)=>{
|
||||
return v.type
|
||||
})
|
||||
let data = {
|
||||
...designItemDetail,
|
||||
priority:priority,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
if(this.isShowMark){
|
||||
return
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.detailPrintDot, data).then(
|
||||
(rv: any) => {
|
||||
this.perviewUrl = rv
|
||||
this.isShowMark = false
|
||||
}
|
||||
).catch(res=>{
|
||||
this.isShowMark = false
|
||||
});
|
||||
},
|
||||
|
||||
backPreview(){
|
||||
this.perviewUrl = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.placement_modal_mobile_component{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
min-height: 72rem;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.close_icon{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
line-height: 3.6rem;
|
||||
text-align: center;
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_modal_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.palcement_modal_header{
|
||||
position: relative;
|
||||
height: 6.6rem;
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
|
||||
.placement_modal_title{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
line-height: 6.6rem;
|
||||
left: 3.7rem;
|
||||
top: 0;
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
}
|
||||
.placement_operate_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 100%;
|
||||
|
||||
.operate_item{
|
||||
margin-right: 4rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.operate_icon{
|
||||
font-size: 2.1rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.operate_item_des{
|
||||
height: 1.2rem;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placement_modal_content{
|
||||
position: relative;
|
||||
height: calc(100% - 6.6rem);
|
||||
width: 100%;
|
||||
padding: 1.1rem 0;
|
||||
|
||||
.placement_content_operate_list{
|
||||
width: 9rem;
|
||||
background: #EBECF4;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top:6.8rem;
|
||||
|
||||
.placement_content_operate_item{
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.placement_overall_icon{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
padding: 0.3rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
margin: 0 auto 0.4rem;
|
||||
|
||||
.placement_overall_content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_content_operate_des{
|
||||
width: 100%;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
-moz-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
|
||||
.print_scale_value{
|
||||
height: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.ant-tooltip-placement-top{
|
||||
top: -37px !important;
|
||||
}
|
||||
|
||||
.ant-slider-track{
|
||||
background: #343579;
|
||||
}
|
||||
.ant-slider-handle{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.placement_add_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
position: relative;
|
||||
border: 2px solid #6E70FF;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.placement_remove_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border: 2px solid #000000;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img_preview_block{
|
||||
width: 40.8rem;
|
||||
background: #ffffff;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
position: relative;
|
||||
|
||||
.img_content_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 63.2rem;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
position: relative;
|
||||
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
}
|
||||
|
||||
.perview_mark_loading{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.placement_img{
|
||||
width: 100%;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
}
|
||||
|
||||
.ponit_click{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
border: 2px solid #6E70FF;
|
||||
border-radius: 50%;
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
cursor: pointer;
|
||||
|
||||
&.remove_point_click{
|
||||
border-color: transparent;
|
||||
background: #EF3C3C;
|
||||
}
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -2,13 +2,13 @@
|
||||
<div class="habit">
|
||||
<div v-show="openType.habit" class="habit_mask"></div>
|
||||
<div class="habit_button" @click.stop="setOpenType('habit')" >
|
||||
Workspace
|
||||
{{ $t('Habit.Workspace') }}
|
||||
<i class="fi fi-bs-angle-down"></i>
|
||||
</div>
|
||||
<div class="habit_content" v-fade="openType.habit">
|
||||
<div class="habit_title">
|
||||
<h3>Workspace Setting</h3>
|
||||
<div class="habit_intro">adjust your workspace setting</div>
|
||||
<h3>{{ $t('Habit.WorkspaceSetting') }}</h3>
|
||||
<div class="habit_intro">{{ $t('Habit.settingWorkspace') }}</div>
|
||||
</div>
|
||||
<div class="habit_type" trigger="['click']" >
|
||||
<a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
|
||||
@@ -56,15 +56,14 @@
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !workspaceItem.overallSingle }"
|
||||
>
|
||||
Overall
|
||||
{{ $t('Habit.Overall') }}
|
||||
</div>
|
||||
<a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: workspaceItem.overallSingle }"
|
||||
>
|
||||
Single
|
||||
|
||||
{{ $t('Habit.Single') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="habit_habit_singleton" v-show="workspaceItem.overallSingle">
|
||||
@@ -91,8 +90,8 @@
|
||||
>
|
||||
</a-slider>
|
||||
<div class="habit_System_Designer_text_max">
|
||||
<div class="habit_System_Designer_text">System</div>
|
||||
<div class="habit_System_Designer_text">Designer</div>
|
||||
<div class="habit_System_Designer_text">{{ $t('Habit.System') }}</div>
|
||||
<div class="habit_System_Designer_text">{{ $t('Habit.Designer') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="habit_model">
|
||||
@@ -102,7 +101,7 @@
|
||||
>
|
||||
<a-button>
|
||||
<UserOutlined />
|
||||
Mannequin
|
||||
{{ $t('Habit.Mannequin') }}
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
@@ -110,7 +109,7 @@
|
||||
<div id="modelShow" class="habit_model_show" v-fade="openType.model">
|
||||
<div class="habit_btn">
|
||||
<div class="model_current">
|
||||
<div class="model_text">Current</div>
|
||||
<div class="model_text">{{ $t('Habit.Current') }}</div>
|
||||
<div class="model_img">
|
||||
<img :src="workspaceItem.mannequinUrl" alt="">
|
||||
</div>
|
||||
@@ -121,14 +120,14 @@
|
||||
class="habit_System_Seleves_text"
|
||||
:class="{ active: !systemSeleves }"
|
||||
>
|
||||
System
|
||||
{{ $t('Habit.System') }}
|
||||
</div>
|
||||
<a-switch :disabled="mannequins?.[0]==null?true:false" v-model:checked="systemSeleves" />
|
||||
<div
|
||||
class="habit_System_Seleves_text"
|
||||
:class="{ active: systemSeleves }"
|
||||
>
|
||||
User
|
||||
{{ $t('Habit.User') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="model_img" v-show="systemSeleves" v-mousewheel>
|
||||
@@ -144,11 +143,9 @@
|
||||
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,6 +158,7 @@ import { Https } from "@/tool/https";
|
||||
import type { MenuProps } from "ant-design-vue";
|
||||
import { Modal,message,Upload} from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
@@ -200,6 +198,7 @@ export default defineComponent({
|
||||
let sex = ref([
|
||||
|
||||
])
|
||||
const {t} = useI18n()
|
||||
|
||||
return{
|
||||
systemSeleves,
|
||||
@@ -209,7 +208,8 @@ export default defineComponent({
|
||||
workspaceItem,
|
||||
workspaceItemName,
|
||||
singleTypeList,
|
||||
sex
|
||||
sex,
|
||||
t
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
@@ -427,7 +427,7 @@ export default defineComponent({
|
||||
cancelDsign(index:any){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'Whether to delete the workspace?',
|
||||
title: _this.t('Habit.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
@@ -461,7 +461,7 @@ export default defineComponent({
|
||||
// this.deleteWorkspace(data)
|
||||
}else{
|
||||
if(this.workspaceItemName == ''){
|
||||
message.warning('Please enter a workbench name');
|
||||
message.warning(this.t('Habit.jsContent2'));
|
||||
}else{
|
||||
if(index == -1){
|
||||
let data = {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="colorboard_upload_modal">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>Thumbnail preview of selected moodboard</div>
|
||||
<div>{{ $t('ColorboardUpload.Thumbnail') }}</div>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
||||
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="started_btn" @click="clearCurrentColor">Clear</span>
|
||||
<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -19,7 +19,7 @@
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Palette</span>
|
||||
<span>{{ $t('ColorboardUpload.Palette') }}</span>
|
||||
</div>
|
||||
<div class="color_setting_block">
|
||||
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||
@@ -28,10 +28,10 @@
|
||||
<div class="color_block">
|
||||
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||
<div v-show="colorBlockHex">
|
||||
HEX
|
||||
{{ $t('ColorboardUpload.HEX') }}
|
||||
</div>
|
||||
<div v-show="!colorBlockHex">
|
||||
RGBA
|
||||
{{ $t('ColorboardUpload.RGBA') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_right">
|
||||
@@ -58,7 +58,7 @@
|
||||
<div class="right_content_line right_content_line_upload">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Auto Recognize</span>
|
||||
<span>{{ $t('ColorboardUpload.AutoRecognize') }}</span>
|
||||
</div>
|
||||
<div class="upload_centetn">
|
||||
<div class="upload_item">
|
||||
@@ -99,13 +99,13 @@
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Color Code</span>
|
||||
<span>{{ $t('ColorboardUpload.ColorCode') }}</span>
|
||||
</div>
|
||||
<div class="get_color_block">
|
||||
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
||||
<div class="get_color_button" @click="getTcxColor()">
|
||||
<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 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">
|
||||
@@ -127,6 +127,7 @@ import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import ColorThief from '@/tool/colorthief/colorthief'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Chrome,
|
||||
@@ -141,11 +142,14 @@ export default defineComponent({
|
||||
}) //顔色选择器默认颜色
|
||||
let selectColorList = ref({
|
||||
})
|
||||
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
fileList,
|
||||
colorList,
|
||||
selectColor,
|
||||
selectColorList,
|
||||
t,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
@@ -218,7 +222,7 @@ export default defineComponent({
|
||||
// return `rgb(${r}, ${g}, ${b})`;
|
||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||
} catch (e) {
|
||||
message.warning("Your browser does not support it")
|
||||
message.warning(this.t('ColorboardUpload.jsContent1'))
|
||||
}
|
||||
})
|
||||
// if ("EyeDropper" in window) {
|
||||
@@ -266,7 +270,7 @@ export default defineComponent({
|
||||
this.setColorboardList(colorList)
|
||||
this.getColorBg = true
|
||||
}else{
|
||||
message.warning("Can't find the TCX color")
|
||||
message.warning(this.t('ColorboardUpload.jsContent2'))
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -371,11 +375,11 @@ export default defineComponent({
|
||||
beforeUpload(file){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.warning('You can only upload Image file!');
|
||||
message.warning(this.t('ColorboardUpload.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 5MB!');
|
||||
message.warning(this.t('ColorboardUpload.jsContent4'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
@@ -10,11 +10,11 @@
|
||||
>
|
||||
<div class="collection_title">
|
||||
<div class="collection_title_text">
|
||||
<div>Cut picture</div>
|
||||
<div>{{ $t('Cropper.Cutpicture') }}</div>
|
||||
</div>
|
||||
<div class="header_right_block" @click.stop="">
|
||||
<div class="next_step_button" @click.stop="finishCropper()">Finish</div>
|
||||
<div class="header_cancel_button" @click.stop="cancleCropper()">Cancel</div>
|
||||
<div class="next_step_button" @click.stop="finishCropper()">{{ $t('Cropper.Finish') }}</div>
|
||||
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection_modal_body">
|
||||
@@ -45,7 +45,7 @@
|
||||
<div class="cut_picture_right">
|
||||
<div class="cur_picture_right_header">
|
||||
<div class="review_logo icon iconfont icon-yulan"></div>
|
||||
<div>Crop Preview</div>
|
||||
<div>{{ $t('Cropper.CropPreview') }}</div>
|
||||
</div>
|
||||
<div class="cut_picture_review_block">
|
||||
<div class="cut_picture_review_item">
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
v-model="checkbox[0].type"
|
||||
@click="setKeyword(0)"
|
||||
/>
|
||||
<span>Image Only</span>
|
||||
<span>{{ $t('Generate.ImageOnly') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@@ -18,7 +18,7 @@
|
||||
v-model="checkbox[1].type"
|
||||
@click="setKeyword(1)"
|
||||
/>
|
||||
<span>Text Only</span>
|
||||
<span>{{ $t('Generate.TextOnly') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@@ -28,14 +28,14 @@
|
||||
v-model="checkbox[2].type"
|
||||
@click="setKeyword(2)"
|
||||
/>
|
||||
<span>Text-Image</span>
|
||||
<span>{{ $t('Generate.TextImage') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="type_.type2 == 'Printboard'" class="printModel">
|
||||
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
||||
<ul v-show="printModel.optype">
|
||||
<li class="printModel_item" @click="setprintModel(1)">Model1</li>
|
||||
<li class="printModel_item" @click="setprintModel(2)">Model2</li>
|
||||
<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
|
||||
<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,13 +43,13 @@
|
||||
<input
|
||||
class="search_input"
|
||||
@input="ifMaximumLength"
|
||||
placeholder="Prompt input"
|
||||
:placeholder="$t('Generate.inputContent1')"
|
||||
:maxlength='inputShow?0:9999'
|
||||
v-model="searchPictureName"
|
||||
@keydown.enter="getgenerate()"
|
||||
/>
|
||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
||||
<span>The entered content exceeds the maximum length.</span>
|
||||
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
|
||||
<span>{{ $t('Generate.maximumLength') }}</span>
|
||||
|
||||
</div>
|
||||
<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 { getUploadUrl } from "@/tool/util";
|
||||
import { forEach } from "jszip";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
props: ["msg",'sketchCatecoryList'],
|
||||
setup() {
|
||||
@@ -230,6 +231,8 @@ export default defineComponent({
|
||||
let loadingShow = ref(false)
|
||||
let inputShow = ref(false)
|
||||
let inputTime = ref()
|
||||
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
imgList,
|
||||
selectImgList,
|
||||
@@ -255,6 +258,7 @@ export default defineComponent({
|
||||
workspace,
|
||||
inputShow,
|
||||
inputTime,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
@@ -320,11 +324,11 @@ export default defineComponent({
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.warning("You can only upload Image file!");
|
||||
message.warning(this.t('Generate.jsContent1'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning("Image must smaller than 2MB!");
|
||||
message.warning(this.t('Generate.jsContent2'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
@@ -364,7 +368,7 @@ export default defineComponent({
|
||||
getgenerate(){
|
||||
if(!this.searchPictureName){
|
||||
message.warning(
|
||||
"Please enter content"
|
||||
this.t('Generate.jsContent3')
|
||||
);
|
||||
return
|
||||
}
|
||||
@@ -372,13 +376,13 @@ export default defineComponent({
|
||||
let arr = this.searchPictureName.split(/\s+/).length
|
||||
if(arr > 75){
|
||||
message.warning(
|
||||
"The entered content exceeds the maximum length."
|
||||
this.t('Generate.jsContent4')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else{
|
||||
message.warning(
|
||||
"Please enter content"
|
||||
this.t('Generate.jsContent5')
|
||||
);
|
||||
return
|
||||
}
|
||||
@@ -444,7 +448,7 @@ export default defineComponent({
|
||||
);
|
||||
let arr = this.store.state.UploadFilesModule.sketchboard;
|
||||
if (arr.length >= 8) {
|
||||
message.warning("You can select up to 8 images");
|
||||
message.warning(this.t('Generate.jsContent6'));
|
||||
} else {
|
||||
this.sketchboardList = fileList
|
||||
}
|
||||
@@ -458,7 +462,7 @@ export default defineComponent({
|
||||
if (index > -1) {
|
||||
this.sketchboardList.splice(index, 1);
|
||||
}
|
||||
message.error(file.name + "upload failed");
|
||||
message.error(file.name + this.t('Generate.jsContent5'));
|
||||
}
|
||||
},
|
||||
showFileCategory(file: any) {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="header_user_icon"></div>
|
||||
<!-- <div class="header_icon icon iconfont icon-touxiang3"></div> -->
|
||||
<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
|
||||
:class="[
|
||||
'icon',
|
||||
@@ -27,7 +27,7 @@
|
||||
]"
|
||||
@click="turnToPage('home')"
|
||||
>
|
||||
HOME
|
||||
{{$t('Header.HOME')}}
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
@@ -36,7 +36,7 @@
|
||||
]"
|
||||
@click="turnToPage('library')"
|
||||
>
|
||||
LIBRARY
|
||||
{{$t('Header.LIBRARY')}}
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
@@ -45,7 +45,8 @@
|
||||
]"
|
||||
@click="turnToPage('history')"
|
||||
>
|
||||
HISTORY
|
||||
{{$t('Header.HISTORY')}}
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -60,12 +61,12 @@
|
||||
</div>
|
||||
</header>
|
||||
<nav class="select_block" v-show="isShowOperate">
|
||||
<!-- <div class="select_item" @click="showBindEmailModal()">
|
||||
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
|
||||
</div> -->
|
||||
<div class="select_item" @click="showBindEmailModal()">
|
||||
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">{{$t('Header.bindEmail')}}</span>
|
||||
</div>
|
||||
<div class="select_item" @click="logout()">
|
||||
<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>
|
||||
</nav>
|
||||
<a-modal
|
||||
@@ -78,17 +79,17 @@
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon v-if="!isHaveBindEmail && bindEmailStep === 1">
|
||||
<div class="skip_content">skip</div>
|
||||
<div class="skip_content">{{$t('Header.skip')}}</div>
|
||||
</template>
|
||||
<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>
|
||||
<div class="bind_email_content" v-else>
|
||||
<!-- 绑定邮箱第一步 start -->
|
||||
<div v-show="bindEmailStep === 1">
|
||||
<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
|
||||
class="bind_email_form_input"
|
||||
placeholder="Enter a new email"
|
||||
@@ -100,7 +101,7 @@
|
||||
class="bind_email_submit_button"
|
||||
@click="emailNextStepFun()"
|
||||
>
|
||||
Next step
|
||||
{{$t('Header.NextStep')}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 绑定邮箱第一步 end -->
|
||||
@@ -110,17 +111,17 @@
|
||||
<div @click="emailLastStepFun()">
|
||||
<span class="icon iconfont icon--shangyibu"></span
|
||||
><span class="email_last_step_content"
|
||||
>Enter verification code</span
|
||||
>{{$t('Header.verification')}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content">
|
||||
Sent to {{ email }}
|
||||
{{$t('Header.SentTo')}} {{ email }}
|
||||
</div>
|
||||
<div class="tip_content">
|
||||
<span v-show="time">{{ time }}s</span>
|
||||
<span v-show="!time" @click="emailNextStepFun()"
|
||||
>Resend</span
|
||||
>{{$t('Header.Resend')}}Resend</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,11 +144,18 @@ import Habit from "@/component/Detail/habit.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
Habit,
|
||||
},
|
||||
setup(){
|
||||
const {t} = useI18n()
|
||||
return {
|
||||
t
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowOperate: false,
|
||||
@@ -210,7 +218,7 @@ export default defineComponent({
|
||||
|
||||
emailNextStepFun() {
|
||||
if (!isEmail(this.email)) {
|
||||
message.warning("The email format is incorrect");
|
||||
message.warning(this.t('Header.jsContent1'));
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
@@ -225,7 +233,7 @@ export default defineComponent({
|
||||
(this.emailCode = ["", "", "", "", "", ""]),
|
||||
this.createTimer();
|
||||
hide();
|
||||
message.success("Succeeded in binding the mailbox.");
|
||||
message.success(this.t('Header.jsContent2'));
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
@@ -312,7 +320,7 @@ export default defineComponent({
|
||||
this.timer = setTimeout(() => {
|
||||
this.modalWarning = Modal.warning({
|
||||
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),
|
||||
okText: "Ok",
|
||||
onOk() {
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="collection_modal_item">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<span>Upload</span>
|
||||
<span>{{ $t('MarketingSketchUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
<span>{{ $t('MarketingSketchUpload.MyLibrary') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<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>
|
||||
|
||||
@@ -61,12 +61,15 @@ import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
components:{Material},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
fileList
|
||||
fileList,
|
||||
t,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -115,18 +118,18 @@ export default defineComponent({
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
message.error(file.name + this.t('MarketingSketchUpload.jsContent1'))
|
||||
}
|
||||
},
|
||||
|
||||
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!');
|
||||
message.warning(this.t('MarketingSketchUpload.jsContent2'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 2MB!');
|
||||
message.warning(this.t('MarketingSketchUpload.jsContent3'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
@@ -149,7 +152,7 @@ export default defineComponent({
|
||||
status:'done',
|
||||
}
|
||||
if(this.fileList.length == 15){
|
||||
message.warning('Maximum number of allowable file uploads has been exceeded')
|
||||
message.warning(this.t('MarketingSketchUpload.jsContent5'))
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="my_material_header">
|
||||
<div class="my_material_header_right">
|
||||
<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>
|
||||
</div>
|
||||
@@ -62,7 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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 v-show="total > imgList.length" class="material_content_list_loding" v-observe>
|
||||
|
||||
@@ -7,21 +7,21 @@
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
<span>{{ $t('MoodboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
<span>{{ $t('MoodboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Generate</span>
|
||||
<span>{{ $t('MoodboardUpload.Generate') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="moodboard_body">
|
||||
@@ -50,7 +50,7 @@
|
||||
class="delete_file_block"
|
||||
@click="deleteFile(file)"
|
||||
>
|
||||
Delete
|
||||
{{ $t('MoodboardUpload.Delete') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,8 +106,10 @@
|
||||
<div v-show="moodboarList.length" class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>Thumbnail preview of selected moodboard</div>
|
||||
<div class="modal_btn started_btn" @click="layout()">layout</div>
|
||||
<div>
|
||||
{{ $t('MoodboardUpload.Thumbnail') }}
|
||||
</div>
|
||||
<div class="modal_btn started_btn" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<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 GO from "@/tool/GO";
|
||||
import moodb from "@/tool/moodb";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: { Material, MoodTemplate, Generate,layout },
|
||||
setup() {
|
||||
@@ -174,6 +177,7 @@ export default defineComponent({
|
||||
return store.state.UploadFilesModule.disposeMoodboard
|
||||
})
|
||||
let uploading:any = ref([])
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
fileList,
|
||||
showFileList,
|
||||
@@ -187,7 +191,8 @@ export default defineComponent({
|
||||
layoutOpen,
|
||||
loadingShow,
|
||||
modalImg,
|
||||
uploading
|
||||
uploading,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -292,7 +297,7 @@ export default defineComponent({
|
||||
);
|
||||
let arr = this.store.state.UploadFilesModule.moodboard
|
||||
if(arr.length >= 8){
|
||||
message.warning('You can select up to 8 images')
|
||||
message.warning(this.t('MoodboardUpload.jsContent1'))
|
||||
}else{
|
||||
this.store.commit("setMoodboardFile", fileList);
|
||||
}
|
||||
@@ -307,7 +312,7 @@ export default defineComponent({
|
||||
if (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/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.warning("You can only upload Image file!");
|
||||
message.warning(this.t('MoodboardUpload.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning("Image must smaller than 2MB!");
|
||||
message.warning(this.t('MoodboardUpload.jsContent4'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
@@ -390,7 +395,7 @@ export default defineComponent({
|
||||
// layout.init('moodboard')
|
||||
layout.init()
|
||||
}else{
|
||||
message.warning('Please click Layout to sort randomly')
|
||||
message.warning(this.t('MoodboardUpload.jsContent5'))
|
||||
}
|
||||
|
||||
},
|
||||
@@ -406,7 +411,15 @@ export default defineComponent({
|
||||
}else{
|
||||
this.flex_direction = false
|
||||
}
|
||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||
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.layoutOpen = true
|
||||
//提交模板
|
||||
// this.loadingShow = true
|
||||
|
||||
@@ -10,21 +10,21 @@
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
<span>{{ $t('PrintboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
<span>{{ $t('PrintboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Generate</span>
|
||||
<span>{{ $t('PrintboardUpload.Generate') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,7 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@@ -86,7 +86,7 @@
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<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>
|
||||
<div class="modal_img">
|
||||
@@ -100,9 +100,9 @@
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<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">
|
||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
||||
<span>The entered content exceeds the maximum length.</span>
|
||||
<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">{{ $t('PrintboardUpload.Generate') }}</div>
|
||||
<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
@@ -138,6 +138,7 @@ import Cropper from '@/component/HomePage/Cropper.vue'
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import GO from "@/tool/GO";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
@@ -156,6 +157,7 @@ export default defineComponent({
|
||||
let loadingShow = ref(false)
|
||||
let inputShow = ref(false)
|
||||
let inputTime = ref()
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
@@ -166,6 +168,7 @@ export default defineComponent({
|
||||
loadingShow,
|
||||
inputShow,
|
||||
inputTime,
|
||||
t,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
@@ -256,11 +259,11 @@ export default defineComponent({
|
||||
beforeUpload(file:any,fileList: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!');
|
||||
message.warning(this.t('PrintboardUpload.jsContent1'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 2MB!');
|
||||
message.warning(this.t('PrintboardUpload.jsContent2'));
|
||||
}
|
||||
if(isJpgOrPng && isLt2M){
|
||||
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){
|
||||
@@ -564,7 +471,7 @@ export default defineComponent({
|
||||
status:'done',
|
||||
}
|
||||
if(this.fileList.length == 15){
|
||||
message.warning('Maximum number of allowable file uploads has been exceeded')
|
||||
message.warning(this.t('PrintboardUpload.jsContent3'))
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
@@ -604,7 +511,7 @@ export default defineComponent({
|
||||
|
||||
}else{
|
||||
message.warning(
|
||||
"Please select a picture"
|
||||
this.t('PrintboardUpload.jsContent4')
|
||||
);
|
||||
return
|
||||
}
|
||||
@@ -616,14 +523,14 @@ export default defineComponent({
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 75){
|
||||
message.warning(
|
||||
"The entered content exceeds the maximum length."
|
||||
this.t('PrintboardUpload.jsContent5')
|
||||
);
|
||||
return
|
||||
|
||||
}
|
||||
}else{
|
||||
message.warning(
|
||||
"Please enter content"
|
||||
this.t('PrintboardUpload.jsContent6')
|
||||
);
|
||||
return
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<div class="robot_bottom">
|
||||
<div class="robot_input" v-fade="robotInput,'flex'">
|
||||
<input
|
||||
placeholder="write a message~"
|
||||
:placeholder="$t('RobotAssist.inputContent1')"
|
||||
v-model="chatCentent"
|
||||
@keydown.enter="roborSend()"
|
||||
@input="robotmax"
|
||||
@@ -49,6 +49,7 @@ import { getCookie } from "@/tool/cookie";
|
||||
import axios from 'axios'
|
||||
|
||||
import { message } from "ant-design-vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
@@ -67,6 +68,7 @@ export default defineComponent({
|
||||
])
|
||||
const userInfo:any = {}
|
||||
let bloodBars:any = ref(0)
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
robotTop,
|
||||
robotInput,
|
||||
@@ -78,6 +80,7 @@ export default defineComponent({
|
||||
timeInput,
|
||||
userInfo,
|
||||
bloodBars,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -154,7 +157,7 @@ export default defineComponent({
|
||||
roborSend (){
|
||||
this.clearTimer()
|
||||
if(!this.chatCentent){
|
||||
message.warning("Please enter content");
|
||||
message.warning(this.t('RobotAssist.jsContent1'));
|
||||
return
|
||||
}
|
||||
this.record.push({
|
||||
|
||||
@@ -7,21 +7,21 @@
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
<span>{{ $t('SketchboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
<span>{{ $t('SketchboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Generate</span>
|
||||
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="sketchboard_body">
|
||||
@@ -105,7 +105,7 @@
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<a-checkbox v-model:checked="file.pin"
|
||||
>PIN</a-checkbox
|
||||
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -158,7 +158,7 @@
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<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>
|
||||
<div class="modal_img">
|
||||
@@ -172,9 +172,9 @@
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<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>
|
||||
<span>The entered content exceeds the maximum length.</span>
|
||||
<span>{{ $t('SketchboardUpload.maximumLength') }}</span>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
@@ -257,6 +257,7 @@ import { message, Upload } from "ant-design-vue";
|
||||
import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: { Material, Generate },
|
||||
setup() {
|
||||
@@ -273,6 +274,7 @@ export default defineComponent({
|
||||
let inputShow = ref(false)
|
||||
let inputTime = ref()
|
||||
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
fileList,
|
||||
openClick,
|
||||
@@ -283,6 +285,7 @@ export default defineComponent({
|
||||
workspace,
|
||||
inputShow,
|
||||
inputTime,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -399,7 +402,8 @@ export default defineComponent({
|
||||
if (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/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.warning("You can only upload Image file!");
|
||||
message.warning(this.t('SketchboardUpload.jsContent2'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning("Image must smaller than 2MB!");
|
||||
message.warning(this.t('SketchboardUpload.jsContent3'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
@@ -550,7 +554,7 @@ export default defineComponent({
|
||||
};
|
||||
if (this.fileList.length == 15) {
|
||||
message.warning(
|
||||
"Maximum number of allowable file uploads has been exceeded"
|
||||
this.t('SketchboardUpload.jsContent4')
|
||||
);
|
||||
break;
|
||||
}
|
||||
@@ -577,7 +581,7 @@ export default defineComponent({
|
||||
if(generage.collectionElementid){
|
||||
}else{
|
||||
message.warning(
|
||||
"Please select a picture"
|
||||
this.t('SketchboardUpload.jsContent5')
|
||||
);
|
||||
return
|
||||
}
|
||||
@@ -589,13 +593,14 @@ export default defineComponent({
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 75){
|
||||
message.warning(
|
||||
"The entered content exceeds the maximum length."
|
||||
this.t('SketchboardUpload.jsContent6')
|
||||
);
|
||||
return
|
||||
}
|
||||
}else{
|
||||
message.warning(
|
||||
"Please enter content"
|
||||
this.t('SketchboardUpload.jsContent7')
|
||||
|
||||
);
|
||||
return
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
||||
<div class="delete_file_block" @click="deleteFile(index)">{{ $t('Upload.Delete') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
|
||||
@@ -36,7 +36,7 @@
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<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>
|
||||
</template>
|
||||
@@ -48,14 +48,17 @@ import {getUploadUrl} from '@/tool/util'
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import {useStore} from 'vuex'
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
setup(prop) {
|
||||
let fileList:any = ref([])
|
||||
|
||||
let {t} = useI18n()
|
||||
return{
|
||||
fileList
|
||||
fileList,
|
||||
t
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -86,11 +89,11 @@ export default defineComponent({
|
||||
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!');
|
||||
message.warning((this.t('Upload.jsContent2'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 2MB!');
|
||||
message.warning(this.t('Upload.jsContent2'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
@@ -112,7 +115,7 @@ export default defineComponent({
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
message.error(file.name + this.t('Upload.jsContent3'))
|
||||
}
|
||||
},
|
||||
deleteFile(index:any){
|
||||
|
||||
@@ -11,12 +11,12 @@
|
||||
>
|
||||
<div class="collection_title">
|
||||
<div class="collection_title_text">
|
||||
<div v-show="collectionStep === 1">Moodboard</div>
|
||||
<div v-show="collectionStep === 2">Printboard</div>
|
||||
<div v-show="collectionStep === 3">Colorboard</div>
|
||||
<div v-show="collectionStep === 4">Sketchboard</div>
|
||||
<div v-show="collectionStep === 1">{{ $t('collectionModal.Moodboard') }}</div>
|
||||
<div v-show="collectionStep === 2">{{ $t('collectionModal.Printboard') }}</div>
|
||||
<div v-show="collectionStep === 3">{{ $t('collectionModal.Colorboard') }}</div>
|
||||
<div v-show="collectionStep === 4">{{ $t('collectionModal.Sketchboard') }}</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 class="collection_progress">
|
||||
<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 {useStore} from 'vuex'
|
||||
import GO from "@/tool/GO";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Generate,
|
||||
@@ -72,6 +73,12 @@ export default defineComponent({
|
||||
SketchboardUpload,
|
||||
MarketingSketchUpload
|
||||
},
|
||||
state(){
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
t,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
showCollectionModal:false,
|
||||
@@ -86,7 +93,7 @@ export default defineComponent({
|
||||
let moodboard = this.store.state.UploadFilesModule.moodboard
|
||||
if(moodboard.length > 1){
|
||||
if (!disposeMoodboard || disposeMoodboard.length == 0) {
|
||||
message.warning('You must select the image and then use the layout.')
|
||||
message.warning(this.$t('collectionModal.jsContent1'))
|
||||
return
|
||||
}
|
||||
}
|
||||
@@ -119,7 +126,7 @@ export default defineComponent({
|
||||
cancelDsign(){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'The uploaded files will not be saved, being sure to continue? ',
|
||||
title: this.$t('collectionModal.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
@@ -139,7 +146,7 @@ export default defineComponent({
|
||||
let colorBoards = this.store.state.UploadFilesModule.colorBoards
|
||||
|
||||
if(!colorBoards || colorBoards?.length < 1){
|
||||
message.warning('You must choose one or more colors for further process.')
|
||||
message.warning(this.$t('collectionModal.jsContent3'))
|
||||
return
|
||||
}
|
||||
this.store.commit('clearAllId')
|
||||
@@ -163,6 +170,7 @@ export default defineComponent({
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,.65);
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
.collection_progress{
|
||||
width: 8rem;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<div class="layout_content">
|
||||
<div class="collection_title">
|
||||
<div class="collection_title_text">
|
||||
<div class="layout_title">MoodBoard Design</div>
|
||||
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection_closeIcon" @click.stop="cancelDsign()">
|
||||
@@ -74,7 +74,7 @@
|
||||
class="button_second submit_button"
|
||||
@click="submitTemplate()"
|
||||
>
|
||||
Submit
|
||||
{{ $t('layout.Submit') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
|
||||
@@ -12,23 +12,23 @@
|
||||
</template>
|
||||
<div class="models_placement_body" >
|
||||
<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="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
|
||||
<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 class="operate_item" v-show="locationList.length == 6" @click="printPreview">
|
||||
<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 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 class="operate_item_des">{{ $t('ModelPlacement.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 class="operate_item_des">{{ $t('ModelPlacement.Restore') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,11 +36,11 @@
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
|
||||
System
|
||||
{{ $t('ModelPlacement.System') }}
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<input type="checkbox" model="false" @click="()=>{modelType = 'Library'}">
|
||||
Library
|
||||
{{ $t('ModelPlacement.Library') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,18 +67,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<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 class="placement_content_operate_list">
|
||||
<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 class="placement_content_operate_des">{{ $t('ModelPlacement.RemovePoint') }}</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="perview_mark_loading" v-show="isShowMark">
|
||||
@@ -139,6 +139,7 @@ import { VueCropper } from "vue-cropper";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
VueCropper,
|
||||
@@ -158,6 +159,8 @@ export default defineComponent({
|
||||
let userInfo:any = ref()
|
||||
|
||||
let cropperTime:any = ref()
|
||||
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
store,
|
||||
oldLocationList,
|
||||
@@ -172,7 +175,9 @@ export default defineComponent({
|
||||
manager,
|
||||
userInfo,
|
||||
|
||||
cropperTime
|
||||
cropperTime,
|
||||
|
||||
t
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -343,15 +348,15 @@ export default defineComponent({
|
||||
this.locationList=[]
|
||||
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'}]
|
||||
},
|
||||
{
|
||||
title:'WAISTBAND',
|
||||
title:this.t('ModelPlacement.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'}]
|
||||
},
|
||||
]
|
||||
@@ -523,7 +528,7 @@ export default defineComponent({
|
||||
let _this = this
|
||||
if(!this.isSubmit){
|
||||
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),
|
||||
okText: 'Ok',
|
||||
cancelText: 'Cancel',
|
||||
@@ -651,7 +656,7 @@ export default defineComponent({
|
||||
let _this = this
|
||||
return new Promise((resolve,reject)=>{
|
||||
Modal.confirm({
|
||||
title: 'This picture has been uploaded whether to continue uploading？ ',
|
||||
title: this.t('ModelPlacement.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
|
||||
@@ -12,23 +12,23 @@
|
||||
</template>
|
||||
<div class="models_placement_body" >
|
||||
<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="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
|
||||
<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 class="operate_item" v-show="locationList.length == 6" @click="printPreview">
|
||||
<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 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 class="operate_item_des">{{ $t('ModelPlacementMobile.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 class="operate_item_des">{{ $t('ModelPlacementMobile.Restore') }}</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 './assets/style/style.less'
|
||||
import VueLazyload from "vue-lazyload";
|
||||
import i18n from './lang/index'
|
||||
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
|
||||
flexible()
|
||||
|
||||
@@ -22,4 +23,4 @@ let loadingParam = {
|
||||
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修改用户分组名
|
||||
historyChoose:`/api/history/choose`, //History choose
|
||||
getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
|
||||
putDesignDetail:`/api/design/detail/editLayers`,//编辑单间衣服大小位置
|
||||
|
||||
generateHighDesign:'/api/design/detail/generateHighDesign',//生成高级design图片
|
||||
getNextSysElement:'/api/design/detail/getNextSysElement',//切换系统的element
|
||||
detailPrintDot:'/api/design/detail/printDot',//print打点预览
|
||||
designSingle:`/api/design/detail/designSingle`,//单个design
|
||||
@@ -116,11 +113,8 @@ export const Https = {
|
||||
batchUpdateLibraryName:'/api/library/batchUpdateLibraryName',//Library修改用户文件名
|
||||
batchDeleteLibrary:'/api/library/batchDeleteLibrary',//删除library
|
||||
queryLibraryTopAndBottomPage:'/api/library/queryLibraryTopAndBottomPage',//Library分页列表(查询top和bottom)
|
||||
deleteHighDesign:'/api/design/detail/deleteHighDesign',//删除高级design图片
|
||||
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
|
||||
libraryModelsDot:'/api/library/modelsDot',//Models打点预览
|
||||
// pythonChatStream:'/api/python/chatStream',//机器人助力
|
||||
// chatStreamTest:`/robot/chat_stream_test`,//机器人助力
|
||||
chatStreamTest:`/api/python/chatStream`,//机器人助力
|
||||
pictureLikeOrUnLike:`/api/python/pictureLikeOrUnLike`,//机器人生成图喜欢
|
||||
getBloodBars:`/api/python/getBloodBars`,//机器人血条
|
||||
|
||||
@@ -8,15 +8,15 @@
|
||||
<div class="page_content_body">
|
||||
<HeaderComponent></HeaderComponent>
|
||||
<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">
|
||||
<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>
|
||||
<span class="icon iconfont range_picker_icon icon-rili"></span>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
<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>
|
||||
</div>
|
||||
@@ -33,10 +33,10 @@
|
||||
}">
|
||||
<template #bodyCell="{ column, text, record ,index}">
|
||||
<div class="operate_list" v-if="column.title === 'Operations'">
|
||||
<div class="operate_item" @click="turnToDetail(record)">Detail</div>
|
||||
<div class="operate_item" @click="renameCollection(record,index)">Rename</div>
|
||||
<div class="operate_item" @click="retrieveHome(record)">Retrieve</div>
|
||||
<div class="operate_item" @click="deleteGroup(record, index)">Delete</div>
|
||||
<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
|
||||
<div class="operate_item" @click="renameCollection(record,index)">{{ $t('HistoryPage.Rename') }}</div>
|
||||
<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
|
||||
<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
@@ -56,9 +56,9 @@
|
||||
>
|
||||
<div class="collection_rename_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 class="rename_submit_button" @click="confrimRename()">Submit</div>
|
||||
<div class="rename_submit_button" @click="confrimRename()">{{ $t('HistoryPage.Submit') }}</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<RobotAssist></RobotAssist>
|
||||
@@ -73,6 +73,7 @@ import { formatTime } from "@/tool/util"
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
HeaderComponent,
|
||||
@@ -83,14 +84,14 @@ export default defineComponent({
|
||||
let rangePickerValue:any = ref([])
|
||||
let renameData:any = ref({}) //修改名字选中的数据
|
||||
const columns:any = ref([
|
||||
{ title: 'Collections Name', 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.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
|
||||
{ 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')
|
||||
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',
|
||||
align:'center',
|
||||
fixed: 'right',
|
||||
@@ -99,11 +100,13 @@ export default defineComponent({
|
||||
},
|
||||
]);
|
||||
let collectionList:any = ref([])
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
rangePickerValue,
|
||||
columns,
|
||||
collectionList,
|
||||
renameData,
|
||||
t,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -172,16 +175,17 @@ export default defineComponent({
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
||||
(rv: any) => {
|
||||
message.success('Deleted successfully')
|
||||
message.success(this.t('HistoryPage.jsContent1'))
|
||||
this.collectionList.splice(index,1)
|
||||
}
|
||||
);
|
||||
}
|
||||
Modal.confirm({
|
||||
title: 'Do you really want to delete this collection? ',
|
||||
title: this.t('HistoryPage.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
onOk() {
|
||||
deleteGroupFun(record.id,index)
|
||||
}
|
||||
@@ -206,7 +210,7 @@ export default defineComponent({
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.updateUserGroupName,data).then(
|
||||
(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].updateDate = rv.updateDate
|
||||
this.renameVisivle = false
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
src="@/assets/images/homePage/null_img.png"
|
||||
/> -->
|
||||
<div class="new_collection_button" @click="startNewCollection()">
|
||||
Get Started
|
||||
{{ $t('HomeView.GetStarted') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="is_finish_loading" v-show="isFinishLoading">
|
||||
@@ -28,10 +28,10 @@
|
||||
<div class="home_left_info" v-show="isHaveReviewCollection">
|
||||
<div class="left_info_top">
|
||||
<div class="button_second" @click="startNewCollection()">
|
||||
Start
|
||||
{{ $t('HomeView.Start') }}
|
||||
</div>
|
||||
<div class="button_first button_margin" @click="recollection()">
|
||||
Edit
|
||||
{{ $t('HomeView.Edit') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_info_content scroll_style">
|
||||
@@ -48,11 +48,11 @@
|
||||
<div class="right_top">
|
||||
<div class="right_top_left">
|
||||
<div class="button_second" @click="designNewCollection()">
|
||||
Design
|
||||
{{ $t('HomeView.Design') }}
|
||||
</div>
|
||||
<div class="button_first button_margin_14" v-show="designCollectionId"
|
||||
@click="resDesignCollection()">
|
||||
Redesign
|
||||
{{ $t('HomeView.Redesign') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,8 +60,9 @@
|
||||
<div class="right_content_block">
|
||||
<div class="right_content_header">
|
||||
<div class="content_header_left">
|
||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">Generated
|
||||
Design</span>
|
||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||||
{{ $t('HomeView.GeneratedDesign') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -98,10 +99,10 @@
|
||||
|
||||
<div class="right_content_header">
|
||||
<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 class="button_second" v-show="likeDesignCollectionList.length" @click="exportCanvas()">
|
||||
Export
|
||||
{{ $t('HomeView.Export') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,6 +202,8 @@ import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import draggable from 'vuedraggable'
|
||||
import JSZip from "jszip";
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import i18n from "@/lang";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const FileSaver = require("file-saver");
|
||||
|
||||
export default defineComponent({
|
||||
@@ -239,6 +242,7 @@ export default defineComponent({
|
||||
height:'',
|
||||
}
|
||||
let userInfo:any = {}
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
store,
|
||||
likeDesignCollectionList,
|
||||
@@ -249,6 +253,7 @@ export default defineComponent({
|
||||
contentImgMax,
|
||||
contentImg,
|
||||
userInfo,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -444,7 +449,7 @@ export default defineComponent({
|
||||
this.store.state.UploadFilesModule.allBoardData;
|
||||
if (!colorBoards || colorBoards?.length < 1) {
|
||||
message.warning(
|
||||
"You must choose one or more colors for further process."
|
||||
this.t('HomeView.jsContent1')
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -481,7 +486,7 @@ export default defineComponent({
|
||||
this.store.state.UploadFilesModule.allBoardData;
|
||||
if (!colorBoards || colorBoards?.length < 1) {
|
||||
message.warning(
|
||||
"You must choose one or more colors for further process."
|
||||
this.t('HomeView.jsContent2')
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -976,7 +981,7 @@ export default defineComponent({
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
message.warning("Failed to export the file");
|
||||
message.warning(this.t('HomeView.jsContent3'));
|
||||
this.isShowMark = false;
|
||||
});
|
||||
},
|
||||
|
||||
@@ -40,11 +40,11 @@
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<div>Upload</div>
|
||||
<div>{{ $t('LibraryPage.Upload') }}</div>
|
||||
</a-upload>
|
||||
<div v-show="uploadGenerate != 'Upload'">Upload</div>
|
||||
<div v-show="uploadGenerate != 'Upload'">{{ $t('LibraryPage.Upload') }}</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 class="librart_headr_right">
|
||||
@@ -84,11 +84,11 @@
|
||||
<div class="content_body_header">
|
||||
<div class="content_body_header_left">
|
||||
<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="showRenameModal('','batch')">Rename</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')">{{ $t('LibraryPage.Rename') }}</div>
|
||||
</div>
|
||||
<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="generage_btn search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
</div>
|
||||
<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>all</div>
|
||||
<div>{{ $t('LibraryPage.all') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -147,7 +147,7 @@
|
||||
v-model="checkbox[0].type"
|
||||
@click="setKeyword(0)"
|
||||
/>
|
||||
<span>Image Only</span>
|
||||
<span>{{ $t('LibraryPage.ImageOnly') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxItem">
|
||||
@@ -157,7 +157,7 @@
|
||||
v-model="checkbox[1].type"
|
||||
@click="setKeyword(1)"
|
||||
/>
|
||||
<span>Text Only</span>
|
||||
<span>{{ $t('LibraryPage.TextOnly') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxItem">
|
||||
@@ -167,21 +167,21 @@
|
||||
v-model="checkbox[2].type"
|
||||
@click="setKeyword(2)"
|
||||
/>
|
||||
<span>Text-Image</span>
|
||||
<span>{{ $t('LibraryPage.TextImage') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
||||
<span>The entered content exceeds the maximum length.</span>
|
||||
<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">{{ $t('LibraryPage.Generate') }}</div>
|
||||
<span>{{ $t('LibraryPage.maximumLength') }}</span>
|
||||
</div>
|
||||
<div v-show="selectCode == 'Printboard'" class="printModel">
|
||||
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
||||
<ul v-show="printModel.optype">
|
||||
<li class="printModel_item" @click="setprintModel(1)">Model1</li>
|
||||
<li class="printModel_item" @click="setprintModel(2)">Model2</li>
|
||||
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
|
||||
<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="upload_item">
|
||||
@@ -287,11 +287,11 @@
|
||||
>
|
||||
<div class="collection_rename_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 class="rename_button_list">
|
||||
<div class="rename_button_item rename_cancel_button" @click="closeRenameModal()">Cancel</div>
|
||||
<div class="rename_button_item rename_submit_button" @click="confrimRename()">Sure</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()">{{ $t('LibraryPage.Sure') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
@@ -321,6 +321,7 @@ import {getUploadUrl,isMoible} from '@/tool/util'
|
||||
import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
HeaderComponent,
|
||||
@@ -330,12 +331,12 @@ export default defineComponent({
|
||||
},
|
||||
setup() {
|
||||
let menuList = ref([
|
||||
{title:'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.Moodboard'),code:'Moodboard',icon:'fi fi-rr-grid',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:'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:'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([])
|
||||
@@ -387,6 +388,9 @@ export default defineComponent({
|
||||
optype:false,
|
||||
name:'model1'
|
||||
})
|
||||
let {t} = useI18n()
|
||||
console.log();
|
||||
|
||||
return {
|
||||
menuList,
|
||||
selectImgList,
|
||||
@@ -416,7 +420,8 @@ export default defineComponent({
|
||||
inputTime,
|
||||
generateList,
|
||||
selectGenerateList,
|
||||
printModel
|
||||
printModel,
|
||||
t
|
||||
}
|
||||
},
|
||||
data(this_) {
|
||||
@@ -614,10 +619,11 @@ export default defineComponent({
|
||||
deleteSinglePic(data:any,index:any){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'Are you sure to delete the picture?',
|
||||
title: this.t('LibraryPage.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
// centered:true,
|
||||
onOk() {
|
||||
_this.confirmDeletePic(data,index)
|
||||
@@ -632,7 +638,7 @@ export default defineComponent({
|
||||
}
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'Are you sure to delete the picture?',
|
||||
title: this.t('LibraryPage.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
@@ -665,11 +671,11 @@ export default defineComponent({
|
||||
beforeUpload(file:any,fileList: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!');
|
||||
message.warning(this.t('LibraryPage.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 2MB!');
|
||||
message.warning(this.t('LibraryPage.jsContent4'));
|
||||
}
|
||||
if(isJpgOrPng && isLt2M){
|
||||
this.currentUploadFileNum = fileList.length
|
||||
@@ -717,11 +723,12 @@ export default defineComponent({
|
||||
affirmCstomRequest(data:any){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'This picture has been uploaded whether to continue uploading？ ',
|
||||
title: this.t('LibraryPage.jsContent5'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
zIndex:99999,
|
||||
// centered:true,
|
||||
onOk() {
|
||||
data.checkMd5 = 0
|
||||
@@ -895,14 +902,14 @@ export default defineComponent({
|
||||
let arr = this.captionGeneration.split(/\s+/).length
|
||||
if(arr > 75){
|
||||
message.warning(
|
||||
"The entered content exceeds the maximum length."
|
||||
this.t('LibraryPage.jsContent6')
|
||||
);
|
||||
return
|
||||
|
||||
}
|
||||
}else{
|
||||
message.warning(
|
||||
"Please enter content"
|
||||
this.t('LibraryPage.jsContent7')
|
||||
);
|
||||
return
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user