2024-05-22 15:42:13 +08:00
|
|
|
|
<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"
|
2024-05-22 18:05:56 +08:00
|
|
|
|
:leftIcon="leftIcon"
|
2024-05-22 15:42:13 +08:00
|
|
|
|
statusBar
|
|
|
|
|
:color="color"
|
|
|
|
|
:tools="tools"
|
|
|
|
|
:opacityBgUi="opacityBgUi"
|
|
|
|
|
@search="(e) => emits('search', e)"
|
|
|
|
|
:defaultSearch="defaultSearch"
|
|
|
|
|
/>
|
|
|
|
|
<view class="page-body" :style="[bgBody]">
|
|
|
|
|
<!-- 顶部导航栏-情况2:沉浸式头部 -->
|
2024-05-22 18:05:56 +08:00
|
|
|
|
<pb-inner-navbar v-if="navbar === 'inner'" :title="title" :leftIcon="leftIcon" />
|
2024-05-22 15:42:13 +08:00
|
|
|
|
<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: '',
|
|
|
|
|
},
|
2024-05-22 18:05:56 +08:00
|
|
|
|
leftIcon: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '',
|
|
|
|
|
},
|
2024-05-22 15:42:13 +08:00
|
|
|
|
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 {
|
2024-05-24 17:24:44 +08:00
|
|
|
|
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
|
|
|
|
|
props.bgStyle.backgroundImage,
|
|
|
|
|
props.bgStyle.imageType
|
2024-05-22 15:42:13 +08:00
|
|
|
|
)}) no-repeat top center / 100% auto`,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return {}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 背景2
|
|
|
|
|
const bgBody = computed(() => {
|
|
|
|
|
if (navbarMode.value === 'normal') {
|
|
|
|
|
return {
|
2024-05-24 17:24:44 +08:00
|
|
|
|
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
|
|
|
|
|
props.bgStyle.backgroundImage,
|
|
|
|
|
props.bgStyle.imageType
|
2024-05-22 15:42:13 +08:00
|
|
|
|
)}) 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>
|