yihuo/components/page.vue

<template>
    <view
        :class="customClass"
        @click="clickPage"
        :style="{
            'background': bgColor,
            'min-height': '100vh'
        }"
    >
        <view
            v-if="nav"
            class="pagae-nav"
            :class="navClass"
            :style="{
                background: navColor,
                paddingTop: statusBarHeight + 'px',
                height: statusBarHeight + 40 + 'px'
            }"
        >
            <view class="relative flex-align-center" style="height: 36px">
                <view
                    v-if="title"
                    class="title line-ellipsis"
                    :class="[light ? 'color-white' : 'color-1']"
                    :style="{ background: navColor }"
                >
                    {{ title }}
                </view>
                <view
                    v-if="showBack"
                    class="back cuIcon-back "
                    @click="backAction"
                    :style="light ? 'color:#fff' : 'color:#000'"
                ></view>
            </view>
        </view>
        <view v-if="nav" :style="{ height: statusBarHeight + 36 + 'px' }"></view>
        <slot></slot>
        <loading />
        <message ref="notify" />
    </view>
</template>
<script>
    import store from '@/store'
    import { SET_NOTIFY } from '@/store/mutation-types'
    import loading from './loading.vue'
    import message from './message.vue'

    export default {
        components: { loading, message },
        props: {
            customClass: {
                type: String,
                default: ''
            },
            nav: {
                type: Boolean,
                default: true
            },
            navColor: {
                type: String,
                default: '#fff'
            },
            navClass: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            titleColor: {
                type: String,
                default: ''
            },
            showBack: {
                type: Boolean,
                default: true
            },
            light: {
                type: Boolean,
                default: false
            },
            bgColor: {
                type: String,
                default: ''
            }
        },
        data() {
            return {  }
        },
        mounted() {
            this.refreshNotify()
        },
        computed: {
            statusBarHeight() {
                if (store.state.systemInfo) {
                    return store.state.systemInfo.statusBarHeight
                }
                return 32
            }
        },
        methods: {
            refreshNotify() {
                store.commit(SET_NOTIFY, this.$refs.notify)
            },
            backAction() {
                // this.$router.back()
				uni.navigateBack({
					delta:1
				})
            },
            clickPage() {
                this.$emit('click')
            }
        }
    }
</script>
<style lang="scss" scoped>
    .pagae-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1800;
        .title {
            font-size: 30rpx;
            font-weight: bold;
            text-align: center;
            line-height: 72rpx;
            width: 500rpx;
        }
        .back {
            position: absolute;
            left: 28rpx;
            width: 48rpx;
            height: 64rpx;
            line-height: 64rpx;
            font-size: 32rpx;
            z-index: 1800;
        }
    }
</style>