Skip to content

D
dexfilter-web-nuxt3
Commit 2f1274d6 by lei
Options

1

parent 97864cc3
Showing with 313 additions and 263 deletions
app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'; import type { RouterConfig } from "@nuxt/schema";
// https://router.vuejs.org/api/interfaces/routeroptions.html // https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig>{ export default <RouterConfig>{
routes: (_routes) => [ routes: (_routes) => [
{ {
name: 'tokenIndex', name: "tokenIndex",
path: '/', path: "/",
component: () => import('@/views/token/index.vue'), component: () => import("@/views/token/index.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: true }, meta: { hasSearch: true, hasRollToken: true, footer: true },
children: [ children: [
{ {
name: 'tokenlistDefault', name: "tokenlistDefault",
path: '/', path: "/",
component: () => import('~/views/token/CustomTokenList.vue'), component: () => import("~/views/token/CustomTokenList.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: true }, meta: {
hasSearch: true,
hasRollToken: true,
footer: true,
},
}, },
{ {
name: 'tokenList', name: "tokenList",
path: '/:chain?/:page(\\d+)?', path: "/:chain?/:page(\\d+)?",
component: () => import('~/views/token/CustomTokenList.vue'), component: () => import("~/views/token/CustomTokenList.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: true }, meta: {
hasSearch: true,
hasRollToken: true,
footer: true,
},
}, },
], ],
}, },
{ {
name: 'tokenDetail', name: "tokenDetail",
path: '/:chain/:tb([a-zA-Z0-9_]{10,100})', path: "/:chain/:tb([a-zA-Z0-9_]{10,100})",
component: () => import('@/views/detail/index.vue'), component: () => import("@/views/detail/index.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: false }, meta: { hasSearch: true, hasRollToken: true, footer: false },
}, },
{ {
path: '/analysis/:chain/:tb', path: "/analysis/:chain/:tb",
name: 'tokenAnalysis', name: "tokenAnalysis",
component: () => import('@/views/analysis/index.vue'), component: () => import("@/views/analysis/index.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: false }, meta: { hasSearch: true, hasRollToken: true, footer: false },
}, },
{ {
path: '/login/:code?', path: "/login/:code?",
name: 'login', name: "login",
component: () => import('@/views/login/index.vue'), component: () => import("@/views/login/index.vue"),
}, },
{ {
path: '/user', path: "/user",
name: 'userInfo', name: "userInfo",
component: () => import('@/views/user/index.vue'), component: () => import("@/views/user/index.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false }, meta: { hasSearch: false, hasRollToken: false, footer: false },
children: [ children: [
{ {
path: '/user/personal', path: "/user/personal",
name: 'personal', name: "personal",
component: () => import('@/views/user/PersonalCenter.vue'), component: () => import("@/views/user/PersonalCenter.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false }, meta: { hasSearch: false, hasRollToken: false, footer: false },
}, },
{ {
path: '/user/member', path: "/user/member",
name: 'member', name: "member",
component: () => import('@/views/user/memberCenter.vue'), component: () => import("@/views/user/memberCenter.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false }, meta: { hasSearch: false, hasRollToken: false, footer: false },
}, },
// 账单明细 // 账单明细
{ {
path: '/user/Billing', path: "/user/Billing",
name: 'Billing', name: "Billing",
component: () => import('@/views/user/Billing.vue'), component: () => import("@/views/user/Billing.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false }, meta: { hasSearch: false, hasRollToken: false, footer: false },
}, },
{ {
path: '/user/InviteWelfare', path: "/user/InviteWelfare",
name: 'InviteWelfare', name: "InviteWelfare",
component: () => import('@/views/user/invitation.vue'), component: () => import("@/views/user/invitation.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false }, meta: { hasSearch: false, hasRollToken: false, footer: false },
}, },
], ],
}, },
// 价值币筛选 // 价值币筛选
{ {
path: '/CoinFilter', path: "/CoinFilter",
name: 'CoinFilter', name: "CoinFilter",
component: () => import('@/views/Private/CoinFilter/index.vue'), component: () => import("@/views/Private/CoinFilter/index.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false }, meta: { hasSearch: false, hasRollToken: false, footer: false },
}, },
], ],
......
components/SwitchLanguage.vue
...@@ -12,39 +12,45 @@ ...@@ -12,39 +12,45 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
const props = defineProps({ const props = defineProps({
type: { type: {
type: String, type: String,
default: 'home', default: "home",
}, },
}); });
const { locale } = useI18n(); const { locale } = useI18n();
// 回到客户端修改获取浏览器语言 // 回到客户端修改获取浏览器语言
if (process.client) { if (process.client) {
let lan = localStorage.getItem('lang'); let lan = localStorage.getItem("lang");
if (navigator.language === 'zh-CN' || navigator.language === 'zh-TW') { if (navigator.language === "zh-CN" || navigator.language === "zh-TW") {
lan = 'cn'; lan = "cn";
} else if (navigator.language == 'en') { } else if (navigator.language == "en") {
lan = 'en'; lan = "en";
} }
if (lan) { if (lan) {
locale.value = lan; locale.value = lan;
} }
} }
watch(
() => locale.value,
(v) => {
console.log(v);
}
);
const languageOptions = [ const languageOptions = [
{ {
label: '中文简体', label: "中文简体",
value: 'cn', value: "cn",
}, },
{ {
label: 'English', label: "English",
value: 'en', value: "en",
}, },
]; ];
const changeLanguage = (v: string) => { const changeLanguage = (v: string) => {
locale.value = v; locale.value = v;
localStorage.setItem('lang', v); localStorage.setItem("lang", v);
}; };
</script> </script>
...@@ -58,7 +64,7 @@ const changeLanguage = (v: string) => { ...@@ -58,7 +64,7 @@ const changeLanguage = (v: string) => {
:deep(.t-input__inner) { :deep(.t-input__inner) {
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 15px;
font-family: 'bold'; font-family: "bold";
} }
} }
</style> </style>
middleware/index.global.ts 0 → 100644
export default defineNuxtRouteMiddleware(() => {
if (process.client) {
let lan = localStorage.getItem("lang");
if (navigator.language === "zh-CN" || navigator.language === "zh-TW") {
lan = "cn";
} else if (navigator.language == "en") {
lan = "en";
}
if (lan) {
window.localStorage.setItem("lang", lan);
}
}
});
views/Private/CoinFilter/index.vue
...@@ -4,6 +4,20 @@ ...@@ -4,6 +4,20 @@
</div> </div>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup>
const { data } = await useAsyncData(
"hello",
() => $fetch("http://156.247.9.93:9501/v1/eth/indexV1"),
{
// 在这里修改数据
transform: (input) => {
// 这里的 input 就是从服务器请求获取的数据
console.log(input); // { status: 200, message: 'Success', list: [ 1, 2, 3 ] }
return input;
},
lazy: true,
}
);
</script>
<style lang="less"></style> <style lang="less"></style>
views/token/CustomTokenList.vue
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<th class="custom-before-line"> <th class="custom-before-line">
<div class="thead-sort-box"> <div class="thead-sort-box">
<template v-if="item.title == 'Pool'"> <template v-if="item.title == 'Pool'">
{{ $t('TableList.pool') + HeadTokenType }} {{ $t("TableList.pool") + HeadTokenType }}
</template> </template>
<template v-else> <template v-else>
{{ item.title }} {{ item.title }}
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
<th class="custom-before-line" ref="tableTrOne"> <th class="custom-before-line" ref="tableTrOne">
<div class="thead-sort-box"> <div class="thead-sort-box">
<template v-if="item.title == 'Pool'"> <template v-if="item.title == 'Pool'">
{{ $t('TableList.pool') + HeadTokenType }} {{ $t("TableList.pool") + HeadTokenType }}
</template> </template>
<template v-else> <template v-else>
{{ item.title }} {{ item.title }}
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
<template v-if="!resultData.list.length"> <template v-if="!resultData.list.length">
<tr> <tr>
<td colspan="12"> <td colspan="12">
<div class="custom-no-list">{{ $t('filter.noList') }}</div> <div class="custom-no-list">{{ $t("filter.noList") }}</div>
</td> </td>
</tr> </tr>
</template> </template>
...@@ -189,23 +189,23 @@ ...@@ -189,23 +189,23 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { parsePercent, parseCoinAmount, parseNumberToK } from '@/utils/tool'; import { parsePercent, parseCoinAmount, parseNumberToK } from "@/utils/tool";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import CustPagination from './CustPagination.vue'; import CustPagination from "./CustPagination.vue";
import request from '@/utils/request'; import request from "@/utils/request";
import { filterChainObj, getSwap } from '@/constants/UnifiedManagementChain'; import { filterChainObj, getSwap } from "@/constants/UnifiedManagementChain";
import JumpOther from './JumpOther.vue'; import JumpOther from "./JumpOther.vue";
import KLink from '/public/images/svg/table/k_link.svg'; import KLink from "/public/images/svg/table/k_link.svg";
import analysisSvg from '/public/images/svg/table/media.svg'; import analysisSvg from "/public/images/svg/table/media.svg";
import { webLogo } from '@/constants/logo'; import { webLogo } from "@/constants/logo";
import CustomTableSort from './tableSort.vue'; import CustomTableSort from "./tableSort.vue";
import { TableSort, TableSortAsc } from '@/utils/tool'; import { TableSort, TableSortAsc } from "@/utils/tool";
import CustomRadio from '../CustomComponent/radio.vue'; import CustomRadio from "../CustomComponent/radio.vue";
import BscChain from '/public/images/svg/selectChain/bsc.svg'; import BscChain from "/public/images/svg/selectChain/bsc.svg";
import SwapSvg from '/public/images/svg/socialInfoWrapper/bscTransaction.svg'; import SwapSvg from "/public/images/svg/socialInfoWrapper/bscTransaction.svg";
import CustomAvatar from './avatar.vue'; import CustomAvatar from "./avatar.vue";
import TokenAvatar from './tokenAvatar.vue'; import TokenAvatar from "./tokenAvatar.vue";
import useSwap from '@/hooks/useSwap'; import useSwap from "@/hooks/useSwap";
const { ChainObj, getCurSwap, getCurChainImg } = useSwap(); const { ChainObj, getCurSwap, getCurChainImg } = useSwap();
const route = useRoute(); const route = useRoute();
const LoadHead = ref(false); const LoadHead = ref(false);
...@@ -223,7 +223,7 @@ const GlbFilter = useCurFilter(); ...@@ -223,7 +223,7 @@ const GlbFilter = useCurFilter();
const CurrentTime = useCurrentTimeChange(); const CurrentTime = useCurrentTimeChange();
// 吸顶元素 // 吸顶元素
const affixedHeadRef = ref(null); const affixedHeadRef = ref(null);
const affixedTableWidth = ref(''); const affixedTableWidth = ref("");
// 当前选中的行数 // 当前选中的行数
const CurLineIndex = ref(0); const CurLineIndex = ref(0);
// 表格数据轮询 // 表格数据轮询
...@@ -247,121 +247,121 @@ const colGroupList = reactive({ ...@@ -247,121 +247,121 @@ const colGroupList = reactive({
const RightInfo = useCurrentRightInfo(); const RightInfo = useCurrentRightInfo();
// 吸顶表头左右跟随滑动 // 吸顶表头左右跟随滑动
const affixedHead = reactive({ const affixedHead = reactive({
left: '', left: "",
top: '', top: "",
height: '', height: "",
width: '', width: "",
}); });
// 当前排序状态 // 当前排序状态
const SortOptions = reactive({ const SortOptions = reactive({
up: { up: {
field: 'up', field: "up",
type: 'all', type: "all",
status: false, status: false,
}, },
pb: { pb: {
field: 'pb', field: "pb",
type: 'all', type: "all",
status: false, status: false,
}, },
vn: { vn: {
field: 'vn', field: "vn",
type: 'all', type: "all",
status: false, status: false,
}, },
txn: { txn: {
field: 'txn', field: "txn",
type: 'all', type: "all",
status: false, status: false,
}, },
r5m: { r5m: {
field: 'r5m', field: "r5m",
type: 'all', type: "all",
status: false, status: false,
}, },
r1h: { r1h: {
field: 'r1h', field: "r1h",
type: 'all', type: "all",
status: false, status: false,
}, },
r4h: { r4h: {
field: 'r4h', field: "r4h",
type: 'all', type: "all",
status: false, status: false,
}, },
r24h: { r24h: {
field: 'r24h', field: "r24h",
type: 'all', type: "all",
status: false, status: false,
}, },
}); });
const currentBtn = ref('default'); const currentBtn = ref("default");
const btns = computed(() => [ const btns = computed(() => [
{ {
label: t('filter.pairs'), label: t("filter.pairs"),
value: 'default', value: "default",
}, },
{ {
label: t('filter.updated'), label: t("filter.updated"),
value: 'new', value: "new",
}, },
{ {
label: t('filter.gainers'), label: t("filter.gainers"),
value: 'max-up', value: "max-up",
}, },
{ {
label: t('filter.losers'), label: t("filter.losers"),
value: 'max-down', value: "max-down",
}, },
{ {
label: t('filter.r24hVolume'), label: t("filter.r24hVolume"),
value: 'txn', value: "txn",
}, },
]); ]);
const onFilterChange = (value: string) => { const onFilterChange = (value: string) => {
if (value == 'new') { if (value == "new") {
GlbFilter.value.nt = 1; GlbFilter.value.nt = 1;
} else if (value == 'default') { } else if (value == "default") {
GlbFilter.value.nt = 0; GlbFilter.value.nt = 0;
} }
// 永远请求第一页 // 永远请求第一页
pageNum.value = 1; pageNum.value = 1;
if (value == 'txn') { if (value == "txn") {
GlbFilter.value.date_orderby = 'txn'; GlbFilter.value.date_orderby = "txn";
GlbFilter.value.sort = 'desc'; GlbFilter.value.sort = "desc";
} else if (value == 'max-up') { } else if (value == "max-up") {
// 最大涨幅 // 最大涨幅
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date; GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
GlbFilter.value.sort = 'desc'; GlbFilter.value.sort = "desc";
} else if (value == 'max-down') { } else if (value == "max-down") {
// 最大跌幅 // 最大跌幅
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date; GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
GlbFilter.value.sort = 'asc'; GlbFilter.value.sort = "asc";
} }
getTableList(); getTableList();
}; };
// 获取涨跌幅 // 获取涨跌幅
const getUpDown = (value: string) => { const getUpDown = (value: string) => {
if (value && value[0] == '-') { if (value && value[0] == "-") {
return `${value}%`; return `${value}%`;
} }
return `+${value}%`; return `+${value}%`;
}; };
// 获取涨跌幅颜色 // 获取涨跌幅颜色
const getUpDownColor = (value: string) => { const getUpDownColor = (value: string) => {
if (value && value[0] == '-') { if (value && value[0] == "-") {
// down // down
return '#f23645'; return "#f23645";
} }
// up // up
return '#23ab94'; return "#23ab94";
}; };
// 获取表格可视区域宽度 // 获取表格可视区域宽度
const getTableWidth = () => { const getTableWidth = () => {
if (CustomTable.value) { if (CustomTable.value) {
// 获取元素可视区域宽度 // 获取元素可视区域宽度
let width = CustomTable.value.clientWidth; let width = CustomTable.value.clientWidth;
affixedHead.width = width + 'px'; affixedHead.width = width + "px";
} }
}; };
// 排序事件 // 排序事件
...@@ -372,15 +372,15 @@ const submitSort = ({ sort, field }: any) => { ...@@ -372,15 +372,15 @@ const submitSort = ({ sort, field }: any) => {
SortOptions[item].type = sort; SortOptions[item].type = sort;
SortOptions[item].status = true; SortOptions[item].status = true;
} else { } else {
SortOptions[item].type = 'all'; SortOptions[item].type = "all";
SortOptions[item].status = false; SortOptions[item].status = false;
} }
}); });
// 开始排序 // 开始排序
if (sort === 'asc') { if (sort === "asc") {
// 升序 // 升序
resultData.list = TableSortAsc(resultData.list, field); resultData.list = TableSortAsc(resultData.list, field);
} else if (sort === 'desc') { } else if (sort === "desc") {
// 降序 // 降序
resultData.list = TableSort(resultData.list, field); resultData.list = TableSort(resultData.list, field);
} else { } else {
...@@ -391,16 +391,16 @@ const submitSort = ({ sort, field }: any) => { ...@@ -391,16 +391,16 @@ const submitSort = ({ sort, field }: any) => {
// 获取head的宽度赋给吸顶表头 // 获取head的宽度赋给吸顶表头
const getMinWidth = () => { const getMinWidth = () => {
if (CustomHead.value) { if (CustomHead.value) {
affixedTableWidth.value = CustomHead.value.clientWidth + 'px'; affixedTableWidth.value = CustomHead.value.clientWidth + "px";
} }
}; };
// 表格数据过滤方法 // 表格数据过滤方法
const TableFilter = (result: any) => { const TableFilter = (result: any) => {
if ('list' in result && result.list.length) { if ("list" in result && result.list.length) {
result.list.forEach((item: any, index: number) => { result.list.forEach((item: any, index: number) => {
item.index = index + 1; item.index = index + 1;
item.n_up = '$' + parseCoinAmount(item.up); item.n_up = "$" + parseCoinAmount(item.up);
item.n_vn = '$' + parseNumberToK(item.vn); item.n_vn = "$" + parseNumberToK(item.vn);
item.n_pb = parseNumberToK(item.pb); item.n_pb = parseNumberToK(item.pb);
item.n_r5m = parseFloat(item.r5m * 100).toFixed(2); item.n_r5m = parseFloat(item.r5m * 100).toFixed(2);
item.n_r1h = parseFloat(item.r1h * 100).toFixed(2); item.n_r1h = parseFloat(item.r1h * 100).toFixed(2);
...@@ -431,7 +431,7 @@ const getParams = () => { ...@@ -431,7 +431,7 @@ const getParams = () => {
}; };
if (CurrentTime.value) { if (CurrentTime.value) {
params.date = CurrentTime.value; params.date = CurrentTime.value;
} else if ('date' in params) { } else if ("date" in params) {
delete params.date; delete params.date;
} }
return params; return params;
...@@ -458,6 +458,7 @@ const { data, refresh } = await useFetch( ...@@ -458,6 +458,7 @@ const { data, refresh } = await useFetch(
}, },
} }
); );
const next = () => { const next = () => {
loading.value = true; loading.value = true;
refresh(); refresh();
...@@ -470,17 +471,17 @@ const getDefaultList = () => { ...@@ -470,17 +471,17 @@ const getDefaultList = () => {
}; };
const CustomgetRoute = () => { const CustomgetRoute = () => {
if (route.params.chain) { if (route.params.chain) {
let Obj = filterChainObj('name', route.params.chain); let Obj = filterChainObj("name", route.params.chain);
if (Obj) { if (Obj) {
ChainObj.value = Obj; ChainObj.value = Obj;
chain.value = Obj.value; chain.value = Obj.value;
HeadTokenType.value = ChainObj.value.Currency[0]; HeadTokenType.value = ChainObj.value.Currency[0];
} }
} else { } else {
ChainObj.value = filterChainObj('value', chain.value); ChainObj.value = filterChainObj("value", chain.value);
} }
if (route.params.page) { if (route.params.page) {
if (typeof parseInt(route.params.page) === 'number') if (typeof parseInt(route.params.page) === "number")
pageNum.value = parseInt(route.params.page); pageNum.value = parseInt(route.params.page);
GlbFilter.value.page = parseInt(route.params.page); GlbFilter.value.page = parseInt(route.params.page);
} }
...@@ -493,9 +494,9 @@ useHead({ ...@@ -493,9 +494,9 @@ useHead({
link: [webLogo], link: [webLogo],
meta: [ meta: [
{ {
name: 'description', name: "description",
content: content:
'DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。', "DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。",
}, },
], ],
}); });
...@@ -506,7 +507,7 @@ const getColGroupWidth = () => { ...@@ -506,7 +507,7 @@ const getColGroupWidth = () => {
// 动态改变吸顶表头的th宽度 // 动态改变吸顶表头的th宽度
colGroupList.list.forEach((it: any) => { colGroupList.list.forEach((it: any) => {
tableTrOne.value.forEach((item: any, index: number) => { tableTrOne.value.forEach((item: any, index: number) => {
colGroupList.list[index] = item.clientWidth + 'px'; colGroupList.list[index] = item.clientWidth + "px";
}); });
}); });
}; };
...@@ -537,16 +538,16 @@ watch( ...@@ -537,16 +538,16 @@ watch(
CurLineIndex.value = 0; CurLineIndex.value = 0;
pageNum.value = 1; pageNum.value = 1;
// 修改title // 修改title
ChainObj.value = filterChainObj('value', chain.value); ChainObj.value = filterChainObj("value", chain.value);
getTableList(); getTableList();
} }
); );
// 判断是否需要加$ // 判断是否需要加$
const Judgment = () => { const Judgment = () => {
if (HeadTokenType.value === 'USDT') { if (HeadTokenType.value === "USDT") {
return '$'; return "$";
} else { } else {
return ''; return "";
} }
}; };
// tbName---流动池折线图传递参数 // tbName---流动池折线图传递参数
...@@ -560,11 +561,11 @@ const handleRowClick = (item: any, index: number) => { ...@@ -560,11 +561,11 @@ const handleRowClick = (item: any, index: number) => {
}; };
// 监听是否切出页面 // 监听是否切出页面
const listenerWindow = (fn: any) => { const listenerWindow = (fn: any) => {
document.addEventListener('visibilitychange', fn); document.addEventListener("visibilitychange", fn);
}; };
// 取消监听 // 取消监听
const closeListener = (fn: any) => { const closeListener = (fn: any) => {
document.removeEventListener('visibilitychange', fn); document.removeEventListener("visibilitychange", fn);
}; };
// 有数据，开启定时器 // 有数据，开启定时器
const Intervalfun = () => { const Intervalfun = () => {
...@@ -582,7 +583,7 @@ const closeInterVal = () => { ...@@ -582,7 +583,7 @@ const closeInterVal = () => {
const windowOpenFn = (e: any) => { const windowOpenFn = (e: any) => {
// ==visible代表在当前窗口 // ==visible代表在当前窗口
let isExist = e.target.visibilityState; let isExist = e.target.visibilityState;
if (isExist === 'visible') { if (isExist === "visible") {
// 先关再开 // 先关再开
closeInterVal(); closeInterVal();
Intervalfun(); Intervalfun();
...@@ -599,9 +600,9 @@ const onCurrentChange = (v) => { ...@@ -599,9 +600,9 @@ const onCurrentChange = (v) => {
}; };
const onScrollEvent = () => { const onScrollEvent = () => {
// 获取滚动元素dom // 获取滚动元素dom
BodyscrollDom.value = document.getElementById('layout-scroll'); BodyscrollDom.value = document.getElementById("layout-scroll");
if (BodyscrollDom.value) { if (BodyscrollDom.value) {
affixedHead.top = BodyscrollDom.value.offsetTop + 'px'; affixedHead.top = BodyscrollDom.value.offsetTop + "px";
BodyscrollDom.value.onscroll = function (e: any) { BodyscrollDom.value.onscroll = function (e: any) {
let client = CustomHead.value.getBoundingClientRect(); let client = CustomHead.value.getBoundingClientRect();
if (client.top <= BodyscrollDom.value.offsetTop) { if (client.top <= BodyscrollDom.value.offsetTop) {
...@@ -628,7 +629,7 @@ const onTableScroll = () => { ...@@ -628,7 +629,7 @@ const onTableScroll = () => {
}; };
const setColGroupList = () => { const setColGroupList = () => {
columnsChild.value.forEach((item: any) => { columnsChild.value.forEach((item: any) => {
colGroupList.list.push('0px'); colGroupList.list.push("0px");
}); });
}; };
onMounted(() => { onMounted(() => {
...@@ -680,79 +681,79 @@ onUnmounted(() => { ...@@ -680,79 +681,79 @@ onUnmounted(() => {
const columns = computed(() => { const columns = computed(() => {
return [ return [
{ {
title: t('TableList.tokenbase'), title: t("TableList.tokenbase"),
children: [ children: [
{ {
colKey: 'index', colKey: "index",
width: 'auto', width: "auto",
title: '#', title: "#",
}, },
{ {
colKey: 'tn', colKey: "tn",
title: t('TableList.token'), title: t("TableList.token"),
}, },
], ],
}, },
{ {
title: t('TableList.basic'), title: t("TableList.basic"),
children: [ children: [
{ {
colKey: 'up', colKey: "up",
title: t('TableList.price'), title: t("TableList.price"),
sort: true, sort: true,
}, },
{ {
colKey: 'pb', colKey: "pb",
title: 'Pool', title: "Pool",
sort: true, sort: true,
}, },
{ {
colKey: 'vn', colKey: "vn",
title: t('TableList.volume'), title: t("TableList.volume"),
sort: true, sort: true,
}, },
{ {
colKey: 'txn', colKey: "txn",
title: t('TableList.txns'), title: t("TableList.txns"),
sort: true, sort: true,
}, },
], ],
}, },
{ {
title: t('TableList.priceChange'), title: t("TableList.priceChange"),
children: [ children: [
{ {
colKey: 'r5m', colKey: "r5m",
title: t('TableList.time1'), title: t("TableList.time1"),
sort: true, sort: true,
}, },
{ {
colKey: 'r1h', colKey: "r1h",
title: t('TableList.time2'), title: t("TableList.time2"),
sort: true, sort: true,
}, },
{ {
colKey: 'r4h', colKey: "r4h",
title: t('TableList.time3'), title: t("TableList.time3"),
sort: true, sort: true,
}, },
{ {
colKey: 'r24h', colKey: "r24h",
title: t('TableList.time4'), title: t("TableList.time4"),
sort: true, sort: true,
}, },
], ],
}, },
{ {
title: t('TableList.others'), title: t("TableList.others"),
children: [ children: [
{ {
colKey: 'operation', colKey: "operation",
title: t('TableList.k_line'), title: t("TableList.k_line"),
}, },
{ {
colKey: 'media', colKey: "media",
title: t('TableList.mediaData'), title: t("TableList.mediaData"),
}, },
], ],
}, },
...@@ -772,21 +773,21 @@ const columnsChild = computed(() => { ...@@ -772,21 +773,21 @@ const columnsChild = computed(() => {
let arr1 = new Array(100); let arr1 = new Array(100);
for (let i = 0; i < arr1.length; i++) { for (let i = 0; i < arr1.length; i++) {
arr1[i] = { arr1[i] = {
one: '1', one: "1",
two: '2', two: "2",
three: '3', three: "3",
four: '4', four: "4",
five: '5', five: "5",
sex: '6', sex: "6",
seven: '7', seven: "7",
}; };
} }
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables.less'; @import "@/style/variables.less";
@import '@/style/line.less'; @import "@/style/line.less";
@import '@/style/flex.less'; @import "@/style/flex.less";
.custom-token-list { .custom-token-list {
margin-top: 8px; margin-top: 8px;
box-sizing: border-box; box-sizing: border-box;
...@@ -829,7 +830,7 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -829,7 +830,7 @@ for (let i = 0; i < arr1.length; i++) {
font-size: 14px; font-size: 14px;
color: var(--td--main-btn-color-1); color: var(--td--main-btn-color-1);
white-space: nowrap; white-space: nowrap;
font-family: 'bold'; font-family: "bold";
padding: 4px 12px; padding: 4px 12px;
} }
.t-align-center { .t-align-center {
...@@ -852,7 +853,7 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -852,7 +853,7 @@ for (let i = 0; i < arr1.length; i++) {
th { th {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
font-family: 'Medium'; font-family: "Medium";
border-bottom: 1px solid var(--new-border-4); border-bottom: 1px solid var(--new-border-4);
padding: 10px 12px; padding: 10px 12px;
.thead-sort-box { .thead-sort-box {
...@@ -894,7 +895,7 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -894,7 +895,7 @@ for (let i = 0; i < arr1.length; i++) {
font-size: 14px; font-size: 14px;
color: var(--td--main-btn-color-1); color: var(--td--main-btn-color-1);
white-space: nowrap; white-space: nowrap;
font-family: 'bold'; font-family: "bold";
padding: 4px 12px; padding: 4px 12px;
} }
.t-align-center { .t-align-center {
...@@ -917,7 +918,7 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -917,7 +918,7 @@ for (let i = 0; i < arr1.length; i++) {
th { th {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
font-family: 'Medium'; font-family: "Medium";
border-bottom: 1px solid var(--new-border-4); border-bottom: 1px solid var(--new-border-4);
padding: 10px 12px; padding: 10px 12px;
.thead-sort-box { .thead-sort-box {
...@@ -942,7 +943,7 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -942,7 +943,7 @@ for (let i = 0; i < arr1.length; i++) {
border: none; border: none;
border-bottom: 1px solid var(--new-border-3); border-bottom: 1px solid var(--new-border-3);
background: var(--new-background-5); background: var(--new-background-5);
font-family: 'Regular'; font-family: "Regular";
padding: 10px 12px; padding: 10px 12px;
.custom-no-list { .custom-no-list {
.dja(); .dja();
...@@ -973,7 +974,7 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -973,7 +974,7 @@ for (let i = 0; i < arr1.length; i++) {
color: var(--main-theme-color); color: var(--main-theme-color);
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
font-family: 'bold'; font-family: "bold";
} }
.symbol { .symbol {
color: var(--td-search-btn-back-1); color: var(--td-search-btn-back-1);
......
views/token/RightDetail.vue
<template> <template>
<div class="right-detail-wrapper"> <!-- <div class="right-detail-wrapper">
<div class="right-header"> <div class="right-header">
<template v-for="item in headerBtns" :key="item.value"> <template v-for="item in headerBtns" :key="item.value">
<t-button <t-button
...@@ -89,7 +89,6 @@ ...@@ -89,7 +89,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 收藏 -->
<template v-if="CollectionOnload"> <template v-if="CollectionOnload">
<div v-show="defaBtn == 'collection'"> <div v-show="defaBtn == 'collection'">
<Collection></Collection> <Collection></Collection>
...@@ -106,26 +105,27 @@ ...@@ -106,26 +105,27 @@
></details-echarts> ></details-echarts>
</div> </div>
</template> </template>
</div> </div> -->
<div></div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import request from '@/utils/request'; import request from "@/utils/request";
import { parsePercent, parseCoinAmount } from '@/utils/tool'; import { parsePercent, parseCoinAmount } from "@/utils/tool";
import TimeTab from './TimeTab.vue'; import TimeTab from "./TimeTab.vue";
import SecurityCheck from './SecurityCheck.vue'; import SecurityCheck from "./SecurityCheck.vue";
import TokenInfo from './TokenInfo.vue'; import TokenInfo from "./TokenInfo.vue";
import TokenPool from './TokenPool.vue'; import TokenPool from "./TokenPool.vue";
import TokenSocialList from './TokenSocialList.vue'; import TokenSocialList from "./TokenSocialList.vue";
import * as Cache from '@/utils/cache'; import * as Cache from "@/utils/cache";
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from "tdesign-vue-next";
import DetailsEcharts from '../analysis/detailsEcharts.vue'; import DetailsEcharts from "../analysis/detailsEcharts.vue";
import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg'; import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
import Favo from '/public/images/svg/rightDetail/favo.svg'; import Favo from "/public/images/svg/rightDetail/favo.svg";
import CollectionSvg from '/public/images/svg/rightDetail/colection.svg'; import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import RightDetailHeader from './rightDetailHeader'; import RightDetailHeader from "./rightDetailHeader";
import SubmitSocialInfo from './SubmitSocialInfo'; import SubmitSocialInfo from "./SubmitSocialInfo";
import Collection from './collection'; import Collection from "./collection";
const router = useRouter(); const router = useRouter();
const { t, locale } = useI18n(); const { t, locale } = useI18n();
// 通知表格收藏图表取消收藏 // 通知表格收藏图表取消收藏
...@@ -134,16 +134,16 @@ const CollectionDe = CollectionDelete(); ...@@ -134,16 +134,16 @@ const CollectionDe = CollectionDelete();
// const initEchart = computed(() => store.getters['echart/gethasInit']); // const initEchart = computed(() => store.getters['echart/gethasInit']);
const headerBtns = computed(() => [ const headerBtns = computed(() => [
{ {
label: t('securityCheck.details'), label: t("securityCheck.details"),
value: 'details', value: "details",
}, },
{ {
label: t('filter.Collection'), label: t("filter.Collection"),
value: 'collection', value: "collection",
}, },
{ {
label: t('securityCheck.analysis'), label: t("securityCheck.analysis"),
value: 'echart', value: "echart",
}, },
]); ]);
const props = defineProps({ const props = defineProps({
...@@ -155,52 +155,52 @@ const props = defineProps({ ...@@ -155,52 +155,52 @@ const props = defineProps({
mt: String, mt: String,
up: Number, up: Number,
}); });
const emit = defineEmits(['update:setPool', 'SettwitterRul']); const emit = defineEmits(["update:setPool", "SettwitterRul"]);
const r24h = ref(''); const r24h = ref("");
const numR24h = ref(''); const numR24h = ref("");
// 收藏列表是否首次加载 // 收藏列表是否首次加载
const CollectionOnload = ref(false); const CollectionOnload = ref(false);
// 判断当前路由，隐藏右侧详情box中的折线图模块 // 判断当前路由，隐藏右侧详情box中的折线图模块
const currentRouter = router.currentRoute.value.name; const currentRouter = router.currentRoute.value.name;
const currentTab = ref('info'); const currentTab = ref("info");
const isInCollection = ref(false); const isInCollection = ref(false);
// 默认选择detail按钮 // 默认选择detail按钮
const defaBtn = ref('details'); const defaBtn = ref("details");
const ifDetails = ref(false); const ifDetails = ref(false);
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
// 传给详情折线图的tbname // 传给详情折线图的tbname
const tb = ref(''); const tb = ref("");
// 点击pool才加载 // 点击pool才加载
const isPool = ref(false); const isPool = ref(false);
const PoolAddress = ref(''); const PoolAddress = ref("");
// 当前链 // 当前链
const chain = useChain(); const chain = useChain();
const tokenInfo: any = ref({ const tokenInfo: any = ref({
avatar: '', avatar: "",
token: '', token: "",
pool: [], pool: [],
}); });
const getPriceRange = () => { const getPriceRange = () => {
const { up, r24h: proR24h } = props; const { up, r24h: proR24h } = props;
if ((proR24h + '')[0] == '-') { if ((proR24h + "")[0] == "-") {
// -，跌 // -，跌
let newR24h = parseFloat((proR24h + '').replace('-', '')); let newR24h = parseFloat((proR24h + "").replace("-", ""));
// 原价 // 原价
let oldPrice = props.up / (1 - newR24h); let oldPrice = props.up / (1 - newR24h);
numR24h.value = oldPrice - props.up; numR24h.value = oldPrice - props.up;
numR24h.value = '-' + parseCoinAmount(numR24h.value); numR24h.value = "-" + parseCoinAmount(numR24h.value);
} else if (proR24h == 0) { } else if (proR24h == 0) {
numR24h.value = '+0'; numR24h.value = "+0";
} else { } else {
// +,涨 // +,涨
// 原价 // 原价
let oldPrice = props.up / (proR24h + 1); let oldPrice = props.up / (proR24h + 1);
numR24h.value = props.up - oldPrice; numR24h.value = props.up - oldPrice;
numR24h.value = '+' + parseCoinAmount(numR24h.value); numR24h.value = "+" + parseCoinAmount(numR24h.value);
} }
r24h.value = parsePercent(proR24h + ''); r24h.value = parsePercent(proR24h + "");
if (r24h.value[0] !== '-') { if (r24h.value[0] !== "-") {
r24h.value = '+' + r24h.value; r24h.value = "+" + r24h.value;
} }
}; };
watch( watch(
...@@ -214,13 +214,13 @@ watch( ...@@ -214,13 +214,13 @@ watch(
watch( watch(
() => props.r24h, () => props.r24h,
(v) => { (v) => {
if (typeof v !== 'undefined') { if (typeof v !== "undefined") {
getPriceRange(); getPriceRange();
} }
} }
); );
const btnLoad = (value: string) => { const btnLoad = (value: string) => {
if (currentRouter == 'tokenAnalysis' && value == 'echart') { if (currentRouter == "tokenAnalysis" && value == "echart") {
return false; return false;
} }
return true; return true;
...@@ -236,7 +236,7 @@ watch( ...@@ -236,7 +236,7 @@ watch(
); );
// 流动池tab改变 // 流动池tab改变
const changeTab = (value) => { const changeTab = (value) => {
if (value === 'pool') { if (value === "pool") {
isPool.value = true; isPool.value = true;
} }
}; };
...@@ -250,31 +250,31 @@ const getTokenInfo = async () => { ...@@ -250,31 +250,31 @@ const getTokenInfo = async () => {
}, },
}); });
result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1); result.marketCap = parseFloat(result.supply * result.up + "").toFixed(1);
result.tokenSub = ''; result.tokenSub = "";
if (result.token) { if (result.token) {
result.tokenSub = result.tokenSub =
result.token.substr(0, 6) + result.token.substr(0, 6) +
'...' + "..." +
result.token.substr(result.token.length - 4, 4); result.token.substr(result.token.length - 4, 4);
} }
// tbname-掩码 // tbname-掩码
result.tbnameSub = ''; result.tbnameSub = "";
result.n_tb = ''; result.n_tb = "";
if (props.tb) { if (props.tb) {
// 先将d去掉 // 先将d去掉
result.n_tb = result.n_tb =
props.tb[0] == 'd' ? props.tb.slice(1, props.tb.length) : props.tb; props.tb[0] == "d" ? props.tb.slice(1, props.tb.length) : props.tb;
result.tbnameSub = result.tbnameSub =
result.n_tb.substr(0, 6) + result.n_tb.substr(0, 6) +
'...' + "..." +
result.n_tb.substr(result.n_tb.length - 4, 4); result.n_tb.substr(result.n_tb.length - 4, 4);
} }
isInCollection.value = Cache.hasSet(props.tb); isInCollection.value = Cache.hasSet(props.tb);
Object.assign(tokenInfo.value, result); Object.assign(tokenInfo.value, result);
// 如果有推特链接，提交给twitter组件解析 // 如果有推特链接，提交给twitter组件解析
if ('chat' in result) { if ("chat" in result) {
emit('SettwitterRul', result.chat.twitter); emit("SettwitterRul", result.chat.twitter);
} }
} catch (e) { } catch (e) {
console.log(e); console.log(e);
...@@ -284,7 +284,7 @@ const getTokenInfo = async () => { ...@@ -284,7 +284,7 @@ const getTokenInfo = async () => {
watch( watch(
() => locale.value, () => locale.value,
(v) => { (v) => {
if (defaBtn.value == 'echart') { if (defaBtn.value == "echart") {
WatchEcharts.value += 1; WatchEcharts.value += 1;
} }
} }
...@@ -292,16 +292,16 @@ watch( ...@@ -292,16 +292,16 @@ watch(
// 点击查看token详情信息 // 点击查看token详情信息
// v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求 // v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求
const gotoDetail = (value) => { const gotoDetail = (value) => {
if (value == 'collection' && !CollectionOnload.value) { if (value == "collection" && !CollectionOnload.value) {
CollectionOnload.value = true; CollectionOnload.value = true;
} }
// 先判断是否有token,没有则禁止打开折线图模块 // 先判断是否有token,没有则禁止打开折线图模块
if (!props.tb && value === 'echart') { if (!props.tb && value === "echart") {
MessagePlugin.closeAll(); MessagePlugin.closeAll();
MessagePlugin.warning(t('MessagePlugin.plToken')); MessagePlugin.warning(t("MessagePlugin.plToken"));
return; return;
} }
if (value === 'echart') { if (value === "echart") {
tb.value = props.tb; tb.value = props.tb;
ifDetails.value = true; ifDetails.value = true;
} }
...@@ -316,14 +316,14 @@ const monitor = computed((value) => { ...@@ -316,14 +316,14 @@ const monitor = computed((value) => {
// 接收右侧详情流动池address // 接收右侧详情流动池address
const changePool = (PoolValue) => { const changePool = (PoolValue) => {
PoolAddress.value = PoolValue; PoolAddress.value = PoolValue;
emit('update:setPool', PoolValue); emit("update:setPool", PoolValue);
}; };
watch( watch(
() => props.token, () => props.token,
(v) => { (v) => {
if (v) { if (v) {
//如果折线图为隐藏状态，需注销折线图模块 //如果折线图为隐藏状态，需注销折线图模块
if (defaBtn.value != 'echart') { if (defaBtn.value != "echart") {
ifDetails.value = false; ifDetails.value = false;
} }
tb.value = props.tb; tb.value = props.tb;
...@@ -333,8 +333,8 @@ watch( ...@@ -333,8 +333,8 @@ watch(
); );
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/flex.less'; @import "@/style/flex.less";
@import '@/style/variables.less'; @import "@/style/variables.less";
.right-detail-wrapper { .right-detail-wrapper {
height: calc(100vh - 70px); height: calc(100vh - 70px);
flex: 1; flex: 1;
...@@ -362,7 +362,7 @@ watch( ...@@ -362,7 +362,7 @@ watch(
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Regular'; font-family: "Regular";
.details-icon-cl { .details-icon-cl {
width: 30px; width: 30px;
fill: var(--td-search-btn-back-1); fill: var(--td-search-btn-back-1);
...@@ -438,7 +438,7 @@ watch( ...@@ -438,7 +438,7 @@ watch(
border-bottom-left-radius: @border-radius; border-bottom-left-radius: @border-radius;
border-bottom-right-radius: @border-radius; border-bottom-right-radius: @border-radius;
.t-tabs__nav-item-text-wrapper { .t-tabs__nav-item-text-wrapper {
font-family: 'Medium'; font-family: "Medium";
} }
.t-tabs__header { .t-tabs__header {
background-color: var(--td--right-back-color-2); background-color: var(--td--right-back-color-2);
......
views/token/index.vue
<!--
* @Author: lei 2897821407@qq.com
* @Date: 2023-02-20 19:44:54
* @LastEditors: lei 2897821407@qq.com
* @LastEditTime: 2023-02-20 20:00:08
* @FilePath: \dexfilter-web-nuxt3\views\token\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template> <template>
<MyLayout> <MyLayout>
<template #content> <template #content>
...@@ -29,24 +37,24 @@ ...@@ -29,24 +37,24 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import MyLayout from '@/views/layout/layout.vue'; import MyLayout from "@/views/layout/layout.vue";
import RightDetail from '@/views/token/RightDetail.vue'; import RightDetail from "@/views/token/RightDetail.vue";
import TokenFilter from '@/views/token/TokenFilter.vue'; import TokenFilter from "@/views/token/TokenFilter.vue";
import RollToken from '@/views/layout/rollToken.vue'; import RollToken from "@/views/layout/rollToken.vue";
const route = useRoute(); const route = useRoute();
const token = ref(); const token = ref();
const TbName = ref(); const TbName = ref();
const r24h = ref(); const r24h = ref();
const up = ref(); const up = ref();
const chain = useChain(); const chain = useChain();
const currentPath = ref(''); const currentPath = ref("");
const getUa = () => { const getUa = () => {
if ( if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent navigator.userAgent
) )
) { ) {
window.location.href = 'http://m.dexfilter.com'; window.location.href = "http://m.dexfilter.com";
} }
}; };
onBeforeMount(() => { onBeforeMount(() => {
...@@ -68,7 +76,7 @@ const changeChain = (chain) => { ...@@ -68,7 +76,7 @@ const changeChain = (chain) => {
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables.less'; @import "@/style/variables.less";
.home-wrapper { .home-wrapper {
width: 100vw; width: 100vw;
display: flex; display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment