diff --git a/src/views/shoppingCart/index.vue b/src/views/shoppingCart/index.vue index 961ee40..76d1cd0 100644 --- a/src/views/shoppingCart/index.vue +++ b/src/views/shoppingCart/index.vue @@ -2,7 +2,8 @@
- + +
diff --git a/src/views/shoppingCart/order-summary.vue b/src/views/shoppingCart/order-summary.vue index 9111d6b..e3ba7b3 100644 --- a/src/views/shoppingCart/order-summary.vue +++ b/src/views/shoppingCart/order-summary.vue @@ -3,7 +3,7 @@
Order Summary
Selected - 3 + {{ brandsList.length }}
@@ -12,7 +12,10 @@
{{ v.brand }} - 1item + {{ v.children.length }}item

@@ -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) } diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue index e9094ae..c7909b8 100644 --- a/src/views/shoppingCart/sc-list.vue +++ b/src/views/shoppingCart/sc-list.vue @@ -1,10 +1,10 @@ @@ -91,11 +99,19 @@ import { FormatBytes, FormatDate } from '@/utils/tools' const emit = defineEmits(['close', 'selected-change']) const props = defineProps({ - isMini: { - type: Boolean, - default: false + title: { type: String, default: '' }, + isMini: { type: Boolean, default: false }, + isView: { type: Boolean, default: false } + }) + const allTotalSize = computed(() => { + const total = list.value.reduce((pre, cur) => pre + cur.fileSize, 0) + const str = FormatBytes(total) + return { + size: str.split(' ')[0], + unit: str.split(' ')[1] } }) + const allAmount = computed(() => list.value.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2)) const selectedCount = computed(() => list.value.filter((v) => v.checked).length) const allSelected = computed(() => list.value.every((v) => v.checked)) const sortBy = ref('') @@ -136,6 +152,39 @@ amount: 9.99, tags: ['female', 'skirt', 'blouse', 'outwear'], checked: false + }, + { + id: 3, + url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png', + title: 'Static Street Suit', + brand: 'Off Grid Apparel', + fileSize: 1024 * 18, // kb + date: '2026-5-21 13:14', + amount: 12, + tags: ['female', 'skirt', 'blouse', 'outwear'], + checked: true + }, + { + id: 4, + url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png', + title: 'Maison Contour Suit', + brand: 'Ivory Muse Studio', + fileSize: 100, // kb + date: '2026-5-21 13:14', + amount: 18, + tags: ['female', 'skirt', 'blouse', 'outwear'], + checked: true + }, + { + id: 5, + url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png', + title: 'Prime Atelier Set', + brand: 'Ivory Muse Studio', + fileSize: 1024 * 24, // kb + date: '2026-5-21 13:14', + amount: 20, + tags: ['female', 'skirt', 'blouse', 'outwear'], + checked: false } ]) const handleAllAllClick = (checked?: boolean) => { @@ -194,6 +243,61 @@ } } } + &.mini.view { + --sc-list-title-padding-bottom: 2.4rem; + --sc-list-list-item-img-width: 9.6rem; + --sc-list-list-item-img-height: 12.2rem; + --sc-list-list-item-padding: 1.6rem; + --sc-list-list-item-margin-bottom: 0.8rem; + --sc-list-list-item-title-font-size: 2rem; + > .header { + border: none; + } + > .list { + > .item { + > .content { + margin-top: 1.2rem; + > .tags { + > .tag { + min-width: 0; + height: 2rem; + line-height: 2rem; + font-size: 1.2rem; + padding: 0 0.8rem; + } + } + } + > .right { + margin-top: 1.2rem; + } + } + } + > .footer { + margin-top: 4.1rem; + > .total { + margin-bottom: 1.7rem; + > .label { + font-family: KaiseiOpti-Medium; + font-size: 2rem; + color: #232323; + } + > .value { + font-family: KaiseiOpti-Medium; + font-size: 2.2rem; + > span { + font-family: KaiseiOpti-Regular; + font-size: 1.8rem; + } + } + } + > .tip { + font-family: KaiseiOpti-Regular; + font-size: 1.2rem; + color: #808080; + margin-top: 2.4rem; + } + } + } &:not(.mini) { > .header { position: sticky;