previewimage

pages/facility/detail.vue

@@ -22,9 +22,7 @@
                     最近上线时间：{{ detail.lastconnecttime || ' --' }}
                 </view>
             </view>
-            <view class="image">
-                图片预留区域
-            </view>
+            <preview-image :attinfos="detail.attinfos" />
             <view class="ceiling" :style="{ top: tovw(CustomBar) }">
                 <horizontal-direction ref="hd" />
             </view>
@@ -34,7 +32,6 @@
             <control ref="设备控制" :detail="detail" />
             <daily-record ref="设备日志" :w_deviceid="w_deviceid" />
             <preview ref="详情信息" :detail="detail" />
-
             <view style="height: 30px;" />
         </My_listbox>
     </view>
@@ -46,10 +43,11 @@ import tabs from "./modules/tabs.vue"
 import preview from "./modules/preview.vue"
 import dailyRecord from "./modules/dailyRecord.vue"
 import control from "./modules/control.vue"
+import previewImage from "./modules/previewImage.vue"
 
 let page = {};
 export default {
-    components: { horizontalDirection, tabs, preview, dailyRecord, control },
+    components: { horizontalDirection, tabs, preview, dailyRecord, control, previewImage },
     name: "facilityD",
     data() {
         return {
@@ -168,14 +166,4 @@ export default {
 
     }
 }
-
-.image {
-    width: 355px;
-    height: 158px;
-    border: 1px solid #ddd;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 15px auto 0;
-}
 </style>

pages/facility/modules/previewImage.vue

@@ -0,0 +1,66 @@
+<template>
+    <view class="container">
+        <swiper v-if="list.length" class="swiper" :indicator-dots="list.length > 1" :circular="true" indicator-color="#999"
+            indicator-active-color="#fff">
+            <swiper-item v-for="(item, index) in list" @click="preview(index)" :key="item.url">
+                <image class="image" :src="item.url" mode="aspectFit" lazy-load="true" />
+            </swiper-item>
+        </swiper>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "prodnum-06",
+    props: {
+        attinfos: Array
+    },
+    data() {
+        return {
+            list: []
+        }
+    },
+    watch: {
+        attinfos: function (newVal) {
+            this.list = newVal.filter(v => v.usetype == "previewImage")
+        }
+    },
+    methods: {
+        preview(index) {
+            console.log(index)
+
+            uni.previewImage({
+                current: index,
+                urls: this.list.map(v => v.url),
+                indicator: "number",
+                loop: true,
+                longPressActions: {
+                    itemList: ['发送给朋友', '保存图片', '收藏'],
+                    success: function (data) {
+                        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+                    },
+                    fail: function (err) {
+                        console.log(err.errMsg);
+                    }
+                }
+            });
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    .swiper {
+        width: 355px;
+        height: 158px;
+        margin: 15px auto 0;
+
+        .image {
+            width: 355px;
+            height: 158px;
+        }
+    }
+
+}
+</style>