购物车

2026-04-23 14:28:26 +08:00
parent 7ca69021c4
commit 829f164833
5 changed files with 164 additions and 74 deletions
--- a/src/views/shoppingCart/index.vue
+++ b/src/views/shoppingCart/index.vue
@@ -1,19 +1,19 @@
 <template>
 	<div class="shopping-cart">
 		<div class="content">
-			<sc-list />
-			<sc-list is-mini style="flex: 0.6; height: var(--app-view-height)" />
-			<!-- <order-summary /> -->
+			<sc-list @selected-change="(v) => (selectedList = v)" />
+			<order-summary :brands-list="selectedList" />
 		</div>
 		<my-footer />
 	</div>
 </template>

 <script setup lang="ts">
-	import { computed, onMounted, defineComponent, onActivated } from 'vue'
+	import { computed, onMounted, ref } from 'vue'
 	import orderSummary from './order-summary.vue'
 	import scList from './sc-list.vue'
 	import myFooter from '@/components/Footer.vue'
+	const selectedList = ref([])
 </script>

 <style lang="less" scoped>
--- a/src/views/shoppingCart/order-summary.vue
+++ b/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>
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -10,11 +10,15 @@
 			</div>
 			<div class="options" v-if="!isMini">
 				<div class="left">
-					<el-checkbox v-model="check" :indeterminate="true" />
-					<span class="count">3 Selected</span>
+					<el-checkbox
+						:model-value="allSelected"
+						:indeterminate="selectedCount === 0 ? false : selectedCount < list.length"
+						@click="handleAllAllClick"
+					/>
+					<span class="count">{{ selectedCount }}&nbsp;&nbsp;Selected</span>
 					<div class="hr"></div>
-					<div class="btn">Select All</div>
-					<div class="btn">Deselect All</div>
+					<div class="btn" @click="handleAllAllClick(true)">Select All</div>
+					<div class="btn" @click="handleAllAllClick(false)">Deselect All</div>
 				</div>
 				<div class="right">
 					<el-select v-model="sortBy" placeholder="Sort By" :teleported="false">
@@ -33,8 +37,14 @@
 			</div>
 		</div>
 		<div class="list">
+			<div class="list-null" v-show="list.length === 0">
+				<img src="@/assets/images/shopping-cart-null.png" alt="" />
+				<div class="title">Your Cart is empty</div>
+				<div class="tip">Discover new fashion assets and add them to your cart.</div>
+				<button custom v-if="!isMini" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
+			</div>
 			<div class="item" v-for="v in list" :key="v.id">
-				<el-checkbox v-model="v.checked" v-if="!isMini" />
+				<el-checkbox v-model="v.checked" v-if="!isMini" @change="handleSelectedChange" />
 				<img :src="v.url" />
 				<div class="content">
 					<div class="title">{{ v.title }}</div>
@@ -48,9 +58,12 @@
 					<div class="size">
 						<div class="icon"><svg-icon name="order-file" size="18" /></div>
 						<div class="text">
-							{{ v.fileSize }}kb{{
-								isMini ? '' : ` &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;${v.date}`
-							}}
+							<span>{{ FormatBytes(v.fileSize) }}</span>
+							<span v-if="!isMini"
+								>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
+									FormatDate(v.date, 'SM D, YYYY, h:mm A')
+								}}</span
+							>
 						</div>
 					</div>
 				</div>
@@ -64,7 +77,7 @@
 			</div>
 		</div>
 		<div class="footer" v-if="isMini">
-			<div class="total">
+			<div class="total" v-show="list.length > 0">
 				<span class="label">Total</span>
 				<span class="value">$45.00<span> HKD</span></span>
 			</div>
@@ -74,16 +87,17 @@
 </template>

 <script setup lang="ts">
-	import { computed, ref } from 'vue'
-	const emit = defineEmits(['close'])
-
+	import { computed, ref, onMounted } from 'vue'
+	import { FormatBytes, FormatDate } from '@/utils/tools'
+	const emit = defineEmits(['close', 'selected-change'])
 	const props = defineProps({
 		isMini: {
 			type: Boolean,
 			default: false
 		}
 	})
-	const check = ref(true)
+	const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
+	const allSelected = computed(() => list.value.every((v) => v.checked))
 	const sortBy = ref('')
 	const sortByOptions = ref([
 		{
@@ -107,7 +121,7 @@
 			title: 'North Outfit Set',
 			brand: 'Roaming Clouds',
 			fileSize: 1024, // kb
-			date: 'Feb 16, 2026, 11:34 PM',
+			date: '2026-5-20 5:20',
 			amount: 49.99,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
 			checked: true
@@ -117,16 +131,31 @@
 			url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
 			title: 'Weekend Drift Co-ord',
 			brand: 'Urban Line Edit',
-			fileSize: 100, // kb
-			date: 'Feb 16, 2026, 11:34 PM',
+			fileSize: 1225, // kb
+			date: '2026-5-21 13:14',
 			amount: 9.99,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
 			checked: false
 		}
 	])
+	const handleAllAllClick = (checked?: boolean) => {
+		const checked_ = typeof checked === 'boolean' ? checked : !allSelected.value
+		list.value.forEach((v) => (v.checked = checked_))
+		handleSelectedChange()
+	}
+	const handleSelectedChange = () => {
+		const arr = list.value.filter((v) => v.checked)
+		emit('selected-change', arr)
+	}
 	const onClose = () => {
 		emit('close')
 	}
+	onMounted(() => {
+		handleSelectedChange()
+	})
+	const handleExploreClick = () => {
+		console.log('探索')
+	}
 </script>

 <style lang="less" scoped>
@@ -181,6 +210,11 @@
 					background-color: #fff;
 				}
 			}
+			> .list {
+				> .list-null {
+					margin-top: 10rem;
+				}
+			}
 		}
 		> .header {
 			border-bottom: 0.1rem solid #c4c4c4;
@@ -232,6 +266,40 @@
 		}
 		> .list {
 			// height: 1000px;
+			> .list-null {
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				text-align: center;
+				> img {
+					width: 14rem;
+					height: auto;
+					margin-bottom: 2.4rem;
+				}
+				> .title {
+					font-family: KaiseiOpti-Bold;
+					font-size: 1.6rem;
+					color: #979797;
+					margin-bottom: 0.8rem;
+				}
+				> .tip {
+					width: 50%;
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.4rem;
+					color: #979797;
+				}
+				> button {
+					min-width: 30rem;
+					height: 4.4rem;
+					border: 0.1rem solid #c4c4c4;
+					font-family: KaiseiOpti-Medium;
+					font-size: 1.6rem;
+					color: #979797;
+					margin-top: 4.2rem;
+				}
+			}
 			> .item {
 				border-bottom: 0.1rem solid #c4c4c4;
 				padding: var(--sc-list-list-item-padding, 2.4rem 0);