Skip to content

D
dexfilter-web-nuxt3
Commit 44423901 by lei
Options

1

parent e8094c7a
Showing with 133 additions and 66 deletions
.output.zip
No preview for this file type
app/router.options.ts
......@@ -32,7 +32,7 @@ export default <RouterConfig>{
},
{
name: "tokenDetail",
path: "/:chain/:tb([a-zA-Z0-9_]{10,100})",
path: "/:chain/:tb([a-zA-Z0-9_]{10,152})",
component: () => import("@/views/detail/index.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: false },
},
......
style/layout.less
......@@ -72,12 +72,10 @@
.s-header {
padding: 0 24px;
.t-menu__logo {
img {
cursor: pointer;
}
.logo-text {
margin-left: 18px;
font-size: 12px;
......@@ -85,7 +83,6 @@
line-height: 20px;
}
}
.t-menu {
& > .t-menu__item {
min-width: unset;
......
utils/plugin/PopupTool.ts 0 → 100644
import { Add } from "./PopupTool_Interface";
/**
*
* @param child 子元素
* @param parent 要检查的父元素
* @returns
*/
export function isChildOf(child: HTMLElement, parent: HTMLElement) {
if (child && parent) {
let parentNode = child.parentNode;
while (parentNode) {
if (parent === parentNode) {
return true;
}
parentNode = parentNode.parentNode;
}
}
return false;
}
/**
*
* @param parent
* @returns
*/
// 获取popup元素定位的top和left
export const getPopupFixedSite = (parent: HTMLElement, add?: Add) => {
let params = {
top: 0,
right: 0,
bottom: 0,
left: 0,
};
if (parent) {
let client = parent.getBoundingClientRect();
params.top = client.top + client.height;
params.left = client.left;
// 最后判断是否要增加一定距离--一般定位元素都要下移一点才能看
if (add) {
if (add.top) {
params.top += add.top;
}
if (add.left) {
params.top += add.left;
}
if (add.right) {
params.right = add.right;
}
if (add.bottom) {
params.bottom = add.bottom;
}
}
}
return params;
};
utils/plugin/PopupTool_Interface.ts 0 → 100644
export interface Add {
top?: number;
right?: number;
bottom?: number;
left?: number;
}
views/analysis/index.vue
......@@ -121,6 +121,7 @@ import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { webLogo } from "@/constants/logo";
import { useI18n } from "vue-i18n";
import { Row as TRow, Col as TCol } from "tdesign-vue-next";
import FixedJoinUs from "@/views/CustomComponent/FixedJoinUs.vue";
const theme = useCurTheme();
const { locale } = useI18n();
// 初始化折线图
......
views/detail/index.vue
......@@ -50,30 +50,31 @@
</template>
<script setup lang="ts">
import MyLayout from '@/views/layout/layout.vue';
import HistoryList from '@/views/token/HistoryList.vue';
import RightDetail from '@/views/token/RightDetail.vue';
import { ArrowUpIcon, ArrowDownIcon } from 'tdesign-icons-vue-next';
import { DataFeed, Widget } from '@/utils/tradingview';
import request from '@/utils/request';
import { WebS } from '@/utils/TokenTrans';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
import { webLogo } from '@/constants/logo';
import MyLayout from "@/views/layout/layout.vue";
import HistoryList from "@/views/token/HistoryList.vue";
import RightDetail from "@/views/token/RightDetail.vue";
import { ArrowUpIcon, ArrowDownIcon } from "tdesign-icons-vue-next";
import { DataFeed, Widget } from "@/utils/tradingview";
import request from "@/utils/request";
import { WebS } from "@/utils/TokenTrans";
import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { webLogo } from "@/constants/logo";
import FixedJoinUs from "@/views/CustomComponent/FixedJoinUs.vue";
const route = useRoute();
const tb = ref(route.params.tb + '');
const tb = ref(route.params.tb + "");
const chain = useChain();
const chartContainer = ref(null);
useHead({
title: `Dexfilter | ${tb.value}`,
script: [
{
src: '/charting_library/charting_library.standalone2.js',
src: "/charting_library/charting_library.standalone2.js",
},
],
link: [webLogo],
meta: [
{
name: 'description',
name: "description",
content: `Dexfilter-${tb.value}-实时的K线平台`,
},
],
......@@ -81,22 +82,22 @@ useHead({
// 当前主题
const mode = useCurTheme();
const currentPath = ref(route.params.chain + '');
const currentPath = ref(route.params.chain + "");
// 先取出对应链的接口id
let Obj = filterChainObj('name', currentPath.value.toUpperCase());
let Obj = filterChainObj("name", currentPath.value.toUpperCase());
currentPath.value = Obj.value;
const CurrentKPrice = useCurrentKLinePrice();
// token---接口得到
const token = ref('');
const token = ref("");
// symbol--接口
const symbol = ref('');
const symbol = ref("");
// r24h--接口
const r24h = ref(null);
// k线价格精度
const KPirce = ref();
// mt---是否主流币
const mt = ref('');
const PoolAddress = ref('');
const mt = ref("");
const PoolAddress = ref("");
let datafeed = null;
let widget: any = null;
watch(
......@@ -112,11 +113,11 @@ watch(
watch(
() => mode.value,
(v) => {
let mode = '';
if (v === 'light') {
mode = 'Light';
let mode = "";
if (v === "light") {
mode = "Light";
} else {
mode = 'Dark';
mode = "Dark";
}
if (process.client) {
widget.widget.onChartReady(function () {
......@@ -132,7 +133,7 @@ const openInterval = () => {
try {
if (widget?.widget?.onChartReady) {
widget.widget.onChartReady(function () {
widget.widget.changeTheme(mode.value == 'light' ? 'Light' : 'Dark');
widget.widget.changeTheme(mode.value == "light" ? "Light" : "Dark");
});
clearInterval(Interval);
}
......@@ -142,31 +143,31 @@ const openInterval = () => {
}, 100);
};
const drag = () => {
let oBox = document.getElementById('resize-block');
let historyTable = document.getElementById('history-table');
let oBox = document.getElementById("resize-block");
let historyTable = document.getElementById("history-table");
oBox.onmousedown = function (ev) {
var iEvent = ev as MouseEvent;
var startY = iEvent.clientY; //当你第一次单击的时候，储存Y轴的坐标。
var boxH = historyTable.offsetHeight; //存储默认的div的高度。
// 获取表格固钉--当拖动时，隐藏固钉
let Histab: any = document.querySelector(
'.t-table__affixed-header-elm-wrap'
".t-table__affixed-header-elm-wrap"
);
document.getElementById('tv_chart_container').setAttribute('class', 'mask');
document.getElementById("tv_chart_container").setAttribute("class", "mask");
document.onmousemove = function (ev) {
var iEvent = ev as MouseEvent;
historyTable.style.height = boxH - (iEvent.clientY - startY) + 'px';
Histab.style.display = 'none';
historyTable.style.height = boxH - (iEvent.clientY - startY) + "px";
Histab.style.display = "none";
};
document.onmouseup = function () {
document.onmousedown = null;
document.onmousemove = null;
document.getElementById('tv_chart_container').setAttribute('class', '');
document.getElementById("tv_chart_container").setAttribute("class", "");
};
return false;
};
};
const tableHeight = ref('100px');
const tableHeight = ref("100px");
watch(
() => KPirce.value,
(v) => {
......@@ -197,11 +198,11 @@ onMounted(() => {
symbol.value = res.sy;
token.value = res.token;
KPirce.value = res.up;
mt.value = res.p + '';
mt.value = res.p + "";
});
// 开启k线轮询
openInterval();
tableHeight.value = Math.floor((window.innerHeight - 64) * 0.4) + 'px';
tableHeight.value = Math.floor((window.innerHeight - 64) * 0.4) + "px";
nextTick(() => {
drag();
});
......@@ -222,9 +223,9 @@ onBeforeUnmount(() => {
});
const getKLine = (tb) => {
if (!symbol.value) {
symbol.value = 'any';
symbol.value = "any";
}
let symbolName = (symbol.value + '').toLocaleUpperCase();
let symbolName = (symbol.value + "").toLocaleUpperCase();
datafeed = new DataFeed(
{
name: symbol.value,
......@@ -246,8 +247,8 @@ const getPoll = (PoolValue) => {
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
@import '@/style/variables.less';
@import "@/style/flex.less";
@import "@/style/variables.less";
.token-detail-wrapper {
padding: 12px 0 0 12px;
box-sizing: border-box;
......@@ -275,7 +276,7 @@ const getPoll = (PoolValue) => {
height: 100%;
&.mask {
&:after {
content: ' ';
content: " ";
position: absolute;
width: 100%;
height: 100%;
......
views/layout/Header.vue
......@@ -34,6 +34,7 @@ import HomeLogo from "/public/images/svg/header/homeLogoLight.svg";
import HomeLogo2 from "/public/images/svg/header/homeLogoDark.svg";
import { tgUrl } from "@/utils/open";
import ChangeTheme from "@/views/CustomComponent/changeTheme.vue";
import SwitchLanguage from "@/views/CustomComponent/SwitchLanguage.vue";
import { HeadMenu as THeadMenu } from "tdesign-vue-next";
const Search = defineAsyncComponent(() => import("./Search.vue"));
const LoginDropdown = defineAsyncComponent(() => import("./LoginDropdown.vue"));
......
views/login/index.vue
......@@ -51,6 +51,7 @@ import rightLogoLightSvg from "/public/images/svg/login/favicon-light.svg";
import rightLogoDarkSvg from "/public/images/svg/login/rightdarkLogo.svg";
import { webLogo } from "@/constants/logo";
import ChangeTheme from "@/views/CustomComponent/changeTheme.vue";
import SwitchLanguage from "@/views/CustomComponent/SwitchLanguage.vue";
useHead({
title: "Dexfilter | Login",
link: [webLogo],
......
views/token/index.vue
......@@ -31,7 +31,7 @@ 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();
import FixedJoinUs from "@/views/CustomComponent/FixedJoinUs.vue";
const token = ref();
const TbName = ref();
const r24h = ref();
......
views/user/InvitedDialog.vue
......@@ -43,6 +43,7 @@
<script lang="ts" setup>
import { Divider as TDivider } from "tdesign-vue-next";
import comfirmDialog from "@/views/CustomComponent/comfirmDialog.vue";
const props = defineProps({
InvitedVisible: Boolean,
});
......
views/user/PersonalCenter.vue
<template>
<div class="personal-details">
<div class="personal-title">
<h2>{{ $t('user.PersonalInfo') }}</h2>
<h2>{{ $t("user.PersonalInfo") }}</h2>
<div class="personal-userinfo">
<div class="head-portrait">
<img src="/images/svg/header/toux.svg" alt="tx" />
</div>
<div class="replace-box">
<t-button class="custom_button_back_border">{{
$t('user.ChangeAvatar')
$t("user.ChangeAvatar")
}}</t-button>
<p>JPEG、PNG 或 GIF，并且不能超过 10MB。</p>
</div>
......@@ -16,16 +16,16 @@
</div>
<div class="box-line">
<div class="redact-data" v-show="hasChangePass">
<h2>{{ $t('user.EditProfile') }}</h2>
<h2>{{ $t("user.EditProfile") }}</h2>
<div class="redact-item">
<p>{{ $t('user.userName') }}</p>
<p>{{ $t("user.userName") }}</p>
<t-input
type="text"
:maxlength="30"
v-model="user_name"
:placeholder="$t('user.enterUserName')"
/>
<p>{{ $t('user.WalletAddress') }}</p>
<p>{{ $t("user.WalletAddress") }}</p>
<div class="money-item">
<t-input
:disabled="true"
......@@ -38,22 +38,22 @@
<CopySvg></CopySvg>
</t-tooltip>
</div>
<p class="warm-text">{{ $t('user.updateWallet') }}</p>
<p class="warm-text">{{ $t("user.updateWallet") }}</p>
</div>
<h2>{{ $t('user.Password') }}</h2>
<h2>{{ $t("user.Password") }}</h2>
<div class="password-btn">
<t-button
@click="hasChangePass = false"
class="custom_button_back_border"
>{{ $t('user.changePwd') }}</t-button
>{{ $t("user.changePwd") }}</t-button
>
<p>{{ $t('user.Increase') }}</p>
<p>{{ $t("user.Increase") }}</p>
</div>
<div class="change-btn">
<t-button
@click="confirmDialog = true"
class="custom_button_back_border"
>{{ $t('user.KeepChanges') }}</t-button
>{{ $t("user.KeepChanges") }}</t-button
>
</div>
</div>
......@@ -67,20 +67,21 @@
@comfimawal="comfimawal"
@closeComfrimDialog="closeComfrimDialog"
>
<template #header> {{ $t('user.ConfirmChangeName') }}? </template>
<template #header> {{ $t("user.ConfirmChangeName") }}? </template>
</comfirmDialog>
</div>
</template>
<script lang="ts" setup>
import CopySvg from '/public/images/svg/header/copy.svg';
import ChangePassword from './ChangePassword.vue';
import request from '@/utils/request';
import { MessagePlugin } from 'tdesign-vue-next';
import CopySvg from "/public/images/svg/header/copy.svg";
import comfirmDialog from "@/views/CustomComponent/comfirmDialog.vue";
import ChangePassword from "./ChangePassword.vue";
import request from "@/utils/request";
import { MessagePlugin } from "tdesign-vue-next";
const route = useRoute();
const userInfo = useTokenInfo();
const Cookie = useCookie('userCookie');
const user_name = ref('');
const wallet_address = ref('');
const Cookie = useCookie("userCookie");
const user_name = ref("");
const wallet_address = ref("");
const confirmDialog = ref(false);
// 修改密码模块的显示隐藏
const hasChangePass = ref(true);
......@@ -98,7 +99,7 @@ const backPersonal = (value: boolean) => {
onMounted(() => {
// 此时routename还没有切换，等待一毫秒
setTimeout(() => {
if (route.name === 'personal' && Object.keys(userInfo.value).length) {
if (route.name === "personal" && Object.keys(userInfo.value).length) {
user_name.value = userInfo.value.name;
}
}, 10);
......@@ -118,7 +119,7 @@ watch(
// 修改用户名
const changeUserName = async () => {
const res: any = await request.post(
'/api/user/edit',
"/api/user/edit",
{
name: user_name.value,
},
......@@ -129,7 +130,7 @@ const changeUserName = async () => {
}
);
if (res.code === 0) {
MessagePlugin.success('修改成功！');
MessagePlugin.success("修改成功！");
// 同步修改左上角的用户信息
userInfo.value.name = user_name.value;
} else if (res.code === 2) {
......@@ -139,8 +140,8 @@ const changeUserName = async () => {
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
@import "@/style/variables.less";
@import "@/style/flex.less";
.personal-details {
width: calc(100vw - 410px);
.box-line {
......
views/user/invitation.vue
......@@ -140,6 +140,7 @@ import RecordDialog from "./recordDialog.vue";
import request from "@/utils/request";
import useCopy from "@/hooks/useCopy";
import { InputNumber as TInputNumber } from "tdesign-vue-next";
import QrCodeDialog from "@/views/CustomComponent/QrCodeDialog.vue";
const { doCopy } = useCopy();
const Cookie = useCookie("userCookie");
const Imgs = {
......
views/user/recordDialog.vue
......@@ -69,6 +69,7 @@
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { Table as TTable } from "tdesign-vue-next";
import QrCodeDialog from "@/views/CustomComponent/QrCodeDialog.vue";
const { t } = useI18n();
const props = defineProps({
recordVisible: Boolean,
......
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