购物车

src/views/shoppingCart/order-summary.vue

@@ -10,12 +10,9 @@
 			<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.name">
-			<span class="label">{{ v.name }}</span>
-			<span class="value"
-				><span>{{ v.count }}</span
-				>item</span
-			>
+		<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">
@@ -23,36 +20,47 @@
 				<span class="icon"><svg-icon name="order-file" size="18" /></span>
 				<span class="text">Total File Size</span>
 			</span>
-			<span class="value">36 <span>mb</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>$45.00</span> HKD</span>
+			<span class="value"
+				><span>${{ totalAmount }}</span> HKD</span
+			>
 		</div>
 		<div class="hr"></div>
-		<button class="checkout-btn" custom="black">CHECKOUT SELECTED</button>
+		<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'
-	const brandsList = ref([
-		{
-			name: 'Roaming Clouds',
-			count: 1
-		},
-		{
-			name: 'Off Grid Apparel',
-			count: 1
-		},
-		{
-			name: 'Ivory Muse Studio',
-			count: 1
+	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>