feat

components.d.ts

@@ -11,18 +11,6 @@ declare module '@vue/runtime-core' {
     BkTable: typeof import('./src/components/table/desktop/bkTable.vue')['default']
     BkTableDetails: typeof import('./src/components/table/desktop/bkTableDetails.vue')['default']
     DetailsRow: typeof import('./src/components/table/dBase/detailsRow.vue')['default']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     Footer: typeof import('./src/components/footer.vue')['default']
     Hp_card: typeof import('./src/components/base/hp_card.vue')['default']
     HpRow: typeof import('./src/components/table/dBase/hpRow.vue')['default']

src/api/TokensController/index.ts

@@ -30,7 +30,7 @@ export const getFindReceiptByTokenPage = (
 interface TokenInfoProps {
   pageNum?: number
   pageSize?: number
-  tokenId: string
+  tokenId?: string
   contractAddress: string
 }
 ///api/token/findTokenInfo

src/components/row-search.vue

@@ -40,7 +40,7 @@
             "
             @click="handleClick(item)"
           >
-            <span class="text-blue-65B5FF">{{ item.hash || '-' }}</span>
+            <span class="text-blue-65B5FF">{{ item.info || '-' }}</span>
           </div>
         </div>
       </div>
@@ -125,7 +125,6 @@ const handleEnter = (e: string | number) => {
 }
 // 处理点击
 const handleClick = (item: any) => {
-  console.log('click', item)
   // 根据type判断需要跳转到哪个页面
   let route = ''
   switch (item?.type) {
@@ -141,9 +140,16 @@ const handleClick = (item: any) => {
       route = 'tokens'
       break
     }
+    case 4: {
+      route = 'BitcNFT'
+    }
   }
   // 跳转
-  router.push(`/${route}/${item.hash}`)
+  if (item?.type == 4) {
+    router.replace(`/${route}/${item?.hash}`)
+    return
+  }
+  router.replace(`/${route}/${item.info}`)
 }
 // 修改input
 const handleChangeInput = () => {

src/components/table/constant.ts

@@ -174,6 +174,8 @@ export const tokensTableCollocate = {
   ], // 对应数据的变量名称
   // 数据颜色
   colorSequence: ['', 'text-blue-65B5FF', 'text-blue-65B5FF', '', ''],
+  // 是否跳转 / 跳转的路由
+  links: ['', 'BitcNFt', 'tokens', '', ''],
 }
 // tokensTable 表配置
 export const tokensMobileCollocate = {

src/components/table/dBase/bkRow.vue

@@ -19,7 +19,9 @@
           v-if="item !== 'result'"
           :class="colorSequence[index] || 'text-white'"
           class="text-[14px] font-medium"
-          >{{ values[item] }}
+          @click="handleClick(link?.[index])"
+        >
+          {{ values[item] }}
         </span>
         <div
           v-else
@@ -50,6 +52,7 @@
 import type { PropType } from 'vue'
 import TableTypes from '../table'
 import Icons from '@src/components/icons/index.vue'
+import { useRouter } from 'vue-router'
 const props = defineProps({
   sequence: {
     type: Array as PropType<TableTypes.tRow['sequence']>,
@@ -63,8 +66,15 @@ const props = defineProps({
     type: Array as PropType<TableTypes.tRow['colorSequence']>,
     required: true,
   },
+  link: Array,
   last: Boolean,
 })
+const router = useRouter()
+const handleClick = (route: any) => {
+  console.log(props.values)
+
+  router.replace(`/${route}/${props.values.txnContractAddress}`)
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/table/desktop/tokensTable.vue

@@ -21,13 +21,13 @@
     <div
       v-for="(item, index) in currentData"
       :key="item?.txnContractAddress + index"
-      @click="routerLink(item.txnContractAddress)"
     >
       <!-- :values="{ ...item, serialNumber: index + 1 }" -->
       <bk-row
         :sequence="invariable.sequence"
         :values="item"
         :colorSequence="invariable.colorSequence"
+        :link="invariable.links"
       />
     </div>
 
@@ -105,10 +105,10 @@ watchEffect(() => {
   initBlock(currentPage.value, input.value)
 })
 // 路由跳转
-const routerLink = (id: string | number) => {
+// const routerLink = (id: string | number) => {
-  console.log(id)
+//   console.log(id)
-  id && router.push(`/tokens/${id}`)
+//   id && router.push(`/tokens/${id}`)
-}
+// }
 </script>
 
 <style lang="scss">

src/pages/BitcNFt/centerContent.vue

@@ -4,7 +4,7 @@
   >
     <Cards
       :title="cardOptions.title"
-      :value="value"
+      :value="hashv"
       :options="cardOptions.options"
       :totalSupply="cardOptions.totalSupply"
       :qrcodeurl="'https://baidu.com'"
@@ -70,14 +70,16 @@ import {
   getContractAddressInfoList,
   getContractHoldingQuantity,
 } from '@src/api/AddressController'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, watchEffect } from 'vue'
 import holdersRow from './holdersRow.vue'
 import transfersRow from '../VNFT/transfersRow.vue'
 import Cards from './cards.vue'
 import { getFindReceiptByAddressPage } from '@src/api/TransactionsController'
+import { useRoute } from 'vue-router'
 const active = ref('tokenTransfers')
-const value = '0x4f2c168174266781008ba5d722d1bdc9ee52a874'
 
+const route = useRoute()
+const hashv = ref<string>()
 const cardOptions = reactive({
   title: '',
   options: [
@@ -99,24 +101,25 @@ const cardOptions = reactive({
 const holdrersRows = ref<any>([])
 const transfersRows = ref<any>([])
 // 请求代币信息
-const requestInfo = async () => {
+const requestInfo = async (address: string) => {
   const params = {
-    contractAddress: value,
+    contractAddress: address,
   }
   const res = await getContractAddressInfoList(params)
   const { data } = res
   cardOptions.title = data.name
+  hashv.value = data?.contractAddress
   cardOptions.totalSupply = `${data.totalSupply} ${data.name}`
   cardOptions.options[0].key = data.tokenType
   cardOptions.options[1].value = data.addressesCount
   cardOptions.options[2].value = data.transfers
 }
 // 请求Token Holders
-const requestHolders = async () => {
+const requestHolders = async (address: string) => {
   const params = {
     pageNum: 1,
     pageSize: 10,
-    contractAddress: value,
+    contractAddress: address,
   }
   const res = await getContractHoldingQuantity(params)
   holdrersRows.value = res.data.rows.map((item: any) => {
@@ -129,9 +132,9 @@ const requestHolders = async () => {
   })
 }
 // 请求Token Transfers
-const requestTransfers = async () => {
+const requestTransfers = async (address: string) => {
   const params = {
-    address: value,
+    address: address,
     pageNum: 1,
     pageSize: 10,
     filterType: 'all',
@@ -148,10 +151,11 @@ const requestTransfers = async () => {
   })
   console.log(res)
 }
-onMounted(() => {
+watchEffect(() => {
-  requestInfo()
+  let address = route.path.split('/')?.[2]
-  requestHolders()
+  requestInfo(address)
-  requestTransfers()
+  requestHolders(address)
+  requestTransfers(address)
 })
 </script>
 

src/routes.ts

@@ -66,10 +66,22 @@ const routes: VueRouter.RouteRecordRaw[] = [
   {
     path: '/BitcNFT',
     component: BitcNFT,
+    children: [
+      {
+        path: '/BitcNFT/:id',
+        component: BitcNFT,
+      },
+    ],
   },
   {
     path: '/VNFT',
     component: AliasVNFT,
+    children: [
+      {
+        path: '/VNFT/:id',
+        component: AliasVNFT,
+      },
+    ],
   },
 ]