yihuo/pages/withdraw_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" style="border-bottom: 1px solid #F8F8F8;padding-bottom: 20rpx;">
                <view class="color-1 font5"></view>
                <view class="tagBox" :style="{ background: STATUS_MAP[item.status + ''].bgColor }">
                    <view :style="{ color: STATUS_MAP[item.status + ''].color, opacity: 1 }">
                        {{ STATUS_MAP[item.status + ''].title }}
                    </view>
                </view>
            </view>
            <view class="paddingY6">
                <view class="cu-form-group">
                    <view class="title">提现时间：</view>
                    <view class="color-2 font2">{{ item.createTime }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">提现卡号</view>
                    <view class="color-2 font2">{{ item.accountNo }}</view>
                </view>
            </view>
            <view class="flex moneyInfo" style="background-color: #f8f8f8">
                <view class="basis-df padding-sm">
                    <div class="title">提现金额</div>
                    <div class="num">{{ item.money }}元</div>
                </view>
                <view class="basis-df padding-sm">
                    <div class="title">实际到账</div>
                    <div class="num">{{ item.actualMoney }}元</div>
                </view>
            </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: '#499BFF', bgColor: 'rgba(73,155,255,0.2)' },
        99: { title: '已完成', color: '#9E9E9E', bgColor: 'rgba(10, 199, 0, 0.2)' },
        10: { title: '用户取消', color: '#FF6200', bgColor: 'rgba(255, 98, 0, 0.2)' },
        11: { title: '超时取消', color: '#FF1524', bgColor: 'rgba(255, 21,36, 0.2)' }
    }

    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.withdrawRecord(
                    this.pageNum,
                    this.pageSize,
                    'MAGIC_PROMOTION'
                )
                return res
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tagBox {
        font-size: 24rpx;
        width: 102rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 20rpx;
        text-align: center;
    }
    .cell {
        margin: 10rpx 30rpx;
        padding: 30rpx;
        border-radius: 12rpx;
        background: #fff;
        border: 2rpx solid #eee;
    }
    .moneyInfo {
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;
        line-height: 52rpx;
        text-align: center;
        .title {
            color: #9e9e9e;
            font-size: 24rpx;
        }
    }
    .cu-form-group {
        border-top: none;
        min-height: 70rpx;
        padding: 0;
    }
</style>