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

上拉加载更多

lzm_web
Linzm 7 months ago
parent
e6ebca45cb
commit
f2a24a0004
3 changed files with 189 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components.d.ts
  2. 4
      src/views/badge/myOrder.vue
  3. 311
      src/views/badge/record.vue

2
components.d.ts vendored
Unescape View File

@ -24,7 +24,9 @@ declare module '@vue/runtime-core' {
VanDivider: typeof import('vant/es')['Divider'] VanDivider: typeof import('vant/es')['Divider']
VanField: typeof import('vant/es')['Field'] VanField: typeof import('vant/es')['Field']
VanIcon: typeof import('vant/es')['Icon'] VanIcon: typeof import('vant/es')['Icon']
VanImage: typeof import('vant/es')['Image']
VanList: typeof import('vant/es')['List'] VanList: typeof import('vant/es')['List']
VanPullRefresh: typeof import('vant/es')['PullRefresh']
VanStepper: typeof import('vant/es')['Stepper'] VanStepper: typeof import('vant/es')['Stepper']
} }
} }

4
src/views/badge/myOrder.vue
Unescape View File

@ -30,7 +30,7 @@ function getOrder() {
loading.value = true loading.value = true
badgeApi.getMyOrder({ badgeApi.getMyOrder({
page: page.value, page: page.value,
pageSize: 10, size: 30,
status: 0, status: 0,
}).then(res => { }).then(res => {
if(page.value === 1) { if(page.value === 1) {
@ -38,7 +38,7 @@ function getOrder() {
} else { } else {
orders.value.push(...res.list) orders.value.push(...res.list)
} }
if(res.list.length < 10) { if(res.total <= orders.value.length) {
finished.value = true finished.value = true
} else { } else {
page.value++ page.value++

311
src/views/badge/record.vue
Unescape View File

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