From c0a44231249898e4b232d44b8b8865ec8ca4957c Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Wed, 28 Jan 2026 21:13:27 +0800
Subject: [PATCH] fix: wteail detail

---
 pages.json                 |   8 +
 pages/avatar/index.vue     |  10 +-
 pages/wallpaper/detail.vue | 537 +++++++++++++++++++++++++++++++++++++
 pages/wallpaper/index.vue  | 115 +++++---
 4 files changed, 625 insertions(+), 45 deletions(-)
 create mode 100644 pages/wallpaper/detail.vue

diff --git a/pages.json b/pages.json
index 9e23abe..137bc51 100644
--- a/pages.json
+++ b/pages.json
@@ -88,6 +88,14 @@
         "enablePullDownRefresh": false,
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/wallpaper/detail",
+      "style": {
+        "navigationBarTitleText": "壁纸详情",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index f9074d5..b5ae6bd 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -671,11 +671,11 @@ onShareAppMessage(async () => {
     };
   }
   const id = createAvatarId();
-  const shareTokenRes = {
-    shareToken: "iFmK8WjRm6TK",
-  };
-  // const shareTokenRes = await getShareToken("avatar_download", id);
-  // completeCardInfo(id);
+  // const shareTokenRes = {
+  //   shareToken: "iFmK8WjRm6TK",
+  // };
+  const shareTokenRes = await getShareToken("avatar_download", id);
+  completeCardInfo(id);
   return {
     title: "制作我的新春头像",
     path: `/pages/avatar/detail?shareToken=${shareTokenRes.shareToken}`,
diff --git a/pages/wallpaper/detail.vue b/pages/wallpaper/detail.vue
new file mode 100644
index 0000000..87175e1
--- /dev/null
+++ b/pages/wallpaper/detail.vue
@@ -0,0 +1,537 @@
+<template>
+  <view class="detail-page" :style="{ paddingTop: navHeight + 'px' }">
+    <!-- Navbar -->
+    <view
+      class="nav-bar"
+      :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }"
+    >
+      <view class="nav-content">
+        <view class="back" @tap="goBack">
+          <text class="back-icon">‹</text>
+        </view>
+        <text class="title">壁纸详情</text>
+      </view>
+    </view>
+
+    <scroll-view scroll-y class="content-scroll">
+      <view class="content-container">
+        <!-- Sharer Info -->
+        <view class="sharer-info" v-if="detailData.from">
+          <image
+            :src="detailData.from.avatar || '/static/default-avatar.png'"
+            class="avatar"
+            mode="aspectFill"
+          />
+          <view class="info-text">
+            <view class="nickname">{{
+              detailData.from.nickname || "神秘好友"
+            }}</view>
+            <view class="action-text">给你分享了一张2026新春精美壁纸</view>
+            <view class="sub-text">★ 2026 且马贺岁</view>
+          </view>
+        </view>
+
+        <!-- Wallpaper Preview -->
+        <view class="preview-card">
+          <view class="preview-badge">PREVIEW</view>
+          <image
+            :src="detailData.imageUrl"
+            mode="widthFix"
+            class="main-image"
+            @tap="previewImage"
+          />
+        </view>
+
+        <!-- Action Buttons -->
+        <view class="action-buttons">
+          <button class="btn primary-btn" @tap="goToIndex">
+            <text class="btn-icon">✨</text>
+            <text>我也要领同款壁纸</text>
+          </button>
+        </view>
+
+        <!-- More Wallpapers -->
+        <view class="more-section">
+          <view class="section-header">
+            <text class="section-title">更多精美新春壁纸</text>
+            <view class="more-link" @tap="goToIndex">
+              <text>查看更多</text>
+              <text class="arrow">›</text>
+            </view>
+          </view>
+          <view class="more-grid">
+            <view
+              v-for="(item, index) in recommendList"
+              :key="index"
+              class="grid-item"
+              @tap="onRecommendClick(item)"
+            >
+              <image :src="item.imageUrl" mode="aspectFill" class="grid-img" />
+              <text class="item-title">{{ item.title || "新春壁纸" }}</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- Fortune Banner -->
+        <!-- Wallpaper Banner -->
+        <view class="wallpaper-banner" @tap="goToFortune">
+          <view class="banner-icon">
+            <text>🏮</text>
+          </view>
+          <view class="banner-content">
+            <text class="banner-title">去抽取新年运势</text>
+            <text class="banner-desc">每日一签，开启你的新年好运</text>
+          </view>
+          <text class="banner-arrow">›</text>
+        </view>
+        <view class="wallpaper-banner" @tap="goToGreeting">
+          <view class="banner-icon">
+            <text>🧧</text>
+          </view>
+          <view class="banner-content">
+            <text class="banner-title">去制作新年贺卡</text>
+            <text class="banner-desc">定制专属祝福，传递浓浓年味</text>
+          </view>
+          <text class="banner-arrow">›</text>
+        </view>
+        <view class="wallpaper-banner" @tap="goToAvatar">
+          <view class="banner-icon">
+            <text>🖼</text>
+          </view>
+          <view class="banner-content">
+            <text class="banner-title">去挑选新年头像</text>
+            <text class="banner-desc">精选新年头像，让手机也过年</text>
+          </view>
+          <text class="banner-arrow">›</text>
+        </view>
+
+        <!-- Footer -->
+        <view class="footer">
+          <view class="footer-divider">
+            <view class="line"></view>
+            <text class="footer-text">2026 HAPPY NEW YEAR</text>
+            <view class="line"></view>
+          </view>
+          <view class="footer-sub">新春祝福 · 传递温情</view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { getBavBarHeight } from "@/utils/system";
+import { getPageDetail } from "@/api/system";
+import { getWallpaperList } from "@/api/wallpaper";
+import { saveViewRequest } from "@/utils/common.js";
+
+const navHeight = getBavBarHeight();
+const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+const detailData = ref({
+  imageUrl: "",
+  from: null,
+});
+const recommendList = ref([]);
+const shareToken = ref("");
+
+onLoad(async (options) => {
+  if (options.shareToken) {
+    shareToken.value = options.shareToken;
+    await fetchDetail();
+  }
+  fetchRecommend();
+});
+
+const fetchDetail = async () => {
+  try {
+    const res = await getPageDetail(shareToken.value);
+    saveViewRequest(shareToken.value, "wallpaper_download", res.id);
+    if (res) {
+      detailData.value = res;
+    }
+  } catch (e) {
+    console.error("Failed to fetch detail", e);
+    uni.showToast({
+      title: "获取详情失败",
+      icon: "none",
+    });
+  }
+};
+
+const fetchRecommend = async () => {
+  try {
+    // Try to get wallpapers. Assuming empty category returns a default list or we use a known category if available.
+    // For now, passing empty string as categoryId.
+    const res = await getWallpaperList("", 1);
+    if (res && res.list) {
+      // Take first 3 items
+      recommendList.value = res.list.slice(0, 3);
+    }
+  } catch (e) {
+    console.error("Failed to fetch recommendations", e);
+  }
+};
+
+const goBack = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack();
+  } else {
+    uni.reLaunch({
+      url: "/pages/index/index",
+    });
+  }
+};
+
+const goToIndex = () => {
+  uni.navigateTo({
+    url: "/pages/wallpaper/index",
+  });
+};
+
+const goToFortune = () => {
+  uni.navigateTo({
+    url: "/pages/fortune/index",
+  });
+};
+
+const previewImage = () => {
+  if (detailData.value.imageUrl) {
+    uni.previewImage({
+      urls: [detailData.value.imageUrl],
+    });
+  }
+};
+
+const onRecommendClick = (item) => {
+  // If clicking a recommended item, maybe we just preview it or go to wallpaper list?
+  // Since this is a "detail" page for a specific share, clicking another wallpaper
+  // might normally go to its detail, but we don't have a generic detail page logic
+  // (unless we reuse this page with a new token, but these items might not have tokens).
+  // Best fallback: Preview it.
+  uni.previewImage({
+    urls: [item.imageUrl],
+  });
+};
+
+const goToGreeting = () => {
+  uni.switchTab({ url: "/pages/make/index" });
+};
+
+const goToAvatar = () => {
+  uni.navigateTo({
+    url: "/pages/avatar/index",
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.detail-page {
+  min-height: 100vh;
+  background: #ffffff;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: transparent; // Make it transparent as per design
+
+  .nav-content {
+    height: 44px; // Standard nav height
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    .back {
+      position: absolute;
+      left: 16px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+
+      .back-icon {
+        font-size: 32px;
+        color: #333;
+        font-weight: 300;
+      }
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+    }
+  }
+}
+
+.content-scroll {
+  flex: 1;
+  height: 0; // Important for scroll-view in flex container
+}
+
+.content-container {
+  padding: 20px;
+  padding-bottom: 40px;
+}
+
+.sharer-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+
+  .avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    margin-right: 12px;
+    border: 2px solid #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+
+  .info-text {
+    .nickname {
+      font-size: 16px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 4px;
+    }
+
+    .action-text {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 2px;
+    }
+
+    .sub-text {
+      font-size: 12px;
+      color: #ff3b30;
+      font-weight: 500;
+    }
+  }
+}
+
+.preview-card {
+  position: relative;
+  width: 100%;
+  background: #fff;
+  border-radius: 16px;
+  padding: 12px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
+  border: 1px solid #f5f5f5;
+  margin-bottom: 24px;
+
+  .preview-badge {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    background: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(4px);
+    color: #fff;
+    font-size: 10px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    z-index: 10;
+  }
+
+  .main-image {
+    width: 100%;
+    border-radius: 12px;
+    display: block;
+    background-color: #fafafa; // Placeholder color
+  }
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 32px;
+
+  .btn {
+    width: 100%;
+    height: 52px;
+    border-radius: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    margin: 0;
+    transition: all 0.2s;
+
+    .btn-icon {
+      margin-right: 8px;
+      font-size: 18px;
+    }
+
+    &.primary-btn {
+      background: linear-gradient(90deg, #ff3b30 0%, #ff6b6b 100%);
+      color: #fff;
+      box-shadow: 0 8px 20px rgba(255, 59, 48, 0.15);
+    }
+
+    &.secondary-btn {
+      background: #f9f9f9;
+      color: #333;
+      border: 1px solid #eee;
+    }
+
+    &:active {
+      transform: scale(0.98);
+      opacity: 0.9;
+    }
+  }
+}
+
+.more-section {
+  margin-bottom: 32px;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .more-link {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: #ff3b30;
+
+      .arrow {
+        margin-left: 2px;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .more-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+
+    .grid-item {
+      display: flex;
+      flex-direction: column;
+
+      .grid-img {
+        width: 100%;
+        aspect-ratio: 9/16;
+        border-radius: 8px;
+        margin-bottom: 8px;
+        background-color: #f5f5f5;
+      }
+
+      .item-title {
+        font-size: 12px;
+        color: #333;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.fortune-banner-wrap {
+  margin-bottom: 40px;
+}
+
+.wallpaper-banner {
+  background: #fafafa;
+  border-radius: 24rpx;
+  padding: 30rpx;
+  display: flex;
+  align-items: center;
+  margin-bottom: 60rpx;
+  border: 1px solid #f5f5f5;
+}
+
+.banner-icon {
+  width: 80rpx;
+  height: 80rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 24rpx;
+}
+
+.banner-icon text {
+  font-size: 40rpx;
+  color: #ff3b30;
+}
+
+.banner-content {
+  flex: 1;
+}
+
+.banner-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.banner-desc {
+  font-size: 22rpx;
+  color: #999;
+}
+
+.banner-arrow {
+  font-size: 36rpx;
+  color: #ccc;
+}
+
+.footer {
+  text-align: center;
+  padding-bottom: 20px;
+
+  .footer-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+
+    .line {
+      width: 40px;
+      height: 1px;
+      background: #e0e0e0;
+    }
+
+    .footer-text {
+      margin: 0 12px;
+      font-size: 12px;
+      color: #999;
+      letter-spacing: 1px;
+      font-weight: 600;
+    }
+  }
+
+  .footer-sub {
+    font-size: 10px;
+    color: #ccc;
+  }
+}
+</style>
diff --git a/pages/wallpaper/index.vue b/pages/wallpaper/index.vue
index aa0dbb8..c49c8a0 100644
--- a/pages/wallpaper/index.vue
+++ b/pages/wallpaper/index.vue
@@ -54,9 +54,14 @@
             >
               <text class="icon">↓</text>
             </view>
-            <view class="action-btn share" @tap.stop="shareWallpaper(item)">
+            <button
+              class="action-btn share"
+              open-type="share"
+              :data-item="item"
+              @tap.stop="shareWallpaper(item)"
+            >
               <text class="icon">➦</text>
-            </view>
+            </button>
           </view>
         </view>
       </view>
@@ -75,13 +80,28 @@
         <text>没有更多了</text>
       </view>
     </scroll-view>
+
+    <LoginPopup ref="loginPopupRef" @logind="handleLogind" />
   </view>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { getBavBarHeight } from "@/utils/system";
 import { getWallpaperList, getWallpaperCategoryList } from "@/api/wallpaper.js";
+import {
+  saveRemoteImageToLocal,
+  saveRecordRequest,
+  getShareToken,
+} from "@/utils/common.js";
+import { onShareAppMessage } from "@dcloudio/uni-app";
+import { getShareReward, abilityCheck } from "@/api/system.js";
+import { useUserStore } from "@/stores/user";
+
+const userStore = useUserStore();
+const loginPopupRef = ref(null);
+
+const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
 
 const categories = ref([]);
 const currentCategoryId = ref(null);
@@ -91,6 +111,26 @@ const loading = ref(false);
 const hasMore = ref(true);
 const isRefreshing = ref(false);
 
+onShareAppMessage(async (options) => {
+  getShareReward({ scene: "wallpaper_download" });
+  if (options.from === "button") {
+    const shareTokenRes = await getShareToken(
+      "wallpaper_download",
+      options?.target?.dataset?.item?.id,
+    );
+    return {
+      title: "分享精美壁纸",
+      path: `/pages/wallpaper/detail?shareToken=${shareTokenRes.shareToken}`,
+    };
+  } else {
+    const shareTokenRes = await getShareToken("wallpaper_download", "");
+    return {
+      title: "新春祝福",
+      path: `/pages/index/index?shareToken=${shareTokenRes.shareToken}`,
+    };
+  }
+});
+
 onMounted(async () => {
   await fetchCategories();
 });
@@ -157,6 +197,10 @@ const loadMore = () => {
   loadWallpapers();
 };
 
+const handleLogind = async () => {
+  // Logic after successful login if needed
+};
+
 const onRefresh = () => {
   isRefreshing.value = true;
   loadWallpapers(true);
@@ -170,46 +214,37 @@ const previewImage = (index) => {
   });
 };
 
-const downloadWallpaper = (item) => {
+const downloadWallpaper = async (item) => {
+  if (!isLoggedIn.value) {
+    loginPopupRef.value.open();
+    return;
+  }
+
+  const abilityRes = await abilityCheck("wallpaper_download");
+  if (!abilityRes.canUse) {
+    if (
+      abilityRes?.blockType === "need_share" &&
+      abilityRes?.message === "分享可继续"
+    ) {
+      uni.showToast({
+        title: "分享给好友即可下载",
+        icon: "none",
+      });
+      return;
+    }
+    uni.showToast({
+      title: "您今日壁纸下载次数已用完，明日再试",
+      icon: "none",
+    });
+    return;
+  }
+
   uni.showLoading({ title: "下载中..." });
-  uni.downloadFile({
-    url: item.url,
-    success: (res) => {
-      if (res.statusCode === 200) {
-        uni.saveImageToPhotosAlbum({
-          filePath: res.tempFilePath,
-          success: () => {
-            uni.hideLoading();
-            uni.showToast({ title: "保存成功", icon: "success" });
-          },
-          fail: (err) => {
-            uni.hideLoading();
-            console.error(err);
-            uni.showToast({ title: "保存失败", icon: "none" });
-          },
-        });
-      } else {
-        uni.hideLoading();
-        uni.showToast({ title: "下载失败", icon: "none" });
-      }
-    },
-    fail: () => {
-      uni.hideLoading();
-      uni.showToast({ title: "下载失败", icon: "none" });
-    },
-  });
+  await saveRemoteImageToLocal(item.imageUrl);
+  saveRecordRequest("", item.id, "wallpaper_download", item.imageUrl);
 };
 
-const shareWallpaper = (item) => {
-  // uni.share is for App, specific provider.
-  // For general sharing, we might just preview it or use button open-type="share" if it was a button component.
-  // Since this is a custom UI, we can guide user to preview and long press, or just preview.
-  // Or if on MP-Weixin, show share menu.
-  uni.previewImage({
-    urls: [item.url],
-  });
-  // uni.showToast({ title: '长按图片发送给朋友', icon: 'none' });
-};
+const shareWallpaper = (item) => {};
 </script>
 
 <style lang="scss" scoped>