增加个人身份认证和流转记录

src/App.vue

@@ -89,6 +89,11 @@ export default Vue.extend({
       /**
        * 这里还需要判断是否实名，已实名才能发行NFT
        */
+      const isCertificate = localStorage.getItem('isCertificate')
+      if(!isCertificate || isCertificate == 'false') {
+        this.$toast('对不起，请先进行实名认证~')
+        return 
+      }
       this.$router.push({
         name:obj.url,
         query:{

src/service/nftService/nftService.ts

@@ -78,6 +78,18 @@ export class NFTService extends Service {
     downloadCerfificate:{
       path:"/proxyDowload/",
       dataType: 'application/json;charset=utf-8'
+    },
+    getTransferList:{
+      path:"/proxyApi/nft/transfer/record/list/",
+      dataType: 'application/json;charset=utf-8'
+    },
+    getTransferDetail:{
+      path:"/proxyApi/nft/transfer/record/detail/",
+      dataType: 'application/json;charset=utf-8'
+    },
+    certificateByIdcard:{
+      path:"/proxyApi/user/auth/person",
+      dataType: 'multipart/form-data'
     }
   }
   constructor() {
@@ -408,4 +420,42 @@ export class NFTService extends Service {
       }
     })
   }
+   /**
+  * 获取nft转让记录列表
+  */
+  async getTransferList(type:string):Promise<any>{
+    return await this.service.get(this.router.getTransferList.path+type,{
+      headers: {
+        Authorization: this.getAuth(),
+        'Content-Type': this.router.getTransferList.dataType,
+      }
+    })
+  }
+  /**
+   * 获取nft转让记录详情
+   */
+  async getTransferDetail(id:string):Promise<any>{
+    return await this.service.get(this.router.getTransferDetail.path+id,{
+      headers: {
+        Authorization: this.getAuth(),
+        'Content-Type': this.router.getTransferDetail.dataType,
+      }
+    })
+  }
+  /**
+   * 个人实名认证
+   */
+  async certificateByIdcard(front:File,back:File):Promise<any>{
+    const fl = new FormData()
+    fl.append('front',front)
+    fl.append('back',back)
+    return await this.service.post(this.router.certificateByIdcard.path,fl,{
+      headers: {
+        Authorization: this.getAuth(),
+        'Content-Type': this.router.officialNFTDetail.dataType,
+      },
+    })
+  }
 }
+
+

src/service/userService.ts

@@ -12,7 +12,8 @@ export class UserService extends Service {
         userInfo:{ path:'/proxyApi/user/detail',dataType:'application/x-www-form-urlencoded'},
         editUser:{path:'/proxyApi/user/update'},
         avatar:{ path:'/proxyApi/user/upload/avatar',dataType:'multipart/form-data'},
-        getUserInfoByAddr:{ path:'/proxyApi/user/getUserByWallet', dataType:'application/x-www-form-urlencoded'}
+        getUserInfoByAddr:{ path:'/proxyApi/user/getUserByWallet', dataType:'application/x-www-form-urlencoded'},
+        
     }
     constructor(){
         super()

src/util/userInfoUtils.ts

 
 const KEY_TOKEN = 'KEY_TOKEN'
 const KEY_USER = 'KEY_USER'
+const KEY_CERTIFICATE = 'KEY_CERTIFICATE'
 
 
 function setToken(token: string) {

src/view/Auth/index.vue

@@ -47,6 +47,9 @@ export default Vue.extend({
         this.$router.push({
           name: "Home",
         });
+        if((user as any).authStatus == 1) {
+          localStorage.setItem('isCertificate','true')
+        }
       }
     },
     async loginByCodeFunc(phone: string, code: string) {

src/view/Home/index.vue

@@ -11,7 +11,7 @@
                  </van-badge>
                  </div>
             </div>  
-            <div class=" absolute z-20 bottom-5 w-full justify-center  text-font-white">
+            <div class=" absolute z-20 bottom-8 w-full justify-center  text-font-white">
                 <!-- <div class=" px-5 py-1 w-32 mx-auto text-center bg-gradient-to-r from-app-orange to-app-purple rounded-full">
                   立即领取
                 </div> -->

src/view/NFT/Create/form.vue

@@ -39,7 +39,7 @@
           @click.native="$router.push({name:'NftPick',query:{text:`${getPreText()}题材`,id:categoryId}})"
         ></app-cell>
         <app-cell
-          text="封面(选填)"
+          text="展示封面(选填)"
           class="text-font-white my-3 text-sm"
           labelIcon="icon-wenhao"
           @clickIcon="alertCoverTip"
@@ -422,7 +422,7 @@ export default Vue.extend({
             themePlaceholder:`请选择${text}题材`,
             desText:`${text}简介`,
             desPlaceholder:`请输入${text}简介，限500字`,
-            fileUploadText:`${text}HASH计算`,
+            fileUploadText:this.categoryId != '5'?`${text}HASH计算`:'图片上传',
             filePlaceholder:`请选择${text}文件`,
             fileHashText:`${text}HASH` 
        }

src/view/NFT/Detail/index.vue

@@ -4,7 +4,8 @@
       <SkeletonNftDetail v-if="showSkelton" />
       <div v-if="$route.query.officia">
         <div class="h-80">
-          <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" />
+          <img class=" max-h-72 mx-auto" :src="nftData.cover?nftData.cover:'@/assets/img/NFTCover.png'" alt="" />
+          <!-- <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" /> -->
         </div>
         <div>
           {{ nftData.name }}
@@ -206,14 +207,15 @@
           ></app-cell>
           <div class="flex justify-center">
             <van-image
-              v-if="nftData.isCommemorate == 1"
+              v-if="nftData.isCommemorate == 1 || nftData.category == '图片'"
               class="my-3 self-center text-center"
               width="180"
               lazy-load
-              :src="nftData.fileUrl"
+              @click="downloadFile"
+              src="/img/mokeImg/查看NFT.png"
             />
             <van-image
-              v-if="nftData.isCommemorate == 0"
+              v-else-if="nftData.isCommemorate == 0"
               class="my-3 self-center text-center"
               width="180"
               lazy-load
@@ -438,7 +440,10 @@ export default Vue.extend({
           this.showSkelton = false
           return 
       }
-      await this.setMyCollection();
+      /**
+       * 这个注释后面要去掉
+       */
+       await this.setMyCollection();
     }
 
     this.showSkelton = false;

src/view/NFT/TransferDetail/index.vue

 <template>
   <Layout-Child>
-     <div class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
-        <div class=" h-52 ">
-            <!-- <img src="/img/cover.png" alt="" class=" max-h-full max-w-full mx-auto"> -->
-            <app-collectionCard :colletionData="{}"></app-collectionCard>
+     <div v-if="showSkelton" class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
+        <SkeletonNftDetail  />
+     </div>
+     <div v-else class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
+        <div class=" h-52 " v-if="transferDetail.category && transferDetail.category == '图片'">
+            <img v-if="transferDetail.cover" :src="transferDetail.cover" alt="" class=" max-h-full max-w-full mx-auto">
+            <img v-else src="/img/cover.png" alt="" class=" max-h-full max-w-full mx-auto">
+        </div>
+        <div class=" h-48 mb-5 bg-font-light-black bg-opacity-70 rounded pt-2 pb-2 pr-8 pl-8 text-font-dark-blue" v-else>
+            <div class=" flex items-center">
+                <div class=" w-2/6 h-44 mr-4 bg-imgbox">
+                  <img  v-if="transferDetail.cover" :src="transferDetail.cover" alt="" class="bg-img rounded">  
+                  <img v-else src="/img/cover.png" alt="" class="bg-img rounded">
+                </div>
+                <div class="flex-1 ">
+                    <div class=" text-white text-lg">{{transferDetail.nftName || 'NFT名称'}}</div>
+                    <div class="flex h-8">
+                        <div class=" mr-3 text-gray-400">类型</div>
+                        <div>{{transferDetail.category}}</div>
+                    </div>
+                    <div class="flex h-8">
+                        <div class=" mr-3 text-gray-400">状态</div>
+                        <div>已完成</div>
+                    </div>
+                    <div class="flex h-8">
+                        <div class=" mr-3 text-gray-400">时间</div>
+                        <div>{{transferDetail.createDate && transferDetail.createDate.substring(0,16)}}</div>
+                    </div>
+                </div>
+            </div>
         </div>
         <div class=" h-20  mt-3 border-b border-font-gray border-opacity-25">
-            <div class=" text-white">nft名称</div>
+            <div class=" text-white">{{transferDetail.nftName || 'NFT名称'}}</div>
             <div class=" text-font-dark-blue flex justify-between mt-4">
                 <div>
-                    NFT类型： <span class="text-white">插画</span>
+                    NFT类型： <span class="text-white">{{transferDetail.category}}</span>
                 </div>
                 <div>
-                    创作者： <span class="text-white">士大夫但是</span>
+                    创作者： <span class="text-white">{{transferDetail.publisher}}</span>
                 </div>
             </div>
         </div>
         <div class=" h-20 flex items-center text-font-dark-blue ">
             <div class=" rounded-full w-10 h-10">
-                <img src="/img/mokeImg/avatar.png" alt="">
+                <img v-if="transferDetail.fromAvatar" :src="transferDetail.fromAvatar" alt=""  class=" rounded-full w-10 h-10 ">
+                <img v-else src="/img/mokeImg/avatar.png" alt=""  class=" rounded-full w-10 h-10 ">
             </div>
             <div class=" ml-3 flex-1">
                 <div class="flex">
-                    <div class=" mr-2 text-white">青木</div>
+                    <div class=" mr-2 text-white">{{transferDetail.fromNickname || '转出人姓名'}}</div>
                     <div class=" w-12 bg-font-light-black text-center leading-6 text-sm rounded-xl">转出</div>
                 </div>
-                <div>4444444</div>
+                <div class=" w-64 overflow-hidden overflow-ellipsis whitespace-nowrap">{{transferDetail.fromWallet || '转出人地址'}}</div>
             </div>
             <div>
-                <img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy('333')">
+                <img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy(transferDetail.fromWallet)">
             </div>
         </div>
         <div class=" h-20 flex items-center text-font-dark-blue border-b border-font-gray border-opacity-25">
             <div class=" rounded-full w-10 h-10 ">
-                <img src="/img/mokeImg/avatar.png" alt="">
+                <img v-if="transferDetail.toAvatar" :src="transferDetail.toAvatar" alt=""  class=" rounded-full w-10 h-10 ">
+                <img v-else src="/img/mokeImg/avatar.png" alt=""  class=" rounded-full w-10 h-10 ">
             </div>
             <div class=" ml-3 flex-1">
                 <div class="flex">
-                    <div class=" mr-2 text-white">青木</div>
+                    <div class=" mr-2 text-white">{{transferDetail.toNickname || '转入人姓名'}}</div>
                     <div class="w-12 bg-font-light-black text-center text-sm leading-6 rounded-xl">接收</div>
                 </div>
-                <div>4444444</div>
+                <div class=" w-64 overflow-hidden overflow-ellipsis whitespace-nowrap">{{transferDetail.toWallet || '转入人地址'}}</div>
             </div>
             <div>
-                <img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy('444')">
+                <img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy(transferDetail.toWallet)">
             </div>
         </div>
         <div class=" text-white">
           <app-cell
             text="NFT编号"
-            :value="1111"
+            :value="transferDetail.nftId || 'nftId'"
             boxType="border"
           ></app-cell>
           <app-cell
             text="NFT HASH"
-            :name="'dfgrgrttttttttttttttttttttttttttttttttttttttttttttg'"
+            :name="transferDetail.nftHash"
             boxType="border"
             type="showText"
             :needCopy="true"
           ></app-cell>
           <app-cell
             text="转让状态"
-            :value="1111"
+            value="已完成"
             boxType="border"
           ></app-cell>
           <app-cell
             text="转让时间"
-            :value="1111"
+            :value="transferDetail.createDate"
             boxType="border"
           ></app-cell>
           <app-cell
             text="转让数量"
-            :value="1111"
+            :value="1"
             boxType="border"
           ></app-cell>
           <app-cell
             text="手续费"
-            :value="1111"
+            value="暂无"
             boxType="border"
           ></app-cell>
         </div>
@@ -87,15 +115,18 @@
 <script lang="ts">
 import Vue from "vue"
 import ClipboardJS from "clipboard";
+import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue";
 export default Vue.extend({
     data(){
         return {
+            transferDetail:{},
+            showSkelton: true
         }
     },
     components:{
         'Layout-Child':()=>import('@/layout/Child.vue'),
         "app-cell": () => import("@/components/common/Cell.vue"),
-        "app-collectionCard": () => import("@/components/CollectionCard.vue"),
+        SkeletonNftDetail
     },
     methods:{
         async handleClickCopy(text: string | number) {
@@ -114,10 +145,24 @@ export default Vue.extend({
           });
           
         },
-    }
+    },
+    async mounted(){
+        this.transferDetail = await this.$service.nftService.getTransferDetail(this.$route.params.id)
+        this.showSkelton = false
+    },
 })
 </script>
 
 <style lang="less" scoped>
-
+.bg-imgbox {
+    position: relative
+}
+.bg-img {
+    max-width: 100%;
+    max-height: 100%;
+    position:absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
 </style>
\ No newline at end of file

src/view/NFT/TransferList/index.vue

@@ -8,32 +8,36 @@
         </van-tabs> 
      </div>
 
-    <div class=" pl-5 pr-5 text-font-dark-blue overflow-y-scroll h-screen pb-48">
-        <div v-for="i in transferList" @click="$router.push(`/TransferDetail/456`)" :key="i" class=" relative h-40 mb-5 bg-font-light-black bg-opacity-70 rounded pt-4 pb-4 pr-10 pl-12">
+    <div v-if="transferList.length > 0" class=" pl-5 pr-5 text-font-dark-blue overflow-y-scroll h-screen pb-48">
+        <div v-for="i in transferList" @click="$router.push(`/TransferDetail/${i.id}`)" :key="i.id" class=" relative h-40 mb-5 bg-font-light-black bg-opacity-70 rounded pt-4 pb-4 pr-8 pl-12">
             <div class=" flex">
-                <div class=" w-2/6 h-32 mr-4">
-                  <img src="/img/cover.png" alt="" class="bg-img rounded">
+                <div class=" w-2/6 h-32 mr-4 bg-imgbox">
+                  <img  v-if="i.cover" :src="i.cover" alt="" class="bg-img rounded">  
+                  <img v-else src="/img/cover.png" alt="" class="bg-img rounded">
                 </div>
-                <div class="flex-1">
-                    <div class=" text-white text-lg">大标题</div>
+                <div class="flex-1 ">
+                    <div class=" text-white text-lg">{{i.nftName || 'NFT名称'}}</div>
                     <div class="flex h-8">
-                        <div class=" mr-4 text-gray-400">类型</div>
-                        <div>插画</div>
+                        <div class=" mr-3 text-gray-400">类型</div>
+                        <div>{{i.category}}</div>
                     </div>
                     <div class="flex h-8">
-                        <div class=" mr-4 text-gray-400">状态</div>
+                        <div class=" mr-3 text-gray-400">状态</div>
                         <div>已完成</div>
                     </div>
                     <div class="flex h-8">
-                        <div class=" mr-4 text-gray-400">时间</div>
-                        <div>2021-08-17</div>
+                        <div class=" mr-3 text-gray-400">时间</div>
+                        <div>{{i.createDate.substring(0,16)}}</div>
                     </div>
                 </div>
             </div>
-            <img src="@/assets/img/transferOut.png" alt="" class=" absolute top-0 left-0 w-10">
-            <img src="@/assets/img/transferInter.png" alt="" class=" absolute top-0 left-0 w-10">
+            <img v-if="i.transferType == 1" src="@/assets/img/transferOut.png" alt="" class=" absolute top-0 left-0 w-10">
+            <img v-else-if="i.transferType == 2" src="@/assets/img/transferInter.png" alt="" class=" absolute top-0 left-0 w-10">
         </div>
     </div>
+    <div v-else class=" text-center text-gray-500">
+        暂无数据
+    </div>
 
   </Layout-Child>
 </template>
@@ -54,34 +58,48 @@ export default Vue.extend({
                 },
                 {
                     id:'1',
-                    title:'接收',
+                    title:'转出',
                     value:'1'
                 },
                  {
                     id:'2',
-                    title:'转出',
+                    title:'接收',
                     value:'2'
                 },
             ],
             activeTransferType:'0',
-            transferList:10
+            transferList:[]
         }
     },
     components:{
         'Layout-Child':()=>import('@/layout/Child.vue'),
     },
     methods:{
-        tabChange(item:any){
-            console.log(item)
+        async tabChange(type:any){
+            await this.getTransferList(type)
+        },
+        async getTransferList(type:string){
+            const res = await this.$service.nftService.getTransferList(type)
+            this.transferList = res
         }
+    },
+    async mounted(){
+        await this.getTransferList('0')
     }
 })
 </script>
 
 <style lang="less" scoped>
+.bg-imgbox {
+    position: relative
+}
 .bg-img {
     max-width: 100%;
-    max-height: 100%
+    max-height: 100%;
+    position:absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
 }
 
 </style>
\ No newline at end of file

src/view/Safe/CertificationPersion.vue

@@ -41,8 +41,8 @@
                     <img src="/img/certification.png" alt="" class=" w-1/6 mx-auto">
                 </div>
                 <div class=" text-font-red text-xl mt-5">已实名</div>
-                <div class=" mt-10">姓名：<span>张**</span></div>
-                <div class=" mt-2">身份证号：<span>4*************7</span></div>
+                <div class=" mt-10">姓名：<span>{{successInfo.name}}</span></div>
+                <div class=" mt-2">身份证号：<span>{{successInfo.id}}</span></div>
             </div>
             <!-- 失败 -->
             <div v-else class=" text-white">
@@ -77,6 +77,10 @@ export default Vue.extend({
           bottomImgUrl:'',
           bottomImg:'',
           resultStatus: false,
+          successInfo:{
+              name:'',
+              id:''
+          }
       }
   },
   components:{
@@ -95,13 +99,19 @@ export default Vue.extend({
       }
   },
   methods:{
-      nextStep(){
+      async nextStep(){
+          this.currentStep ++
+          this.btnText = '审核中 请稍后'
+          const res = await this.$service.nftService.certificateByIdcard(this.topImg as any,this.bottomImg as any)
+          console.log('认证结果',res)
+          if(res){
+              this.resultStatus = true
+              this.successInfo.name = res.name
+              this.successInfo.id = res.idCard
+              localStorage.setItem('isCertificate','true')
+          }
           this.currentStep ++
-          this.btnText = '审核中'
-          setTimeout(()=>{
-              this.currentStep ++
-              this.btnText = '确认'
-          },3000)
+          this.btnText = '确认'
       },
       initUpload(type:string){
           if(this.currentStep == 2) {

src/view/Safe/Safe.vue

@@ -24,6 +24,8 @@ export default Vue.extend({
           if(!token.getToken()){
               this.$toast('请先登录后再试~')
               this.$router.push('/auth/login')
+          }else if(localStorage.getItem('isCertificate') == 'true'){
+              this.$toast('您已完成实名认证~')
           }else {
               this.$router.push('/certificationPersion')
           }