JLH/JLHAPP/src/components/lj-win-common.vue

<!--最基础的页面组件，管理app bar 页脚等基础布局-->
<!--methods-->
<!--打开右侧抽屉openRightDrawer()-->
<!--关闭右侧抽屉closeRightDrawer()-->
<!--slots-->
<!--header_left：app bar左侧，通常为图标按钮-->
<!--header：app bar中间，默认为标题-->
<!--header_right：appbar 右侧，通常为图标按钮-->
<!--header_sub： appbar下方子标题，固定在顶部-->
<!--body：中间内容-->
<!--footer：底部，固定，为兼容iPhone X以后的home indicator安全区域，不能过度使用div作辅助tag，slot声明尽量直接声明在实体tag中，或者用template代替div进行算法辅助-->
<!--drawer_right：右侧抽屉-->

<template>
    <div ref="baseDiv">
        <div class="background-color" :class="bgClass">
            <mu-appbar v-show="!hideAppBar" class="header" ref="headerDom" :color="headerBg" :textColor="headerTextColor">
                <div slot="left" style="position: absolute; z-index: 99; top: 0; left: 0;" ref="headerLeft">
                    <slot name="header_left">
                        <!-- 默认icon -->
                        <mu-button icon v-if="showBack" @click="closeWin()">
                            <i class="iconfont icon-left"></i>
                        </mu-button>
                    </slot>
                </div>
                <slot name="header">
                    <div style="text-align: center;">
                        <slot name="header_title">
                            {{title}}
                        </slot>
                    </div>
                </slot>
                <div slot="right" style="position: absolute; z-index: 99; top: 0; right: 0;" ref="headerRight">
                    <slot name="header_right">
                    </slot>
                </div>
            </mu-appbar>
            <div id="headerSub" v-if="!hideHeaderSub" class="header-sub" v-bind:style="headerSubStyle">
                <slot name="header_sub"></slot>
            </div>
            <div class="content" v-bind:style="contentStyle" v-bind:class="bodyClass" ref="content">
                <template v-if="pullRefresh">
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                        <slot name="body">
                        </slot>
                    </van-pull-refresh>
                </template>
                <template v-else>
                    <slot name="body">
                    </slot>
                </template>
                <!--<slot name="header_sub"></slot>-->
                <!--<sticky :offset="stickyOffset">-->
                <!--<slot name="header_sub"></slot>-->
                <!--</sticky>-->
            </div>
            <template v-if="simplefooter">
                <div class="footer">
                    <slot name="footer" ref="footerInside">
                    </slot>
                </div>
            </template>
            <mu-paper v-else class="footer" ref="footerDom" :zDepth="6">
                <slot name="footer" ref="footerInside">
                </slot>
            </mu-paper>
        </div>
        <mu-drawer :docked='false' right :open="rightDrawerOpen" @close="closeRightDrawer">
            <div class="drawer-content" :style="drawerStyle">
                <slot name="drawer_right">
                </slot>
            </div>
        </mu-drawer>
    </div>
