3d添加印花 等

src/component/HomePage/index/model/patternMaking3D/index.vue

@@ -1,8 +1,11 @@
 <template>
 	<div class="patternMaking3D">
 		<div class="selectModel">
-			<div class="heard">Clothing</div>
-			<div class="list" v-if="maskShow">
+			<div class="heard selectList">
+				<div :class="{active:libraryOrModel == 'model'}" @click="setLibraryOrModel('model')">Clothing</div>
+				<div :class="{active:libraryOrModel == 'print'}" @click="setLibraryOrModel('print')">Print</div>
+			</div>
+			<div class="list" v-show="libraryOrModel == 'model'" v-if="maskShow">
 				<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
 					<img :src="item.url" alt="">
 				</div>
@@ -13,6 +16,11 @@
 					</span>
 				</div>
 			</div>
+			<div class="list printList" v-show="libraryOrModel == 'print'">
+				<div v-for="item in printList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setMaterial(item)">
+					<img :src="item.url || item.imgUrl" alt="">
+				</div>
+			</div>
 		</div>
 		<div class="model" v-show="selectModel.id != -1">
 			<div class="heard">
@@ -48,7 +56,7 @@
 	</div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, watch} from 'vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
@@ -68,7 +76,12 @@ export default defineComponent({
 			selectModel:{
 				id:-1,
 			} as any,
+			// printCatecoryList:computed(()=>{
+			// 	return store.state.UserHabit.printType
+			// }),
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 			modelList:[] as any,
+			printList:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
 			isShowMark:false,
 			isNoData:false,
 			isShowLoading:false,
@@ -77,6 +90,13 @@ export default defineComponent({
 			imgOrThree:false,
 			isFront:false,
 			maskShow:false,
+			libraryOrModel:'model'
+		})
+		watch(()=>data.selectObject.sex,(newVal)=>{
+			data.modelList = []
+			data.currentPage = 0,
+			data.isNoData = false
+			data.isShowMark = false
 		})
 		const setSelectModel = (item:any)=>{
 			data.isShowMark = true
@@ -114,14 +134,14 @@ export default defineComponent({
             let value = {
                 page: data.currentPage,
                 size:data.pageSize,
-				
+				sex:data.selectObject.sex,
             }
             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)
+                    data.isShowLoading = false
                 }
             ).catch((res)=>{
 				data.isNoData = true
@@ -147,6 +167,14 @@ export default defineComponent({
 		const openDown = ()=>{
 			dataDom.download.openDown(data.selectModel.id)
 		}
+		const setLibraryOrModel = (str:any)=>{
+			if(str == 'print' && data.selectModel.id == -1)return
+			data.libraryOrModel = str
+		}
+		const setMaterial = (item:any)=>{
+			let url = item.url || item.url || item.imgUrl
+			dataDom.threeBox.addMaterial(url)
+		}
 		return{
 			...toRefs(dataDom),
 			...toRefs(data),
@@ -155,6 +183,8 @@ export default defineComponent({
 			getModelList,
 			setImgOrThree,
 			openDown,
+			setLibraryOrModel,
+			setMaterial,
 		}
 	},
 	directives:{
@@ -202,6 +232,33 @@ export default defineComponent({
 				display: flex;
 				justify-content: space-between;
 				width: 100%;
+				&.selectList{
+					justify-content: flex-start;
+					> div{
+						position: relative;
+						margin-right: 2rem;
+						margin-bottom: 2rem;
+					}
+					> div::before{
+						position: absolute;
+						content: "";
+						display: block;
+						background: #000;
+						height: calc(.4rem*1.2);
+						left: 50%;
+						transform: translateX(-50%);
+						bottom: -.5rem;
+						width: 0px;
+						transition: 0.3s all;
+					}
+					> .active {
+						color: #000;
+						font-weight: 600;
+					}
+					> .active::before {
+						width: 100%;
+					}
+				}
 				> .switch{
 					font-weight: 400;
 				}
@@ -219,6 +276,14 @@ export default defineComponent({
 			    flex-wrap: wrap;
 				overflow-y: auto;
 				align-content: flex-start;
+				&.printList{
+					> .modelItem{
+						aspect-ratio: 1 / 1;	
+						>img{
+							padding: 0;
+						}
+					}
+				}
 				> .modelItem{
 					width: calc(100% / 4 - 1rem);
 					margin: .5rem;
@@ -230,7 +295,9 @@ export default defineComponent({
 					> img{
 						width: 100%;
 						height: 100%;
-						object-fit: cover;
+						object-fit: contain;
+						padding: 1rem;
+
 					}
 					&.active{
 						border: 2px solid #000;
@@ -247,6 +314,7 @@ export default defineComponent({
 				// height: 20rem;
 				// height: 75rem;
 				flex: 1;
+				padding: 1rem 0;
 				overflow: hidden;
 				margin: auto;
 				>.img{