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'" :iconColor="iconColor" :color="color" :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,
  },
  iconColor: {
    type: String,
    default: '#000'
  }
})
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>