liveh5-nuxt/app/pages/liveRoom/components/Broadcast/index.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()
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 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}}{{ formatThousands(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>