sound-chain/common/components/s-layout/s-layout.vue

<template>
  <view
    class="page-app"
  >
    <view class="page-main" :style="[bgMain]">
      <!-- 顶部导航栏-情况1：默认通用顶部导航栏 -->
      <su-navbar
        v-if="navbar === 'normal'"
        :title="title"
        statusBar
        :color="color"
        :tools="tools"
        :opacityBgUi="opacityBgUi"
        @search="(e) => emits('search', e)"
        :defaultSearch="defaultSearch"
		:showBackButton="showBackButton"
      />

      <!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
      <s-custom-navbar
        v-else-if="navbar === 'custom' && navbarMode === 'normal'"
        :data="navbarStyle"
        :showLeftButton="showLeftButton"
      />
      <view class="page-body" :style="[bgBody]">
        <!-- 顶部导航栏-情况3：沉浸式头部 -->
        <su-inner-navbar v-if="navbar === 'inner'" :showBackButton="showBackButton" :showLogoutButton="showLogoutButton" :showRecordButton="showRecordButton" :showLeftButton="showLeftButton" :showLeftLogoutButton="showLeftLogoutButton" :showRecordTextButton="showRecordTextButton" :showImportButton="showImportButton" :showExportButton="showExportButton" :alway="alway" :title="title" @logout="state.showLogout=true" @import="onClickImport" @export="onClickExport" />
        <view
          v-if="navbar === 'inner'"
          :style="[{ paddingTop: sheep?.$platform?.navbar + 'px' }]"
        ></view>

        <!-- 顶部导航栏-情况4：装修组件导航栏-沉浸式 -->
        <s-custom-navbar
          v-if="navbar === 'custom' && navbarMode === 'inner'"
          :data="navbarStyle"
          :showLeftButton="showLeftButton"
        />

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

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

    <view class="page-modal">
	  <!-- 全局授权弹窗 -->
	  <s-auth-modal />
      <!-- 全局快捷入口 -->
      <s-menu-tools />
	  <su-popup :show="state.showLogout" round="20" type="center" :isMaskClick="false" :showClose="false" @close="state.showLogout=false">
	  		<view class="tips_wrap">
	  			<view class="tips_cont">
	  				<view class="label">退出登录</view>
	  				<view class="cont">确认要退出当前账号吗？</view>
	  			</view>
	  			<view class="group_btn">
	  				<view class="item_btn cancel_btn" @tap="state.showLogout=false">取消</view>
	  				<view class="item_btn logout-btn" @tap="logout">确认</view>
	  			</view>
	  		</view>
	  </su-popup>
    </view>
  </view>
</template>

<script setup>
  /**
   * 模板组件 - 提供页面公共组件，属性，方法
   */
  import { computed, onMounted, reactive } from 'vue';
  import AuthUtil from '@/common/api/member/auth';
  import sheep from '@/common';
  import { isEmpty } from 'lodash-es';
  // #ifdef MP-WEIXIN
  import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
  // #endif

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    navbar: {
      type: String,
      default: 'normal',
    },
    opacityBgUi: {
      type: String,
      default: 'bg-white',
    },
    color: {
      type: String,
      default: '',
    },
    tools: {
      type: String,
      default: 'title',
    },
    keyword: {
      type: String,
      default: '',
    },
    navbarStyle: {
      type: Object,
      default: () => ({
        styleType: '',
        type: '',
        color: '',
        src: '',
        list: [],
        alwaysShow: 0,
      }),
    },
    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,
    },
	showBackButton: {
	  type: Boolean,
	  default: false,
	},
	showRecordButton: {
	  type: Boolean,
	  default: false,
	},
	showLogoutButton: {
	  type: Boolean,
	  default: false,
	},
	showLeftLogoutButton: {
	  type: Boolean,
	  default: false,
	},
	showRecordTextButton: {
	  type: Boolean,
	  default: false,
	},
	showImportButton: {
	  type: Boolean,
	  default: false,
	},
	showExportButton: {
	  type: Boolean,
	  default: false,
	},
	alway: {
	  type: Boolean,
	  default: true,
	},
	opacity: {
	  type: Boolean,
	  default: true,
	},
  });
  const state = reactive({
  	showLogout: false
  })
  const emits = defineEmits(['search','import', 'export']);

  const userStore = sheep.$store('user');
  const modalStore = sheep.$store('modal');

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

  // 背景1
  const bgMain = computed(() => {
    if (navbarMode.value === 'inner') {
      return {
        background: `${props.bgStyle.backgroundColor || props.bgStyle.color}${props.bgStyle.backgroundImage?` url(${props.bgStyle.backgroundImage}) no-repeat top -88rpx center / 100% auto`:''}`,
		...(props.bgStyle.backgroundImage?{height: '100vh',overflowY: 'auto'}:{})
      };
    }
    return {};
  });

  // 背景2
  const bgBody = computed(() => {
    if (navbarMode.value === 'normal') {
      return {
        background: `${props.bgStyle.backgroundColor || props.bgStyle.color}${props.bgStyle.backgroundImage?` url(${props.bgStyle.backgroundImage}) no-repeat top -88rpx center / 100% auto`:''}`,
		...(props.bgStyle.backgroundImage?{height: '100vh',overflowY: 'auto'}:{})
      };
    }
    return {};
  });
  async function logout(){
  	  const { code } = await AuthUtil.logout()
  	  if (code !== 1) {
  	    return;
  	  }
  	  sheep.$store('user').logout()
	  state.showLogout = false
  	  sheep.$router.go('/pages/index/index')
  }
  function onClickImport(){
  	  emits('import')
  }
  function onClickExport(){
  	  emits('export')
  }
  // 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
  onMounted(()=>{
  })
</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: 750rpx;
    height: 100vh;
	margin: 0 auto;
    .page-main {
	  position: absolute;
	  z-index: 1;
	  width: 100%;
	  min-height: 100%;
	  display: flex;
	  flex-direction: column;
	  
	  .page-body {
		height: 100%;
	    width: 100%;
	    position: relative;
	    z-index: 1;
		display: flex;
		flex-direction: column;
	  }
      .page-img {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
      }
    }
  }
</style>