76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<script setup>
|
|
import {publicStore} from "@/stores/public/index.js";
|
|
import {useI18n} from 'vue-i18n'
|
|
import {outBuyList} from "@/api-public/public/index.js";
|
|
|
|
const {auctionData} = publicStore()
|
|
function formatThousands(num) {
|
|
|
|
return Number(num).toLocaleString();
|
|
}
|
|
const headList=[
|
|
{
|
|
label:useI18n().t('live_room.head'),
|
|
color:'#D03050',
|
|
value:'head'
|
|
},
|
|
{
|
|
label:useI18n().t('live_room.out'),
|
|
color:'#939393',
|
|
value:'out'
|
|
},
|
|
{
|
|
label:useI18n().t('live_room.success'),
|
|
color:'#34B633',
|
|
value:'success'
|
|
}
|
|
]
|
|
const buyList=ref([])
|
|
const headItem=(statusCode)=>{
|
|
return headList.find(x=>x.value===statusCode)
|
|
}
|
|
onMounted(async()=>{
|
|
const res=await outBuyList({uuid:auctionData.value.uuid})
|
|
buyList.value=res.data.buys
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
id="list-container"
|
|
class="w-344px h-86px overflow-y-auto bg-#fff rounded-4px text-14px text-#939393 pt-7px pb-7px px-11px flex flex-col justify-between"
|
|
>
|
|
<transition-group name="list" tag="div">
|
|
|
|
<template v-if="buyList?.length>0">
|
|
<div v-for="(item, index) in buyList" :key="index" class="flex flex-shrink-0">
|
|
<!-- 将每列宽度改为相等(约86px)，添加文本溢出处理 -->
|
|
<div class="text-start shrink-0 w-1/4 truncate" :style="`color: ${headItem(item.statusCode).color}`">
|
|
{{ headItem(item.statusCode).label }}
|
|
</div>
|
|
<div class="text-start shrink-0 w-1/4 truncate">
|
|
{{ item.auctionType==='local'? $t('live_room.spot'):$t('live_room.network') }}
|
|
</div>
|
|
<div class="text-start shrink-0 w-1/4 truncate">
|
|
{{ item.createdAt }}
|
|
</div>
|
|
<div class="text-start shrink-0 w-1/4 truncate">
|
|
{{item.baseCurrency}}{{ formatThousands(item.baseMoney) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
</transition-group>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.list-enter-active, .list-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
.list-enter-from, .list-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
</style> |