113 lines
2.5 KiB
Plaintext
113 lines
2.5 KiB
Plaintext
<template>
|
|
<view class="pdd-demo-page">
|
|
<view class="pdd-demo-header">
|
|
<text class="pdd-demo-title">{{ pageTitle }}</text>
|
|
<text class="pdd-demo-subtitle">{{ pageSubtitle }}</text>
|
|
</view>
|
|
|
|
<PddWaterfallFeed
|
|
class="pdd-demo-feed"
|
|
:items="visibleProducts"
|
|
:loading="loading"
|
|
:noMore="noMore"
|
|
@loadMore="handleLoadMore"
|
|
@select="handleSelectProduct"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
import PddWaterfallFeed from '@/components/consumer/PddWaterfallFeed.uvue'
|
|
import { createPddMockProducts } from '@/utils/mock-pdd-waterfall-data.uts'
|
|
import type { PddMockProduct } from '@/utils/mock-pdd-waterfall-data.uts'
|
|
|
|
const allProducts = ref<PddMockProduct[]>([])
|
|
const visibleProducts = ref<PddMockProduct[]>([])
|
|
const loading = ref(false)
|
|
const noMore = ref(false)
|
|
const pageTitle = '\u62FC\u591A\u591A\u98CE\u683C\u5546\u54C1\u6D41'
|
|
const pageSubtitle = '\u53CC\u5217\u9AD8\u5BC6\u5EA6\u4FE1\u606F\u6D41 / \u61D2\u52A0\u8F7D / \u865A\u62DF\u5217\u8868'
|
|
|
|
const pageSize = 18
|
|
const currentPage = ref(0)
|
|
|
|
function appendNextPage(): void {
|
|
const source = allProducts.value
|
|
const nextPage = currentPage.value + 1
|
|
const nextEnd = nextPage * pageSize
|
|
const nextList = source.slice(0, nextEnd)
|
|
visibleProducts.value = nextList
|
|
currentPage.value = nextPage
|
|
noMore.value = nextList.length >= source.length
|
|
}
|
|
|
|
function initMockFeed(): void {
|
|
allProducts.value = createPddMockProducts(72)
|
|
visibleProducts.value = []
|
|
currentPage.value = 0
|
|
noMore.value = false
|
|
appendNextPage()
|
|
}
|
|
|
|
function handleLoadMore(): void {
|
|
if (loading.value || noMore.value) return
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
appendNextPage()
|
|
loading.value = false
|
|
}, 260)
|
|
}
|
|
|
|
function handleSelectProduct(product: PddMockProduct): void {
|
|
uni.showToast({
|
|
title: product.title,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
initMockFeed()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pdd-demo-page {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pdd-demo-header {
|
|
padding: 18rpx 20rpx 12rpx;
|
|
background: linear-gradient(180deg, #ffffff 0%, #fff7f3 100%);
|
|
border-bottom-width: 1rpx;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: #f3d7ca;
|
|
}
|
|
|
|
.pdd-demo-title {
|
|
font-size: 34rpx;
|
|
color: #e1251b;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.pdd-demo-subtitle {
|
|
margin-top: 6rpx;
|
|
font-size: 22rpx;
|
|
color: #8b6a5c;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.pdd-demo-feed {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
</style>
|