From 0dcd70d2f03f3270e69491464fce4654c2eb83cc Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Wed, 28 Jan 2026 23:08:34 +0800
Subject: [PATCH] fix: wallpaper page

---
 api/mine.js              |   7 +
 pages.json               |   8 +
 pages/mine/mine.vue      |  14 +-
 pages/mine/wallpaper.vue | 317 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 342 insertions(+), 4 deletions(-)
 create mode 100644 pages/mine/wallpaper.vue

diff --git a/api/mine.js b/api/mine.js
index 004b97c..1396946 100644
--- a/api/mine.js
+++ b/api/mine.js
@@ -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",
+  });
+};
diff --git a/pages.json b/pages.json
index 27314cd..8e64507 100644
--- a/pages.json
+++ b/pages.json
@@ -25,6 +25,14 @@
         "enablePullDownRefresh": true
       }
     },
+    {
+      "path": "pages/mine/wallpaper",
+      "style": {
+        "navigationBarTitleText": "我的新春壁纸",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": true
+      }
+    },
     {
       "path": "pages/mine/mine",
       "style": {
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 5e05296..5519cbc 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -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",
diff --git a/pages/mine/wallpaper.vue b/pages/mine/wallpaper.vue
new file mode 100644
index 0000000..f539fa5
--- /dev/null
+++ b/pages/mine/wallpaper.vue
@@ -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>
\ No newline at end of file