Skip to content

D
dexfilter-web-nuxt3
Commit c126913d by lei
Options

1

parent 44423901
Showing with 188 additions and 89 deletions
components/RadioGroup.vue
...@@ -49,7 +49,7 @@ const radioOptions: any = computed(() => { ...@@ -49,7 +49,7 @@ const radioOptions: any = computed(() => {
} }
}); });
const emit = defineEmits(["update:current", "change"]); const emit = defineEmits(["update:current", "change"]);
const changeDimension = (v) => { const changeDimension = (v: any) => {
radioCurrent.value = v; radioCurrent.value = v;
emit("update:current", v); emit("update:current", v);
emit("change", v); emit("change", v);
......
package-lock.json
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
}, },
"devDependencies": { "devDependencies": {
"@types/md5": "^2.3.2", "@types/md5": "^2.3.2",
"@types/qrcode": "^1.5.0",
"axios": "^0.24.0", "axios": "^0.24.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"fontmin": "^0.9.9", "fontmin": "^0.9.9",
...@@ -2312,8 +2313,7 @@ ...@@ -2312,8 +2313,7 @@
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.11.18", "version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==", "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
"peer": true
}, },
"node_modules/@types/normalize-package-data": { "node_modules/@types/normalize-package-data": {
"version": "2.4.1", "version": "2.4.1",
...@@ -2326,6 +2326,15 @@ ...@@ -2326,6 +2326,15 @@
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
}, },
"node_modules/@types/qrcode": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
"integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
"dev": true,
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/resolve": { "node_modules/@types/resolve": {
"version": "1.20.2", "version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
...@@ -15414,8 +15423,7 @@ ...@@ -15414,8 +15423,7 @@
"@types/node": { "@types/node": {
"version": "18.11.18", "version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==", "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
"peer": true
}, },
"@types/normalize-package-data": { "@types/normalize-package-data": {
"version": "2.4.1", "version": "2.4.1",
...@@ -15428,6 +15436,15 @@ ...@@ -15428,6 +15436,15 @@
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
}, },
"@types/qrcode": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
"integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
"dev": true,
"requires": {
"@types/node": "*"
}
},
"@types/resolve": { "@types/resolve": {
"version": "1.20.2", "version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
......
package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
}, },
"devDependencies": { "devDependencies": {
"@types/md5": "^2.3.2", "@types/md5": "^2.3.2",
"@types/qrcode": "^1.5.0",
"axios": "^0.24.0", "axios": "^0.24.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"fontmin": "^0.9.9", "fontmin": "^0.9.9",
......
utils/plugin/PopupTool.ts
...@@ -24,7 +24,7 @@ export function isChildOf(child: HTMLElement, parent: HTMLElement) { ...@@ -24,7 +24,7 @@ export function isChildOf(child: HTMLElement, parent: HTMLElement) {
* @param parent * @param parent
* @returns * @returns
*/ */
// 获取popup元素定位的top和left // 获取popup元素定位
export const getPopupFixedSite = (parent: HTMLElement, add?: Add) => { export const getPopupFixedSite = (parent: HTMLElement, add?: Add) => {
let params = { let params = {
top: 0, top: 0,
...@@ -54,3 +54,16 @@ export const getPopupFixedSite = (parent: HTMLElement, add?: Add) => { ...@@ -54,3 +54,16 @@ export const getPopupFixedSite = (parent: HTMLElement, add?: Add) => {
} }
return params; return params;
}; };
export const getPopupMaxHeight = (add?: Add, parent: string = "body") => {
if (parent == "body") {
// 元素定位于body
if (add) {
if (add.top) {
let maxheight = document.documentElement.clientHeight - add.top * 2;
return maxheight;
}
}
}
return 0;
};
views/CustomComponent/QrCodeDialog.vue
...@@ -17,21 +17,21 @@ ...@@ -17,21 +17,21 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import QrCode from 'qrcode'; import QrCode from "qrcode";
const props = defineProps({ const props = defineProps({
QrCodevisible: Boolean, QrCodevisible: Boolean,
QrCode: String, QrCode: String,
width: { width: {
type: String, type: String,
default: '300px', default: "300px",
}, },
height: { height: {
type: String, type: String,
default: '300px', default: "300px",
}, },
id: String, id: String,
}); });
const emit = defineEmits(['closeDialog']); const emit = defineEmits(["closeDialog"]);
const getQrcode = () => { const getQrcode = () => {
let canvas = document.querySelector(`#${props.id}`); let canvas = document.querySelector(`#${props.id}`);
QrCode.toCanvas(canvas, props.QrCode); QrCode.toCanvas(canvas, props.QrCode);
...@@ -45,12 +45,12 @@ watch( ...@@ -45,12 +45,12 @@ watch(
} }
); );
const closeDialog = () => { const closeDialog = () => {
emit('closeDialog', false); emit("closeDialog", false);
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/flex.less'; @import "@/style/flex.less";
.qr-box { .qr-box {
.dja(); .dja();
} }
......
views/analysis/DealBox.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<radio-group <radio-group
type="analysisDate" type="analysisDate"
v-model:current="date" v-model:current="date"
@change="getData('')" @change="getData()"
> >
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter> <TimeFilter @change="onChange"></TimeFilter>
...@@ -48,10 +48,8 @@ import { ...@@ -48,10 +48,8 @@ import {
greenGradientLight, greenGradientLight,
lightLineColor, lightLineColor,
echartBackground, echartBackground,
echartShowLoaing,
} from "@/utils/echarts/color"; } from "@/utils/echarts/color";
const { const {
maxNum,
resultList, resultList,
getMaxNum, getMaxNum,
getMinNum, getMinNum,
...@@ -60,15 +58,19 @@ const { ...@@ -60,15 +58,19 @@ const {
formatter, formatter,
} = useEchartNum(); } = useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = withDefaults(
title: String, defineProps<{
options: Array, title?: string;
tb: String, tb?: string;
token: String, token?: string;
currentPath: String, currentPath?: string;
r24h: String, r24h?: string;
theme: String, theme?: string;
}); }>(),
{
theme: "light",
}
);
const date = ref("5m"); const date = ref("5m");
let myChart: any = null; let myChart: any = null;
// 初始化折线图 // 初始化折线图
...@@ -129,7 +131,7 @@ const changeEchart = () => { ...@@ -129,7 +131,7 @@ const changeEchart = () => {
const onInit = () => { const onInit = () => {
initChart("chart-box-2", props.theme); initChart("chart-box-2", props.theme);
}; };
const getData = (timestamp: number) => { const getData = (timestamp: number = 0) => {
try { try {
if (!props.tb) { if (!props.tb) {
return; return;
...@@ -165,9 +167,10 @@ const getData = (timestamp: number) => { ...@@ -165,9 +167,10 @@ const getData = (timestamp: number) => {
console.log(e); console.log(e);
} }
}; };
const renderChart = (list) => { const renderChart = (list: any) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme], backgroundColor:
echartBackground[props.theme as keyof typeof echartBackground],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -242,7 +245,10 @@ const renderChart = (list) => { ...@@ -242,7 +245,10 @@ const renderChart = (list) => {
}, },
], ],
}; };
document.querySelector("#chart-box-2").removeAttribute("_echarts_instance_"); let element = document.querySelector("#chart-box-2");
if (element) {
element.removeAttribute("_echarts_instance_");
}
myChart.setOption(options); myChart.setOption(options);
}; };
</script> </script>
......
views/analysis/DiscordBox.vue
...@@ -51,15 +51,19 @@ import useEchartNum from "@/hooks/useEchartNum"; ...@@ -51,15 +51,19 @@ import useEchartNum from "@/hooks/useEchartNum";
const { maxNum, resultList, getMaxNum, getMinNum, ShowLoading, hideLoading } = const { maxNum, resultList, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum(); useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = withDefaults(
title: String, defineProps<{
options: Array, title?: string;
token: String, token?: string;
tb: String, tb?: string;
currentPath: String, currentPath?: string;
r24h: String, r24h?: string;
theme: String, theme?: string;
}); }>(),
{
theme: "light",
}
);
const route = useRoute(); const route = useRoute();
let myChart: any = null; let myChart: any = null;
// 初始化折线图 // 初始化折线图
...@@ -150,9 +154,10 @@ const getData = (timestamp: number | undefined | string) => { ...@@ -150,9 +154,10 @@ const getData = (timestamp: number | undefined | string) => {
} }
}); });
}; };
const renderChart = (list) => { const renderChart = (list: any) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme], backgroundColor:
echartBackground[props.theme as keyof typeof echartBackground],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -243,7 +248,10 @@ const renderChart = (list) => { ...@@ -243,7 +248,10 @@ const renderChart = (list) => {
}, },
], ],
}; };
document.querySelector("#chart-box-8").removeAttribute("_echarts_instance_"); let element = document.querySelector("#chart-box-8");
if (element) {
element.removeAttribute("_echarts_instance_");
}
myChart.setOption(options); myChart.setOption(options);
}; };
</script> </script>
......
views/analysis/HolderBox.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<radio-group <radio-group
type="analysisDate" type="analysisDate"
v-model:current="date" v-model:current="date"
@change="getData('')" @change="getData()"
> >
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter> <TimeFilter @change="onChange"></TimeFilter>
...@@ -63,15 +63,19 @@ const { ...@@ -63,15 +63,19 @@ const {
formatter, formatter,
} = useEchartNum(); } = useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = withDefaults(
title: String, defineProps<{
options: Array, title?: string;
tb: String, token?: string;
token: String, tb?: string;
r24h: String, currentPath?: string;
currentPath: String, r24h?: string;
theme: String, theme?: string;
}); }>(),
{
theme: "light",
}
);
const date = ref("5m"); const date = ref("5m");
// 折线图状态 // 折线图状态
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
...@@ -133,7 +137,7 @@ watch( ...@@ -133,7 +137,7 @@ watch(
changeEchart(); changeEchart();
} }
); );
const getData = (timestamp: number) => { const getData = (timestamp: number = 0) => {
if (!props.tb) { if (!props.tb) {
return; return;
} }
...@@ -164,9 +168,10 @@ const getData = (timestamp: number) => { ...@@ -164,9 +168,10 @@ const getData = (timestamp: number) => {
} }
}); });
}; };
const renderChart = (list) => { const renderChart = (list: any) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme], backgroundColor:
echartBackground[props.theme as keyof typeof echartBackground],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -250,7 +255,10 @@ const renderChart = (list) => { ...@@ -250,7 +255,10 @@ const renderChart = (list) => {
}, },
], ],
}; };
document.querySelector("#chart-box-1").removeAttribute("_echarts_instance_"); let element = document.querySelector("#chart-box-1");
if (element) {
element.removeAttribute("_echarts_instance_");
}
myChart.setOption(options); myChart.setOption(options);
}; };
</script> </script>
......
views/analysis/InAndOutBox.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<radio-group <radio-group
type="analysisDate" type="analysisDate"
v-model:current="date" v-model:current="date"
@change="getData('')" @change="getData()"
> >
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter> <TimeFilter @change="onChange"></TimeFilter>
...@@ -63,15 +63,19 @@ const { getMaxNum, getMinNum, hideLoading, ShowLoading, formatter } = ...@@ -63,15 +63,19 @@ const { getMaxNum, getMinNum, hideLoading, ShowLoading, formatter } =
useEchartNum(); useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
let myChart: any = null; let myChart: any = null;
const props = defineProps({ const props = withDefaults(
title: String, defineProps<{
options: Array, title?: string;
tb: String, token?: string;
r24h: String, tb?: string;
token: String, currentPath?: string;
currentPath: String, r24h?: string;
theme: String, theme?: string;
}); }>(),
{
theme: "light",
}
);
const date = ref("5m"); const date = ref("5m");
const resultList = reactive({ const resultList = reactive({
list: [], list: [],
...@@ -131,7 +135,7 @@ const initChart = (id: string, theme: string, height: string = "212px") => { ...@@ -131,7 +135,7 @@ const initChart = (id: string, theme: string, height: string = "212px") => {
const onInit = () => { const onInit = () => {
initChart("chart-box-3", props.theme); initChart("chart-box-3", props.theme);
}; };
const getData = (timestamp: number) => { const getData = (timestamp: number = 0) => {
if (!props.tb) { if (!props.tb) {
return; return;
} }
...@@ -150,12 +154,12 @@ const getData = (timestamp: number) => { ...@@ -150,12 +154,12 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.total; formData.value1 = res?.count?.total;
formData.value2 = res?.count?.buy; formData.value2 = res?.count?.buy;
formData.value3 = res?.count?.sell; formData.value3 = res?.count?.sell;
res.list.buy = res.list.buy.map((item) => { res.list.buy = res.list.buy.map((item: any) => {
if (item !== undefined && item !== null) { if (item !== undefined && item !== null) {
return parseFloat(item).toFixed(2); return parseFloat(item).toFixed(2);
} }
}); });
res.list.sell = res.list.sell.map((item) => { res.list.sell = res.list.sell.map((item: any) => {
if (item !== undefined && item !== null) { if (item !== undefined && item !== null) {
return parseFloat(item).toFixed(2); return parseFloat(item).toFixed(2);
} }
...@@ -171,9 +175,10 @@ const getData = (timestamp: number) => { ...@@ -171,9 +175,10 @@ const getData = (timestamp: number) => {
} }
}); });
}; };
const renderChart = (list) => { const renderChart = (list: any) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme], backgroundColor:
echartBackground[props.theme as keyof typeof echartBackground],
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -248,7 +253,10 @@ const renderChart = (list) => { ...@@ -248,7 +253,10 @@ const renderChart = (list) => {
}, },
], ],
}; };
document.querySelector("#chart-box-3").removeAttribute("_echarts_instance_"); let element = document.querySelector("#chart-box-3");
if (element) {
element.removeAttribute("_echarts_instance_");
}
myChart.setOption(options); myChart.setOption(options);
}; };
</script> </script>
......
views/analysis/index.vue
...@@ -187,8 +187,10 @@ onMounted(() => { ...@@ -187,8 +187,10 @@ onMounted(() => {
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}`);
if (dom) {
dom.classList.add("active"); dom.classList.add("active");
} }
}
}); });
}); });
const SettwitterRul = (value: string) => { const SettwitterRul = (value: string) => {
......
views/detail/index.vue
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
:token="token" :token="token"
:tb="tb" :tb="tb"
:up="KPirce" :up="KPirce"
:r24h="r24h" :r24h="r24h ?? 0"
:currentPath="currentPath" :currentPath="currentPath"
@update:setPool="getPoll" @update:setPool="getPoll"
></RightDetail> ></RightDetail>
...@@ -98,7 +98,7 @@ const KPirce = ref(); ...@@ -98,7 +98,7 @@ const KPirce = ref();
// mt---是否主流币 // mt---是否主流币
const mt = ref(""); const mt = ref("");
const PoolAddress = ref(""); const PoolAddress = ref("");
let datafeed = null; let datafeed: any = null;
let widget: any = null; let widget: any = null;
watch( watch(
() => PoolAddress.value, () => PoolAddress.value,
...@@ -126,7 +126,7 @@ watch( ...@@ -126,7 +126,7 @@ watch(
} }
} }
); );
let Interval = null; let Interval: any = null;
// 轮询获取k线是否加载 // 轮询获取k线是否加载
const openInterval = () => { const openInterval = () => {
Interval = setInterval(() => { Interval = setInterval(() => {
...@@ -145,27 +145,37 @@ const openInterval = () => { ...@@ -145,27 +145,37 @@ const openInterval = () => {
const drag = () => { const drag = () => {
let oBox = document.getElementById("resize-block"); let oBox = document.getElementById("resize-block");
let historyTable = document.getElementById("history-table"); let historyTable = document.getElementById("history-table");
oBox.onmousedown = function (ev) { if (oBox) {
oBox.onmousedown = function (ev: any) {
var iEvent = ev as MouseEvent; var iEvent = ev as MouseEvent;
var startY = iEvent.clientY; //当你第一次单击的时候，储存Y轴的坐标。 var startY = iEvent.clientY; //当你第一次单击的时候，储存Y轴的坐标。
var boxH = historyTable.offsetHeight; //存储默认的div的高度。 var boxH = historyTable ? historyTable.offsetHeight : 0; //存储默认的div的高度。
// 获取表格固钉--当拖动时，隐藏固钉 // 获取表格固钉--当拖动时，隐藏固钉
let Histab: any = document.querySelector( 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"); let table_id = document.getElementById("tv_chart_container");
if (table_id) {
table_id.setAttribute("class", "mask");
}
document.onmousemove = function (ev) { document.onmousemove = function (ev) {
var iEvent = ev as MouseEvent; var iEvent = ev as MouseEvent;
if (historyTable) {
historyTable.style.height = boxH - (iEvent.clientY - startY) + "px"; historyTable.style.height = boxH - (iEvent.clientY - startY) + "px";
}
Histab.style.display = "none"; Histab.style.display = "none";
}; };
document.onmouseup = function () { document.onmouseup = function () {
document.onmousedown = null; document.onmousedown = null;
document.onmousemove = null; document.onmousemove = null;
document.getElementById("tv_chart_container").setAttribute("class", ""); let tv_id = document.getElementById("tv_chart_container");
if (tv_id) {
tv_id.setAttribute("class", "");
}
}; };
return false; return false;
}; };
}
}; };
const tableHeight = ref("100px"); const tableHeight = ref("100px");
watch( watch(
...@@ -221,7 +231,7 @@ onBeforeUnmount(() => { ...@@ -221,7 +231,7 @@ onBeforeUnmount(() => {
widget = null; widget = null;
} }
}); });
const getKLine = (tb) => { const getKLine = (tb: any) => {
if (!symbol.value) { if (!symbol.value) {
symbol.value = "any"; symbol.value = "any";
} }
...@@ -241,7 +251,7 @@ const getKLine = (tb) => { ...@@ -241,7 +251,7 @@ const getKLine = (tb) => {
symbol: symbolName, symbol: symbolName,
}); });
}; };
const getPoll = (PoolValue) => { const getPoll = (PoolValue: any) => {
PoolAddress.value = PoolValue; PoolAddress.value = PoolValue;
}; };
</script> </script>
......
views/layout/Search.vue
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
:zIndex="2000" :zIndex="2000"
attach="body" attach="body"
class="custom-search-drawer" class="custom-search-drawer"
id="search-drawer"
v-model:visible="selectDialogVisible" v-model:visible="selectDialogVisible"
placement="top" placement="top"
> >
...@@ -48,6 +49,9 @@ ...@@ -48,6 +49,9 @@
<div <div
id="search-token-list" id="search-token-list"
class="total-token-info-fa narrow-scrollbar" class="total-token-info-fa narrow-scrollbar"
:style="{
height: search_list_height + 'px',
}"
> >
<div v-show="currentSearchType == 'top'"> <div v-show="currentSearchType == 'top'">
<SearchRecords <SearchRecords
...@@ -103,6 +107,7 @@ import SearchRecords from "./searchRecords.vue"; ...@@ -103,6 +107,7 @@ import SearchRecords from "./searchRecords.vue";
import SearchList from "./searchList.vue"; import SearchList from "./searchList.vue";
import * as Cache from "@/utils/cache"; import * as Cache from "@/utils/cache";
import { Drawer as TDrawer } from "tdesign-vue-next"; import { Drawer as TDrawer } from "tdesign-vue-next";
import { getPopupMaxHeight } from "@/utils/plugin/PopupTool";
const keyword = ref(""); const keyword = ref("");
const inputPlaceholder = ref(""); const inputPlaceholder = ref("");
const selectDialogVisible = ref(false); const selectDialogVisible = ref(false);
...@@ -131,6 +136,10 @@ const resultList = ref([]); ...@@ -131,6 +136,10 @@ const resultList = ref([]);
const topList = ref([]); const topList = ref([]);
const isLoading = ref(false); const isLoading = ref(false);
const isFirst = ref(true); const isFirst = ref(true);
// 弹窗最大高度
const PopupMaxHeight = ref<number>(800);
// 搜索结果box高度
const search_list_height = ref<number>(0);
const darg = () => { const darg = () => {
let dom: any = document.getElementById("search-token-list"); let dom: any = document.getElementById("search-token-list");
if (dom !== null) { if (dom !== null) {
...@@ -155,11 +164,34 @@ const darg = () => { ...@@ -155,11 +164,34 @@ const darg = () => {
}); });
} }
}; };
const getHeight = () => {
try {
// 获取弹窗最大高度
let height = getPopupMaxHeight({
top: 70,
});
if (height < PopupMaxHeight.value) {
PopupMaxHeight.value = height;
}
let search_popup = document.getElementById("search-drawer");
if (search_popup) {
let child = search_popup.children[1];
if (child) {
child.style.maxHeight = PopupMaxHeight.value + "px";
}
}
// 获取搜索结果最大高度
search_list_height.value = PopupMaxHeight.value - 84;
} catch (e) {
console.log(e);
}
};
// 滚动加载 // 滚动加载
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
darg(); darg();
// 获取弹出层最大高度
getHeight();
}); });
}); });
const onChange = (value: string) => { const onChange = (value: string) => {
...@@ -399,8 +431,7 @@ watch( ...@@ -399,8 +431,7 @@ watch(
left: calc(50% - 450px); left: calc(50% - 450px);
top: 70px; top: 70px;
width: 900px; width: 900px;
height: 800px !important; height: auto !important;
background: @td--Search-drawer-back-color;
border-radius: 4px; border-radius: 4px;
background: var(--new-background-1); background: var(--new-background-1);
.header-search2 { .header-search2 {
...@@ -447,7 +478,6 @@ watch( ...@@ -447,7 +478,6 @@ watch(
width: 100%; width: 100%;
.total-token-info-fa { .total-token-info-fa {
overflow: auto; overflow: auto;
height: 726px;
position: relative; position: relative;
.loading-center2 { .loading-center2 {
text-align: center; text-align: center;
......
views/layout/searchList.vue
...@@ -88,7 +88,7 @@ const chain = useChain(); ...@@ -88,7 +88,7 @@ const chain = useChain();
ChainObj.value = filterChainObj("value", chain.value); ChainObj.value = filterChainObj("value", chain.value);
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
options: any[]; options?: any[];
}>(), }>(),
{ {
options: [], options: [],
...@@ -102,7 +102,7 @@ const goDetail = (row) => { ...@@ -102,7 +102,7 @@ const goDetail = (row) => {
path: Obj.name, path: Obj.name,
}; };
}; };
const collectData = (item) => { const collectData = (item: any) => {
let chain_id = item.chainId; let chain_id = item.chainId;
let obj = filterChainObj("chain_id", chain_id); let obj = filterChainObj("chain_id", chain_id);
if (item.isStar) { if (item.isStar) {
......
views/token/ChoseChain.vue
...@@ -62,10 +62,6 @@ const PopupClient = reactive({ ...@@ -62,10 +62,6 @@ const PopupClient = reactive({
const ScrollElement = ref<HTMLElement | null>(null); const ScrollElement = ref<HTMLElement | null>(null);
// 最好每次点击都获取一次 // 最好每次点击都获取一次
const getPopupSeat = () => { const getPopupSeat = () => {
console.log(
"0x40fb0516ac8ff93b48bcf9da7717e523e78c34f70001000000000000000004dc_0x4cc19356f2d37338b9802aa8e8fc58b0373296e7_0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
.length
);
if (outerlayer.value) { if (outerlayer.value) {
let client = getPopupFixedSite(outerlayer.value, { let client = getPopupFixedSite(outerlayer.value, {
top: 4, top: 4,
......
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