fix: 二期需求

zhengyiming

2025-03-13 d580f043716d30f9617ed7f3f49a7e80d54b9865

 apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue

@@ -1,17 +1,11 @@
<template>
  <NavBar v-bind="props" dark class="transparent-navigation-bar" :style="wrapperStyle">
    <div :class="['common-navigation-bar-wrapper', { dark: mode == 'dark' }]" :style="barStyle">
      <slot name="left">
        <div
          class="menu-btn-wrapper"
          v-if="(!isLastPage || !isTabbarPage) && showLeftArrow"
          @click="goBack()"
        >
          <img v-if="props.navigationArrowWhite" class="menu-btn" :src="IconArrowWhite" />
          <img v-else class="menu-btn" :src="IconArrow" />
        </div>
      </slot>
      <span class="common-navigation-bar-title">{{ title }}</span>
      <div class="menu-btn-wrapper" v-if="!isLastPage && showLeftArrow" @click="goBack()">
        <img v-if="props.navigationArrowWhite" class="menu-btn" :src="IconArrowWhite" />
        <img v-else class="menu-btn" :src="IconArrow" />
      </div>
      <div class="common-navigation-bar-title">{{ title }}</div>
    </div>
  </NavBar>
</template>
@@ -19,39 +13,31 @@
<script setup lang="ts">
import NavBar from './NavBar.vue';
import { commonNavigationBarProps } from './commonNavigationBar';
import { useSystemStore } from '@/stores/modules/system';
import { CSSProperties } from 'vue';
import IconArrow from '@/assets/common/icon-navi-arrow.png';
import IconArrowWhite from '@/assets/common/icon-navi-arrow-white.png';
import Taro from '@tarojs/taro';
import { goBack } from '@/utils';
import { TabBarPageRouter } from '@/constants';
import { useCanGoBack } from '@/hooks';

defineOptions({
  name: 'TransparentNavigationBar',
});

const systemStore = useSystemStore();

const props = defineProps(commonNavigationBarProps);

const router = Taro.useRouter();
const router = useRouter();

const { isCanGoBack } = useCanGoBack();

const isLastPage = computed(() => {
  const pages = Taro.getCurrentPages();
  return pages.length <= 1;
  return !isCanGoBack.value;
});

const isTabbarPage = computed(() =>
  Object.values(TabBarPageRouter).some((x) => x.toLowerCase() === router.path.toLowerCase())
);

const barStyle = computed(() => {
  const distance = systemStore.menuButtonWidth + systemStore.menuButtonRightDistance + 4;
  const distance = 24;
  return {
    paddingLeft: `${distance}px`,
    paddingRight: `${distance}px`,
    height: systemStore.navigationBarHeight + 'px',
    height: 44 + 'px',
  } as CSSProperties;
});

@@ -62,16 +48,26 @@
      } as CSSProperties)
    : {};
});

function goBack() {
  router.back();
}
</script>

<style lang="scss">
.transparent-navigation-bar.navigation-bar-wrapper {
  background-color: transparent;
<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.transparent-navigation-bar {
  /* position: absolute; */
  width: 100%;
  background-color: transparent;

  .common-navigation-bar-wrapper {
    width: 100%;
  }

  .common-navigation-bar-title {
    height: 36px;
    color: getCssVar('text-color', 'primary');
  }
}
</style>