Skip to content

D
dexfilter-web-nuxt3
Commit 8fbd0c91 by haojie
Options

1

parent 276de7fc
Showing with 563 additions and 319 deletions
public/images/svg/filter/CloseScrollToken.svg 0 → 100644
<svg width="10" height="45" viewBox="0 0 10 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 -1C5.52285 -1 10 3.47715 10 9H8C8 4.58172 4.41828 1 0 1V-1ZM10 36C10 41.5228 5.52285 46 0 46V44C4.41828 44 8 40.4183 8 36H10ZM0 45V0V45ZM0 -1C5.52285 -1 10 3.47715 10 9V36C10 41.5228 5.52285 46 0 46V44C4.41828 44 8 40.4183 8 36V9C8 4.58172 4.41828 1 0 1V-1Z" fill="#DCDCDC" mask="url(#path-1-inside-1_3031_9687)"/>
<path d="M4.4875 16.5622C4.56568 16.7243 4.60905 16.9361 4.60905 17.1559C4.60905 17.3758 4.56568 17.5876 4.4875 17.7497L1.9875 22.4997L4.4875 27.2497C4.53368 27.4157 4.55065 27.6055 4.53591 27.7912C4.52118 27.977 4.47551 28.1488 4.40562 28.2816C4.33572 28.4144 4.24527 28.5012 4.14753 28.5292C4.04979 28.5572 3.9499 28.5249 3.8625 28.4372L1.0125 23.1291C0.926767 22.9594 0.877693 22.7348 0.875 22.4997C0.876078 22.2674 0.925514 22.0454 1.0125 21.8822L3.83125 16.5622C3.87424 16.48 3.92536 16.4147 3.98167 16.3702C4.03799 16.3257 4.09838 16.3027 4.15938 16.3027C4.22037 16.3027 4.28076 16.3257 4.33708 16.3702C4.39339 16.4147 4.44451 16.48 4.4875 16.5622Z" fill="#838383"/>
<path d="M6.9875 16.5622C7.06568 16.7243 7.10905 16.9361 7.10905 17.1559C7.10905 17.3758 7.06568 17.5876 6.9875 17.7497L4.4875 22.4997L6.9875 27.2497C7.03368 27.4157 7.05065 27.6055 7.03591 27.7912C7.02118 27.977 6.97551 28.1488 6.90562 28.2816C6.83572 28.4144 6.74527 28.5012 6.64753 28.5292C6.54979 28.5572 6.4499 28.5249 6.3625 28.4372L3.5125 23.1291C3.42677 22.9594 3.37769 22.7348 3.375 22.4997C3.37608 22.2674 3.42551 22.0454 3.5125 21.8822L6.33125 16.5622C6.37424 16.48 6.42536 16.4147 6.48167 16.3702C6.53799 16.3257 6.59838 16.3027 6.65938 16.3027C6.72037 16.3027 6.78076 16.3257 6.83708 16.3702C6.89339 16.4147 6.94451 16.48 6.9875 16.5622Z" fill="#838383"/>
</svg>
\ No newline at end of file
public/images/svg/selectChain/bsc.svg
<svg width="28" height="31" viewBox="0 0 28 31" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.6898 0L5.46631 4.74687L8.48958 6.49992L13.6898 3.50688L18.8901 6.49992L21.9141 4.74687L13.6898 0ZM18.8909 8.97915L21.9134 10.733V14.2406L16.7131 17.2337V23.2198L13.6906 24.9736L10.6666 23.2198V17.2337L5.46631 14.2406V10.733L8.48958 8.97915L13.6898 11.973L18.8901 8.97915H18.8909Z" fill="#F0B90B"/> <path d="M21.6684 13.661C20.1993 19.5539 14.2307 23.1402 8.33711 21.6707C2.44597 20.2015 -1.14034 14.2326 0.329434 8.34017C1.79792 2.44661 7.76649 -1.13997 13.6583 0.329158C19.5515 1.79829 23.1376 7.76788 21.6683 13.6611L21.6684 13.661H21.6684Z" fill="#F3BA2F"/>
<path d="M21.9144 16.7191V20.2275L18.8911 21.9805V18.4737L21.9136 16.7198L21.9144 16.7191Z" fill="#F0B90B"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.9998 6.98166L8.15151 9.82992L6.49424 8.17259L10.9998 3.66699L15.5069 8.17394L13.8496 9.83127L10.9998 6.98166ZM5.32389 9.3427L3.6665 11.0003L5.32378 12.6574L6.98117 11L5.32389 9.3427ZM8.15145 12.1708L10.9998 15.019L13.8495 12.1694L15.5077 13.8259L15.5069 13.8268L10.9998 18.3337L6.49424 13.8281L6.49189 13.8257L8.15145 12.1708ZM16.6759 9.34364L15.0185 11.001L16.6758 12.6583L18.3332 11.0009L16.6759 9.34364Z" fill="white"/>
<path d="M18.86 24.459L24.0602 21.4659V15.4798L27.0843 13.726V23.2198L18.8607 27.9666V24.459H18.86ZM24.061 9.49373L21.0369 7.73991L24.061 5.98608L27.0835 7.73991V11.2468L24.061 13.0006V9.49373ZM10.6667 29.2361V25.73L13.6899 27.4838L16.714 25.73V29.2369L13.6899 30.9907L10.6674 29.2369L10.6667 29.2361ZM8.48969 21.9798L5.46641 20.2275V16.7198L8.48969 18.4737V21.9805V21.9798ZM13.6899 9.49373L10.6674 7.73991L13.6899 5.98608L16.714 7.73991L13.6899 9.49373ZM6.34294 7.73991L3.32044 9.49373V13.0006L0.296387 11.2468V7.73991L3.31966 5.98608L6.34294 7.73991Z" fill="#F0B90B"/> <path d="M12.6809 10.9991H12.6816L11 9.31738L9.75703 10.56V10.56L9.61424 10.7029L9.31973 10.9974L9.31738 10.9997L9.31973 11.0021L11 12.6826L12.6817 11.0009L12.6826 10.9999L12.681 10.9991" fill="white"/>
<path d="M0.296387 13.726L3.31966 15.4798V21.4659L8.51991 24.459V27.9666L0.296387 23.219V13.7252V13.726Z" fill="#F0B90B"/>
</svg> </svg>
\ No newline at end of file
views/CustomComponent/CheckBox2.vue 0 → 100644
<template>
<div :class="['custom-check-box', propsClass]">
<button
v-for="item in options"
:key="item.value"
:class="[
'check-box-button',
isSelected(item.value) ? 'check-box-active' : '',
]"
@click="ChoseCurBtn(item.value)"
>
{{ item.label }}
</button>
</div>
</template>
<script lang="ts" setup>
const props = withDefaults(
defineProps<{
options?: any[];
modelValue: any[];
class?: string;
}>(),
{
options: [],
class: '',
}
);
const emit = defineEmits(['update:modelValue']);
const propsClass = ref(props.class);
const ChoseCurBtn = (value: string) => {
const { modelValue } = props;
let list: any = JSON.parse(JSON.stringify(modelValue));
if (!modelValue.length) {
list.push(value);
} else {
// 循环当前已有的列表,判断是插入数据还是删除数据
let index = list.findIndex((item: any) => item == value);
if (index == -1) {
// 未找到-插入
list.push(value);
} else {
list.splice(index, 1);
}
}
emit('update:modelValue', list);
};
// 判断是否选中
const isSelected = (value: string) => {
const { modelValue } = props;
let index = modelValue.findIndex((item: any) => item == value);
if (index == -1) {
// 不存在
return false;
}
// 存在
return true;
};
</script>
<style lang="less">
.custom-check-box {
white-space: nowrap;
.check-box-button {
border: none;
height: 28px;
background: none;
font-family: 'Regular';
width: 104px;
border-radius: 16px;
cursor: pointer;
outline: none;
font-size: 12px;
}
.check-box-active {
background: var(--td--main-btn-color-1);
color: #fff;
}
}
</style>
views/token/FilterBtn/index.less → views/CustomComponent/radio.vue
.custom-table-filter-btns { <template>
<div class="custom-radio">
<button
class="custom-radio-button"
:class="{
'radio-button-active': currentBtn == item.value,
}"
v-for="item in options"
:key="item.value"
@click="btnChange(item)"
>
{{ item.label }}
</button>
</div>
</template>
<script lang="ts" setup>
const props = withDefaults(
defineProps<{
options?: any[];
modelValue: string;
}>(),
{
options: [],
}
);
const emit = defineEmits(['update:modelValue', 'change']);
const currentBtn = ref(props.modelValue);
const btnChange = (item: any) => {
currentBtn.value = item.value;
// 请求接口
emit('update:modelValue', item.value);
emit('change', item.value);
};
</script>
<style lang="less">
.custom-radio {
display: flex; display: flex;
align-items: center; align-items: center;
height: 44px; height: 44px;
...@@ -6,22 +43,28 @@ ...@@ -6,22 +43,28 @@
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
background-color: var(--td--right-back-color-2); background-color: var(--td--right-back-color-2);
.table-filter-btn { & > :not(:first-child) {
height: 30px; margin-left: 6px;
}
.custom-radio-button {
height: 32px;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
background: var(--new-background-2); background: var(--new-background-2);
color: var(--new-color-1); color: var(--new-color-1);
--ripple-color: none !important;
transition: all 0.3s; transition: all 0.3s;
font-family: 'Regular'; font-family: 'Regular';
cursor: pointer;
padding: 0 12px;
display: flex;
align-items: center;
&:hover { &:hover {
background: var(--new-background-2); background: var(--new-background-2);
} }
} }
.active { .radio-button-active {
background: var(--new-background-3); background: var(--new-background-3);
color: var(--new-color-2); color: var(--new-color-2);
font-weight: 500; font-weight: 500;
...@@ -32,3 +75,4 @@ ...@@ -32,3 +75,4 @@
} }
} }
} }
</style>
views/detail/index.vue
...@@ -5,12 +5,8 @@ ...@@ -5,12 +5,8 @@
<template #content> <template #content>
<div class="token-detail-wrapper"> <div class="token-detail-wrapper">
<div class="left-wrapper"> <div class="left-wrapper">
<div id="tv_chart_container" ref="chartContainer"></div> <div class="custom-tv">
<div <div id="tv_chart_container" ref="chartContainer"></div>
class="history-table narrow-scrollbar"
:style="{ height: tableHeight }"
id="history-table"
>
<div class="resize-block" id="resize-block"> <div class="resize-block" id="resize-block">
<div class="resize-icon"> <div class="resize-icon">
<arrow-up-icon></arrow-up-icon> <arrow-up-icon></arrow-up-icon>
...@@ -18,6 +14,12 @@ ...@@ -18,6 +14,12 @@
<arrow-down-icon></arrow-down-icon> <arrow-down-icon></arrow-down-icon>
</div> </div>
</div> </div>
</div>
<div
class="history-table narrow-scrollbar"
:style="{ height: tableHeight }"
id="history-table"
>
<HistoryList <HistoryList
:mt="mt" :mt="mt"
:currentPath="currentPath" :currentPath="currentPath"
...@@ -32,6 +34,7 @@ ...@@ -32,6 +34,7 @@
scene="detail" scene="detail"
:token="token" :token="token"
:tb="tb" :tb="tb"
:up="KPirce"
:r24h="r24h" :r24h="r24h"
:currentPath="currentPath" :currentPath="currentPath"
@update:setPool="getPoll" @update:setPool="getPoll"
...@@ -88,7 +91,7 @@ const token = ref(''); ...@@ -88,7 +91,7 @@ const token = ref('');
// symbol--接口 // symbol--接口
const symbol = ref(''); const symbol = ref('');
// r24h--接口 // r24h--接口
const r24h = ref(''); const r24h = ref(null);
// k线价格精度 // k线价格精度
const KPirce = ref(); const KPirce = ref();
// mt---是否主流币 // mt---是否主流币
...@@ -96,34 +99,10 @@ const mt = ref(''); ...@@ -96,34 +99,10 @@ const mt = ref('');
const PoolAddress = ref(''); const PoolAddress = ref('');
let datafeed = null; let datafeed = null;
let widget: any = null; let widget: any = null;
onBeforeMount(() => {
if (currentPath.value) {
chain.value = currentPath.value;
}
request
.get(`/v1/${currentPath.value}/getConfig`, {
params: {
tag: WebS(tb.value),
},
})
.then((res: any) => {
// 当url为token时
if (res.is_token) {
tb.value = res.pair;
}
CurrentKPrice.value = res.up;
//
r24h.value = res.r24h + '';
symbol.value = res.sy;
token.value = res.token;
KPirce.value = res.up;
mt.value = res.p + '';
});
});
watch( watch(
() => PoolAddress.value, () => PoolAddress.value,
(v) => { (v) => {
if (v) { if (v && process.client) {
datafeed.clearIntervalGetBars(); datafeed.clearIntervalGetBars();
datafeed = null; datafeed = null;
getKLine(v); getKLine(v);
...@@ -139,9 +118,11 @@ watch( ...@@ -139,9 +118,11 @@ watch(
} else { } else {
mode = 'Dark'; mode = 'Dark';
} }
widget.widget.onChartReady(function () { if (process.client) {
widget.widget.changeTheme(mode); widget.widget.onChartReady(function () {
}); widget.widget.changeTheme(mode);
});
}
} }
); );
let Interval = null; let Interval = null;
...@@ -195,6 +176,28 @@ watch( ...@@ -195,6 +176,28 @@ watch(
} }
); );
onMounted(() => { onMounted(() => {
if (currentPath.value) {
chain.value = currentPath.value;
}
request
.get(`/v1/${currentPath.value}/getConfig`, {
params: {
tag: WebS(tb.value),
},
})
.then((res: any) => {
// 当url为token时
if (res.is_token) {
tb.value = res.pair;
}
CurrentKPrice.value = res.up;
//
r24h.value = res.r24h;
symbol.value = res.sy;
token.value = res.token;
KPirce.value = res.up;
mt.value = res.p + '';
});
// 开启k线轮询 // 开启k线轮询
openInterval(); openInterval();
tableHeight.value = Math.floor((window.innerHeight - 64) * 0.4) + 'px'; tableHeight.value = Math.floor((window.innerHeight - 64) * 0.4) + 'px';
...@@ -236,62 +239,57 @@ const getPoll = (PoolValue) => { ...@@ -236,62 +239,57 @@ const getPoll = (PoolValue) => {
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/flex.less'; @import '@/style/flex.less';
.token-detail-wrapper { .token-detail-wrapper {
padding: 12px 0 0 12px;
box-sizing: border-box; box-sizing: border-box;
padding: 6px 0 0 6px;
position: relative; position: relative;
height: calc(100vh - 70px); height: calc(100vh - 70px);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
background: var(--main-theme-color-2);
.left-wrapper { .left-wrapper {
width: calc(100vw - 380px); width: calc(100vw - 380px);
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-right: 12px; margin-right: 12px;
#tv_chart_container { .custom-tv {
position: relative;
flex: 1; flex: 1;
min-height: 200px; min-height: 200px;
position: relative;
// height: calc((100vh - 70px) * 0.4); // height: calc((100vh - 70px) * 0.4);
&.mask { border-radius: 10px;
&:after { overflow: hidden;
content: ' '; #tv_chart_container {
position: absolute; height: 100%;
width: 100%; &.mask {
height: 100%; &:after {
top: 0; content: ' ';
left: 0; position: absolute;
z-index: 2; width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
} }
} }
}
.history-table {
z-index: 10;
min-height: 90px;
position: relative;
background-color: var(--td-bg-color-container);
display: flex;
height: calc(33vh + 23px) !important;
.resize-block { .resize-block {
position: absolute; position: absolute;
user-select: none; user-select: none;
width: 100%; width: 100%;
height: 15px; height: 15px;
top: -15px; bottom: 2px;
left: 0px; left: 0px;
z-index: 90;
cursor: row-resize; cursor: row-resize;
z-index: 100;
.resize-icon { .resize-icon {
width: 100%; width: 100%;
position: relative; position: relative;
top: 0px;
text-align: center; text-align: center;
flex-direction: column; flex-direction: column;
.da(); .da();
.t-icon { .t-icon {
color: var(--td-brand-color-6); color: var(--td-brand-color-6);
z-index: 200; z-index: 1000;
} }
.line { .line {
width: 100%; width: 100%;
...@@ -301,6 +299,17 @@ const getPoll = (PoolValue) => { ...@@ -301,6 +299,17 @@ const getPoll = (PoolValue) => {
} }
} }
} }
.history-table {
margin-top: 12px;
z-index: 10;
min-height: 90px;
position: relative;
background-color: var(--td-bg-color-container);
display: flex;
height: calc(33vh + 23px);
border-radius: 10px;
overflow: hidden;
}
} }
.right-wrapper { .right-wrapper {
flex: 1; flex: 1;
......
views/layout/Header.vue
...@@ -54,6 +54,7 @@ const route = useRoute(); ...@@ -54,6 +54,7 @@ const route = useRoute();
.join-us { .join-us {
margin-left: 1vw; margin-left: 1vw;
color: var(--td-Search-info-color-1); color: var(--td-Search-info-color-1);
white-space: nowrap;
.dja(); .dja();
text-decoration: none; text-decoration: none;
span { span {
......
views/layout/rollToken.vue
<template> <template>
<div class="header-scroll_box-fa"> <div>
<div class="header-scroll_box" @mouseenter="stopAn" @mouseleave="leaveAn"> <span class="close-scroll_box" @click="changeScrollBox">
<div <CloseScrollToken></CloseScrollToken>
class="scroll-box-fa" </span>
ref="scroll_box_1" <div
:style="{ v-show="!ScrollList.list.length"
'-webkit-animation': animationSpeed, class="custom-substitute-scroll"
animation: animationSpeed, ></div>
}" <transition name="scroll-change">
> <div class="header-scroll_box-fa" v-show="srcollType == 'open'">
<div <div
class="scroll-token-box" class="header-scroll_box"
v-for="item in ScrollList.list" @mouseenter="stopAn"
:key="item.title" @mouseleave="leaveAn"
> >
<div class="left-img"> <div
<img :src="item.img" alt="" /> class="scroll-box-fa"
<span class="span-1">{{ item.sy }}</span> ref="scroll_box_1"
:style="{
'-webkit-animation': animationSpeed,
animation: animationSpeed,
}"
>
<div
class="scroll-token-box"
v-for="item in ScrollList.list"
:key="item.title"
>
<div class="left-img">
<img :src="item.img" alt="" />
<span class="span-1">{{ item.sy }}</span>
</div>
<div class="right-info">
<span class="span-3"> $ </span>
<span class="span-2">{{ item.up }}</span>
</div>
</div>
</div> </div>
<div class="right-info"> <div
<span class="span-3"> $ </span> class="scroll-box-fa"
<span class="span-2">{{ item.up }}</span> ref="scroll_box_2"
:style="{
'-webkit-animation': animationSpeed,
animation: animationSpeed,
}"
>
<div
class="scroll-token-box"
v-for="item in ScrollList.list"
:key="item.title"
>
<div class="left-img">
<img :src="item.img" alt="" />
<span class="span-1">{{ item.sy }}</span>
</div>
<div class="right-info">
<span class="span-3"> $ </span>
<span class="span-2">{{ item.up }}</span>
</div>
</div>
</div> </div>
</div> </div>
<ScrollTest></ScrollTest>
</div> </div>
<div </transition>
class="scroll-box-fa"
ref="scroll_box_2"
:style="{
'-webkit-animation': animationSpeed,
animation: animationSpeed,
}"
>
<div
class="scroll-token-box"
v-for="item in ScrollList.list"
:key="item.title"
>
<div class="left-img">
<img :src="item.img" alt="" />
<span class="span-1">{{ item.sy }}</span>
</div>
<div class="right-info">
<span class="span-3"> $ </span>
<span class="span-2">{{ item.up }}</span>
</div>
</div>
</div>
</div>
<ScrollTest></ScrollTest>
</div> </div>
</template> </template>
...@@ -56,9 +71,12 @@ ...@@ -56,9 +71,12 @@
import request from '@/utils/request'; import request from '@/utils/request';
import { publicTokenImg } from '@/constants/UnifiedManagementChain'; import { publicTokenImg } from '@/constants/UnifiedManagementChain';
import ScrollTest from './ScrollTest.vue'; import ScrollTest from './ScrollTest.vue';
import CloseScrollToken from '/public/images/svg/filter/CloseScrollToken.svg';
const ScrollList = reactive({ const ScrollList = reactive({
list: [], list: [],
}); });
// 滚动代币当前状态--默认展开
const srcollType = ref('open');
// 获取当前链 // 获取当前链
const chain = useChain(); const chain = useChain();
watch( watch(
...@@ -74,6 +92,13 @@ onMounted(() => { ...@@ -74,6 +92,13 @@ onMounted(() => {
getPublicToken(); getPublicToken();
} }
}); });
const changeScrollBox = () => {
if (srcollType.value == 'open') {
srcollType.value = 'close';
} else {
srcollType.value = 'open';
}
};
// 获取滚动代币 // 获取滚动代币
const getPublicToken = async () => { const getPublicToken = async () => {
try { try {
...@@ -126,11 +151,12 @@ const leaveAn = () => { ...@@ -126,11 +151,12 @@ const leaveAn = () => {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
@import '@/style/variables.less'; @import '@/style/variables.less';
@import '@/style/flex.less'; @import '@/style/flex.less';
.header-scroll_box-fa { .header-scroll_box-fa {
padding-bottom: 12px; user-select: none;
height: 57px;
.header-scroll_box { .header-scroll_box {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
...@@ -185,6 +211,15 @@ const leaveAn = () => { ...@@ -185,6 +211,15 @@ const leaveAn = () => {
} }
} }
} }
.custom-substitute-scroll {
height: 57px;
}
.close-scroll_box {
position: fixed;
top: 82px;
left: 0;
cursor: pointer;
}
</style> </style>
<style lang="less"> <style lang="less">
...@@ -198,4 +233,40 @@ const leaveAn = () => { ...@@ -198,4 +233,40 @@ const leaveAn = () => {
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
} }
.scroll-change-leave-active {
// ok
transition: all 0.7s ease-in-out;
}
.scroll-change-enter-active {
//
animation: move 0.7s ease-in;
}
.scroll-change-leave {
opacity: 1;
height: 57px;
}
.scroll-change-leave-to {
opacity: 0;
height: 0px;
}
// ------------
// .scroll-change-enter {
// opacity: 0;
// height: 0px;
// }
// .scroll-change-enter-to {
// opacity: 1;
// height: 57px;
// }
@keyframes move {
from {
height: 0px;
opacity: 0;
}
to {
height: 57px;
opacity: 1;
}
}
</style> </style>
views/token/CustomTokenList.vue
<template> <template>
<div class="custom-token-list"> <div class="custom-token-list">
<FilterBtns @filterChange="filterChange"></FilterBtns> <CustomRadio
:options="btns"
v-model="currentBtn"
@change="onFilterChange"
></CustomRadio>
<div <div
class="custom-affixed-head" class="custom-affixed-head"
ref="affixedHeadRef" ref="affixedHeadRef"
...@@ -115,9 +119,19 @@ ...@@ -115,9 +119,19 @@
> >
<td align="center" class="index">{{ item.index }}</td> <td align="center" class="index">{{ item.index }}</td>
<td class="tn"> <td class="tn">
<div class="name-block"> <div class="token-name">
<div class="tn">{{ item.tn }}</div> <template v-if="item.swap">
<div class="symbol">{{ item.sy }}/{{ item.ps }}</div> {{ item.swap }}
</template>
<template v-else>
<div class="avatar-icon">
{{ getTokenInitials(item.tn) }}
</div>
</template>
<div class="name-block">
<div class="tn">{{ item.tn }}</div>
<div class="symbol">{{ item.sy }}/{{ item.ps }}</div>
</div>
</div> </div>
</td> </td>
<td class="up fs" align="center">{{ item.n_up }}</td> <td class="up fs" align="center">{{ item.n_up }}</td>
...@@ -198,13 +212,10 @@ import { filterChainObj } from '@/constants/UnifiedManagementChain'; ...@@ -198,13 +212,10 @@ import { filterChainObj } 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 SortSvg from '/public/images/svg/table/sort.svg';
import UpSvg from '/public/images/svg/table/up.svg';
import DownSvg from '/public/images/svg/table/down.svg';
import { webLogo } from '@/constants/logo'; import { webLogo } from '@/constants/logo';
import FilterBtns from './FilterBtn';
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';
const route = useRoute(); const route = useRoute();
const LoadHead = ref(false); const LoadHead = ref(false);
const CustomHead = ref(null); const CustomHead = ref(null);
...@@ -212,8 +223,6 @@ const CustomTable = ref(null); ...@@ -212,8 +223,6 @@ const CustomTable = ref(null);
const BodyscrollDom = ref(null); const BodyscrollDom = ref(null);
const loading = ref(false); const loading = ref(false);
const pageNum = ref(1); const pageNum = ref(1);
// 当前请求哪个接口
const currentRequestType = ref(1);
// 当前链 // 当前链
const chain = useChain(); const chain = useChain();
const { t } = useI18n(); const { t } = useI18n();
...@@ -246,8 +255,6 @@ const colGroupList = reactive({ ...@@ -246,8 +255,6 @@ const colGroupList = reactive({
}); });
// 右侧数据 // 右侧数据
const RightInfo = useCurrentRightInfo(); const RightInfo = useCurrentRightInfo();
// 新接口当前参数
const NewParams = ref({});
// 吸顶表头左右跟随滑动 // 吸顶表头左右跟随滑动
const affixedHead = reactive({ const affixedHead = reactive({
left: '', left: '',
...@@ -298,6 +305,51 @@ const SortOptions = reactive({ ...@@ -298,6 +305,51 @@ const SortOptions = reactive({
status: false, status: false,
}, },
}); });
const currentBtn = ref('default');
const btns = computed(() => [
{
label: t('filter.pairs'),
value: 'default',
},
{
label: t('filter.updated'),
value: 'new',
},
{
label: t('filter.gainers'),
value: 'max-up',
},
{
label: t('filter.losers'),
value: 'max-down',
},
{
label: t('filter.r24hVolume'),
value: 'txn',
},
]);
const onFilterChange = (value: string) => {
if (value == 'new') {
GlbFilter.value.nt = 1;
} else if (value == 'default') {
GlbFilter.value.nt = 0;
}
// 永远请求第一页
pageNum.value = 1;
if (value == 'txn') {
GlbFilter.value.date_orderby = 'txn';
GlbFilter.value.sort = 'desc';
} else if (value == 'max-up') {
// 最大涨幅
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
GlbFilter.value.sort = 'desc';
} else if (value == 'max-down') {
// 最大跌幅
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
GlbFilter.value.sort = 'asc';
}
getTableList();
};
// 获取涨跌幅 // 获取涨跌幅
const getUpDown = (value: string) => { const getUpDown = (value: string) => {
if (value && value[0] == '-') { if (value && value[0] == '-') {
...@@ -322,6 +374,13 @@ const getTableWidth = () => { ...@@ -322,6 +374,13 @@ const getTableWidth = () => {
affixedHead.width = width + 'px'; affixedHead.width = width + 'px';
} }
}; };
// 获取token首字母
const getTokenInitials = (value: string) => {
if (value) {
return value[0];
}
return '';
};
// 排序事件 // 排序事件
const submitSort = ({ sort, field }: any) => { const submitSort = ({ sort, field }: any) => {
// 先将其他th的筛选关闭 // 先将其他th的筛选关闭
...@@ -352,29 +411,6 @@ const getMinWidth = () => { ...@@ -352,29 +411,6 @@ const getMinWidth = () => {
affixedTableWidth.value = CustomHead.value.clientWidth + 'px'; affixedTableWidth.value = CustomHead.value.clientWidth + 'px';
} }
}; };
const filterChange = (value: number, txn: string) => {
pageNum.value = 1;
currentRequestType.value = value;
if (value == 1) {
if (txn == 'txn') {
GlbFilter.value.date_orderby = 'txn';
GlbFilter.value.sort = 'desc';
} else if (txn == 'max-up') {
// 最大涨幅
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
GlbFilter.value.sort = 'desc';
} else if (txn == 'max-down') {
// 最大跌幅
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
GlbFilter.value.sort = 'asc';
}
// 旧接口
getTableList();
} else {
NewParams.value = JSON.parse(JSON.stringify({}));
getNewTableList();
}
};
// 表格数据过滤方法 // 表格数据过滤方法
const TableFilter = (result: any) => { const TableFilter = (result: any) => {
if ('list' in result && result.list.length) { if ('list' in result && result.list.length) {
...@@ -416,7 +452,7 @@ const getParams = () => { ...@@ -416,7 +452,7 @@ const getParams = () => {
}; };
// 预取数据 // 预取数据
const { data, refresh } = await useFetch( const { data, refresh } = await useFetch(
() => `http://156.247.9.93:9501/v1${chain.value}/index`, () => `http://156.247.9.93:9501/v1${chain.value}/indexV1`,
{ {
params: getParams(), params: getParams(),
onResponse({ request, response, options }) { onResponse({ request, response, options }) {
...@@ -492,7 +528,7 @@ const getColGroupWidth = () => { ...@@ -492,7 +528,7 @@ const getColGroupWidth = () => {
const getTableList = async () => { const getTableList = async () => {
try { try {
loading.value = true; loading.value = true;
let result: any = await request.get(`/v1${chain.value}/index`, { let result: any = await request.get(`/v1${chain.value}/indexV1`, {
params: getParams(), params: getParams(),
}); });
if (result.list.length) { if (result.list.length) {
...@@ -505,38 +541,10 @@ const getTableList = async () => { ...@@ -505,38 +541,10 @@ const getTableList = async () => {
loading.value = false; loading.value = false;
} }
}; };
// 新接口
const getNewTableList = async () => {
try {
loading.value = true;
let params = JSON.parse(JSON.stringify(GlbFilter.value));
if ('nt' in params) {
delete params.nt;
}
let res: any = await request.get(`/v1${chain.value}/phone/index`, {
params: {
...params,
page: pageNum.value,
...NewParams.value,
},
});
loading.value = false;
TableFilter(res);
} catch (e) {
console.log(e);
loading.value = false;
} finally {
loading.value = false;
}
};
watch( watch(
() => ChangeTable.value, () => ChangeTable.value,
(v) => { (v) => {
if (currentRequestType.value == 1) { getTableList();
getTableList();
} else {
getNewTableList();
}
} }
); );
watch( watch(
...@@ -546,8 +554,6 @@ watch( ...@@ -546,8 +554,6 @@ watch(
pageNum.value = 1; pageNum.value = 1;
// 修改title // 修改title
ChainObj.value = filterChainObj('value', chain.value); ChainObj.value = filterChainObj('value', chain.value);
// 请求数据
currentRequestType.value = 1;
getTableList(); getTableList();
} }
); );
...@@ -579,11 +585,7 @@ const closeListener = (fn: any) => { ...@@ -579,11 +585,7 @@ const closeListener = (fn: any) => {
// 有数据，开启定时器 // 有数据，开启定时器
const Intervalfun = () => { const Intervalfun = () => {
listInterval = setInterval(() => { listInterval = setInterval(() => {
if (currentRequestType.value == 1) { getTableList();
getTableList();
} else {
getNewTableList();
}
}, 10000); }, 10000);
}; };
// 关闭定时器 // 关闭定时器
...@@ -609,11 +611,7 @@ const onCurrentChange = (v) => { ...@@ -609,11 +611,7 @@ const onCurrentChange = (v) => {
pageNum.value = v; pageNum.value = v;
GlbFilter.value.page = v; GlbFilter.value.page = v;
// next(); // next();
if (currentRequestType.value == 1) { getTableList();
getTableList();
} else {
getNewTableList();
}
}; };
const onScrollEvent = () => { const onScrollEvent = () => {
// 获取滚动元素dom // 获取滚动元素dom
...@@ -985,19 +983,35 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -985,19 +983,35 @@ for (let i = 0; i < arr1.length; i++) {
} }
} }
} }
.name-block { .token-name {
.tn { .da();
color: var(--main-theme-color); .avatar-icon {
font-weight: 700; width: 30px;
font-size: 16px; height: 30px;
font-family: 'bold'; border-radius: 50%;
background: #5f6e78;
color: white;
.dja();
font-weight: 500;
font-size: 17px;
font-family: 'Medium';
margin-right: 12px;
} }
.symbol { .name-block {
color: var(--td-search-btn-back-1); .tn {
margin-top: 2px; color: var(--main-theme-color);
font-size: 14px; font-weight: 700;
font-size: 16px;
font-family: 'bold';
}
.symbol {
color: var(--td-search-btn-back-1);
margin-top: 2px;
font-size: 14px;
}
} }
} }
.up { .up {
color: #23ab94; color: #23ab94;
} }
......
views/token/FilterBtn/index.tsx deleted 100644 → 0
import { defineComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import './index.less';
export default defineComponent({
emits: ['filterChange'],
setup(props, { emit }) {
const { t } = useI18n();
const currentBtn = ref('default');
// 筛选条件
const GlbFilter = useCurFilter();
const btns = computed(() => {
return [
{
label: t('filter.pairs'),
value: 'default',
type: 1,
},
{
label: t('filter.updated'),
value: 'new',
type: 1,
},
{
label: t('filter.gainers'),
value: 'max-up',
type: 1,
},
{
label: t('filter.losers'),
value: 'max-down',
type: 1,
},
{
label: t('filter.r24hVolume'),
value: 'txn',
type: 1,
},
{
label: 'Coingecko',
value: 'Coingecko',
type: 2,
},
{
label: 'Coinmarketcap',
value: 'Coinmarketcap',
type: 2,
},
];
});
const btnChange = (item: any) => {
currentBtn.value = item.value;
// 更新筛选条件
if (currentBtn.value == 'new') {
GlbFilter.value.nt = 1;
} else if (currentBtn.value == 'default') {
GlbFilter.value.nt = 0;
}
// 请求接口
emit('filterChange', item.type, item.value);
};
return () => (
<div class="custom-table-filter-btns">
{btns.value.map((item: any) => (
<t-button
class={[
'table-filter-btn',
currentBtn.value == item.value ? 'active' : '',
]}
onClick={btnChange.bind(this, item)}
>
{item.label}
</t-button>
))}
</div>
);
},
});
views/token/RightDetail.vue
...@@ -179,31 +179,42 @@ const tokenInfo: any = ref({ ...@@ -179,31 +179,42 @@ const tokenInfo: any = ref({
token: '', token: '',
pool: [], pool: [],
}); });
const getPriceRange = () => {
const { up, r24h: proR24h } = props;
if ((proR24h + '')[0] == '-') {
// -，跌
let newR24h = parseFloat((proR24h + '').replace('-', ''));
// 原价
let oldPrice = props.up / (1 - newR24h);
numR24h.value = oldPrice - props.up;
numR24h.value = '-' + parseCoinAmount(numR24h.value);
} else if (proR24h == 0) {
numR24h.value = '+0';
} else {
// +,涨
// 原价
let oldPrice = props.up / (proR24h + 1);
numR24h.value = props.up - oldPrice;
numR24h.value = '+' + parseCoinAmount(numR24h.value);
}
r24h.value = parsePercent(proR24h + '');
if (r24h.value[0] !== '-') {
r24h.value = '+' + r24h.value;
}
};
watch( watch(
() => props.tb, () => props.tb,
(v) => { (v) => {
if (v) { if (v) {
const { up, r24h: proR24h } = props; getPriceRange();
if ((proR24h + '')[0] == '-') { }
// -，跌 }
let newR24h = parseFloat((proR24h + '').replace('-', '')); );
// 原价 watch(
let oldPrice = props.up / (1 - newR24h); () => props.r24h,
numR24h.value = oldPrice - props.up; (v) => {
numR24h.value = '-' + parseCoinAmount(numR24h.value); if (typeof v !== 'undefined' && typeof v !== 'null') {
} else if (proR24h == 0) { getPriceRange();
numR24h.value = '+0';
} else {
// +,涨
// 原价
let oldPrice = props.up / (proR24h + 1);
numR24h.value = props.up - oldPrice;
numR24h.value = '+' + parseCoinAmount(numR24h.value);
}
r24h.value = parsePercent(proR24h + '');
if (r24h.value[0] !== '-') {
r24h.value = '+' + r24h.value;
}
} }
} }
); );
......
views/token/choseChain/index.less
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
} }
.current-chain-text { .current-chain-text {
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 15px;
user-select: none; user-select: none;
font-family: 'bold'; font-family: 'bold';
} }
...@@ -101,6 +101,10 @@ ...@@ -101,6 +101,10 @@
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
font-family: 'bold'; font-family: 'bold';
img {
width: 27px;
height: 27px;
}
} }
} }
} }
views/token/filterRadio.vue 0 → 100644
<template>
<div
class="custom-filter-radio-box"
:class="[parentclass, margin ? 'filter-radio-margin' : '']"
>
<button
class="filter-radio-button"
:class="{
'radio-button-active': item.value == currentBtn,
}"
v-for="item in options"
:key="item.value"
@click="btnChange(item)"
>
{{ item.label }}
</button>
</div>
</template>
<script lang="ts" setup>
const props = withDefaults(
defineProps<{
options?: any[];
modelValue: string;
class?: string;
margin?: boolean;
}>(),
{
options: [],
class: '',
margin: false,
}
);
const emit = defineEmits(['update:modelValue', 'change']);
const parentclass = ref(props.class);
const currentBtn = ref(props.modelValue);
const btnChange = (item: any) => {
if (item.value == currentBtn.value) {
currentBtn.value = '';
} else {
currentBtn.value = item.value;
}
// 请求接口
emit('update:modelValue', currentBtn.value);
emit('change', currentBtn.value);
};
</script>
<style lang="less">
@import '@/style/flex.less';
.custom-filter-radio-box {
.da();
.filter-radio-button {
background: transparent;
border: none;
border-radius: 16px;
font-size: 12px;
width: 105px;
height: 24px;
line-height: 22px;
font-family: 'Regular';
cursor: pointer;
color: var(--td-Search-info-color-1);
.dja();
outline: none;
&:hover {
color: var(--td--main-btn-color-1);
transition: all 0.2s;
}
}
.radio-button-active {
background: var(--td--main-btn-color-1);
color: white;
font-weight: 500;
font-family: 'Medium';
&:hover {
background: var(--td--main-btn-color-1);
color: white;
transition: all 0.2s;
}
}
}
.filter-radio-margin {
& > :first-child {
width: 63px;
}
& > :nth-child(2) {
margin-left: 72px;
}
}
</style>
views/token/index.vue
...@@ -2,16 +2,10 @@ ...@@ -2,16 +2,10 @@
<MyLayout> <MyLayout>
<template #content> <template #content>
<div class="home-wrapper"> <div class="home-wrapper">
<div <div class="token-page-wrapper">
class="token-page-wrapper narrow-scrollbar" <ClientOnly>
id="token-page-wrapper" <RollToken></RollToken>
> </ClientOnly>
<div v-if="pageloading" class="scroll-Replacement"></div>
<template v-else>
<ClientOnly>
<RollToken></RollToken>
</ClientOnly>
</template>
<div> <div>
<TokenFilter></TokenFilter> <TokenFilter></TokenFilter>
</div> </div>
...@@ -46,8 +40,6 @@ const r24h = ref(); ...@@ -46,8 +40,6 @@ const r24h = ref();
const up = ref(); const up = ref();
const chain = useChain(); const chain = useChain();
const currentPath = ref(''); const currentPath = ref('');
// div是否隐藏
const pageloading = ref(true);
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(
...@@ -61,7 +53,6 @@ onBeforeMount(() => { ...@@ -61,7 +53,6 @@ onBeforeMount(() => {
getUa(); getUa();
}); });
onMounted(() => { onMounted(() => {
pageloading.value = false;
currentPath.value = chain.value; currentPath.value = chain.value;
}); });
const RightInfo = useCurrentRightInfo(); const RightInfo = useCurrentRightInfo();
...@@ -89,9 +80,6 @@ const changeChain = (chain) => { ...@@ -89,9 +80,6 @@ const changeChain = (chain) => {
width: calc(100vw - 368px); width: calc(100vw - 368px);
padding-right: 12px; padding-right: 12px;
box-sizing: border-box; box-sizing: border-box;
.scroll-Replacement {
height: 45px;
}
} }
} }
</style> </style>
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