From ad81feaf81315bb109734a511f48f17a13188725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Thu, 23 Apr 2026 16:11:13 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 1 - src/views/shoppingCart/index.vue | 3 +- src/views/shoppingCart/sc-item.vue | 164 +++++++++++++++++++++ src/views/shoppingCart/sc-list.vue | 228 ++++++----------------------- 4 files changed, 213 insertions(+), 183 deletions(-) create mode 100644 src/views/shoppingCart/sc-item.vue diff --git a/src/App.vue b/src/App.vue index ff5e167..40ff505 100644 --- a/src/App.vue +++ b/src/App.vue @@ -27,7 +27,6 @@ }) onMounted(() => { observer.observe(viewRef.value) - console.log('onMounted') }) onBeforeUnmount(() => { observer.disconnect() diff --git a/src/views/shoppingCart/index.vue b/src/views/shoppingCart/index.vue index 9056171..25ce45f 100644 --- a/src/views/shoppingCart/index.vue +++ b/src/views/shoppingCart/index.vue @@ -2,8 +2,9 @@
- + +
diff --git a/src/views/shoppingCart/sc-item.vue b/src/views/shoppingCart/sc-item.vue new file mode 100644 index 0000000..d96d4cd --- /dev/null +++ b/src/views/shoppingCart/sc-item.vue @@ -0,0 +1,164 @@ + + + + + \ No newline at end of file diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue index c7909b8..769b106 100644 --- a/src/views/shoppingCart/sc-list.vue +++ b/src/views/shoppingCart/sc-list.vue @@ -43,38 +43,20 @@
Discover new fashion assets and add them to your cart.
-
- - -
-
{{ v.title }}
-
- - {{ v.brand }} -
-
- {{ tag }} -
-
-
-
- {{ FormatBytes(v.fileSize) }} -     |   {{ - FormatDate(v.date, 'SM D, YYYY, h:mm A') - }} -
-
-
-
-
${{ v.amount }} HKD
-
- - Remove -
-
-
+ + +
@@ -97,6 +79,7 @@ + + \ No newline at end of file diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue index 769b106..9717385 100644 --- a/src/views/shoppingCart/sc-list.vue +++ b/src/views/shoppingCart/sc-list.vue @@ -37,12 +37,7 @@
-
- -
Your Cart is empty
-
Discover new fashion assets and add them to your cart.
- -
+
-
+
Total File Size {{ allTotalSize.size }} {{ allTotalSize.unit }}
-
+
Total ${{ allAmount }} HKD
@@ -80,6 +75,7 @@ import { computed, ref, onMounted } from 'vue' import { FormatBytes, FormatDate } from '@/utils/tools' import scItem from './sc-item.vue' + import scListNull from './sc-list-null.vue' const emit = defineEmits(['close', 'selected-change']) const props = defineProps({ title: { type: String, default: '' }, @@ -286,7 +282,7 @@ } } > .list { - > .list-null { + > .sc-list-null { margin-top: 10rem; } } @@ -340,41 +336,6 @@ } } > .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; - } - } } > .footer { margin-top: 3rem; From 71cfef996dccc1a0d94516faaf076512acea3254 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Thu, 23 Apr 2026 17:03:45 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=AD=97=E8=8A=82?= =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/tools.ts | 12 +++++++----- src/views/shoppingCart/sc-list.vue | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/utils/tools.ts b/src/utils/tools.ts index 738e4b2..e55814a 100644 --- a/src/utils/tools.ts +++ b/src/utils/tools.ts @@ -197,15 +197,17 @@ export function CountDown(time: number) { /** * 字节转换为可读格式 * @param {number} bytes - 字节数 - * @param {number} decimals - 保留小数位数，默认2位 + * @param {number} options - 选项对象 + * @param {number} options.decimals - 保留小数位数，默认2位 + * @param {boolean} options.unitBig - 是否使用大写单位，默认false * @returns {string} 格式化后的字符串 */ -export function FormatBytes(bytes, decimals = 2) { - if (bytes === 0) return '0 B'; +export function FormatBytes(bytes, options: { decimals?: number, unitBig?: boolean } = {}) { if (!bytes || isNaN(bytes)) return '0 B'; + const { decimals = 2, unitBig = false } = options; const k = 1024; - const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const sizes = unitBig ? ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['b', 'kb', 'mb', 'gb', 'tb', 'pb', 'eb', 'zb', 'yb']; const i = Math.floor(Math.log(bytes) / Math.log(k)); const value = bytes / Math.pow(k, i); return `${Number(value.toFixed(decimals))} ${sizes[i]}`; -} +} \ No newline at end of file diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue index 9717385..c5c8332 100644 --- a/src/views/shoppingCart/sc-list.vue +++ b/src/views/shoppingCart/sc-list.vue @@ -84,7 +84,7 @@ }) const allTotalSize = computed(() => { const total = list.value.reduce((pre, cur) => pre + cur.fileSize, 0) - const str = FormatBytes(total) + const str = FormatBytes(total, { unitBig: true }) return { size: str.split(' ')[0], unit: str.split(' ')[1]