初代测试版本

src/component/Detail/DesignDetail.vue

@@ -29,6 +29,11 @@
                     <!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
 
 					<div v-show="imgDesignImg" class="detail_modal_body">
+						<div class="detail_modal_body_nav">
+							<div v-for="item,index in designItemDetail?.clothes" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
+								<img :src="item?.path" alt="">
+							</div>
+						</div>
 						<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
 							<img :src="item.imageUrl" alt="">
 						</div>
@@ -390,6 +395,7 @@ export default defineComponent({
 		setSubmitItem(str:any){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let clothes:any = []
+			
 			designItemDetail.clothes.forEach((item:any) => {
 				let clothesItem = {
 					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
@@ -420,6 +426,7 @@ export default defineComponent({
 			}else{
 				data.isPreview = false
 			}
+			this.store.commit('setDesignPreviewData',data)
 			return data
 		},
 		setSubmit(str:any){
@@ -528,13 +535,22 @@ export default defineComponent({
 		mouseupDesignImg(){
 			this.imgDesignImg = true
 		},
-
+		clothesOpen(index:any){
+			this.clothesDetail('',index)
+		},
+		clothesOpenActive(index:any){
+			this.designItemDetail.clothes.forEach((item:any)=>{
+				item.clothesOpen = false
+			})
+			this.designItemDetail.clothes[index].clothesOpen = true
+		},
         //元素替换
         clothesDetail(clothes:any, index:number){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			this.currentIndex = index
 			this.designOrder = true
 			this.current = designItemDetail.clothes[this.currentIndex]
+			this.clothesOpenActive(index)
 			let data:any = this.setSubmitItem('preview')
 			data.designSingleItemDTOList[this.currentIndex] = {
 				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
@@ -677,7 +693,36 @@ export default defineComponent({
 			.detail_modal_body{
 				position: relative;
 				// max-width: 245px;
-				width: 100%;
+				// width: 100%;
+				height: 100%;
+				.detail_modal_body_nav{
+					display: flex;
+					position: absolute;
+					top: 0;
+					left: 50%;
+					z-index: 999;
+					transform: translateX(-50%);
+					>div{
+						width: 4rem;
+						height: 4rem;
+						cursor: pointer;
+						text-align: center;
+						img{
+							// width: 100%;
+							height: 100%;
+						}
+						&.active{
+							border: 2px solid rgba(0,0,0,0.4);
+							img{
+								transform: scale(.8);
+								opacity: .8;
+							}
+						}
+					}
+					>div:nth-child(1){
+						margin-right: 1rem;
+					}
+				}
 				.detail_modal_item_front:last-child{ 
 					z-index: 1 !important;
 				}