devops/ece.suwa3d.com
1
0 Fork 0
forked from natuka/web.puabadge.com
Code Issues Pull Requests Actions Projects Releases Wiki Activity

上拉加载更多

Browse Source
This commit is contained in:
Linzm committed 2025-07-11 15:21:54 +08:00
1 parent e6ebca45cb
commit f2a24a0004
3 files changed
+188 -131
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components.d.ts
Vendored
+2
View File
@@ -24,7 +24,9 @@ declare module '@vue/runtime-core' {
VanDivider: typeof import('vant/es')['Divider']
VanField: typeof import('vant/es')['Field']
VanIcon: typeof import('vant/es')['Icon']
VanImage: typeof import('vant/es')['Image']
VanList: typeof import('vant/es')['List']
VanPullRefresh: typeof import('vant/es')['PullRefresh']
VanStepper: typeof import('vant/es')['Stepper']
}
}
src/views/badge/myOrder.vue
+2 -2
View File
@@ -30,7 +30,7 @@ function getOrder() {
loading.value = true
badgeApi.getMyOrder({
page: page.value,
pageSize: 10,
size: 30,
status: 0,
}).then(res => {
if(page.value === 1) {
@@ -38,7 +38,7 @@ function getOrder() {
} else {
orders.value.push(...res.list)
}
if(res.list.length < 10) {
if(res.total <= orders.value.length) {
finished.value = true
} else {
page.value++
src/views/badge/record.vue
+184 -129
View File
@@ -5,69 +5,88 @@
</div>
<div class="record-container">
<div class="record-note">注：可点击效果图进行下单打印</div>
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div class="record-images" v-if="images.length > 0">
<div class="record-image-item" v-for="item in images" :key="item.id">
<block v-if="item.status == 1" @click="goPreview(item)">
<img :src="item.path" :alt="item.name" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
<div class="record-image-item-shadow"></div>
</block>
<div v-else-if="item.status == 0" class="record-image-item-loading">
设计中
</div>
<div v-else-if="item.status == 2" class="record-image-item-loading">
设计失败
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div class="record-images" v-if="images.length > 0">
<div class="record-image-item" v-for="item in images" :key="item.id">
<block v-if="item.status == 1" @click="goPreview(item)">
<img :src="item.path" :alt="item.name" class="record-image">
<div class="record-image-item-shadow"></div>
</block>
<div v-else-if="item.status == 0" class="record-image-item-loading">
设计中
</div>
<div v-else-if="item.status == 2" class="record-image-item-loading">
设计失败
</div>
</div>
</div>
</div>
<div v-else class="record-image-item-null">
<img src="@/assets/badge/null-data.png" alt="暂无数据">
</div>
</van-list>
<div v-else-if="loading && page.value === 1" class="record-image-item-loading">
加载中...
</div>
<div v-else class="record-image-item-null">
<img src="@/assets/badge/null-data.png" alt="暂无数据">
</div>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import * as badgeApi from '@/api/badge';
import { onMounted, ref } from 'vue';
import { onMounted, ref, onUnmounted } from 'vue';
const router = useRouter();
const images = ref([]);
onMounted(() => {
getList();
});
const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const page = ref(1);
const loading = ref(false);
const finished = ref(false);
const error = ref(null);
const refreshing = ref(false);
function getList() {
if(loading.value) return
loading.value = true
badgeApi.getLogOage({
page: page.value,
size: 100,
}).then(res => {
if(page.value === 1) {
images.value = res.list
// 获取设计记录列表
async function getList() {
// 如果正在加载或者已经加载完所有数据，则返回
console.log(loading.value, finished.value);
if (loading.value || finished.value) return;
loading.value = true;
error.value = null;
try {
// 修复API调用中的拼写错误
const res = await badgeApi.getLogOage({
page: page.value,
size: 20,
});
if (page.value === 1) {
images.value = res.list || [];
} else {
images.value.push(...res.list)
images.value.push(...(res.list || []));
}
if(res.total <= images.value.length) {
finished.value = true
// 判断是否还有更多数据
if (!res.list || res.list.length < 20) {
finished.value = true;
} else {
page.value++
page.value++;
}
}).finally(() => {
loading.value = false
})
} catch (err: any) {
error.value = err.message || '获取数据失败';
console.error('获取设计记录失败', err);
} finally {
loading.value = false;
}
}
// 查看设计预览
function goPreview(item) {
router.push({
path: '/badge/preview',
@@ -77,93 +96,129 @@ function goPreview(item) {
key: item.num,
prod_id: item.prod_id
},
})
});
}
// 上拉加载更多
function onLoad() {
getList()
loading.value = false;
getList();
}
const router = useRouter();
// 下拉刷新
async function onRefresh() {
refreshing.value = true;
page.value = 1;
finished.value = false;
await getList();
refreshing.value = false;
}
// 返回上一页
function goBack() {
router.push('/badge');
}
// 组件挂载时获取数据
onMounted(() => {
getList();
});
// 组件卸载时清理
onUnmounted(() => {
loading.value = false;
finished.value = false;
page.value = 1;
});
</script>
<style scoped>
.header {
display: flex;
align-items: center;
height: 40px;
font-size: 14px;
color: #999;
padding: 16px 16px 0 16px;
}
.back-icon {
margin-right: 8px;
color: #222;
font-size: 16px;
cursor: pointer;
}
.record-container {
padding: 16px;
}
.record-note {
font-size: 12px;
color: #999;
margin-bottom: 16px;
}
.record-images {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.record-image-item {
width: 100%;
padding-bottom: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: 12px;
}
.record-image-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.record-image-item-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),inset -2px -2px 4px rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.record-image-item-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 50%;
font-size: 16px;
color: #999;
}
.record-image-item-null {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.record-image-item-null img {
width: 80vw;
height: 200px;
}
</style>
.header {
display: flex;
align-items: center;
height: 40px;
font-size: 14px;
color: #999;
padding: 16px 16px 0 16px;
}
.back-icon {
margin-right: 8px;
color: #222;
font-size: 16px;
cursor: pointer;
}
.record-container {
padding: 16px;
}
.record-note {
font-size: 12px;
color: #999;
margin-bottom: 16px;
}
.record-images {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.record-image-item {
width: 100%;
padding-bottom: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: 12px;
}
.record-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.record-image-item-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.record-image-item-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 50%;
font-size: 16px;
color: #999;
}
.record-image-item-null {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.record-image-item-null img {
width: 80vw;
height: 200px;
}
</style>