yihuo/pages/recharge_record/index.vue

<template>
    <page title="充值记录" ref="pageRef" nav-color="transparent">
        <view v-for="(item, index) in tableData" :key="index" class="cell">
            <view class="flex-align-between ">
                <view class="color-1 font5">充值金额: {{item.amount}}元</view>
                <view :style="{color: item.status === 99 ? '#30b914' : '#999'}">{{item.status === 99 ? '已完成' : '待支付'}}</view>
            </view>
            <view class="color-1 font3 paddingT5">交易号: {{item.tradeNo}}</view>
            <view class="paddingT5 color-2 font2">{{item.createTime}}</view>
        </view>
        <empty v-if="isEmpty" :top="200" />
    </page>
</template>
<script>
import pageMixin from './../../mixin/page'
import empty from '@/components/empty'

const STATUS_MAP = {
    0: { title: '待审核', color: '#b9b914' },
    1: { title: '待打款', color: '#b9b914' },
    2: { title: '已完成', color: '#30b914' },
    '-1': { title: '未完成', color: '#999' }
}

export default {
    mixins: [pageMixin],
    components: { empty },
    data() {
        return {
            STATUS_MAP
        }
    },
    mounted() {
        this.refresh()
    },
    onPullDownRefresh() {
        this.refresh()
    },
    onReachBottom() {
        this.loadMore()
    },
    methods: {
        init() {
            this.refresh()
        },
        async loadData() {
            const res = await this.$service.wallet.rechargeRecord(
                this.pageNum,
                this.pageSize,
                'CASH'
            )
            return res
        }
    }
}
</script>
<style lang="scss" scoped>
.cell {
    margin: 10rpx 30rpx;
    padding: 30rpx;
    border-radius: 12rpx;
    background: #fff;
    border: 2rpx solid #eee;
}
</style>