yb5.3

pages-report/previewImage.vue

@@ -5,8 +5,10 @@
             circular 
             :indicator-dots="false" 
             :autoplay="false"
+            :current="activeIndex"
+            @change="swiperChange"
 		>
-            <swiper-item>
+            <swiper-item v-for="item in imgList" :key="item">
                 <movable-area style="width:100%;height:100%">
                     <movable-view 
                         class="max" 
@@ -15,13 +17,29 @@
                     >
                         <image 
                             class="img-item" 
-                            src="https://rddptest.hzinsights.com/static/img/bg3.cf68268.jpg" mode="heightFix"
+                            :src="item" mode="heightFix"
                         />
                     </movable-view>
                 </movable-area>
                 
             </swiper-item>
         </swiper>
+        <view class="bot-fix-box" :style="{bottom:isOpen?'0':'-100px'}">
+            <view class="imgs-box">
+                <image 
+                    v-for="(img,index) in imgList" 
+                    :key="img" 
+                    :src="img" 
+                    :class="index==activeIndex?'img-active':''"
+                    mode="heightFix"
+                    @click="activeIndex=index"
+                />
+            </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>
 
@@ -29,7 +47,9 @@
 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
         }
     },
     onLoad(){
@@ -37,7 +57,20 @@ export default {
     },
     onUnLoad(){
         uni.setPageOrientation({orientation : "portrait"})
-    }
+    },
+    methods: {
+        handleOpen(){
+            this.isOpen=!this.isOpen
+        },
+        swiperChange(e){
+            this.activeIndex=e.detail.current
+        },
+        closePage(){
+            wx.navigateBack({
+                delta: 1
+            });
+        }
+    },
 }
 </script>
 
@@ -59,5 +92,52 @@ page{
         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;
+        .imgs-box{
+            width: 70%;
+            height: 100%;
+            margin: auto;
+            display: flex;
+            justify-content: center;
+            overflow-x: auto;
+            image{
+                height: 100%;
+                flex-shrink: 0;
+                display: block;
+                box-sizing: border-box;
+            }
+            .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>