app-govern/pages/project/detail.vue

<template>
    <Cn-page :loading='loading' noPadding>
        <view slot='body'>
            <view class='detail'>
                <view class="header">
                    <view class="header-title">{{ project }}
                        <view class="header-title-extra">用能</view>
                    </view>
                    <view class="header-des">项目详情。。。。。。。。</view>
                </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 device" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
                    <view v-show="navMenuActive == 0">
                        <uni-card :title="'设备' + item" :sub-title="project" extra="用能" v-for="item in 2" :key="item"
                            @click="goDevice" padding="0" thumbnail="/static/device.png">
                        </uni-card>
                    </view>
                    <view style="padding: 0 20rpx" v-show="navMenuActive == 1">
                        <uni-list>
                            <uni-list-item title="张三" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
                                <template v-slot:footer>
                                    <view class="footer-btn mt20" style="background:#e47470" @click="del">移除</view>
                                    <!-- <view class="footer-btn mt20 ml10" @click="goUserDetail">查看</view> -->
                                </template>
                            </uni-list-item>
                            <uni-list-item title="李四" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
                                <template v-slot:footer>
                                    <view class="footer-btn mt20" style="background:#e47470" @click="del">移除</view>
                                    <!-- <view class="footer-btn mt20 ml10" @click="goUserDetail">查看</view> -->
                                </template>
                            </uni-list-item>
                        </uni-list>
                    </view>
                    <uni-load-more status="nomore"></uni-load-more>
                </view>
                <uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
                    @trigger="trigger" v-if="content.length" />
                <uni-popup ref="share" type="share" background-color="#fff">
                    <uni-popup-share title="分享到"></uni-popup-share>
                </uni-popup>
            </view>
        </view>
    </Cn-page>
</template>
<script>
export default {
    data () {
        return {
            loading: false,
            project: '',
            navMenuList: [{
                text: '设备列表'
            }, {
                text: '子用户列表'
            }],
            content: [],
            navHeight: 0,
            navMenuActive: 0
        }
    },
    methods: {
        trigger (e) {
            console.log(this.$refs);
            if (e.item.text == '移交') {
                uni.navigateTo({
                    url: '/pages/project/transfer'
                })
            } else if (e.item.text == '分享') {
                this.$refs.share.open()
            }
        },
        navMenuClick (index) {
            this.navMenuActive = index
        },
        goUserDetail () {
            uni.navigateTo({
                url: '/pages/mine/userDetail'
            })
        },
        del () {
            console.log('del');
            uni.showModal({
                title: '提示',
                content: '确定要移除该成员吗？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定')
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })
        },
        goDevice () {
            uni.navigateTo({
                url: '/pages/device/APF/detail'
            })
        },

    },
    onLoad (option) {
        this.project = option.project
        let userInfo = uni.getStorageSync('userInfo')
        if (userInfo.role == '3') {
            this.content.push({
                iconPath: '/static/transfer.png',
                text: '移交',
            })
        } else if (userInfo.role == '4') {
            this.content.push({
                iconPath: '/static/share.png',
                text: '分享',
            })
        }
        setTimeout(() => {
            // 获取nav高度
            uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
                this.navHeight = rect.height
            }).exec()
        }, 1000);
        // uni.setNavigationBarTitle({ title: this.project })
    }
}
</script>
<style lang='scss'>
.detail {
    .content {
        box-sizing: border-box;
        padding-bottom: 20rpx;
    }

    .header {
        padding: 20rpx 20rpx 0;

        .header-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 40rpx;
            margin-bottom: 10rpx;

            .header-title-extra {
                font-size: 24rpx;
                color: #666;
                padding-right: 10rpx;
            }
        }

        .header-des {
            font-size: 28rpx;
            color: #666;
        }
    }


    .footer-btn {
        padding: 0 20rpx;
        height: 50rpx;
        background-color: #007aff;
        font-size: 24rpx;
        color: #fff;
        text-align: center;
        line-height: 50rpx;
        border-radius: 10rpx;
    }
}
</style>