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.
122 lines
3.3 KiB
122 lines
3.3 KiB
<template>
|
|
<div class="flex flex-col py-[16px]" @click="handleClick">
|
|
<div class="flex flex-1 flex-row max-w-[255px] items-center">
|
|
<Icons url="info" :size="14" />
|
|
<p class="ml-[7px] text-gray-BBB text-[14px] font-normal">{{ title }}</p>
|
|
</div>
|
|
<div class="flex flex-1 flex-row justify-start items-center mt-[15px]">
|
|
<div
|
|
:class="valueColor || 'text-white'"
|
|
class="text-[15px] font-normal break-all"
|
|
>
|
|
<div v-if="title === 'Tokens Transferred'">
|
|
<div
|
|
class="flex flex-col pl-[20px]"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
>
|
|
<div class="flex flex-1 flex-row items-center mt-[15px]">
|
|
<p class="text-gray-BBB text-[14px] font-normal">
|
|
{{ item }}
|
|
</p>
|
|
</div>
|
|
<p class="text-[15px] font-normal text-blue-65B5FF break-all">
|
|
<span>
|
|
{{ listData[item] }}
|
|
<Icons
|
|
v-if="isCopy"
|
|
url="filter_none"
|
|
:size="24"
|
|
class="ml-[10px] inline"
|
|
/>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="title === 'Result'"
|
|
class="flex flex-row items-center rounded-[4px] px-[12px] py-[4px] min-w-[87px]"
|
|
:class="value === 'Success' ? 'bg-green-2EAA7D' : 'bg-red-C4403E'"
|
|
>
|
|
<Icons
|
|
:url="value === 'Success' ? 'check_circle' : 'cancel'"
|
|
:size="12"
|
|
/>
|
|
<span class="ml-[2px] text-[12px]">
|
|
{{ value }}
|
|
</span>
|
|
</div>
|
|
<span v-if="title !== 'Result' && title !== 'Tokens Transferred'">
|
|
{{ value }}
|
|
<div @click="handleCopy">
|
|
<Icons
|
|
v-if="isCopy"
|
|
url="filter_none"
|
|
:size="24"
|
|
class="ml-[10px] inline"
|
|
/>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="border-bottom: 1px solid #3b3b3c" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Icons from '@src/components/icons/index.vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { ref, watchEffect } from 'vue'
|
|
import useClipboard from 'vue-clipboard3'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const props = defineProps({
|
|
title: String,
|
|
value: [String, Object] as any,
|
|
valueColor: String,
|
|
isCopy: Boolean,
|
|
link: String,
|
|
})
|
|
const list = ref<string[]>([])
|
|
const listData = ref<any>({})
|
|
|
|
const { toClipboard } = useClipboard()
|
|
|
|
const handleCopy = async () => {
|
|
const value = props.value?.toString() || ''
|
|
try {
|
|
await toClipboard(value)
|
|
ElMessage({
|
|
message: 'copy success!',
|
|
type: 'success',
|
|
})
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
watchEffect(() => {
|
|
if (typeof props.value === 'object') {
|
|
let data = props.value[0]
|
|
let forValue
|
|
list.value = ['Form', 'To', 'For']
|
|
if (data.tokenType === 'ERC721') {
|
|
forValue = parseInt(data.tokenId)
|
|
}
|
|
// 赋值
|
|
listData.value = {
|
|
Form: props.value[0]?.from,
|
|
To: props.value[0]?.to,
|
|
For: forValue,
|
|
symbol: props.value[0]?.symbol,
|
|
}
|
|
}
|
|
})
|
|
|
|
const router = useRouter()
|
|
const handleClick = () => {
|
|
router.replace(`/${props.link}/${props.value}`)
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|
|
|