gypsy-crm-frontend-vu/components/cwg-page-wrapper.vue

<template>
  <view :class="['page-wrapper', { dark: isDark }]">
    <cwg-match-media :max-width="991" v-if="!isLoginPage">
      <cwg-pc-header @open-right-drawer="openRightDrawer" @open-left-drawer="openLeftDrawer" class="header-box"
                     :sidebarVisible="sidebarVisible" />
      <!--      占位-->
      <view class="fixed"></view>
    </cwg-match-media>
    <LanguageDropdown style="width: 0;display: none;" />
    <cwg-progress />
    <cwg-confirm-popup />
    <view class="page-content" :style="{ backgroundColor: bgColor }">
      <cwg-match-media :max-width="991" v-if="!isLoginPage">
        <view class="left-sidebar" :class="{ 'sidebar-visible': sidebarVisible }">
          <cwg-sidebar />
        </view>
        <view class="sidebar-mask" v-if="sidebarVisible" @click="openLeftDrawer" :style="{
          opacity: sidebarVisible ? 1 : 0,
          transition: 'opacity 281ms cubic-bezier(0.4, 0, 0.2, 1)'
        }">

        </view>
      </cwg-match-media>
      <view class="content-info">
        <!--      完善信息提示，-->
        <PrefectInfo />
        <!--      申请成为ib，-->
        <IbInfo />

        <view class="content-wrapper" :class="{ 'content-wrapper-padding': isContentPadding }">
          <!-- <cwg-header /> -->
          <view>
            <slot />
          </view>
          <cwg-custom-footer />
        </view>
      </view>
      <view :style="{ height: isTabBarPage ? '60px' : '0px' }" />
    </view>
    <cwg-match-media :max-width="991">
      <cwg-tab-bar v-model:isTabBarPage="isTabBarPage" />
    </cwg-match-media>
    <cwg-right-drawer v-if="!isLoginPage" ref="rightDrawerRef" @navigate="handleDrawerNavigate"
                      @logout="handleDrawerLogout" />
    <cwg-notice-drawer v-if="!isLoginPage" ref="noticeDrawerRef" @navigate="handleDrawerNavigate"
                       @logout="handleDrawerLogout" />
  </view>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import useRoute, { updateRoute } from '@/hooks/useRoute'
  import useRouter from '@/hooks/useRouter'
  import useUserStore from '@/stores/use-user-store'
  import { userApi } from '@/api/user'
  import useGlobalStore from '@/stores/use-global-store'
  import LanguageDropdown from './LanguageDropdown.vue'
  import PrefectInfo from '@/components/PrefectInfo.vue'
  import IbInfo from '@/components/IbInfo.vue'

  const globalStore = useGlobalStore()
  const router = useRouter()
  const userStore = useUserStore()

  const props = defineProps({
    // 是否固定顶部导航栏
    isHeaderFixed: {
      type: Boolean,
      default: false,
    },
    // 是否登录页，登录页不显示侧边栏和顶部导航,注册忘记密码等页面
    isLoginPage: {
      type: Boolean,
      default: false,
    },
    // 是否含有padding 默认有
    isContentPadding: {
      type: Boolean,
      default: true,
    },
    // 主内容背景颜色
    bgColor: {
      type: String,
      default: '',
    },
  })
  const isDark = computed(() => globalStore.theme === 'dark')
  const isTabBarPage = ref(false)


  const rightDrawerRef = ref<any>(null)
  const noticeDrawerRef = ref<any>(null)
  uni.$on('open-notice-drawer', (data) => {
    console.log(121212)
    noticeDrawerRef.value?.open()
  })
  uni.$on('open-right-drawer', (data) => {
    openRightDrawer()
  })

  function openRightDrawer() {
    rightDrawerRef.value?.open()
  }

  const sidebarVisible = ref(false)

  function openLeftDrawer() {
    sidebarVisible.value = !sidebarVisible.value
  }

  function handleDrawerNavigate(path: string) {
    router.push(path)
  }

  async function handleDrawerLogout() {
    try {
      const res = await userApi.logout()
      if (res.code === 200) {
        userStore.clearUserInfo()
        router.push('/pages/login/index')
      }
    } catch (error) {
      userStore.clearUserInfo()
      router.push('/pages/login/index')
    }
  }

  onLoad(() => {
    updateRoute()
  })

  onShow(() => {
    updateRoute()
  })

</script>

<style lang="scss" scoped>
  @import "@/uni.scss";

  .page-wrapper {
    height: calc(100vh - 56px);
  }

  .header-box {
    width: 100%;
    height: 56px;
  }

  .page-content {
    width: 100%;
    height: calc(100vh - 56px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;

    .content-info {
      height: calc(100vh - 56px);
      overflow: auto;
    }

  }

  .left-sidebar {
    width: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    transition: width 281ms cubic-bezier(0.4, 0, 0.2, 1);

  }

  .sidebar-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: calc(100vh - 56px);
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999;
  }

  .sidebar-visible {
    width: px2rpx(280);
  }

.content-wrapper {
  max-width: px2rpx(1224);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 56px);
  // border: 1px solid rgba(108, 133, 149, 0.12);
}

  .fixed {
    // position: fixed;
    // top: 0;
    // left: 0;
    width: 100%;
    height: 56px;
    background-color: var(--color-white);
    z-index: 9;
  }

  @media screen and (max-width: 1504px) {
    .content-wrapper-padding {
      padding: px2rpx(20);
    }
  }

  @media screen and (max-width: 991px) {
    .page-wrapper {
      height: 100vh;
    }
  }

  .mobile-menu-btn {
    width: px2rpx(64);
    height: px2rpx(64);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 针对不同屏幕尺寸的响应式调整
  @media screen and (max-width: 767px) {
    .content-wrapper-padding {
      padding: px2rpx(0) !important;
    }
  }
</style>