</template>
<script>
    import {Sticky} from 'vux'

    export default {
        name: "lj-win-common",
        components: {
            "sticky": Sticky
        },
        props: {
            // 标题名称
            title: {
                type: String,
                default: "龙嘉软件"
            },
            // 背景div的css类
            bgClass: {
                type: [String, Array, Object]
            },
            // 内容div的css类
            bodyClass: {
                type: [String, Array, Object]
            },
            // 右侧抽屉标题
            rightDrawerTitle: {
                type: String,
                default: ""
            },
            // 右侧抽屉初始时是否打开
            rightDrawerInitOpen: {
                type: Boolean,
                default: false
            },
            // 是否显示返回按钮
            showBack: {
                type: Boolean,
                default: true
            },
            hideAppBar: {
                type: Boolean,
                default: false
            },
            closeWinHandler: {
                type: Function,
            },
            hideHeaderSub: {
                type: Boolean,
                default: false
            },
            headerBg: {
                type: String,
                default: "#fff"
            },
            headerTextColor: {
                type: String,
                default: "#000"
            },
            bodyClass: {
                type: String,
                default: ""
            },
            pullRefresh: {
                type: Boolean,
                default: false
            },
            simplefooter: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                rightDrawerOpen: false,
                contentStyle: {
                    //变量名不能改，继承会引用到
                    marginTop: "0px",
                    marginBottom: "0px"
                },
                headerSubStyle: {
                    top: "0"
                },
                drawerStyle: {},
                stickyOffset: 40,
                isLoading: false
            }
        },
        created() {
            this.rightDrawerOpen = this.rightDrawerInitOpen;
        },
        mounted() {
            this.initStyle();
        },
        updated() {
            this.initStyle();
        },
        methods: {
            onRefresh() {
                this.$emit("onRefresh", () => {
                    this.isLoading = false;
                });
            },
            initStyle() {
                let appBarHeight = 0;
                // 兼容刘海屏
                $lj.fixStatusBar(this.$refs.headerDom.$el);
                $lj.fixStatusBar(this.$refs.headerLeft);
                $lj.fixStatusBar(this.$refs.headerRight);
                appBarHeight = $lj.getAppBarHeight();
                this.$refs.headerDom.$el.style.height = appBarHeight + "px";
                // 兼容iPhone X底部Home Indicator
                if (api.systemType === "ios") {
                    if (this.$slots.footer) {
                        let footerObj;
                        for (let item of this.$slots.footer.reverse()) {
                            if (item.tag) {
                                footerObj = item;
                                break;
                            }
                        }
                        if (footerObj) {
                            $lj.fixTabBar(footerObj.elm);
                        }
                    }
                }

                let footerHeight = 0;
                let headerSubHeight = 0;
                if (this.$refs.headerDom.$el) {
                    appBarHeight = this.$refs.headerDom.$el.offsetHeight;
                }
                if (document.getElementById("headerSub")) {
                    headerSubHeight = document.getElementById("headerSub").offsetHeight;
                }
                this.stickyOffset = appBarHeight;
                // if (this.$refs.footerDom.$el) {
                //     footerHeight = this.$refs.footerDom.$el.offsetHeight;
                // } else {
                //     footerHeight = this.$refs.footerDom.offsetHeight;
                // }
                if (this.$slots.footer) {
                    let heightArr = [];
                    this.$slots.footer.forEach(item => {
                        if (item.elm.offsetHeight) {
                            heightArr.push(item.elm.offsetHeight);
                        }
                    });
                    footerHeight = Math.max.apply(null, heightArr);
                }
                // footerHeight += api.safeArea.bottom;
                let winHeight = 80;
                if (window.api) {
                    winHeight = api.winHeight;
                }
                this.headerSubStyle.top = appBarHeight + "px";
                this.contentStyle.minHeight = (winHeight - appBarHeight - footerHeight - headerSubHeight) + "px";
                this.contentStyle.marginTop = appBarHeight + headerSubHeight + "px";
                this.contentStyle.marginBottom = footerHeight + "px";
                // console.log(' this.contentStyle :>>>>>>>>>>>>>>>>>>>>>!!!!!!!!!!!!!!!!!____________________________', JSON.stringify(this.contentStyle));
                this.$nextTick(() => {
                    this.$emit('fix-body',this.contentStyle);
                });
                // 右侧抽屉
                // this.drawerStyle.minHeight = this.contentStyle.minHeight;
                // this.drawerStyle.marginTop = this.contentStyle.marginTop;
            },
            openRightDrawer() {
                this.rightDrawerOpen = true;
            },
            closeRightDrawer() {
                this.rightDrawerOpen = false;
            },
            closeWin() {
                if (this.closeWinHandler){
                    this.closeWinHandler();
                } else {
                    $lj.closeWin();
                }
            }
        }
    }
</script>
<style scoped lang="less">
    @import "~assets/css/lj-base.less";

    .header {
        width: 100%;
        position: fixed;
        top: 0;
        background-color: @appBarBackgroundColor;
        z-index: 999;
    }

    .content {
        width: 100%;
        margin: 0 auto;

    }

    .background-color {
        background-color: @winBackgroundColor;
    }

    .drawer-content {
        padding: 2rem;
    }

    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 99;
    }

    .header-sub {
        position: fixed;
        width: 100%;
        height: auto;
        background: white;
        z-index: 100;
    }
</style>