<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{backgroundColor: '#ffcb57'}"
                :border-bottom="false"
                title="钱包"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <view class="overview">
                <view class="wallet">
                    <img class="icon-wallet" src="../../static/images/common/wallet.png" />
                    <view class="title">账户余额</view>
                    <view class="amount">¥ {{curUserinfo.balance}}</view>
                </view>
            </view>
            <u-card :show-head="false" padding="0" margin="0 30rpx 15rpx 30rpx">
                <view slot="body">
                    <u-cell-group>
                        <u-cell-item title="账户充值" icon="coupon-fill" @click="goRecharge"></u-cell-item>
                        <u-cell-item title="余额提现" icon="rmb-circle-fill" @click="goWithdraw"></u-cell-item>
                        <u-cell-item title="账户明细" icon="list-dot" @click="goDetail"></u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
        </view>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data() {
        return {};
    },
    onLoad() {},
    computed: {
        ...mapGetters({
            curUserinfo: 'user/displayUserInfo',
        }),
    },
    methods: {
        goRecharge() {
            this.$u.route('/pages/recharge/index');
        },
        goWithdraw() {
            this.$u.route('/pages/withdraw/index');
        },
        goDetail() {
            this.$u.route('/pages/transaction-detail/index');
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .overview {
            padding: 80rpx 0 60rpx 0;
            .wallet {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .icon-wallet {
                    width: 120rpx;
                    height: 120rpx;
                }
                .title {
                    margin-top: 6rpx;
                    font-size: 24rpx;
                }
                .amount {
                    margin-top: 12rpx;
                    font-size: 36rpx;
                }
            }
        }
    }
}
</style>
