Aida_Purchaser_Front/src/components/CommodityItem.vue

<script setup lang="ts">
	import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
	const props = defineProps({
		url: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: 'aaa'
		},
		price: {
			type: [String, Number],
			default: ''
		},
		download: {
			type: Boolean,
			default: false
		},
		showPrice: {
			type: Boolean,
			default: true
		}
	})
	const emit = defineEmits(['addShopping', 'openDetail', 'download'])
	let data = reactive({})
	const addShopping = () => {
		if (props.download) {
			emit('download')
		} else {
			emit('addShopping')
		}
	}
	const openDetail = () => {
		emit('openDetail')
	}
	onMounted(() => {})
	onUnmounted(() => {})
	defineExpose({})
	const {} = toRefs(data)
</script>
<template>
	<div class="commodity-item" :class="{ 'is-download': download }">
		<img :src="props.url" alt="" @click="openDetail" />
		<div class="detail">
			<div class="text">
				<div class="name">
					{{ props.name }}
				</div>
				<div
					class="price"
					:class="{ 'is-download': download }"
					v-if="props.showPrice && props.price"
				>
					HK${{ props.price }}
				</div>
			</div>
			<div class="btn" @click="addShopping">
				<div class="text">
					<SvgIcon
						:name="download ? 'download' : 'add'"
						size="26"
						color="#232323"
					></SvgIcon>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.commodity-item {
		width: var(--commodity-width, 100%);
		&.is-download {
			img {
				cursor: initial;
			}
		}
		> img {
			width: 100%;
			cursor: pointer;
			height: var(--commodity-height, auto);
			margin-bottom: var(--commodity-marginBottom, 1rem);
		}
		> .detail {
			display: flex;
			justify-content: space-between;
			align-items: center;
			> .text {
				color: #232323;
				> .name {
					font-family: 'KaiseiOpti-Regular';
					font-weight: 700;
					font-size: var(--commodity-name-fontSize, 2rem);
					line-height: var(--commodity-name-lineHeight, 2.3rem);
					margin-bottom: var(--commodity-name-marginBottom, 0rem);
				}
				> .price {
					font-family: 'KaiseiOpti-Regular';
					font-weight: 400;
					font-size: var(--commodity-price-fontSize, 1.6rem);
					line-height: var(--commodity-price-lineHeight, 2.3rem);
					margin-top: .8rem;
					&.is-download {
						color: #979797;
					}
				}
			}
		}
		.btn {
			cursor: pointer;
		}
	}
</style>