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

package.json

@@ -14,12 +14,14 @@
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
+    "epic-spinners": "^1.1.0",
     "lodash": "^4.17.21",
     "register-service-worker": "^1.7.1",
     "validator": "^13.6.0",
     "vant": "^2.12.22",
     "vconsole": "^3.7.0",
     "vue": "^2.6.11",
+    "vue-content-loading": "^1.6.0",
     "vue-fragment": "^1.5.2",
     "vue-router": "^3.2.0",
     "vue-step-progress": "^0.3.6",

src/components/common/Cell.vue

@@ -30,7 +30,6 @@
         <input
           v-model="inputValue"
           type="text"
-          :maxlength="validate.maxLen"
           class="bg-transparent"
           :placeholder="placeholder"
           @input="cellOnChange"
@@ -152,9 +151,6 @@ export default Vue.extend({
       type: String,
       required: true,
     },
-    validate:{
-      type:Object,
-    },
     icon: String,
     labelIcon: String,
     placeholder: {

src/service/nftService.ts

@@ -30,6 +30,14 @@ export class NFTService extends Service {
       path: '/category/list',
       dataType: 'application/x-www-form-urlencoded',
     },
+    editCollection:{
+      path: '/collection/add',
+      dataType: 'application/x-www-form-urlencoded'
+    },
+    getCollectionList:{
+      path: '/collection/list',
+      dataType: 'application/x-www-form-urlencoded',
+    }
   }
   constructor() {
     super()
@@ -38,21 +46,51 @@ export class NFTService extends Service {
 
 
   private getAuth(){
-    return 'Bearer '+ token.getToken()
+    return  'Bearer '+ token.getToken()
   }
 
-
+  /**
+   * 获取NFT的详细信息
+   * @param id 
+   * @returns 
+   */
   async getNFTdetail(id: number){
-
       return await this.service.get(this.router.detail.path+'/'+id,{
         headers: {
           Authorization: this.getAuth(),
           'Content-Type': this.router.detail.dataType,
-        }
-    
+        },
+
       })
   }
 
+  /**
+   * 操作用户的收藏夹
+   * @param id 
+   * @returns 
+   */
+  async editCollection(id:number){
+    return await this.service.post(this.router.editCollection.path,{},{
+      headers: {
+        Authorization: this.getAuth(),
+        'Content-Type': this.router.editCollection.dataType,
+      },
+      params:{
+        id:id
+      }
+    })
+  }
+
+
+  async getCollection():Promise<any[]>{
+
+    return await this.service.get(this.router.getCollectionList.path,{
+      headers: {
+        Authorization: this.getAuth(),
+        'Content-Type': this.router.editCollection.dataType,
+      }
+    })
+  }
 
 
   /**

src/style.less

@@ -71,6 +71,10 @@ body{
     height: calc(100vh - 290px);
     overflow-y: scroll;
   }
+  .collection-list{
+    height: calc(100vh - 60px);
+    overflow-y: scroll;
+  }
   .van-dialog{
     background-color: #1D2649;
 

src/view/Home/index.vue

@@ -12,11 +12,22 @@
             <img src="@/assets/img/banner.png"  class="w-full z-0">
         </div>
         <div class="container-view w-11/12 mx-auto">
-          <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/>
-            <div class="h-12"></div>
+
+          <div v-if="ready">
+            <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/> -->
+              <div class="h-12"></div>
+            </div>
+          </div>
+          <div class="flex flex-col items-center w-full pt-16 justify-center" v-else>
+             <breeding-rhombus-spinner
+                    :animation-duration="2000"
+                    :size="60"
+                    :color="'#0078FF'"
+              />
+              <div class=" mt-6  text-font-white">loading...</div>
           </div>
         </div>
     </Layout-Main>
@@ -26,7 +37,7 @@
 import Vue from 'vue';
 import { Badge } from 'vant';
 import { Empty } from 'vant';
-
+import {BreedingRhombusSpinner} from 'epic-spinners'
 Vue.use(Empty);
 Vue.use(Badge)
 export default Vue.extend({
@@ -36,14 +47,16 @@ export default Vue.extend({
       currentCategory:1,
       currentPage:1,
       pagesize:100,
-      listData:[] as any
+      listData:[] as any,
+      ready:false,
     }
   },
   components:{ 
     'Layout-Main':()=>import('@/layout/Main.vue'),
     'app-icon':()=>import('@/components/common/Icon.vue'),
     'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
-    'app-cardList':()=>import('@/components/CardList.vue')
+    'app-cardList':()=>import('@/components/CardList.vue'),
+    'breeding-rhombus-spinner': BreedingRhombusSpinner
   }, 
   name: 'Home',
   async created(){
@@ -51,6 +64,7 @@ export default Vue.extend({
   },
   async mounted() {
      this.listData = await this.$service.nftService.getList(this.currentPage,this.pagesize,this.currentCategory)
+     this.ready = true
   },
   methods:{
     search(){

src/view/NFT/Collection/index.vue

 <template>
 <Layout-Child>
     <div class='w-11/12 mx-auto mt-6'>
-        <app-collectionCard></app-collectionCard>
+      <div class='collection-list'>
+        <app-collectionCard v-for="i in collectionList" :key="i.id" :colletionData='i' class='mt-3'></app-collectionCard>
+      </div>
+        
     </div>
 </Layout-Child>
 </template>
@@ -10,11 +13,20 @@
 import Vue from 'vue';
 
 export default Vue.extend({
+  data(){
+    return{
+      collectionList:{}
+    }
+  },
+  async created(){
+    this.collectionList = await this.$service.nftService.getCollection()
+  },
   components:{
        'Layout-Child':()=>import('@/layout/Child.vue'),
        'app-collectionCard':()=>import('@/components/CollectionCard.vue')
     //    'app-cell':()=>import('@/components/common/Cell.vue'),
     //     'app-btn':()=>import('@/components/common/Btn.vue')
   },
+
 });
 </script>

src/view/NFT/Detail/index.vue

@@ -110,12 +110,15 @@
         </div>
         <div class="fixed bottom-0 w-full left-0 z-30 flex items-center px-5 shadow-nav"> 
             <div class='flex-grow-0'>
-                <app-icon name='icon-heart' size='25px'></app-icon>
+                <div @click='editCollection'>
+                    <app-icon name='icon-heart1' size='25px' v-if="inMyCollection" color='#ED6F6F'></app-icon>
+                   <app-icon name='icon-heart' size='25px' v-else></app-icon>
+
+                </div>
             </div>
             <div class='flex-grow pl-8'>
                   <app-btn text="查看剧本" class=" w-full mx-auto text-font-white rounded-2xl bg-font-blue"  border='none' ></app-btn>
             </div>
-          
         </div>
     </div>
 
@@ -149,15 +152,14 @@ export default Vue.extend({
       id: this.$route.params.id,
       apps,
       nftData:{},
+      collectionData:{},
+      inMyCollection:false
       // loading:true
     };
   },
   async created() {
     this.nftData =await this.$service.nftService.getNFTdetail(parseInt(this.id))
-    // const str ='safkjdshafosofol123 dfd'
-    // const strVal = this.$util.validator.isByteLength(str,{min:1,max:16})
-    // console.log(strVal);
-    
+    await this.setMyCollection()
   },
   
   components: {
@@ -169,5 +171,27 @@ export default Vue.extend({
     //  'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
     "app-collectionCard":  () => import("@/components/CollectionCard.vue"),
   },
+  methods:{
+    async setMyCollection():Promise<void>{
+      let list = await this.$service.nftService.getCollection()
+      if(list.find(i=> i.id == this.id)){
+        this.inMyCollection = true
+      }else{
+        this.inMyCollection = false
+      }
+    },
+    async editCollection(){
+      await this.$service.nftService.editCollection(parseInt(this.id)).then(async (res)=>{
+        if(res){
+          await this.setMyCollection()
+          if(this.inMyCollection){
+            this.$toast.success('NFT已经收藏成功')
+          }else {
+            this.$toast.success('NFT已从我的收藏中移除')
+          }
+        }
+      })
+    }
+  }
 });
 </script>