yb3.5

pages-report/previewImage.vue

@@ -25,16 +25,22 @@
             </swiper-item>
         </swiper>
         <view class="bot-fix-box" :style="{bottom:isOpen?'0':'-100px'}">
-            <view class="imgs-box">
+            <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="activeIndex=index"
+                    @click="handleChangeItem(index)"
                 />
-            </view>
+            </scroll-view>
             <view class="open-box" @click="handleOpen">
                 <van-icon :name="isOpen?'arrow-down':'arrow-up'" color="#fff" size="25px"/>
             </view>
@@ -44,21 +50,47 @@
 </template>
 
 <script>
+import {apiReportDetail} from '@/api/report'
 export default {
     data() {
         return {
             isOpen:true,
-            imgList:['https://rddptest.hzinsights.com/static/img/bg3.cf68268.jpg','https://rddptest.hzinsights.com/static/img/pptlastimg.930f118.png'],
-            activeIndex:0
+            imgList:[],
+            activeIndex:0,
+            reportId:0,
+            aid:''
         }
     },
-    onLoad(){
+    onLoad(options){
+        this.reportId=options.reportId
+        this.getDetail()
         uni.setPageOrientation({orientation : "landscape"})
     },
     onUnLoad(){
         uni.setPageOrientation({orientation : "portrait"})
     },
     methods: {
+        // 获取报告详情
+        async getDetail(){
+            const res=await apiReportDetail({
+                report_id:Number(this.reportId)
+            })
+            if(res.code===200){
+                const arr=res.data.report_info.ppt_img_list.split(';')
+                this.imgList=arr||[]
+            }else{
+                uni.showToast({
+                    title: res.msg,
+                    icon: 'none'
+                })
+            }
+        },
+
+        handleChangeItem(index){
+            this.aid='img'+(index-1)
+            this.activeIndex=index 
+        },
+
         handleOpen(){
             this.isOpen=!this.isOpen
         },
@@ -101,18 +133,15 @@ page{
         background: rgba(255, 255, 255, 0.4);
         backdrop-filter: blur(12px);
         transition: 0.3s;
+        display: flex;
         .imgs-box{
-            width: 70%;
+            max-width: 70%;
+            width: auto;
             height: 100%;
             margin: auto;
-            display: flex;
-            justify-content: center;
-            overflow-x: auto;
+            white-space: nowrap;
             image{
                 height: 100%;
-                flex-shrink: 0;
-                display: block;
-                box-sizing: border-box;
             }
             .img-active{
                 border: 1px solid #E3B377;