1

李

7 days ago 543735d5141ce80b5f48c1a0d777fc29b0b34c86

 src/components/fx-footer/index.vue

@@ -1,159 +1,133 @@
<template>
  <div class="relative z-30 footer">
    <van-tabbar route v-model="active" active-color="#1194F7" @change="changeIndex" fixed safe-area-inset-bottom>
      <van-tabbar-item name="optional" to="/optional">
        <span :class="[active === 'optional' ? 'active' : '']">{{ $t("Optional") }}</span>
        <template #icon="props">
          <img :src="active == 'optional' ? icon.optional.active : icon.optional.inactive" alt="optional" />
    <van-tabbar route v-model="active" active-color="#92D1FF" @change="changeIndex" fixed safe-area-inset-bottom>
      <van-tabbar-item name="home" to="/home">
        <template #icon>
          <img :src="active == 'home' ? icon.home.active : icon.home.inactive" alt="home" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="quotes" to="/quotes/index?tabActive=0">
        <span :class="[active === 'quotes' ? 'active' : '']">{{ $t("quotes") }}</span>

      <van-tabbar-item name="quotes" to="/quotes/market">
        <template #icon>
          <img :src="active == 'quotes' ? icon.quotes.active : icon.quotes.inactive" alt="quotes" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="options" to="/trade/options">
        <template #icon>
          <img :src="active == 'options' ? icon.options.active : icon.options.inactive" alt="options" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="fund" to="/cryptos/fund">
        <template #icon>
          <img :src="active == 'fund' ? icon.fund.active : icon.fund.inactive" alt="fund" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="personal" to="/personal">
        <template #icon>
          <img :src="active == 'personal' ? icon.personal.active : icon.personal.inactive" alt="personal" />
        </template>
      </van-tabbar-item>

      <!-- <van-tabbar-item name="quotes" to="/quotes/index?tabActive=1">
        <template #icon>
          <img :src="active == 'quotes' ? icon.quotes.active : icon.quotes.inactive" alt="quotes" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="trade" to="/trade">
        <span :class="[active === 'trade' ? 'active' : '']">{{ $t("trade") }}</span>
        <template #icon>
          <img :src="active == 'trade' ? icon.trade.active : icon.trade.inactive" alt="trade" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item name="funds" to="/funds"> -->
      <!-- <span :class="[active === 'funds' ? 'active' : '']">{{ $t('资金') }}</span> -->
      <!-- <template #icon="props"> -->
      <!-- <img :src="props.active ? icon.funds.active : icon.funds.inactive" alt="funds" /> -->
      <!-- </template> -->
      <!-- </van-tabbar-item> -->
      <van-tabbar-item name="news" to="/news">
        <span :class="[active === 'news' ? 'active' : '']">{{ $t("news") }}</span>
        <template #icon>
          <img :src="active == 'news' ? icon.news.active : icon.news.inactive" alt="news" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item name="trade" to="/exchange">
        <span>{{ $t('trade') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.trade.active : icon.trade.inactive"  alt="exchange"/>
        </template>
      </van-tabbar-item> -->

      <van-tabbar-item name="personal" to="/personal">
        <span :class="[active === 'personal' ? 'active' : '']">{{ $t('资产') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.personal.active : icon.personal.inactive" alt="personal" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="mine" to="/my">
        <span :class="[active === 'mine' ? 'active' : '']">{{ $t("my") }}</span>
        <template #icon>
          <img :src="active == 'mine' ? icon.mine.active : icon.mine.inactive" alt="mine" />
        </template>
      </van-tabbar-item>
      </van-tabbar-item> -->
    </van-tabbar>

    <!-- 全局悬浮客服按钮 -->
    <div class="floating-customer-service" @click="$router.push('/customerService')">
      <img src="@/assets/image/customer.png" alt="customer service" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ref, watch } from "vue";
import { useQuotesStore } from "@/store/quotes.store.js";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { themeStore } from "@/store/theme";
const thStore = themeStore();

const router = useRouter();
const { t } = useI18n();
const active = ref("home");
const route = useRoute();
if (route.path == "/trade/index") {
  active.value = "trade";
} else if (route.path.indexOf("/quotes") != -1) {
  active.value = "quotes";
} else if (route.path == "/news/index") {
  active.value = "news";
} else if (route.path == "/my/index") {
  active.value = "mine";
} else if (route.path == "/optional/index") {
  active.value = "optional";
} else if (route.path == "/funds/index") {
  active.value = "funds";

/** 根据当前 path 自动判断选中的 tab name */
function getActiveFromPath(path) {
  const p = path.replace(/\/$/, "") || "/";
  if (p === "/home") return "home";
  if (p === "/trade/options" || p.startsWith("/trade/options")) return "options";
  if (p === "/trade/index" || p === "/trade") return "trade";
  if (p.startsWith("/quotes")) return "quotes";
  if (p.startsWith("/cryptos/fund")) return "fund";
  if (p.startsWith("/personal") || p === "/personal/index") return "personal";
  if (p === "/news/index") return "news";
  if (p.startsWith("/my") || p === "/my/index") return "mine";
  if (p.startsWith("/optional")) return "optional";
  if (p.startsWith("/funds")) return "funds";
  return "home";
}
let quotesStore = useQuotesStore();

const active = ref(getActiveFromPath(route.path));

watch(
  () => route.path,
  (nv) => {
    if (route.path == "/trade/index") {
      active.value = "trade";
    } else if (route.path.indexOf("/quotes") != -1) {
      active.value = "quotes";
    } else if (route.path == "/news/index") {
      active.value = "news";
    } else if (route.path == "/my/index") {
      active.value = "mine";
    } else if (route.path == "/optional/index") {
      active.value = "optional";
    } else if (route.path == "/funds/index") {
      active.value = "funds";
    }
  }
  (path) => {
    active.value = getActiveFromPath(path);
  },
  { immediate: false }
);
// 底部列表

let quotesStore = useQuotesStore();

// 底部图标列表
const icon = {
  optional: {
    active: new URL(
      "@/assets/theme/dark/image/footer/optional-active.png",
      import.meta.url
    ),
    inactive: new URL(
      `../../assets/theme/${thStore.theme}/image/footer/optional.png`,
      import.meta.url
    ),
  home: {
    active: new URL("@/assets/imgs/footer/ft_1_a.png", import.meta.url),
    inactive: new URL(`@/assets/imgs/footer/ft_1.png`, import.meta.url),
  },
  quotes: {
    active: new URL(
      "@/assets/theme/dark/image/footer/quotes-active.png",
      import.meta.url
    ),
    inactive: new URL(
      `../../assets/theme/${thStore.theme}/image/footer/quotes.png`,
      import.meta.url
    ),
    active: new URL("@/assets/imgs/footer/ft_2_a.png", import.meta.url),
    inactive: new URL(`@/assets/imgs/footer/ft_2.png`, import.meta.url),
  },
  news: {
    active: new URL("@/assets/theme/dark/image/footer/news-active.png", import.meta.url),
    inactive: new URL(
      `../../assets/theme/${thStore.theme}/image/footer/news.png`,
      import.meta.url
    ),
  options: {
    active: new URL("@/assets/imgs/footer/ft_3_a.png", import.meta.url),
    inactive: new URL(`@/assets/imgs/footer/ft_3.png`, import.meta.url),
  },
  fund: {
    active: new URL("@/assets/imgs/footer/ft_4_a.png", import.meta.url),
    inactive: new URL("@/assets/imgs/footer/ft_4.png", import.meta.url),
  },
  trade: {
    active: new URL("@/assets/theme/dark/image/footer/trade-active.png", import.meta.url),
    inactive: new URL(
      `../../assets/theme/${thStore.theme}/image/footer/trade.png`,
      import.meta.url
    ),
  },
  funds: {
    active: new URL('@/assets/theme/dark/image/footer/funds-active.png', import.meta.url),
    inactive: new URL(`../../assets/theme/${thStore.theme}/image/footer/funds.png`, import.meta.url),
    active: new URL("@/assets/imgs/footer/ft_2_a.png", import.meta.url),
    inactive: new URL(`@/assets/imgs/footer/ft_2.png`, import.meta.url),
  },
  mine: {
    active: new URL("@/assets/theme/dark/image/footer/menu-active.png", import.meta.url),
    inactive: new URL(
      `../../assets/theme/${thStore.theme}/image/footer/menu.png`,
      import.meta.url
    ),
    active: new URL("@/assets/imgs/footer/ft_3_a.png", import.meta.url),
    inactive: new URL(`@/assets/imgs/footer/ft_3.png`, import.meta.url),
  },
  personal: {
    active: new URL("@/assets/theme/dark/image/footer/funds-active.png", import.meta.url),
    inactive: new URL(
      `../../assets/theme/${thStore.theme}/image/footer/funds.png`,
      import.meta.url
    ),
    active: new URL("@/assets/imgs/footer/ft_5_a.png", import.meta.url),
    inactive: new URL(`@/assets/imgs/footer/ft_5.png`, import.meta.url),
  },
};

const changeIndex = (index) => {
  // console.log(index)
};
@@ -161,21 +135,28 @@

<style lang="scss" scoped>
:deep(.van-tabbar-item__text) {
  font-size: 12px;
  font-size: 1.5rem;
  color: $footer_color !important;
}

:deep(.van-tabbar-item--active) {
  background-color: $footer_bg;
  color: $color_main !important;
  border-radius: 1.6rem;
}

.van-tabbar--fixed {
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed !important;
  bottom: 3rem !important;
  left: 2.4rem !important;
  right: 2.4rem !important;
  width: auto !important;
  background-color: $footer_bg;
  box-shadow: 5px 5px 5px 5px $footer-border;
  box-shadow: 0rem 1.6rem 4.8rem 0.8rem rgba(24, 11, 0, 0.14);
  border-top: 1px solid rgba(118, 128, 143, 0.1);
  backdrop-filter: blur(1.25rem);
  border-radius: 1.6rem;
}

.van-hairline--top-bottom::after {
@@ -192,8 +173,40 @@

.footer {
  img {
    width: 20px;
    height: 20px;
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* 全局悬浮客服按钮 */
.floating-customer-service {
  position: fixed;
  top: 60%;
  left: 83%;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0.25rem 1.5rem rgba(146, 209, 255, 0.4);
  z-index: 998;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 0.5rem 2rem rgba(146, 209, 255, 0.6);
  }

  &:active {
    transform: scale(0.95);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>