106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
|
<script setup>
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const finished = ref(false)
|
|||
|
|
const refreshing = ref(false)
|
|||
|
|
import liveBroadcast from '@/components/liveBroadcast/index.vue'
|
|||
|
|
const list = ref([{
|
|||
|
|
image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
|
|||
|
|
title: '张天赐 | 日出而作，日落而息',
|
|||
|
|
startingPrice: 'RMB 1,000',
|
|||
|
|
transactionPrice: 'RMB 10,000',
|
|||
|
|
}, {
|
|||
|
|
image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
|
|||
|
|
title: '张天赐 | 日出而作，日落而息',
|
|||
|
|
startingPrice: 'RMB 1,000',
|
|||
|
|
transactionPrice: '',
|
|||
|
|
}, {
|
|||
|
|
image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
|
|||
|
|
title: '张天赐 | 日出而作，日落而息',
|
|||
|
|
startingPrice: 'RMB 1,000',
|
|||
|
|
transactionPrice: '',
|
|||
|
|
}])
|
|||
|
|
const page = ref(1)
|
|||
|
|
|
|||
|
|
// 加载数据
|
|||
|
|
async function loadData() {
|
|||
|
|
// try {
|
|||
|
|
// loading.value = true
|
|||
|
|
// // 模拟API请求
|
|||
|
|
// const {data} = await fetchAuctionList({page: page.value})
|
|||
|
|
//
|
|||
|
|
// if (refreshing.value) {
|
|||
|
|
// list.value = []
|
|||
|
|
// refreshing.value = false
|
|||
|
|
// }
|
|||
|
|
//
|
|||
|
|
// list.value.push(...data)
|
|||
|
|
// page.value++
|
|||
|
|
//
|
|||
|
|
// // 如果没有更多数据了
|
|||
|
|
// if (data.length < 10) {
|
|||
|
|
// finished.value = true
|
|||
|
|
// }
|
|||
|
|
// } catch (error) {
|
|||
|
|
// console.error(error)
|
|||
|
|
// } finally {
|
|||
|
|
// loading.value = false
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下拉刷新
|
|||
|
|
function onRefresh() {
|
|||
|
|
finished.value = false
|
|||
|
|
page.value = 1
|
|||
|
|
refreshing.value = true
|
|||
|
|
loadData()
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<liveBroadcast></liveBroadcast>
|
|||
|
|
<van-tabs animated>
|
|||
|
|
<van-tab title="拍品列表">
|
|||
|
|
<div class="px-[16px] pt-[16px]">
|
|||
|
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|||
|
|
<van-list
|
|||
|
|
v-model:loading="loading"
|
|||
|
|
:finished="finished"
|
|||
|
|
finished-text="没有更多了"
|
|||
|
|
@load="loadData"
|
|||
|
|
>
|
|||
|
|
<!-- 拍品列表 -->
|
|||
|
|
<div class="grid grid-cols-2 gap-4">
|
|||
|
|
<div v-for="(item,index) in list" :key="item.id" class="pb-[20px]">
|
|||
|
|
<div class="relative w-[164px]">
|
|||
|
|
<van-image width="100%" :src="item.image" fit="contain" />
|
|||
|
|
<div class="align-center absolute left-8px top-8px h-17px w-45px flex justify-center bg-#2B53AC text-12px text-[#fff]">
|
|||
|
|
LOT{{index+1}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="text-[14px] text-[#000]">
|
|||
|
|
{{ item.title }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[12px] text-[#575757]">
|
|||
|
|
起拍价：{{ item.startingPrice }}
|
|||
|
|
</div>
|
|||
|
|
<div v-if="item.transactionPrice" class="text-[12px] text-[#B58047]">
|
|||
|
|
成交价：¥{{ item.transactionPrice }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-list>
|
|||
|
|
</van-pull-refresh>
|
|||
|
|
</div>
|
|||
|
|
</van-tab>
|
|||
|
|
<van-tab title="拍卖说明">内容 2</van-tab>
|
|||
|
|
</van-tabs>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
</style>
|