Merge branch 'main' of gitlab.33.cn:HF_web/NFT

src/router/index.ts

@@ -70,7 +70,7 @@ const routes: Array<RouteConfig> = [
       name:'Nftdetail',
       component:()=> import('@/view/NFT/Detail/index.vue'),
       meta:{
-        title: ''
+        title: 'NFT详情'
       }
     },
     {

src/service/nftService.ts

@@ -54,7 +54,7 @@ export class NFTService extends Service {
    * @param id 
    * @returns 
    */
-  async getNFTdetail(id: number){
+  async getNFTdetail(id: number):Promise<any>{
       return await this.service.get(this.router.detail.path+'/'+id,{
         headers: {
           Authorization: this.getAuth(),

src/view/Home/index.vue

@@ -17,7 +17,7 @@
             <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
             <div class="list-scroll">
               <app-cardList :data='listData' v-if="listData.length" @itemOnclick='goDetail'></app-cardList>
-              <!-- <van-empty image="error" description="没有找到更多内容"  v-else/> -->
+              <van-empty  image="/img/empty.png" description="没有找到更多内容"  v-else/>
               <div class="h-12"></div>
             </div>
           </div>
@@ -74,7 +74,7 @@ export default Vue.extend({
     info(){
       console.log(222);
     },
-    goDetail(id:any){
+    goDetail(id:any){ 
       console.log(id);
       this.$router.push({ name: 'Nftdetail', params: { id: id }})
     },

src/view/NFT/Collection/index.vue

@@ -2,7 +2,13 @@
 <Layout-Child>
     <div class='w-11/12 mx-auto mt-6'>
       <div class='collection-list'>
-        <app-collectionCard v-for="i in collectionList" :key="i.id" :colletionData='i' class='mt-3'></app-collectionCard>
+
+        <div v-if="collectionList.length>1">
+            <app-collectionCard  :colletionData='i'  v-for="i in collectionList" :key="i.id" class='mt-3' @click.native="goDetail(i.id)"></app-collectionCard>
+        </div>
+        <div v-else class="mt-12">
+            <van-empty  image="/img/empty.png" description="没有找到更多内容"/>
+        </div>
       </div>
         
     </div>
@@ -27,6 +33,10 @@ export default Vue.extend({
     //    'app-cell':()=>import('@/components/common/Cell.vue'),
     //     'app-btn':()=>import('@/components/common/Btn.vue')
   },
-
+  methods:{
+    goDetail(id:any){
+      this.$router.push({ name: 'Nftdetail', params: { id: id }})
+    }
+  }
 });
 </script>

src/view/NFT/Detail/index.vue

@@ -6,7 +6,7 @@
     <div class="w-11/12 mx-auto mt-6 text-font-white">
     <SkeletonNftDetail v-if="false"/>
       <app-collectionCard :colletionData='nftData'></app-collectionCard>
-      <div class="app-icons mx-auto grid grid-cols-4 my-6">
+      <div class="app-icons mx-auto grid grid-cols-4 my-6" v-if="isOwner">
         <div
           v-for="(i, index) in apps"
           :key="index"
@@ -153,14 +153,18 @@ export default Vue.extend({
     return {
       id: this.$route.params.id,
       apps,
-      nftData:{},
+      nftData:{} as any,
       collectionData:{},
-      inMyCollection:false
+      inMyCollection:false,
+      isOwner:false,
+      user:this.$util.userMsg.getUserMsg() as any
       // loading:true
     };
   },
   async created() {
     this.nftData =await this.$service.nftService.getNFTdetail(parseInt(this.id))
+    console.log(this.nftData.wallet);
+    this.nftData.wallet == this.user.wallet? this.isOwner=true:this.isOwner=false
     await this.setMyCollection()
   },
   

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>