Skip to content

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

1

parent 97864cc3
Showing with 175 additions and 126 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
export default <RouterConfig>{
routes: (_routes) => [
{
name: 'tokenIndex',
path: '/',
component: () => import('@/views/token/index.vue'),
name: "tokenIndex",
path: "/",
component: () => import("@/views/token/index.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: true },
children: [
{
name: 'tokenlistDefault',
path: '/',
component: () => import('~/views/token/CustomTokenList.vue'),
meta: { hasSearch: true, hasRollToken: true, footer: true },
name: "tokenlistDefault",
path: "/",
component: () => import("~/views/token/CustomTokenList.vue"),
meta: {
hasSearch: true,
hasRollToken: true,
footer: true,
},
},
{
name: 'tokenList',
path: '/:chain?/:page(\\d+)?',
component: () => import('~/views/token/CustomTokenList.vue'),
meta: { hasSearch: true, hasRollToken: true, footer: true },
name: "tokenList",
path: "/:chain?/:page(\\d+)?",
component: () => import("~/views/token/CustomTokenList.vue"),
meta: {
hasSearch: true,
hasRollToken: true,
footer: true,
},
},
],
},
{
name: 'tokenDetail',
path: '/:chain/:tb([a-zA-Z0-9_]{10,100})',
component: () => import('@/views/detail/index.vue'),
name: "tokenDetail",
path: "/:chain/:tb([a-zA-Z0-9_]{10,100})",
component: () => import("@/views/detail/index.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: false },
},
{
path: '/analysis/:chain/:tb',
name: 'tokenAnalysis',
component: () => import('@/views/analysis/index.vue'),
path: "/analysis/:chain/:tb",
name: "tokenAnalysis",
component: () => import("@/views/analysis/index.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: false },
},
{
path: '/login/:code?',
name: 'login',
component: () => import('@/views/login/index.vue'),
path: "/login/:code?",
name: "login",
component: () => import("@/views/login/index.vue"),
},
{
path: '/user',
name: 'userInfo',
component: () => import('@/views/user/index.vue'),
path: "/user",
name: "userInfo",
component: () => import("@/views/user/index.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false },
children: [
{
path: '/user/personal',
name: 'personal',
component: () => import('@/views/user/PersonalCenter.vue'),
path: "/user/personal",
name: "personal",
component: () => import("@/views/user/PersonalCenter.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false },
},
{
path: '/user/member',
name: 'member',
component: () => import('@/views/user/memberCenter.vue'),
path: "/user/member",
name: "member",
component: () => import("@/views/user/memberCenter.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false },
},
// 账单明细
{
path: '/user/Billing',
name: 'Billing',
component: () => import('@/views/user/Billing.vue'),
path: "/user/Billing",
name: "Billing",
component: () => import("@/views/user/Billing.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false },
},
{
path: '/user/InviteWelfare',
name: 'InviteWelfare',
component: () => import('@/views/user/invitation.vue'),
path: "/user/InviteWelfare",
name: "InviteWelfare",
component: () => import("@/views/user/invitation.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false },
},
],
},
// 价值币筛选
{
path: '/CoinFilter',
name: 'CoinFilter',
component: () => import('@/views/Private/CoinFilter/index.vue'),
path: "/CoinFilter",
name: "CoinFilter",
component: () => import("@/views/Private/CoinFilter/index.vue"),
meta: { hasSearch: false, hasRollToken: false, footer: false },
},
],
......
components/SwitchLanguage.vue
......@@ -12,39 +12,45 @@
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useI18n } from "vue-i18n";
const props = defineProps({
type: {
type: String,
default: 'home',
default: "home",
},
});
const { locale } = useI18n();
// 回到客户端修改获取浏览器语言
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';
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) {
locale.value = lan;
}
}
watch(
() => locale.value,
(v) => {
console.log(v);
}
);
const languageOptions = [
{
label: '中文简体',
value: 'cn',
label: "中文简体",
value: "cn",
},
{
label: 'English',
value: 'en',
label: "English",
value: "en",
},
];
const changeLanguage = (v: string) => {
locale.value = v;
localStorage.setItem('lang', v);
localStorage.setItem("lang", v);
};
</script>
......@@ -58,7 +64,7 @@ const changeLanguage = (v: string) => {
:deep(.t-input__inner) {
font-weight: 700;
font-size: 15px;
font-family: 'bold';
font-family: "bold";
}
}
</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 @@
</div>
</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>
views/token/RightDetail.vue
<template>
<div class="right-detail-wrapper">
<!-- <div class="right-detail-wrapper">
<div class="right-header">
<template v-for="item in headerBtns" :key="item.value">
<t-button
......@@ -89,7 +89,6 @@
</div>
</div>
</div>
<!-- 收藏 -->
<template v-if="CollectionOnload">
<div v-show="defaBtn == 'collection'">
<Collection></Collection>
......@@ -106,26 +105,27 @@
></details-echarts>
</div>
</template>
</div>
</div> -->
<div></div>
</template>
<script setup lang="ts">
import request from '@/utils/request';
import { parsePercent, parseCoinAmount } from '@/utils/tool';
import TimeTab from './TimeTab.vue';
import SecurityCheck from './SecurityCheck.vue';
import TokenInfo from './TokenInfo.vue';
import TokenPool from './TokenPool.vue';
import TokenSocialList from './TokenSocialList.vue';
import * as Cache from '@/utils/cache';
import { MessagePlugin } from 'tdesign-vue-next';
import DetailsEcharts from '../analysis/detailsEcharts.vue';
import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg';
import Favo from '/public/images/svg/rightDetail/favo.svg';
import CollectionSvg from '/public/images/svg/rightDetail/colection.svg';
import { useI18n } from 'vue-i18n';
import RightDetailHeader from './rightDetailHeader';
import SubmitSocialInfo from './SubmitSocialInfo';
import Collection from './collection';
import request from "@/utils/request";
import { parsePercent, parseCoinAmount } from "@/utils/tool";
import TimeTab from "./TimeTab.vue";
import SecurityCheck from "./SecurityCheck.vue";
import TokenInfo from "./TokenInfo.vue";
import TokenPool from "./TokenPool.vue";
import TokenSocialList from "./TokenSocialList.vue";
import * as Cache from "@/utils/cache";
import { MessagePlugin } from "tdesign-vue-next";
import DetailsEcharts from "../analysis/detailsEcharts.vue";
import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
import Favo from "/public/images/svg/rightDetail/favo.svg";
import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
import { useI18n } from "vue-i18n";
import RightDetailHeader from "./rightDetailHeader";
import SubmitSocialInfo from "./SubmitSocialInfo";
import Collection from "./collection";
const router = useRouter();
const { t, locale } = useI18n();
// 通知表格收藏图表取消收藏
......@@ -134,16 +134,16 @@ const CollectionDe = CollectionDelete();
// const initEchart = computed(() => store.getters['echart/gethasInit']);
const headerBtns = computed(() => [
{
label: t('securityCheck.details'),
value: 'details',
label: t("securityCheck.details"),
value: "details",
},
{
label: t('filter.Collection'),
value: 'collection',
label: t("filter.Collection"),
value: "collection",
},
{
label: t('securityCheck.analysis'),
value: 'echart',
label: t("securityCheck.analysis"),
value: "echart",
},
]);
const props = defineProps({
......@@ -155,52 +155,52 @@ const props = defineProps({
mt: String,
up: Number,
});
const emit = defineEmits(['update:setPool', 'SettwitterRul']);
const r24h = ref('');
const numR24h = ref('');
const emit = defineEmits(["update:setPool", "SettwitterRul"]);
const r24h = ref("");
const numR24h = ref("");
// 收藏列表是否首次加载
const CollectionOnload = ref(false);
// 判断当前路由，隐藏右侧详情box中的折线图模块
const currentRouter = router.currentRoute.value.name;
const currentTab = ref('info');
const currentTab = ref("info");
const isInCollection = ref(false);
// 默认选择detail按钮
const defaBtn = ref('details');
const defaBtn = ref("details");
const ifDetails = ref(false);
const WatchEcharts = useWatchEcharts();
// 传给详情折线图的tbname
const tb = ref('');
const tb = ref("");
// 点击pool才加载
const isPool = ref(false);
const PoolAddress = ref('');
const PoolAddress = ref("");
// 当前链
const chain = useChain();
const tokenInfo: any = ref({
avatar: '',
token: '',
avatar: "",
token: "",
pool: [],
});
const getPriceRange = () => {
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);
numR24h.value = oldPrice - props.up;
numR24h.value = '-' + parseCoinAmount(numR24h.value);
numR24h.value = "-" + parseCoinAmount(numR24h.value);
} else if (proR24h == 0) {
numR24h.value = '+0';
numR24h.value = "+0";
} else {
// +,涨
// 原价
let oldPrice = props.up / (proR24h + 1);
numR24h.value = props.up - oldPrice;
numR24h.value = '+' + parseCoinAmount(numR24h.value);
numR24h.value = "+" + parseCoinAmount(numR24h.value);
}
r24h.value = parsePercent(proR24h + '');
if (r24h.value[0] !== '-') {
r24h.value = '+' + r24h.value;
r24h.value = parsePercent(proR24h + "");
if (r24h.value[0] !== "-") {
r24h.value = "+" + r24h.value;
}
};
watch(
......@@ -214,13 +214,13 @@ watch(
watch(
() => props.r24h,
(v) => {
if (typeof v !== 'undefined') {
if (typeof v !== "undefined") {
getPriceRange();
}
}
);
const btnLoad = (value: string) => {
if (currentRouter == 'tokenAnalysis' && value == 'echart') {
if (currentRouter == "tokenAnalysis" && value == "echart") {
return false;
}
return true;
......@@ -236,7 +236,7 @@ watch(
);
// 流动池tab改变
const changeTab = (value) => {
if (value === 'pool') {
if (value === "pool") {
isPool.value = true;
}
};
......@@ -250,31 +250,31 @@ const getTokenInfo = async () => {
},
});
result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1);
result.tokenSub = '';
result.marketCap = parseFloat(result.supply * result.up + "").toFixed(1);
result.tokenSub = "";
if (result.token) {
result.tokenSub =
result.token.substr(0, 6) +
'...' +
"..." +
result.token.substr(result.token.length - 4, 4);
}
// tbname-掩码
result.tbnameSub = '';
result.n_tb = '';
result.tbnameSub = "";
result.n_tb = "";
if (props.tb) {
// 先将d去掉
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.n_tb.substr(0, 6) +
'...' +
"..." +
result.n_tb.substr(result.n_tb.length - 4, 4);
}
isInCollection.value = Cache.hasSet(props.tb);
Object.assign(tokenInfo.value, result);
// 如果有推特链接，提交给twitter组件解析
if ('chat' in result) {
emit('SettwitterRul', result.chat.twitter);
if ("chat" in result) {
emit("SettwitterRul", result.chat.twitter);
}
} catch (e) {
console.log(e);
......@@ -284,7 +284,7 @@ const getTokenInfo = async () => {
watch(
() => locale.value,
(v) => {
if (defaBtn.value == 'echart') {
if (defaBtn.value == "echart") {
WatchEcharts.value += 1;
}
}
......@@ -292,16 +292,16 @@ watch(
// 点击查看token详情信息
// v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求
const gotoDetail = (value) => {
if (value == 'collection' && !CollectionOnload.value) {
if (value == "collection" && !CollectionOnload.value) {
CollectionOnload.value = true;
}
// 先判断是否有token,没有则禁止打开折线图模块
if (!props.tb && value === 'echart') {
if (!props.tb && value === "echart") {
MessagePlugin.closeAll();
MessagePlugin.warning(t('MessagePlugin.plToken'));
MessagePlugin.warning(t("MessagePlugin.plToken"));
return;
}
if (value === 'echart') {
if (value === "echart") {
tb.value = props.tb;
ifDetails.value = true;
}
......@@ -316,14 +316,14 @@ const monitor = computed((value) => {
// 接收右侧详情流动池address
const changePool = (PoolValue) => {
PoolAddress.value = PoolValue;
emit('update:setPool', PoolValue);
emit("update:setPool", PoolValue);
};
watch(
() => props.token,
(v) => {
if (v) {
//如果折线图为隐藏状态，需注销折线图模块
if (defaBtn.value != 'echart') {
if (defaBtn.value != "echart") {
ifDetails.value = false;
}
tb.value = props.tb;
......@@ -333,8 +333,8 @@ watch(
);
</script>
<style lang="less">
@import '@/style/flex.less';
@import '@/style/variables.less';
@import "@/style/flex.less";
@import "@/style/variables.less";
.right-detail-wrapper {
height: calc(100vh - 70px);
flex: 1;
......@@ -362,7 +362,7 @@ watch(
font-size: 14px;
margin: 0;
padding: 0;
font-family: 'Regular';
font-family: "Regular";
.details-icon-cl {
width: 30px;
fill: var(--td-search-btn-back-1);
......@@ -438,7 +438,7 @@ watch(
border-bottom-left-radius: @border-radius;
border-bottom-right-radius: @border-radius;
.t-tabs__nav-item-text-wrapper {
font-family: 'Medium';
font-family: "Medium";
}
.t-tabs__header {
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>
<MyLayout>
<template #content>
......@@ -29,24 +37,24 @@
</template>
<script setup lang="ts">
import MyLayout from '@/views/layout/layout.vue';
import RightDetail from '@/views/token/RightDetail.vue';
import TokenFilter from '@/views/token/TokenFilter.vue';
import RollToken from '@/views/layout/rollToken.vue';
import MyLayout from "@/views/layout/layout.vue";
import RightDetail from "@/views/token/RightDetail.vue";
import TokenFilter from "@/views/token/TokenFilter.vue";
import RollToken from "@/views/layout/rollToken.vue";
const route = useRoute();
const token = ref();
const TbName = ref();
const r24h = ref();
const up = ref();
const chain = useChain();
const currentPath = ref('');
const currentPath = ref("");
const getUa = () => {
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
) {
window.location.href = 'http://m.dexfilter.com';
window.location.href = "http://m.dexfilter.com";
}
};
onBeforeMount(() => {
......@@ -68,7 +76,7 @@ const changeChain = (chain) => {
</script>
<style lang="less">
@import '@/style/variables.less';
@import "@/style/variables.less";
.home-wrapper {
width: 100vw;
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