src/popup/framework/components/trans/transfer.vue

   1 <style lang="" scoped>
   2 .warp {
   3   position: absolute;
   4   top: 0;
   5   left: 0;
   6   right: 0;
   7   height: 600px;
   8   z-index: 2;
   9 }
  10 .header {
  11   height: 150px;
  12 }
  13 .balance {
  14   display: flex;
  15   position: absolute;
  16   right: 0px;
  17   margin: 30px 50px;
  18 }
  19 .balance .token-icon {
  20   height: 30px;
  21   width: 30px;
  22   line-height: 35px;
  23 }
  24 .balance h1 {
  25   font-size: 38px;
  26   line-height: 32px;
  27   margin-left: 10px;
  28 }
  29 .balance span {
  30   line-height: 42px;
  31   margin-left: 3px;
  32 }
  33 .mask {
  34   z-index: 3 !important;
  35   top: 150px !important;
  36 }
  37 .form {
  38   padding: 10px 20px;
  39 }
  40 .form-item-group {
  41   display: flex;
  42 }
  43 .form-item-group .form-item {
  44   width: 40%;
  45 }
  46 .confirm {
  47   padding: 10px 20px;
  48   position: fixed;
  49   left: 0;
  50   bottom: 0;
  51   right: 0;
  52   z-index: 4;
  53 }
  54
  55 .btn-inline {
  56   display: flex;
  57 }
  58 .btn-inline .btn {
  59   margin: 0 10px;
  60 }
  61 </style>
  62
  63 <template>
  64   <div>
  65     <transition name="page-transfer"
  66       enter-active-class="animated fadeInLeft faster"
  67       leave-active-class="animated fadeOutLeft faster">
  68       <div v-show="show" class="warp bg-gray">
  69         <section class="header bg-green">
  70             <i class="iconfont icon-back" @click="show=false; confirmClose()"></i>
  71             <div class="balance">
  72               <img src="../../../../assets/logo.png" class="token-icon">
  73               <div style="display: flex">
  74                 <h1>{{balance}}</h1>
  75                 <span> BTM</span>
  76               </div>
  77             </div>
  78         </section>
  79         <section v-show="maskShow" class="mask"></section>
  80         <section class="form">
  81           <div class="form-item-group">
  82             <div class="form-item">
  83               <!-- <label>账户</label> -->
  84               <select v-model="transaction.guid">
  85                 <option v-for="account in accounts" :value="account.guid">{{account.alias != null ? account.alias : '账户1'}}</option>
  86               </select>
  87             </div>
  88             <div class="form-item" style="margin-left: 20px;">
  89               <!-- <label>资产</label> -->
  90               <select v-model="transaction.asset">
  91                 <option value="ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff">BTM</option>
  92               </select>
  93             </div>
  94           </div>
  95           <div class="form-item">
  96             <label class="form-item-label">地址</label>
  97             <div class="form-item-content" style="margin-left: 60px;">
  98               <input type="text" v-model="transaction.to">
  99             </div>
 100           </div>
 101           <div class="form-item">
 102             <label class="form-item-label">数量</label>
 103             <div class="form-item-content" style="margin-left: 60px; display: flex;">
 104               <input type="text" v-model="transaction.amount">
 105               <span style="width: 30px;">{{unit}}</span>
 106             </div>
 107           </div>
 108           <!-- <div class="form-item">
 109             <label for="">≈</label>
 110             <input type="text" disabled>
 111             <span>CNY</span>
 112           </div> -->
 113           <div class="form-item">
 114             <label class="form-item-label">矿工费用</label>
 115             <div class="form-item-content" style="margin-left: 60px;">
 116               <select v-model="transaction.fee">
 117                 <option value="">标准</option>
 118               </select>
 119             </div>
 120           </div>
 121           <br>
 122           <div class="form-item">
 123             <label class="form-item-label">交易密码</label>
 124             <div class="form-item-content" style="margin-left: 60px;">
 125               <input type="password" v-model="transaction.passwd">
 126             </div>
 127           </div>
 128           <div class="btn-group">
 129             <div class="btn bg-green" @click="confirmOpen">发送交易</div>
 130           </div>
 131         </section>
 132       </div>
 133     </transition>
 134
 135     <transition name="page-transfer"
 136         enter-active-class="animated slideInUp faster"
 137         leave-active-class="animated slideOutDown faster">
 138         <div v-show="confirmShow" class="confirm form bg-gray">
 139             <div class="form-item">
 140               <label class="form-item-label">密码确认</label>
 141               <div class="form-item-content" style="margin-left: 60px;">
 142                 <input type="password" v-model="confirmPasssword" autofocus>
 143               </div>
 144             </div>
 145             <div class="btn-group btn-inline">
 146               <div class="btn bg-green" @click="confirmTransfer">确认发送</div>
 147               <div class="btn bg-red" @click="confirmClose">取消发送</div>
 148             </div>
 149         </div>
 150     </transition>
 151   </div>
 152 </template>
 153
 154 <script>
 155 import bytom from "../../../script/bytom";
 156 export default {
 157   name: "",
 158   data() {
 159     const ASSET_BTM =
 160       "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
 161     return {
 162       show: false,
 163       maskShow: false,
 164       confirmShow: false,
 165       balance: 0,
 166       accounts: [],
 167       unit: "单位",
 168       confirmPasssword: "",
 169       assets: {
 170         ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff: "BTM"
 171       },
 172       transaction: {
 173         guid: "",
 174         to: "",
 175         asset: ASSET_BTM,
 176         amount: 0,
 177         fee: "",
 178         passwd: ""
 179       }
 180     };
 181   },
 182   methods: {
 183     open: function(accountInfo) {
 184       this.show = true;
 185
 186       bytom.Account.list().then(accounts => {
 187         this.accounts = accounts;
 188       });
 189
 190       this.balance = accountInfo.balance;
 191       this.transaction.guid = accountInfo.guid;
 192       this.unit = this.assets[this.transaction.asset];
 193     },
 194     close: function() {
 195       this.show = false;
 196     },
 197     confirmOpen: function() {
 198       this.maskShow = true;
 199       this.confirmShow = true;
 200     },
 201     confirmClose: function() {
 202       this.confirmShow = false;
 203       this.maskShow = false;
 204     },
 205     confirmTransfer: function() {
 206       if (this.confirmPasssword != this.transaction.passwd) {
 207         alert("密码不一致");
 208         return;
 209       }
 210       // guid, to, asset, amount, fee, password
 211       bytom.Transaction.transfer(
 212         this.transaction.guid,
 213         this.transaction.to,
 214         this.transaction.asset,
 215         this.transaction.amount,
 216         this.transaction.fee,
 217         this.transaction.passwd
 218       )
 219         .then(ret => {
 220           console.log(ret);
 221
 222           this.close();
 223           this.confirmClose();
 224           this.$emit("on-success");
 225           this.confirmPasssword = "";
 226           this.transaction.passwd = "";
 227         })
 228         .catch(error => {
 229           alert(error);
 230           this.transaction.passwd = "";
 231           this.confirmPasssword = "";
 232         });
 233     }
 234   }
 235 };
 236 </script>