图组详情页

components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
+    VanImagePreview: typeof import('vant/es')['ImagePreview']
     VanList: typeof import('vant/es')['List']
     VanNavBar: typeof import('vant/es')['NavBar']
     VanPopup: typeof import('vant/es')['Popup']

src/main.ts

@@ -16,9 +16,9 @@ export function createApp() {
     pinia.use(piniaPersist)
     app.use(pinia)
     app.use(router);
-    let vConsole = new Vconsole();
+    // let vConsole = new Vconsole();
     app.component('Header', Header);
-    app.use(vConsole);
+    // app.use(vConsole);
     return {
         app,
     };

src/pages.json

@@ -118,6 +118,13 @@
             "style": {
                 "navigationBarTitleText": "分类列表"
             }
+        },
+        {
+            "path": "pages/classify/detail",
+            "name": "classify-detail",
+            "style": {
+                "navigationBarTitleText": "分类详情"
+            }
         }
     ],
     "globalStyle": {

src/pages/classify/detail.vue

+<template>
+    <Header backgroundBox="white" :showTitle="true" title="图组详情" v-show="showHeader"></Header>
+    <div class="container" v-if="catalog">
+        <div class="atlas">
+            <div class="list">
+                <div class="item" v-for="(item, index) in catalog.enclosureList" :key="index">
+                    <img :src="fileDomain + item.compressPath" @click="handlePreviewImage(index)">
+                </div>
+            </div>
+        </div>
+    </div>
+    <van-empty description="暂无数据" v-else />
+    <van-image-preview v-model:show="showPicList" :images="previewImages" @change="onChange" @close="onClose"
+        :start-position="index">
+        <template v-slot:index>
+            <div>{{ index + 1 }}/{{ previewImages.length }}</div>
+            <div class="infobox">
+                <div class="iconbox" @click="handleViewDetail">
+                    <img src="@/static/image/info.png" class="icon" />
+                    <span class="title">信息</span>
+                </div>
+                <div class="iconbox">
+                    <img src="@/static/image/download.png" class="icon" />
+                    <span class="title">{{ convertSize(catalog.enclosureList[index].fileSize) }}</span>
+                </div>
+            </div>
+        </template>
+    </van-image-preview>
+    <van-popup v-model:show="showPop" position="bottom" round @close="handleClose">
+        <div class="info">
+            <div class="header">
+                <span class="title">图片详情</span>
+                <van-icon name="cross" size="30rpx" color="#707070" @click="handleClose" />
+            </div>
+            <div class="content">
+                <div class="item">
+                    <span class="label">图片名称:</span>
+                    <span class="value">图片描述图片描述图片描述图片描述图片描述图片描述图片描述</span>
+                </div>
+                <div class="item">
+                    <span class="label">图片名称</span>
+                    <div class="tagbox">
+                        <div class="tag">动物</div>
+                        <div class="tag">田园猫</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<script setup>
+import { showImagePreview } from 'vant';
+import { selectPictureById } from '@/api/publish'
+
+const fileDomain = import.meta.env.VITE_APP_FILE_URL
+const previewImages = ref([])
+const showHeader = ref(true)
+const id = ref(0)
+onLoad((options) => {
+    id.value = options.id
+    handleSelect()
+})
+
+const catalog = ref(null)
+const handleSelect = async () => {
+    const res = await selectPictureById(id.value)
+    catalog.value = res.data
+    previewImages.value = res.data.enclosureList.map(item => {
+        return fileDomain + item.watermarkPath
+    })
+}
+
+// 预览图片
+const showPicList = ref(false)
+const index = ref(0)
+const onChange = (newIndex) => {
+    index.value = newIndex;
+};
+const onClose = () => {
+    showHeader.value = true
+}
+const handlePreviewImage = (i) => {
+    index.value = i
+    showPicList.value = true
+    showHeader.value = false
+}
+
+// 弹出层
+const showPop = ref(false)
+const handleClose = () => {
+    showPop.value = false
+}
+
+// 查看图片详情
+const handleViewDetail = () => {
+    showPop.value = true
+}
+
+const convertSize = (sizeInKB) => {
+    if (sizeInKB < 1024) { 
+        return sizeInKB + " K"; 
+    } else if (sizeInKB < 1024 * 1024) { 
+        return (sizeInKB / 1024).toFixed(1) + " M"; 
+    } else if (sizeInKB < 1024 * 1024 * 1024) { 
+        return (sizeInKB / (1024 * 1024)).toFixed(1) + " G"; 
+    } else { 
+        return (sizeInKB / (1024 * 1024 * 1024)).toFixed(1) + " T"; }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.container {
+    background-color: #F6F7FB;
+    padding: 20rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+    // height: 100vh;
+
+    .list {
+        column-count: 2;
+        column-gap: 12rpx;
+
+        .item {
+            break-inside: avoid;
+
+            img {
+                width: 100%;
+                object-fit: cover;
+            }
+        }
+    }
+
+}
+
+.infobox {
+    width: 270rpx;
+    height: 120rpx;
+    background-color: #F7F8FA;
+    opacity: 0.8;
+    position: absolute;
+    top: 80vh;
+    left: calc(50% - 135rpx);
+    border-radius: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 60rpx;
+
+    .iconbox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .icon {
+            width: 50rpx;
+            height: 50rpx;
+        }
+
+        .title {
+            font-size: 22rpx;
+            color: #3B3B3B;
+            margin-top: 8rpx;
+            font-weight: 400;
+            line-height: 22rpx;
+        }
+    }
+
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    gap: 36rpx;
+    padding: 40rpx;
+
+    .header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .title {
+            font-size: 24rpx;
+            color: #707070;
+            text-align: center;
+            width: 100%;
+        }
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 30rpx;
+
+        .item {
+            display: flex;
+            gap: 20rpx;
+
+            .label {
+                font-size: 28rpx;
+                color: #707070;
+            }
+
+            .value {
+                font-size: 28rpx;
+                color: #232524;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file

src/pages/classify/list.vue

 <template>
-    <Header backgroundBox="#ffffff">
+    <Header backgroundBox="#ffffff" :title="queryParams.typeClassify" :showTitle="true"></Header>
+    <van-sticky :offset-top="contentHeight">
         <div class="header">
             <div class="tools">
                 <van-search v-model="queryParams.materialTitle" shape="round" placeholder="请输入搜索关键词"
                     @search="handleRefresh" @clear="clear" />
             </div>
         </div>
-    </Header>
+    </van-sticky>
     <div class="content">
         <van-pull-refresh v-model="refreshing" @refresh="handleRefresh">
             <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset="50" @load="getList"
@@ -51,10 +52,16 @@ const loading = ref(false)
 const finished = ref(true)
 const fileDomain = import.meta.env.VITE_APP_FILE_URL
 
+const contentHeight = ref(50)
 onLoad((options) => {
     console.log(options)
     queryParams.typeClassify = options.typeClassify
     getList()
+    xma.xh.getMenuButtonBoundingClientRect({
+      success(res) {
+        contentHeight.value = (res.top + res.bottom) / 2 + 25;
+      },
+    });
 })
 
 const page = reactive({
@@ -65,7 +72,7 @@ const queryParams = reactive({
     materialTitle: '',
     materialType: 3,
     typeClassify: null,
-    organizeId:0
+    organizeId: 0
 })
 const dataList = ref([])
 
@@ -102,9 +109,9 @@ const clear = (e) => {
 <style scoped lang="scss">
 .header {
     padding: 10px;
-    margin-left: 20rpx;
-    // background-color: #ffffff;
-    // box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
+    // margin-left: 20rpx;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
 
     .tools {
 
@@ -207,6 +214,7 @@ const clear = (e) => {
         }
     }
 }
+
 .active {
     background-color: #0e7ce3 !important;
     color: #ffffff !important;