510b839a1b
- 从 liveStore 中获取 auctionData，用于展示当前拍卖信息 - 在模板中添加拍卖数据的动态显示，包括当前价、下口价等信息 - 实现拍卖状态的实时更新和对应 UI 的变化 - 优化竞拍列表的展示逻辑，根据不同的拍卖状态显示相应内容 - 在弹窗中添加当前拍卖作品的标识和状态
76 lines
2.4 KiB
Vue
76 lines
2.4 KiB
Vue
<script setup>
|
||
import xPopup from '@/components/x-popup/index.vue'
|
||
import {goodStore} from "@/stores/goods/index.js";
|
||
import xImage from '@/components/x-image/index.vue'
|
||
import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
|
||
import {liveStore} from "~/stores/live/index.js";
|
||
const {pageRef,itemList} = goodStore();
|
||
const {auctionData} = liveStore()
|
||
const showDetail=ref(false)
|
||
const props = defineProps({
|
||
show: Boolean,
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
const emit = defineEmits(['update:show'])
|
||
const showDetailInfo=ref(null)
|
||
const close = () => emit('update:show', false);
|
||
const openShow=(item)=>{
|
||
showDetailInfo.value=item
|
||
showDetail.value=true
|
||
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<x-popup :show="show" @update:show="close">
|
||
<template #title>
|
||
<div class="text-#000 text-16px">拍品列表</div>
|
||
<div class="text-#939393 text-16px ml-14px">共{{ pageRef.itemCount }}个拍品</div>
|
||
</template>
|
||
<div>
|
||
<div
|
||
v-for="(item,index) of itemList"
|
||
:key="item.uuid"
|
||
class="flex mb-21px"
|
||
@click="openShow(item)"
|
||
>
|
||
<div
|
||
class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
|
||
>
|
||
<xImage
|
||
:preview="false"
|
||
class="w-80px h-80px"
|
||
:src="item.artwork?.hdPic"
|
||
:alt="item?.artworkTitle"
|
||
loading="lazy"
|
||
/>
|
||
<div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
|
||
<div v-if="auctionData.artwork.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px">竞拍中</div>
|
||
</div>
|
||
<div>
|
||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||
{{ item.artworkTitle }}
|
||
</div>
|
||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-popup>
|
||
<DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.ellipsis {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style> |