<template>
    <section class="account-detail">
        <Header :title="title" :meaushow='meaushow'></Header>
        <div class="account-detail-content">
            <div class="detail-box detail-content-1">
                <div class="pay-img"><span><img src="../../assets/images/wallet/orderpay.png" alt="账单详情"></span></div>
                <p class="pay-type">{{payType}}</p>
                <p class="pay-amount">{{payAmount}}</p>
                <p class="pay-status">{{payStatus}}</p>
            </div>
            <div class="detail-box detail-content-2">
                <p class="pay-flow">支付流水<span>{{payFlow}}</span></p>
                <p class="pay-time">支付时间<span>{{payTime}}</span></p>
                <p class="pay-method">支付方式<span>{{payMethod}}</span></p>
            </div>
            <div class="detail-box detail-content-3">
                <p class="pay-balance">钱包可用余额<span>￥{{payBalance}}</span></p>
                <p class="pay-detail">详情<a href="#">查看订单 ></a></p>
            </div>
        </div>
    </section>
</template>

<script>
    import Vue from 'vue';
    import {mapState} from 'vuex'
    import Header from '@/views/common/Header.vue';

    export default {
        name: 'AccountDetail',
        data() {
            return {
                title: "账单详情",
                meaushow: true,
                payType: "订单支付",
                payAmount: 1256.00,
                payStatus: "交易完成",
                payFlow: 1201811123491734912,
                payTime: "2019-04-05 17:03:01",
                payMethod: "微信",
                payBalance: 1200.00,
            }
        },
        computed: {
            ...mapState({
              
            })
        },
        watch: {
          
        },
        created() {

        },
        methods: {
           
        },
        components: {
            Header
        }
    }
</script>

<style scoped>
    @import "../../assets/css/wallet/wallet.css";
</style>