|
|
@@ -20,11 +20,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, onMounted, nextTick, watch } from 'vue';
|
|
|
+import { ref, onMounted, nextTick, watch, computed } from 'vue';
|
|
|
+import Config from '@/config/index'
|
|
|
import useRouter from "@/hooks/useRouter";
|
|
|
const router = useRouter();
|
|
|
import useRoute from '@/hooks/useRoute'
|
|
|
const route = useRoute()
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
+const { t, locale } = useI18n();
|
|
|
+import { localesList, LANG_MAP } from '@/locale/index'
|
|
|
+import { lang } from '@/composables/config'
|
|
|
interface MenuItem {
|
|
|
key: string;
|
|
|
label: string;
|
|
|
@@ -32,55 +37,83 @@ interface MenuItem {
|
|
|
children?: MenuItem[];
|
|
|
}
|
|
|
const emit = defineEmits(['menu-click']);
|
|
|
-// 菜单数据
|
|
|
-const menu = ref<MenuItem[]>([
|
|
|
- {
|
|
|
- isOpenMenu: false, submenuHeight: 0,
|
|
|
- path: '/pages/customer/index', label: 'Home.msg.Custom', icon: 'crm-house',
|
|
|
- children: [
|
|
|
- { path: '/pages/customer/index', label: 'Custom.Index.AccountList', icon: 'icon-client' },
|
|
|
- { path: '/pages/customer/deposit', label: 'Home.page_customer.item2', icon: 'icon-deposit' },
|
|
|
- { path: '/pages/customer/withdrawal', label: 'Home.page_customer.item3', icon: 'icon-withdrawal' },
|
|
|
- { path: '/pages/customer/payment-history', label: 'Home.page_customer.item4', icon: 'icon-payment' },
|
|
|
- { path: '/pages/customer/transfer', label: 'Home.page_customer.item5', icon: 'icon-transfer' },
|
|
|
- { path: '/pages/customer/recording-history', label: 'Home.page_customer.item7', icon: 'icon-application' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- isOpenMenu: false,
|
|
|
- path: '/pages/customer/promotion', label: 'Home.msg.Ib', icon: 'crm-users',
|
|
|
- children: [
|
|
|
- { path: '/pages/ib/index', label: 'Home.page_ib.item1', icon: 'icon-client' },
|
|
|
- { path: '/pages/ib/customer', label: 'Home.page_ib.item2', icon: 'icon-deposit' },
|
|
|
- { path: '/pages/ib/report', label: 'Home.page_ib.item3', icon: 'icon-withdrawal' },
|
|
|
- { path: '/pages/ib/transfer', label: 'Home.page_ib.item4', icon: 'icon-payment' },
|
|
|
- { path: '/pages/ib/withdraw', label: 'Home.page_ib.item5', icon: 'icon-transfer' },
|
|
|
- { path: '/pages/ib/agent-transfer', label: 'Home.page_ib.item9', icon: 'icon-transfer' },
|
|
|
- { path: '/pages/ib/recording', label: 'Home.page_ib.item7', icon: 'icon-application' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- path: '/pages/customer/deposit', isOpenMenu: false, label: 'Documentary.title', icon: 'crm-chart-area',
|
|
|
- children: []
|
|
|
- },
|
|
|
- {
|
|
|
- path: '/pages/customer/withdrawal', isOpenMenu: false, label: 'Downloadpage.item1', icon: 'crm-download',
|
|
|
- children: []
|
|
|
- },
|
|
|
- {
|
|
|
- path: '/pages/customer/support', isOpenMenu: false, label: 'Downloadpage.item16', icon: 'crm-headset',
|
|
|
- children: []
|
|
|
- },
|
|
|
- {
|
|
|
- path: '/pages/customer/support', isOpenMenu: false, label: '设置', icon: 'crm-headset',
|
|
|
- children: [
|
|
|
- { path: '/pages/mine/info?type=1', isOpenMenu: false, label: 'PersonalManagement.Title.PersonalInformation', icon: 'crm-headset' },
|
|
|
- { path: '/pages/mine/info?type=2', isOpenMenu: false, label: 'PersonalManagement.Title.BankInformation', icon: 'crm-headset' },
|
|
|
- { path: '/pages/mine/info?type=3', isOpenMenu: false, label: 'PersonalManagement.Title.FileManagement', icon: 'crm-headset' },
|
|
|
- { path: '/pages/mine/info?type=4', isOpenMenu: false, label: 'PersonalManagement.Title.SecurityCenter', icon: 'crm-headset' },
|
|
|
- ]
|
|
|
- },
|
|
|
-]);
|
|
|
+const currentLang = computed(() => lang.value || locale.value)
|
|
|
+const currentLabel = computed(() => t(`language.${currentLang.value}`))
|
|
|
+
|
|
|
+const customMenuList = computed(() =>
|
|
|
+ localesList.map((code) => ({
|
|
|
+ label: t(`language.${code}`),
|
|
|
+ lang: code,
|
|
|
+ type: "lang",
|
|
|
+ path: '/'
|
|
|
+ })),
|
|
|
+)
|
|
|
+const menu = ref<MenuItem[]>(
|
|
|
+ [
|
|
|
+ {
|
|
|
+ isOpenMenu: false, submenuHeight: 0,
|
|
|
+ path: '/pages/customer/index', label: 'Shop.Index.Transaction', icon: 'crm-trade',
|
|
|
+ children: [
|
|
|
+ { path: '/pages/customer/index', label: 'Custom.Index.AccountList', icon: 'icon-client' },
|
|
|
+ { path: '/pages/customer/trade-history', label: 'Ib.Report.Tit1', icon: 'icon-transfer' },
|
|
|
+ { path: '/pages/customer/trade-position', label: 'Ib.Report.Tit4', icon: 'icon-transfer' },
|
|
|
+ { path: '/pages/customer/recording-history', label: 'Home.page_customer.item7', icon: 'icon-application' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isOpenMenu: false, submenuHeight: 0,
|
|
|
+ path: '/pages/customer/index', label: 'Latest.PaymentWallet', icon: 'crm-payment',
|
|
|
+ children: [
|
|
|
+ { path: '/pages/customer/deposit', label: 'Home.page_customer.item2', icon: 'icon-deposit' },
|
|
|
+ { path: '/pages/customer/withdrawal', label: 'Home.page_customer.item3', icon: 'icon-withdrawal' },
|
|
|
+ { path: '/pages/customer/payment-history', label: 'Home.page_customer.item4', icon: 'icon-payment' },
|
|
|
+ { path: '/pages/customer/transfer', label: 'Custom.Index.Transfer', icon: 'icon-transfer' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isOpenMenu: false,
|
|
|
+ path: '/pages/ib/index', label: 'Home.msg.Ib', icon: 'crm-ib',
|
|
|
+ children: [
|
|
|
+ { path: '/pages/ib/index', label: 'Home.page_ib.item1', icon: 'icon-client' },
|
|
|
+ { path: '/pages/ib/customer', label: 'Home.page_ib.item2', icon: 'icon-deposit' },
|
|
|
+ { path: '/pages/ib/report', label: 'Home.page_ib.item3', icon: 'icon-withdrawal' },
|
|
|
+ { path: '/pages/ib/transfer', label: 'Home.page_ib.item4', icon: 'icon-payment' },
|
|
|
+ { path: '/pages/ib/withdraw', label: 'Home.page_ib.item5', icon: 'icon-transfer' },
|
|
|
+ { path: '/pages/ib/agent-transfer', label: 'Home.page_ib.item9', icon: 'icon-transfer' },
|
|
|
+ { path: '/pages/ib/recording', label: 'Home.page_ib.item7', icon: 'icon-application' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: '/pages/analytics/analystViews', isOpenMenu: false, label: 'News.News', icon: 'crm-chart-area',
|
|
|
+ children: [
|
|
|
+ { path: '/pages/analytics/analystViews', label: 'News.Announcement', icon: 'icon-application' },
|
|
|
+ { path: '/pages/analytics/news', label: 'News.NewsInformation', icon: 'icon-application' },
|
|
|
+ { path: `https://www.${Config.host}.com/${locale.value}/economic-calendar`, label: 'News.FinancialCalendar', icon: 'icon-application', isExternal: true },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: '/pages/customer/withdrawal', isOpenMenu: false, label: 'Downloadpage.item1', icon: 'crm-download',
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: '/pages/common/chat', isOpenMenu: false, label: 'Downloadpage.item16', icon: 'crm-headset',
|
|
|
+ children: [],
|
|
|
+ type: 'chat'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: '/pages/customer/support', isOpenMenu: false, label: 'Custom.Index.Settings', icon: 'crm-sz',
|
|
|
+ children: [
|
|
|
+ { path: '/pages/mine/info?type=1', isOpenMenu: false, label: 'PersonalManagement.Title.PersonalInformation', icon: 'crm-headset' },
|
|
|
+ { path: '/pages/mine/info?type=2', isOpenMenu: false, label: 'PersonalManagement.Title.BankInformation', icon: 'crm-headset' },
|
|
|
+ { path: '/pages/mine/info?type=3', isOpenMenu: false, label: 'PersonalManagement.Title.FileManagement', icon: 'crm-headset' },
|
|
|
+ { path: '/pages/mine/info?type=4', isOpenMenu: false, label: 'PersonalManagement.Title.SecurityCenter', icon: 'crm-headset' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: '/pages/customer/support', isOpenMenu: false, label: currentLabel.value, icon: 'cwg-lang',
|
|
|
+ children: customMenuList.value
|
|
|
+ },
|
|
|
+ ]);
|
|
|
const submenuRefs = ref<any[]>([]);
|
|
|
const measureHeight = (element: HTMLElement): number => {
|
|
|
const originalDisplay = element.style.display;
|
|
|
@@ -96,7 +129,6 @@ const measureHeight = (element: HTMLElement): number => {
|
|
|
element.style.position = originalPosition;
|
|
|
element.style.visibility = originalVisibility;
|
|
|
element.style.width = originalWidth;
|
|
|
-
|
|
|
return height;
|
|
|
};
|
|
|
const updateSubmenuHeight = (index: number) => {
|
|
|
@@ -104,20 +136,34 @@ const updateSubmenuHeight = (index: number) => {
|
|
|
if (refs && refs[index]) {
|
|
|
const el = refs[index].$el || refs[index];
|
|
|
const height = measureHeight(el);
|
|
|
-
|
|
|
if (height > 0) {
|
|
|
menu.value[index].submenuHeight = height;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
function handleClick(index: number) {
|
|
|
+ if (!menu.value[index].children || menu.value[index].children.length == 0) {
|
|
|
+ // #ifdef H5
|
|
|
+ if (menu.value[index].type === 'chat') {
|
|
|
+ if (window.LiveChatWidget) {
|
|
|
+ window.LiveChatWidget.call("maximize");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ router.push(menu.value[index].path);
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-VUE
|
|
|
+ router.push(menu.value[index].path);
|
|
|
+ // #endif
|
|
|
+ return;
|
|
|
+ }
|
|
|
menu.value[index].isOpenMenu = !menu.value[index].isOpenMenu;
|
|
|
}
|
|
|
watch(route, () => {
|
|
|
const currentPath = route.path;
|
|
|
menu.value.forEach((item, index) => {
|
|
|
if (item.children) {
|
|
|
- const isActive = item.children.some(child => child.path === currentPath);
|
|
|
+ const isActive = item.children.some(child => child.path.includes(currentPath));
|
|
|
menu.value[index].isOpenMenu = isActive;
|
|
|
if (isActive) {
|
|
|
nextTick(() => {
|
|
|
@@ -128,6 +174,7 @@ watch(route, () => {
|
|
|
});
|
|
|
}, { immediate: true })
|
|
|
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
nextTick(() => {
|
|
|
menu.value.forEach((item, index) => {
|