fix: 四期需求

zhengyiming

2025-03-25 c02e7a8fe42de2a5796e95e573f9e6b6735e4d0d

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

@@ -4,14 +4,10 @@
      :class="['common-navigation-bar-wrapper', { dark: props.mode == 'dark' }]"
      :style="barStyle"
    >
      <div
        class="menu-btn-wrapper"
        v-if="(!isLastPage || !isTabbarPage) && showLeftArrow"
        @click="handleBack()"
      >
      <div class="menu-btn-wrapper" v-if="!isLastPage && showLeftArrow" @click="goBack()">
        <img class="menu-btn" :src="props.mode == 'dark' ? IconArrowWhite : IconArrow" />
      </div>
      <span class="common-navigation-bar-title">{{ title }}</span>
      <div class="common-navigation-bar-title">{{ title }}</div>
    </div>
  </NavBar>
</template>
@@ -19,86 +15,79 @@
<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: 'CommonNavigationBar',
});

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(TabBarPageRouterForCheck).some((x) => x.toLowerCase() === router.path.toLowerCase())
// );

const isTabbarPage = computed(() =>
  Object.values(TabBarPageRouter).some((x) => x.toLowerCase() === router.path.toLowerCase())
);
function goBack() {
  router.back();
}

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;
});

function handleBack() {
  if (props.backFn) {
    props.backFn();
  } else {
    goBack();
  }
}
</script>

<style lang="scss">
@import '@/styles/common.scss';
@use '@/style/common.scss' as *;

.common-navigation-bar-wrapper {
  width: 100%;
  line-height: 1;
  font-size: 32px;
  color: boleGetCssVar('color', 'title-color');
  min-width: 0;
  position: relative;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  font-size: 16px;
  color: boleGetCssVar('color', 'title-color');
  line-height: 1;

  .common-navigation-bar-title {
    @include ellipsis;
    @include utils-ellipsis;
    font-weight: 600;
    color: getCssVar('text-color', 'primary');
    line-height: 1.5;
  }

  &.dark {
    color: #fff;
    color: #ffffff;
  }

  .menu-btn-wrapper {
    padding: 20px;
    padding-left: 0;
    position: absolute;
    left: boleGetCssVar('size', 'body-padding-h');
    padding: 10px;
    padding-left: 0;
    // top: -20px;
  }

  .menu-btn {
    width: 20px;
    height: 30px;
    width: 10px;
    height: 15px;
  }
}
</style>