131 lines
3.8 KiB
Vue
131 lines
3.8 KiB
Vue
<script setup>
|
||
import {ref} from 'vue'
|
||
import {goodStore} from "@/stores/goods"
|
||
import DetailPopup from '../DetailPopup/index.vue'
|
||
import WaterfallFlow from '@/components/waterfallFlow/index.vue'
|
||
|
||
const {
|
||
itemList,
|
||
pageRef,
|
||
currentItem,
|
||
loading: storeLoading,
|
||
getArtworkList,
|
||
} = goodStore()
|
||
|
||
const localState = ref({
|
||
finished: false,
|
||
refreshing: false,
|
||
showDetail: false,
|
||
showHeight: ''
|
||
})
|
||
// 加载更多
|
||
const loadMore = async () => {
|
||
pageRef.value.page++
|
||
const {finished} = await getArtworkList()
|
||
localState.value.finished = finished
|
||
}
|
||
|
||
// 刷新
|
||
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 openShow = async (item) => {
|
||
localState.value.showDetail = true
|
||
currentItem.value = item
|
||
}
|
||
|
||
/**
|
||
* 将数字格式化为"250XX"格式，其中XX是两位数
|
||
* @param {number} num - 要格式化的数字
|
||
* @return {string} - 格式化后的字符串
|
||
*/
|
||
function formatNumber(num) {
|
||
// 确保输入是有效数字
|
||
if (typeof num !== 'number' && isNaN(Number(num))) {
|
||
throw new Error('输入必须是有效数字');
|
||
}
|
||
|
||
// 转换为数字类型(以防输入是字符串数字)
|
||
const number = Number(num);
|
||
|
||
// 数字部分格式化为两位数，不足补0
|
||
const formattedNum = number.toString().padStart(2, '0');
|
||
|
||
// 添加前缀"250"并返回结果
|
||
return `250${formattedNum}`;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="px-[16px] pt-[16px]">
|
||
<van-pull-refresh
|
||
v-model="localState.refreshing"
|
||
:success-duration="700"
|
||
@refresh="onRefresh"
|
||
>
|
||
<template #success>
|
||
<van-icon name="success"/>
|
||
<span>{{ $t('home.refresh_show') }}</span>
|
||
</template>
|
||
<van-list
|
||
v-model:loading="storeLoading"
|
||
:finished="localState.finished"
|
||
:finished-text="$t('home.finished_text')"
|
||
@load="loadMore"
|
||
>
|
||
<div class="w-full flex gap-[16px]">
|
||
<WaterfallFlow :items="itemList" :column-count="2">
|
||
<template #default="{ item, index }">
|
||
<div
|
||
@click="openShow(item)"
|
||
class="w-full"
|
||
>
|
||
<div class="relative w-full">
|
||
<img
|
||
:src="item.artwork?.hdPic"
|
||
class="w-full object-cover rounded-4px"
|
||
/>
|
||
<div
|
||
class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
|
||
>
|
||
Lot{{ formatNumber(item.index) }}
|
||
</div>
|
||
</div>
|
||
<div class="pt-[8px]">
|
||
<div class="text-[14px] text-[#000000] leading-[20px]">
|
||
{{ item?.artwork?.name }} | {{ item?.artwork?.artistName }}
|
||
</div>
|
||
<div class="mt-[4px] text-[12px] text-[#575757]">
|
||
{{ $t('home.start_price') }}：{{ item?.startPrice ?? 0 }}
|
||
</div>
|
||
<div
|
||
v-if="item.soldPrice"
|
||
class="mt-[4px] text-[12px] text-[#b58047]"
|
||
>
|
||
{{ $t('home.close_price') }}：{{ item?.soldPrice ?? 0 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</WaterfallFlow>
|
||
</div>
|
||
</van-list>
|
||
</van-pull-refresh>
|
||
<DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.content {
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
</style> |