第七课：MAC去中心化钱包开发之首页

一.前言

在上一讲中，我们创建了钱包账户，备份了私钥，但是我们还是无法使用它，最基础的功能就是登录钱包、查看钱包资产、转账、查看转账记录等等，今天我们先把登录和首页搭建好。

二.登录页面

用到的合约： 验证账户密码合约

调用示例：不再粘贴所有代码，如需查看请直接下载！

	  <script type="text/javascript">
      //登录方法
      function login(){
        var token=$('#token').val();
        var password=$('#password').val();
        var sign=Sign_Born('','',password);
        var url="";
        var datas={
           action: 'VerifyTokenAcc',
           token: token,
           sign:sign
       }
        H.toastLoading();
        ajaxRequestWap(url,'post',datas,function(ret){
          H.closeToast();
          setLocalData('token', token);
          if(ret.errCode==0){
            H.openWin('index', 'index.html');
          }else{
            H.toastTip(null, ret.Msg, 2000);
          }
         })
      }
    </script>

三.首页

由于这是新建的账户，所以没有任何资产和交易记录，然后我用其它的账户转一笔进来就能看到可用增加了，然后记录也有了，如下图

用到的合约：
资产查询合约
交易检索根据Token

调用示例：不再粘贴所有代码，如需查看请直接下载！

<script type="text/javascript">
      H.ready(function () {
        $("#tokenaddress").html(getLocalData("token"));
        GetAssetBalanceAds();
        GetTransactionList0();
      });
      //资产余额查询
      function GetAssetBalanceAds(){
        var token=getLocalData("token");
        var datas={
           action: 'TOKENBALANCE',
           token: token
       }
        ajaxRequestWap('','post',datas,function(ret){
          if(ret.errCode==0){
            $("#AssetBalance").html(ret.amount_live);
            $("#LockedBalance").html(ret.amount_lock);
          }else{
            H.toastTip(null, ret.Msg, 2000);
          }
        })
      }
      //转账记录全部
      function GetTransactionList0(){
        var token=getLocalData("token");
        var datas={
           action: 'GetTokenTRecord',
           token: token,
           jytype:0,
           pageevery:10,
           page:1
       }
       H.toastLoading();
        ajaxRequestWap('','post',datas,function(ret){
          H.closeToast();
          if(ret.Allnum==0){
            $("#tab0").html("<div class=\"H-font-size-14 H-padding-10\">暂无交易记录</div>");
            return;
          }
          if(ret.errCode==0){
            var html="";
            for(var i=0;i<ret.Content.length;i++){
              html+=GetTransactionHtml(token,ret.Content[i].amount,ret.Content[i].fromtoken,ret.Content[i].totoken,ret.Content[i].time);
            }
            $("#tab0").html(html);

          }else{

            H.toastTip(null, ret.Msg, 2000);
          }
        })
      }
      
      //转账记录 jytype0全部，1转入，2转出
      function GetTransactionHtml(token,amount,fromtoken,totoken,time){
        var html="";
        html+="<div class=\"H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after H-clear-both\">";
        html+="  <div class=\"H-padding-vertical-both-10 H-box-sizing-border-box\"><img src=\"../../image/mac.png\" alt=\"\" title=\"\" class=\"H-display-block H-margin-horizontal-left-10 H-border-radius-12\" style=\"width: 60px; height: 60px;\"></div>";
        html+="  <div class=\"H-flex-item H-padding-10 H-position-relative H-box-sizing-border-box\">";
        if(fromtoken==token){
          html+="<strong class=\"H-font-weight-normal font-weight-500 H-font-size-16 H-display-block H-text-show-row-2 H-theme-font-color7\">-"+amount+"</strong>";
          html+="      <strong class=\"H-font-weight-normal font-weight-500 H-font-size-12 H-display-block H-text-show-row-2\">转至："+totoken+"</strong>";
        }
        else{
          html+="<strong class=\"H-font-weight-normal font-weight-500 H-font-size-16 H-display-block H-text-show-row-2 H-theme-font-color5\">+"+amount+"</strong>";
          html+="      <strong class=\"H-font-weight-normal font-weight-500 H-font-size-12 H-display-block H-text-show-row-2\">来自："+fromtoken+"</strong>";
        }

        html+="      <p class=\"H-font-size-10 H-theme-font-color-999 H-position-absolute H-z-index-10 H-margin-0\" style=\"bottom: 10px; left: 10px; right: 10px;\"><span class=\"H-float-left\">"+time+"</span></p>";
        html+="  </div>";
        html+="</div>";
        return html;
      }
    </script>

至此，整个流程，从注册、备份、登录、查看整个流程是已经完成了，下面一讲我们继续介绍转账。

---

如果你觉得对开发DAPP感兴趣，欢迎加入我们！