From 0913dc7232891dd53891e341d6a51902b6864c20 Mon Sep 17 00:00:00 2001
From: fave3722 <372276175@qq.com>
Date: Tue, 13 Sep 2022 12:04:01 +0800
Subject: [PATCH] feat

---
 components.d.ts                               |  1 +
 .../table/dBase/tokensDetailsRow.vue          | 44 ++++++++++------
 src/components/table/dBase/transfersRow.vue   | 25 +++++++--
 .../table/desktop/tokensDetails.vue           |  5 +-
 .../table/desktop/transactDetails.vue         | 13 ++++-
 .../table/mBase/tokensDetailsRow.vue          | 51 ++++++++++++-------
 src/components/table/mobile/tokensDetails.vue |  5 +-
 src/pages/TableBlock/Tokens/details.vue       |  7 ++-
 8 files changed, 108 insertions(+), 43 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index ea66189..dc4aea1 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/components/table/dBase/tokensDetailsRow.vue b/src/components/table/dBase/tokensDetailsRow.vue
index a6785ca..66e986a 100644
--- a/src/components/table/dBase/tokensDetailsRow.vue
+++ b/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-option
-          v-for="(item, index) in value"
-          :key="index + item"
-          :label="item + 'token'"
-          :value="item"
-          class="text-white"
-        />
-      </el-select>
+      <el-popover placement="bottom" :width="250" trigger="click">
+        <template #reference>
+          <!-- <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"
+              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(() => {
-  console.log(props.title)
+watchEffect(() => {
   if (props.title === 'Tokens') {
     list.value = props.value
+    console.log(list.value)
   }
 })
-
-const list = ref<string | number[]>([])
-const active = ref('')
 </script>
 
 <style lang="scss">
diff --git a/src/components/table/dBase/transfersRow.vue b/src/components/table/dBase/transfersRow.vue
index b7dbe80..00245a8 100644
--- a/src/components/table/dBase/transfersRow.vue
+++ b/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>
diff --git a/src/components/table/desktop/tokensDetails.vue b/src/components/table/desktop/tokensDetails.vue
index efaf843..b0d75af 100644
--- a/src/components/table/desktop/tokensDetails.vue
+++ b/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)
diff --git a/src/components/table/desktop/transactDetails.vue b/src/components/table/desktop/transactDetails.vue
index 450f88f..92d1ee2 100644
--- a/src/components/table/desktop/transactDetails.vue
+++ b/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>
 
diff --git a/src/components/table/mBase/tokensDetailsRow.vue b/src/components/table/mBase/tokensDetailsRow.vue
index f553de4..efc482b 100644
--- a/src/components/table/mBase/tokensDetailsRow.vue
+++ b/src/components/table/mBase/tokensDetailsRow.vue
@@ -9,22 +9,39 @@
         {{ title }}
       </p>
     </div>
-    <!-- <div
-      class="flex flex-1 flex-row justify-start items-center mt-[15px] tokens-select"
+    <div
+      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-option
-          v-for="(item, index) in value"
-          :key="index"
-          :label="item + 'token'"
-          :value="item"
-          class="text-white"
-        />
-      </el-select>
-    </div> -->
+      <el-popover placement="bottom" :width="250" trigger="click">
+        <template #reference>
+          <!-- <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"
+              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 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,
 })
-
-onMounted(() => {
-  console.log(props.title)
+const list = ref<any>([])
+watchEffect(() => {
   if (props.title === 'Tokens') {
     list.value = props.value
   }
 })
-
-const list = ref<string | number[]>([])
 </script>
 
 <style lang="scss">
diff --git a/src/components/table/mobile/tokensDetails.vue b/src/components/table/mobile/tokensDetails.vue
index 19313e7..f2869d4 100644
--- a/src/components/table/mobile/tokensDetails.vue
+++ b/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)
diff --git a/src/pages/TableBlock/Tokens/details.vue b/src/pages/TableBlock/Tokens/details.vue
index 58df272..843aacd 100644
--- a/src/pages/TableBlock/Tokens/details.vue
+++ b/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