src/views/sideMenu/menuSettings.vue

   1 <style scoped>
   2 .row {
   3     margin: 25px 0;
   4     display: flex;
   5     align-items: center;
   6 }
   7 .row .label{
   8     flex-grow: 1;
   9 }
  10 .value {
  11     font-size: 15px;
  12     line-height: 30px;
  13 }
  14 .setting {
  15     margin: 5px 0 0 0;
  16     width: 110px;
  17     height: 32px;
  18     position: relative;
  19 }
  20 .form-item-content .select {
  21     height: 32px;
  22 }
  23 </style>
  24
  25 <template>
  26     <MenuPage :title="$t('setting.title')">
  27         <div class="row">
  28             <div class="label">
  29                 <p>{{ $t("setting.lang") }}</p>
  30             </div>
  31             <div class="form-item setting">
  32                 <v-select style="height: 32px;" class="select" :value="selected" :clearable="false" :onChange="changeLanguage" :options="i18nOptions"></v-select>
  33             </div>
  34         </div>
  35         <div class="row">
  36             <div class="label">
  37                 <p>{{ $t("setting.unit") }}</p>
  38             </div>
  39             <div class="form-item setting">
  40                 <v-select style="height: 32px;" class="select" :value="unit" :clearable="false" :options="['BTM']"></v-select>
  41             </div>
  42         </div>
  43         <div class="row">
  44             <div class="label">
  45                 <p>{{ $t("main.network") }}</p>
  46             </div>
  47             <div class="form-item setting">
  48                 <v-select style="height: 32px;" class="select"  :value="network" :clearable="false" :options="networks" :onChange="networkToggle"></v-select>
  49             </div>
  50         </div>
  51         <div class="row">
  52             <div class="label">
  53                 <p>{{ $t("setting.currency") }}</p>
  54             </div>
  55             <div class="form-item setting">
  56                 <v-select style="height: 32px;" class="select"  :value="currentCurrency" :clearable="false" :options="currencyList" :onChange="currencyToggle"></v-select>
  57             </div>
  58         </div>
  59     </MenuPage>
  60 </template>
  61
  62 <script>
  63 import { have } from "@/assets/language";
  64 import account from "@/models/account";
  65 import * as Actions from '@/store/constants';
  66 import { mapActions, mapGetters, mapState } from 'vuex'
  67
  68 export default {
  69     name: "",
  70     data() {
  71         return {
  72           currentAccount: {},
  73           network: { label: this.$t('main.mainNet'), value: "mainnet" },
  74           unit: "BTM",
  75             i18nOptions: [
  76                 { label: "中文", value: "cn" },
  77                 { label: "English", value: "en" }
  78             ],
  79             networks: [
  80               { label: this.$t('main.mainNet'), value: "mainnet" },
  81               { label: this.$t('main.testNet'), value: "testnet" },
  82               { label: this.$t('main.soloNet'), value: "solonet" }
  83             ],
  84             selected: { label: "中文", value: "cn" },
  85             hashVersion: "",
  86             currentCurrency: { label: "CNY", value: "in_cny" },
  87             currencyList: [
  88               { label: "CNY", value: "in_cny" },
  89               { label: "USD", value: "in_usd" },
  90               { label: "BTC", value: "in_btc" }
  91             ],
  92         };
  93     },
  94     computed: {
  95       ...mapState([
  96         'bytom'
  97       ]),
  98       ...mapGetters([
  99         'net',
 100         'language',
 101         'netType',
 102         'currency'
 103       ])
 104     },
 105     methods: {
 106         changeLanguage(lang){
 107           const bytom = this.bytom.clone();
 108
 109           if (bytom.settings.language != lang.value) {
 110             bytom.settings.language = lang.value;
 111             this.$i18n.locale = lang.value;
 112             this.selected = lang;
 113             this[Actions.UPDATE_STORED_BYTOM](bytom)
 114           }
 115         },
 116         networkToggle: function (val) {
 117           const bytom = this.bytom.clone();
 118
 119           if (bytom.settings.network != val.value) {
 120             bytom.settings.network = val.value;
 121             this.network = val;
 122             account.setupNet(`${val.value}bytom`);
 123
 124             bytom.currentAccount = {}
 125             account.list()
 126               .then(accounts => {
 127
 128                 bytom.accountList = accounts;
 129                 if (accounts.length > 0) {
 130                   bytom.currentAccount = accounts[0];
 131                 }
 132
 133                 this[Actions.UPDATE_STORED_BYTOM](bytom)
 134               })
 135               .catch((errors) =>{
 136               bytom.accountList =[]
 137               this[Actions.UPDATE_STORED_BYTOM](bytom)
 138             })
 139           }
 140         },
 141         currencyToggle: function (val) {
 142           const bytom = this.bytom.clone();
 143
 144           if (bytom.settings.currency != val.value) {
 145             bytom.settings.currency = val.value;
 146             this.currentCurrency = val;
 147             this[Actions.UPDATE_STORED_BYTOM](bytom)
 148           }
 149         },
 150         refreshAccounts: function () {
 151           account.list().then(accounts => {
 152             this.accounts = accounts;
 153             if (accounts.length == 0) {
 154               return;
 155             }
 156
 157             this.currentAccount = accounts[0];
 158           })
 159         },
 160         setupNetwork(network) {
 161           this.network = network;
 162         },
 163         ...mapActions([
 164           Actions.UPDATE_STORED_BYTOM,
 165         ])
 166     },
 167     mounted: function () {
 168         this.hashVersion = version.hash;
 169         if (have(this.language)) {
 170               if (this.language == "cn") {
 171                   this.selected = { label: "中文", value: "cn" };
 172               } else if (this.language == "en") {
 173                   this.selected = { label: "English", value: "en" };
 174               }
 175           }
 176         if(this.net) {
 177             let network
 178             switch(this.net){
 179               case 'mainnet':
 180                 network = this.networks[0]
 181                 break;
 182               case 'testnet':
 183                 network = this.networks[1]
 184                 break;
 185               case 'solonet':
 186                 network = this.networks[2]
 187                 break;
 188             }
 189             this.setupNetwork(network);
 190           }
 191
 192           if(this.currency) {
 193             switch(this.currency){
 194               case 'in_cny':
 195                 this.currentCurrency = this.currencyList[0]
 196                 break;
 197               case 'in_usd':
 198                 this.currentCurrency = this.currencyList[1]
 199                 break;
 200               case 'in_btc':
 201                 this.currentCurrency = this.currencyList[2]
 202                 break;
 203             }
 204           }
 205
 206     }
 207 };
 208 </script>