Aida_Purchaser_Front/src/views/shoppingCart/order-summary.vue

<template>
	<div class="order-summary">
		<div class="title">Order Summary</div>
		<div class="count">
			<span class="label">Selected</span>
			<span class="value">3</span>
		</div>
		<div class="hr"></div>
		<div class="brands-header">
			<span class="icon"><svg-icon name="order-shop" size="18" /></span>
			<span class="text">Brands</span>
		</div>
		<div class="brands-item" v-for="v in brandsList" :key="v.brand">
			<span class="label">{{ v.brand }}</span>
			<span class="value"><span>1</span>item</span>
		</div>
		<br />
		<div class="total-file-size">
			<span class="label">
				<span class="icon"><svg-icon name="order-file" size="18" /></span>
				<span class="text">Total File Size</span>
			</span>
			<span class="value"
				>{{ totalSize.size }} <span>{{ totalSize.unit }}</span></span
			>
		</div>
		<div class="hr"></div>
		<br />
		<div class="total">
			<span class="label">Total</span>
			<span class="value"
				><span>${{ totalAmount }}</span> HKD</span
			>
		</div>
		<div class="hr"></div>
		<button class="checkout-btn" custom="black" @click="handleCheckout">CHECKOUT SELECTED</button>
		<div class="tip">Digital assets. Creator retains copyright.</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { FormatBytes, FormatDate } from '@/utils/tools'
	const props = defineProps({
		brandsList: {
			type: Array,
			default: () => []
		}
	})
	const totalSize = computed(() => {
		const total = props.brandsList.reduce((pre, cur) => pre + cur.fileSize, 0)
		const str = FormatBytes(total)
		return {
			size: str.split(' ')[0],
			unit: str.split(' ')[1]
		}
	})
	const totalAmount = computed(() =>
		props.brandsList.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2)
	)
	const handleCheckout = () => {
		console.log('购买：', props.brandsList)
	}
</script>

<style lang="less" scoped>
	.order-summary {
		width: 39.8rem;
		padding: 3rem 2rem 3rem 2.4rem;
		height: auto;
		background-color: #f6f6f6;
		> .title {
			font-family: KaiseiOpti-Bold;
			font-size: 2.4rem;
			line-height: 2.3rem;
			color: #232323;
			margin-bottom: 1.8rem;
		}
		> div {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		> .count {
			color: #232323;
			> .label {
				font-size: 1.6rem;
			}
			> .value {
				font-size: 1.4rem;
			}
		}
		> .hr {
			margin: 1.2rem 0;
			width: 100%;
			height: 0;
			border-top: 0.1rem solid #c4c4c4;
		}
		> .brands-header {
			justify-content: flex-start;

			margin-bottom: 1rem;
			> .icon {
				width: 2.4rem;
				height: 2.4rem;
				margin-right: 0.4rem;
			}
			> .text {
				font-size: 1.4rem;
				color: #232323;
			}
		}
		> .brands-item {
			margin-bottom: 0.8rem;
			padding-left: 1rem;
			font-size: 1.2rem;
			> .label {
				text-decoration: underline;
				color: #585858;
			}
			> .value {
				color: #808080;
				&:deep(span) {
					font-size: 1.4rem;
					color: #585858;
					margin-right: 0.8rem;
				}
			}
		}
		> .total-file-size {
			> .label {
				display: flex;
				align-items: center;

				> .icon {
					width: 2.4rem;
					height: 2.4rem;
					margin-right: 0.4rem;
				}
			}
			> .value {
				> span {
					color: #808080;
				}
			}
		}
		> .total {
			> .value {
				color: #585858;
				> span {
					font-size: 2.2rem;
					color: #232323;
				}
			}
		}
		> .checkout-btn {
			width: 100%;
			margin-top: 3rem;
		}
		> .tip {
			margin-top: 1rem;
			font-family: KaiseiOpti-Regular;
			font-size: 1.2rem;
			justify-content: center;
			color: #808080;
		}
	}
</style>