You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.5 KiB
85 lines
2.5 KiB
<template>
|
|
<div class="rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px]">
|
|
<div class="bg-black-006 pt-[23px] pl-[34px]">
|
|
<div class="w-[368px]">
|
|
<el-input
|
|
v-model="input"
|
|
class="bg-black-006 h-[40px] pl-[16px] text-[12px] rounded-[8px] overflow-hidden hp-input-wrapper border-[1px] border-gray-555"
|
|
placeholder="Token name or symbol"
|
|
:prefix-icon="Search"
|
|
:input-style="{ background: '#262626' }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<t-header
|
|
:list="invariable.labels"
|
|
bg-color="bg-black-006 rounded-t-[0px]"
|
|
textColor="text-white"
|
|
/>
|
|
<div
|
|
v-for="(item, index) in currentData"
|
|
:key="item?.token + index"
|
|
@click="routerLink(item.token)"
|
|
>
|
|
<!-- :values="{ ...item, serialNumber: index + 1 }" -->
|
|
<bk-row
|
|
:sequence="invariable.sequence"
|
|
:values="item"
|
|
:colorSequence="invariable.colorSequence"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="bk-pagination flex flex-row items-center justify-end pt-[32px] pr-[34px]"
|
|
>
|
|
<el-pagination
|
|
:page-size="invariable.pageSize"
|
|
layout="prev, pager, next, jumper"
|
|
v-model:current-page="currentPage"
|
|
:total="paginationState.totalPage"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
<span class="text-white text-[14px] font-normal">Page</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, reactive, ref } from 'vue'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
import THeader from '../dBase/tHeader.vue'
|
|
import BkRow from '../dBase/bkRow.vue'
|
|
import { dimensionalUpgrade } from '../tool'
|
|
import { tokensTableCollocate } from '../constant'
|
|
import router from '@src/routes'
|
|
|
|
const props = defineProps({
|
|
data: Array as any,
|
|
})
|
|
const invariable = {
|
|
...tokensTableCollocate,
|
|
pageSize: 10, // 每一页的数量
|
|
}
|
|
const paginationState = reactive({
|
|
totalPage:
|
|
Math.floor(props?.data.length / invariable.pageSize + 1) *
|
|
invariable.pageSize, // 总页数
|
|
totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
|
|
})
|
|
|
|
let currentPage = ref(1) // 当前页
|
|
let currentData = ref(paginationState.totalData[currentPage.value - 1]) // 当前页的数据
|
|
let input = ref('')
|
|
|
|
const handleCurrentChange = (page: number) => {
|
|
currentData.value = paginationState.totalData[page - 1]
|
|
}
|
|
// 路由跳转
|
|
const routerLink = (id: string | number) =>
|
|
router.push(`/TableBlock/tokens/${id}`)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './zExtraStyle.scss';
|
|
</style>
|
|
|