gdxz/uniapp-app
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: gdxz:7fb1200528de27af63f00e4fa0c5d3f098fb86ae
Branches Tags
gdxz:master
..
compare: gdxz:e8e9c84cdf1c274e47cd70642151312500b10a8f
Branches Tags
gdxz:master

No commits in common. "7fb1200528de27af63f00e4fa0c5d3f098fb86ae" and "e8e9c84cdf1c274e47cd70642151312500b10a8f" have entirely different histories.
7fb1200528 ... e8e9c84cdf

2 changed files with 63 additions and 381 deletions
Show Stats Expand all files Collapse all files

221
pages_app/myFlower/myFlower.vue
View File

@ -16,7 +16,6 @@
/> />
</view> </view>
<view class="fixed-top-block">
<view class="stats-bar"> <view class="stats-bar">
<view class="stat"> <view class="stat">
<up-image :src="flowerImg" width="36rpx" height="36rpx" ></up-image> <up-image :src="flowerImg" width="36rpx" height="36rpx" ></up-image>
@ -34,7 +33,6 @@
<text class="col time">时间</text> <text class="col time">时间</text>
<text class="col qty">数量</text> <text class="col qty">数量</text>
</view> </view>
</view>
<!-- 表体/列表或空状态 --> <!-- 表体/列表或空状态 -->
<scroll-view <scroll-view
@ -48,7 +46,6 @@
lower-threshold="100" lower-threshold="100"
:scroll-top="scrollTop" :scroll-top="scrollTop"
> >
<view class="list-content">
<view v-if="records.length === 0" class="empty-wrap"> <view v-if="records.length === 0" class="empty-wrap">
<up-image :src="emptyImg" width="176rpx" height="204rpx" ></up-image> <up-image :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
<text class="empty-text">您暂未收到鲜花</text> <text class="empty-text">您暂未收到鲜花</text>
@ -70,13 +67,12 @@
<button @click="testLoadMore" size="mini" type="primary">测试加载更多</button> <button @click="testLoadMore" size="mini" type="primary">测试加载更多</button>
<text class="debug-info">当前页: {{ page }}, 加载中: {{ loading }}, 无更多: {{ noMore }}</text> <text class="debug-info">当前页: {{ page }}, 加载中: {{ loading }}, 无更多: {{ noMore }}</text>
</view> --> </view> -->
</view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, nextTick } from 'vue'; import { ref, onMounted } from 'vue';
import flowerImg from "@/static/flowers.png" import flowerImg from "@/static/flowers.png"
import moneyImg from "@/static/mind_totle_money.png" import moneyImg from "@/static/mind_totle_money.png"
import emptyImg from "@/static/icon_empty.png" import emptyImg from "@/static/icon_empty.png"
@ -107,25 +103,6 @@ const noMore = ref(false);
const page = ref(1); const page = ref(1);
const pageSize = ref(10); const pageSize = ref(10);
const scrollTop = ref(0); const scrollTop = ref(0);
const autoLoading = ref(false);
const formatDateToYDM = (value) => {
if (!value) return '-';
const raw = String(value).trim();
const directMatch = raw.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})/);
if (directMatch) {
const [, year, month, day] = directMatch;
return `${year}-${day.padStart(2, '0')}-${month.padStart(2, '0')}`;
}
const parsedDate = new Date(raw);
if (Number.isNaN(parsedDate.getTime())) return '-';
const year = parsedDate.getFullYear();
const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
const day = String(parsedDate.getDate()).padStart(2, '0');
return `${year}-${day}-${month}`;
};
@ -139,12 +116,6 @@ const goBack = () => {
const getFlowerList = () => { const getFlowerList = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
console.log('[myFlower] getFlowerList:start', {
page: page.value,
loading: loading.value,
refreshing: refreshing.value,
noMore: noMore.value
});
// 只在第一页时设置loading状态，避免与onLoadMore冲突 // 只在第一页时设置loading状态，避免与onLoadMore冲突
if (page.value === 1) { if (page.value === 1) {
loading.value = true; loading.value = true;
@ -152,29 +123,20 @@ const getFlowerList = () => {
console.log('正在获取第', page.value, '页数据...'); console.log('正在获取第', page.value, '页数据...');
api.getFlowerList({ api.getFlowerList({page: page.value}).then(res => {
page: page.value,
}).then(res => {
console.log('接口返回数据:', res); console.log('接口返回数据:', res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
const { flower_data, total_amount, total_num } = res.data; const { flower_data, total_amount, total_num } = res.data;
console.log('[myFlower] getFlowerList:response', {
reqPage: page.value,
pageNum: flower_data?.pageNum,
pages: flower_data?.pages,
isLastPage: flower_data?.isLastPage,
listLength: flower_data?.list?.length || 0
});
// 更新统计数据 // 更新统计数据
stat.value.totalCount = total_num || 0; stat.value.totalCount = total_num || 0;
stat.value.totalAmount = total_amount || 0; stat.value.totalAmount = total_amount || 0;
// 处理列表数据 // 处理列表数据
if (flower_data && Array.isArray(flower_data.list)) { if (flower_data && flower_data.list) {
const newRecords = flower_data.list.map(item => ({ const newRecords = flower_data.list.map(item => ({
name: item.patient_name || '账号已注销', name: item.patient_name || '未知',
time: formatDateToYDM(item.create_date), time: item.create_date || '',
amount: item.num || 0, amount: item.num || 0,
// 保留原始数据以备后用 // 保留原始数据以备后用
original: item original: item
@ -189,28 +151,12 @@ const getFlowerList = () => {
console.log('第', page.value, '页数据，追加到列表，新增', newRecords.length, '条'); console.log('第', page.value, '页数据，追加到列表，新增', newRecords.length, '条');
} }
// 判断是否还有更多数据，兼容不同接口字段 // 判断是否还有更多数据
if (typeof flower_data.isLastPage === 'boolean') {
noMore.value = flower_data.isLastPage; noMore.value = flower_data.isLastPage;
} else if (Number(flower_data.pages) > 0) { console.log('是否最后一页:', flower_data.isLastPage, '，总页数:', flower_data.pages);
noMore.value = page.value >= Number(flower_data.pages);
} else {
// 未返回分页字段时，仅在本页无数据时判定到底
noMore.value = newRecords.length === 0;
} }
console.log('是否最后一页:', noMore.value, '，总页数:', flower_data.pages);
}
console.log('[myFlower] getFlowerList:end', {
page: page.value,
records: records.value.length,
noMore: noMore.value
});
resolve(res); resolve(res);
} else { } else {
console.log('[myFlower] getFlowerList:invalid', {
code: res?.code,
msg: res?.msg
});
reject(new Error('接口返回错误')); reject(new Error('接口返回错误'));
} }
}).catch(err => { }).catch(err => {
@ -226,11 +172,18 @@ const getFlowerList = () => {
}); });
}); });
}; };
onMounted(() => {
getFlowerList();
});
const onRefresh = async () => { const onRefresh = async () => {
if (refreshing.value || loading.value) return; if (refreshing.value) return;
refreshing.value = true; refreshing.value = true;
try { try {
await loadFirstTwoPages(); page.value = 1;
noMore.value = false;
records.value = []; // 清空数据
getFlowerList(); // 重新获取第一页数据
uni.showToast({ title: '刷新成功', icon: 'none' }); uni.showToast({ title: '刷新成功', icon: 'none' });
} catch (error) { } catch (error) {
console.error('刷新失败:', error); console.error('刷新失败:', error);
@ -240,138 +193,39 @@ const onRefresh = async () => {
const onLoadMore = async () => { const onLoadMore = async () => {
console.log('触发上拉加载更多事件'); console.log('触发上拉加载更多事件');
console.log('[myFlower] onLoadMore:enter', {
page: page.value,
loading: loading.value,
refreshing: refreshing.value,
noMore: noMore.value
});
// 检查各种状态 // 检查各种状态
if (loading.value || refreshing.value) { if (loading.value) {
console.log('正在加载中，忽略重复请求'); console.log('正在加载中，忽略重复请求');
console.log('[myFlower] onLoadMore:blockByState');
return; return;
} }
if (noMore.value) { if (noMore.value) {
console.log('已经没有更多数据了'); console.log('已经没有更多数据了');
console.log('[myFlower] onLoadMore:blockByNoMore');
return; return;
} }
console.log('开始加载下一页，当前页码:', page.value); console.log('开始加载下一页，当前页码:', page.value);
loading.value = true; loading.value = true;
const currentPage = page.value;
try { try {
page.value = currentPage + 1; page.value += 1;
console.log('[myFlower] onLoadMore:request', {
fromPage: currentPage,
toPage: page.value
});
await getFlowerList(); // 等待数据加载完成 await getFlowerList(); // 等待数据加载完成
console.log('加载完成，当前页码:', page.value); console.log('加载完成，当前页码:', page.value);
console.log('[myFlower] onLoadMore:done', {
page: page.value,
records: records.value.length,
noMore: noMore.value
});
} catch (error) { } catch (error) {
console.error('加载更多失败:', error); console.error('加载更多失败:', error);
page.value = currentPage; // 恢复页码 page.value -= 1; // 恢复页码
console.log('[myFlower] onLoadMore:rollback', { page: page.value });
uni.showToast({ title: '加载失败', icon: 'error' }); uni.showToast({ title: '加载失败', icon: 'error' });
} finally { } finally {
loading.value = false; loading.value = false;
} }
}; };
const getListLayoutInfo = () => {
return new Promise((resolve) => {
const query = uni.createSelectorQuery();
query.select('.table-body').boundingClientRect();
query.select('.list-content').boundingClientRect();
query.exec((res = []) => {
const bodyHeight = Number(res?.[0]?.height || 0);
const contentHeight = Number(res?.[1]?.height || 0);
resolve({ bodyHeight, contentHeight });
});
});
};
const ensureListCanScroll = async () => {
if (autoLoading.value || loading.value || refreshing.value || noMore.value) return;
autoLoading.value = true;
try {
while (!noMore.value) {
await nextTick();
await new Promise((resolve) => setTimeout(resolve, 50));
const { bodyHeight, contentHeight } = await getListLayoutInfo();
if (!bodyHeight || !contentHeight) break;
if (contentHeight > bodyHeight) break;
await onLoadMore();
if (loading.value) break;
}
} finally {
autoLoading.value = false;
}
};
const loadFirstTwoPages = async () => {
console.log('[myFlower] loadFirstTwoPages:start');
page.value = 1;
noMore.value = false;
records.value = [];
console.log('[myFlower] loadFirstTwoPages:reset', {
page: page.value,
records: records.value.length,
noMore: noMore.value
});
await getFlowerList();
// 第1页 Promise resolve 早于 finally 复位 loading，这里手动兜底复位
loading.value = false;
console.log('[myFlower] loadFirstTwoPages:afterPage1', {
page: page.value,
records: records.value.length,
noMore: noMore.value
});
if (!noMore.value) {
console.log('[myFlower] loadFirstTwoPages:triggerPage2');
const firstPage = page.value;
try {
page.value = firstPage + 1;
console.log('[myFlower] loadFirstTwoPages:requestPage2', {
fromPage: firstPage,
toPage: page.value,
refreshing: refreshing.value
});
await getFlowerList();
loading.value = false;
} catch (error) {
page.value = firstPage;
console.log('[myFlower] loadFirstTwoPages:page2FailedRollback', { page: page.value });
throw error;
}
} else {
console.log('[myFlower] loadFirstTwoPages:skipPage2(noMore=true)');
}
console.log('[myFlower] loadFirstTwoPages:end', {
page: page.value,
records: records.value.length,
noMore: noMore.value
});
};
// 测试加载更多功能 // 测试加载更多功能
const testLoadMore = () => { const testLoadMore = () => {
console.log('手动测试加载更多'); console.log('手动测试加载更多');
onLoadMore(); onLoadMore();
}; };
onMounted(async () => {
await loadFirstTwoPages();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -383,27 +237,13 @@ $card: #ffffff;
.flower-page { .flower-page {
background: $bg; background: $bg;
--nav-offset: calc(var(--status-bar-height) + 44px);
--stats-height: 86rpx;
--header-height: 74rpx;
/* 导航栏下方固定区域总高度：统计栏 + 表头 */
--fixed-block-height: calc(var(--stats-height) + var(--header-height));
}
.fixed-top-block {
position: fixed;
top: var(--nav-offset);
left: 0;
right: 0;
z-index: 20;
} }
.stats-bar { .stats-bar {
display: flex; display: flex;
margin-top: calc(var(--status-bar-height) + 44px);
align-items: center; align-items: center;
height: var(--stats-height); padding: 24rpx 30rpx;
padding: 0 30rpx;
box-sizing: border-box;
background: #fff; background: #fff;
border-bottom: 2rpx solid #eee; border-bottom: 2rpx solid #eee;
@ -420,25 +260,20 @@ $card: #ffffff;
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; padding: 22rpx 30rpx;
height: var(--header-height);
padding: 0 30rpx;
box-sizing: border-box;
font-size: 30rpx; font-size: 30rpx;
position: sticky;
top: 180rpx; /* nav 高度 */
z-index: 5;
.col { width: 33%; } .col { width: 33%; }
.name { text-align: left; } .name { text-align: left; }
.time { text-align: center; } .time { text-align: center; }
.qty { text-align: center; } .qty { text-align: right; }
} }
.table-body { .table-body {
position: fixed; height: calc(100vh - 180rpx - 88rpx - 70rpx);
top: calc(var(--nav-offset) + var(--fixed-block-height));
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
/* 充满剩余高度，避免滚动穿透 */ /* 充满剩余高度，避免滚动穿透 */
} }
@ -454,7 +289,7 @@ $card: #ffffff;
.cell { width: 33%; } .cell { width: 33%; }
.name { text-align: left; } .name { text-align: left; }
.time { text-align: center; color: #666; } .time { text-align: center; color: #666; }
.qty { text-align: center; } .qty { text-align: right; }
.qty.plus { color: #2dbd85; } .qty.plus { color: #2dbd85; }
.qty.minus { color: #e34d4d; } .qty.minus { color: #e34d4d; }
} }

153
pages_app/myFlower/scrollLoadDemo.vue
View File

@ -1,153 +0,0 @@
<template>
<view class="page">
<view class="header">
<text class="title">scroll-view 上拉加载 Demo</text>
<text class="sub">下拉刷新 + 触底加载更多</text>
</view>
<scroll-view
class="list-scroll"
scroll-y
lower-threshold="80"
refresher-enabled
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
@scrolltolower="onLoadMore"
>
<view v-for="item in list" :key="item.id" class="list-item">
<text class="item-title">{{ item.title }}</text>
<text class="item-time">{{ item.time }}</text>
</view>
<view v-if="loading" class="tip">加载中...</view>
<view v-else-if="noMore && list.length > 0" class="tip">没有更多数据了</view>
<view v-else-if="list.length === 0" class="tip">暂无数据</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const page = ref(1);
const pageSize = ref(10);
const list = ref([]);
const loading = ref(false);
const refreshing = ref(false);
const noMore = ref(false);
const totalMockCount = 37;
const fullData = Array.from({ length: totalMockCount }, (_, i) => {
const index = i + 1;
return {
id: index,
title: `第 ${index} 条数据`,
time: `2026-03-${String((index % 28) + 1).padStart(2, '0')}`
};
});
const getPageData = (pageNum, size) => {
return new Promise((resolve) => {
setTimeout(() => {
const start = (pageNum - 1) * size;
const end = start + size;
resolve(fullData.slice(start, end));
}, 350);
});
};
const fetchList = async (isRefresh = false) => {
if (loading.value) return;
loading.value = true;
try {
if (isRefresh) {
page.value = 1;
noMore.value = false;
}
const rows = await getPageData(page.value, pageSize.value);
if (isRefresh) {
list.value = rows;
} else {
list.value = [...list.value, ...rows];
}
noMore.value = rows.length < pageSize.value;
} finally {
loading.value = false;
refreshing.value = false;
}
};
const onRefresh = async () => {
if (refreshing.value) return;
refreshing.value = true;
await fetchList(true);
};
const onLoadMore = async () => {
if (loading.value || refreshing.value || noMore.value) return;
page.value += 1;
await fetchList(false);
};
onMounted(() => {
fetchList(true);
});
</script>
<style scoped>
.page {
height: 100vh;
background: #f7f8fa;
}
.header {
padding: 30rpx;
background: #ffffff;
border-bottom: 1rpx solid #ededed;
}
.title {
display: block;
font-size: 34rpx;
color: #222;
font-weight: 600;
}
.sub {
display: block;
margin-top: 8rpx;
font-size: 24rpx;
color: #888;
}
.list-scroll {
height: calc(100vh - 130rpx);
}
.list-item {
margin: 20rpx 24rpx 0;
padding: 24rpx;
background: #ffffff;
border-radius: 12rpx;
}
.item-title {
display: block;
font-size: 30rpx;
color: #222;
}
.item-time {
display: block;
margin-top: 10rpx;
font-size: 24rpx;
color: #999;
}
.tip {
padding: 28rpx 0 40rpx;
text-align: center;
color: #9aa0a6;
font-size: 24rpx;
}
</style>