fix: wallpaper page
This commit is contained in:
zzc
@@ -14,3 +14,10 @@ export const getMyCard = async (page = 1) => {
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const getMyWallpaper = async (page = 1) => {
|
||||
return request({
|
||||
url: "/api/blessing/my/wallpaper?page=" + page,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
@@ -25,6 +25,14 @@
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/wallpaper",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的新春壁纸",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"style": {
|
||||
|
||||
@@ -53,14 +53,14 @@
|
||||
<text class="menu-text">我的新年运势</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
<view class="menu-item" @tap="navTo('decorations')">
|
||||
<view class="menu-item" @tap="navTo('avatar')">
|
||||
<view class="icon-box pink-bg"><text>☺</text></view>
|
||||
<text class="menu-text">我的头像挂饰</text>
|
||||
<text class="menu-text">我的新春头像</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
<view class="menu-item" @tap="navTo('frames')">
|
||||
<view class="menu-item" @tap="navTo('wallpaper')">
|
||||
<view class="icon-box yellow-bg"><text>🖼</text></view>
|
||||
<text class="menu-text">我的马年头像框</text>
|
||||
<text class="menu-text">我的新春壁纸</text>
|
||||
<view class="new-badge">NEW</view>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
@@ -178,6 +178,12 @@ const navTo = (page) => {
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (page === "wallpaper") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/wallpaper",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (page === "feedback") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/feedback/index",
|
||||
|
||||
317
pages/mine/wallpaper.vue
Normal file
317
pages/mine/wallpaper.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<view class="wallpaper-page" :style="{ paddingTop: navBarTop + 'px' }">
|
||||
<!-- Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ height: navBarHeight + 'px', paddingTop: navBarTop + 'px' }"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view class="back-btn" @tap="goBack">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
<text class="title">我的新春壁纸</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Header Stats -->
|
||||
<view class="header-stats">
|
||||
<view class="stats-card">
|
||||
<view class="stats-left">
|
||||
<text class="label">我的收藏</text>
|
||||
<view class="value-wrap">
|
||||
<text class="prefix">已保存</text>
|
||||
<text class="value">{{ totalCount }}</text>
|
||||
<text class="suffix">张壁纸</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stats-right">
|
||||
<view class="icon-circle">
|
||||
<text>🖼️</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- List Section -->
|
||||
<view class="list-section">
|
||||
<view class="list-container">
|
||||
<view v-for="item in list" :key="item.id" class="grid-item" @tap="onPreview(item)">
|
||||
<image :src="item.imageUrl" mode="aspectFill" class="wallpaper-img" />
|
||||
<view class="date-badge">
|
||||
<text>{{ formatDate(item.createdAt) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Loading State -->
|
||||
<view class="loading-state" v-if="loading">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view class="empty-state" v-if="!loading && list.length === 0">
|
||||
<text>暂无壁纸记录</text>
|
||||
</view>
|
||||
<view class="no-more" v-if="!loading && !hasMore && list.length > 0">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getMyWallpaper } from "@/api/mine.js";
|
||||
|
||||
const navBarTop = ref(0);
|
||||
const navBarHeight = ref(44);
|
||||
const list = ref([]);
|
||||
const page = ref(1);
|
||||
const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
const isRefreshing = ref(false);
|
||||
const totalCount = ref(0);
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
navBarTop.value = sysInfo.statusBarHeight;
|
||||
fetchList(true);
|
||||
});
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
onRefresh();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
|
||||
const fetchList = async (reset = false) => {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
}
|
||||
if (!hasMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyWallpaper(page.value);
|
||||
const dataList = res?.list || [];
|
||||
totalCount.value = res?.totalCount || 0;
|
||||
|
||||
if (reset) {
|
||||
list.value = dataList;
|
||||
} else {
|
||||
list.value = [...list.value, ...dataList];
|
||||
}
|
||||
|
||||
hasMore.value = res.hasNext;
|
||||
if (hasMore.value) {
|
||||
page.value++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch wallpaper list", e);
|
||||
uni.showToast({ title: "加载失败", icon: "none" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
isRefreshing.value = false;
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
fetchList();
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
isRefreshing.value = true;
|
||||
fetchList(true);
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return `${m}-${d}`;
|
||||
};
|
||||
|
||||
const onPreview = (item) => {
|
||||
uni.previewImage({
|
||||
urls: [item.imageUrl],
|
||||
current: item.imageUrl
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallpaper-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.back-arrow {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
margin-top: 44px; // Initial offset for fixed nav
|
||||
|
||||
.stats-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.stats-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.value-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.prefix {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ff3b30;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.suffix {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-right {
|
||||
.icon-circle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
background: #fff8e1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-section {
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
|
||||
.list-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
|
||||
aspect-ratio: 9/16; // Standard wallpaper ratio
|
||||
|
||||
.wallpaper-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.date-badge {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
text {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state,
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user