312

src/view/NFT/Mynft/index.vue

 <template>
-<Layout-Child>
-        <div class="nft-cardBox w-11/12 mx-auto mt-6">
-            <div class="nft-card w-full bg-font-red  text-font-white px-5 py-3  rounded-md">
-                <div class="w-full flex items-start justify-between mb-12">
-                    <div>我的NFT(个）</div>
-                    <div></div>
-                </div>
-                <div class='flex items-end justify-between flex-wrap'>
-                    <div class=' text-3xl'>{{balance}}</div>
-                    <div class=' text-xs'>{{getUserInfo.wallet}}</div>
-                </div>
-            </div>
+  <Layout-Child>
+    <div class="nft-cardBox w-11/12 mx-auto mt-6">
+      <div
+        class="nft-card w-full bg-font-red text-font-white px-5 py-3 rounded-md"
+      >
+        <div class="w-full flex items-start justify-between mb-12">
+          <div>我的NFT(个）</div>
+          <div></div>
         </div>
-        <div class="container-view w-11/12 mx-auto">
-            <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
-          <div class="myNFT-list-scroll">
-            <app-collectionCard  v-for="i in listData" :key="i.id" class="mt-3" :colletionData='i'></app-collectionCard>
-          </div>
+        <div class="flex items-end justify-between flex-wrap">
+          <div class="text-3xl">{{ balance }}</div>
+          <div class="text-xs">{{ getUserInfo.wallet }}</div>
         </div>
-</Layout-Child>
+      </div>
+    </div>
+    <div class="container-view w-11/12 mx-auto">
+      <app-scrollbar
+        :list="categoryTypes"
+        @tabChange="getDataByCategory"
+      ></app-scrollbar>
+      <div class="myNFT-list-scroll">
+        <div v-if="listData.length > 0">
+          <app-collectionCard
+            v-for="i in listData"
+            :key="i.id"
+            class="mt-3"
+            :colletionData="i"
+            @click.native="goDetail(i.id)"
+          ></app-collectionCard>
+        </div>
+
+        <div v-else class="mt-12">
+          <van-empty image="/img/empty.png" description="没有找到更多内容" />
+        </div>
+      </div>
+    </div>
+  </Layout-Child>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue from "vue";
 
 export default Vue.extend({
-    data(){
-        return{
-            categoryTypes:[] as any[],
-            listData:{},
-            currentCategory:1,
-            balance:0
-        }
-    },
-    async created(){
-      this.categoryTypes = await this.$service.nftService.getCategory()
-    },
-    async mounted() {
-      
-      await this.$service.nftService.getMyList(this.currentCategory).then(res=>{
-          this.listData = res.list
-      })
+  data() {
+    return {
+      categoryTypes: [] as any[],
+      listData: {},
+      currentCategory: 1,
+      balance: 0,
+    };
+  },
+  async created() {
+    this.categoryTypes = await this.$service.nftService.getCategory();
+  },
+  async mounted() {
+    let data = await this.$service.nftService.getMyList();
+    this.balance = data.size;
+    await this.$service.nftService
+      .getMyList(this.currentCategory)
+      .then((res) => {
+        this.listData = res.list;
+      });
+  },
+  computed: {
+    getUserInfo() {
+      return this.$util.userMsg.getUserMsg();
     },
-    computed:{
-    getUserInfo(){
-          return this.$util.userMsg.getUserMsg()
-      }
+  },
+  methods: {
+    async getDataByCategory(item: any) {
+      this.currentCategory = item.data.id;
+      await this.$service.nftService
+        .getMyList(this.currentCategory)
+        .then((res) => {
+          this.listData = res.list;
+        });
     },
-    methods: {
-      async getDataByCategory(item:any){
-        this.currentCategory = item.data.id
-         await this.$service.nftService.getMyList(this.currentCategory).then(res=>{
-            this.listData = res.list
-            this.balance = res.size
-         })
-        
-      },
+    goDetail(id: any) {
+      this.$router.push({ name: "Nftdetail", params: { id: id } });
     },
-  components:{
-      'Layout-Child':()=>import('@/layout/Child.vue'),
-      'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
-      'app-collectionCard':()=>import('@/components/CollectionCard.vue')
   },
-
+  components: {
+    "Layout-Child": () => import("@/layout/Child.vue"),
+    "app-scrollbar": () => import("@/components/common/ScrollBar.vue"),
+    "app-collectionCard": () => import("@/components/CollectionCard.vue"),
+  },
 });
 </script>