瀏覽代碼

Merge branch 'yb3.5'

jwyu 2 年之前
父節點
當前提交
90d35007c0
共有 4 個文件被更改,包括 192 次插入0 次删除
  1. 9 0
      api/report.js
  2. 176 0
      pages-report/previewImage.vue
  3. 二進制
      pages-report/static/close.png
  4. 7 0
      pages.json

+ 9 - 0
api/report.js

@@ -98,4 +98,13 @@ export const apiSpecialColumnReportList=params=>{
  */
 export const apiChapterTickerValue=params=>{
     return httpGet('/report/chapter/ticker',params)
+}
+
+/**
+ * 报告对应的ppt图片
+ * @param report_id 报告id
+ * @param report_chapter_id 报告章节id
+ */
+export const apiReportPPtImgs=params=>{
+    return httpGet('/report/ppt_img',params)
 }

+ 176 - 0
pages-report/previewImage.vue

@@ -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>

二進制
pages-report/static/close.png


+ 7 - 0
pages.json

@@ -238,6 +238,13 @@
 				//ficc介绍页面
 				{
 					"path": "ficcService"
+				},
+				//预览图片
+				{
+					"path":"previewImage",
+					"style":{
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},