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

gogogo

Browse Source
This commit is contained in:
李志鹏
2026-04-23 16:35:07 +08:00
parent e8da956543
commit 09125378b6
2 changed files with 60 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/shoppingCart/sc-list-null.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<div class="sc-list-null">
<img src="@/assets/images/shopping-cart-null.png" alt="" />
<div class="title">Your Cart is empty</div>
<div class="tip">Discover new fashion assets and add them to your cart.</div>
<button custom v-show="showButton" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
</div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
const props = defineProps({
showButton: { type: Boolean, default: true }
})
const handleExploreClick = () => {
console.log('探索')
}
</script>
<style lang="less" scoped>
.sc-list-null {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
> img {
width: 14rem;
height: auto;
margin-bottom: 2.4rem;
}
> .title {
font-family: KaiseiOpti-Bold;
font-size: 1.6rem;
color: #979797;
margin-bottom: 0.8rem;
}
> .tip {
width: 50%;
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #979797;
}
> button {
min-width: 30rem;
height: 4.4rem;
border: 0.1rem solid #c4c4c4;
font-family: KaiseiOpti-Medium;
font-size: 1.6rem;
color: #979797;
margin-top: 4.2rem;
}
}
</style>

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

@@ -37,12 +37,7 @@
</div> </div>
</div> </div>
<div class="list"> <div class="list">
<div class="list-null" v-show="list.length === 0"> <sc-list-null v-show="list.length === 0" :show-button="!isMini" />
<img src="@/assets/images/shopping-cart-null.png" alt="" />
<div class="title">Your Cart is empty</div>
<div class="tip">Discover new fashion assets and add them to your cart.</div>
<button custom v-if="!isMini" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
</div>
<sc-item <sc-item
v-for="v in list" v-for="v in list"
:key="v.id" :key="v.id"
@@ -59,13 +54,13 @@
</sc-item> </sc-item>
</div> </div>
<div class="footer" v-if="isMini"> <div class="footer" v-if="isMini">
<div class="total size" v-show="list.length > 0"> <div class="total size" v-show="isView">
<span class="label">Total File Size</span> <span class="label">Total File Size</span>
<span class="value" <span class="value"
>{{ allTotalSize.size }}<span>&nbsp;{{ allTotalSize.unit }}</span></span >{{ allTotalSize.size }}<span>&nbsp;{{ allTotalSize.unit }}</span></span
> >
</div> </div>
<div class="total" v-show="list.length > 0"> <div class="total" v-show="list.length > 0 || isView">
<span class="label">Total</span> <span class="label">Total</span>
<span class="value">${{ allAmount }}<span> HKD</span></span> <span class="value">${{ allAmount }}<span> HKD</span></span>
</div> </div>
@@ -80,6 +75,7 @@
import { computed, ref, onMounted } from 'vue' import { computed, ref, onMounted } from 'vue'
import { FormatBytes, FormatDate } from '@/utils/tools' import { FormatBytes, FormatDate } from '@/utils/tools'
import scItem from './sc-item.vue' import scItem from './sc-item.vue'
import scListNull from './sc-list-null.vue'
const emit = defineEmits(['close', 'selected-change']) const emit = defineEmits(['close', 'selected-change'])
const props = defineProps({ const props = defineProps({
title: { type: String, default: '' }, title: { type: String, default: '' },
@@ -286,7 +282,7 @@
} }
} }
> .list { > .list {
> .list-null { > .sc-list-null {
margin-top: 10rem; margin-top: 10rem;
} }
} }
@@ -340,41 +336,6 @@
} }
} }
> .list { > .list {
// height: 1000px;
> .list-null {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
> img {
width: 14rem;
height: auto;
margin-bottom: 2.4rem;
}
> .title {
font-family: KaiseiOpti-Bold;
font-size: 1.6rem;
color: #979797;
margin-bottom: 0.8rem;
}
> .tip {
width: 50%;
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #979797;
}
> button {
min-width: 30rem;
height: 4.4rem;
border: 0.1rem solid #c4c4c4;
font-family: KaiseiOpti-Medium;
font-size: 1.6rem;
color: #979797;
margin-top: 4.2rem;
}
}
} }
> .footer { > .footer {
margin-top: 3rem; margin-top: 3rem;