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

Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Aida_Purchaser_Front

Browse Source
This commit is contained in:
X1627315083@163.com
2026-04-23 14:30:11 +08:00
parent 66b019eb2a 4c2edb53e4
commit bd35b3f89f
5 changed files with 164 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/shoppingCart/index.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="shopping-cart">
<div class="content">
<sc-list />
<sc-list is-mini style="flex: 0.6; height: var(--app-view-height)" />
<!-- <order-summary /> -->
<sc-list @selected-change="(v) => (selectedList = v)" />
<order-summary :brands-list="selectedList" />
</div>
<my-footer />
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, defineComponent, onActivated } from 'vue'
import { computed, onMounted, ref } from 'vue'
import orderSummary from './order-summary.vue'
import scList from './sc-list.vue'
import myFooter from '@/components/Footer.vue'
const selectedList = ref([])
</script>
<style lang="less" scoped>

52
src/views/shoppingCart/order-summary.vue
View File

@@ -10,12 +10,9 @@
<span class="icon"><svg-icon name="order-shop" size="18" /></span>
<span class="text">Brands</span>
</div>
<div class="brands-item" v-for="v in brandsList" :key="v.name">
<span class="label">{{ v.name }}</span>
<span class="value"
><span>{{ v.count }}</span
>item</span
>
<div class="brands-item" v-for="v in brandsList" :key="v.brand">
<span class="label">{{ v.brand }}</span>
<span class="value"><span>1</span>item</span>
</div>
<br />
<div class="total-file-size">
@@ -23,36 +20,47 @@
<span class="icon"><svg-icon name="order-file" size="18" /></span>
<span class="text">Total File Size</span>
</span>
<span class="value">36 <span>mb</span></span>
<span class="value"
>{{ totalSize.size }} <span>{{ totalSize.unit }}</span></span
>
</div>
<div class="hr"></div>
<br />
<div class="total">
<span class="label">Total</span>
<span class="value"><span>$45.00</span> HKD</span>
<span class="value"
><span>${{ totalAmount }}</span> HKD</span
>
</div>
<div class="hr"></div>
<button class="checkout-btn" custom="black">CHECKOUT SELECTED</button>
<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'
const brandsList = ref([
{
name: 'Roaming Clouds',
count: 1
},
{
name: 'Off Grid Apparel',
count: 1
},
{
name: 'Ivory Muse Studio',
count: 1
import { FormatBytes, FormatDate } from '@/utils/tools'
const props = defineProps({
brandsList: {
type: Array,
default: () => []
}
])
})
const totalSize = computed(() => {
const total = props.brandsList.reduce((pre, cur) => pre + cur.fileSize, 0)
const str = FormatBytes(total)
return {
size: str.split(' ')[0],
unit: str.split(' ')[1]
}
})
const totalAmount = computed(() =>
props.brandsList.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2)
)
const handleCheckout = () => {
console.log('购买：', props.brandsList)
}
</script>
<style lang="less" scoped>

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

@@ -10,11 +10,15 @@
</div>
<div class="options" v-if="!isMini">
<div class="left">
<el-checkbox v-model="check" :indeterminate="true" />
<span class="count">3 Selected</span>
<el-checkbox
:model-value="allSelected"
:indeterminate="selectedCount === 0 ? false : selectedCount < list.length"
@click="handleAllAllClick"
/>
<span class="count">{{ selectedCount }}&nbsp;&nbsp;Selected</span>
<div class="hr"></div>
<div class="btn">Select All</div>
<div class="btn">Deselect All</div>
<div class="btn" @click="handleAllAllClick(true)">Select All</div>
<div class="btn" @click="handleAllAllClick(false)">Deselect All</div>
</div>
<div class="right">
<el-select v-model="sortBy" placeholder="Sort By" :teleported="false">
@@ -33,8 +37,14 @@
</div>
</div>
<div class="list">
<div class="list-null" v-show="list.length === 0">
<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>
<div class="item" v-for="v in list" :key="v.id">
<el-checkbox v-model="v.checked" v-if="!isMini" />
<el-checkbox v-model="v.checked" v-if="!isMini" @change="handleSelectedChange" />
<img :src="v.url" />
<div class="content">
<div class="title">{{ v.title }}</div>
@@ -48,9 +58,12 @@
<div class="size">
<div class="icon"><svg-icon name="order-file" size="18" /></div>
<div class="text">
{{ v.fileSize }}kb{{
isMini ? '' : ` &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;${v.date}`
}}
<span>{{ FormatBytes(v.fileSize) }}</span>
<span v-if="!isMini"
>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
FormatDate(v.date, 'SM D, YYYY, h:mm A')
}}</span
>
</div>
</div>
</div>
@@ -64,7 +77,7 @@
</div>
</div>
<div class="footer" v-if="isMini">
<div class="total">
<div class="total" v-show="list.length > 0">
<span class="label">Total</span>
<span class="value">$45.00<span> HKD</span></span>
</div>
@@ -74,16 +87,17 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const emit = defineEmits(['close'])
import { computed, ref, onMounted } from 'vue'
import { FormatBytes, FormatDate } from '@/utils/tools'
const emit = defineEmits(['close', 'selected-change'])
const props = defineProps({
isMini: {
type: Boolean,
default: false
}
})
const check = ref(true)
const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
const allSelected = computed(() => list.value.every((v) => v.checked))
const sortBy = ref('')
const sortByOptions = ref([
{
@@ -107,7 +121,7 @@
title: 'North Outfit Set',
brand: 'Roaming Clouds',
fileSize: 1024, // kb
date: 'Feb 16, 2026, 11:34 PM',
date: '2026-5-20 5:20',
amount: 49.99,
tags: ['female', 'skirt', 'blouse', 'outwear'],
checked: true
@@ -117,16 +131,31 @@
url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
title: 'Weekend Drift Co-ord',
brand: 'Urban Line Edit',
fileSize: 100, // kb
date: 'Feb 16, 2026, 11:34 PM',
fileSize: 1225, // kb
date: '2026-5-21 13:14',
amount: 9.99,
tags: ['female', 'skirt', 'blouse', 'outwear'],
checked: false
}
])
const handleAllAllClick = (checked?: boolean) => {
const checked_ = typeof checked === 'boolean' ? checked : !allSelected.value
list.value.forEach((v) => (v.checked = checked_))
handleSelectedChange()
}
const handleSelectedChange = () => {
const arr = list.value.filter((v) => v.checked)
emit('selected-change', arr)
}
const onClose = () => {
emit('close')
}
onMounted(() => {
handleSelectedChange()
})
const handleExploreClick = () => {
console.log('探索')
}
</script>
<style lang="less" scoped>
@@ -182,6 +211,11 @@
background-color: #fff;
}
}
> .list {
> .list-null {
margin-top: 10rem;
}
}
}
> .header {
border-bottom: 0.1rem solid #c4c4c4;
@@ -233,6 +267,40 @@
}
> .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;
}
}
> .item {
border-bottom: 0.1rem solid #c4c4c4;
padding: var(--sc-list-list-item-padding, 2.4rem 0);