321

src/layout/Child.vue

@@ -3,17 +3,24 @@
   <div id="Child" class="bg-font-black">
     <van-overlay :show="CodeData.show"  class='z-50'>
       <div class="code-confirm flex flex-row item-center content-center justify-center text-font-white h-full" @click.stop>
-        <div class="self-center bg-font-light-black rounded-lg">
-            <div class=" flex flex-col  text-font-white  p-6 ">
-               <div class=' text-font-dark-blue'>安全验证</div>
+        <div class="self-center  rounded-lg" :class="!CodeData.onAction?'bg-font-light-black':''">
+            <div class=" flex flex-col  text-font-white  p-6 px-10" v-if="!CodeData.onAction">
+               <div class=' text-font-dark-blue flex justify-between'>
+                 <div>安全验证</div>
+                  <app-icon name="icon-shanchu"  size="8px" @click.native="closeOverlay"></app-icon>
+               </div>
                <div class='text-xs my-1'>验证码已发送到您绑定的手机</div>
                <input type="number"  class=" bg-font-black py-2 px-1 w-48 my-3" v-model="codeValue" placeholder="请输入验证码">
-               <div class=' text-font-dark-blue text-xs self-end'> <span v-if="CodeData.resend"> {{CodeData.count}}秒后,重新发送</span> <span v-else class='text-font-blue'> 重新发送</span></div>
+               <div class=' text-font-dark-blue text-xs self-end'> <span v-if="!CodeData.resend"> {{CodeData.count}}秒后,重新发送</span> <span v-else class='text-font-blue' @click="resendCode"> 重新发送</span></div>
+            </div>
+            <div class="flex flex-col items-center w-full  justify-center" v-else>
+              <breeding-rhombus-spinner
+                      :animation-duration="2000"
+                      :size="60"
+                      :color="'#0078FF'"
+                />
+                <div class=" mt-6  text-font-dark-blue">NFT正在转出，请耐心等待...</div>
             </div>
-            <!-- <div class='flex w-10/12 mx-auto justify-between'>
-              <app-btn text="取消" class=" text-font-gray"></app-btn>
-              <app-btn text="确认" class=' text-font-blue'></app-btn>
-            </div> -->
         </div>
       </div>
     </van-overlay>
