249 lines
6.1 KiB
Vue
249 lines
6.1 KiB
Vue
<template>
|
|
<div
|
|
class="sc-item"
|
|
:class="{
|
|
'is-order-actions-layout': orderActionsLayout,
|
|
disabled
|
|
}"
|
|
>
|
|
<slot name="checkbox" />
|
|
<img :src="info.cover" />
|
|
<div class="content">
|
|
<div class="title">{{ info.title }}</div>
|
|
<div class="brand" v-if="showBrand">
|
|
<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="text">
|
|
{{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<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"
|
|
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 },
|
|
showDate: { type: Boolean, default: true },
|
|
showRemove: { type: Boolean, default: true },
|
|
orderActionsLayout: { type: Boolean, default: false },
|
|
showBrand: { type: Boolean, default: true },
|
|
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)
|
|
}
|
|
</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: var(--sc-item-title-color, #232323);
|
|
}
|
|
> .brand {
|
|
display: flex;
|
|
align-items: center;
|
|
> .icon {
|
|
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: var(--sc-item-brand-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: var(--sc-item-tag-color, #8f8f8f);
|
|
background-color: var(--sc-item-tag-bg-color, #eee);
|
|
}
|
|
}
|
|
> .date {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--sc-item-date-color, #808080);
|
|
> .text {
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
}
|
|
> .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);
|
|
> .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);
|
|
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: flex-end;
|
|
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;
|
|
}
|
|
|
|
> .right {
|
|
display: contents;
|
|
|
|
> .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));
|
|
}
|
|
}
|
|
}
|
|
&.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>
|