detail更新
This commit is contained in:
X1627315083
@@ -4,13 +4,36 @@
|
||||
<!-- :class="[driver__.driver?'hideEvents':'']" -->
|
||||
<div class="canvasContent">
|
||||
<div class="argument-box">
|
||||
<argument ref="argument" v-if="canvasObj.canvas"></argument>
|
||||
<argument
|
||||
ref="argument"
|
||||
class="argument"
|
||||
v-if="canvasObj.id || frontBackCanvasObj.id"
|
||||
@toolLiquefaction="toolLiquefaction"
|
||||
@setFrontBackColor="setFrontBackColor"
|
||||
:isEditFrontBack="isEditFrontBack">
|
||||
</argument>
|
||||
</div>
|
||||
<div class="canvas">
|
||||
<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
|
||||
<div class="canvas">
|
||||
<canvasContent ref="canvasContent"></canvasContent>
|
||||
<div class="content-bottom">
|
||||
<div class="tool-box">
|
||||
<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
|
||||
</div>
|
||||
<div class="contet">
|
||||
<div class="canvas" v-show="!isEditFrontBack" @click.stop>
|
||||
<canvasContent ref="canvasContent"></canvasContent>
|
||||
</div>
|
||||
<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
|
||||
<editFrontBack
|
||||
:patchData="frontBack"
|
||||
:imgDomIndex="imgDomIndex"
|
||||
|
||||
ref="editFrontBack">
|
||||
</editFrontBack>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="Finish">
|
||||
<div class="gallery_btn" @click="privewDetail">Finish</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,12 +44,14 @@
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,watch,toRefs, reactive} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import editFrontBack from '@/component/Detail/editFrontBack.vue'
|
||||
|
||||
|
||||
import canvasGeneral from "@/tool/canvasGeneralCopy";
|
||||
import argument from './argument.vue'
|
||||
@@ -35,36 +60,84 @@ import tool from "./tool.vue"
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
tool,argument,canvasContent,
|
||||
tool,argument,canvasContent,editFrontBack
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n();
|
||||
|
||||
const detailDom = reactive({
|
||||
model:null
|
||||
editFrontBack:null as any,
|
||||
model:null,
|
||||
})
|
||||
const userDetail = computed(()=>{
|
||||
return store.state.UserHabit.userDetail
|
||||
})
|
||||
const detailData = reactive({
|
||||
canvasObj:canvasGeneral,
|
||||
|
||||
|
||||
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
designDetailShow:false,
|
||||
loadingShow:false,
|
||||
isEditPattern:{
|
||||
value:false,
|
||||
},// 是否编辑图案
|
||||
canvasObj:new canvasGeneral('aa'),
|
||||
frontBackCanvasObj:new canvasGeneral('vv'),
|
||||
isShowMark:false,
|
||||
liquefactionData:null as any,
|
||||
liquefaction:null as any,
|
||||
canvasType:'export',
|
||||
imgDomIndex:-1,
|
||||
isEditFrontBack:false,
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
|
||||
})
|
||||
|
||||
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
||||
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||
},{immediate: true})
|
||||
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
|
||||
provide('canvasObj',detailData.canvasObj)
|
||||
provide('isShowMark',detailData.isShowMark)
|
||||
provide('canvasType',detailData.canvasType)
|
||||
|
||||
const setLiquefaction = async ()=>{//进入液化页面
|
||||
detailData.canvasObj.getLiquefactionImgObj().then((data)=>{
|
||||
if(data?.img){
|
||||
detailData.liquefactionData = data
|
||||
detailData.liquefaction.init(data.img)
|
||||
}else {
|
||||
message.info(t('exportModel.jsContent6'))
|
||||
return null;
|
||||
}
|
||||
})
|
||||
}
|
||||
const toolLiquefaction = ()=>{//工具点击按钮
|
||||
setLiquefaction()
|
||||
}
|
||||
const editFront = ()=>{//编辑前后片
|
||||
detailData.isEditFrontBack = !detailData.isEditFrontBack
|
||||
if(detailData.isEditFrontBack){
|
||||
nextTick(()=>{
|
||||
detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
|
||||
//关闭开启键盘事件
|
||||
detailData.canvasObj.currentOperation = false
|
||||
detailData.frontBackCanvasObj.currentOperation = true
|
||||
})
|
||||
}else{
|
||||
detailData.canvasObj.currentOperation = true
|
||||
detailData.frontBackCanvasObj.currentOperation = false
|
||||
}
|
||||
}
|
||||
const privewDetail = async ()=>{
|
||||
let data = await detailData.canvasObj.detailSubmit()
|
||||
detailData.selectDetail.partialDesign.partialDesignBase64 = data
|
||||
}
|
||||
const setFrontBackColor = (data:any)=>{
|
||||
detailDom.editFrontBack.setBackground(data)
|
||||
}
|
||||
onBeforeUnmount(()=>{
|
||||
privewDetail()
|
||||
})
|
||||
return{
|
||||
...toRefs(detailDom),
|
||||
...toRefs(detailData),
|
||||
toolLiquefaction,
|
||||
editFront,
|
||||
privewDetail,
|
||||
setFrontBackColor,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@@ -83,9 +156,29 @@ export default defineComponent({
|
||||
// top: -100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tool-box{
|
||||
width: 4rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.Finish{
|
||||
margin-top: auto;
|
||||
> .gallery_btn{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.argument-box{
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
margin-bottom: 3rem;
|
||||
margin-left: 4rem;
|
||||
}
|
||||
.argument-box,
|
||||
.canvas,
|
||||
.content-bottom,
|
||||
.detail-box{
|
||||
|
||||
:deep(i){
|
||||
font-size: 2.5rem;
|
||||
cursor: pointer;
|
||||
@@ -107,6 +200,11 @@ export default defineComponent({
|
||||
&.icon-xialaActive{
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&.eventNone{
|
||||
cursor: no-drop;
|
||||
border: none;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvasContent{
|
||||
@@ -115,6 +213,28 @@ export default defineComponent({
|
||||
border: 2px solid #000;
|
||||
border-radius: 3rem;
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content-bottom{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
> .contet{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.canvas,.editFrontBack{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.editFrontBack{
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user