167 lines
3.3 KiB
Vue
167 lines
3.3 KiB
Vue
<template>
|
|
<div class="order-summary">
|
|
<div class="title">Order Summary</div>
|
|
<div class="count">
|
|
<span class="label">Selected</span>
|
|
<span class="value">{{ brandsList.length }}</span>
|
|
</div>
|
|
<div class="hr"></div>
|
|
<div class="brands-header">
|
|
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
|
<span class="text">Brands</span>
|
|
</div>
|
|
<div class="brands-item" v-for="v in brandsList" :key="v.brand">
|
|
<span class="label">{{ v.brand }}</span>
|
|
<span class="value"
|
|
><span>{{ v.children.length }}</span
|
|
>item</span
|
|
>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<div class="total">
|
|
<span class="label">Total</span>
|
|
<span class="value"
|
|
><span>${{ totalAmount }}</span> HKD</span
|
|
>
|
|
</div>
|
|
<div class="hr"></div>
|
|
<button class="checkout-btn" custom="black" @click="handleCheckout">CHECKOUT SELECTED</button>
|
|
<div class="tip">Digital assets. Creator retains copyright.</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { FormatBytes, FormatDate } from '@/utils/tools'
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
const brandsList = computed(() => {
|
|
const arr = []
|
|
props.list.forEach((v) => {
|
|
const index = arr.findIndex((v_) => v_.brand === v.brand)
|
|
if (index === -1) {
|
|
arr.push({
|
|
brand: v.brand,
|
|
children: [v]
|
|
})
|
|
} else {
|
|
arr[index].children.push(v)
|
|
}
|
|
})
|
|
return arr
|
|
})
|
|
const totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
|
|
const handleCheckout = () => {
|
|
console.log('购买：', props.list)
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.order-summary {
|
|
width: 39.8rem;
|
|
padding: 3rem 2rem 3rem 2.4rem;
|
|
height: auto;
|
|
background-color: #f6f6f6;
|
|
> .title {
|
|
font-family: KaiseiOpti-Bold;
|
|
font-size: 2.4rem;
|
|
line-height: 2.3rem;
|
|
color: #232323;
|
|
margin-bottom: 1.8rem;
|
|
}
|
|
> div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
> .count {
|
|
color: #232323;
|
|
> .label {
|
|
font-size: 1.6rem;
|
|
}
|
|
> .value {
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
> .hr {
|
|
margin: 1.2rem 0;
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 0.1rem solid #c4c4c4;
|
|
}
|
|
> .brands-header {
|
|
justify-content: flex-start;
|
|
|
|
margin-bottom: 1rem;
|
|
> .icon {
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
margin-right: 0.4rem;
|
|
}
|
|
> .text {
|
|
font-size: 1.4rem;
|
|
color: #232323;
|
|
}
|
|
}
|
|
> .brands-item {
|
|
margin-bottom: 0.8rem;
|
|
padding-left: 1rem;
|
|
font-size: 1.2rem;
|
|
> .label {
|
|
text-decoration: underline;
|
|
color: #585858;
|
|
}
|
|
> .value {
|
|
color: #808080;
|
|
&:deep(span) {
|
|
font-size: 1.4rem;
|
|
color: #585858;
|
|
margin-right: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
> .total-file-size {
|
|
> .label {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> .icon {
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
margin-right: 0.4rem;
|
|
}
|
|
}
|
|
> .value {
|
|
> span {
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
> .total {
|
|
> .value {
|
|
color: #585858;
|
|
> span {
|
|
font-size: 2.2rem;
|
|
color: #232323;
|
|
}
|
|
}
|
|
}
|
|
> .checkout-btn {
|
|
width: 100%;
|
|
margin-top: 3rem;
|
|
}
|
|
> .tip {
|
|
margin-top: 1rem;
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.2rem;
|
|
justify-content: center;
|
|
color: #808080;
|
|
}
|
|
}
|
|
</style>
|