hongze_yb_xcx/pages-report/previewImage.vue

<template>
    <view class="preview-image-page">
        <swiper 
            class="swiper" 
            circular 
            :indicator-dots="false" 
            :autoplay="false"
            :current="activeIndex"
            @change="swiperChange"
		>
            <swiper-item v-for="item in imgList" :key="item">
                <movable-area style="width:100%;height:100%">
                    <movable-view 
                        class="max" 
                        scale
                        direction="all"
                        out-of-bounds
                        style="width:100%;height:100%"
                    >
                        <image 
                            class="img-item" 
                            :src="item" mode="heightFix"
                        />
                    </movable-view>
                </movable-area>
                
            </swiper-item>
        </swiper>
        <view class="bot-fix-box" :style="{bottom:isOpen?'0':'-100px'}">
            <scroll-view 
                class="imgs-box" 
                scroll-x 
                scroll-with-animation 
                :scroll-into-view="aid"
            >
                <image 
                    :id="'img'+index"
                    v-for="(img,index) in imgList" 
                    :key="img" 
                    :src="img" 
                    :class="index==activeIndex?'img-active':''"
                    mode="heightFix"
                    @click="handleChangeItem(index)"
                />
            </scroll-view>
            <view class="open-box" @click="handleOpen">
                <van-icon :name="isOpen?'arrow-down':'arrow-up'" color="#fff" size="25px"/>
            </view>
        </view>
        <image @click="closePage" class="close-icon" src="./static/close.png" mode="aspectFill"/>
    </view>
</template>

<script>
import {apiReportPPtImgs} from '@/api/report'
export default {
    data() {
        return {
            isOpen:true,
            imgList:[],
            activeIndex:0,
            reportId:0,
            chapterId:0,//章节id 
            aid:''
        }
    },
    onLoad(options){
        this.reportId=options.reportId
        this.chapterId=options.chapterId
        this.getReportPPtImgs()
        uni.setPageOrientation({orientation : "landscape"})
    },
    onUnLoad(){
        uni.setPageOrientation({orientation : "portrait"})
    },
    methods: {
        // 获取ppt图片
        async getReportPPtImgs(){
            const res=await apiReportPPtImgs({
                report_id:Number(this.reportId),
                report_chapter_id:Number(this.chapterId)
            })
            if(res.code===200){
                this.imgList=res.data||[]
            }else{
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })
            }
        },

        handleChangeItem(index){
            this.aid='img'+(index-1)
            this.activeIndex=index 
        },

        handleOpen(){
            this.isOpen=!this.isOpen
        },
        swiperChange(e){
            this.activeIndex=e.detail.current
        },
        closePage(){
            wx.navigateBack({
                delta: 1
            });
        }
    },
}
</script>

<style>
page{
    padding-bottom: 0;
}
</style>
<style lang="scss" scoped>
.preview-image-page{
    background: #333333;
    width: 100vw;
    height: 100vh;
    .swiper{
        height: 100%;
    }
    .img-item{
        height: 100%;
        display: block;
        margin: auto;
    }
    .bot-fix-box{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100px;
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(12px);
        transition: 0.3s;
        display: flex;
        .imgs-box{
            max-width: 70%;
            width: auto;
            height: 100%;
            margin: auto;
            white-space: nowrap;
            image{
                height: 100%;
            }
            .img-active{
                border: 1px solid #E3B377;
            }
        }
        .open-box{
            position: absolute;
            bottom: 100%;
            right: 20px;
            width: 80px;
            height: 36px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 10px 10px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .close-icon{
        position: fixed;
        left: 100px;
        top: 20px;
        width: 24px;
        height: 24px;
        z-index: 99;
    }
}
</style>