gypsy-crm-frontend-vu/components/cwg-header.vue

<template>
  <view class="pages-header" v-if="showBack">
    <view class="header">
      <view v-if="showBackIcon" class="back">
        <cwg-icon name="dropdown" class="back-icon" color="#fff" @click="handleBack" />
      </view>
      <view>{{ headerTitleReady ? headerTitle : '' }}</view>
    </view>
    <view class="header-r">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import useRouter from "@/hooks/useRouter";
import useRoute from '@/hooks/useRoute'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const showBack = computed(() => {
  // 不显示返回按钮的页面
  const noBackPages = [
    '/',
    '/pages/customer/index',
    '/pages/wallet/index',
    '/pages/mine/index',
    '/pages/login/index'
  ]

  return !noBackPages.includes(route.path)
})

const showBackIcon = computed(() => {
  // 不显示返回图标的页面
  const noBackIconPages = [
    '/',
    '/pages/customer/index',
    '/pages/customer/trade-history',
    '/pages/customer/trade-position',
    '/pages/customer/recording-history',
    '/pages/customer/deposit-select',
    '/pages/customer/withdrawal-select',
    '/pages/customer/payment-history',
    '/pages/customer/transfer',
    '/pages/customer/wallet-transfer',
    '/pages/customer/wallet-history',
    '/pages/activities/index',
    '/pages/analytics/analystViews',
    '/pages/analytics/news',
    '/pages/common/download',
    '/pages/common/chat',
    '/pages/mine/info',
    '/pages/common/notice',
    '/pages/ib/index',
    '/pages/ib/customer',
    '/pages/ib/subsList',
    '/pages/ib/agentList',
    '/pages/ib/accountList',
    '/pages/ib/transfer',
    '/pages/ib/withdraw-select',
    '/pages/ib/agent-transfer',
    '/pages/ib/recording',
    '/pages/ib/report',
    '/pages/ib/complexReport',
    '/pages/follow/index',
    '/pages/follow/trading-center',
    '/pages/follow/report',
    '/pages/follow/transfer',
    '/pages/follow/transfer-history',
    '/pages/follow/trading-management',
    '/pages/follow/follow-list',
    '/pages/follow/account-management',
    '/pages/follow/subscribe-list',
    '/pages/follow/record',
    '/pages/wallet/index',
    '/pages/mine/index',
    '/pages/login/index'
  ]

  return !noBackIconPages.includes(route.path)
})
function slashToDash(str: string) {
  return str.replace(/\//g, '.');
}
function getTranslationKey(): string {
  const path = route.path
  let key = ''
  if (!path) return ''
  if (path === '/') {
    key = 'pages.mine.info'
  } else if (path.startsWith()) {
    key = path.slice(7)
  } else {
    key = path.slice(1)
  }
  return slashToDash(key)
}
const headerTitleReady = computed(() => {
  if (props.title) return true
  if (!route.path) return false
  const key = getTranslationKey()
  return !!t(key)
})

const headerTitle = computed(() => {
  if (props.title) return props.title
  const key = getTranslationKey()
  return t(key) || ''
})

const props = defineProps<{
  title: string;
  backgrounds: Record<string, any>;
}>();
function handleBack() {
  router.back();
}
</script>

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

.pages-header {
  width: 100%;
  // z-index: 1111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: px2rpx(24);
}

.header {
  position: relative;
  text-align: left;
  font-size: px2rpx(24);
  color: #fff;
  font-weight: 700;
  margin: px2rpx(10) 0;
  height: px2rpx(40);
  display: flex;
  align-items: center;
  line-height: px2rpx(40);

  .back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: px2rpx(24);
    height: px2rpx(24);
    border-radius: 50%;
    margin-right: px2rpx(12);
  }

  .back-icon {
    line-height: px2rpx(71);
    font-size: var(--font-size-20);
    cursor: pointer;
  }
}

.wallet-header {
  .header {
    color: #fff;
  }
}
</style>