Skip to content

D
dexfilter-web-nuxt3
Commit d72da515 by lei
Options

打包优化

parent 050279f2
Showing with 807 additions and 117 deletions
tsconfig.json
{ {
// https://nuxt.com/docs/guide/concepts/typescript // https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json" "extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"allowJs": true
}
} }
views/token/Collection.vue 0 → 100644
<template>
<div
class="custom-home-collection-box narrow-scrollbar"
:style="{
height: CollectHeight,
maxHeight: CollectHeight,
}"
id="collectionBox"
>
<div class="custom-collection-header">
<span class="title">
<template v-if="LatestStatus()">
{{ $t("collection.r24hCollect") }}
</template>
<template v-else>
{{ $t("collection.editor") }}
</template>
</span>
<span class="edit-icon" @click="toEdit">
<template v-if="LatestStatus()">
<EditSvg></EditSvg>
</template>
<template v-else>
<span class="Finish-text">{{ $t("home.Finish") }}</span>
</template>
</span>
</div>
<div class="custom-collection-table">
<table>
<thead>
<tr>
<template v-if="!LatestStatus()">
<th></th>
</template>
<th class="token-th">{{ $t("collection.token") }}</th>
<th>
<template v-if="LatestStatus()">
<div>
<div>{{ $t("collection.newHolder") }}/</div>
{{ $t("collection.Numbertrades") }}
</div>
</template>
<template v-else>
<div>{{ $t("collection.top") }}</div>
</template>
</th>
<th>
<template v-if="LatestStatus()">
<div class="r24h-th-sort">
{{ $t("collection.r24h") }}
<CustomTableSort
:options="sortOptions.r24h"
field="old24h"
@SubmitSort="submitSort"
></CustomTableSort>
</div>
</template>
<template v-else>
{{ $t("collection.sort") }}
</template>
</th>
</tr>
</thead>
<tbody>
<TransitionGroup name="flip-list">
<template v-for="(item, index) in StartList.list" :key="item.tb">
<tr
class="collect-tr"
:class="{
'tr-pointer': LatestStatus(),
'tr-none': !LatestStatus(),
}"
@click="toKline(item.tb)"
>
<template v-if="!LatestStatus()">
<td class="edit-td">
<t-checkbox v-model="item.select"></t-checkbox>
</td>
</template>
<td>
<div class="col-token-td">
<div class="token-icon">
<DefaultTokenSvg></DefaultTokenSvg>
</div>
<div>
<div class="token">{{ item.symbol }}</div>
<div class="pair">{{ item.pair }}</div>
</div>
</div>
</td>
<td class="col-holder-tx-td">
<template v-if="LatestStatus()">
<div>
<div>+{{ item.holders }}</div>
<div>+{{ item.txnums }}</div>
</div>
</template>
<template v-else>
<span class="sticky-top-icon" @click="onStickyTop(index)">
<StickyTopSvg></StickyTopSvg>
</span>
</template>
</td>
<td>
<template v-if="LatestStatus()">
<div>
<div class="price">{{ item.up }}</div>
<div
class="r24h"
:class="{
down: item.r24h[0] == '-',
up: item.r24h[0] != '-',
}"
>
{{ item.r24h }}
</div>
</div>
</template>
<template v-else>
<div
class="drag-icon custom-collection-drag"
@mousedown="MouseStart(index)"
>
<DragSvg></DragSvg>
</div>
</template>
</td>
</tr>
</template>
</TransitionGroup>
</tbody>
</table>
</div>
<template v-if="!LatestStatus()">
<div class="collection-footer">
<div class="check-all">
<t-checkbox v-model="checkAll" @change="onCheckAll">
{{ $t("collection.selectall") }}
</t-checkbox>
</div>
<div class="delete-collection" @click="DeleteSelected">
<DeleteSvg></DeleteSvg>
<span class="delete-text">{{ $t("collection.delete") }}</span>
</div>
</div>
</template>
<div v-show="loading">
<Animation :background="loading_background"></Animation>
</div>
</div>
</template>
<script lang="tsx" setup>
import { useI18n } from "vue-i18n";
import EditSvg from "/public/images/svg/collection/edit.svg";
import DefaultTokenSvg from "/public/images/svg/collection/filter-default-icon.svg";
import StickyTopSvg from "/public/images/svg/collection/StickyTop.svg";
import DragSvg from "/public/images/svg/collection/Drag.svg";
import DeleteSvg from "/public/images/svg/collection/delete.svg";
import { myCollect } from "@/utils/api";
import Animation from "@/components/Animation.vue";
import { loading_background } from "@/constants/global";
import {
TableSort,
TableSortAsc,
ArrayItemSticky,
ArraySpecifiedPosition,
} from "@/utils/tool";
import CustomTableSort from "./tableSort.vue";
import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { deleteCollection, changeCollection } from "@/utils/cache";
const { t } = useI18n();
const router = useRouter();
const chain = useChain();
const ChainObj = ref<any>({});
// 收藏模块的高度
const CollectHeight = ref("");
// 收藏表格是否更新
const CollectionCl = CollectionChange();
const loading = ref(false);
// 是否选择全部
const checkAll = ref(false);
// 鼠标拖动事件需要的参数
const MouseParameter = reactive({
index: 0,
// tr的高度
trHeight: 0,
// 鼠标按下的y轴
StartY: 0,
});
/**
* 当前状态-default----edit
*/
const currentType = ref("default");
const sortOptions = reactive({
r24h: {
field: "r24h",
type: "all",
status: false,
},
});
const StartList = reactive<{
list: any[];
filterlist: any[];
}>({
list: [],
filterlist: [],
});
const getChainObj = () => {
let obj = filterChainObj("value", chain.value);
if (obj) {
ChainObj.value = obj;
}
};
getChainObj();
const LatestStatus = () => {
return currentType.value == "default";
};
// 需要计算剩余高度
const getCurrentHtmlHeight = () => {
let collectBox = document.getElementById("collectionBox");
if (collectBox) {
let client = collectBox.getBoundingClientRect();
// 获取文档高度
let domHeight = document.documentElement.clientHeight;
CollectHeight.value = domHeight - client.top + "px";
}
};
const toEdit = () => {
if (LatestStatus()) {
currentType.value = "edit";
} else {
currentType.value = "default";
}
};
// 鼠标按下
const MouseStart = (index: number, e: any) => {
MouseParameter.index = index;
// 开始位置
MouseParameter.StartY = e.clientY;
// 重新获取tr的高度collect-tr
let trDom = document.querySelector(".collect-tr");
if (trDom) {
MouseParameter.trHeight = trDom.clientHeight;
}
// 移动中先不写事件，有需求再加
document.onmousemove = function (move: any) {
// console.log(move);
};
document.onmouseup = function (up: any) {
document.onmousemove = document.onmouseup = null;
let endY = up.clientY;
// 拖动的距离
let distance = MouseParameter.StartY - endY;
// 拖动的距离-取绝对值
let abs = Math.abs(distance);
// 拖动了几个元素的距离--或者说将要移动到的位置--取整
let newIndex = Math.round(abs / MouseParameter.trHeight);
if (distance == 0) {
return;
}
if (distance > 0) {
// 向上拖动
if (MouseParameter.index - newIndex <= 0) {
// 拖到第一个
StartList.list = ArrayItemSticky(
toRaw(StartList.list),
MouseParameter.index
);
} else {
// 拖动到其他位置
StartList.list = ArraySpecifiedPosition(
StartList.list,
MouseParameter.index,
MouseParameter.index - newIndex
);
}
} else {
// 向下拖动
if (MouseParameter.index + newIndex >= StartList.list.length - 1) {
// 拖到最后一个
StartList.list = ArraySpecifiedPosition(
StartList.list,
MouseParameter.index,
StartList.list.length - 1
);
} else {
// 拖动到其他位置
StartList.list = ArraySpecifiedPosition(
StartList.list,
MouseParameter.index,
MouseParameter.index + newIndex
);
}
}
};
};
// 获取数据
const getList = async () => {
try {
loading.value = true;
let tmp: any = await myCollect();
if (tmp) {
StartList.list = JSON.parse(JSON.stringify(tmp));
StartList.filterlist = JSON.parse(JSON.stringify(tmp));
}
loading.value = false;
} catch (e) {
console.log(e);
loading.value = false;
}
};
// 置顶操作
const onStickyTop = (index: number) => {
// list顺序
StartList.list = ArrayItemSticky(toRaw(StartList.list), index);
// localStorage顺序
changeCollection(toRaw(StartList.list));
};
const submitSort = ({ sort, field }: any) => {
if (sort === "asc") {
// 升序
StartList.list = TableSortAsc(StartList.list, field);
} else if (sort === "desc") {
// 降序
StartList.list = TableSort(StartList.list, field);
} else {
// 还原
StartList.list = JSON.parse(JSON.stringify(StartList.filterlist));
}
};
watch(
() => CollectionCl.value,
(v) => {
getList();
}
);
// 删除选中
const DeleteSelected = () => {
let list = StartList.list.filter((item: any) => item.select == true);
if (list.length) {
deleteCollection(list);
}
// 最新的数据
StartList.list = StartList.list.filter(
(item: any, index: number) => item.select === false
);
};
// 跳转k线
const toKline = (tb: string) => {
if (!LatestStatus()) {
return;
}
let newtb = tb[0] == "d" ? tb.slice(1, tb.length) : tb;
let res = router.resolve({
path: `${chain.value}/${newtb}`,
});
window.open(res.href);
};
// 选择全部
const onCheckAll = (value: boolean) => {
StartList.list.forEach((item: any) => {
item.select = value;
});
};
onMounted(() => {
getCurrentHtmlHeight();
// 请求接口
getList();
});
</script>
<style lang="less">
@import "@/style/variables.less";
.custom-home-collection-box {
background-color: var(--td--right-back-color-2);
border: var(--new-border-2);
border-radius: 0 0 @border-radius @border-radius;
position: relative;
overflow-y: auto;
user-select: none;
.custom-collection-header {
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
position: sticky;
top: 0;
z-index: 100;
background-color: var(--td--right-back-color-2);
.title {
font-size: 15px;
font-family: "Medium";
}
.edit-icon {
display: flex;
align-items: center;
cursor: pointer;
.Finish-text {
font-weight: 400;
font-size: 12px;
font-family: "Regular";
color: #287eff;
}
}
}
.custom-collection-table {
padding: 0 12px;
table {
width: 100%;
border-spacing: 0;
thead {
tr {
background: var(--new-background-6);
border-radius: 10px;
th {
color: #8e8a8a;
font-weight: 500;
font-size: 12px;
font-family: "Medium";
.r24h-th-sort {
display: flex;
justify-content: center;
align-items: center;
}
}
.token-th {
text-align: left;
padding-left: 12px;
}
& > :first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
& > :last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
}
}
}
tbody {
.flip-list-move {
transition: transform 0.8s;
}
/* 效果过程 */
.flip-list-enter-active,
.flip-list-leave-active {
transition: all 0.3s linear;
}
/* 进场的瞬间与离场的效果添加 */
.flip-list-enter,
.flip-list-leave-to {
opacity: 0;
transform: translateX(200px);
}
tr {
transition: background 0.3s;
&:hover {
background: rgba(240, 240, 240, 0.2);
transition: background 0.3s;
}
td {
text-align: center;
border-bottom: 1px solid var(--new-border-7);
.col-token-td {
display: flex;
align-items: center;
max-width: 90px;
.token {
font-weight: 600;
font-size: 12px;
text-align: left;
font-family: "Medium";
}
.pair {
font-weight: 400;
font-size: 12px;
color: #7c858e;
text-align: left;
transform: scale(0.8);
transform-origin: 0 0;
font-family: "Regular";
}
.token-icon {
display: flex;
align-items: center;
padding-right: 4px;
}
}
.price,
.r24h {
font-weight: 600;
font-size: 14px;
font-family: "Medium";
}
.up {
color: #5ab055;
}
.down {
color: rgb(248, 82, 96);
}
.drag-icon {
height: 100%;
cursor: pointer;
}
}
.edit-td {
.t-checkbox {
.t-checkbox__input {
border-radius: 50%;
}
}
.t-is-checked {
.t-checkbox__input {
background-color: var(--td--main-btn-color-1);
border: 1px solid var(--td--main-btn-color-1);
}
}
}
.col-holder-tx-td {
font-weight: 600;
font-size: 12px;
font-family: "Medium";
.sticky-top-icon {
cursor: pointer;
}
}
}
.tr-pointer {
cursor: pointer;
}
.tr-none {
cursor: auto;
}
}
}
.collection-footer {
position: sticky;
bottom: 0;
height: 47px;
border-top: 1px solid #d7dce4;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
.check-all {
.t-checkbox {
.t-checkbox__input {
border-radius: 50%;
}
.t-checkbox__label {
font-weight: 400;
font-size: 12px;
color: #4d4d4d;
font-family: "Regular";
}
}
.t-is-checked {
.t-checkbox__input {
background-color: var(--td--main-btn-color-1);
border: 1px solid var(--td--main-btn-color-1);
}
}
}
.delete-collection {
cursor: pointer;
display: flex;
align-items: center;
.delete-text {
padding-left: 6px;
font-family: "Medium";
}
}
}
}
</style>
views/token/RightDetail.vue
...@@ -107,24 +107,24 @@ ...@@ -107,24 +107,24 @@
</template> </template>
</div> </div>
</template> </template>
<script setup lang="tsx"> <script lang="tsx" setup>
import request from '@/utils/request'; import request from "@/utils/request";
import { parsePercent, parseCoinAmount } 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";
import TokenPool from './TokenPool.vue'; import TokenPool from "./TokenPool.vue";
import TokenSocialList from './TokenSocialList.vue'; import TokenSocialList from "./TokenSocialList.vue";
import * as Cache from '@/utils/cache'; import * as Cache from "@/utils/cache";
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from "tdesign-vue-next";
import DetailsEcharts from '../analysis/detailsEcharts.vue'; import DetailsEcharts from "../analysis/detailsEcharts.vue";
import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg'; import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
import Favo from '/public/images/svg/rightDetail/favo.svg'; import Favo from "/public/images/svg/rightDetail/favo.svg";
import CollectionSvg from '/public/images/svg/rightDetail/colection.svg'; import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import RightDetailHeader from './rightDetailHeader.vue'; import RightDetailHeader from "./rightDetailHeader.vue";
import SubmitSocialInfo from './SubmitSocialInfo'; import SubmitSocialInfo from "./SubmitSocialInfo.vue";
import Collection from './collection'; import Collection from "./Collection.vue";
const router = useRouter(); const router = useRouter();
const { t, locale } = useI18n(); const { t, locale } = useI18n();
// 通知表格收藏图表取消收藏 // 通知表格收藏图表取消收藏
...@@ -133,16 +133,16 @@ const CollectionDe = CollectionDelete(); ...@@ -133,16 +133,16 @@ const CollectionDe = CollectionDelete();
// const initEchart = computed(() => store.getters['echart/gethasInit']); // const initEchart = computed(() => store.getters['echart/gethasInit']);
const headerBtns = computed(() => [ const headerBtns = computed(() => [
{ {
label: t('securityCheck.details'), label: t("securityCheck.details"),
value: 'details', value: "details",
}, },
{ {
label: t('filter.Collection'), label: t("filter.Collection"),
value: 'collection', value: "collection",
}, },
{ {
label: t('securityCheck.analysis'), label: t("securityCheck.analysis"),
value: 'echart', value: "echart",
}, },
]); ]);
const props = defineProps({ const props = defineProps({
...@@ -154,52 +154,52 @@ const props = defineProps({ ...@@ -154,52 +154,52 @@ const props = defineProps({
mt: String, mt: String,
up: Number, up: Number,
}); });
const emit = defineEmits(['update:setPool', 'SettwitterRul']); const emit = defineEmits(["update:setPool", "SettwitterRul"]);
const r24h = ref(''); const r24h = ref("");
const numR24h = ref(''); const numR24h = ref("");
// 收藏列表是否首次加载 // 收藏列表是否首次加载
const CollectionOnload = ref(false); const CollectionOnload = ref(false);
// 判断当前路由，隐藏右侧详情box中的折线图模块 // 判断当前路由，隐藏右侧详情box中的折线图模块
const currentRouter = router.currentRoute.value.name; const currentRouter = router.currentRoute.value.name;
const currentTab = ref('info'); const currentTab = ref("info");
const isInCollection = ref(false); const isInCollection = ref(false);
// 默认选择detail按钮 // 默认选择detail按钮
const defaBtn = ref('details'); const defaBtn = ref("details");
const ifDetails = ref(false); const ifDetails = ref(false);
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
// 传给详情折线图的tbname // 传给详情折线图的tbname
const tb = ref(''); const tb = ref("");
// 点击pool才加载 // 点击pool才加载
const isPool = ref(false); const isPool = ref(false);
const PoolAddress = ref(''); const PoolAddress = ref("");
// 当前链 // 当前链
const chain = useChain(); const chain = useChain();
const tokenInfo: any = ref({ const tokenInfo: any = ref({
avatar: '', avatar: "",
token: '', token: "",
pool: [], pool: [],
}); });
const getPriceRange = () => { const getPriceRange = () => {
const { up, r24h: proR24h } = props; const { up, r24h: proR24h } = props;
if ((proR24h + '')[0] == '-') { if ((proR24h + "")[0] == "-") {
// -，跌 // -，跌
let newR24h = parseFloat((proR24h + '').replace('-', '')); let newR24h = parseFloat((proR24h + "").replace("-", ""));
// 原价 // 原价
let oldPrice = props.up / (1 - newR24h); let oldPrice = props.up / (1 - newR24h);
numR24h.value = oldPrice - props.up; numR24h.value = oldPrice - props.up;
numR24h.value = '-' + parseCoinAmount(numR24h.value); numR24h.value = "-" + parseCoinAmount(numR24h.value);
} else if (proR24h == 0) { } else if (proR24h == 0) {
numR24h.value = '+0'; numR24h.value = "+0";
} else { } else {
// +,涨 // +,涨
// 原价 // 原价
let oldPrice = props.up / (proR24h + 1); let oldPrice = props.up / (proR24h + 1);
numR24h.value = props.up - oldPrice; numR24h.value = props.up - oldPrice;
numR24h.value = '+' + parseCoinAmount(numR24h.value); numR24h.value = "+" + parseCoinAmount(numR24h.value);
} }
r24h.value = parsePercent(proR24h + ''); r24h.value = parsePercent(proR24h + "");
if (r24h.value[0] !== '-') { if (r24h.value[0] !== "-") {
r24h.value = '+' + r24h.value; r24h.value = "+" + r24h.value;
} }
}; };
watch( watch(
...@@ -213,13 +213,13 @@ watch( ...@@ -213,13 +213,13 @@ watch(
watch( watch(
() => props.r24h, () => props.r24h,
(v) => { (v) => {
if (typeof v !== 'undefined') { if (typeof v !== "undefined") {
getPriceRange(); getPriceRange();
} }
} }
); );
const btnLoad = (value: string) => { const btnLoad = (value: string) => {
if (currentRouter == 'tokenAnalysis' && value == 'echart') { if (currentRouter == "tokenAnalysis" && value == "echart") {
return false; return false;
} }
return true; return true;
...@@ -235,7 +235,7 @@ watch( ...@@ -235,7 +235,7 @@ watch(
); );
// 流动池tab改变 // 流动池tab改变
const changeTab = (value) => { const changeTab = (value) => {
if (value === 'pool') { if (value === "pool") {
isPool.value = true; isPool.value = true;
} }
}; };
...@@ -249,31 +249,31 @@ const getTokenInfo = async () => { ...@@ -249,31 +249,31 @@ const getTokenInfo = async () => {
}, },
}); });
result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1); result.marketCap = parseFloat(result.supply * result.up + "").toFixed(1);
result.tokenSub = ''; result.tokenSub = "";
if (result.token) { if (result.token) {
result.tokenSub = result.tokenSub =
result.token.substr(0, 6) + result.token.substr(0, 6) +
'...' + "..." +
result.token.substr(result.token.length - 4, 4); result.token.substr(result.token.length - 4, 4);
} }
// tbname-掩码 // tbname-掩码
result.tbnameSub = ''; result.tbnameSub = "";
result.n_tb = ''; result.n_tb = "";
if (props.tb) { if (props.tb) {
// 先将d去掉 // 先将d去掉
result.n_tb = result.n_tb =
props.tb[0] == 'd' ? props.tb.slice(1, props.tb.length) : props.tb; props.tb[0] == "d" ? props.tb.slice(1, props.tb.length) : props.tb;
result.tbnameSub = result.tbnameSub =
result.n_tb.substr(0, 6) + result.n_tb.substr(0, 6) +
'...' + "..." +
result.n_tb.substr(result.n_tb.length - 4, 4); result.n_tb.substr(result.n_tb.length - 4, 4);
} }
isInCollection.value = Cache.hasSet(props.tb); isInCollection.value = Cache.hasSet(props.tb);
Object.assign(tokenInfo.value, result); Object.assign(tokenInfo.value, result);
// 如果有推特链接，提交给twitter组件解析 // 如果有推特链接，提交给twitter组件解析
if ('chat' in result) { if ("chat" in result) {
emit('SettwitterRul', result.chat.twitter); emit("SettwitterRul", result.chat.twitter);
} }
} catch (e) { } catch (e) {
console.log(e); console.log(e);
...@@ -283,7 +283,7 @@ const getTokenInfo = async () => { ...@@ -283,7 +283,7 @@ const getTokenInfo = async () => {
watch( watch(
() => locale.value, () => locale.value,
(v) => { (v) => {
if (defaBtn.value == 'echart') { if (defaBtn.value == "echart") {
WatchEcharts.value += 1; WatchEcharts.value += 1;
} }
} }
...@@ -291,16 +291,16 @@ watch( ...@@ -291,16 +291,16 @@ watch(
// 点击查看token详情信息 // 点击查看token详情信息
// v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求 // v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求
const gotoDetail = (value) => { const gotoDetail = (value) => {
if (value == 'collection' && !CollectionOnload.value) { if (value == "collection" && !CollectionOnload.value) {
CollectionOnload.value = true; CollectionOnload.value = true;
} }
// 先判断是否有token,没有则禁止打开折线图模块 // 先判断是否有token,没有则禁止打开折线图模块
if (!props.tb && value === 'echart') { if (!props.tb && value === "echart") {
MessagePlugin.closeAll(); MessagePlugin.closeAll();
MessagePlugin.warning(t('MessagePlugin.plToken')); MessagePlugin.warning(t("MessagePlugin.plToken"));
return; return;
} }
if (value === 'echart') { if (value === "echart") {
tb.value = props.tb; tb.value = props.tb;
ifDetails.value = true; ifDetails.value = true;
} }
...@@ -315,14 +315,14 @@ const monitor = computed((value) => { ...@@ -315,14 +315,14 @@ const monitor = computed((value) => {
// 接收右侧详情流动池address // 接收右侧详情流动池address
const changePool = (PoolValue) => { const changePool = (PoolValue) => {
PoolAddress.value = PoolValue; PoolAddress.value = PoolValue;
emit('update:setPool', PoolValue); emit("update:setPool", PoolValue);
}; };
watch( watch(
() => props.token, () => props.token,
(v) => { (v) => {
if (v) { if (v) {
//如果折线图为隐藏状态，需注销折线图模块 //如果折线图为隐藏状态，需注销折线图模块
if (defaBtn.value != 'echart') { if (defaBtn.value != "echart") {
ifDetails.value = false; ifDetails.value = false;
} }
tb.value = props.tb; tb.value = props.tb;
...@@ -332,8 +332,8 @@ watch( ...@@ -332,8 +332,8 @@ watch(
); );
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/flex.less'; @import "@/style/flex.less";
@import '@/style/variables.less'; @import "@/style/variables.less";
.right-detail-wrapper { .right-detail-wrapper {
height: calc(100vh - 70px); height: calc(100vh - 70px);
flex: 1; flex: 1;
...@@ -361,7 +361,7 @@ watch( ...@@ -361,7 +361,7 @@ watch(
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Regular'; font-family: "Regular";
.details-icon-cl { .details-icon-cl {
width: 30px; width: 30px;
fill: var(--td-search-btn-back-1); fill: var(--td-search-btn-back-1);
...@@ -437,7 +437,7 @@ watch( ...@@ -437,7 +437,7 @@ watch(
border-bottom-left-radius: @border-radius; border-bottom-left-radius: @border-radius;
border-bottom-right-radius: @border-radius; border-bottom-right-radius: @border-radius;
.t-tabs__nav-item-text-wrapper { .t-tabs__nav-item-text-wrapper {
font-family: 'Medium'; font-family: "Medium";
} }
.t-tabs__header { .t-tabs__header {
background-color: var(--td--right-back-color-2); background-color: var(--td--right-back-color-2);
......
views/token/SubmitSocialInfo.vue 0 → 100644
<template>
<div>
<div class="custom-submit-social-box" @click="OpenDialog">
<SubmitSvg></SubmitSvg>
<span class="span1">更新社区信息</span>
</div>
<t-dialog
:footer="false"
v-model:visible="visible"
placement="center"
attach="body"
@closeBtn="closeBtn"
>
<div class="custom-set-message-popup-box">
<div class="message-popup-title">
{{ $t("home.updatemessageTitle") }}
</div>
<div class="message-popup-body">
<p>{{ $t("home.message1") }}</p>
<p>{{ $t("home.message2") }}</p>
<p>{{ $t("home.message3") }}</p>
<p>{{ $t("home.message4") }}</p>
<p>{{ $t("home.message5") }}</p>
</div>
<div class="message-popup-footer">
<t-button class="clear-btn" @click="closeDialog">
{{ $t("user.Cancel") }}
</t-button>
<t-button class="submit-btn" @click="submit">
{{ $t("home.toSubmit") }}
</t-button>
</div>
</div>
</t-dialog>
</div>
</template>
<script lang="tsx" setup>
import { useI18n } from "vue-i18n";
import SubmitSvg from "/public/images/svg/rightDetail/submit.svg";
import ConnectCloseSvg from "/public/images/svg/rightDetail/connectClose.svg";
import { submitInfoLink } from "@/constants/global";
const visible = ref(false);
const { t } = useI18n();
const OpenDialog = () => {
visible.value = true;
};
const closeDialog = () => {
visible.value = false;
};
const submit = () => {
//
window.open(submitInfoLink);
};
const closeBtn = () => {
return <ConnectCloseSvg></ConnectCloseSvg>;
};
</script>
<style lang="less">
.custom-submit-social-box {
height: 38px;
border-bottom: var(--new-border-2);
border-left: 1px solid var(--new-border-8);
border-right: 1px solid var(--new-border-8);
box-sizing: border-box;
background-color: var(--td--right-back-color-2);
font-size: 14px;
color: var(--new-color-3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: "Medium";
.span1 {
padding-left: 4px;
}
}
.custom-set-message-popup-box {
background: var(--custom-body-back-color);
border-radius: 10px;
box-sizing: border-box;
color: var(--td-Search-info-color-1);
.message-popup-title {
font-size: 18px;
}
.message-popup-body {
color: var(--td-Search-info-color-1);
margin-top: 10px;
p {
padding-top: 16px;
margin: 0;
}
}
.message-popup-footer {
text-align: right;
.clear-btn {
background: #9a9a9a;
margin-right: 12px;
}
.submit-btn {
background: #287eff;
}
.t-button {
height: 32px;
color: white;
border-radius: 5px;
border: none;
}
}
}
</style>
views/token/collection/index.tsx
...@@ -4,30 +4,26 @@ import { ...@@ -4,30 +4,26 @@ import {
ref, ref,
reactive, reactive,
TransitionGroup, TransitionGroup,
} from 'vue'; } from "vue";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import EditSvg from '/public/images/svg/collection/edit.svg'; import EditSvg from "/public/images/svg/collection/edit.svg";
import './index.less'; import "./index.less";
import DefaultTokenSvg from '/public/images/svg/collection/filter-default-icon.svg'; import DefaultTokenSvg from "/public/images/svg/collection/filter-default-icon.svg";
import StickyTopSvg from '/public/images/svg/collection/StickyTop.svg'; import StickyTopSvg from "/public/images/svg/collection/StickyTop.svg";
import DragSvg from '/public/images/svg/collection/Drag.svg'; import DragSvg from "/public/images/svg/collection/Drag.svg";
import DeleteSvg from '/public/images/svg/collection/delete.svg'; import DeleteSvg from "/public/images/svg/collection/delete.svg";
import { myCollect } from '@/utils/api'; import { myCollect } from "@/utils/api";
import Animation from '@/components/Animation.vue'; import Animation from "@/components/Animation.vue";
import { loading_background } from '@/constants/global'; import { loading_background } from "@/constants/global";
import { import {
TableSort, TableSort,
TableSortAsc, TableSortAsc,
ArrayItemSticky, ArrayItemSticky,
ArraySpecifiedPosition, ArraySpecifiedPosition,
} from '@/utils/tool'; } from "@/utils/tool";
import CustomTableSort from '../tableSort.vue'; import CustomTableSort from "../tableSort.vue";
import { filterChainObj } from '@/constants/UnifiedManagementChain'; import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { import { deleteCollection, changeCollection } from "@/utils/cache";
deleteCollection,
changeCollection,
getCollectionList,
} from '@/utils/cache';
export default defineComponent({ export default defineComponent({
setup(props) { setup(props) {
const { t } = useI18n(); const { t } = useI18n();
...@@ -35,7 +31,7 @@ export default defineComponent({ ...@@ -35,7 +31,7 @@ export default defineComponent({
const chain = useChain(); const chain = useChain();
const ChainObj = ref<any>({}); const ChainObj = ref<any>({});
// 收藏模块的高度 // 收藏模块的高度
const CollectHeight = ref(''); const CollectHeight = ref("");
// 收藏表格是否更新 // 收藏表格是否更新
const CollectionCl = CollectionChange(); const CollectionCl = CollectionChange();
const loading = ref(false); const loading = ref(false);
...@@ -52,11 +48,11 @@ export default defineComponent({ ...@@ -52,11 +48,11 @@ export default defineComponent({
/** /**
* 当前状态-default----edit * 当前状态-default----edit
*/ */
const currentType = ref('default'); const currentType = ref("default");
const sortOptions = reactive({ const sortOptions = reactive({
r24h: { r24h: {
field: 'r24h', field: "r24h",
type: 'all', type: "all",
status: false, status: false,
}, },
}); });
...@@ -65,30 +61,30 @@ export default defineComponent({ ...@@ -65,30 +61,30 @@ export default defineComponent({
filterlist: [], filterlist: [],
}); });
const getChainObj = () => { const getChainObj = () => {
let obj = filterChainObj('value', chain.value); let obj = filterChainObj("value", chain.value);
if (obj) { if (obj) {
ChainObj.value = obj; ChainObj.value = obj;
} }
}; };
getChainObj(); getChainObj();
const LatestStatus = () => { const LatestStatus = () => {
return currentType.value == 'default'; return currentType.value == "default";
}; };
// 需要计算剩余高度 // 需要计算剩余高度
const getCurrentHtmlHeight = () => { const getCurrentHtmlHeight = () => {
let collectBox = document.getElementById('collectionBox'); let collectBox = document.getElementById("collectionBox");
if (collectBox) { if (collectBox) {
let client = collectBox.getBoundingClientRect(); let client = collectBox.getBoundingClientRect();
// 获取文档高度 // 获取文档高度
let domHeight = document.documentElement.clientHeight; let domHeight = document.documentElement.clientHeight;
CollectHeight.value = domHeight - client.top + 'px'; CollectHeight.value = domHeight - client.top + "px";
} }
}; };
const toEdit = () => { const toEdit = () => {
if (LatestStatus()) { if (LatestStatus()) {
currentType.value = 'edit'; currentType.value = "edit";
} else { } else {
currentType.value = 'default'; currentType.value = "default";
} }
}; };
// 鼠标按下 // 鼠标按下
...@@ -97,7 +93,7 @@ export default defineComponent({ ...@@ -97,7 +93,7 @@ export default defineComponent({
// 开始位置 // 开始位置
MouseParameter.StartY = e.clientY; MouseParameter.StartY = e.clientY;
// 重新获取tr的高度collect-tr // 重新获取tr的高度collect-tr
let trDom = document.querySelector('.collect-tr'); let trDom = document.querySelector(".collect-tr");
if (trDom) { if (trDom) {
MouseParameter.trHeight = trDom.clientHeight; MouseParameter.trHeight = trDom.clientHeight;
} }
...@@ -176,10 +172,10 @@ export default defineComponent({ ...@@ -176,10 +172,10 @@ export default defineComponent({
changeCollection(toRaw(StartList.list)); changeCollection(toRaw(StartList.list));
}; };
const submitSort = ({ sort, field }: any) => { const submitSort = ({ sort, field }: any) => {
if (sort === 'asc') { if (sort === "asc") {
// 升序 // 升序
StartList.list = TableSortAsc(StartList.list, field); StartList.list = TableSortAsc(StartList.list, field);
} else if (sort === 'desc') { } else if (sort === "desc") {
// 降序 // 降序
StartList.list = TableSort(StartList.list, field); StartList.list = TableSort(StartList.list, field);
} else { } else {
...@@ -209,7 +205,7 @@ export default defineComponent({ ...@@ -209,7 +205,7 @@ export default defineComponent({
if (!LatestStatus()) { if (!LatestStatus()) {
return; return;
} }
let newtb = tb[0] == 'd' ? tb.slice(1, tb.length) : tb; let newtb = tb[0] == "d" ? tb.slice(1, tb.length) : tb;
let res = router.resolve({ let res = router.resolve({
path: `${chain.value}/${newtb}`, path: `${chain.value}/${newtb}`,
}); });
...@@ -240,14 +236,14 @@ export default defineComponent({ ...@@ -240,14 +236,14 @@ export default defineComponent({
<span></span> <span></span>
<span class="title"> <span class="title">
{LatestStatus() {LatestStatus()
? t('collection.r24hCollect') ? t("collection.r24hCollect")
: t('collection.editor')} : t("collection.editor")}
</span> </span>
<span class="edit-icon" onClick={toEdit}> <span class="edit-icon" onClick={toEdit}>
{LatestStatus() ? ( {LatestStatus() ? (
<EditSvg></EditSvg> <EditSvg></EditSvg>
) : ( ) : (
<span class="Finish-text">{t('home.Finish')}</span> <span class="Finish-text">{t("home.Finish")}</span>
)} )}
</span> </span>
</div> </div>
...@@ -255,30 +251,30 @@ export default defineComponent({ ...@@ -255,30 +251,30 @@ export default defineComponent({
<table> <table>
<thead> <thead>
<tr> <tr>
{LatestStatus() ? '' : <th></th>} {LatestStatus() ? "" : <th></th>}
<th class="token-th">{t('collection.token')}</th> <th class="token-th">{t("collection.token")}</th>
<th> <th>
{LatestStatus() ? ( {LatestStatus() ? (
<div> <div>
<div>{t('collection.newHolder')}/</div> <div>{t("collection.newHolder")}/</div>
{t('collection.Numbertrades')} {t("collection.Numbertrades")}
</div> </div>
) : ( ) : (
<div>{t('collection.top')}</div> <div>{t("collection.top")}</div>
)} )}
</th> </th>
<th> <th>
{LatestStatus() ? ( {LatestStatus() ? (
<div class="r24h-th-sort"> <div class="r24h-th-sort">
{t('collection.r24h')} {t("collection.r24h")}
<CustomTableSort <CustomTableSort
options={sortOptions['r24h']} options={sortOptions["r24h"]}
field="old24h" field="old24h"
onSubmitSort={submitSort} onSubmitSort={submitSort}
></CustomTableSort> ></CustomTableSort>
</div> </div>
) : ( ) : (
t('collection.sort') t("collection.sort")
)} )}
</th> </th>
</tr> </tr>
...@@ -289,13 +285,13 @@ export default defineComponent({ ...@@ -289,13 +285,13 @@ export default defineComponent({
<tr <tr
key={item.tb} key={item.tb}
class={[ class={[
'collect-tr', "collect-tr",
LatestStatus() ? 'tr-pointer' : 'tr-none', LatestStatus() ? "tr-pointer" : "tr-none",
]} ]}
onClick={toKline.bind(this, item.tb)} onClick={toKline.bind(this, item.tb)}
> >
{LatestStatus() ? ( {LatestStatus() ? (
'' ""
) : ( ) : (
<td class="edit-td"> <td class="edit-td">
<t-checkbox v-model={item.select}></t-checkbox> <t-checkbox v-model={item.select}></t-checkbox>
...@@ -333,8 +329,8 @@ export default defineComponent({ ...@@ -333,8 +329,8 @@ export default defineComponent({
<div class="price">{item.up}</div> <div class="price">{item.up}</div>
<div <div
class={[ class={[
'r24h', "r24h",
item.r24h[0] == '-' ? 'down' : 'up', item.r24h[0] == "-" ? "down" : "up",
]} ]}
> >
{item.r24h} {item.r24h}
...@@ -359,16 +355,16 @@ export default defineComponent({ ...@@ -359,16 +355,16 @@ export default defineComponent({
<div class="collection-footer"> <div class="collection-footer">
<div class="check-all"> <div class="check-all">
<t-checkbox v-model={checkAll.value} onChange={onCheckAll}> <t-checkbox v-model={checkAll.value} onChange={onCheckAll}>
{t('collection.selectall')} {t("collection.selectall")}
</t-checkbox> </t-checkbox>
</div> </div>
<div class="delete-collection" onClick={DeleteSelected}> <div class="delete-collection" onClick={DeleteSelected}>
<DeleteSvg></DeleteSvg> <DeleteSvg></DeleteSvg>
<span class="delete-text">{t('collection.delete')}</span> <span class="delete-text">{t("collection.delete")}</span>
</div> </div>
</div> </div>
) : ( ) : (
'' ""
)} )}
<div v-show={loading.value}> <div v-show={loading.value}>
<Animation background={loading_background}></Animation> <Animation background={loading_background}></Animation>
......
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