63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<script setup>
|
|
import {liveStore} from "@/stores/live/index.js";
|
|
import {authStore} from "~/stores/auth/index.js";
|
|
import {useI18n} from 'vue-i18n'
|
|
const {auctionData} = liveStore()
|
|
const {userInfo}= authStore()
|
|
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 headItem=(statusCode)=>{
|
|
return headList.find(x=>x.value===statusCode)
|
|
}
|
|
</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="auctionData.wsType==='stopArtwork'">
|
|
<div class="text-#939393 text-14px">{{ $t('live_room.next_lot') }}</div>
|
|
</template>
|
|
<template v-else-if="auctionData.auctionPriceList?.buys?.length>0">
|
|
<div v-for="(item, index) in auctionData.auctionPriceList?.buys" :key="index" class="flex flex-shrink-0 h-25px">
|
|
<div class="text-start shrink-0 w-60px" :style="`color: ${headItem(item.statusCode).color}`" >{{ headItem(item.statusCode).label }}</div>
|
|
<div class="text-start shrink-0 w-80px">{{ item.auctionType==='local'? $t('live_room.spot'):$t('live_room.network') }}</div>
|
|
<div class="text-start shrink-0 w-80px">{{ item.createdAt }}</div>
|
|
<div class="text-start shrink-0 w-80px">{{item.baseCurrency}}{{ item.baseMoney }}</div>
|
|
<div class="text-start text-#2B53AC shrink-0 w-20px">{{ item.userId===userInfo.ID?$t('live_room.me'):'' }}</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="auctionData.wsType==='newArtwork'">
|
|
<div class="text-#939393 text-14px">{{ $t('live_room.start') }}</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> |