aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home修改

Browse Source
This commit is contained in:
李志鹏
2026-05-11 13:56:10 +08:00
parent 51e6933f9f
commit 33043eedf1
20 changed files with 340 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/shoppingCart/order-summary.vue
View File

@@ -18,16 +18,6 @@
>
</div>
<br />
<div class="total-file-size">
<span class="label">
<span class="icon"><svg-icon name="order-file" size="18" /></span>
<span class="text">Total File Size</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>
@@ -65,14 +55,6 @@
})
return arr
})
const totalSize = computed(() => {
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.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
const handleCheckout = () => {
console.log('购买：', props.list)

374
src/views/shoppingCart/sc-item.vue
View File

@@ -1,200 +1,200 @@
<template>
<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
<slot name="checkbox" />
<img :src="info.url" />
<div class="content">
<div class="title">{{ info.title }}</div>
<div class="brand">
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
<span class="text">{{ info.brand }}</span>
</div>
<div class="tags" v-if="showTags">
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
</div>
<div class="size" v-if="showSize">
<div class="icon"><svg-icon name="order-file" size="18" /></div>
<div class="text">
<span>{{ FormatBytes(info.fileSize) }}</span>
<span v-if="showSizeDate"
>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
FormatDate(info.date, 'SM D, YYYY, h:mm A')
}}</span
>
</div>
</div>
</div>
<div class="right">
<div class="amount">${{ info.amount }}<span> HKD</span></div>
<SvgIcon v-if="orderActionsLayout" class="download" name="download" size="32" color="#232323" />
<div class="remove" v-if="showRemove" @click="onRemove">
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
<span class="text">Remove</span>
</div>
</div>
</div>
<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
<slot name="checkbox" />
<img :src="info.url" />
<div class="content">
<div class="title">{{ info.title }}</div>
<div class="brand">
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
<span class="text">{{ info.brand }}</span>
</div>
<div class="tags" v-if="showTags">
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
</div>
<div class="date" v-if="showDate">
<!-- <div class="icon"><svg-icon name="order-file" size="18" /></div> -->
<div class="text">
{{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
</div>
</div>
</div>
<div class="right">
<div class="amount">${{ info.amount }}<span> HKD</span></div>
<SvgIcon
v-if="orderActionsLayout"
class="download"
name="download"
size="32"
color="#232323"
/>
<div class="remove" v-if="showRemove" @click="onRemove">
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
<span class="text">Remove</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { FormatBytes, FormatDate } from '@/utils/tools'
const emit = defineEmits(['remove'])
const props = defineProps({
showTags: { type: Boolean, default: true },
showSize: { type: Boolean, default: true },
showSizeDate: { type: Boolean, default: true },
showRemove: { type: Boolean, default: true },
orderActionsLayout: { type: Boolean, default: false },
info: { type: Object, default: () => {} }
})
const onRemove = () => {
emit('remove', props.info.id)
}
import { computed, ref, onMounted } from 'vue'
import { FormatBytes, FormatDate } from '@/utils/tools'
const emit = defineEmits(['remove'])
const props = defineProps({
showTags: { type: Boolean, default: true },
showDate: { type: Boolean, default: true },
showRemove: { type: Boolean, default: true },
orderActionsLayout: { type: Boolean, default: false },
info: { type: Object, default: () => {} }
})
const onRemove = () => {
emit('remove', props.info.id)
}
</script>
<style lang="less" scoped>
.sc-item {
border-bottom: 0.1rem solid #c4c4c4;
padding: var(--sc-item-padding, 2.4rem 0);
display: flex;
align-items: center;
> img {
width: var(--sc-item-img-width, 14.8rem);
height: var(--sc-item-img-height, 18.8rem);
object-fit: contain;
background-color: #f6f6f6;
}
> .content {
flex: 1;
margin: var(--sc-item-content-margin, 0 4rem);
align-self: var(--sc-item-content-align-self);
> * {
margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
&:last-child {
margin-bottom: 0;
}
}
> .title {
font-family: KaiseiOpti-Bold;
font-size: var(--sc-item-title-font-size, 2.4rem);
color: #232323;
}
> .brand {
display: flex;
align-items: center;
> .icon {
width: 2.4rem;
height: 2.4rem;
margin-right: 1rem;
}
> .text {
font-size: var(--sc-item-brand-font-size, 1.6rem);
text-decoration: underline;
color: #232323;
}
}
> .tags {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
> .tag {
min-width: var(--sc-item-tag-min-width, 8.8rem);
height: var(--sc-item-tag-height, 2.4rem);
line-height: var(--sc-item-tag-height, 2.4rem);
border-radius: var(--sc-item-tag-radius, 2.4rem);
font-size: var(--sc-item-tag-font-size, 1.4rem);
padding: var(--sc-item-tag-padding, 0 1rem);
text-align: center;
color: #8f8f8f;
background-color: #eee;
}
}
> .size {
display: flex;
align-items: center;
> .icon {
width: 2.4rem;
height: 2.4rem;
margin-right: 1rem;
color: #808080;
}
.sc-item {
border-bottom: 0.1rem solid #c4c4c4;
padding: var(--sc-item-padding, 2.4rem 0);
display: flex;
align-items: center;
> img {
width: var(--sc-item-img-width, 14.8rem);
height: var(--sc-item-img-height, 18.8rem);
object-fit: contain;
background-color: #f6f6f6;
}
> .content {
flex: 1;
margin: var(--sc-item-content-margin, 0 4rem);
align-self: var(--sc-item-content-align-self);
> * {
margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
&:last-child {
margin-bottom: 0;
}
}
> .title {
font-family: KaiseiOpti-Bold;
font-size: var(--sc-item-title-font-size, 2.4rem);
color: #232323;
}
> .brand {
display: flex;
align-items: center;
> .icon {
width: 2.4rem;
height: 2.4rem;
margin-right: 1rem;
}
> .text {
font-size: var(--sc-item-brand-font-size, 1.6rem);
text-decoration: underline;
color: #232323;
}
}
> .tags {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
> .tag {
min-width: var(--sc-item-tag-min-width, 8.8rem);
height: var(--sc-item-tag-height, 2.4rem);
line-height: var(--sc-item-tag-height, 2.4rem);
border-radius: var(--sc-item-tag-radius, 2.4rem);
font-size: var(--sc-item-tag-font-size, 1.4rem);
padding: var(--sc-item-tag-padding, 0 1rem);
text-align: center;
color: #8f8f8f;
background-color: #eee;
}
}
> .date {
display: flex;
align-items: center;
> .icon {
width: 2.4rem;
height: 2.4rem;
margin-right: 1rem;
color: #808080;
}
> .text {
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #808080;
}
}
}
> .right {
align-self: var(--sc-item-right-align-self, end);
display: var(--sc-item-right-display);
flex-direction: var(--sc-item-right-flex-direction);
justify-content: var(--sc-item-right-justify-content);
align-items: var(--sc-item-right-align-items);
height: var(--sc-item-right-height);
margin-top: var(--sc-item-right-margin-top);
> .amount {
font-family: KaiseiOpti-Bold;
font-size: var(--sc-item-amount-font-size, 2.2rem);
color: #232323;
> span {
font-size: var(--sc-item-currency-font-size, 1.4rem);
color: #585858;
vertical-align: bottom;
}
}
> .remove {
margin-top: var(--sc-item-remove-margin-top, 9rem);
display: flex;
align-items: center;
justify-content: center;
user-select: none;
cursor: pointer;
> .icon {
width: 2rem;
height: 2rem;
margin-right: 0.4rem;
}
> .text {
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #808080;
}
}
}
&.is-order-actions-layout {
display: grid;
grid-template-columns:
var(--sc-item-img-width, 14.8rem)
minmax(0, 1fr)
var(--sc-item-order-amount-width, 12rem)
var(--sc-item-order-action-width, 18rem);
column-gap: var(--sc-item-order-column-gap, 2rem);
> .text {
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #808080;
}
}
}
> .right {
align-self: var(--sc-item-right-align-self, end);
display: var(--sc-item-right-display);
flex-direction: var(--sc-item-right-flex-direction);
justify-content: var(--sc-item-right-justify-content);
align-items: var(--sc-item-right-align-items);
height: var(--sc-item-right-height);
margin-top: var(--sc-item-right-margin-top);
> .amount {
font-family: KaiseiOpti-Bold;
font-size: var(--sc-item-amount-font-size, 2.2rem);
color: #232323;
> span {
font-size: var(--sc-item-currency-font-size, 1.4rem);
color: #585858;
vertical-align: bottom;
}
}
> .remove {
margin-top: var(--sc-item-remove-margin-top, 9rem);
display: flex;
align-items: center;
justify-content: center;
user-select: none;
cursor: pointer;
> .icon {
width: 2rem;
height: 2rem;
margin-right: 0.4rem;
}
> .text {
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #808080;
}
}
}
&.is-order-actions-layout {
display: grid;
grid-template-columns:
var(--sc-item-img-width, 14.8rem)
minmax(0, 1fr)
var(--sc-item-order-amount-width, 12rem)
var(--sc-item-order-action-width, 18rem);
column-gap: var(--sc-item-order-column-gap, 2rem);
> .content {
min-width: 0;
}
> .content {
min-width: 0;
}
> .right {
display: contents;
> .right {
display: contents;
> .amount {
grid-column: 3;
align-self: center;
white-space: nowrap;
transform: translateX(var(--sc-item-order-actions-offset, 0));
}
> .amount {
grid-column: 3;
align-self: center;
white-space: nowrap;
transform: translateX(var(--sc-item-order-actions-offset, 0));
}
.c-svg {
width: initial;
height: initial;
}
> .download {
grid-column: 4;
cursor: pointer;
transform: translateX(var(--sc-item-order-actions-offset, 0));
}
}
}
}
.c-svg {
width: initial;
height: initial;
}
> .download {
grid-column: 4;
cursor: pointer;
transform: translateX(var(--sc-item-order-actions-offset, 0));
}
}
}
}
</style>

14
src/views/shoppingCart/sc-list.vue
View File

@@ -43,8 +43,7 @@
:key="v.id"
:info="v"
:show-tags="!isMini || isView"
:show-size="!isMini"
:show-size-date="!isMini"
:show-date="!isMini"
:show-remove="!isView"
@remove="handleRemoveClick"
>
@@ -54,12 +53,6 @@
</sc-item>
</div>
<div class="footer" v-if="isMini">
<div class="total size" v-show="isView">
<span class="label">Total File Size</span>
<span class="value"
>{{ allTotalSize.size }}<span>&nbsp;{{ allTotalSize.unit }}</span></span
>
</div>
<div class="total" v-show="list.length > 0 || isView">
<span class="label">Total</span>
<span class="value">${{ allAmount }}<span> HKD</span></span>
@@ -117,7 +110,6 @@
url: 'http://118.31.39.42:3000/falls/shopping-cart-1.png',
title: 'North Outfit Set',
brand: 'Roaming Clouds',
fileSize: 1024, // kb
date: '2026-5-20 5:20',
amount: 49.99,
tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -128,7 +120,6 @@
url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
title: 'Weekend Drift Co-ord',
brand: 'Urban Line Edit',
fileSize: 1225, // kb
date: '2026-5-21 13:14',
amount: 9.99,
tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -139,7 +130,6 @@
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'],
@@ -150,7 +140,6 @@
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'],
@@ -161,7 +150,6 @@
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'],