From df844bae116a89eec89dcd94474afb12db43a1c7 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Thu, 23 Oct 2025 18:46:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E7=9B=B8=E5=86=8C?=
 =?UTF-8?q?=E4=B8=8E=E5=9B=BE=E7=89=87=E6=B5=8F=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImageSwiper/index.vue | 11 +++-
 src/pages.json                       |  6 ++
 src/pages/goods/album/index.vue      | 87 ++++++++++++++++++++++++++++
 src/static/scss/background.scss      |  4 ++
 src/static/scss/overflow.scss        |  4 ++
 src/static/scss/padding.scss         |  8 +++
 src/store/modules/app.js             | 10 +++-
 7 files changed, 126 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/goods/album/index.vue

diff --git a/src/components/ImageSwiper/index.vue b/src/components/ImageSwiper/index.vue
index 872bf4a..fe7edf9 100644
--- a/src/components/ImageSwiper/index.vue
+++ b/src/components/ImageSwiper/index.vue
@@ -52,7 +52,7 @@
         </view>
       </scroll-view>
 
-      <view class="custom-indicator">
+      <view class="custom-indicator" @click="handlePreviewClick">
         <uni-icons fontFamily="znicons" size="10" color="#fff">{{
           zniconsMap["zn-camera"]
         }}</uni-icons>
@@ -68,6 +68,8 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
 import { zniconsMap } from "@/static/fonts/znicons.js";
+import { useAppStore } from "@/store";
+const appStore = useAppStore();
 
 // Props定义
 const props = defineProps({
@@ -166,6 +168,13 @@ const handleSwiperChange = (e) => {
   active.value = currentIndex;
   scrollToActiveItem(currentIndex);
 };
+
+const handlePreviewClick = () => {
+  appStore.setPreviewImageData(thumbnails.value);
+  uni.navigateTo({
+    url: `/pages/goods/album/index`,
+  });
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/pages.json b/src/pages.json
index 2857ac2..f931f7a 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -17,6 +17,12 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/goods/album/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "subPackages": [
diff --git a/src/pages/goods/album/index.vue b/src/pages/goods/album/index.vue
new file mode 100644
index 0000000..ebf32fc
--- /dev/null
+++ b/src/pages/goods/album/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <view class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
+    <TopNavBar title="房间相册" backgroundColor="transparent" />
+    <view class="p-8">
+      <text class="ml-4 font-size-18 color-171717 font-500"
+        >全部({{ albumList.length }})</text
+      >
+    </view>
+
+    <scroll-view scroll-y class="scroll-container overflow-auto">
+      <view class="pl-8 pr-8 pb-24">
+        <view class="flex flex-wrap">
+          <view
+            class="album-item"
+            v-for="(item, index) in albumList"
+            :key="index"
+          >
+            <image
+              class="album-image"
+              :src="item.photoUrl"
+              mode="aspectFill"
+              @click="handlePreview(item.photoUrl)"
+            ></image>
+            <view class="album-title">{{ item.title }}</view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { useAppStore } from "@/store";
+const appStore = useAppStore();
+
+const albumList = ref([]);
+
+onLoad(() => {
+  albumList.value = appStore.previewImageData;
+  appStore.setPreviewImageData([]);
+});
+
+// 处理图片预览
+const handlePreview = (photoUrl) => {
+  uni.previewImage({
+    current: photoUrl,
+    urls: albumList.value.map((item) => item.photoUrl),
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.scroll-container {
+  flex: 1;
+  height: 100%;
+}
+
+.album-item {
+  position: relative;
+  width: calc(50% - 8px);
+  margin: 4px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.album-image {
+  width: 100%;
+  height: 150px;
+  border-radius: 8px;
+}
+
+.album-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 8px;
+  background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, #000000 100%);
+  border-radius: 0 0 8px 8px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+}
+</style>
diff --git a/src/static/scss/background.scss b/src/static/scss/background.scss
index aae9d34..31bd2d4 100644
--- a/src/static/scss/background.scss
+++ b/src/static/scss/background.scss
@@ -37,3 +37,7 @@
 .bg-button {
   background: linear-gradient(90deg, #2d91ff 0%, #4de4ff 100%);
 }
+
+.bg-transparent {
+  background-color: transparent;
+}
diff --git a/src/static/scss/overflow.scss b/src/static/scss/overflow.scss
index bd67572..c440df7 100644
--- a/src/static/scss/overflow.scss
+++ b/src/static/scss/overflow.scss
@@ -2,3 +2,7 @@
 .overflow-hidden {
   overflow: hidden;
 }
+
+.overflow-auto {
+  overflow: auto;
+}
diff --git a/src/static/scss/padding.scss b/src/static/scss/padding.scss
index 45fef9c..2834468 100644
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -103,6 +103,14 @@
   padding: 24px;
 }
 
+.pt-24 {
+  padding-top: 24px;
+}
+
+.pb-24 {
+  padding-bottom: 24px;
+}
+
 .pb-safe-area {
   padding-bottom: Max(env(safe-area-inset-bottom), 12px);
 }
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 622c0c7..440fefc 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -4,9 +4,10 @@ export const useAppStore = defineStore("app", {
   state() {
     return {
       title: "",
-      sceneId: "",
-      hasToken: false,
-      tokenExpired: false,
+      sceneId: "", /// 分身场景id
+      hasToken: false, /// 是否有token
+      tokenExpired: false, /// token是否过期
+      previewImageData: [], /// 预览图片数据
     };
   },
   getters: {},
@@ -24,6 +25,9 @@ export const useAppStore = defineStore("app", {
     setTokenExpired(status) {
       this.tokenExpired = status;
     },
+    setPreviewImageData(data) {
+      this.previewImageData = data;
+    },
   },
 
   unistorage: true,