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";
const {auctionData} = liveStore()
const {userInfo}= authStore()
const headList=[
  {
    label:'领先',
    color:'#D03050',
    value:'head'
  },
  {
    label:'出局',
    color:'#939393',
    value:'out'
  },
  {
    label:'成交',
    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">即将开始下一个拍品</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'?'现场竞价':'网络竞价' }}</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?'我':'' }}</div>
        </div>
      </template>
      <template v-if="auctionData.wsType==='newArtwork'">
        <div class="text-#939393 text-14px">开始拍卖</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>