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

购物车

Browse Source
This commit is contained in:
李志鹏
2026-05-21 14:36:29 +08:00
parent 31de24cc2b
commit e7957532e8
9 changed files with 160 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,14 @@
<template>
<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
<div
class="sc-item"
:class="{
'is-order-actions-layout': orderActionsLayout,
disabled
}"
>
<slot name="checkbox" />
<img :src="info.url" />
{{ info.status }}
<img :src="info.cover" />
<div class="content">
<div class="title">{{ info.title }}</div>
<div class="brand">
@@ -12,14 +19,20 @@
<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>
<div class="unshelve" v-show="disabled">
<div class="title">
<span><svg-icon name="order-warning" size="20" /></span>
No Longer Available
</div>
<div class="tip">Delisted from marketplace</div>
</div>
<div class="amount" v-show="!disabled">${{ info.amount }}<span> HKD</span></div>
<SvgIcon
v-if="orderActionsLayout"
class="download"
@@ -44,10 +57,22 @@
showDate: { type: Boolean, default: true },
showRemove: { type: Boolean, default: true },
orderActionsLayout: { type: Boolean, default: false },
info: { type: Object, default: () => {} }
info: {
type: Object as () => {
status: number
title: string
brand: string
tags: string[]
date: string
amount: number
cover: string
},
default: () => {}
},
disabled: { type: Boolean, default: false }
})
const onRemove = () => {
emit('remove', props.info.id)
emit('remove', props.info)
}
</script>
@@ -76,7 +101,7 @@
> .title {
font-family: KaiseiOpti-Bold;
font-size: var(--sc-item-title-font-size, 2.4rem);
color: #232323;
color: var(--sc-item-title-color, #232323);
}
> .brand {
display: flex;
@@ -85,11 +110,12 @@
width: 2.4rem;
height: 2.4rem;
margin-right: 1rem;
color: var(--sc-item-brand-color, #232323);
}
> .text {
font-size: var(--sc-item-brand-font-size, 1.6rem);
text-decoration: underline;
color: #232323;
color: var(--sc-item-brand-color, #232323);
}
}
> .tags {
@@ -104,24 +130,17 @@
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;
color: var(--sc-item-tag-color, #8f8f8f);
background-color: var(--sc-item-tag-bg-color, #eee);
}
}
> .date {
display: flex;
align-items: center;
> .icon {
width: 2.4rem;
height: 2.4rem;
margin-right: 1rem;
color: #808080;
}
color: var(--sc-item-date-color, #808080);
> .text {
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #808080;
}
}
}
@@ -133,6 +152,26 @@
align-items: var(--sc-item-right-align-items);
height: var(--sc-item-right-height);
margin-top: var(--sc-item-right-margin-top);
> .unshelve {
display: flex;
flex-direction: column;
align-items: flex-end;
> .title {
margin-bottom: 0.8rem;
font-family: KaiseiOpti-Bold;
font-size: 1.6rem;
color: #000;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
}
> .tip {
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #585858;
}
}
> .amount {
font-family: KaiseiOpti-Bold;
font-size: var(--sc-item-amount-font-size, 2.2rem);
@@ -147,7 +186,7 @@
margin-top: var(--sc-item-remove-margin-top, 9rem);
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-end;
user-select: none;
cursor: pointer;
> .icon {
@@ -196,5 +235,14 @@
}
}
}
&.disabled {
--sc-item-title-color: #cbcbcb;
--sc-item-brand-color: #cbcbcb;
--sc-item-date-color: #cbcbcb;
--sc-item-tag-color: #cbcbcb;
> img {
opacity: 0.5;
}
}
}
</style>