mall-app-t/peach/ui/pb-layout/pb-layout.vue

<template>
    <view class="page-app" :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]">
        <view class="page-main" :style="[bgMain]">
            <!-- 顶部导航栏-情况1：默认通用顶部导航栏 -->
            <pb-navbar
                v-if="navbar === 'normal'"
                :title="title"
                :leftIcon="leftIcon"
                statusBar
                :color="color"
                :tools="tools"
                :opacityBgUi="opacityBgUi"
                @search="(e) => emits('search', e)"
                :defaultSearch="defaultSearch"
            />
            <view class="page-body" :style="[bgBody]">
                <!-- 顶部导航栏-情况2：沉浸式头部 -->
                <pb-inner-navbar v-if="navbar === 'inner'" :title="title" :leftIcon="leftIcon" />
                <view v-if="navbar === 'inner'" :style="[{ paddingTop: peach.$platform.navbar + 'px' }]"></view>

                <!-- 页面内容插槽 -->
                <slot />

                <!-- 底部导航 -->
                <pb-tabbar v-if="tabbar !== ''" :path="tabbar" />
            </view>
        </view>

        <view class="page-modal">
            <!-- 全局授权弹窗 -->
            <!-- <p-auth-modal /> -->
            <!-- 全局分享弹窗 -->
            <!-- <p-share-modal :shareInfo="shareInfo" /> -->
            <!-- 全局快捷入口 -->
            <!-- <p-menu-tools /> -->
        </view>
    </view>
</template>

<script setup>
/**
 * 模板组件 - 提供页面公共组件，属性，方法
 * @param {String} title 标题
 * @param {String} navbar 导航栏模式(normal-默认通用顶部导航栏 inner-沉浸式头部)
 * @param {String} opacityBgUi 导航栏背景色 bg-color 类，详细查看 scss/style/_background.scss 文件
 * @param {String} color 标题颜色
 * @param {String} tools 取值 title（标题）或者 search（搜索框）
 * @param {Object} bgStyle 背景样式
 * @param {String} bgStyle.backgroundColor 背景色
 * @param {String} bgStyle.backgroundImage 背景图
 * @param {String} tabbar 底部导航页面路径
 */
import { computed, reactive, ref } from 'vue'
import peach from '@/peach'
import { isEmpty } from 'lodash'
import { onShow } from '@dcloudio/uni-app'
// #ifdef MP-WEIXIN
import { onShareAppMessage } from '@dcloudio/uni-app'
// #endif

const props = defineProps({
    title: {
        type: String,
        default: '',
    },
    leftIcon: {
        type: String,
        default: '',
    },
    navbar: {
        type: String,
        default: 'normal',
    },
    opacityBgUi: {
        type: String,
        default: 'bg-white',
    },
    color: {
        type: String,
        default: '',
    },
    tools: {
        type: String,
        default: 'title',
    },
    bgStyle: {
        type: Object,
        default: () => ({
            src: '',
            color: 'var(--ui-BG-1)',
        }),
    },
    tabbar: {
        type: [String, Boolean],
        default: '',
    },
    onShareAppMessage: {
        type: [Boolean, Object],
        default: true,
    },
    leftWidth: {
        type: [Number, String],
        default: 100,
    },
    rightWidth: {
        type: [Number, String],
        default: 100,
    },
    defaultSearch: {
        type: String,
        default: '',
    },
    //展示返回按钮
    showLeftButton: {
        type: Boolean,
        default: false,
    },
})
const emits = defineEmits(['search'])

const sysStore = peach.$store('sys')
const userStore = peach.$store('user')
const appStore = peach.$store('app')
// const modalStore = peach.$store('modal')
const sys = computed(() => sysStore)

// 导航栏模式(因为有自定义导航栏 需要计算)
const navbarMode = computed(() => {
    if (props.navbar === 'normal') {
        return 'normal'
    }
    return 'inner'
})

// 背景1
const bgMain = computed(() => {
    if (navbarMode.value === 'inner') {
        return {
            background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
                props.bgStyle.backgroundImage,
                props.bgStyle.imageType
            )}) no-repeat top center / 100% auto`,
        }
    }
    return {}
})

// 背景2
const bgBody = computed(() => {
    if (navbarMode.value === 'normal') {
        return {
            background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
                props.bgStyle.backgroundImage,
                props.bgStyle.imageType
            )}) no-repeat top center / 100% auto`,
        }
    }
    return {}
})

// 分享信息
const shareInfo = computed(() => {
    if (props.onShareAppMessage === true) {
        return peach.$platform.share.getShareInfo()
    } else {
        if (!isEmpty(props.onShareAppMessage)) {
            // peach.$platform.share.updateShareInfo(props.onShareAppMessage)
            return props.onShareAppMessage
        }
    }
    return {}
})

// #ifdef MP-WEIXIN
// 微信小程序分享
onShareAppMessage(() => {
    return {
        title: shareInfo.value.title,
        path: shareInfo.value.path,
        imageUrl: shareInfo.value.image,
    }
})
// #endif

onShow(() => {
    if (!isEmpty(shareInfo.value)) {
        // peach.$platform.share.updateShareInfo(shareInfo.value)
    }
})
</script>

<style lang="scss" scoped>
.page-app {
    position: relative;
    color: var(--ui-TC);
    background-color: var(--ui-BG-1) !important;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 100vh;

    .page-main {
        position: absolute;
        z-index: 1;
        width: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;

        .page-body {
            width: 100%;
            position: relative;
            z-index: 1;
            flex: 1;
        }

        .page-img {
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }
    }
}
</style>