lanecarford_front/src/components/selectStyle/selectItem.vue

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
	selectList: {
		type: Array,
		default: () => [],
	} as any,
})
//const emit = defineEmits([
//])
let data = reactive({
})

const setLike = (item,str)=>{
	if(str === 'like'){
		item.isLike = true
	}else{
		item.isLike = false
	}
}

const addLibrary = (item,str)=>{
	if(str === 'add'){
		item.isAdd = true
	}else{
		item.isAdd = false
	}
}

const deleteStyle = (index)=>{
	props.selectList.splice(index,1)
}

const updateStyle = (item,index)=>{
	props.selectList[index] = {
		id:item.id,
		imgList:[
			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
		],
		isLike: false,
		isAdd: false,
	}
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="list">
		<div class="item" v-for="(item,index) in selectList" :key="item.id">
			<div class="imgBox">
				<img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt="">
			</div>
			<div class="btn">
				<div>
					<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="40" />
					<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="40" />
				</div>
				<div>
					<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="40" />
				</div>
				<div>
					<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="40" />
					<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="40" />
				</div>
				<div>
					<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="40" />
				</div>
			</div>
		</div>
		
	</div>
</template>
<style lang="less" scoped>
	.list{
		> .item{
			width: 100%;
			position: relative;
			margin-bottom: 5.8rem;
			height: 29rem;
			display: flex;
			align-items: center;
			&:last-child{
				margin-bottom: 0;
			}
			> .imgBox{
				flex: 1;
				display: flex;
				height: 100%;
				justify-content: space-between;
				align-items: center;
				> img{
					height: 26rem;
					object-fit: cover;
					// object-fit: contain;
					width: calc((100% - 1.4rem * 3) / 4);
				}
			}
			> .btn{
				margin-left: 7rem;
				> div{
					color: #989898;
					margin-bottom: 2.6rem;
					&:last-child{
						margin-bottom: 0;
					}
					&:hover{
						color: #000;
					}
				}
			}
		}
	}
</style>