ysdH5/pages/account/withdrawal_record.vue

<template>
    <view>
        <view class="profigOrder-module-title">
            <view class="profigOrder-module-name">
                提现列表
            </view>
            <view class="profigReport-module-picker">
                <picker @change="screenWithdrawal" :value="WithdrawalIndex" :range-key="'name'" :range="WithdrawalWay">
                    {{ WithdrawalWay[WithdrawalIndex].name }}
                </picker>
                <image class="profigReport-module-icon" src="/static/icon/arrow_down.png"></image>
            </view>
        </view>
        
        <view v-if="accounts.length > 0" class="recordCont">
            <view class="record-list" v-for="(item, index) in accounts" :key="index">
                <view class="record-top">
                    <view class="record-way">{{ item.way }}</view>
                    <view class="record-take">+{{ item.take }}</view>
                </view>
                <view class="record-cont">
                    <view class="record-label">
                        <view class="record-label-name">提现时间</view>
                        <view class="record-label-time">{{ item.create_at }}</view>
                    </view>
                    <view class="record-label">
                        <view class="record-label-name">提现状态</view>
                        <view class="record-label-status" :class="{'record-label-green' : item.status.status == 3}">
                            {{ item.status.status_text }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="pagesLoding" v-if="lodingStats">
                <block v-if="page.has_more">
                    <image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
                </block>
                <block v-else>
                    没有更多了~
                </block>
            </view>
        </view>
        <!-- 暂无内容 -->
        <view class="pack-center pages-hint" v-else>
            <image src="/static/img/legal_tips.png"></image>
            <view>抱歉，目前暂无记录~</view>
        </view>
    </view>
</template>

<script>
    import { withdrawsList } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                accounts    : [],       // 列表
                page        : {},       // 分页信息
                lodingStats : false,    // 加载状态
                WithdrawalWay         : [
                    {value: '', name: "全部", status: ''},
                    {value: 0, name: "提现中", status: 'init'},
                    {value: 1, name: "已提现", status: 'end'}
                ],
                WithdrawalIndex  : 0,       // 收益订单筛选列表index
                WithdrawalValue  : 'init'  // 收益订单筛选列表value
    		}
    	},
        onLoad(options) {
            this.WithdrawalValue = options.status
            this.WithdrawalIndex = parseInt(options.idx)
        },
        onShow() {
            // 获取提现列表
            this.recordInfo();
        },
        methods: {
            // 提现列表
            recordInfo(page) {
                withdrawsList({
                    status: this.WithdrawalValue,
                    page: page
                }).then(res=>{
                    let listArr = this.accounts,
                        newData = []
                    if(page == 1 || page == undefined) listArr = []
                    newData = listArr.concat(res.data)
                    this.accounts = newData
                    this.page     = res.page       
                }).catch(err => {});
            },
        
            // 团队类型选择
            screenWithdrawal(val) {
                this.WithdrawalIndex = val.detail.value
                this.WithdrawalValue = this.WithdrawalWay[val.detail.value].status
                // 获取提现列表
                this.recordInfo();
            },
        
            // 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh() {
                // 获取提现列表
                this.recordInfo();
            },
        
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    // 获取提现列表
                    this.recordInfo(pageNumber);
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    
    /* 记录列表 */
    .record-list {
        background-color: #fff;
        border-radius: 10rpx;
        padding: 25rpx 25rpx 10rpx;
        box-sizing: border-box;
        margin: 30rpx;
    }
    
    .record-top {
        display: flex;
    }
    
    .record-way {
        flex: 1;
    }
    
    .record-take {
        font-weight: 600;
    }
    
    .record-cont {
        margin-top: 20rpx;
        color: #999;
        font-size: 28rpx;
    }
    
    .record-label {
        display: flex;
        line-height: 70rpx;
    }
    
    .record-label-name {
        flex: 1;
    }
    
    .record-label-status {
        color: red;
    }
    
    .record-label-status.record-label-green {
        color: green;
    }
    
    .profigOrder-module-title {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9;
        background-color: #ffffff;
        display: flex;
        box-sizing: border-box;
        height: 80rpx;
        line-height: 80rpx;
        margin-bottom: 30rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
    }
    
    .profigOrder-module-name {
        font-weight: 600;
        flex: 1;
    }
    
    .profigReport-module-picker {
        display: flex;
        color: #797979;
        font-size: 28rpx;
        padding-top: 4rpx;
    }
    
    .profigReport-module-icon {
        width: 28rpx;
        height: 28rpx;
        margin: 26rpx 0 0 10rpx;
    }
    
    .recordCont {
        margin-top: 110rpx;
    }
</style>