feat

components.d.ts

@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' {
     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']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']

src/components/table/dBase/tokensDetailsRow.vue

@@ -10,15 +10,31 @@
       class="flex flex-1 flex-row justify-start items-center tokens-select"
       v-if="title === 'Tokens'"
     >
-      <el-select v-model="active" placeholder="Select">
+      <el-popover placement="bottom" :width="250" trigger="click">
-        <el-option
+        <template #reference>
-          v-for="(item, index) in value"
+          <!-- <el-button style="margin-right: 16px">{}</el-button> -->
-          :key="index + item"
+          <p
-          :label="item + 'token'"
+            class="cursor-pointer text-white border border-white px-[8px] py-[2px]"
-          :value="item"
+          >
-          class="text-white"
+            {{ list?.length || 0 }} token
-        />
+          </p>
-      </el-select>
+        </template>
+        <template #default>
+          <div class="h-[200px] overflow-y-scroll">
+            <div
+              v-for="(item, index) in list"
+              :key="index"
+              class="border-b py-[8px]"
+            >
+              <p class="ml-[24px]">{{ item?.tokenType }}</p>
+              <p class="mt-[12px]">{{ item?.name }} &nbsp;</p>
+              <p class="ml-[24px]">
+                {{ `${item?.availableBalance}${item?.name}` }}
+              </p>
+            </div>
+          </div>
+        </template>
+      </el-popover>
     </div>
     <div
       class="flex flex-1 flex-row justify-start items-center text-white"
@@ -45,7 +61,7 @@
 <script setup lang="ts">
 import { ElSelect, ElOption } from 'element-plus'
 import Icons from '@src/components/icons/index.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 const props = defineProps({
   title: String,
   value: [Number, String, Array] as any,
@@ -53,16 +69,14 @@ const props = defineProps({
   isCopy: Boolean,
   isLast: Boolean,
 })
+const list = ref<any>([])
 
