完成consumer端同步

2026-05-14 15:28:09 +08:00
parent 612fb3d360
commit 0ffbc53902
197 changed files with 92657 additions and 7564 deletions
--- a/pages/mall/consumer/pdd-waterfall-demo.uvue
+++ b/pages/mall/consumer/pdd-waterfall-demo.uvue
@@ -0,0 +1,112 @@
+<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>