|
@@ -0,0 +1,176 @@
|
|
|
+<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>
|