OSDN Git Service

update the basic vuex store structure
[bytom/Byone.git] / src / views / home.vue
index 5aee681..2e81bc0 100644 (file)
@@ -5,9 +5,10 @@
 
 .topbar {
     font-size: 19px;
+    display:flex;
 }
 .topbar .topbar-left {
-    width: 120px;
+    width: 87px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 .topbar-left .btn-menu i {
     font-size: 100%;
 }
-.topbar-left .alias {
+.alias {
     height: 25px;
-    font-size: 19px;
+    font-size: 16px;
     line-height: 28px;
 }
 
-.topbar .topbar-right {
-    float: right;
+.topbar .topbar-middle {
     margin-top: 20px;
     margin-right: 20px;
     border: 2px solid #fff;
     border-radius: 18px;
-    padding: 0 10px;
+    padding: 0 20px;
     font: 12px system-ui;
     text-align: center;
-}
-
-.topbar-right .lamp {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: #02f823;
-    margin-right: 2px;
-    position: relative;
-    top: -2px;
+    display: flex;
+    align-items: center;
 }
 
 .content {
-    margin-top: 20px;
+    margin-top: 25px;
     text-align: center;
-    padding: 0 30px 20px;
+    padding: 0 30px 10px;
 }
 .content .token-icon {
     display: inline-flex;
@@ -65,7 +56,7 @@
     padding-bottom: 10px;
 }
 .content .token-amount {
-    font-size: 45px;
+    font-size: 32px;
     line-height: 45px;
 }
 .token-amount .asset {
     vertical-align: middle;
     cursor: pointer;
 }
+
+.btn-send-transfer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.btn-send-transfer .btn {
+    width: 160px;
+    height: 48px;
+    line-height: 23px;
+    font-size: 16px;
+}
+
+.btn-received {
+    background: #0DBF37;
+    border-radius:4px 0px 0px 0px;
+}
+.btn-received:active,
+.btn-received:hover,.btn-received:focus {
+    background: #05A02A;
+}
+
 .btn-transfer {
-    width: 200px;
+    background: #035BD4;
+    border-radius:0px 4px 0px 0px;
+}
+.btn-transfer:active,
+.btn-transfer:hover,.btn-transfer:focus {
+  background: #044BAF;
 }
 
 .transaction-title h3 {
-    font-size: 18px;
+    font-size: 16px;
     font-weight: inherit;
-    color: #cacaca;
-    text-align: center;
-    padding: 5px 0;
+    padding: 10px 0 10px 20px;
 }
 .transactions {
-    font-size: 15px;
-    height: 275px;
-}
-.transactions .list {
-    padding: 0 20px;
+  font-size: 15px;
+  height: 340px;
+  overflow: auto;
 }
 .list-item {
+    position: relative;
     display: block;
-    padding: 5px 10px;
-    border-bottom: 1px solid #5e5e5e;
+    padding: 10px 20px;
+}
+
+.list-item:after {
+    content:"";
+    background: #e0e0e0;
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+    height: 1px;
+    width: 90%;
 }
 
 .list-item .value {
 }
 .btn-creation {
     display: block;
-    width: 200px;
-    margin: 0 auto;
+    width: 310px;
+    height: 48px;
+    margin: auto;
+    padding: 15px 0;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+.time, .value{
+  font-weight: 500;
+  font-size: 16px;
 }
+.addr{
+  font-size: 12px;
+}
+.no-tx-img{
+  width: 100px;
+  height: 100px;
+}
+.no-record{
+  display: block;
+}
+
+  .btn-send-transfer .iconfont{
+    margin-right: 4px;
+  }
+
 </style>
 
 <template>
     <div class="warp">
-        <section class="bg-green">
+        <section class="bg-image">
             <div class="topbar">
-                <div class="topbar-right">
-                    <i class="lamp"></i>
-                    <select v-model="network" @change="networkToggle">
-                        <option value="mainnet">{{ $t('main.mainNet') }}</option>
-                        <option value="testnet">{{ $t('main.testNet') }}</option>
-                    </select>
-                </div>
                 <div class="topbar-left">
                     <a class="btn-menu" @click="openMenu">
                         <i class="iconfont icon-menu"></i>
                     </a>
-                    <span class="alias">{{currentAccount.alias}}</span>
                 </div>
+                <!--<div class="topbar-middle bg-secondary">-->
+                    <!--<select v-model="network" @change="networkToggle">-->
+                        <!--<option value="mainnet">{{ $t('main.mainNet') }}</option>-->
+                        <!--<option value="testnet">{{ $t('main.testNet') }}</option>-->
+                        <!--<option value="solonet">{{ $t('main.soloNet') }}</option>-->
+                        <!--<option value="vaporTestnet">{{ $t('main.vaporTestnet') }}</option>-->
+                    <!--</select>-->
+                <!--</div>-->
             </div>
             <div class="content">
-                <img src="@/assets/logo.png" class="token-icon">
-                <div v-if="currentAccount.address!=undefined" class="amount">
+                <div v-if="currentAccount.address!=undefined" class="amount color-white">
+                    <span class="alias color-grey">{{currentAccount.alias}}</span>
                     <div class="token-amount">
                         {{accountBalance}}
                         <span class="asset">BTM</span>
                     </div>
-                    <p class="account-address">
-                        <span class="address-text" :title="addressTitle" :data-clipboard-text="currentAccount.address">{{shortAddress}}</span>
-                        <i class="iconfont qrcode" @click="showQrcode">&#xe7dd;</i>
-                    </p>
                 </div>
-                <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">{{ $t('main.transfer') }}</a>
+                <div v-else>
+                  <p style="width: 250px; margin: 45px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
+
+                </div>
+            </div>
+            <div class="btn-send-transfer">
+                <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-received" @click="showQrcode">
+                  <i class="iconfont icon-receive"></i>
+                  {{ $t('main.receive') }}
+                </a>
+                <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">
+                  <i class="iconfont icon-send"></i>
+                  {{ $t('main.send') }}
+                </a>
             </div>
         </section>
 
-        <div v-if="currentAccount.address!=undefined">
             <section class="transaction-title">
-                <h3 class="bg-gray">{{ $t('main.record') }}</h3>
+                <h3 class="bg-gray color-grey">{{ $t('main.record') }}</h3>
             </section>
             <section class="transactions">
-                <vue-scroll @handle-scroll="handleScroll">
-                    <ul class="list">
-                        <li class="list-item" v-for="(transcation, index) in transactions" :key="index" @click="$router.push({name: 'transfer-info', params: {transcation: transcation, address: currentAccount.address}})">
-                            <div class="value">{{transcation.direct}} {{transcation.val.toFixed(2)}} BTM</div>
-                            <div>
-                                <div v-if="transcation.is_confirmed" class="time">{{transcation.block_timestamp | moment}}</div>
-                                <div v-else class="time">{{transcation.submission_timestamp | moment}}</div>
-                                <div class="addr">{{transcation.address}}</div>
-                            </div>
-                        </li>
-                    </ul>
-                </vue-scroll>
+                 <div v-if="currentAccount.address!=undefined">
+                  <div v-if="transactions.length != 0">
+                      <vue-scroll @handle-scroll="handleScroll">
+                      <ul class="list">
+                          <li class="list-item" v-for="(transaction, index) in transactions" :key="index" @click="$router.push({name: 'transfer-info', params: {transaction: transaction, address: currentAccount.address}})">
+                              <div class="value">{{transaction.direct}} {{transaction.val.toFixed(2)}} BTM</div>
+                              <div>
+                                  <div v-if="transaction.hasOwnProperty('block_timestamp')">
+                                    {{transaction.submission_timestamp | moment}}
+                                  </div>
+                                  <div v-else>
+                                    {{ $t('main.unconfirmed') }}
+                                  </div>
+                                  <div class="addr color-grey">{{transaction.address}}</div>
+                              </div>
+                          </li>
+                      </ul>
+                  </vue-scroll>
+                  </div>
+                      <div v-else>
+                          <div class="bg-emptytx"></div>
+                          <div>
+                              <span class="color-lightgrey center-text no-record">{{$t('main.noRecord')}}</span>
+                          </div>
+                      </div>
+                  </div>
+                  <div v-else>
+                      <router-link :to="{name: 'menu-account-creation'}">
+                          <div class="bg-emptytx"></div>
+                          <div>
+                            <span class="color-lightgrey center-text no-record">{{$t('main.noRecord')}}</span>
+                          </div>
+                          <a class="btn btn-primary btn-creation">{{ $t('main.create') }}</a>
+                      </router-link>
+                  </div>
             </section>
-        </div>
-        <div v-else>
-            <p style="width: 250px; margin: 30px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
-            <a class="btn btn-primary btn-creation bg-green" @click="$refs.menu.open('creation')">{{ $t('main.create') }}</a>
-        </div>
 
         <!-- child page -->
         <div class="mask" v-show="maskShow"></div>
         <transition :enter-active-class="enterActive" :leave-active-class="leaveActive">
-            <router-view :accounts="accounts" @refreshAccounts="refreshAccounts"></router-view>
+            <router-view></router-view>
         </transition>
 
-        <!-- modal -->
-        <Qrcode ref="qrcode"></Qrcode>
     </div>
 </template>
 
 <script>
-import ClipboardJS from "clipboard";
-import Menu from "@/views/homeMenu";
-import Qrcode from "@/views/qrcode";
-import Transfer from "@/views/transfer";
-import TxInfo from "@/views/transferDetail";
 import address from "@/utils/address";
 import account from "@/models/account";
 import transaction from "@/models/transaction";
+import { BTM } from "@/utils/constants";
+import { mapGetters, mapState } from 'vuex'
+
 const EnterActive = 'animated faster fadeInLeft';
 const LeaveActive = 'animated faster fadeOutLeft';
 export default {
     name: "",
-    components: {
-        Qrcode,
-    },
     data() {
         return {
-            network: "mainnet",
-            clipboard: new ClipboardJS(".address-text"),
-            addressTitle: this.$t("main.copy"),
-            accounts: [],
-            currentAccount: {
-                balance: 0.00
-            },
             transactions: [],
             maskShow: false,
             start: 0,
@@ -226,8 +287,9 @@ export default {
             }
 
             //account toggle by the list from menu
-            if (to.name == 'home' && to.params.selectedAccount != undefined && from.name == 'menu') {
+            if (to.name == 'home' && to.params.selectedAccount != undefined) {
                 this.currentAccount = to.params.selectedAccount
+                this.refreshAccounts();
             }
 
             // remove transition for some page
@@ -239,9 +301,8 @@ export default {
             }
         },
         currentAccount(newVal, oldVal) {
-            localStorage.currentAccount = JSON.stringify(newVal);
-            if (newVal.guid == undefined) {
-                return;
+            if (newVal.guid == undefined){
+              return;
             }
 
             this.refreshTransactions(newVal.guid, newVal.address).then(transactions => {
@@ -254,51 +315,46 @@ export default {
             return address.short(this.currentAccount.address)
         },
         accountBalance: function () {
-            return this.currentAccount.balance
-        }
+            let balance
+            const balances = this.currentAccount.balances
+            if(balances.length >0 ){
+                const balanceObject = balances.filter(b => b.asset === BTM)[0]
+                balance = balanceObject.balance/Math.pow(10,balanceObject.decimals)
+            }
+            return (balance != null && balance != 0) ? balance : '0.00'
+        },
+        ...mapState([
+          'bytom'
+        ]),
+        ...mapGetters([
+          'currentAccount',
+          'accountList',
+          'net'
+        ])
     },
     methods: {
-        setupShortAddr(rawAddress) {
-            this.currentAccount.address_short = address.short(rawAddress);
-        },
-        setupClipboard() {
-            this.clipboard.on("success", e => {
-                this.$dialog.show({
-                    header: this.$t("dialog.header"),
-                    body: this.$t("dialog.copy.success")
-                });
-            });
-            this.clipboard.on("error", e => {
-                this.$dialog.show({
-                    header: this.$t("dialog.header"),
-                    body: this.$t("dialog.copy.fail")
-                });
-            });
-        },
         setupRefreshTimer() {
-            // todo refresh all accounts
-
             setInterval(() => {
                 this.refreshBalance(this.currentAccount.guid)
             }, 10000)
         },
         setupNetwork() {
-            this.network = localStorage.bytomNet;
-            account.setupNet(this.network);
+            account.setupNet(this.net);
         },
         networkToggle: function (val) {
             localStorage.bytomNet = this.network;
             account.setupNet(this.network);
+            this.currentAccount = {}
             this.refreshAccounts();
         },
         showQrcode: function () {
-            this.$refs.qrcode.open(this.currentAccount.address);
+          this.$router.push('received')
         },
         openMenu: function () {
-            this.$router.push({ name: 'menu', params: { accounts: this.accounts, selected: this.currentAccount } })
+            this.$router.push('menu')
         },
         transferOpen: function () {
-            this.$router.push({ name: 'transfer', params: { account: this.currentAccount } })
+            this.$router.push('transfer')
         },
         handleScroll(vertical, horizontal, nativeEvent) {
             if (vertical.process == 0) {
@@ -318,36 +374,21 @@ export default {
                 });
             }
         },
-        refreshAccounts: function () {
-            account.list().then(accounts => {
-                this.accounts = accounts;
-                if (accounts.length == 0) {
-                    this.currentAccount = {};
-                    return;
-                }
-                this.currentAccount = accounts[0];
-                this.refreshBalance(this.currentAccount.guid);
-            })
-        },
         refreshBalance: function (guid) {
-            account.balance(guid).then(balance => {
-                this.currentAccount.balance = balance;
-                this.currentAccount = Object.assign({}, this.currentAccount);
-            }).catch(error => {
+            account.balance(guid)
+              .catch(error => {
                 console.log(error);
             });
         },
         refreshTransactions: function (guid, address, start, limit) {
             return new Promise((resolve, reject) => {
-                transaction.list(guid, address, start, limit).then(ret => {
-                    let transactions = ret.result.data;
+                transaction.list(guid, address, start, limit).then(transactions => {
                     if (transactions == null) {
                         return;
                     }
 
-                    this.transactionsFormat(transactions);
-                    console.log("formatTx", transactions);
-                    resolve(transactions)
+                    const formattedTx = this.transactionsFormat(transactions);
+                    resolve(formattedTx)
                 }).catch(error => {
                     console.log(error);
                     reject(error)
@@ -355,54 +396,49 @@ export default {
             })
         },
         transactionsFormat: function (transactions) {
-            transactions.forEach(transaction => {
-                let inputSum = 0;
-                let outputSum = 0;
-                let selfInputSum = 0;
-                let selfoutputSum = 0;
-                let inputAddresses = [];
-                let outputAddresses = [];
-                transaction.inputs.forEach(input => {
-                    inputSum += input.amount;
-                    if (input.address == this.currentAccount.address) {
-                        selfInputSum += input.amount;
-                        return;
-                    }
+          const formattedTransactions = []
+          const assetID = BTM
 
-                    inputAddresses.push(input.address);
-                });
-                transaction.outputs.forEach(output => {
-                    outputSum += output.amount;
-                    if (output.address == this.currentAccount.address) {
-                        selfoutputSum += output.amount;
-                        return;
-                    }
+          transactions.forEach(transaction => {
+            const balanceObject = transaction.balances
+              .filter(b => b.asset === assetID);
+
+            if(balanceObject.length ===1 ){
+
+                const inputAddresses = transaction.inputs
+                  .filter(input => input.asset === assetID && input.address !== this.currentAccount.address)
+                  .map(input => input.address)
+
+                const outputAddresses = transaction.outputs
+                  .filter(output => output.asset === assetID && output.address !== this.currentAccount.address)
+                  .map(output => output.address)
 
-                    outputAddresses.push(output.address);
-                });
 
-                let val = selfoutputSum - selfInputSum;
+                const val  = assetID===BTM ? Number(balanceObject[0].amount)/ 100000000 : Number(balanceObject[0].amount);
+
                 if (val > 0) {
                     transaction.direct = "+";
                     transaction.address = address.short(inputAddresses.pop());
                 } else {
-                    val = selfInputSum - selfoutputSum;
                     transaction.direct = "-";
                     transaction.address = address.short(outputAddresses.pop());
                 }
-                transaction.val = Number(val / 100000000);
-                transaction.fee = Number(inputSum - outputSum) / 100000000;
+
+                transaction.val = Math.abs(val);
+                transaction.fee = transaction.fee / 100000000;
+
+                formattedTransactions.push(transaction);
+              }
             });
+          return formattedTransactions;
         },
     },
     mounted() {
         this.setupNetwork();
-        this.setupClipboard();
         this.setupRefreshTimer();
-        this.refreshAccounts();
+        this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address).then(transactions => {
+          this.transactions = transactions
+        });
     },
-    beforeDestroy() {
-        this.clipboard.destroy();
-    }
-};
-</script>
\ No newline at end of file
+  };
+</script>