28 changed files with 472 additions and 182 deletions
@ -1,8 +0,0 @@ |
|||
import { requestService } from '../requst' |
|||
|
|||
export const getHomePageList = () => { |
|||
return requestService({ |
|||
url: '/api/block/getHomePageList', |
|||
method: 'get', |
|||
}) |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
import { requestService } from '../requst' |
|||
|
|||
export const getHomePageList = () => { |
|||
return requestService({ |
|||
url: '/api/block/getHomePageList', |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
export const getSearch = (search: string) => { |
|||
return requestService({ |
|||
url: '/api/block/getSearch', |
|||
method: 'get', |
|||
params: { |
|||
search, |
|||
}, |
|||
}) |
|||
} |
|||
|
|||
interface getBlockParams { |
|||
hash?: string |
|||
number?: number |
|||
} |
|||
export const getBlock = (params: getBlockParams) => { |
|||
return requestService({ |
|||
url: '/api/block/getBlock', |
|||
method: 'get', |
|||
params, |
|||
}) |
|||
} |
|||
interface getfindBlockListParams { |
|||
pageNum?: number |
|||
pageSize?: number |
|||
orderByColumn?: string |
|||
isAsc?: string |
|||
} |
|||
export const getfindBlockList = (params: getfindBlockListParams) => { |
|||
return requestService({ |
|||
url: '/api/block/findBlockList', |
|||
method: 'get', |
|||
params, |
|||
}) |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
import { requestService } from '../requst' |
|||
interface TransactionListProps { |
|||
pageNum?: Number |
|||
pageSize?: Number |
|||
} |
|||
export const getFindTransactionListPage = (params: TransactionListProps) => { |
|||
return requestService({ |
|||
url: '/api/transactions/findTransactionListPage', |
|||
params: params, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
import * as BlockController from './BlockController/index' |
|||
import * as TokensController from './TokensController/index' |
|||
import * as TransactionsController from './TransactionsController/index' |
|||
|
|||
export default { |
|||
...BlockController, |
|||
...TokensController, |
|||
...TransactionsController, |
|||
} |
|||
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<div class="flex flex-1 justify-center items-center"> |
|||
<img |
|||
:src="iconList.label" |
|||
class="desktop:w-[70px] desktop:h-[40px] mobile:w-[40px] mobile:h-[24px]" |
|||
/> |
|||
<span |
|||
class="desktop:text-[50px] mobile:text-[24px] font-semibold text-white ml-[16px]" |
|||
>MetaForce Scan</span |
|||
> |
|||
</div> |
|||
<div |
|||
class="flex flex-1 flex-col w-full justify-center items-center desktop:mt-[68px] mobile:mt-[32px]" |
|||
> |
|||
<div class="flex flex-1 w-full desktop:px-[282px] mobile:px-[20px]"> |
|||
<el-input |
|||
v-model="input" |
|||
class="bg-black desktop:h-[65px] desktop:pl-[33px] mobile:h-[40px] mobile:pl-[15.69px] mobile:text-[12px] desktop:rounded-t-[32.5px] overflow-hidden hp-input-wrapper mobile:rounded-t-[20px]" |
|||
:class=" |
|||
isActive && data.length > 0 |
|||
? '' |
|||
: 'desktop:rounded-b-[32.5px] mobile:rounded-b-[20px]' |
|||
" |
|||
placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number" |
|||
:prefix-icon="Search" |
|||
:input-style="{ background: '#262626' }" |
|||
@focus="handleFocus" |
|||
@blur="handleBlur" |
|||
@change="handleEnter" |
|||
@input="handleChangeInput" |
|||
/> |
|||
</div> |
|||
<div |
|||
class="h-[78px] w-full desktop:px-[282px] mobile:px-[20px]" |
|||
:class="isActive && data.length > 0 ? '' : 'hidden'" |
|||
> |
|||
<div |
|||
class="bg-black-262626 px-[32px] py-[20px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer" |
|||
v-for="(item, index) in data" |
|||
:key="index + item?.hash" |
|||
:class=" |
|||
index === data.length - 1 |
|||
? 'desktop:rounded-b-[32.5px] mobile:rounded-b-[20px] border-b-[0px]' |
|||
: 'border-b-[1px]' |
|||
" |
|||
@click="handleClick(item)" |
|||
> |
|||
<span class="text-blue-65B5FF">{{ item?.hash || '-' }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { Search } from '@element-plus/icons-vue' |
|||
import { getSearch } from '@src/api/BlockController' |
|||
import { Throttle } from '@src/utils/throttle' |
|||
import { ref } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import * as iconList from '../assets/Icons/index' |
|||
|
|||
const router = useRouter() |
|||
|
|||
let input = ref<string>('') |
|||
let isActive = ref(false) |
|||
const data = ref<any>([]) |
|||
|
|||
const handleFocus = () => (isActive.value = true) |
|||
const handleBlur = () => |
|||
setTimeout(() => { |
|||
isActive.value = false |
|||
}, 150) |
|||
// 按下了enter / 失去焦点 |
|||
const handleEnter = (e: string | number) => { |
|||
// console.log(e) |
|||
} |
|||
// 点击了 |
|||
const handleClick = (item: any) => { |
|||
console.log('click', item) |
|||
router.push(`/blocks/${item.hash}`) |
|||
} |
|||
// 修改input |
|||
const handleChangeInput = () => { |
|||
Throttle(searchRequest, 1000)() |
|||
} |
|||
// 请求的函数 |
|||
const searchRequest = async () => { |
|||
try { |
|||
const res = await getSearch(input.value) |
|||
data.value = res.data |
|||
console.log(data) |
|||
} catch (error) {} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,13 @@ |
|||
import dayjs from 'dayjs' |
|||
|
|||
export const middleDecimal = (char: string) => { |
|||
if (char.length < 10) { |
|||
return char |
|||
} |
|||
const len = char.length |
|||
return `${char.slice(0, 4)}...${char.slice(len - 4, len)}` |
|||
} |
|||
|
|||
export const timeConvert = (time: number) => { |
|||
return dayjs().format('YYYY-MM-DD hh:mm:ss') |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
import { ref } from 'vue' |
|||
|
|||
export const Throttle = (fn: () => void, delay: number | undefined) => { |
|||
const isThtottle = ref(true) |
|||
return () => { |
|||
if (!isThtottle.value) return |
|||
isThtottle.value = false |
|||
setTimeout(() => { |
|||
fn() |
|||
isThtottle.value = true |
|||
}, delay) |
|||
} |
|||
} |
|||
Loading…
Reference in new issue