app-govern/pages/device/APF/detail.vue

<template>
    <Cn-page :loading='loading' noPadding>
        <view slot='body'>
            <view class='detail'>
                <view class="header">
                    <image src="/static/test2.pic.jpg" mode="widthFix" style="width: 100%;" />
                </view>
                <view class="des">
                    <text>设备基础信息</text>
                    <text class="ml10">设备状态</text>
                </view>
                <view class="nav">
                    <view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
                        v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
                    </view>
                </view>
                <view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
                    <view v-if="navMenuActive == 0">
                        <basic></basic>
                    </view>
                    <view v-else-if="navMenuActive == 1">
                        <xieBo></xieBo>
                    </view>
                    <view v-else-if="navMenuActive == 2">
                        <power></power>
                    </view>
                    <view v-else-if="navMenuActive == 3">
                        <oscillogram></oscillogram>
                    </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>
</template>
<script>
import basic from "./comp/basic.vue";
import xieBo from "./comp/xieBo.vue";
import power from "./comp/power.vue";
import oscillogram from "./comp/oscillogram.vue";
import IO from "./comp/IO.vue";

export default {
    components: {
        basic,
        xieBo,
        power,
        oscillogram,
        IO
    },
    data () {
        return {
            loading: false,
            navMenuActive: 0,
            navHeight: 0,
            navMenuList: [{
                text: '基本'
            }, {
                text: '谐波'
            }, {
                text: '功率'
            }, {
                text: '波形'
            }, {
                text: 'I/O'
            }],
            content: [{
                iconPath: '/static/report.png',
                text: '告警',
            }, {
                iconPath: '/static/record.png',
                text: '记录',
            }, {
                iconPath: '/static/about.png',
                text: '关于',
            },
            ]
        }
    },
    methods: {
        trigger (e) {
            console.log(e);
            if (e.item.text === '分享') {
                this.$refs.share.open()
            } else if (e.item.text === '删除') {
                uni.showModal({
                    title: '提示',
                    content: '确定删除该设备吗？',
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定')
                        } else if (res.cancel) {
                            console.log('用户点击取消')
                        }
                    }
                });
            } else if (e.item.text === '下载') {
                this.$util.toast('下载成功')
            } else if (e.item.text === '记录') {
                uni.navigateTo({ url: '/pages/device/APF/record' })
            } else if (e.item.text === '告警') {
                uni.navigateTo({ url: '/pages/device/APF/report' })
            } else if (e.item.text === '关于') {
                uni.navigateTo({ url: '/pages/device/APF/about' })
            } else if (e.item.text === '移交') {
                uni.navigateTo({ url: '/pages/device/transfer' })
            } else if (e.item.text === '反馈') {
                uni.navigateTo({ url: '/pages/device/feedback' })
            } else if (e.item.text === '用户') {
                uni.navigateTo({ url: '/pages/device/user' })
            }
            this.$refs.fab.close()
        },
        navMenuClick (idx) {
            this.navMenuActive = idx
        },
        init () {
            let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
            console.log(userInfo.role);
            switch (userInfo.role) {
                case 3:
                    this.content.splice(0, 0, {
                        iconPath: '/static/transfer.png',
                        text: '移交',
                    })
                    break;
                case 4:
                    this.content.splice(1, 0, {
                        iconPath: '/static/share.png',
                        text: '分享',
                    }, {
                        iconPath: '/static/subordinate.png',
                        text: '用户',
                    }, {
                        iconPath: '/static/delate.png',
                        text: '删除',
                    })
                    break;
                case 5:
                    this.content.push({
                        iconPath: '/static/feedback.png',
                        text: '反馈',
                    })
                    break;
                default:
                    break;

            }
            setTimeout(() => {
                // 获取nav高度
                uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
                    this.navHeight = rect.height
                }).exec()
            }, 1000);
        }
    },
    onLoad (options) {
        this.init()
    },

}
</script>
<style lang='scss'>
.detail {

    // background: $uni-theme-white;
    .header {}

    .des {
        padding: 20rpx 20rpx 0;
        font-size: 28rpx;
        color: #999;
    }

    .nav {
        position: sticky;
        top: 0;
        left: 0;
        padding: 20rpx;
        display: flex;
        background: rgb(243, 244, 245);

        .nav-menu {
            padding: 10rpx 20rpx;
            margin-left: 20rpx;
            font-size: 28rpx;
            border-radius: 8rpx;
            background: $uni-theme-white;

            &:first-of-type {
                margin-left: 0;
            }

            &-active {
                background: $uni-theme-blue;
                color: #fff;
            }
        }

    }

    .content {
        box-sizing: border-box;
        padding: 0 20rpx;
    }


}
</style>