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-04-23 16:11:13 +08:00
parent 98e2548f01
commit ad81feaf81
4 changed files with 213 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/shoppingCart/sc-item.vue Normal file
View File

@@ -0,0 +1,164 @@
<template>
<div class="sc-item">
<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>
<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 },
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, auto);
> * {
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;
}
> .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, auto);
margin-top: var(--sc-item-right-margin-top, 0);
> .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;
}
}
}
}
</style>