src/app/transfer/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   text-align: center;
  15   margin-top: 15px;
  16 }
  17 .balance .token-icon {
  18   height: 38px;
  19   width: 38px;
  20   margin-right: 5px;
  21 }
  22 .balance .token-amount {
  23   display: inline-block;
  24   font-size: 45px;
  25   line-height: 45px;
  26 }
  27 .balance .token-amount .asset {
  28   font-size: 18px;
  29   margin-left: 2px;
  30 }
  31 .form {
  32   padding: 10px 20px;
  33 }
  34 .form-item-group {
  35   display: flex;
  36 }
  37 .form-item-group .form-item {
  38   width: 40%;
  39 }
  40
  41 .btn-inline {
  42   display: flex;
  43   padding: 0;
  44 }
  45 .btn-inline .btn {
  46   margin: 10px 15px;
  47 }
  48 </style>
  49
  50 <template>
  51   <div>
  52     <transition name="page-transfer"
  53       enter-active-class="animated fadeInLeft faster"
  54       leave-active-class="animated fadeOutLeft faster">
  55       <div v-show="show" class="warp bg-gray">
  56         <section class="header bg-green">
  57           <i class="iconfont icon-back" @click="close"></i>
  58           <div class="balance">
  59             <img src="../../assets/logo.png" class="token-icon">
  60             <div class="token-amount">{{account.balance}}<span class="asset">BTM</span></div>
  61           </div>
  62         </section>
  63
  64         <section class="form">
  65           <div class="form-item-group">
  66             <div class="form-item">
  67               <!-- <label>账户</label> -->
  68               <v-select :clearable="false" v-model="guid" style="height: 32px;width: 125px;" label="alias" :options="accounts"></v-select>
  69             </div>
  70             <div class="form-item" style="margin-left: 20px;">
  71               <!-- <label>资产</label> -->
  72               <v-select :clearable="false" v-model="selectAsset" style="height: 32px;" label="name" :options="assetOptions"></v-select>
  73             </div>
  74           </div>
  75           <div class="form-item">
  76             <label class="form-item-label">{{ $t('transfer.address') }}</label>
  77             <div class="form-item-content" style="margin-left: 80px;">
  78               <input type="text" v-model="transaction.to">
  79             </div>
  80           </div>
  81           <div class="form-item">
  82             <label class="form-item-label">{{ $t('transfer.quantity') }}</label>
  83             <div class="form-item-content" style="margin-left: 80px; display: flex;">
  84               <input type="number" v-model="transaction.amount" placeholder="0">
  85               <span style="width: 40px; font-size: 15px;">{{unit}}</span>
  86             </div>
  87           </div>
  88           <div class="form-item">
  89             <label class="form-item-label">≈</label>
  90             <div class="form-item-content" style="margin-left: 80px; display: flex;">
  91               <input type="number" v-model="transaction.cost" placeholder="0" disabled>
  92               <span style="width: 40px; font-size: 15px;">CNY</span>
  93             </div>
  94           </div>
  95           <div class="form-item">
  96             <label class="form-item-label">{{ $t('transfer.fee') }}</label>
  97             <div class="form-item-content" style="margin-left: 80px;">
  98               <v-select :clearable="false" v-model="fee" style="height: 32px;" :options="feeTypeOptions"></v-select>
  99             </div>
 100           </div>
 101           <br>
 102           <div style="width: 200px; margin: 0 auto;">
 103             <div class="btn bg-green" @click="send">{{ $t('transfer.send') }}</div>
 104           </div>
 105         </section>
 106       </div>
 107     </transition>
 108
 109     <Confirm ref="transferConfirm" @on-success="close"></Confirm>
 110   </div>
 111 </template>
 112
 113 <script>
 114 import bytom from "../common/bytom";
 115 import getLang from "../../assets/language/sdk";
 116 import Confirm from "./confirm";
 117 export default {
 118   components: {
 119     Confirm
 120   },
 121   data() {
 122     const ASSET_BTM =
 123       "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
 124     return {
 125       selectAsset: {
 126         assets:
 127           "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
 128         name: "BTM"
 129       },
 130       assetOptions: [
 131         {
 132           assets:
 133             "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
 134           name: "BTM"
 135         }
 136       ],
 137       show: false,
 138       accounts: [],
 139       unit: "",
 140       assets: {
 141         ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff: "BTM"
 142       },
 143       guid: null,
 144       account: {
 145         guid: ""
 146       },
 147       transaction: {
 148         to: "",
 149         asset: ASSET_BTM,
 150         amount: "",
 151         fee: "",
 152         cost: ""
 153       }
 154     };
 155   },
 156   props: {
 157     fee: {
 158       type: String,
 159       default() {
 160         return this.$t("transfer.feeType");
 161       }
 162     },
 163     feeTypeOptions: {
 164       type: Array,
 165       default() {
 166         return [this.$t("transfer.feeType")];
 167       }
 168     }
 169   },
 170   watch: {
 171     selectAsset: function(val) {
 172       this.transaction.asset = val.assets;
 173     },
 174     "transaction.amount": function(newAmount) {
 175       bytom.Query.asset(this.transaction.asset).then(ret => {
 176         this.transaction.cost = Number(ret.result.data.cny_price*newAmount).toFixed(2);
 177       });
 178     },
 179     guid: function(newGuid) {
 180       this.accounts.forEach(account => {
 181         if (account.guid == newGuid.guid) {
 182           this.account = account;
 183           return;
 184         }
 185       });
 186     }
 187   },
 188   methods: {
 189     open: function(accountInfo) {
 190       this.show = true;
 191
 192       bytom.Account.list().then(accounts => {
 193         this.accounts = accounts;
 194         let options = [];
 195         this.accounts.forEach(function(element) {
 196           options.push({ label: element.alias, value: element.guid });
 197         });
 198         this.options = options;
 199       });
 200
 201       this.account = accountInfo;
 202       this.guid = accountInfo;
 203       this.unit = this.assets[this.transaction.asset];
 204     },
 205     close: function() {
 206       this.show = false;
 207       this.transaction.to = "";
 208       this.transaction.amount = "";
 209     },
 210     send: function() {
 211       if (this.transaction.to == "") {
 212         this.$dialog.show({
 213           body: this.$t("transfer.emptyTo")
 214         });
 215         return;
 216       }
 217
 218       if (this.transaction.amount <= 0) {
 219         this.$dialog.show({
 220           body: this.$t("transfer.noneBTM")
 221         });
 222         return;
 223       }
 224
 225       let loader = this.$loading.show({
 226         // Optional parameters
 227         container: null,
 228         canCancel: true,
 229         onCancel: this.onCancel
 230       });
 231       bytom.Transaction.build(
 232         this.account.guid,
 233         this.transaction.to,
 234         this.transaction.asset,
 235         this.transaction.amount,
 236         this.transaction.fee
 237       )
 238         .then(ret => {
 239           console.log(ret);
 240           loader.hide();
 241
 242           this.transaction.fee = Number(ret.result.data.fee / 100000000);
 243           this.$refs.transferConfirm.open(
 244             this.account,
 245             this.transaction,
 246             ret.result.data
 247           );
 248         })
 249         .catch(error => {
 250           loader.hide();
 251           this.$dialog.show({
 252             body: getLang(error.message)
 253           });
 254         });
 255     }
 256   }
 257 };
 258 </script>