|
@@ -0,0 +1,99 @@
|
|
|
+<template>
|
|
|
+ <section class="screen flex">
|
|
|
+
|
|
|
+ <header class="wallet-header rowACenter">
|
|
|
+ <aside
|
|
|
+ class="flex-1 wallet-header-item"
|
|
|
+ v-for="(item,index) in layoutData"
|
|
|
+ :key="'wallet-header-item'+index"
|
|
|
+ :class="{
|
|
|
+ 'wallet-header-item-margin': index!==0,
|
|
|
+ ['wallet-header-item-'+item.style]:item.style,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <section class="rowACenter">
|
|
|
+ <img src="@/assets/images/currency.png" class="wallet-currency-icon" />
|
|
|
+ <div class="flex-1 overflow">
|
|
|
+ <div class="wallet-header-label line-1">{{item.label}}</div>
|
|
|
+ <div class="wallet-header-placeholder line-1">{{item.placeholder}}</div>
|
|
|
+ </div>
|
|
|
+ <section class="rowACenter">
|
|
|
+ <aside class="cursor-pointer center wallet-button"
|
|
|
+ v-for="(cItem,cIndex) in item.buttonGroup"
|
|
|
+ :class="{
|
|
|
+ 'wallet-button-margin': cIndex !== 0
|
|
|
+ }"
|
|
|
+ :key="'button-'+cIndex+'-'+index"
|
|
|
+ @click="trigger(cItem,cIndex)"
|
|
|
+ >{{cItem.label}}</aside>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+ <div class="wallet-header-price line-1">{{$store.getters[item.key]}}</div>
|
|
|
+ </aside>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <section class="flex-1 overflow">
|
|
|
+ <tab
|
|
|
+ :data="tabData"
|
|
|
+ >
|
|
|
+
|
|
|
+ <template v-slot:header="{data,trigger,select}">
|
|
|
+ <header class="rowACenter tab-button-header">
|
|
|
+ <aside
|
|
|
+ class="tab-button-item center"
|
|
|
+ :class="{
|
|
|
+ 'tab-button-item-select': index === select,
|
|
|
+ 'cursor-pointer': index !== select
|
|
|
+ }"
|
|
|
+ v-for="(item,index) in data"
|
|
|
+ :key="'tab-item-'+index"
|
|
|
+ @click="trigger(index)"
|
|
|
+ >{{item.label}}</aside>
|
|
|
+ </header>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template
|
|
|
+ v-for="(item,index) in tabData"
|
|
|
+ v-slot:[item.slot]
|
|
|
+ >
|
|
|
+ <wallet-info
|
|
|
+ :key="'wallet-info-'+index"
|
|
|
+ :type="item.slot"
|
|
|
+ ></wallet-info>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </tab>
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import layoutData from '../data/data';
|
|
|
+import tabData from '../data/tab';
|
|
|
+import walletInfo from '../components/wallet-info';
|
|
|
+import {
|
|
|
+ tab
|
|
|
+} from '$components';
|
|
|
+import mixins from '../mixins';
|
|
|
+export default {
|
|
|
+ name: "my-wallet",
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ layoutData,
|
|
|
+ tabData
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ tab,
|
|
|
+ walletInfo
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ return this.$store.dispatch('updateUserMoneyPromise');
|
|
|
+ },
|
|
|
+ mixins
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss" src="../style.scss"></style>
|