79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<view class="clinic-layout safe-area-inset-bottom">
|
|
<u-navbar
|
|
:title="title"
|
|
:is-back="showBack"
|
|
title-size="34"
|
|
title-color="#fff"
|
|
:background="{ background: 'linear-gradient(90deg, #00BFA6 0%, #6ACDBB 93%)' }"
|
|
/>
|
|
<view class="clinic-body" :style="bodyStyle">
|
|
<slot />
|
|
</view>
|
|
<u-tabbar
|
|
v-if="showTabbar"
|
|
:value="tabIndex"
|
|
:list="tabList"
|
|
active-color="#6ACDBB"
|
|
@change="onTabChange"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getClinicSalespersonContext } from '@/subPackages/sub_clinic_salesperson/common/context.js';
|
|
|
|
export default {
|
|
name: 'ClinicSalespersonPageLayout',
|
|
props: {
|
|
title: { type: String, default: '' },
|
|
showBack: { type: Boolean, default: false },
|
|
showTabbar: { type: Boolean, default: false },
|
|
tabIndex: { type: Number, default: 0 },
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
navbarHeight: 0,
|
|
tabList: getClinicSalespersonContext().tabList,
|
|
};
|
|
},
|
|
computed: {
|
|
bodyStyle() {
|
|
const top = this.statusBarHeight + this.navbarHeight;
|
|
let bottom = '32rpx';
|
|
if (this.showTabbar) {
|
|
// bottom = 'calc(100rpx + env(safe-area-inset-bottom))';
|
|
bottom = 'calc(100rpx + env(safe-area-inset-bottom))';
|
|
}
|
|
return {
|
|
paddingTop: top + 'px',
|
|
paddingBottom: bottom,
|
|
minHeight: '100vh',
|
|
boxSizing: 'border-box',
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
this.statusBarHeight = this.$statusBarHeight || 0;
|
|
this.navbarHeight = this.$navbarHeight || 44;
|
|
},
|
|
methods: {
|
|
onTabChange(index) {
|
|
if (index === this.tabIndex) return;
|
|
const target = this.tabList[index];
|
|
if (target && target.pagePath) {
|
|
uni.reLaunch({ url: target.pagePath });
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.clinic-layout {
|
|
min-height: 100vh;
|
|
background: #f9fafb;
|
|
}
|
|
</style>
|