feat: 图片相册与图片浏览

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>