第七课：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感兴趣，欢迎加入我们！