页面切图

pages/device/detailAPF.vue

@@ -2,7 +2,9 @@
     <Cn-page :loading='loading' noPadding>
         <view slot='body'>
             <view class='detail'>
-                <view class="header"> </view>
+                <view class="header">
+                    <image src="/static/test.pic.jpg" mode="widthFix" style="width: 100%;" />
+                </view>
                 <view class="des">
                     <text>设备基础信息</text>
                     <text class="ml10">设备状态</text>
@@ -13,29 +15,28 @@
                     </view>
                 </view>
                 <view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
-                    <view v-show="navMenuActive == 0">
+                    <view v-if="navMenuActive == 0">
                         <basic></basic>
                     </view>
-                    <view v-show="navMenuActive == 1">
+                    <view v-else-if="navMenuActive == 1">
                         <xieBo></xieBo>
                     </view>
-                    <view v-show="navMenuActive == 2">
-                        <view>
-                            <text>设备功率信息</text>
-                        </view>
+                    <view v-else-if="navMenuActive == 2">
+                        <power></power>
                     </view>
-                    <view v-show="navMenuActive == 3">
-                        <view>
-                            <text>设备波形信息</text>
-                        </view>
+                    <view v-else-if="navMenuActive == 3">
+                        <oscillogram></oscillogram>
                     </view>
-                    <view v-show="navMenuActive == 4">
-                        <view>
-                            <text>设备I/O信息</text>
-                        </view>
+                    <view v-else-if="navMenuActive == 4">
+                        <IO></IO>
                     </view>
                     <view style="height:20rpx"></view>
                 </view>
+                <uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
+                    @trigger="trigger" />
+                <uni-popup ref="share" type="share" background-color="#fff">
+                    <uni-popup-share title="分享到"></uni-popup-share>
+                </uni-popup>
             </view>
         </view>
     </Cn-page>
@@ -43,11 +44,17 @@
 <script>
 import basic from "./APF/basic.vue";
 import xieBo from "./APF/xieBo.vue";
+import power from "./APF/power.vue";
+import oscillogram from "./APF/oscillogram.vue";
+import IO from "./APF/IO.vue";
 
 export default {
     components: {
         basic,
-        xieBo
+        xieBo,
+        power,
+        oscillogram,
+        IO
     },
     data () {
         return {
@@ -64,10 +71,55 @@ export default {
                 text: '波形'
             }, {
                 text: 'I/O'
-            }]
+            }],
+            content: [{
+                iconPath: '/static/share.png',
+                text: '分享',
+            }, {
+                iconPath: '/static/delate.png',
+                text: '删除',
+            }, {
+                iconPath: '/static/download.png',
+                text: '下载',
+            }, {
+                iconPath: '/static/record.png',
+                text: '记录',
+            }, {
+                iconPath: '/static/report2.png',
+                text: '告警',
+            }, {
+                iconPath: '/static/about.png',
+                text: '关于',
+            },
+            ]
         }
     },
     methods: {
+        trigger (e) {
+            if (e.index === 0) {
+                this.$refs.share.open()
+            } else if (e.index === 1) {
+                uni.showModal({
+                    title: '提示',
+                    content: '确定删除该设备吗？',
+                    success: function (res) {
+                        if (res.confirm) {
+                            console.log('用户点击确定')
+                        } else if (res.cancel) {
+                            console.log('用户点击取消')
+                        }
+                    }
+                });
+            } else if (e.index === 2) {
+                this.$util.toast('下载成功')
+            } else if (e.index === 3) {
+                uni.navigateTo({ url: '/pages/device/record' })
+            } else if (e.index === 4) {
+                uni.navigateTo({ url: '/pages/device/report' })
+            } else if (e.index === 5) {
+                uni.navigateTo({ url: '/pages/device/about' })
+            }
+        },
         navMenuClick (idx) {
             this.navMenuActive = idx
         },
@@ -89,11 +141,8 @@ export default {
 <style lang='scss'>
 .detail {
 
-    // background: #fff;
-    .header {
-        height: 400rpx;
-        background: $uni-color-primary;
-    }
+    // background: $uni-theme-white;
+    .header {}
 
     .des {
         padding: 20rpx 20rpx 0;
@@ -114,7 +163,7 @@ export default {
             margin-left: 20rpx;
             font-size: 28rpx;
             border-radius: 8rpx;
-            background: #fff;
+            background: $uni-theme-white;
 
             &:first-of-type {
                 margin-left: 0;