aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-28-用户指引功能

Browse Source
This commit is contained in:
X1627315083
2023-11-28 16:21:00 +08:00
parent d206509d93
commit 1987ed7f15
26 changed files with 658 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/style/style.css
View File

@@ -162,7 +162,10 @@ li {
.hideEvents * {
pointer-events: none !important;
}
.hideEvents .Guide_ {
.Guide_ {
pointer-events: auto !important;
}
.Guide_.showEvents * {
pointer-events: auto !important;
}
.delete_like_file_block {
@@ -389,6 +392,13 @@ li {
.operate_file_block .select_img_type .category_list .category_item:hover {
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
}
.driver-overlay,
.driver-active * {
pointer-events: none;
}
.showEvents * {
pointer-events: auto;
}
.habit :deep(.ant-btn:hover),
:deep(.ant-btn:focus),
:deep(.ant-btn:active),
@@ -502,12 +512,6 @@ li {
.libraryPageCascader .ant-cascader-menu {
margin-top: 4rem;
}
.collection_modal .ant-modal-content,
.design_detail_modal_component .ant-modal-content,
.designOpenrtion_modal .ant-modal-content {
transform: scale(1.2);
transform-origin: center !important;
}
.collection_modal .ant-modal-body,
.design_detail_modal_component .ant-modal-body,
.designOpenrtion_modal .ant-modal-body,

22
src/assets/style/style.less
View File

@@ -177,8 +177,14 @@ ul,li{
*{
pointer-events:none !important;
}
.Guide_{
pointer-events:auto !important;
}
.Guide_{
pointer-events:auto !important;
&.showEvents{
*{
pointer-events:auto !important;
}
}
}
@@ -453,6 +459,14 @@ ul,li{
}
}
}
.driver-overlay, .driver-active * {
pointer-events: none;
}
.showEvents{
*{
pointer-events: auto;
}
}
// .ant-modal-wrap{
// z-index: 10001 ;
// }
@@ -597,8 +611,8 @@ ul,li{
}
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal{
.ant-modal-content{
transform: scale(1.2);
transform-origin: center !important;
// transform: scale(1.2);
// transform-origin: center !important;
}
}
//collection 弹窗

26
src/component/Detail/DesignDetail.vue
View File

@@ -2,11 +2,13 @@
<div>
<!-- designDetailShow -->
<a-modal class="design_detail_modal_component Guide_1_18"
:class="[driver__.driver?'hideEvents':'']"
v-model:visible="designDetailShow"
:footer="null"
width="65%"
:maskClosable="false"
:centered="true"
:keyboard="false"
:closable="false"
>
<div class="design_title_text">
@@ -58,11 +60,11 @@
<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
</div>
<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
<div v-show="ifSubmit" class="subitOkPreviewBtn Guide_1_26" @click="submit">
{{ $t('DesignDetail.Submit') }}
</div>
</div>
<div class="detail_modal_body_category Guide_1_20" :class="[driver__.driver?'hideEvents':'']">
<div class="detail_modal_body_category">
<div v-show="designOrder" class="detail_modal_right_top scroll_style">
<div class="clothes_detail_item clothes_detail_item_apparel">
<div class="clothes_item_header">
@@ -72,7 +74,7 @@
</div>
<img :src="designItemDetail?.clothes?.[currentIndex]?.path" alt="" class="centent" @click="openCurrent(1)">
</div>
<div class="clothes_detail_item clothes_detail_item_print">
<div class="clothes_detail_item clothes_detail_item_print Guide_1_20" :class="[driver__.driver?'showEvents':'']">
<div class="clothes_item_header">
<i class="fi fi-rs-comments"></i>
<div>{{ $t('DesignDetail.CurrentPrint') }}</div>
@@ -294,6 +296,11 @@ export default defineComponent({
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.init(num)
if(num ==2 ){
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}
},
@@ -569,7 +576,11 @@ export default defineComponent({
this.closeModal()
this.store.commit('setDesignCollectionList',designCollectionList)
this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}
).catch(res=>{
this.loadingShow = false
@@ -651,6 +662,7 @@ export default defineComponent({
},
clothesOpen(index:any){
this.clothesDetail('',index)
},
clothesOpenActive(index:any){
this.designItemDetail.clothes.forEach((item:any)=>{
@@ -688,6 +700,11 @@ export default defineComponent({
this.store.commit('setDesignPreviewData',data)
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
},
//重新设计
redesignItem(){
@@ -852,6 +869,7 @@ export default defineComponent({
position: relative;
height: 80%;
display: inline-block;
width: 100%;
.detail_modal_model{
z-index: 1;
position: relative;

23
src/component/Detail/DesignDetailAlter.vue
View File

@@ -12,8 +12,8 @@
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
class="switch_type_item Guide_1_21"
:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
>
<span>{{ $t('DesignDetailAlter.Library') }}</span>
</div>
@@ -96,7 +96,7 @@
</div>
</div>
</div>
<div v-show="openClick == 2" class="detail_Library_item">
<div v-show="openClick == 2" class="detail_Library_item Guide_1_22" :class="[driver__.driver?'showEvents':'']">
<div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
@@ -267,6 +267,7 @@ import { Sketch, Chrome} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from 'vue-i18n';
export default defineComponent({
props: ["msg"],
@@ -278,6 +279,7 @@ export default defineComponent({
let type_ = ref(1);
let select = ref(false);
let current = inject('current')//父组件传过来的数据
let driver__ = inject('driver__')//父组件传过来的数据
let openClick = ref(1);
let searchPictureName = ref('')
//模型印花
@@ -324,6 +326,7 @@ export default defineComponent({
selectColor,
selectColorList,
workspace,
driver__,
t,
}
},
@@ -638,6 +641,11 @@ export default defineComponent({
minIOPath:imgData.minIOPath,
path:imgData?.url
}]
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
// console.log(this.current.printObject,imgData);
}
@@ -672,6 +680,11 @@ export default defineComponent({
this.openClick = num;
if(num ==2 ){
this.getLibraryList()
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}
},
@@ -1417,7 +1430,11 @@ export default defineComponent({
flex-direction: row-reverse;
.vc-chrome-color-wrap{
// width: 3.6rem;
margin-left: 2rem;
width: auto;
.vc-chrome-active-color{
border-radius: 50%;
}
.vc-chrome-active-color,.vc-checkerboard{
width: 3rem;
height: 3rem;

13
src/component/Detail/DesignDetailEnd.vue
View File

@@ -85,7 +85,7 @@
</div>
</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-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $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>
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
@@ -96,7 +96,7 @@
</div>
</template>
<script>
import { defineComponent,computed,ref, h ,inject} from 'vue'
import { defineComponent,computed,ref, nextTick,h ,inject} from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
@@ -104,6 +104,7 @@ import { Sketch} from '@ans1998/vue3-color'
import DesignPrintOperation from './DesignPrintOperation.vue';
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
import { message,Upload} from 'ant-design-vue';
import { openGuide,driverObj__ } from "@/tool/guide";
import {isMoible} from '@/tool/util'
import { useI18n } from 'vue-i18n';
@@ -118,6 +119,8 @@ export default defineComponent({
let current = inject('current')//父组件传过来的数据
let setRevocation = inject('setRevocation')//父组件传过来的数据
let sketchImg = ref({})
let driver__ = inject('driver__')//父组件传过来的数据
//印花
let overallSingle = ref(false)
let systemDesignerPercentage = ref(30)
@@ -134,6 +137,7 @@ export default defineComponent({
current,
setRevocation,
sketchImg,
driver__,
type_,
overallSingle,
systemDesignerPercentage,
@@ -180,6 +184,11 @@ export default defineComponent({
if(this.current?.printObject?.prints?.[0]?.path){
let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
DesignPrintOperation.init()
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}else{
message.info(this.t('DesignDetailEnd.jsContent1'));
}

14
src/component/Detail/DesignPrintOperation.vue
View File

@@ -1,13 +1,15 @@
<template>
<div>
<a-modal
class="designOpenrtion_modal"
class="designOpenrtion_modal Guide_1_24"
:class="[driver__.driver?'hideEvents':'']"
v-model:visible="designOpenrtion"
:footer="null"
width="65%"
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:mask="true"
>
<div class="designOpenrtion_content">
@@ -56,7 +58,7 @@
<img :src="designOpenrtionList[0].path">
</div>
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn Guide_1_25" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
</div>
</div>
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
@@ -104,6 +106,7 @@
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -114,6 +117,7 @@ export default defineComponent({
let designOpenrtion = ref(false);
let designOpenrtionList = ref([])
let current = inject('current')//父组件传过来的数据
let driver__ = inject('driver__')
let setRevocation = inject('setRevocation')//父组件传过来的数据
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
@@ -160,6 +164,7 @@ export default defineComponent({
overallSingle,
systemDesignerPercentage,
current,
driver__,
printAmount,
printZIndex,
printStyleList,
@@ -652,6 +657,11 @@ export default defineComponent({
this.loadingShow = false
this.designOpenrtion = false
// this.closeModal()
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}
).catch(res=>{
this.loadingShow = false

1
src/component/Detail/DesignPrintOperationMobile.vue
View File

@@ -8,6 +8,7 @@
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:mask="true"
>
<div class="designOpenrtion_content">

1
src/component/Detail/HistoryDetail.vue
View File

@@ -5,6 +5,7 @@
:title="collectionName"
width="80%"
:maskClosable="false"
:keyboard="false"
:centered="true"
>
<template #closeIcon>

79
src/component/Detail/habit.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="habit">
<div v-show="openType.habit" class="habit_mask"></div>
<div class="habit_button" @click.stop="setOpenType('habit')" >
<div class="habit_button Guide_1_27" @click.stop="setOpenType('habit')" >
{{ $t('Habit.Workspace') }}
<i class="fi fi-bs-angle-down"></i>
</div>
@@ -95,7 +95,7 @@
<div class="habit_System_Designer_text">{{ $t('Habit.Designer') }}</div>
</div>
</div>
<div class="habit_model">
<div class="habit_model Guide_1_28">
<a-dropdown placement="bottomRight"
trigger="['click']"
@click.stop="setOpenType('model')"
@@ -107,7 +107,7 @@
</a-button>
</a-dropdown>
</div>
<div id="modelShow" class="habit_model_show" v-fade="openType.model">
<div id="modelShow" class="habit_model_show Guide_1_29" :class="[driver__.driver?'showEvents':'']" v-fade="openType.model">
<div class="habit_btn">
<div class="model_current">
<div class="model_text">{{ $t('Habit.Current') }}</div>
@@ -153,12 +153,13 @@
</template>
<script lang="ts">
import { useStore } from "vuex";
import { defineComponent, createVNode, ref,Ref} from "vue";
import { defineComponent, createVNode,nextTick, computed,ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
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 { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
@@ -166,8 +167,9 @@ export default defineComponent({
UserOutlined,
},
setup(){
const store = useStore();
let workspaceItem:any = ref({
id:1,
id:'',
id_:1,
workSpaceName:"工作台1",
putName:false,
@@ -189,6 +191,9 @@ export default defineComponent({
addWorkspace:false,
sex:false
})
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
let workspace:any = ref({
});
@@ -200,11 +205,11 @@ export default defineComponent({
])
const {t} = useI18n()
return{
systemSeleves,
mannequins,
openType,
driver__,
workspace,
workspaceItem,
workspaceItemName,
@@ -224,13 +229,13 @@ export default defineComponent({
let data = this.workspaceItem
delete data.isLastIndex
this.putWorkspace(data,'')
// this.getDetail(this.workspaceItem.id)
this.store.commit("setWorkspace", this.workspaceItem);
}
}
},
'workspaceItem.id_':{
handler(newVal:any,oldVal:any){
this.workspace.workspaceList.forEach((v:any)=>{
if(v.id == this.workspaceItem.id_){
this.workspaceItem = v
@@ -239,7 +244,7 @@ export default defineComponent({
if(v.id == oldVal){
delete v.isLastIndex
this.putWorkspace(v,newVal)
// this.getDetail(newVal)
this.getDetail(newVal)
}
})
this.getMannequins()
@@ -264,21 +269,12 @@ export default defineComponent({
// })
}
},
// 'workspa,ceItem.sex':{
// handler(newVal:any,oldVal:any){
// console.log(oldVal);
'workspaceItem.sex':{
handler(newVal:any,oldVal:any){
// console.log(this.workspaceItem);
// if(oldVal){
// console.log(oldVal);
// if(newVal != oldVal){
// console.log(this.workspaceItem.position);
// this.workspaceItem.position = this.singleTypeList[0].label
// }
// }
// }
// },
}
},
workspaceItem:{
handler(newVal:any,oldVal:any){
this.store.commit("setWorkspace", this.workspaceItem);
@@ -292,6 +288,7 @@ export default defineComponent({
},
mounted() {
this.getworkspace()
this.getSex()
},
directives:{
fade:{
@@ -336,7 +333,6 @@ export default defineComponent({
this.sex = rv
}
})
this.getPosition('')
},
async getPosition(str:any){
let params
@@ -379,23 +375,21 @@ export default defineComponent({
v.overallSingle = true
}
v.putName = false
if(v.id == rv.id){
if(v.id == (this.workspaceItem.id?this.workspaceItem.id:rv.id)){
this.workspaceItem = v
console.log(this.workspaceItem);
this.setMannequinsSex()
this.getPosition('')
}
});
this.workspace.id = rv.id
this.workspace.workspaceList = rv.page.content
this.getSex()
}
})
},
getDetail(id:any){//
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
if (rv) {
this.getworkspace()
// this.getworkspace()
}
})
},
@@ -422,7 +416,7 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
if (rv) {
if(index){
this.getDetail(index)
// this.getDetail(index)
}else{
this.getworkspace()
}
@@ -558,15 +552,28 @@ export default defineComponent({
// this.workspaceItem.mannequinId = item.id
// this.workspaceItem.mannequinType = str
// this.workspaceItem.mannequinUrl = item.presignedUrl
let id
console.log(id , item.id);
if(this.workspaceItem.sexEnum.name == 'Female'){
id = this.workspaceItem.mannequinFemaleId
this.workspaceItem.femalePresignedUrl = item.presignedUrl
this.workspaceItem.mannequinFemaleType = str
this.workspaceItem.mannequinFemaleId = item.id
}else if(this.workspaceItem.sexEnum.name == 'Male'){
id = this.workspaceItem.mannequinMaleId
this.workspaceItem.malePresignedUrl = item.presignedUrl
this.workspaceItem.mannequinMaleType = str
this.workspaceItem.mannequinMaleId = item.id
}
if(id != item.id){
if(this.driver__.driver){
this.openType.habit = false
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}
this.workspaceItem.mannequinUrl = item.presignedUrl
this.workspaceItem.mannequinType = str
this.workspaceItem.mannequinId = item.id
@@ -586,6 +593,13 @@ export default defineComponent({
setOpenType(v:string){
if(v == 'habit'){
this.openType.habit = !this.openType.habit
if(this.driver__.driver){
nextTick().then(()=>{
// driverObj__.moveNext();
driverObj__.moveTo(28);
})
}
}else if(v == 'workspace'){
this.openType.singleton = false
this.openType.sex = false
@@ -599,6 +613,11 @@ export default defineComponent({
this.openType.sex = false
this.openType.model = !this.openType.model
this.getMannequins()
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}else if(v == 'singleton'){
this.openType.singleton = !this.openType.singleton
this.openType.workspace = false
@@ -607,6 +626,7 @@ export default defineComponent({
this.openType.sex = !this.openType.sex
this.openType.workspace = false
this.openType.singleton = false
}
let mask = document.getElementsByClassName("habit_mask")[0]
mask.addEventListener("click", this.documentClick,true);
@@ -682,6 +702,7 @@ export default defineComponent({
transition: all .3s;
transform: scale(0.75)translateY(10%);
display: none;
overflow: inherit !important;
&.active{
opacity: 1;
transform: scale(0.75)translateY(0%);

2
src/component/HomePage/ColorboardUpload.vue
View File

@@ -767,10 +767,12 @@ export default defineComponent({
flex-direction: row-reverse;
.vc-chrome-color-wrap{
// width: 3.6rem;
margin-left: 2rem;
width: auto;
.vc-chrome-active-color,.vc-checkerboard{
width: 3rem;
height: 3rem;
border-radius: 50%;
}
}
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{

5
src/component/HomePage/Cropper.vue
View File

@@ -6,6 +6,7 @@
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:zIndex="999999"
:mask="false"
>
@@ -163,8 +164,8 @@ export default defineComponent({
}
.cut_pricture_modal{
.ant-modal-content{
transform: scale(1.2);
transform-origin: center !important;
// transform: scale(1.2);
// transform-origin: center !important;
}
*{
pointer-events: auto;

1
src/component/HomePage/Header.vue
View File

@@ -87,6 +87,7 @@
title="Mailbox binding"
width="56rem"
:maskClosable="false"
:keyboard="false"
:centered="true"
>
<template #closeIcon v-if="!isHaveBindEmail && bindEmailStep === 1">

4
src/component/HomePage/MoodboardUpload.vue
View File

@@ -109,7 +109,7 @@
></Generate>
</div>
<div v-show="moodboarList.length" class="modal_right">
<div class="modal_layout Guide_1_7">
<div class="modal_layout Guide_1_7" :class="[driver__.driver?'showEvents':'']">
<div class="modal_text">
<div>
{{ $t('MoodboardUpload.Thumbnail') }}
@@ -268,6 +268,8 @@ export default defineComponent({
},
driver__:{
handler(newVal,oldVal){
console.log(newVal,'======');
if(newVal.index >= 1 && newVal.index <= 2){
this.open(newVal.index)
}else{

2
src/component/HomePage/PrintboardUpload.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="printboard_upload_modal">
<div class="printboard_upload_modal" :class="[driver__.driver?'showEvents':'']">
<div class="printboard_left_upload">
<div class="left_upload_header">

2
src/component/HomePage/SketchboardUpload.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="sketchboard_upload_modal">
<div class="modal_left">
<div class="switch_type_list">
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
<div
@click.stop="open(1)"
class="switch_type_item"

3
src/component/HomePage/collectionModal.vue
View File

@@ -8,6 +8,7 @@
:centered="true"
:closable="false"
wrapClassName="#app"
:keyboard="false"
>
<div class="collection_title">
<div class="collection_title_text">
@@ -85,6 +86,8 @@ export default defineComponent({
const store = useStore()
let {t} = useI18n()
let driver__:any = computed(()=>{
console.log(123);
return store.state.Guide.guide
})
provide('driver__',driver__)

5
src/component/HomePage/layout.vue
View File

@@ -8,6 +8,7 @@
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:mask="false"
:destroyOnClose="true"
>
@@ -627,8 +628,8 @@ export default defineComponent({
-khtml-user-select: none;
user-select: none;
.ant-modal-content{
transform: scale(1.2);
transform-origin: center !important;
// transform: scale(1.2);
// transform-origin: center !important;
}
// max-width: 1150px;
.ant-modal-body {

5
src/component/HomePage/layoutMobile.vue
View File

@@ -9,6 +9,7 @@
:centered="true"
:closable="false"
:mask="false"
:keyboard="false"
:destroyOnClose="true"
>
<div class="layout_content">
@@ -659,8 +660,8 @@ export default defineComponent({
-khtml-user-select: none;
user-select: none;
.ant-modal-content{
transform: scale(1.2);
transform-origin: center !important;
// transform: scale(1.2);
// transform-origin: center !important;
}
// max-width: 1150px;
.ant-modal-body {

1
src/component/HomePage/scaleImage.vue
View File

@@ -8,6 +8,7 @@
:centered="true"
:closable="false"
:mask="false"
:keyboard="false"
:destroyOnClose="true"
>
<div class="scaleImage_btn">

6
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -1,10 +1,11 @@
<template>
<div v-show="placementShow">
<div v-if="placementShow">
<a-modal class="models_placement_component"
v-model:visible="placementShow"
:footer="null"
width="111.5rem"
:maskClosable="false"
:keyboard="false"
:centered="true"
>
<template #closeIcon>
@@ -93,6 +94,7 @@
</div>
</div>
<vue-cropper
v-show="!perviewUrl"
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
@@ -118,7 +120,7 @@
:autoCropWidth="option.autoCropWidth"
:mode="option.mode">
</vue-cropper>
<!-- <img class="placement_img" :src="perviewUrl || printObject?.url"> -->
<img class="placement_img" v-show="perviewUrl" :src="perviewUrl || printObject?.url">
</div>

577
src/component/LibraryPage/ModelPlacementMobile.vue
View File

@@ -1,10 +1,11 @@
<template>
<div v-show="placementShow">
<a-modal class="models_placement_mobile_component"
<div v-if="placementShow">
<a-modal class="models_placement_component"
v-model:visible="placementShow"
:footer="null"
width="111.5rem"
:maskClosable="false"
:keyboard="false"
:centered="true"
>
<template #closeIcon>
@@ -12,55 +13,115 @@
</template>
<div class="models_placement_body" >
<div class="palcement_modal_header">
<div class="models_placement_title">{{ $t('ModelPlacementMobile.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">{{ $t('ModelPlacementMobile.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">{{ $t('ModelPlacementMobile.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">{{ $t('ModelPlacementMobile.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">{{ $t('ModelPlacementMobile.Restore') }}</div>
<div class="operate_item_des">{{ $t('ModelPlacement.Restore') }}</div>
</div>
</div>
</div>
<div class="models_placement_content" @touchmove="startMove($event)">
<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
{{ $t('ModelPlacement.System') }}
</div>
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{modelType = 'Library'}">
{{ $t('ModelPlacement.Library') }}
</div>
</div>
</div>
<div class="models_placement_content">
<div class="plcaement_point_content">
<div class="select_block">
<a-select
ref="select"
v-model:value="sex"
:options="sexList"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="startMove($event)">
<div class="ponit_title">{{point.title}}</div>
<div class="point_list">
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</div>
<div class="placement_point_item placement_point_item_btn">
<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">
<a-spin size="large" />
</div>
<div class="img_content_block" ref="imgbox">
<img class="placement_img" :src="perviewUrl || printObject?.url">
<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',borderColor:item.color}" @touchstart="getMouseDown($event,item,index)" @touchmove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
<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',borderColor:item.color}" @touchstart="getMouseDown($event,item,index)" @touchmove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
</div>
<vue-cropper
v-show="!perviewUrl"
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:full="option.full"
:fixedBox="option.fixedBox"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:centerBox="option.centerBox"
:height="option.height"
:infoTrue="option.infoTrue"
:limitMinSize="option.limitMinSize"
:enlarge="option.enlarge"
@real-time="realTime"
:autoCropArea="1"
:autoCropHeight="option.autoCropHeight"
:autoCropWidth="option.autoCropWidth"
:mode="option.mode">
</vue-cropper>
<img class="placement_img" v-show="perviewUrl" :src="perviewUrl || printObject?.url">
</div>
</div>
@@ -71,13 +132,20 @@
</template>
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { defineComponent,ref,createVNode,nextTick} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import {dataURLtoFile,base64toFile} from "@/tool/util"
import { getCookie } from "@/tool/cookie";
import 'vue-cropper/dist/index.css'
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,
},
setup() {
const store = useStore()
let oldLocationList:any = ref([])
@@ -91,6 +159,33 @@ export default defineComponent({
let isSubmit:any = ref(false) //判断历史是否有提交过
let manager:any = ref(false)
let userInfo:any = ref()
let cropperTime:any = ref()
let option:any = ref({
img: '', //裁剪图片的地址
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）
info: false, //图片大小信息
canScale: true, //图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: '0', //默认生成截图框宽度
autoCropHeight: '0', //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
fixedBox: true, //固定截图框大小，不允许改变
fixedNumber: [1, 2.125], //截图框的宽高比例
full: false, //false按原比例裁切图片，不失真
canMove: true, //上传图片是否可以移动
canMoveBox: false, //截图框能否拖动
original: false, //上传图片按照原始比例渲染
centerBox: false, //截图框是否被限制在图片里面
height: true, //是否按照设备的dpr 输出等比例图片
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
maxImgSize:'2000', //限制图片最大宽度和高度
enlarge: 7, //图片根据截图框输出比例倍数
mode: 'auto 90%', //图片默认渲染方式
limitMinSize:'100%'
})
let {t} = useI18n()
return {
store,
oldLocationList,
@@ -103,7 +198,11 @@ export default defineComponent({
pointList,
isSubmit,
manager,
userInfo
userInfo,
cropperTime,
option,
t
}
},
data(){
@@ -120,7 +219,7 @@ export default defineComponent({
sex:'Male',
sexList: [
]
],
}
},
mounted(){
@@ -128,94 +227,202 @@ export default defineComponent({
this.userInfo = JSON.parse(userInfo);
this.getSex()
},
watch: {
sex:{
handler(newVal:any,oldVal:any){
// let imgbox:any = this.$refs.imgbox
// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
// if(imgBoxSizeBG){
// if(newVal == 'Male'){
// imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
// }else{
// imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
// }
// }
},
},
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
this.option.img = this.printObject.url
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.getDefaultPointList(this.imgBox)
},400)
nextTick().then(()=>{
let image:any = new Image()
image.src = this.option.img
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
let divTop:any = document.createElement('div');
let divBottom:any = document.createElement('div');
let divCenter:any = document.createElement('div');
if(imgbox.getElementsByClassName('cropper-view-box-Bg').length >= 1){
}else{
divTop.classList.add('cropper-view-box-Bg')
divBottom.classList.add('cropper-view-box-Bg')
divCenter.classList.add('cropper-view-box-Bg')
divTop.classList.add('cropper-view-box-Top')
divBottom.classList.add('cropper-view-box-Bottom')
divCenter.classList.add('cropper-view-box-Center')
imgBoxSizeBG.appendChild(divTop)
imgBoxSizeBG.appendChild(divBottom)
imgBoxSizeBG.appendChild(divCenter)
// imgBoxSizeBG.appendChild(div)
}
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
let cropper:any = this.$refs.cropper
cropper.cropH = cropper.scale*cropper.trueHeight
cropper.cropW = cropper.cropH/2.125
cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
cropper.cropOffsertY = cropper.getImgAxis().y1
imgBoxSize.addEventListener('touchmove',this.startMove)
this.setImageSize()
this.getDefaultPointList(this.imgBox,' ')
})
},800)
},
realTime(data:any) {
clearTimeout(this.cropperTime)
this.cropperTime = setTimeout(()=>{
this.setImageSize()
},1000)
},
setImageSize(){
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let position = imgBoxSize.getBoundingClientRect()
let position1 = imgbox.getBoundingClientRect()
let cropper:any = this.$refs.cropper
this.imgBox = {
width:cropper.cropW,
height:cropper.cropH,
left : position.left,
top:position.top,
scrollTop:imgBoxSize.scrollTop || 0,
x:cropper.getCropAxis().x1,
y:cropper.getCropAxis().y1,
}
},
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
arr.push({
value:item.name,
label:item.value,
}
arr.push(obj)
})
});
this.sex = arr[0].value
this.sexList = arr
console.log(this.sexList);
}
})
},
//截屏框移动
setMove(){
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
getDefaultPointList(imgBox:any,str:any){
this.isSubmit = false
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',
pointList:[{type:'handLeft',color:'#CCFF7B',show:true,field:'hand'},{type:'handRight',color:'#CCFF7B',show:true,field:'hand'}]
title:this.t('ModelPlacement.HAND'),
pointList:[{type:'handLeft',color:'#d88e8e',show:true,field:'hand'},{type:'handRight',color:'#d88e8e',show:true,field:'hand'}]
},
]
if(this.printObject.templateId){//编辑
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
pointItem.show = false
let data = {
left:this.printObject[pointItem.type][0] * imgBox.width - 12,
top:this.printObject[pointItem.type][1] * imgBox.height - 12,
color:pointItem.color,
type:pointItem.type,
field:pointItem.field,
}
this.locationList.push(data)
}
}
}
if(str != 'setPoint'){//编辑
this.isSubmit = true
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
pointItem.show = false
let data = {
left:this.printObject[pointItem.type][0] * imgBox.width - 12,
top:this.printObject[pointItem.type][1] * imgBox.height - 12,
color:pointItem.color,
type:pointItem.type,
field:pointItem.field,
}
this.locationList.push(data)
}
}
}
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
}
// this.option.canScale = false
// this.option.canMove = false
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
}else{
this.option.canScale = true
// this.option.fixedBox = false
this.option.canMove = true
// this.option.canMoveBox = true
}
},
setPoint(){
let file = this.printObject.file
let url = this.printObject.url
this.printObject = {
"shoulderLeft": [
0.3338,
0.1858
],
"shoulderRight": [
0.6644,
0.1858
],
"waistbandLeft": [
0.3758,
0.364
],
"waistbandRight": [
0.6103,
0.364
],
"handLeft": [
0.3277,
0.4687
],
"handRight": [
0.6764,
0.4715
],
file:file,
url:url
}
this.getDefaultPointList(this.imgBox,'setPoint')
},
AddDian(point:any){
if(!point.show){
return
}
this.startDian = true
this.startDian = true
this.isRemoveStatus = false
this.intObj = point
},
@@ -225,14 +432,14 @@ export default defineComponent({
},
startMove(event:any){
if(this.isRemoveStatus){
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.left = event.targetTouches[0].pageX - this.imgBox.left
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top
this.currentSign.color = this.intObj.color
this.currentSign.type= this.intObj.type
@@ -242,8 +449,8 @@ export default defineComponent({
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
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left -12
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -12
document.addEventListener('touchend', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
@@ -257,27 +464,32 @@ export default defineComponent({
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let top = (this.$refs.cropper as any).getCropAxis().y1
let left = (this.$refs.cropper as any).getCropAxis().x1
let height = imgBoxSize.offsetHeight;
// let height = imgBoxSize.offsetHeight + imgBoxSize.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
let maxPosWidth = imgBoxSize.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top+top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
} else if (this.currentSign.top >= maxPosHeight+top ) {
this.currentSign.top = maxPosHeight+top;
}
if (this.currentSign.left <= 0) {
if (this.currentSign.left+left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
} else if (this.currentSign.left >= maxPosWidth+left) {
this.currentSign.left = maxPosWidth+left;
}
},
getMouseDown(event:any,item:any,index:number){
if(this.isRemoveStatus){
//删除
for(let itemPoint of this.pointList){
for(let point of itemPoint.pointList){
if(item.id == point.id){
if(item.type == point.type){
point.show = true
break
}
@@ -287,14 +499,16 @@ export default defineComponent({
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
// this.moveOriginal.posX = event.offsetX
// this.moveOriginal.posY = event.offsetY // 1为边框
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(){
getMouseOver(){//鼠标抬起
this.startDian = false
this.currentSign = {}
document.removeEventListener('touchend', this.getMouseOver);
@@ -304,7 +518,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: 'Yes',
cancelText: 'No',
@@ -318,6 +532,7 @@ export default defineComponent({
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
});
}else{
@@ -328,31 +543,65 @@ export default defineComponent({
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
},
restoreLocationList(){
this.locationList = []
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
},
submitPlacement(){
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
// let cropper:any = this.$refs.cropper,
// that = this
// cropper.getCropData((data:any) => {
// // 转换为File对象
// let file = base64toFile(data,this.cropperFileData.name);
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
// })
let cropper:any = this.$refs.cropper,
that = this
if(this.modelType == 'System' && this.userInfo.userId == 88 || this.userInfo.userId == 83){
if(this.printObject.templateId){
this.printObject.id = this.printObject.relationId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
}else{
cropper.getCropData(async (value:any) => {
// 转换为File对象
if(this.printObject.templateId){
this.printObject.id = this.printObject.relationId
this.confrimSubmit()
}else{
let file:any = base64toFile(value,this.printObject.file.name);
file.uid = this.printObject.file.uid
this.printObject.file = file
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
})
}
},
confrimSubmit(){
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
@@ -364,6 +613,7 @@ export default defineComponent({
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
param.modelType = this.modelType
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
@@ -380,22 +630,21 @@ export default defineComponent({
customRequest(){
let new_data = {
file:this.printObject.file,
checkMd5:1,
level1Type:'Models',
sex:this.sex,
modelType:'',
level2Type:'',
checkMd5:1,
sex:this.sex,
modelType:'Library',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.isShowMark = true
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
new_data.modelType = this.modelType
new_data.sex = this.sex
}
this.isShowMark = true
return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
// resolve(rv)
if(!rv.checkMd5){
resolve(this.affirmCstomRequest(new_data))
}else{
@@ -406,12 +655,13 @@ export default defineComponent({
reject(res)
});
})
},
affirmCstomRequest(data:any){
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',
@@ -434,7 +684,6 @@ export default defineComponent({
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
let locationData:any = {}
@@ -464,31 +713,28 @@ export default defineComponent({
},
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
// });
let file = this.printObject.templateId ? null :this.printObject.file,
models = {
libraryId:this.printObject.libraryId || null,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
let formData = new FormData();
formData.append('file', file);
formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
if(this.isShowMark){
return
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
this.perviewUrl = rv
this.isShowMark = false
}
).catch(res=>{
this.isShowMark = false
});
},
backPreview(){
@@ -498,7 +744,7 @@ export default defineComponent({
})
</script>
<style lang="less">
.models_placement_mobile_component{
.models_placement_component{
.ant-modal-close{
width: 3.6rem;
@@ -596,7 +842,39 @@ export default defineComponent({
left: 0;
top:18.4rem;
padding: 3rem 2.7rem 0 1.4rem;
.select_block{
// background: #FFFFFF;
overflow: hidden;
margin-bottom: 3rem;
color: #1A1A1A !important;
.ant-select{
width: 100%;
.ant-select-selector{
padding: 0;
width: 100%;
margin: 0;
background: rgba(0, 0, 0, 0);
font-size: 1.3rem;
color: #64686D;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
height: 3rem;
.ant-select-selection-item, .select_block .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
font-weight: 300 !important;
line-height: 1.5715 !important;
width: 100%;
display: block;
position: relative;
padding: 0;
}
}
}
.icon-xiala{
color: #1A1A1A !important;
}
}
.placement_point_item{
display: flex;
justify-content: space-between;
@@ -639,6 +917,13 @@ export default defineComponent({
}
}
}
&.placement_point_item_btn{
display: flex;
justify-content: center;
.started_btn{
}
}
}
}
@@ -709,7 +994,7 @@ export default defineComponent({
user-select:none;
-moz-user-select:none;
position: relative;
height: 57.6rem;
.img_content_block{
width: 40.8rem;
height: 100%;
@@ -720,6 +1005,34 @@ export default defineComponent({
position: relative;
&::-webkit-scrollbar { width: 0 !important }
.cropper-view-box-Bg{
width: 100%;
position: absolute;
}
.cropper-view-box-Top{
// border-top: 1px dashed;
/*虚线2 css*/
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
height: 1rem;
opacity: .4;
top: 6%;
}
.cropper-view-box-Bottom{
bottom: 6%;
// border-top: 1px dashed;
height: 1rem;
opacity: .4;
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
}
.cropper-view-box-Center{
// border-left: 1px dashed;
left: 50%;
opacity: .4;
background: linear-gradient(to bottom,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 1px 10px;background-repeat: repeat-y;
top: 0;
width: 1rem;
height: 100%;
}
}
.perview_mark_loading{
@@ -755,7 +1068,7 @@ export default defineComponent({
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
z-index: 22;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;

1
src/component/LibraryPage/setLabel.vue
View File

@@ -5,6 +5,7 @@
title="Edit tag"
width="65%"
:maskClosable="false"
:keyboard="false"
:centered="true"
@cancel="clearSetLabel"
>

36
src/tool/guide.js
View File

@@ -11,7 +11,7 @@ let data = {
}
const driverObj__ = driver({
steps: [
{ element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_1', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_4', popover: { title: 'Title', description: 'Description' } },
@@ -31,8 +31,18 @@ const driverObj__ = driver({
{ element: '.Guide_1_17', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_18', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_19', popover: { title: 'Title', description: 'Description' } },
// { element: '.Guide_1_20', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_20', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_21', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_22', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_23', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_24', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_25', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_26', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_27', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_28', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_29', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_30', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_16', popover: { title: 'Title', description: 'Description' } },
],
// showProgress: true,//控制总页数和当前页数是否显示
allowClose:false,
@@ -42,26 +52,34 @@ const driverObj__ = driver({
allowKeyboardControl:true,//控制是否可以键盘控制下一步
disableActiveInteraction:false,//是否禁用显示元素的交互
overlayOpacity:.4,
allowKeyboardControl:false,
overlay: true,
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
console.log(popover,options);
// console.log(popover,options);
if(element){
element.classList.remove('Guide_')
}
popover.previousButton.style.display = 'none'
let driver = document.getElementsByClassName('driver-active')[0]
if(
options.state.activeIndex >= 1 && options.state.activeIndex <= 2 ||
options.state.activeIndex >= 18 && options.state.activeIndex <= 19
options.state.activeIndex >= 18 && options.state.activeIndex < 19 ||
options.state.activeIndex >= 24 && options.state.activeIndex < 25
){
popover.footer.style.display = 'block'
driver.classList.add('showEvents')
addDiv(options.state.activeElement)
}else{
popover.footer.style.display = 'none'
removeDiv(options.state.activeElement)
driver.classList.remove('showEvents')
}
// console.log(options.state.activeIndex);
driverIndex__ = driverObj__.getState().activeIndex
data.index = driverIndex__
data = {
index : driverIndex__,
driver : true,
}
store?.commit("setGuide", data);
element = options.state.activeElement
element.classList.add('Guide_')
@@ -69,7 +87,7 @@ const driverObj__ = driver({
},
//销毁前
onDestroyStarted:()=>{
// data.driver = false
data.driver = false
store?.commit("setGuide", data);
driverObj__.destroy();//销毁方法
},
@@ -119,12 +137,12 @@ function removeDiv(element){
}
}
const openGuide = () =>{
// driverObj__.drive();
driverObj__.drive();
store = useStore()
// driverObj__.moveTo(18);
let data = {
index:driverIndex__,
// driver:true,
driver:true,
}
store?.commit("setGuide", data);
// driverObj__.moveNext();

1
src/views/HistoryPage.vue
View File

@@ -50,6 +50,7 @@
v-model:visible="renameVisivle"
:footer="null"
:title="renameData?.name"
:keyboard="false"
width="56rem"
:maskClosable="false"
:centered="true"

8
src/views/HomeView.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="home_page .Guide_1_16">
<div class="home_page Guide_1_16">
<HeaderComponent></HeaderComponent>
<div class="page_content">
<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
@@ -14,7 +14,7 @@
class="home_null_icon"
src="@/assets/images/homePage/null_img.png"
/> -->
<div id="Guide_1_1" class="new_collection_button" @click="startNewCollection()">
<div id="Guide_1_1" class="new_collection_button Guide_1_1" @click="startNewCollection()">
{{ $t('HomeView.GetStarted') }}
</div>
</div>
@@ -52,7 +52,7 @@
<div class="button_second Guide_1_15" @click="designNewCollection()">
{{ $t('HomeView.Design') }}
</div>
<div class="button_first button_margin_14" v-show="designCollectionId"
<div class="button_first button_margin_14 Guide_1_30" v-show="designCollectionId"
@click="resDesignCollection()">
{{ $t('HomeView.Redesign') }}
</div>
@@ -69,7 +69,7 @@
</div>
<div class="right_content_body">
<div class="right_content_img_block scroll_style Guide_1_17" v-mousewheel :class="{active:designCollectionList.length != 0}">
<div class="right_content_img_block scroll_style Guide_1_17" v-mousewheel :class="[designCollectionList.length != 0?'active':'',driver__.driver?'showEvents':'']">
<div class="right_content_img_item">
<!-- <draggable
group="people" > -->

14
src/views/LibraryPage.vue
View File

@@ -315,6 +315,7 @@
:footer="null"
title="Rename Pic"
width="65%"
:keyboard="false"
:maskClosable="false"
:centered="true"
@onCancel="closeRenameModal"
@@ -350,7 +351,7 @@
</a-modal>
<ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
<ModelPlacementMobile ref="ModelPlacementMobile"></ModelPlacementMobile>
<ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile>
<setLabel ref="setLabel"></setLabel>
<!-- 蒙层 start-->
<div class="mark_loading" v-show="isShowMark">
@@ -1021,6 +1022,8 @@ export default defineComponent({
//给模特打点编辑
placementClick(data:any){
let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
console.log(isMoible());
placementModal.showPlacementModal(data)
},
//generate
@@ -1297,10 +1300,10 @@ export default defineComponent({
display: flex;
padding-top: 2rem;
.library_body_left{
width: 23.5rem;
width: 26.5rem;
height: 100%;
background: rgba(255,255,255,0.4);
margin-right: 8rem;
margin-right: 5rem;
>div{
background: #f7f8fa;
border-radius: 2rem;
@@ -1318,7 +1321,8 @@ export default defineComponent({
justify-content: space-between;
padding: 0 1rem 0 2.5rem;
border-left: 0.5rem solid transparent;
font-size: 1.6rem;
// font-size: 1.6rem;
font-size: var(--aida-fsize2);
color: #030303;
cursor: pointer;
transition: all .3s;
@@ -1365,7 +1369,7 @@ export default defineComponent({
.header_operate_item{
margin-right: 5rem;
color: #C2C2C2;
font-size: 1.6rem;
font-size: var(--aida-fsize1-8);
.ant-upload{
// font-size: 1.6rem;
// font-weight: 900;