fix
This commit is contained in:
X1627315083
273
src/component/HomePage/index/model/patternMaking3D/index.vue
Normal file
273
src/component/HomePage/index/model/patternMaking3D/index.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="patternMaking3D">
|
||||
<div class="selectModel">
|
||||
<div class="heard">Clothing</div>
|
||||
<div class="list">
|
||||
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
|
||||
<img :src="item.url" alt="">
|
||||
</div>
|
||||
<div v-show="!isNoData" class="material_content_list_loding">
|
||||
<span class="page_loading" v-show="!isShowLoading" v-observe></span>
|
||||
<span v-show="isShowLoading">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model" v-show="selectModel.id != -1">
|
||||
<div class="heard">
|
||||
<div class="text">Technical sketch</div>
|
||||
<div class="switch">
|
||||
back
|
||||
<a-switch v-model:checked="isFront" />
|
||||
front
|
||||
</div>
|
||||
</div>
|
||||
<div class="modelBox">
|
||||
<div v-show="!imgOrThree" class="img">
|
||||
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
|
||||
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
|
||||
</div>
|
||||
<threeBox v-show="imgOrThree" ref="threeBox"></threeBox>
|
||||
</div>
|
||||
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
|
||||
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
|
||||
</div>
|
||||
<div class="flatPatterm" v-show="selectModel.id != -1">
|
||||
<div class="heard">Flat pattern</div>
|
||||
<div class="modelBox">
|
||||
<div class="img">
|
||||
<img :src="selectModel.threeDPatternLayoutUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery_btn" @click="openDown()">Download</div>
|
||||
</div>
|
||||
<div class="download">
|
||||
<download ref="download"></download>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import threeBox from "./three.vue"
|
||||
import download from "./download.vue"
|
||||
export default defineComponent({
|
||||
components:{
|
||||
threeBox,download
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
selectModel:{
|
||||
id:-1,
|
||||
} as any,
|
||||
modelList:[] as any,
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
isShowLoading:false,
|
||||
currentPage:1,
|
||||
pageSize:10,
|
||||
imgOrThree:false,
|
||||
isFront:false,
|
||||
})
|
||||
const setSelectModel = (item:any)=>{
|
||||
data.isShowMark = true
|
||||
const value = {
|
||||
threeDSimpleId:item.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getLayoutDetail,{},{params:value}).then((res:any)=>{
|
||||
data.selectModel = res
|
||||
data.selectModel.id = item.id
|
||||
data.isShowMark = false
|
||||
data.imgOrThree = false
|
||||
// if(data.imgOrThree){
|
||||
// dataDom.threeBox.openSetData()
|
||||
// }
|
||||
store.commit('setPatternMaking3D',item.id)
|
||||
}).catch((err:any)=>{
|
||||
data.isShowMark = false
|
||||
})
|
||||
}
|
||||
const dataDom = reactive({
|
||||
threeBox:null as any,
|
||||
download:null as any,
|
||||
})
|
||||
const openSetData = ()=>{
|
||||
nextTick(()=>{
|
||||
let id = store.state.HomeStoreModule.patternMaking3D
|
||||
if(id && data.selectModel.id == -1)setSelectModel({id})
|
||||
})
|
||||
}
|
||||
const getModelList = ()=>{
|
||||
if(data.isShowMark && !data.isNoData)return
|
||||
let value = {
|
||||
page: data.currentPage,
|
||||
size:data.pageSize,
|
||||
|
||||
}
|
||||
data.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.threeDPage,value).then(
|
||||
(rv: any) => {
|
||||
if(rv.content.length == 0)data.isNoData = true
|
||||
data.isShowLoading = false
|
||||
data.modelList.push(...rv.content)
|
||||
}
|
||||
).catch((res)=>{
|
||||
data.isNoData = true
|
||||
});
|
||||
}
|
||||
const setImgOrThree = (boolean:boolean)=>{
|
||||
data.imgOrThree = boolean
|
||||
if(boolean){
|
||||
nextTick(()=>{
|
||||
dataDom.threeBox.openSetData(data.selectModel)
|
||||
// dataDom.threeBox.openSetData(data.selectModel.threeDPatternLayoutUrl)
|
||||
})
|
||||
}
|
||||
}
|
||||
const downList = ()=>{
|
||||
let value = {
|
||||
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.threeDPage,value).then(
|
||||
|
||||
)
|
||||
}
|
||||
const openDown = ()=>{
|
||||
dataDom.download.openDown(data.selectModel.id)
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setSelectModel,
|
||||
openSetData,
|
||||
getModelList,
|
||||
setImgOrThree,
|
||||
openDown,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
observe:{
|
||||
mounted (el,binding) {
|
||||
// console.log(binding.instance);
|
||||
let this_:any = binding.instance
|
||||
this_.isShowMark = false
|
||||
this_.isNoData = false
|
||||
let parentDom = el.parentNode
|
||||
this_.getModelList()
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交，则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
this_.currentPage += 1
|
||||
this_.getModelList()
|
||||
},
|
||||
).observe(el);
|
||||
},
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.patternMaking3D{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
font-size: 1.4rem;
|
||||
> .selectModel,> .model,>.flatPatterm{
|
||||
padding: 3rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .heard{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
> .switch{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .selectModel{
|
||||
width: 70rem;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
background: #f7f8fa;
|
||||
border-radius: 3rem;
|
||||
> .list{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
> .modelItem{
|
||||
width: calc(100% / 4 - 1rem);
|
||||
margin: .5rem;
|
||||
aspect-ratio: 1 / 1.2;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #D4D4D4;
|
||||
cursor: pointer;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&.active{
|
||||
border: 2px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .model ,> .flatPatterm{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
> .modelBox{
|
||||
width: 100%;
|
||||
height: 20rem;
|
||||
height: 75rem;
|
||||
margin: auto;
|
||||
>.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.material_content_list_loding{
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
.page_loading{
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.download{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user