Skip to content

D
dexfilter-web-nuxt3
Commit 276de7fc by haojie
Options

1

parent 37081707
Showing with 536 additions and 148 deletions
a-disst.zip
No preview for this file type
composables/useToken.ts
...@@ -2,6 +2,14 @@ import { useState } from '#app'; ...@@ -2,6 +2,14 @@ import { useState } from '#app';
import { DefaultChain } from '@/constants/UnifiedManagementChain'; import { DefaultChain } from '@/constants/UnifiedManagementChain';
const tokenName = 'token'; const tokenName = 'token';
let filter = {
pool_column: 'wb',
nt: 0,
range_date: '5m',
rise_or_fall: 'up',
page: 1,
page_size: 100,
};
// 获取当前交易token // 获取当前交易token
export const useCurToken = () => { export const useCurToken = () => {
return useState(tokenName, () => 'bar'); return useState(tokenName, () => 'bar');
...@@ -14,16 +22,13 @@ export const useChain = () => { ...@@ -14,16 +22,13 @@ export const useChain = () => {
// 当前筛选条件 // 当前筛选条件
export const useCurFilter = () => { export const useCurFilter = () => {
return useState('filterParams', () => ({ return useState('filterParams', () => filter);
pool_column: 'wb',
nt: 0,
range_date: '5m',
date: '5m',
rise_or_fall: 'up',
page: 1,
page_size: 100,
}));
}; };
// 当前时间筛选条件
export const useCurrentTimeChange = () => {
return useState('CurrentTimeChange', () => '5m');
};
// 通知表格请求数据 // 通知表格请求数据
export const useChangeTable = () => { export const useChangeTable = () => {
return useState('filterChange', () => 1); return useState('filterChange', () => 1);
......
constants/token.ts
import i18n from '@/language/index';
// 是否选择新链 // 是否选择新链
export const chooseChainBtns = [ export const chooseChainBtns = [
{ label: 'ALL', value: '0' }, { label: 'ALL', value: '0' },
...@@ -19,19 +21,19 @@ export const Time_price_range_options = [ ...@@ -19,19 +21,19 @@ export const Time_price_range_options = [
{ label: '1D', value: '24h' }, { label: '1D', value: '24h' },
]; ];
export const POOL_SIZE_OPTIONS = [ export const POOL_SIZE_OPTIONS = [
{ label: '20-50', value: '20_50' }, { label: '20+', value: '20_max' },
{ label: '50-100', value: '50_100' }, { label: '50+', value: '50_max' },
{ label: '100-200', value: '100_200' }, { label: '100+', value: '100_max' },
{ label: '200-500', value: '200_500' }, { label: '200+', value: '200_max' },
{ label: '500-1000', value: '500_1000' }, { label: '500+', value: '500_max' },
{ label: '1000+', value: '1000_max' }, { label: '1000+', value: '1000_max' },
]; ];
export const POOL_SIZE_USD_OPTIONS = [ export const POOL_SIZE_USD_OPTIONS = [
{ label: '1-10K', value: '1000_10000' }, { label: '1K+', value: '1000_max' },
{ label: '10-50K', value: '10000_50000' }, { label: '10K+', value: '10000_max' },
{ label: '50-100K', value: '50000_100000' }, { label: '50K+', value: '50000_max' },
{ label: '100-500K', value: '100000_500000' }, { label: '100K+', value: '100000_max' },
{ label: '500K-1M', value: '500000_1000000' }, { label: '500K+', value: '500000_max' },
{ label: '1M+', value: '1000000_max' }, { label: '1M+', value: '1000000_max' },
]; ];
...@@ -53,32 +55,43 @@ export const PRICE_RANGE_OPTIONS = [ ...@@ -53,32 +55,43 @@ export const PRICE_RANGE_OPTIONS = [
]; ];
export const NEW_HOLDER_OPTIONS = [ export const NEW_HOLDER_OPTIONS = [
{ label: 'ALL', value: '' }, { label: 'ALL', value: '' },
{ label: '0-100', value: '0_100' }, { label: '50+', value: '50_max' },
{ label: '100-500', value: '100_500' }, { label: '100+', value: '100_max' },
{ label: '500-1K', value: '500_1000' }, { label: '500+', value: '500_max' },
{ label: '1-5K', value: '1000_5000' }, { label: '1K+', value: '1000_max' },
{ label: '5-10K', value: '5000_10000' }, { label: '5K+', value: '5000_max' },
{ label: '10K+', value: '10000_max' }, { label: '10K+', value: '10000_max' },
]; ];
export const VOLUME_OPTIONS = [ export const VOLUME_OPTIONS = [
{ label: 'ALL', value: '' }, { label: 'ALL', value: '' },
{ label: '0-100K', value: '0_100000' }, { label: '50K+', value: '50000_max' },
{ label: '100-500K', value: '100000_500000' }, { label: '100K+', value: '100000_max' },
{ label: '500K-1M', value: '500000_1000000' }, { label: '500K+', value: '500000_max' },
{ label: '1-5M', value: '1000000_5000000' }, { label: '1M+', value: '1000000_max' },
{ label: '5-10M', value: '5000000_10000000' }, { label: '5M+', value: '5000000_max' },
{ label: '10M+', value: '10000000_max' }, { label: '10M+', value: '10000000_max' },
]; ];
export const TXNS_OPTIONS = [ export const TXNS_OPTIONS = [
{ label: 'ALL', value: '' }, { label: 'ALL', value: '' },
{ label: '0-100', value: '0_100' }, { label: '50+', value: '50_max' },
{ label: '100-500', value: '100_500' }, { label: '100+', value: '100_max' },
{ label: '500-1K', value: '500_1000' }, { label: '500+', value: '500_max' },
{ label: '1-5K', value: '1000_5000' }, { label: '1K+', value: '1000_max' },
{ label: '5-10K', value: '5000_10000' }, { label: '5K+', value: '5000_max' },
{ label: '10K+', value: '10000_max' }, { label: '10K+', value: '10000_max' },
]; ];
// 是否貔貅
export const IS_HPT_LIST = [
{
label: 'Yes',
value: 'yes',
},
{
label: 'No',
value: 'no',
},
];
export const SOCIAL_OPTIONS = { export const SOCIAL_OPTIONS = {
telegram: { telegram: {
......
language/cn.ts
...@@ -36,6 +36,14 @@ const cn = { ...@@ -36,6 +36,14 @@ const cn = {
Collection: '收藏', Collection: '收藏',
asc: '升序排列', asc: '升序排列',
desc: '降序排列', desc: '降序排列',
ContractDetection: '合约检测',
Honeypot: '是否貔貅',
OpenSource: '是否开源',
TradingSwitch: '交易开关',
AgencyContract: '是否代理',
ModifySlippage: '修改滑点',
StopTrading: '暂停交易',
noList: '暂无数据',
}, },
login: { login: {
h1: '区块链监控专家', h1: '区块链监控专家',
......
language/en.ts
...@@ -37,6 +37,14 @@ const cn = { ...@@ -37,6 +37,14 @@ const cn = {
Collection: 'Collection', Collection: 'Collection',
asc: 'Ascending order', asc: 'Ascending order',
desc: 'Descending order', desc: 'Descending order',
ContractDetection: 'Contract detection',
Honeypot: 'Honeypot',
OpenSource: 'Open Source',
TradingSwitch: 'Trading Switch',
AgencyContract: 'Agency Contract',
ModifySlippage: 'Modify Slippage',
StopTrading: 'Stop Trading',
noList: 'No data',
}, },
login: { login: {
h1: 'On-chain intelligent screening', h1: 'On-chain intelligent screening',
......
utils/request.ts
...@@ -66,7 +66,15 @@ instance.interceptors.response.use( ...@@ -66,7 +66,15 @@ instance.interceptors.response.use(
}, },
(err) => { (err) => {
const { config } = err; const { config } = err;
const { code, message: msg } = err.response.data; // 只有在生产环境才执行reload
if (!process.dev && 'response' in err) {
const { status } = err.response;
if (status == 503) {
location.reload();
return;
}
}
const { message: msg } = err.response.data;
MessagePlugin.closeAll(); MessagePlugin.closeAll();
MessagePlugin.error(msg || '请求错误'); MessagePlugin.error(msg || '请求错误');
if (!config || !config.retry) return Promise.reject(err); if (!config || !config.retry) return Promise.reject(err);
......
views/CustomComponent/CheckBox/index.less 0 → 100644
.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;
}
}
views/CustomComponent/CheckBox/index.tsx 0 → 100644
import { defineComponent } from 'vue';
import './index.less';
export default defineComponent({
props: {
modelValue: Object as any,
options: Object as any,
class: String,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
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;
};
return () => (
<div class={['custom-check-box', props.class]}>
{props.options.map((item: any) => (
<button
class={[
'check-box-button',
isSelected(item.value) ? 'check-box-active' : '',
]}
onClick={ChoseCurBtn.bind(this, item.value)}
>
{item.label}
</button>
))}
</div>
);
},
});
views/layout/ScrollTest.vue 0 → 100644
<template>
<div class=""></div>
</template>
<script lang="ts" setup></script>
<style lang="less"></style>
views/layout/Search.vue
...@@ -362,7 +362,7 @@ const goDetail = (row) => { ...@@ -362,7 +362,7 @@ const goDetail = (row) => {
}; };
}; };
</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-menu-search { .header-menu-search {
...@@ -394,7 +394,7 @@ const goDetail = (row) => { ...@@ -394,7 +394,7 @@ const goDetail = (row) => {
} }
.header-search { .header-search {
margin-left: 20px; margin-left: 20px;
:deep(.t-input) { .t-input {
border: none; border: none;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
...@@ -416,14 +416,14 @@ const goDetail = (row) => { ...@@ -416,14 +416,14 @@ const goDetail = (row) => {
} }
} }
// 2 // 2
:deep(.t-drawer__header) { .t-drawer__header {
padding: 0 !important; padding: 0 !important;
flex-direction: column; flex-direction: column;
} }
.t-drawer { .t-drawer {
.header-search2 { .header-search2 {
:deep(.t-input) { .t-input {
height: 50px; height: 50px;
border: none; border: none;
outline: none; outline: none;
...@@ -445,7 +445,7 @@ const goDetail = (row) => { ...@@ -445,7 +445,7 @@ const goDetail = (row) => {
.t-tabs { .t-tabs {
width: 100%; width: 100%;
} }
:deep(.t-drawer__content-wrapper) { .t-drawer__content-wrapper {
margin-top: 64px !important; margin-top: 64px !important;
width: 50vw; width: 50vw;
height: calc(100vh - 128px) !important; height: calc(100vh - 128px) !important;
......
views/layout/rollToken.vue
...@@ -48,12 +48,14 @@ ...@@ -48,12 +48,14 @@
</div> </div>
</div> </div>
</div> </div>
<ScrollTest></ScrollTest>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
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';
const ScrollList = reactive({ const ScrollList = reactive({
list: [], list: [],
}); });
...@@ -99,7 +101,7 @@ const getPublicToken = async () => { ...@@ -99,7 +101,7 @@ const getPublicToken = async () => {
list.push(Obj); list.push(Obj);
}); });
animationSpeed.value = `${ animationSpeed.value = `${
list.length * 2 list.length * 2.4
}s scroll-token-box linear infinite normal`; }s scroll-token-box linear infinite normal`;
ScrollList.list = list; ScrollList.list = list;
} catch (e) { } catch (e) {
...@@ -194,7 +196,6 @@ const leaveAn = () => { ...@@ -194,7 +196,6 @@ const leaveAn = () => {
100% { 100% {
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
display: none;
} }
} }
</style> </style>
views/token/CustomTokenList.vue
...@@ -11,7 +11,11 @@ ...@@ -11,7 +11,11 @@
}" }"
> >
<div class="custom-affixed-header-elm-wrap"> <div class="custom-affixed-header-elm-wrap">
<table> <table
:style="{
minWidth: affixedTableWidth,
}"
>
<colgroup> <colgroup>
<template v-for="(item, index) in colGroupList.list" :key="index"> <template v-for="(item, index) in colGroupList.list" :key="index">
<col <col
...@@ -161,11 +165,18 @@ ...@@ -161,11 +165,18 @@
</JumpOther> </JumpOther>
</td> </td>
</tr> </tr>
<template v-if="!resultData.list.length">
<tr>
<td colspan="12">
<div class="custom-no-list">{{ $t('filter.noList') }}</div>
</td>
</tr>
</template>
</tbody> </tbody>
<template v-if="loading">
<Animation></Animation>
</template>
</table> </table>
<template v-if="loading">
<Animation></Animation>
</template>
</div> </div>
<div class="page-footer"> <div class="page-footer">
<CustPagination <CustPagination
...@@ -209,8 +220,10 @@ const { t } = useI18n(); ...@@ -209,8 +220,10 @@ const { t } = useI18n();
const HeadTokenType = useTableHeadToken(); const HeadTokenType = useTableHeadToken();
// 筛选条件 // 筛选条件
const GlbFilter = useCurFilter(); const GlbFilter = useCurFilter();
const CurrentTime = useCurrentTimeChange();
// 吸顶元素 // 吸顶元素
const affixedHeadRef = ref(null); const affixedHeadRef = ref(null);
const affixedTableWidth = ref('');
const ChainObj = ref(); const ChainObj = ref();
// 当前选中的行数 // 当前选中的行数
const CurLineIndex = ref(0); const CurLineIndex = ref(0);
...@@ -233,7 +246,6 @@ const colGroupList = reactive({ ...@@ -233,7 +246,6 @@ const colGroupList = reactive({
}); });
// 右侧数据 // 右侧数据
const RightInfo = useCurrentRightInfo(); const RightInfo = useCurrentRightInfo();
const isFirst = ref(true);
// 新接口当前参数 // 新接口当前参数
const NewParams = ref({}); const NewParams = ref({});
// 吸顶表头左右跟随滑动 // 吸顶表头左右跟随滑动
...@@ -334,26 +346,32 @@ const submitSort = ({ sort, field }: any) => { ...@@ -334,26 +346,32 @@ const submitSort = ({ sort, field }: any) => {
resultData.list = JSON.parse(JSON.stringify(resultData.filterList)); resultData.list = JSON.parse(JSON.stringify(resultData.filterList));
} }
}; };
// 获取head的宽度赋给吸顶表头
const getMinWidth = () => {
if (CustomHead.value) {
affixedTableWidth.value = CustomHead.value.clientWidth + 'px';
}
};
const filterChange = (value: number, txn: string) => { const filterChange = (value: number, txn: string) => {
pageNum.value = 1; pageNum.value = 1;
currentRequestType.value = value; currentRequestType.value = value;
if (value == 1) { if (value == 1) {
// 旧接口
getTableList();
} else {
NewParams.value = JSON.parse(JSON.stringify({}));
if (txn == 'txn') { if (txn == 'txn') {
NewParams.value.date_orderby = txn; GlbFilter.value.date_orderby = 'txn';
NewParams.value.sort = 'desc'; GlbFilter.value.sort = 'desc';
} else if (txn == 'max-up') { } else if (txn == 'max-up') {
// 最大涨幅 // 最大涨幅
NewParams.value.date_orderby = 'radio'; GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
NewParams.value.sort = 'desc'; GlbFilter.value.sort = 'desc';
} else if (txn == 'max-down') { } else if (txn == 'max-down') {
// 最大跌幅 // 最大跌幅
NewParams.value.date_orderby = 'radio'; GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
NewParams.value.sort = 'asc'; GlbFilter.value.sort = 'asc';
} }
// 旧接口
getTableList();
} else {
NewParams.value = JSON.parse(JSON.stringify({}));
getNewTableList(); getNewTableList();
} }
}; };
...@@ -381,12 +399,26 @@ const TableFilter = (result: any) => { ...@@ -381,12 +399,26 @@ const TableFilter = (result: any) => {
} else { } else {
resultData.list = []; resultData.list = [];
} }
if (process.client) {
getMinWidth();
}
};
const getParams = () => {
let params: any = {
...GlbFilter.value,
};
if (CurrentTime.value) {
params.date = CurrentTime.value;
} else if ('date' in params) {
delete params.date;
}
return params;
}; };
// 预取数据 // 预取数据
const { data, refresh } = await useLazyFetch( const { data, refresh } = await useFetch(
() => `http://156.247.9.93:9501/v1${chain.value}/index`, () => `http://156.247.9.93:9501/v1${chain.value}/index`,
{ {
params: GlbFilter.value, params: getParams(),
onResponse({ request, response, options }) { onResponse({ request, response, options }) {
try { try {
loading.value = false; loading.value = false;
...@@ -410,7 +442,7 @@ const next = () => { ...@@ -410,7 +442,7 @@ const next = () => {
}; };
// 获取默认数据 // 获取默认数据
const getDefaultList = () => { const getDefaultList = () => {
if (process.client) { if (process.client && data.value) {
TableFilter(data.value.data); TableFilter(data.value.data);
} }
}; };
...@@ -445,32 +477,26 @@ useHead({ ...@@ -445,32 +477,26 @@ useHead({
}, },
], ],
}); });
// 获取colgroup的宽度 // 获取colgroup的宽度
const getColGroupWidth = () => { const getColGroupWidth = () => {
getMinWidth();
// 动态改变吸顶表头的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';
}); });
}); });
console.log(colGroupList.list);
}; };
// 默认接口 // 默认接口
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}/index`, {
params: GlbFilter.value, params: getParams(),
}); });
if (result.list.length) { if (result.list.length) {
TableFilter(result); TableFilter(result);
if (isFirst.value) {
// 通知右侧请求接口
RightInfo.value.token = result.list[0].token;
RightInfo.value.tb = result.list[0].tbname;
RightInfo.value.r24h = result.list[0].r24h + '';
isFirst.value = false;
}
} }
loading.value = false; loading.value = false;
} catch (e) { } catch (e) {
...@@ -539,7 +565,8 @@ const handleRowClick = (item: any, index: number) => { ...@@ -539,7 +565,8 @@ const handleRowClick = (item: any, index: number) => {
// 提交到右侧 // 提交到右侧
RightInfo.value.token = item.token; RightInfo.value.token = item.token;
RightInfo.value.tb = item.tbname; RightInfo.value.tb = item.tbname;
RightInfo.value.r24h = item.r24h.toString(); RightInfo.value.r24h = item.r24h;
RightInfo.value.up = item.up;
}; };
// 监听是否切出页面 // 监听是否切出页面
const listenerWindow = (fn: any) => { const listenerWindow = (fn: any) => {
...@@ -633,6 +660,8 @@ onMounted(() => { ...@@ -633,6 +660,8 @@ onMounted(() => {
window.onresize = function (e: any) { window.onresize = function (e: any) {
getTableWidth(); getTableWidth();
getColGroupWidth(); getColGroupWidth();
// 修改吸顶表头宽度
getMinWidth();
}; };
// 开启屏幕监听 // 开启屏幕监听
listenerWindow(windowOpenFn); listenerWindow(windowOpenFn);
...@@ -645,6 +674,7 @@ onMounted(() => { ...@@ -645,6 +674,7 @@ onMounted(() => {
RightInfo.value.token = resultData.list[0].token; RightInfo.value.token = resultData.list[0].token;
RightInfo.value.tb = resultData.list[0].tbname; RightInfo.value.tb = resultData.list[0].tbname;
RightInfo.value.r24h = resultData.list[0].r24h; RightInfo.value.r24h = resultData.list[0].r24h;
RightInfo.value.up = resultData.list[0].up;
} }
loading.value = false; loading.value = false;
// 获取th的个数并修改ColGroupList // 获取th的个数并修改ColGroupList
...@@ -652,8 +682,12 @@ onMounted(() => { ...@@ -652,8 +682,12 @@ onMounted(() => {
}); });
}); });
onUnmounted(() => { onUnmounted(() => {
BodyscrollDom.value.onscroll = null; if (BodyscrollDom.value) {
CustomTable.value.onscroll = null; BodyscrollDom.value.onscroll = null;
}
if (CustomTable.value) {
CustomTable.value.onscroll = null;
}
if (process.client) { if (process.client) {
window.onresize = null; window.onresize = null;
} }
...@@ -781,7 +815,7 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -781,7 +815,7 @@ for (let i = 0; i < arr1.length; i++) {
padding: 1px; padding: 1px;
.custom-affixed-head { .custom-affixed-head {
position: fixed; position: fixed;
z-index: 100; z-index: 200;
height: 90px; height: 90px;
overflow-y: auto; overflow-y: auto;
-ms-overflow-style: none; -ms-overflow-style: none;
...@@ -793,15 +827,12 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -793,15 +827,12 @@ for (let i = 0; i < arr1.length; i++) {
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 100; z-index: 200;
table { table {
z-index: 100;
border-spacing: 0; border-spacing: 0;
border-width: 1px 0px 0px 1px; border-width: 1px 0px 0px 1px;
border-collapse: collapse; table-layout: fixed;
width: 100%;
color: #909399; color: #909399;
min-width: 1000px;
thead { thead {
tr { tr {
th { th {
...@@ -864,7 +895,6 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -864,7 +895,6 @@ for (let i = 0; i < arr1.length; i++) {
.filter-table-home { .filter-table-home {
border-spacing: 0; border-spacing: 0;
border-width: 1px 0px 0px 1px; border-width: 1px 0px 0px 1px;
border-collapse: collapse;
width: 100%; width: 100%;
color: #909399; color: #909399;
min-width: 1000px; min-width: 1000px;
...@@ -933,6 +963,11 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -933,6 +963,11 @@ for (let i = 0; i < arr1.length; i++) {
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 {
.dja();
height: 160px;
font-size: 16px;
}
} }
.fs { .fs {
font-weight: 500; font-weight: 500;
......
views/token/FilterBtn/index.tsx
...@@ -23,16 +23,26 @@ export default defineComponent({ ...@@ -23,16 +23,26 @@ export default defineComponent({
{ {
label: t('filter.gainers'), label: t('filter.gainers'),
value: 'max-up', value: 'max-up',
type: 2, type: 1,
}, },
{ {
label: t('filter.losers'), label: t('filter.losers'),
value: 'max-down', value: 'max-down',
type: 2, type: 1,
}, },
{ {
label: t('filter.r24hVolume'), label: t('filter.r24hVolume'),
value: 'txn', value: 'txn',
type: 1,
},
{
label: 'Coingecko',
value: 'Coingecko',
type: 2,
},
{
label: 'Coinmarketcap',
value: 'Coinmarketcap',
type: 2, type: 2,
}, },
]; ];
......
views/token/FilterTips.vue
<template> <template>
<div class="Advertisement-box"> <div class="Advertisement-box">
<ClientOnly> <ClientOnly>
<div class="custom-home-swiper"> <div
<t-swiper :class="{
class="tdesign-demo-block--swiper" 'custom-home-swiper-card': swiperType != 'default',
:duration="300" 'custom-home-swiper-default': swiperType == 'default',
:interval="2000" }"
> >
<t-swiper :duration="300" :interval="50000" :type="swiperType">
<t-swiper-item v-for="item in picList.list" :key="item"> <t-swiper-item v-for="item in picList.list" :key="item">
<img <img
:src="item.picture_link" :src="item.picture_link"
...@@ -22,6 +23,8 @@ ...@@ -22,6 +23,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import request from '@/utils/request';
const swiperType = ref('default');
const picList = reactive({ const picList = reactive({
list: [], list: [],
}); });
...@@ -34,11 +37,25 @@ const getPicList = async () => { ...@@ -34,11 +37,25 @@ const getPicList = async () => {
try { try {
let res: any = await request.get('/v1/picture'); let res: any = await request.get('/v1/picture');
picList.list = res; picList.list = res;
if (picList.list.length == 1) {
picList.list = picList.list.concat(picList.list);
picList.list = picList.list.concat(picList.list);
}
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
onBeforeMount(() => { const WatchWindow = () => {
let windowDom = document.documentElement.clientWidth;
if (windowDom > 1955) {
// 使用卡片模式
swiperType.value = 'card';
}
};
onMounted(() => {
if (process.client) {
WatchWindow();
}
getPicList(); getPicList();
}); });
</script> </script>
...@@ -50,14 +67,15 @@ onBeforeMount(() => { ...@@ -50,14 +67,15 @@ onBeforeMount(() => {
padding-left: 6px; padding-left: 6px;
.dj(); .dj();
box-sizing: border-box; box-sizing: border-box;
.custom-home-swiper { .custom-home-swiper-card {
width: 100%;
height: 100%;
.t-swiper { .t-swiper {
height: 100%; height: 100%;
width: 100%; width: 100%;
.img { .img {
height: 305px; height: 349px;
max-width: 100%; max-width: 500px;
min-width: 500px;
border-radius: 12px; border-radius: 12px;
cursor: pointer; cursor: pointer;
} }
...@@ -72,5 +90,28 @@ onBeforeMount(() => { ...@@ -72,5 +90,28 @@ onBeforeMount(() => {
} }
} }
} }
.custom-home-swiper-default {
.t-swiper {
max-width: 600px;
.t-swiper__container__item {
img {
border-radius: 12px;
cursor: pointer;
height: 349px;
max-width: 100%;
min-width: 500px;
}
}
.t-swiper__arrow {
& > * {
border-radius: 50%;
border: 2px solid white;
.t-icon {
color: #287eff;
}
}
}
}
}
} }
</style> </style>
views/token/RightDetail.vue
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import request from '@/utils/request'; import request from '@/utils/request';
import { parsePercent } 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';
...@@ -150,8 +150,9 @@ const props = defineProps({ ...@@ -150,8 +150,9 @@ const props = defineProps({
scene: String, scene: String,
tb: String, tb: String,
currentPath: String, currentPath: String,
r24h: String, r24h: Number,
mt: String, mt: String,
up: Number,
}); });
const emit = defineEmits(['update:setPool', 'SettwitterRul']); const emit = defineEmits(['update:setPool', 'SettwitterRul']);
const r24h = ref(''); const r24h = ref('');
...@@ -179,15 +180,27 @@ const tokenInfo: any = ref({ ...@@ -179,15 +180,27 @@ const tokenInfo: any = ref({
pool: [], pool: [],
}); });
watch( watch(
() => props.r24h, () => props.tb,
(v) => { (v) => {
if (v) { if (v) {
if (v[0] !== '-') { const { up, r24h: proR24h } = props;
numR24h.value = '+' + parseFloat(props.r24h).toFixed(3); 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 { } else {
numR24h.value = parseFloat(props.r24h).toFixed(3); // +,涨
// 原价
let oldPrice = props.up / (proR24h + 1);
numR24h.value = props.up - oldPrice;
numR24h.value = '+' + parseCoinAmount(numR24h.value);
} }
r24h.value = parsePercent(parseFloat(v)); r24h.value = parsePercent(proR24h + '');
if (r24h.value[0] !== '-') { if (r24h.value[0] !== '-') {
r24h.value = '+' + r24h.value; r24h.value = '+' + r24h.value;
} }
......
views/token/SmartAlerts.vue
...@@ -321,6 +321,7 @@ const closeDialog = () => { ...@@ -321,6 +321,7 @@ const closeDialog = () => {
width: 100%; width: 100%;
.header-box { .header-box {
padding: 0 12px; padding: 0 12px;
width: 100%;
.icon { .icon {
float: right; float: right;
cursor: pointer; cursor: pointer;
...@@ -381,11 +382,24 @@ const closeDialog = () => { ...@@ -381,11 +382,24 @@ const closeDialog = () => {
min-height: 40px; min-height: 40px;
.da(); .da();
} }
.chain-select-box { .chain-select-box {
.da(); .da();
.icon { .icon {
cursor: pointer; cursor: pointer;
} }
.t-select__wrap {
width: 140px;
.t-input__wrap {
width: 100% !important;
}
.t-input__prefix {
img {
width: 25px;
height: 25px;
}
}
}
} }
.time-select-box, .time-select-box,
.price-range-select-box { .price-range-select-box {
...@@ -397,6 +411,18 @@ const closeDialog = () => { ...@@ -397,6 +411,18 @@ const closeDialog = () => {
.t-input__inner { .t-input__inner {
text-align: center; text-align: center;
} }
.t-select__wrap {
width: 140px;
.t-input__wrap {
width: 100% !important;
}
.t-input__prefix {
img {
width: 25px;
height: 25px;
}
}
}
} }
.price-range-select-box { .price-range-select-box {
.t-input__wrap { .t-input__wrap {
......
views/token/TokenFilter.vue
...@@ -218,6 +218,47 @@ ...@@ -218,6 +218,47 @@
</t-radio-group> </t-radio-group>
</div> </div>
</div> </div>
<!-- hpt -->
<div class="custom-form-item">
<div class="title">
<t-tooltip :content="$t('tips.VolumeValue')" placement="left-top">
<QuestionSvg></QuestionSvg>
</t-tooltip>
{{ $t('filter.ContractDetection') }}：
</div>
<div class="value">
<t-button
class="all-hpt-btn"
:class="{
active: formData.isHptall,
}"
>ALL</t-button
>
<ClientOnly
><t-select
class="custom-select-home-range"
v-model="formData.iSHpt"
:popup-props="{ overlayClassName: 'select_home_range_box' }"
>
<t-option
v-for="item in IS_HPT_LIST"
:key="item.value"
:value="item.value"
:label="item.label"
>
<div class="item-box">
<div>{{ item.label }}</div>
</div>
</t-option>
</t-select>
</ClientOnly>
<CustomCheckBox
class="cust-check-box"
:options="ContractDetection"
v-model="Cur_hpt_list"
></CustomCheckBox>
</div>
</div>
</div> </div>
</div> </div>
<FilterTips></FilterTips> <FilterTips></FilterTips>
...@@ -233,6 +274,7 @@ import { ...@@ -233,6 +274,7 @@ import {
VOLUME_OPTIONS, VOLUME_OPTIONS,
TXNS_OPTIONS, TXNS_OPTIONS,
Time_price_range_options, Time_price_range_options,
IS_HPT_LIST,
} from '@/constants/token'; } from '@/constants/token';
import { import {
chain_options, chain_options,
...@@ -247,6 +289,7 @@ import { MessagePlugin } from 'tdesign-vue-next'; ...@@ -247,6 +289,7 @@ import { MessagePlugin } from 'tdesign-vue-next';
import SmartAlerts from './SmartAlerts.vue'; import SmartAlerts from './SmartAlerts.vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ChoseChain from './choseChain'; import ChoseChain from './choseChain';
import CustomCheckBox from '../CustomComponent/CheckBox';
const { t } = useI18n(); const { t } = useI18n();
// 当前链 // 当前链
const chain = useChain(); const chain = useChain();
...@@ -265,7 +308,39 @@ const formData = reactive({ ...@@ -265,7 +308,39 @@ const formData = reactive({
txns: '', txns: '',
priceRangeTime: '5m', priceRangeTime: '5m',
isNewchain: '0', isNewchain: '0',
iSHpt: 'yes',
// 是否选择hpt的all
isHptall: true,
}); });
// 貔貅筛选--当前选中的列表
const Cur_hpt_list = ref([]);
const ContractDetection = computed(() => [
{
label: t('filter.Honeypot'),
value: '1',
},
{
label: t('filter.OpenSource'),
value: '2',
},
{
label: t('filter.TradingSwitch'),
value: '3',
},
{
label: t('filter.AgencyContract'),
value: '4',
},
{
label: t('filter.ModifySlippage'),
value: '5',
},
{
label: t('filter.StopTrading'),
value: '6',
},
]);
// 当前链整个对象数据 // 当前链整个对象数据
const ChainObj = ref(); const ChainObj = ref();
if (route.params.chain) { if (route.params.chain) {
...@@ -311,6 +386,7 @@ const PoolSize = ref(SwitchCurrency(chain.value)); ...@@ -311,6 +386,7 @@ const PoolSize = ref(SwitchCurrency(chain.value));
// 筛选条件 // 筛选条件
const GlbFilter = useCurFilter(); const GlbFilter = useCurFilter();
const CurrentTime = useCurrentTimeChange();
// 通知表格变化 // 通知表格变化
const ChangeTable = useChangeTable(); const ChangeTable = useChangeTable();
...@@ -336,61 +412,50 @@ const SwitchChange = (v: any) => { ...@@ -336,61 +412,50 @@ const SwitchChange = (v: any) => {
}; };
// 条件过滤方法 // 条件过滤方法
const filterFn = () => { const filterFn = async () => {
let params: any = { GlbFilter.value.pool_column = formData.isWbnb ? 'wb' : 'ub';
pool_column: formData.isWbnb ? 'wb' : 'ub', GlbFilter.value.nt = parseInt(formData.isNewchain);
nt: parseInt(formData.isNewchain), GlbFilter.value.range_date = formData.priceRangeTime;
range_date: formData.priceRangeTime,
};
if (formData.date) {
params.date = formData.date;
}
if (formData.poolSize) { if (formData.poolSize) {
params.pool_range = formData.poolSize; GlbFilter.value.pool_range = formData.poolSize;
} }
// 加 // 加
if (formData.isRise) { if (formData.isRise) {
if (formData.range) { if (formData.range) {
params.rise_or_fall = 'up'; GlbFilter.value.range = formData.range;
params.range = formData.range;
} else {
params.rise_or_fall = 'up';
} }
GlbFilter.value.rise_or_fall = 'up';
} else { } else {
// 减 // 减
if (formData.range) { if (formData.range) {
params.rise_or_fall = 'down'; GlbFilter.value.range = formData.range;
params.range = formData.range;
} else {
params.rise_or_fall = 'down';
} }
GlbFilter.value.rise_or_fall = 'down';
} }
if (formData.newHolder) { if (formData.newHolder) {
params.new_holder = formData.newHolder; GlbFilter.value.new_holder = formData.newHolder;
} }
if (formData.volume) { if (formData.volume) {
params.volume = formData.volume; GlbFilter.value.volume = formData.volume;
} }
if (formData.txns) { if (formData.txns) {
params.txn = formData.txns; GlbFilter.value.txn = formData.txns;
} }
return params;
}; };
watch(formData, (v) => { watch(formData, async (v) => {
let params = filterFn(); await filterFn();
// 筛选条件改变，永远请求第一页 // 筛选条件改变，永远请求第一页
params.page = 1; GlbFilter.value.page = 1;
params.page_size = 100; GlbFilter.value.page_size = 100;
if (Object.keys(params).length) { // 还要通知list页面请求数据
// 提交全局筛选条件 ChangeTable.value += 1;
GlbFilter.value = params;
// 还要通知list页面请求数据 // 这里date有问题，换个方式
ChangeTable.value += 1; CurrentTime.value = formData.date;
router.push({ router.push({
path: `/${ChainObj.value.name}/1`, path: `/${ChainObj.value.name}/1`,
}); });
}
}); });
</script> </script>
<style lang="less"> <style lang="less">
...@@ -544,13 +609,61 @@ watch(formData, (v) => { ...@@ -544,13 +609,61 @@ watch(formData, (v) => {
} }
} }
.value { .value {
height: 100%;
.da(); .da();
.cust-check-box {
margin-left: 14px;
}
.all-hpt-btn {
width: 63px;
border: none;
border-radius: 16px;
font-size: 12px;
height: 24px;
.dja();
font-family: 'Regular';
background: none;
color: var(--td-Search-info-color-1);
margin-left: -2px;
}
.active {
background: var(--td--main-btn-color-1);
color: white;
}
.custom-select-home-range {
margin-left: 12px;
width: 50px;
border-radius: 5px;
.t-input__wrap {
height: 20px;
.t-input {
height: 100%;
border-radius: 5px;
margin: 0;
padding: 0 2px;
border: 1px solid #287eff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
}
}
.t-input__suffix {
margin-left: 0;
.t-fake-arrow {
color: #287eff;
}
}
.t-input__inner {
font-size: 12px;
text-align: center;
color: #287eff;
}
}
.t-radio-group { .t-radio-group {
.t-radio-button { .t-radio-button {
border: none; border: none;
border-radius: 16px; border-radius: 16px;
font-size: 12px; font-size: 12px;
width: 90px; width: 105px;
height: 24px; height: 24px;
.dja(); .dja();
font-family: 'Regular'; font-family: 'Regular';
...@@ -584,6 +697,9 @@ watch(formData, (v) => { ...@@ -584,6 +697,9 @@ watch(formData, (v) => {
} }
} }
} }
.last {
margin-left: 12px;
}
.custom-group-type-1 { .custom-group-type-1 {
margin-left: -2px; margin-left: -2px;
} }
...@@ -597,31 +713,49 @@ watch(formData, (v) => { ...@@ -597,31 +713,49 @@ watch(formData, (v) => {
background-color: var(--td--main-btn-color-1); background-color: var(--td--main-btn-color-1);
width: 63px; width: 63px;
.t-switch__content { .t-switch__content {
padding-left: 20px; width: 100%;
padding: 0;
.dja();
} }
.t-size-l { }
text-align: center; .pre-switch2.t-is-checked {
.t-switch__content {
padding-right: 12px;
} }
} }
.custom-select-home-range { .custom-select-home-range {
margin-left: 12px; margin-left: 12px;
width: 50px; width: 50px;
border-radius: 5px; border-radius: 5px;
.t-input { .t-input__wrap {
border-radius: 5px; height: 20px;
margin: 0; .t-input {
padding: 0 2px; border-radius: 5px;
margin: 0;
padding: 0 2px;
border: 1px solid #287eff;
height: 100%;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
}
} }
.t-input__suffix { .t-input__suffix {
margin-left: 0; margin-left: 0;
.t-fake-arrow {
color: #287eff;
}
} }
.t-input__inner { .t-input__inner {
text-align: center;
color: #287eff;
font-weight: 500;
font-size: 12px; font-size: 12px;
} }
} }
.custom-group-type-3 { }
margin-left: 20px; .custom-group-type-3 {
} margin-left: 10px;
margin-bottom: 6px;
} }
.pre-switch { .pre-switch {
width: 63px; width: 63px;
...@@ -630,6 +764,11 @@ watch(formData, (v) => { ...@@ -630,6 +764,11 @@ watch(formData, (v) => {
font-family: 'Regular'; font-family: 'Regular';
} }
} }
.t-is-checked {
.t-switch__content {
padding-left: 5px;
}
}
.t-radio-group__outline { .t-radio-group__outline {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
......
views/token/index.vue
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
:tb="TbName" :tb="TbName"
:currentPath="currentPath" :currentPath="currentPath"
:r24h="r24h" :r24h="r24h"
:up="up"
@changeChain="changeChain" @changeChain="changeChain"
></RightDetail> ></RightDetail>
</div> </div>
...@@ -42,6 +43,7 @@ const route = useRoute(); ...@@ -42,6 +43,7 @@ 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 chain = useChain(); const chain = useChain();
const currentPath = ref(''); const currentPath = ref('');
// div是否隐藏 // div是否隐藏
...@@ -67,6 +69,7 @@ watch(RightInfo.value, (v) => { ...@@ -67,6 +69,7 @@ watch(RightInfo.value, (v) => {
token.value = v.token; token.value = v.token;
TbName.value = v.tb; TbName.value = v.tb;
r24h.value = v.r24h; r24h.value = v.r24h;
up.value = v.up;
}); });
const changeChain = (chain) => { const changeChain = (chain) => {
currentPath.value = chain; currentPath.value = chain;
......
views/token/rightDetailHeader/index.less
...@@ -72,12 +72,10 @@ ...@@ -72,12 +72,10 @@
} }
} }
.token-price-cl { .token-price-cl {
.da(); flex: 1;
.left-info { .left-info {
width: 70%;
font-size: 16px; font-size: 16px;
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
display: flex;
white-space: nowrap; white-space: nowrap;
.price { .price {
font-size: 16px; font-size: 16px;
......
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