aida_front/src/component/DetailCopy/model/modelNav.vue

<template>
    <div class="modelNav">
		<div class="modelNav_item" v-for="item,index in designvDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
			<img :src="item.path" alt="">
		</div>
		<div class="modelNav_item add" @click="">
			+
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,createVNode,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined, } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import position from './modelPosition.vue';
export default defineComponent({
    components:{
		position,
    },
    setup(props,{emit}) {
        const store = useStore();
		const {t} = useI18n()
		const detailData = reactive({
			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
			designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
			frontBack:{} as any,
			isEditPattern:inject('isEditPattern') as any
		})
		watch(()=>detailData.frontBack_,(newFollowVue)=>{
			detailData.frontBack = newFollowVue
		})
		const selectDetailItem = (item:any,index:number)=>{
			new Promise((resolve, reject) => {
				if(detailData.isEditPattern.value && detailData.selectDetail?.id){
					Modal.confirm({
						title: t('collectionModal.jsContent2'),
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						centered:true,
						onOk() {
							resolve(true)
						},
						onCancel(){
							resolve(false)
						}
					});
				}else{
					resolve(true)
				}
			}).then((rv)=>{
				if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
			})
		}
		// onBeforeUnmount(()=>{
		// 	detailData.selectIndex = -1
		// })
        return{
			...toRefs(detailData),
			selectDetailItem,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .modelNav{
		> .modelNav_item{
			width: 12rem;
			height: 12rem;
			padding: 1rem;
			border-radius: 2rem;
			border: 2px solid #B4B4B4;
			margin-bottom: 1.5rem;
			cursor: pointer;
			&:last-child{
			    margin-bottom: 0;
			}
			&.active{
				border: 3px solid #000;
			}
			> img{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
			&.add{
				font-size: 8rem;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>