update the select asset page

diff --git a/src/assets/language/cn.js b/src/assets/language/cn.js
index 02b6b67..e2fb9f9 100644 (file)
--- a/src/assets/language/cn.js
+++ b/src/assets/language/cn.js
@@ -20,7 +20,9 @@ const cn = {
     retire:'资产销毁',
     transfer_in:'收款',
     transfer_out:'转账',
-    cross_chain:'跨链'
+    cross_chain:'跨链',
+    confirm: '确认',
+    cancel: '取消'
   },
   welcome: {
     enterMain:'进入主界面',
@@ -56,9 +58,12 @@ const cn = {
     }
   },
   transfer: {
-    address: '地址',
+    address: '接收地址',
+    bytomAddress:'主链地址(bm开头）',
+    vaporAddress:'侧链地址(vp开头）',
     quantity: '数量',
-    fee: '矿工费用',
+    fee: '手续费',
+    available:'可用',
     feeType: '标准',
     send: '发送交易',
     confirmPassword: '密码',
@@ -66,7 +71,7 @@ const cn = {
     cancel: '取消',
     emptyPassword: '密码不能为空',
     unit: '单位',
-    asset:'资产',
+    asset:'选择资产',
     assetId:'资产Id',
     emptyTo: '地址不能为空',
     noneBTM: '错误的BTM数量',

diff --git a/src/assets/style.css b/src/assets/style.css
index eda8a59..fe632e3 100644 (file)
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -383,6 +383,13 @@ hr {
 .bg-green {
   background-color: #035BD4 !important;
 }
+.bg-vapor{
+  background: #004EE4 !important;
+}
+
+.bg-bytom{
+  background: #000000 !important;
+}
 
 .bg-shadow-white{
   background: #FFFFFF;
@@ -486,7 +493,7 @@ hr {
   padding: 12px 20px;
   height: 48px;
   line-height: 24px;
-  border-radius: 0.2rem;
+  border-radius: 22px;
   white-space: nowrap;
   text-overflow: ellipsis;
   vertical-align: middle;
@@ -494,6 +501,7 @@ hr {
   box-sizing: border-box;
   -webkit-user-select: none;
   user-select: none;
+  border: 0;
 }
 .btn:hover {
   cursor: pointer;
@@ -506,18 +514,39 @@ hr {
   width: 50%;
   height: 50%;
 }
-.btn-primary {
+
+.btn-primary,
+.btn-vapor
+{
   color: #ffffff;
   background-color: #004EE4;;
 }
+
 .btn-primary:active,
 .btn-primary:hover,
-.btn-primary:focus {
+.btn-primary:focus,
+.btn-vapor:active,
+.btn-vapor:hover,
+.btn-vapor:focus {
   color: #ffffff;
   background-color: #044BAF;
   border: none;
 }
 
+.btn-bytom
+{
+  color: #ffffff;
+  background-color: #000000;;
+}
+
+.btn-bytom:active,
+.btn-bytom:hover,
+.btn-bytom:focus {
+  color: #ffffff;
+  background-color: #1d1d1d;
+  border: none;
+}
+
 .btn-warning {
   background-color: #E60000;
 }

diff --git a/src/components/selection-page/index.js b/src/components/selection-page/index.js
new file mode 100644 (file)
index 0000000..f7a53e3
--- /dev/null
+++ b/src/components/selection-page/index.js
@@ -0,0 +1,9 @@
+import SelectionPage from "./page"
+
+const selelctionPageInstance = {
+  install: function (Vue, options) {
+    Vue.component('SelectionPage', SelectionPage);
+  },
+};
+
+export default selelctionPageInstance;

diff --git a/src/components/selection-page/page.vue b/src/components/selection-page/page.vue
new file mode 100644 (file)
index 0000000..1a14fa9
--- /dev/null
+++ b/src/components/selection-page/page.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <label class="select-item font-bold" v-for="option in options"  :for="option.label">
+          {{option.label}}
+          <input type="radio" :id="option.label" :name="option.label" :value="option.value" @change="onChange" :checked="(option.value == value)">
+        </label><br>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+      title: "",
+      value: {
+        default: null
+      },
+      options: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      onChange: {
+        type: Function,
+        default: function (val) {
+          this.$emit('input', val)
+        }
+      },
+    },
+};
+</script>
+
+<style scoped>
+.select-item {
+  width: calc( 100% - 32px);
+  background: #FFFFFF;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  margin-bottom: 20px;
+  color: rgba(0, 0, 0, 0.88);
+  font-size:15px;
+}
+</style>

diff --git a/src/popup.js b/src/popup.js
index 61fd997..e729eea 100644 (file)
--- a/src/popup.js
+++ b/src/popup.js
@@ -13,11 +13,13 @@ import Dialog from '@/components/dialog'
 import vSelect from '@/components/select'
 import Toast from '@/components/toast'
 import MenuPage from '@/components/menu-page'
+import SelectionPage from '@/components/selection-page'
 import Header from '@/components/header'
 import Footer from '@/components/footer'
 import BackButton from '@/components/backButton'
 import Success from '@/components/Success.vue'
 import Menubar from '@/components/MenubarComponent.vue'
+import ModalPasswd from '@/components/modal-passwd.vue'
 import messages, { getLanguage } from '@/assets/language'
 
 import account from "@/models/account";
@@ -39,6 +41,7 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => {
   Vue.use(vuescroll)
   Vue.use(VueRouter)
   Vue.use(MenuPage)
+  Vue.use(SelectionPage)
   Vue.use(Header)
   Vue.use(Footer)
   Vue.use(Loading)
@@ -48,6 +51,7 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => {
   Vue.component('success', Success)
   Vue.component('menu-bar', Menubar)
   Vue.component('v-select', vSelect)
+  Vue.component('modal-passwd', ModalPasswd)
 
   Vue.prototype.$vuescrollConfig = {
     mode: 'native',

diff --git a/src/router.js b/src/router.js
index 62be809..9f67f45 100644 (file)
--- a/src/router.js
+++ b/src/router.js
@@ -22,6 +22,7 @@ export const RouteNames = {
   // SETTINGS:'settings',
   //
   TRANSFER:'transfer',
+  ASSET_SELECTION:'asset-selection',
   RECEIVE:'received',
   // IDENTITIES:'identities',
   // IDENTITY:'identity',
@@ -161,6 +162,14 @@ const routers = [
         }
       },
       {
+        path: '/assetSelection',
+        name: RouteNames.ASSET_SELECTION,
+        meta: { title: '选择资产' },
+        component: resolve => {
+          require(['@/views/sendTransaction/assetSelection.vue'], resolve)
+        }
+      },
+      {
         path: '/signTransaction',
         name: 'sign-transaction',
         meta: { title: '签名交易' },

diff --git a/src/views/sendTransaction/assetSelection.vue b/src/views/sendTransaction/assetSelection.vue
new file mode 100644 (file)
index 0000000..b991cac
--- /dev/null
+++ b/src/views/sendTransaction/assetSelection.vue
@@ -0,0 +1,76 @@
+<style lang="scss" scoped>
+  .header{
+    display: flex;
+    margin-bottom: 20px;
+    h1{
+      margin-left: 12px;
+      font-size: 20px;
+    }
+  }
+
+</style>
+
+<template>
+    <div class="warp-child bg-grey">
+        <section class="header">
+          <BackButton :small="true" />
+          <h1 class="color-black">
+            <div class="welcome-title">{{ $t('transfer.asset')}}</div>
+          </h1>
+        </section>
+        <section>
+          <SelectionPage :value="asset" :options="assets" :onChange="assetToggle"></SelectionPage>
+        </section>
+        <section>
+          <button :class="['btn', netType ==='vapor'?'btn-vapor':'btn-bytom']" @click="setAsset(asset)">
+            {{$t('common.confirm')}}
+          </button>
+        </section>
+
+    </div>
+</template>
+
+<script>
+import { camelize } from "@/utils/utils";
+import { BTM } from "@/utils/constants";
+import { mapActions, mapGetters, mapState } from 'vuex'
+import * as Actions from '@/store/constants';
+
+
+export default {
+    name: "",
+    data() {
+        return {
+            asset:'BTM',
+        };
+    },
+    computed: {
+      assets: function () {
+        if(this.netType === 'vapor'){
+          return this.currentAccount.vpBalances.map(a => {return {label:a.asset.symbol, value:a.asset.symbol}})
+        }else{
+          return this.currentAccount.balances.map(a =>  {return {label:a.asset.symbol, value:a.asset.symbol}})
+        }
+
+      },
+        ...mapGetters([
+          'currentAccount',
+          'netType'
+        ])
+    },
+    methods: {
+      assetToggle: function(event){
+        this.asset = event.target.value
+      },
+      ...mapActions([
+        Actions.SET_CURRENT_ASSET,
+      ]),
+      setAsset(asset){
+        this[Actions.SET_CURRENT_ASSET](asset)
+        this.$router.go(-1)
+      }
+    },
+    mounted() {
+    },
+  };
+</script>

diff --git a/src/views/sendTransaction/transfer.vue b/src/views/sendTransaction/transfer.vue
index 41a2ef9..a81acd2 100644 (file)
--- a/src/views/sendTransaction/transfer.vue
+++ b/src/views/sendTransaction/transfer.vue
@@ -1,12 +1,12 @@
-<style lang="" scoped>
-.header {
-  display: flex;
-}
-.header p{
-  text-align: center;
-  width: 270px;
-  padding-top: 17px;
-}
+<style lang="scss" scoped>
+.header{
+    display: flex;
+    margin-bottom: 20px;
+    h1{
+      margin-left: 12px;
+      font-size: 20px;
+    }
+  }
 .balance {
   width: 280px;
   height: 40px;
@@ -80,13 +80,15 @@
 </style>
 
 <template>
-    <div class="warp-child bg-gray">
-        <section class="header bg-header">
-            <i class="iconfont icon-back" @click="close"></i>
-            <p>{{ $t('main.send') }}</p>
-        </section>
+    <div class="warp-child bg-grey">
+      <section class="header">
+        <BackButton :small="true" :des="'home'"/>
+        <h1 class="color-black">
+          <div class="welcome-title">{{ $t('main.send') }}</div>
+        </h1>
+      </section>
 
-        <section class="balance transfer-header">
+        <section class="bg-shadow-white ">
           <div class="wallet">
             <i class="iconfont icon-wallet"></i>
           </div>
@@ -99,9 +101,7 @@
               {{currentAccount.alias}}
             </div>
           </div>
-        </section>
-
-        <section class="form-container">
+          
           <div class="form bg-white">
               <div class="form-item">
                   <label class="form-item-label">{{ $t('transfer.asset') }}</label>

diff --git a/src/views/viewBase.vue b/src/views/viewBase.vue
index 729c4af..3187fdb 100644 (file)
--- a/src/views/viewBase.vue
+++ b/src/views/viewBase.vue
@@ -33,6 +33,7 @@
         <menu-bar></menu-bar>
         <router-view></router-view>
         <success></success>
+        <modal-passwd></modal-passwd>
     </section>
 </template>