5d645a8106
- 移除了 x-image 组件中的多余属性 - 更新了 ItemList 组件中的 LOT 编号显示逻辑 -将 home 页面中的 v-show 改为 v-if - 重构了 tangPopup 组件，添加了下拉刷新和上拉加载更多功能
116 lines
3.7 KiB
Vue
116 lines
3.7 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";
|
||
import {ref} from "vue";
|
||
const {pageRef,itemList,getArtworkList, loading: storeLoading,} = goodStore();
|
||
const {auctionData} = liveStore()
|
||
const showDetail=ref(false)
|
||
const localState = ref({
|
||
finished: false,
|
||
refreshing: false,
|
||
showDetail: false,
|
||
showHeight: ''
|
||
})
|
||
const onRefresh = async () => {
|
||
try {
|
||
localState.value.refreshing = true
|
||
localState.value.finished = false
|
||
const { finished } = await getArtworkList(true)
|
||
localState.value.finished = finished
|
||
} finally {
|
||
localState.value.refreshing = 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
|
||
|
||
}
|
||
const loadMore = async () => {
|
||
pageRef.value.page++
|
||
const { finished } = await getArtworkList()
|
||
localState.value.finished = finished
|
||
}
|
||
</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>
|
||
<van-pull-refresh
|
||
v-model="localState.refreshing"
|
||
success-text="刷新成功"
|
||
:success-duration="700"
|
||
@refresh="onRefresh"
|
||
>
|
||
<template #success>
|
||
<van-icon name="success" /> <span>刷新成功</span>
|
||
</template>
|
||
<van-list
|
||
v-model:loading="storeLoading"
|
||
:finished="localState.finished"
|
||
finished-text="没有更多了"
|
||
@load="loadMore"
|
||
>
|
||
<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 bottom-0 absolute">竞拍中</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>
|
||
</van-list>
|
||
</van-pull-refresh>
|
||
|
||
</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> |