Skip to content

D
dexfilter-web-nuxt3
Commit b37a71d4 by lei
Options

1

parent 0a26e3c7
Showing with 185 additions and 159 deletions
nuxt.config.ts
...@@ -76,19 +76,13 @@ export default defineNuxtConfig({ ...@@ -76,19 +76,13 @@ export default defineNuxtConfig({
comments: false, comments: false,
}, },
}, },
rollupOptions: { // rollupOptions: {
output: { // output: {
manualChunks(id, { getModuleInfo }) { // manualChunks: {
// 折线图 // CustomEcharts: ["echarts"],
if (id.includes("echarts")) { // },
return "CustomEcharts"; // },
} else if (id.includes("ethers")) { // },
return "ethers";
}
// 合并小文件
},
},
},
sourcemap: false, sourcemap: false,
// 关闭文件计算 // 关闭文件计算
reportCompressedSize: false, reportCompressedSize: false,
......
plugins/Tdesign.ts
...@@ -19,10 +19,7 @@ import { ...@@ -19,10 +19,7 @@ import {
RadioGroup as TRadioGroup, RadioGroup as TRadioGroup,
RadioButton as TRadioButton, RadioButton as TRadioButton,
InputNumber as TInputNumber, InputNumber as TInputNumber,
Row as TRow,
Col as TCol,
Checkbox as TCheckbox, Checkbox as TCheckbox,
Divider as TDivider,
Swiper as TSwiper, Swiper as TSwiper,
SwiperItem as TSwiperItem, SwiperItem as TSwiperItem,
} from "tdesign-vue-next"; } from "tdesign-vue-next";
...@@ -46,10 +43,7 @@ const components = [ ...@@ -46,10 +43,7 @@ const components = [
TRadioGroup, TRadioGroup,
TRadioButton, TRadioButton,
TInputNumber, TInputNumber,
TRow,
TCol,
TCheckbox, TCheckbox,
TDivider,
TSwiper, TSwiper,
TSwiperItem, TSwiperItem,
]; ];
......
utils/plugin/ShowPlugin.ts 0 → 100644
interface instruct {
arg: any;
dir: any;
instance: any;
modifiers: any;
oldValue?: number;
value?: number;
}
const sleep = (time: number) => {
const StartTime = new Date().valueOf();
while (true) {
// 获取当前时间
const CurrentTime = new Date().valueOf();
if (CurrentTime - StartTime >= time) {
break;
}
}
};
// 自定义指令
export const vDelayHide = {
mounted: (el: HTMLDivElement, { value }: instruct) => {
// 指定时间隐藏
setTimeout(() => {
el.style.display = "none";
}, value);
},
};
views/analysis/detailsEcharts.vue
<template> <template>
<div> <div class="echart-box-cl narrow-scrollbar" id="home_detail_echarts">
<ClientOnly> <ClientOnly>
<div class="echart-box-cl narrow-scrollbar"> <holder-box
<holder-box v-if="mt != '2'"
v-if="mt != '2'" :token="token"
:token="token" :tb="tb"
:tb="tb" :currentPath="currentPath"
:currentPath="currentPath" :r24h="r24h"
:r24h="r24h" ></holder-box>
></holder-box> <deal-box
<deal-box :token="token"
:token="token" :tb="tb"
:tb="tb" :currentPath="currentPath"
:currentPath="currentPath" :r24h="r24h"
:r24h="r24h" ></deal-box>
></deal-box> <in-and-out-box
<in-and-out-box :token="token"
:token="token" :tb="tb"
:tb="tb" :currentPath="currentPath"
:currentPath="currentPath" :r24h="r24h"
:r24h="r24h" ></in-and-out-box>
></in-and-out-box> <top100-box
<top100-box v-if="mt != '2'"
v-if="mt != '2'" :token="token"
:token="token" :tb="tb"
:tb="tb" :currentPath="currentPath"
:currentPath="currentPath" :r24h="r24h"
:r24h="r24h" ></top100-box>
></top100-box> <pool-box
<pool-box :token="token"
:token="token" :tb="tb"
:tb="tb" :currentPath="currentPath"
:currentPath="currentPath" :r24h="r24h"
:r24h="r24h" ></pool-box>
></pool-box> <twitter-box
<twitter-box :token="token"
:token="token" :tb="tb"
:tb="tb" :currentPath="currentPath"
:currentPath="currentPath" :r24h="r24h"
:r24h="r24h" ></twitter-box>
></twitter-box> <telegram-box
<telegram-box :token="token"
:token="token" :tb="tb"
:tb="tb" :currentPath="currentPath"
:currentPath="currentPath" :r24h="r24h"
:r24h="r24h" ></telegram-box>
></telegram-box> <discord-box
<discord-box :token="token"
:token="token" :tb="tb"
:tb="tb" :currentPath="currentPath"
:currentPath="currentPath" :r24h="r24h"
:r24h="r24h" ></discord-box>
></discord-box> <twitter-total-box
<twitter-total-box :token="token"
:token="token" :currentPath="currentPath"
:currentPath="currentPath" ></twitter-total-box>
></twitter-total-box>
</div>
</ClientOnly> </ClientOnly>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import HolderBox from './HolderBox.vue'; import HolderBox from "./HolderBox.vue";
import DealBox from './DealBox.vue'; import DealBox from "./DealBox.vue";
import InAndOutBox from './InAndOutBox.vue'; import InAndOutBox from "./InAndOutBox.vue";
import TwitterBox from './TwitterBox.vue'; import TwitterBox from "./TwitterBox.vue";
import TwitterTotalBox from './TwitterTotalBox.vue'; import TwitterTotalBox from "./TwitterTotalBox.vue";
import Top100Box from './Top100Box.vue'; import Top100Box from "./Top100Box.vue";
import PoolBox from './PoolBox.vue'; import PoolBox from "./PoolBox.vue";
import TelegramBox from './TelegramBox.vue'; import TelegramBox from "./TelegramBox.vue";
import DiscordBox from './DiscordBox.vue'; import DiscordBox from "./DiscordBox.vue";
const props = defineProps({ const props = defineProps({
token: { token: {
type: String, type: String,
......
views/analysis/index.vue
...@@ -104,22 +104,23 @@ ...@@ -104,22 +104,23 @@
</div> </div>
</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 HolderBox from '/views/analysis/HolderBox.vue'; import HolderBox from "/views/analysis/HolderBox.vue";
import DealBox from '/views/analysis/DealBox.vue'; import DealBox from "/views/analysis/DealBox.vue";
import InAndOutBox from '/views/analysis/InAndOutBox.vue'; import InAndOutBox from "/views/analysis/InAndOutBox.vue";
import TwitterBox from '/views/analysis/TwitterBox.vue'; import TwitterBox from "/views/analysis/TwitterBox.vue";
import TwitterTotalBox from '/views/analysis/TwitterTotalBox.vue'; import TwitterTotalBox from "/views/analysis/TwitterTotalBox.vue";
import Top100Box from '/views/analysis/Top100Box.vue'; import Top100Box from "/views/analysis/Top100Box.vue";
import PoolBox from '/views/analysis/PoolBox.vue'; import PoolBox from "/views/analysis/PoolBox.vue";
import TelegramBox from '/views/analysis/TelegramBox.vue'; import TelegramBox from "/views/analysis/TelegramBox.vue";
import DiscordBox from '/views/analysis/DiscordBox.vue'; import DiscordBox from "/views/analysis/DiscordBox.vue";
import request from '@/utils/request'; import request from "@/utils/request";
import { WebS } from '@/utils/TokenTrans'; import { WebS } from "@/utils/TokenTrans";
import { filterChainObj } from '@/constants/UnifiedManagementChain'; import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { webLogo } from '@/constants/logo'; import { webLogo } from "@/constants/logo";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import { Row as TRow, Col as TCol } from "tdesign-vue-next";
const theme = useCurTheme(); const theme = useCurTheme();
const { locale } = useI18n(); const { locale } = useI18n();
// 初始化折线图 // 初始化折线图
...@@ -132,27 +133,27 @@ watch( ...@@ -132,27 +133,27 @@ watch(
); );
const route = useRoute(); const route = useRoute();
const routeTb = route.params.tb; const routeTb = route.params.tb;
const tb = ref(''); const tb = ref("");
const currentPath = ref(route.params.chain + ''); const currentPath = ref(route.params.chain + "");
const chain = useChain(); const chain = useChain();
// token---接口得到 // token---接口得到
const token = ref(''); const token = ref("");
// r24h--接口 // r24h--接口
const r24h = ref(); const r24h = ref();
useHead({ useHead({
title: `Dexfilter | analysis`, title: `Dexfilter | analysis`,
meta: [ meta: [
{ {
name: 'description', name: "description",
content: `Dexfilter 数据分析页 ${route.params.tb ?? '---'}`, content: `Dexfilter 数据分析页 ${route.params.tb ?? "---"}`,
}, },
], ],
link: [webLogo], link: [webLogo],
}); });
const twitter = ref(''); const twitter = ref("");
const options = ['5M', '30M', '1H', '6H', '1D']; const options = ["5M", "30M", "1H", "6H", "1D"];
// 先取出对应链的接口id // 先取出对应链的接口id
let Obj = filterChainObj('name', currentPath.value); let Obj = filterChainObj("name", currentPath.value);
currentPath.value = Obj.value; currentPath.value = Obj.value;
onBeforeMount(() => { onBeforeMount(() => {
if (currentPath.value) { if (currentPath.value) {
...@@ -168,10 +169,10 @@ onBeforeMount(() => { ...@@ -168,10 +169,10 @@ onBeforeMount(() => {
.then((res: any) => { .then((res: any) => {
if (!res.is_token) { if (!res.is_token) {
tb.value = tb.value =
res.pair[0] == 'd' ? res.pair.slice(1, res.pair.length) : res.pair; res.pair[0] == "d" ? res.pair.slice(1, res.pair.length) : res.pair;
} else { } else {
tb.value = tb.value =
res.tbname[0] == 'd' res.tbname[0] == "d"
? res.tbname.slice(1, res.tbname.length) ? res.tbname.slice(1, res.tbname.length)
: res.tbname; : res.tbname;
} }
...@@ -182,10 +183,10 @@ onBeforeMount(() => { ...@@ -182,10 +183,10 @@ onBeforeMount(() => {
}); });
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
let echartBox = window.sessionStorage.getItem('echart-box'); let echartBox = window.sessionStorage.getItem("echart-box");
if (echartBox !== 'null' && echartBox !== '' && echartBox !== null) { if (echartBox !== "null" && echartBox !== "" && echartBox !== null) {
let dom = document.querySelector(`#${echartBox}`); let dom = document.querySelector(`#${echartBox}`);
dom.classList.add('active'); dom.classList.add("active");
} }
}); });
}); });
...@@ -194,7 +195,7 @@ const SettwitterRul = (value: string) => { ...@@ -194,7 +195,7 @@ const SettwitterRul = (value: string) => {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import "@/style/variables.less";
.token-analysis-wrapper { .token-analysis-wrapper {
box-sizing: border-box; box-sizing: border-box;
padding: 12px 0px 0 12px; padding: 12px 0px 0 12px;
......
views/token/Collection.vue
...@@ -376,6 +376,7 @@ onMounted(() => { ...@@ -376,6 +376,7 @@ onMounted(() => {
.custom-home-collection-box { .custom-home-collection-box {
background-color: var(--td--right-back-color-2); background-color: var(--td--right-back-color-2);
border: var(--new-border-2); border: var(--new-border-2);
border-top: none;
border-radius: 0 0 @border-radius @border-radius; border-radius: 0 0 @border-radius @border-radius;
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
......
views/token/RightDetail.vue
...@@ -96,6 +96,7 @@ ...@@ -96,6 +96,7 @@
</template> </template>
<template v-if="ifDetails"> <template v-if="ifDetails">
<div v-show="defaBtn == 'echart'" class="all-echarts"> <div v-show="defaBtn == 'echart'" class="all-echarts">
<Animation v-delay-hide="300"></Animation>
<details-echarts <details-echarts
:token="props.token" :token="props.token"
:tb="tb" :tb="tb"
...@@ -124,17 +125,15 @@ import { useI18n } from "vue-i18n"; ...@@ -124,17 +125,15 @@ import { useI18n } from "vue-i18n";
import RightDetailHeader from "./rightDetailHeader.vue"; import RightDetailHeader from "./rightDetailHeader.vue";
import SubmitSocialInfo from "./SubmitSocialInfo.vue"; import SubmitSocialInfo from "./SubmitSocialInfo.vue";
import Collection from "./Collection.vue"; import Collection from "./Collection.vue";
import Animation from "@/components/Animation.vue";
import { vDelayHide } from "@/utils/plugin/ShowPlugin";
let DetailsEcharts: any = null; let DetailsEcharts: any = null;
// 异步组件 // 异步组件
// const DetailsEcharts = defineAsyncComponent( if (process.client) {
// () => import("../analysis/detailsEcharts.vue") DetailsEcharts = defineAsyncComponent(
// ); () => import("../analysis/detailsEcharts.vue")
onMounted(() => { );
console.log("导入"); }
console.log(DetailsEcharts);
// 加载完成后导入echarts
DetailsEcharts = () => import("../analysis/detailsEcharts.vue");
});
const router = useRouter(); const router = useRouter();
const { t, locale } = useI18n(); const { t, locale } = useI18n();
// 通知表格收藏图表取消收藏 // 通知表格收藏图表取消收藏
...@@ -422,6 +421,10 @@ watch( ...@@ -422,6 +421,10 @@ watch(
} }
} }
} }
.all-echarts {
position: relative;
height: calc(100vh - 120px);
}
.details-title-box { .details-title-box {
width: 100%; width: 100%;
.right-body-scroll { .right-body-scroll {
......
views/token/test/customLoader.vue 0 → 100644
<template>
<div>我加载了</div>
</template>
<script lang="ts" setup></script>
views/user/InvitedDialog.vue
...@@ -42,13 +42,14 @@ ...@@ -42,13 +42,14 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Divider as TDivider } from "tdesign-vue-next";
const props = defineProps({ const props = defineProps({
InvitedVisible: Boolean, InvitedVisible: Boolean,
}); });
const confirmDialog = ref(false); const confirmDialog = ref(false);
const emit = defineEmits(['closeInvitedDialog']); const emit = defineEmits(["closeInvitedDialog"]);
const closeInvitedDialog = () => { const closeInvitedDialog = () => {
emit('closeInvitedDialog', false); emit("closeInvitedDialog", false);
}; };
// 关闭确认对话框 // 关闭确认对话框
const closeComfrimDialog = (value: boolean) => { const closeComfrimDialog = (value: boolean) => {
...@@ -65,11 +66,11 @@ const comfimawal = (value: boolean) => { ...@@ -65,11 +66,11 @@ const comfimawal = (value: boolean) => {
<style lang="less" scoped> <style lang="less" scoped>
// 红点 // 红点
@import '@/style/components/dot.less'; @import "@/style/components/dot.less";
// 第二层dialog的蒙层颜色 // 第二层dialog的蒙层颜色
@import '@/style/components/hierarchyDialog.less'; @import "@/style/components/hierarchyDialog.less";
@import '@/style/variables.less'; @import "@/style/variables.less";
@import '@/style/flex.less'; @import "@/style/flex.less";
.Invited-table { .Invited-table {
.Invited-dialog { .Invited-dialog {
:deep(.t-dialog__wrap) { :deep(.t-dialog__wrap) {
......
views/user/memberCenter.vue
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
:src="userInfo.avatar ?? '/images/svg/header/userOne.svg'" :src="userInfo.avatar ?? '/images/svg/header/userOne.svg'"
alt="" alt=""
/> />
<p class="p1-blue">{{ userInfo.vip_type ?? '---' }}</p> <p class="p1-blue">{{ userInfo.vip_type ?? "---" }}</p>
<div class="expire-time"> <div class="expire-time">
<p>{{ $t('user.ExpirationDate') }}</p> <p>{{ $t("user.ExpirationDate") }}</p>
<p class="p1-item"> <p class="p1-item">
{{ {{
userInfo.vip_type === '免费会员' userInfo.vip_type === "免费会员"
? $t('user.NotOpen') ? $t("user.NotOpen")
: userInfo.vip_time : userInfo.vip_time
}} }}
</p> </p>
...@@ -21,13 +21,13 @@ ...@@ -21,13 +21,13 @@
</div> </div>
<div class="Member-invite"> <div class="Member-invite">
<div class="Member-center1"> <div class="Member-center1">
<h3>{{ $t('user.Dear') }} {{ userInfo.name }}：</h3> <h3>{{ $t("user.Dear") }} {{ userInfo.name }}：</h3>
<div class="Menber-grade"> <div class="Menber-grade">
{{ $t('user.PackageLevel') }}: {{ $t("user.PackageLevel") }}:
<p class="Menber-grade-p1">{{ userInfo.vip_type ?? '---' }}</p> <p class="Menber-grade-p1">{{ userInfo.vip_type ?? "---" }}</p>
</div> </div>
<div class="Menber-bound" v-if="!userInfo.is_bind"> <div class="Menber-bound" v-if="!userInfo.is_bind">
<p>{{ $t('user.BindingInvitationCode') }}：</p> <p>{{ $t("user.BindingInvitationCode") }}：</p>
<t-input <t-input
v-model="BindCode" v-model="BindCode"
type="text" type="text"
...@@ -37,36 +37,36 @@ ...@@ -37,36 +37,36 @@
<t-button <t-button
@click="BindingInCode" @click="BindingInCode"
class="custom_button_back_border" class="custom_button_back_border"
>{{ $t('user.Confirm') }}</t-button >{{ $t("user.Confirm") }}</t-button
> >
</div> </div>
<div class="Menber-bound" v-else> <div class="Menber-bound" v-else>
<span class="member-span">{{ $t('user.haveBound') }}！</span> <span class="member-span">{{ $t("user.haveBound") }}！</span>
</div> </div>
</div> </div>
<div class="Member-center2"> <div class="Member-center2">
<t-button class="custom_button_back_border">{{ <t-button class="custom_button_back_border">{{
$t('user.BillingDetails') $t("user.BillingDetails")
}}</t-button> }}</t-button>
</div> </div>
</div> </div>
</div> </div>
<div class="Member-item2"> <div class="Member-item2">
<h3>{{ $t('user.PackageOpening') }}</h3> <h3>{{ $t("user.PackageOpening") }}</h3>
<div class="Member-set-meal"> <div class="Member-set-meal">
<div class="vip-item" v-for="item in comboData.list" :key="item.title"> <div class="vip-item" v-for="item in comboData.list" :key="item.title">
<p>{{ item.title }}</p> <p>{{ item.title }}</p>
<p>${{ item.price }}</p> <p>${{ item.price }}</p>
<p class="delete-p"> <p class="delete-p">
{{ $t('user.OriginalPrice') }}{{ item.origin_price }} {{ $t("user.OriginalPrice") }}{{ item.origin_price }}
</p> </p>
<p>{{ $t('user.MemberDays') }}{{ item.vip_days }}</p> <p>{{ $t("user.MemberDays") }}{{ item.vip_days }}</p>
<t-divider class="divider-box" /> <t-divider class="divider-box" />
<p v-for="it in item.describe" :key="it">{{ it }}</p> <p v-for="it in item.describe" :key="it">{{ it }}</p>
<t-button <t-button
@click="payBtn(item.price)" @click="payBtn(item.price)"
class="custom_button_back_border" class="custom_button_back_border"
>{{ $t('user.BuyNow') }}</t-button >{{ $t("user.BuyNow") }}</t-button
> >
</div> </div>
</div> </div>
...@@ -80,29 +80,32 @@ ...@@ -80,29 +80,32 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import PayFox from './payFox.vue'; import PayFox from "./payFox.vue";
import request from '@/utils/request'; import request from "@/utils/request";
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin, Divider as TDivider } from "tdesign-vue-next";
// 用户信息 // 用户信息
const userInfo = useTokenInfo(); const userInfo = useTokenInfo();
// 用户token // 用户token
const Cookie = useCookie('userCookie'); const Cookie = useCookie("userCookie");
// 绑定邀请码输入框 // 绑定邀请码输入框
const BindCode = ref(''); const BindCode = ref("");
// 支付弹窗的打开与关闭 // 支付弹窗的打开与关闭
const hasPayDialog = ref(false); const hasPayDialog = ref(false);
onMounted(() => { onMounted(() => {
getMemberList(); getMemberList();
}); });
// 套餐 // 套餐
const comboData = reactive({ const comboData = reactive<{
list: any[];
price: string;
}>({
list: [], list: [],
// 当前选择的价格 // 当前选择的价格
price: '', price: "",
}); });
// 获取会员列表 // 获取会员列表
const getMemberList = async () => { const getMemberList = async () => {
const res: any = await request.get('/api/vip/list', {}); const res: any = await request.get("/api/vip/list", {});
if (res.code === 0) { if (res.code === 0) {
comboData.list = res.data.list; comboData.list = res.data.list;
} }
...@@ -116,7 +119,7 @@ const payBtn = (price: string) => { ...@@ -116,7 +119,7 @@ const payBtn = (price: string) => {
const BindingInCode = async () => { const BindingInCode = async () => {
try { try {
const res: any = await request.post( const res: any = await request.post(
'/api/user/bind', "/api/user/bind",
{ {
invite_code: BindCode.value, invite_code: BindCode.value,
}, },
...@@ -127,11 +130,11 @@ const BindingInCode = async () => { ...@@ -127,11 +130,11 @@ const BindingInCode = async () => {
} }
); );
if (res.code === 0) { if (res.code === 0) {
MessagePlugin.success('绑定成功'); MessagePlugin.success("绑定成功");
// 修改当前状态 // 修改当前状态
userInfo.value['is_bind'] = 1; userInfo.value["is_bind"] = 1;
} else { } else {
MessagePlugin.warning('绑定失败'); MessagePlugin.warning("绑定失败");
} }
} catch (e) {} } catch (e) {}
}; };
...@@ -142,8 +145,8 @@ const closePayDialog = (value: boolean) => { ...@@ -142,8 +145,8 @@ const closePayDialog = (value: boolean) => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import "@/style/variables.less";
@import '@/style/flex.less'; @import "@/style/flex.less";
.Member-Center { .Member-Center {
height: calc(100vh - 70px); height: calc(100vh - 70px);
overflow-x: auto; overflow-x: auto;
......
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