510b839a1b
- 从 liveStore 中获取 auctionData，用于展示当前拍卖信息 - 在模板中添加拍卖数据的动态显示，包括当前价、下口价等信息 - 实现拍卖状态的实时更新和对应 UI 的变化 - 优化竞拍列表的展示逻辑，根据不同的拍卖状态显示相应内容 - 在弹窗中添加当前拍卖作品的标识和状态
90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
import {liveStore} from "@/stores/live/index.js";
|
|
import {authStore} from "~/stores/auth/index.js";
|
|
const {auctionData} = liveStore()
|
|
const {userInfo}= authStore()
|
|
const list = ref([
|
|
{
|
|
a: '领先',
|
|
b: '现场竞价',
|
|
c: '10:12:12',
|
|
d: 'RMB5,500',
|
|
e: '我'
|
|
}
|
|
]);
|
|
|
|
let intervalId = null;
|
|
|
|
const addItem = () => {
|
|
list.value.push({
|
|
a: '领先',
|
|
b: '现场竞价',
|
|
c: '10:12:12',
|
|
d: 'RMB5,500',
|
|
e: ''
|
|
});
|
|
nextTick(() => {
|
|
scrollToBottom();
|
|
});
|
|
};
|
|
|
|
const scrollToBottom = () => {
|
|
const container = document.getElementById('list-container');
|
|
if (container) {
|
|
setTimeout(() => {
|
|
container.scrollTop = container.scrollHeight;
|
|
}, 100);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
// 每秒添加一条数据
|
|
/* intervalId = setInterval(() => {
|
|
addItem();
|
|
}, 1000);*/
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
// 清理定时器
|
|
if (intervalId) {
|
|
clearInterval(intervalId);
|
|
}
|
|
});
|
|
</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="flex-grow-1 text-start" :style="`color: ${item.statusCode==='head'?'#D03050':'#939393'}`" >{{ item.statusCode==='head'?'领先':'出局' }}</div>
|
|
<div class="flex-grow-1 text-start">{{ item.auctionType==='local'?'现场竞价':'网络竞价' }}</div>
|
|
<div class="flex-grow-1 text-start">{{ item.createdAt }}</div>
|
|
<div class="flex-grow-1 text-start">{{ item.baseMoney }}</div>
|
|
<div class="flex-grow-1 text-start text-#2B53AC">{{ 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> |