Aida_Purchaser_Front/src/views/shoppingCart/sc-item.vue

<template>
	<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
		<slot name="checkbox" />
		<img :src="info.url" />
		<div class="content">
			<div class="title">{{ info.title }}</div>
			<div class="brand">
				<span class="icon"><svg-icon name="order-shop" size="24" /></span>
				<span class="text">{{ info.brand }}</span>
			</div>
			<div class="tags" v-if="showTags">
				<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
			</div>
			<div class="date" v-if="showDate">
				<!-- <div class="icon"><svg-icon name="order-file" size="18" /></div> -->
				<div class="text">
					{{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
				</div>
			</div>
		</div>
		<div class="right">
			<div class="amount">${{ info.amount }}<span> HKD</span></div>
			<SvgIcon
				v-if="orderActionsLayout"
				class="download"
				name="download"
				size="32"
				color="#232323"
			/>
			<div class="remove" v-if="showRemove" @click="onRemove">
				<span class="icon"><svg-icon name="order-delete" size="18" /></span>
				<span class="text">Remove</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, onMounted } from 'vue'
	import { FormatBytes, FormatDate } from '@/utils/tools'
	const emit = defineEmits(['remove'])
	const props = defineProps({
		showTags: { type: Boolean, default: true },
		showDate: { type: Boolean, default: true },
		showRemove: { type: Boolean, default: true },
		orderActionsLayout: { type: Boolean, default: false },
		info: { type: Object, default: () => {} }
	})
	const onRemove = () => {
		emit('remove', props.info.id)
	}
</script>

<style lang="less" scoped>
	.sc-item {
		border-bottom: 0.1rem solid #c4c4c4;
		padding: var(--sc-item-padding, 2.4rem 0);
		display: flex;
		align-items: center;
		> img {
			width: var(--sc-item-img-width, 14.8rem);
			height: var(--sc-item-img-height, 18.8rem);
			object-fit: contain;
			background-color: #f6f6f6;
		}
		> .content {
			flex: 1;
			margin: var(--sc-item-content-margin, 0 4rem);
			align-self: var(--sc-item-content-align-self);
			> * {
				margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
				&:last-child {
					margin-bottom: 0;
				}
			}
			> .title {
				font-family: KaiseiOpti-Bold;
				font-size: var(--sc-item-title-font-size, 2.4rem);
				color: #232323;
			}
			> .brand {
				display: flex;
				align-items: center;
				> .icon {
					width: 2.4rem;
					height: 2.4rem;
					margin-right: 1rem;
				}
				> .text {
					font-size: var(--sc-item-brand-font-size, 1.6rem);
					text-decoration: underline;
					color: #232323;
				}
			}
			> .tags {
				display: flex;
				flex-wrap: wrap;
				gap: 0.8rem;
				> .tag {
					min-width: var(--sc-item-tag-min-width, 8.8rem);
					height: var(--sc-item-tag-height, 2.4rem);
					line-height: var(--sc-item-tag-height, 2.4rem);
					border-radius: var(--sc-item-tag-radius, 2.4rem);
					font-size: var(--sc-item-tag-font-size, 1.4rem);
					padding: var(--sc-item-tag-padding, 0 1rem);
					text-align: center;
					color: #8f8f8f;
					background-color: #eee;
				}
			}
			> .date {
				display: flex;
				align-items: center;
				> .icon {
					width: 2.4rem;
					height: 2.4rem;
					margin-right: 1rem;
					color: #808080;
				}

				> .text {
					font-family: KaiseiOpti-Regular;
					font-size: 1.4rem;
					color: #808080;
				}
			}
		}
		> .right {
			align-self: var(--sc-item-right-align-self, end);
			display: var(--sc-item-right-display);
			flex-direction: var(--sc-item-right-flex-direction);
			justify-content: var(--sc-item-right-justify-content);
			align-items: var(--sc-item-right-align-items);
			height: var(--sc-item-right-height);
			margin-top: var(--sc-item-right-margin-top);
			> .amount {
				font-family: KaiseiOpti-Bold;
				font-size: var(--sc-item-amount-font-size, 2.2rem);
				color: #232323;
				> span {
					font-size: var(--sc-item-currency-font-size, 1.4rem);
					color: #585858;
					vertical-align: bottom;
				}
			}
			> .remove {
				margin-top: var(--sc-item-remove-margin-top, 9rem);
				display: flex;
				align-items: center;
				justify-content: center;
				user-select: none;
				cursor: pointer;
				> .icon {
					width: 2rem;
					height: 2rem;
					margin-right: 0.4rem;
				}
				> .text {
					font-family: KaiseiOpti-Regular;
					font-size: 1.4rem;
					color: #808080;
				}
			}
		}
		&.is-order-actions-layout {
			display: grid;
			grid-template-columns:
				var(--sc-item-img-width, 14.8rem)
				minmax(0, 1fr)
				var(--sc-item-order-amount-width, 12rem)
				var(--sc-item-order-action-width, 18rem);
			column-gap: var(--sc-item-order-column-gap, 2rem);

			> .content {
				min-width: 0;
			}

			> .right {
				display: contents;

				> .amount {
					grid-column: 3;
					align-self: center;
					white-space: nowrap;
					transform: translateX(var(--sc-item-order-actions-offset, 0));
				}

				.c-svg {
					width: initial;
					height: initial;
				}
				> .download {
					grid-column: 4;
					cursor: pointer;
					transform: translateX(var(--sc-item-order-actions-offset, 0));
				}
			}
		}
	}
</style>