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.
103 lines
2.7 KiB
103 lines
2.7 KiB
<template>
|
|
<div
|
|
class="rounded-[10px] bg-black-19191A rounded-b-[10px] px-[20px] pt-[12px] pb-[18px]"
|
|
>
|
|
<div
|
|
class="flex flex-col justify-between pt-[20px] pb-[18px] border-b-[1px] border-black-3B3B3C break-all"
|
|
>
|
|
<p class="underline text-blue-65B5FF">{{ currentData?.address }}</p>
|
|
<div class="flex flex-row justify-end mt-[12px]">
|
|
<Icons :url="'copyAddress'" :size="32" />
|
|
<div @click="open">
|
|
<Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<tokens-details-row
|
|
v-for="(item, index) in invariable.labels"
|
|
:key="index"
|
|
:title="item"
|
|
:value="currentData?.[invariable.sequence[index]]"
|
|
:value-color="invariable.colorSequence[index]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watchEffect } from 'vue'
|
|
import { ElMessageBox } from 'element-plus'
|
|
import Qrcode from 'qrcode'
|
|
import tokensDetailsRow from '../mBase/tokensDetailsRow.vue'
|
|
import { tokensDetailsCollocate } from '../constant'
|
|
import Icons from '@src/components/icons/index.vue'
|
|
import { getAddressInfo } from '@src/api/AddressController'
|
|
import { useRoute } from 'vue-router'
|
|
const invariable = {
|
|
...tokensDetailsCollocate,
|
|
}
|
|
const route = useRoute()
|
|
const currentData = ref<any>()
|
|
|
|
// 通过address请求详情数据
|
|
const requestDetails = async (address: string) => {
|
|
const params = {
|
|
address,
|
|
}
|
|
const res = await getAddressInfo(params)
|
|
const { data } = res
|
|
currentData.value = {
|
|
...data,
|
|
tokens: data?.tokens,
|
|
transactions: data?.transactions + ' Transition',
|
|
transfers: data?.transfers + ' Transfers',
|
|
}
|
|
console.log(res)
|
|
}
|
|
|
|
watchEffect(() => {
|
|
if (route.path.split('/')?.[1] != 'tokens') {
|
|
return
|
|
}
|
|
// 获取address
|
|
let address = route.path.split('/')?.[2]
|
|
requestDetails(address)
|
|
})
|
|
|
|
let open = async () => {
|
|
const res = await Qrcode.toDataURL('https://baidu.com' as string)
|
|
// 二维码生成之后
|
|
ElMessageBox.alert(`<img src="${res}" class="w-full" />`, {
|
|
showClose: false,
|
|
closeOnClickModal: true,
|
|
dangerouslyUseHTMLString: true,
|
|
confirmButtonText: 'close',
|
|
confirmButtonClass: 'text-white btn_modal',
|
|
customClass: 'mobile-modal-wrap',
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mobile-modal-wrap {
|
|
background: #2e2e31 !important;
|
|
border-radius: 28px !important;
|
|
border: none !important;
|
|
padding: 0px 85px 32px !important;
|
|
max-width: 100% !important;
|
|
.el-message-box__btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-top: 32px;
|
|
.btn_modal {
|
|
padding: 10px 28px 10px;
|
|
background: #8659ff;
|
|
border-radius: 8px;
|
|
border: none !important;
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|