@@ -30,6 +37,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import NavHeader from './NavHeader.vue'
+import {BreedingRhombusSpinner} from 'epic-spinners'
 export default Vue.extend({
   data(){
     return{
@@ -37,10 +45,26 @@ export default Vue.extend({
     }
   },
   watch:{
-    codeValue(newV,oldV){
+    async codeValue(newV,oldV){
       console.log(newV.length);
       if(newV.length==4){
-        console.log('send'); 
+        const {nftid,count,receiveWallet} =this.formData
+        const data = {
+          id:Number(nftid),
+          count:Number(count),
+          receiveWallet,
+          code:Number(newV),
+          codeType:'sms'
+        }
+        console.log(data,this.formData);
+        const req = await this.$store.dispatch('codeConfirmer/doTransfer',data)
+        console.log(req);
+        if(req&&!req.message){
+          this.$router.push({name:'Home'})
+          this.$toast.success('NFT已经成功转出')
+        }else{
+          this.$toast.fail(req.message || '发送失败')
+        }
       }else if(newV.length>4){
         this.codeValue = oldV
       }
@@ -49,11 +73,28 @@ export default Vue.extend({
   computed:{
     CodeData:function(){
       return this.$store.state.codeConfirmer
-    }
+    },
+    formData:function(){
+      return this.$store.state.transfer
+    },
+
   },
   name: 'layout_child',
+  methods:{
+    async resendCode(){
+      const req = await this.$store.dispatch('codeConfirmer/getVertiryCode')
+      console.log(req);
+    },
+    closeOverlay(){
+      if(this.$store.state.codeConfirmer.show){
+          this.$store.commit('codeConfirmer/ToggleCode')
+      }
+    }
+  },
   components:{
     NavHeader,
+    'app-icon':()=>import('@/components/common/Icon.vue'),
+     'breeding-rhombus-spinner': BreedingRhombusSpinner
     // 'app-btn':()=>import('@/components/common/Btn.vue')
   }
 });

src/service/Service.ts

@@ -32,21 +32,25 @@ export class Service {
                 }
                 return ret
             }else {
-
                 if(ret.code === 401){
                     await logoutUser().then(()=>{
                         router.push({name:'Login'})
                     })
                 }
+                console.log(ret,'err ret');
+                
                 Toast.fail(typeof ret.data === "string" ? ret.data : ret.message)
-                throw new Error(ret.message)
+                return ret;
+                // throw new Error(ret.message)
+                
             }
         }
         this.service.get = (...res) => get(...res).then(ret => resolveData(ret.data)).catch(err => {
             resolveData(err.response.data)
+   
         })
         this.service.post = (...res) => post(...res).then(ret =>  resolveData(ret.data)).catch(err => {
-          resolveData(err.response.data)
+            err.response?resolveData(err.response.data): err
         });
     }
 

src/service/nftService/nftService.ts

@@ -351,7 +351,7 @@ export class NFTService extends Service {
    * @param data NftTransferDTO
    * @returns 
    */
-  async nftTransfer(data:NftTransferDTO){
+  async nftTransfer(data:NftTransferDTO): Promise<any>{
     return this.service.post(this.router.nftTransfer.path,data,{
       headers: {
         Authorization: this.getAuth()
@@ -359,7 +359,7 @@ export class NFTService extends Service {
     })
   }
 
-  async sendTransferCode(){
+  async sendTransferCode(): Promise<any>{
     return await this.service.post(this.router.sendTransferCode.path,{},{
       headers: {
         Authorization: this.getAuth(),

src/store/codeConfimer.ts

@@ -8,6 +8,7 @@ const stateData = {
     counter:null as any,
     value:null as any,
     resend:false,
+    onAction:false,
   }
   
   export type CodeType = typeof stateData
@@ -18,10 +19,8 @@ const stateData = {
     }),
     mutations: {
         CountDown(state:CodeType):void{
-          console.log(state.count);
-          if(!state.counter){
            state.counter = setInterval(()=>{
-              if(state.count>-1){
+              if(state.count>0){
                 state.resend = false
                 state.count--
               }else{
@@ -30,7 +29,6 @@ const stateData = {
                 clearInterval(state.counter)
               }
             },1000)
-          }
         },
         SET_CODE(state:CodeType,payload:any){
           state.value = payload
@@ -41,15 +39,34 @@ const stateData = {
 
     },
     actions: {
-      async openCodeConfirm({commit,state} :any){
-        if(!state.show){
-          commit('ToggleCode') 
-          console.log(state.count);
-          
+      // async getVertiryCode(){
+      //   const code = await nftService.sendTransferCode()
+      //   return code 
+      // },
+      async getVertiryCode({commit,state} :any){
+          if(state.count == 30){
+            const req = await nftService.sendTransferCode()
+            console.log(req);
+            if(req){
               commit('CountDown')
-          await nftService.sendTransferCode()
+            }
+            return req 
           }
       },
+      async doTransfer({commit,state} :any,payload:any){
+          state.onAction =true
+         const req =  await nftService.nftTransfer(payload)
+         if(state.show){
+          commit('ToggleCode')
+         }
+         console.log(req,'nftTransfer',req.code);
+         if(req&&!req.message){
+          clearInterval(state.counter)
+          state.count=30
+         }
+         state.onAction = false
+         return req
+      }
     },
     getters: {},
   }

src/view/NFT/Mynft/index.vue

@@ -85,7 +85,6 @@ export default Vue.extend({
      
       this.defaultIndex = index
     }
- console.log(this.defaultIndex);
      this.categoryTypes = cates
   },
   async mounted() {

src/view/NFT/Transfer/confirm.vue

@@ -43,7 +43,10 @@ export default Vue.extend({
   },
   methods:{
       submitTransfer(){
-          this.$store.dispatch('codeConfirmer/openCodeConfirm')
+          if(!this.$store.state.codeConfirmer.show){
+            this.$store.commit('codeConfirmer/ToggleCode')
+            this.$store.dispatch('codeConfirmer/getVertiryCode')
+          } 
       }
   },
   computed:{