-onMounted(() => {
+watchEffect(() => {
-  console.log(props.title)
   if (props.title === 'Tokens') {
     list.value = props.value
+    console.log(list.value)
   }
 })
-
-const list = ref<string | number[]>([])
-const active = ref('')
 </script>
 
 <style lang="scss">

src/components/table/dBase/transfersRow.vue

@@ -4,15 +4,28 @@
   >
     <div>
       <p class="text-white text-[16px] font-medium">{{ title }}</p>
-      <p class="text-gray-BBB text-[14px] font-normal mt-[12px]">
+      <p
+        class="text-gray-BBB text-[14px] font-normal mt-[12px] cursor-pointer"
+        @click="handleRouter(`/tx/${value1}`)"
+      >
         {{ value1 }}
       </p>
       <div
         class="text-gray-BBB text-[14px] font-normal flex flex-row items-center mt-[12px]"
       >
-        <p class="mr-[10px]">{{ value2 }}</p>
+        <p
+          class="mr-[10px] cursor-pointer"
+          @click="handleRouter(`/tokens/${value2}`)"
+        >
+          {{ value2 }}
+        </p>
         <Icons url="chevron_right" :size="16" />
-        <p class="ml-[10px]">{{ value3 }}</p>
+        <p
+          class="ml-[10px] cursor-pointer"
+          @click="handleRouter(`/tokens/${value3}`)"
+        >
+          {{ value3 }}
+        </p>
       </div>
     </div>
     <div
@@ -32,13 +45,19 @@
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
+import { useRouter } from 'vue-router'
 defineProps({
   title: [String, Number],
   value1: String,
   value2: String,
   value3: String,
   state: String,
+  route: Function,
 })
+const router = useRouter()
+const handleRouter = (route: string) => {
+  router.replace(route)
+}
 </script>
 
 <style scoped></style>

src/components/table/desktop/tokensDetails.vue

@@ -48,7 +48,7 @@ const requestDetails = async (address: string) => {
   const { data } = res
   currentData.value = {
     ...data,
-    // tokens: data.tokens,
+    tokens: data?.tokens,
     transactions: data?.transactions + ' Transition',
     transfers: data?.transfers + ' Transfers',
   }
@@ -56,6 +56,9 @@ const requestDetails = async (address: string) => {
 }
 
 watchEffect(() => {
+  if (route.path.split('/')?.[1] != 'tokens') {
+    return
+  }
   // 获取address
   let address = route.path.split('/')?.[2]
   requestDetails(address)

src/components/table/desktop/transactDetails.vue

@@ -4,7 +4,7 @@
   >
     <transact-details-row
       v-for="(item, index) in invariable.labels"
-      :key="index + item"
+      :key="index"
       :title="item"
       :value="currentData?.[invariable.sequence[index]]"
       :value-color="invariable.colorSequence[index]"
@@ -27,7 +27,16 @@ const invariable = {
 const currentData = ref()
 watchEffect(() => {
   currentData.value = props.data
-  console.log(currentData.value)
+  if (props?.data && props.data?.receiptList.length === 0) {
+    invariable.labels = invariable.labels.filter(
+      (t) => t !== 'Tokens Transferred'
+    )
+    invariable.sequence = invariable.sequence.filter((t) => t !== 'receiptList')
+    invariable.colorSequence = invariable.colorSequence.filter(
+      (t, i) => i !== 5
+    )
+    invariable.isCopys = invariable.isCopys.filter((t, i) => i !== 5)
+  }
 })
 </script>
 

src/components/table/mBase/tokensDetailsRow.vue

@@ -9,22 +9,39 @@
         {{ title }}
       </p>
     </div>
-    <!-- <div
+    <div
-      class="flex flex-1 flex-row justify-start items-center mt-[15px] tokens-select"
+      class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
       v-if="title === 'Tokens'"
     >
-      <el-select v-model="active" placeholder="Select">
+      <el-popover placement="bottom" :width="250" trigger="click">
-        <el-option
+        <template #reference>
-          v-for="(item, index) in value"
+          <!-- <el-button style="margin-right: 16px">{}</el-button> -->
+          <p
+            class="cursor-pointer text-white border border-white px-[8px] py-[2px]"
+          >
+            {{ list?.length || 0 }} token
+          </p>
+        </template>
+        <template #default>
+          <div class="h-[200px] overflow-y-scroll">
+            <div
+              v-for="(item, index) in list"
               :key="index"
-          :label="item + 'token'"
+              class="border-b py-[8px]"
-          :value="item"
+            >
-          class="text-white"
+              <p class="ml-[24px]">{{ item?.tokenType }}</p>
-        />
+              <p class="mt-[12px]">{{ item?.name }} &nbsp;</p>
-      </el-select>
+              <p class="ml-[24px]">
-    </div> -->
+                {{ `${item?.availableBalance}${item?.name}` }}
+              </p>
+            </div>
+          </div>
+        </template>
+      </el-popover>
+    </div>
     <div
       class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
+      v-else
     >
       <p
         :class="
@@ -45,9 +62,8 @@
 </template>
 
 <script setup lang="ts">
-import { ElSelect, ElOption } from 'element-plus'
 import Icons from '@src/components/icons/index.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 const props = defineProps({
   title: [String, Number] as any,
   value: [Number, String, Array] as any,
@@ -55,15 +71,12 @@ const props = defineProps({
   isCopy: Boolean,
   isLast: Boolean,
 })
-
+const list = ref<any>([])
-onMounted(() => {
+watchEffect(() => {
-  console.log(props.title)
   if (props.title === 'Tokens') {
     list.value = props.value
   }
 })
-
-const list = ref<string | number[]>([])
 </script>
 
 <style lang="scss">

src/components/table/mobile/tokensDetails.vue

@@ -47,7 +47,7 @@ const requestDetails = async (address: string) => {
   const { data } = res
   currentData.value = {
     ...data,
-    // tokens: data.tokens,
+    tokens: data?.tokens,
     transactions: data?.transactions + ' Transition',
     transfers: data?.transfers + ' Transfers',
   }
@@ -55,6 +55,9 @@ const requestDetails = async (address: string) => {
 }
 
 watchEffect(() => {
+  if (route.path.split('/')?.[1] != 'tokens') {
+    return
+  }
   // 获取address
   let address = route.path.split('/')?.[2]
   requestDetails(address)

src/pages/TableBlock/Tokens/details.vue

@@ -155,7 +155,7 @@ import TokenDetails from '@src/components/table/desktop/tokensDetails.vue'
 import TokenMobileDetails from '@src/components/table/mobile/tokensDetails.vue'
 import mobileRow from '@src/pages/VNFT/mobileRow.vue'
 
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
@@ -223,7 +223,10 @@ const rqeuestTokensData = async (address: string) => {
   })
   console.log(res)
 }
-onMounted(() => {
+watchEffect(() => {
+  if (route.path.split('/')?.[1] != 'tokens') {
+    return
+  }
   // 获取地址
   let address = route.path.split('/')?.[2]
   // 根据地址请求tab