jzhw_uni/pages/ucenter/parter/cashout/index.vue

<template>
    <view class="container">
        <view class="b">
            <view class="l">可提现金额：{{ cash }}</view>
            <view class="r">
                <view class="btn active" @tap="btnCashout" v-if="cash > 0">申请提现</view>
            </view>
        </view>
        <view class="no-order" v-if="list.length <= 0">
            <view class="c">
                <text>还没有任何提现记录呢</text>
            </view>
        </view>

        <view class="orders">
            <view class="order" v-for="(item, index) in list" :key="index">
                <view class="h">
                    <view class="l">提现金额：{{ item.amount }}</view>
                    <view class="r">状态：{{ item.status }}</view>
                </view>

                <view class="goods">
                    <view class="info">
                        <text class="number">申请时间：{{ item.addTime }}</text>
                        <text class="number">备注：{{ item.confirmMemo }}</text>
                    </view>
                    <view class="status"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../../utils/util.js');
var api = require('../../../../config/api.js');
export default {
    data() {
        return {
            list: [],
            cash: 0,
            //可提现金额
            page: 1,
            limit: 10,
            totalPages: 1
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.setData({
            cash: options.m
        });
        this.getList();
    },
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getList();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    onReachBottom: function () {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getList();
        } else {
            uni.showToast({
                title: '没有更多提现申请了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    methods: {
        getList: function () {
            uni.showLoading({
                title: '加载中'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);
            let that = this;
            util.request(api.DisCashoutList, {
                page: that.page,
                limit: that.limit
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        list: that.list.concat(res.data.list),
                        totalPages: res.data.pages
                    });
                }
                uni.hideLoading();
            });
        },

        btnCashout: function () {
            //提现申请
            let that = this;
            uni.showModal({
                title: '',
                content: '确定要申请提现？ 提现金额：' + that.cash,
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.DisCashoutApply,
                            {
                                amount: that.cash
                            },
                            'GET'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '提现申请成功，请等待管理员处理'
                                });
                                setTimeout(function () {
                                    that.setData({
                                        page: 1,
                                        limit: 0,
                                        list: [],
                                        cash: 0
                                    });
                                    that.getList();
                                }, 2000);
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.orders-switch {
    width: 100%;
    background: #fff;
    height: 84rpx;
    /* border-bottom: 1px solid rgba(0,0,0,.15); */
}

.orders-switch .item {
    display: inline-block;
    height: 82rpx;
    width: 18%;
    padding: 0 15rpx;
    text-align: center;
}

.orders-switch .item .txt {
    display: inline-block;
    height: 82rpx;
    padding: 0 20rpx;
    line-height: 82rpx;
    color: #9a9ba1;
    font-size: 30rpx;
    width: 170rpx;
}

.orders-switch .item.active .txt {
    color: #ab956d;
    border-bottom: 4rpx solid #ab956d;
}

.no-order {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.no-order .c {
    width: 100%;
    height: auto;
    margin-top: 400rpx;
}

.no-order .c text {
    margin: 0 auto;
    display: block;
    width: 258rpx;
    height: 29rpx;
    line-height: 29rpx;
    text-align: center;
    font-size: 29rpx;
    color: #999;
}

.orders {
    height: auto;
    width: 100%;
    overflow: hidden;
}

.order {
    margin-top: 20rpx;
    background: #fff;
}

.order .h {
    height: 83.3rpx;
    line-height: 83.3rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
    font-size: 30rpx;
    color: #333;
}

.order .h .l {
    float: left;
}

.order .h .r {
    float: right;
    color: #b4282d;
    font-size: 24rpx;
}
.order .goods {
    display: flex;
    align-items: center;
    height: 159rpx;
    margin-left: 31.25rpx;
}

.order .goods .info {
    height: 105.83rpx;
    flex: 1;
    padding-left: 20rpx;
}

.order .goods .name {
    display: block;
    height: 44rpx;
    line-height: 44rpx;
    color: #333;
    font-size: 30rpx;
}

.order .goods .number {
    display: block;
    height: 37rpx;
    line-height: 37rpx;
    color: #666;
    font-size: 25rpx;
}

.order .goods .status {
    width: 105rpx;
    color: #b4282d;
    font-size: 25rpx;
}

.b {
    height: 103rpx;
    line-height: 53rpx;
    padding-left: 31.25rpx;
    padding-top: 20rpx;
    padding-right: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    font-size: 30rpx;
    background: #fff;
}

.b .l {
    float: left;
}

.b .r {
    float: right;
    color: red;
}

.btn {
    height: 64.5rpx;
    line-height: 64.5rpx;
    text-align: center;
    padding: 0 20rpx;
    border-radius: 5rpx;
    font-size: 28rpx;
    color: #fff;
    background: #b4282d;
}
</style>