app-govern/pages/gc/detail.vue

<template>
    <Cn-page :loading="loading" noPadding>
        <view slot="body">
            <view class="detail">
                <view class="header">
                    <view class="header-title"
                        >{{ gc.name }}
                        <!-- <view class="header-title-extra">用能</view> -->
                    </view>
                    <view class="header-des-mini mb10">{{ gc.provinceName + gc.cityName }} {{ gc.createTime }}</view>
                    <view class="header-des">{{ gc.description }} </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.name"
                            :extra="item.projectType"
                            @click="jumpProject(item)"
                            v-for="(item, index) in store.data"
                            :key="index"
                        >
                            <view class="term-list-bottom">
                                <view class="term-list-bottom-item">
                                    <view>设备个数</view>
                                    <view>3</view>
                                </view>
                                <view class="term-list-bottom-item">
                                    <view>用户个数</view>
                                    <view>1</view>
                                </view>
                            </view>
                        </uni-card>
                        <Cn-empty v-if="store.empty"></Cn-empty>
                        <uni-load-more v-if="store.data && store.data.length > 0" :status="store.status"></uni-load-more>
                    </view>
                    <view style="padding: 0 20rpx" v-show="navMenuActive == 2">
                        <image class="gplot gplot-box" mode="aspectFill" src="/static/test2.pic.png" v-for="(item, key) in 3" :key="key" />
                    </view>
                </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>
import list from '../../common/js/list'
export default {
    mixins: [list],
    data() {
        return {
            loading: false,
            gc: '',
            navMenuList: [
                {
                    text: '项目',
                },
                {
                    text: '拓扑图',
                },
            ],
            content: [],
            navHeight: 0,
            navMenuActive: 0,
        }
    },
    methods: {
        trigger(e) {
            console.log(this.$refs)
            if (e.item.text == '移交') {
                uni.navigateTo({
                    url: '/pages/gc/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',
            })
        },
        jumpProject(item) {
            uni.navigateTo({
                url: '/pages/project/detail?project=' + JSON.stringify(item),
            })
        },
        init() {
            this.store = this.DataSource('/project/queryProject')
            this.store.params.engineeringId = this.gc.id
            this.store.reload()
        },
    },
    onLoad(option) {
        this.gc = JSON.parse(option.gc)
        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)
        this.init()
        // uni.setNavigationBarTitle({ title: this.gc })
    },
}
</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;
        }
        .header-des-mini {
            font-size: 24rpx;
            color: #999;
        }
    }

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

.gplot {
    position: relative;
    width: 100%;
    border: 8rpx solid #ccc;
}

.term-list-bottom {
    .term-list-bottom-item {
        font-size: 28rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        // view:first-of-type{
        //     color: #111;
        // }
    }

    .term-list-bottom-item:last-of-type {
        margin-bottom: 0;
    }
}
</style>