购物车

src/views/shoppingCart/order-summary.vue

@@ -3,7 +3,7 @@
 		<div class="title">Order Summary</div>
 		<div class="count">
 			<span class="label">Selected</span>
-			<span class="value">3</span>
+			<span class="value">{{ brandsList.length }}</span>
 		</div>
 		<div class="hr"></div>
 		<div class="brands-header">
@@ -12,7 +12,10 @@
 		</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>
+			<span class="value"
+				><span>{{ v.children.length }}</span
+				>item</span
+			>
 		</div>
 		<br />
 		<div class="total-file-size">
@@ -42,24 +45,37 @@
 	import { computed, ref } from 'vue'
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	const props = defineProps({
-		brandsList: {
+		list: {
 			type: Array,
 			default: () => []
 		}
 	})
+	const brandsList = computed(() => {
+		const arr = []
+		props.list.forEach((v) => {
+			const index = arr.findIndex((v_) => v_.brand === v.brand)
+			if (index === -1) {
+				arr.push({
+					brand: v.brand,
+					children: [v]
+				})
+			} else {
+				arr[index].children.push(v)
+			}
+		})
+		return arr
+	})
 	const totalSize = computed(() => {
-		const total = props.brandsList.reduce((pre, cur) => pre + cur.fileSize, 0)
+		const total = props.list.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 totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const handleCheckout = () => {
-		console.log('购买：', props.brandsList)
+		console.log('购买：', props.list)
 	}
 </script>