src/views/sendTransaction/transfer.vue

   1 <style lang="" scoped>
   2 .header {
   3   display: flex;
   4 }
   5 .header p{
   6   text-align: center;
   7   width: 270px;
   8   padding-top: 17px;
   9 }
  10 .balance {
  11   width: 280px;
  12   height: 40px;
  13     margin: 20px;
  14     padding: 20px;
  15   display: flex;
  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 }
  25 .balance .token-amount .asset {
  26     font-size: 18px;
  27     margin-left: 2px;
  28 }
  29 .form-container{
  30   margin: 20px;
  31 }
  32 .form {
  33     margin-bottom: 20px;
  34     padding: 10px 15px;
  35     border-radius:4px;
  36 }
  37 .form-container .btn{
  38     height: 48px;
  39     padding-top: 15px;
  40     bottom: 20px;
  41     position: absolute;
  42     width: 320px;
  43 }
  44   .small{
  45     font-size: 12px;
  46   }
  47 .transfer-header{
  48   background-image: url("../../assets/img/backgroundHead/transfer.svg");
  49   background-size: 320px 80px;
  50 }
  51 .wallet{
  52   width: 40px;
  53   height: 40px;
  54   background: rgba(255,255,255,0.1);
  55   border-radius: 50%;
  56   color: white;
  57   margin-right: 20px;
  58   line-height: 40px;
  59   text-align: center;
  60 }
  61 </style>
  62
  63 <template>
  64     <div class="warp-chlid bg-gray">
  65         <section class="header bg-header">
  66             <i class="iconfont icon-back" @click="close"></i>
  67             <p>{{ $t('main.send') }}</p>
  68         </section>
  69
  70         <section class="balance transfer-header">
  71           <div class="wallet">
  72             <i class="iconfont icon-wallet"></i>
  73           </div>
  74           <div>
  75             <div class="token-amount">
  76                 {{accountBalance}}
  77                 <span class="asset">BTM</span>
  78             </div>
  79             <div class="small color-grey">
  80               {{account.alias}}
  81             </div>
  82           </div>
  83         </section>
  84
  85         <section class="form-container">
  86           <div class="form bg-white">
  87               <div class="form-item">
  88                   <label class="form-item-label">{{ $t('transfer.address') }}</label>
  89                   <div class="form-item-content" >
  90                       <input type="text" v-model="transaction.to">
  91                   </div>
  92               </div>
  93               <div class="form-item">
  94                   <label class="form-item-label">
  95                     {{ $t('transfer.quantity') }}
  96
  97                     <small class="float-right" >{{ transaction.cost||0 }} CNY</small>
  98                   </label>
  99                   <div class="form-item-content" style=" display: flex;">
 100                       <input type="number" v-model="transaction.amount" placeholder="0">
 101                       <span class="color-grey" style="width: 40px; font-size: 15px;position: absolute;right: 0;">{{unit}}</span>
 102                   </div>
 103               </div>
 104               <div class="form-item">
 105                   <label class="form-item-label">{{ $t('transfer.fee') }}</label>
 106                   <div class="form-item-content" >
 107                       <!--<v-select :clearable="false" v-model="fee" style="height: 32px;" :options="feeTypeOptions"></v-select>-->
 108                     <input type="text"  v-model="fee" disabled >
 109                   </div>
 110               </div>
 111           </div>
 112           <a class="btn btn-primary" @click="send">{{ $t('transfer.send') }}</a>
 113         </section>
 114     </div>
 115 </template>
 116
 117 <script>
 118 import account from "@/models/account";
 119 import transaction from "@/models/transaction";
 120 import getLang from "@/assets/language/sdk";
 121 import Confirm from "./transferConfirm";
 122 export default {
 123     components: {
 124         Confirm
 125     },
 126     data() {
 127         const ASSET_BTM =
 128             "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
 129         return {
 130             selectAsset: {
 131                 assets: ASSET_BTM,
 132                 name: "BTM"
 133             },
 134             assetOptions: [
 135                 {
 136                     assets: ASSET_BTM,
 137                     name: "BTM"
 138                 }
 139             ],
 140             show: false,
 141             accounts: [],
 142             assets: {
 143                 ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff: "BTM"
 144             },
 145             guid: null,
 146             account: {},
 147             accountBalance: 0.00,
 148             fee: this.$t("transfer.feeType"),
 149             feeTypeOptions: [this.$t("transfer.feeType")],
 150             transaction: {
 151                 to: "",
 152                 asset: ASSET_BTM,
 153                 amount: "",
 154                 fee: "",
 155                 cost: ""
 156             }
 157         };
 158     },
 159     computed: {
 160         unit() {
 161             return this.assets[this.transaction.asset];
 162         }
 163     },
 164     watch: {
 165         selectAsset: function (val) {
 166             this.transaction.asset = val.assets;
 167         },
 168         "transaction.amount": function (newAmount) {
 169             transaction.asset(this.transaction.asset).then(ret => {
 170                 this.transaction.cost = Number(ret.result.data.cny_price * newAmount).toFixed(2);
 171             });
 172         },
 173         account: function (newAccount) {
 174             this.guid = newAccount.guid;
 175         },
 176         guid: function (newGuid) {
 177             this.accounts.forEach(account => {
 178                 if (account.guid == newGuid.guid) {
 179                     this.account = account;
 180                     return;
 181                 }
 182             });
 183
 184             account.balance(newGuid).then(balance => {
 185                 this.accountBalance = balance;
 186             }).catch(error => {
 187                 console.log(error);
 188             });
 189         }
 190     },
 191     methods: {
 192         close: function () {
 193             this.$router.go(-1)
 194             this.transaction.to = "";
 195             this.transaction.amount = "";
 196         },
 197         send: function () {
 198             if (this.transaction.to == "") {
 199                 this.$dialog.show({
 200                     body: this.$t("transfer.emptyTo")
 201                 });
 202                 return;
 203             }
 204
 205             if (this.transaction.amount <= 0) {
 206                 this.$dialog.show({
 207                     body: this.$t("transfer.noneBTM")
 208                 });
 209                 return;
 210             }
 211
 212             let loader = this.$loading.show({
 213                 // Optional parameters
 214                 container: null,
 215                 canCancel: true,
 216                 onCancel: this.onCancel
 217             });
 218             transaction.build(this.account.guid, this.transaction.to, this.transaction.asset, this.transaction.amount, this.transaction.fee).then(ret => {
 219                 loader.hide();
 220                 this.transaction.fee = Number(ret.result.data.fee / 100000000);
 221                 this.$router.push({ name: 'transfer-confirm', params: { account: this.account, transaction: this.transaction, rawData: ret.result.data } })
 222             }).catch(error => {
 223                 loader.hide();
 224                 this.$dialog.show({
 225                     body: getLang(error.message)
 226                 });
 227             });
 228         }
 229     }, mounted() {
 230         if (this.$route.params.account != undefined) {
 231             this.account = this.$route.params.account;
 232         }
 233
 234         if (this.$route.query.to != undefined) {
 235             this.transaction.to = this.$route.query.to
 236         }
 237         if (this.$route.query.amount != undefined) {
 238             this.transaction.amount = this.$route.query.amount
 239         }
 240
 241         account.setupNet(localStorage.bytomNet);
 242         account.list().then(accounts => {
 243             this.accounts = accounts;
 244             this.accounts.forEach(function (ele) {
 245                 ele.label = ele.alias
 246                 ele.value = ele.guid
 247             });
 248
 249             if (Object.keys(this.account).length == 0) {
 250                 this.account = accounts[0]
 251             }
 252         });
 253     }
 254 };
 255 </script>