forked from natuka/web.puabadge.com
代码提交
This commit is contained in:
Linzm committed
1 parent
c30768d605
commit
b52dcc0842
14 files changed
+3997
-38
No files matched your search
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header" @click="goBack" style="text-align: center;">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout(config.photoAlbum.messages.title) }}</span>
|
||||
</div>
|
||||
<div class="record-container">
|
||||
<div class="record-note">{{ toValueWithout(config.photoAlbum.messages.note) }}</div>
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
:finished-text="toValueWithout(config.photoAlbum.messages.noMore)"
|
||||
@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 == config.photoAlbum.status.success" @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 == config.photoAlbum.status.designing || item.reason" class="record-image-item-loading">
|
||||
<div style="font-size: 12px;color: #999;text-align: center;">ID: {{ item.sw_pid }}</div>
|
||||
<div style="width: 70%;font-size: 12px;">{{ item.reason || toValueWithout(config.photoAlbum.messages.designing) }}</div>
|
||||
</div>
|
||||
<div v-else-if="item.status == config.photoAlbum.status.failed || item.reason" class="record-image-item-loading">
|
||||
<div style="font-size: 12px;color: #999;text-align: center;">ID: {{ item.sw_pid }}</div>
|
||||
<div style="width: 70%;font-size: 12px;">{{ item.reason || toValueWithout(config.photoAlbum.messages.designFailed) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="loading && page.value === config.photoAlbum.pagination.initialPage" class="record-image-item-loading">
|
||||
{{ toValueWithout(config.photoAlbum.messages.loading) }}
|
||||
</div>
|
||||
<div v-else class="record-image-item-null">
|
||||
<img :src="nullDataImage" :alt="toValueWithout(config.photoAlbum.messages.noData)">
|
||||
</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, onUnmounted } from 'vue';
|
||||
import { toValueWithout } from '@/lang/utils';
|
||||
import { cartoonConfig as config } from '@/config/cartoon';
|
||||
import nullDataImage from '@/assets/badge/null-data.png';
|
||||
|
||||
const router = useRouter();
|
||||
const images = ref([]);
|
||||
const page = ref(config.photoAlbum.pagination.initialPage);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const error = ref(null);
|
||||
const refreshing = ref(false);
|
||||
|
||||
// 获取设计记录列表
|
||||
async function getList() {
|
||||
// 如果正在加载或者已经加载完所有数据，则返回
|
||||
console.log(loading.value, finished.value);
|
||||
if (loading.value || finished.value) return;
|
||||
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const res = await badgeApi.getLogOage({
|
||||
page: page.value,
|
||||
size: config.photoAlbum.pagination.pageSize,
|
||||
});
|
||||
|
||||
if (page.value === config.photoAlbum.pagination.initialPage) {
|
||||
images.value = res.list || [];
|
||||
} else {
|
||||
images.value.push(...(res.list || []));
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
if (!res.list || res.list.length < config.photoAlbum.pagination.pageSize) {
|
||||
finished.value = true;
|
||||
} else {
|
||||
page.value++;
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message || toValueWithout(config.photoAlbum.messages.getDataFailed);
|
||||
console.error('获取设计记录失败', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查看设计预览
|
||||
function goPreview(item) {
|
||||
router.push({
|
||||
path: config.routes.preview,
|
||||
query: {
|
||||
pid: item.sw_pid,
|
||||
group: item.group_count,
|
||||
key: item.num,
|
||||
prod_id: item.prod_id
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
function onLoad() {
|
||||
loading.value = false;
|
||||
getList();
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
async function onRefresh() {
|
||||
refreshing.value = true;
|
||||
page.value = config.photoAlbum.pagination.initialPage;
|
||||
finished.value = false;
|
||||
await getList();
|
||||
refreshing.value = false;
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
function goBack() {
|
||||
router.push('/cartoon');
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
loading.value = false;
|
||||
finished.value = false;
|
||||
page.value = config.photoAlbum.pagination.initialPage;
|
||||
});
|
||||
</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(v-bind('config.photoAlbum.styles.gridColumns'), 1fr);
|
||||
gap: v-bind('config.photoAlbum.styles.gap + "px"');
|
||||
}
|
||||
|
||||
.record-image-item {
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: v-bind('config.photoAlbum.styles.borderRadius + "px"');
|
||||
}
|
||||
|
||||
.record-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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);
|
||||
}
|
||||
|
||||
.record-image-item-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #f5f5f5;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.record-image-item-null {
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.record-image-item-null img {
|
||||
width: 80vw;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in new issue
Block a user