diancan_uni/pages/shopRole/cashoutlog/index.vue

<template>
    <view>
        <view class="container">
            <van-tabs :active="active" class="custom_tabs" line-width="20" line-height="2" :swipe-threshold="6" :border="false" @click="onClickTab">
                <van-tab title="待审核" :name="0"></van-tab>
                <van-tab title="通过" :name="1"></van-tab>
                <van-tab title="驳回 " :name="-1"></van-tab>
            </van-tabs>
            <view class="list">
                <view class="item" v-for="(log, index) in dataList" :key="index">
                    <view class="item_t">
                        <view class="price">¥{{ log.money }}</view>
                        <view :class="log.status == 0 ? 'status' : log.status == -1 ? 'status refuse' : 'status pass'">
                            {{ log.status == 0 ? '待审核' : log.status == -1 ? '驳回' : '通过' }}
                        </view>
                    </view>

                    <view class="mark" v-if="log.created_at">
                        <view class="mark_l">申请时间:</view>
                        <view class="mark_r">{{ log.created_at }}</view>
                    </view>

                    <view class="mark" v-if="log.review_at">
                        <view class="mark_l">审核时间:</view>
                        <view class="mark_r">{{ log.review_at }}</view>
                    </view>

                    <view class="mark" v-if="log.comment">
                        <view class="mark_l">审核备注:</view>
                        <view class="mark_r">{{ log.comment }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- loading -->
        <van-overlay :show="loading" :z-index="100">
            <van-loading custom-class="custom_loading" />
        </van-overlay>
    </view>
</template>

<script>
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: getApp().globalData.imgUrl,
            active: 0,

            // 0待审核 -1驳回 1通过
            dataList: [],

            page: 1,
            size: 10,
            finished: false,

            // 全局loading
            loading: false,

            log: {
                money: '',
                status: 0,
                created_at: '',
                review_at: '',
                comment: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let that = this;

        if (options.status != null) {
            that.setData({
                active: options.status
            });
        }

        that.getDataList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let that = this;
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        let that = this;

        if (!that.finished) {
            that.getDataList();
        }
    },
    methods: {
        // 获取商家订单列表
        getDataList() {
            let that = this;
            let params = {
                page: that.page,
                size: that.size,
                status: that.active
            };
            that.setData({
                loading: true
            });
            myPro
                .wxRequest('store/tx/log', 'GET', params)
                .then((res) => {
                    that.setData({
                        loading: false
                    });
                    let tempList = res.result; // 无数据

                    if (tempList.length == 0) {
                        uni.showToast({
                            title: '暂无更多数据',
                            icon: 'none'
                        });
                        that.setData({
                            finished: true
                        });
                    } else {
                        // 有数据
                        let list = that.dataList;
                        list = list.concat(tempList);
                        that.setData({
                            dataList: list,
                            page: that.page + 1
                        });
                    }
                })
                .catch((err) => {
                    that.setData({
                        loading: false
                    });
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 切换列表
        onClickTab(event) {
            // console.log('event',event)
            let that = this;
            that.setData({
                active: event.detail.name,
                page: 1,
                dataList: [],
                finished: false
            });
            that.getDataList();
        }
    }
};
</script>
<style>
/* tab */
.van-tabs__scroll--line {
    height: auto !important;
}
.van-tabs {
    border-bottom: 1rpx solid rgba(243, 244, 249, 1);
}
.van-tabs__line {
    width: 40rpx !important;
    height: 4rpx;
    background: rgba(211, 68, 68, 1);
    border-radius: 2rpx !important;
}
.van-tab,
.van-tab .van-ellipsis {
    padding: 0 !important;
    font-size: 30rpx;
    color: rgba(0, 0, 0, 1);
}
.van-tab--active,
.van-tab--active .van-ellipsis {
    color: rgba(211, 68, 68, 1);
}
/* 提现记录 */
.list {
    padding: 90rpx 30rpx 0;
}
.list .item {
    margin-top: 30rpx;
    font-size: 30rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(0, 0, 0, 0.09);
    border-radius: 10rpx;
    padding: 0 30rpx;
}
.list .item .item_t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 0;
}
.list .item .mark {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 0;
}
.list .item .mark .mark_r {
    padding-left: 30rpx;
}
.list .item .status.refuse {
    color: #d54c43;
}
.list .item .status.pass {
    color: rgba(100, 200, 133, 1);
}
/* 固定tab的位置 */
.custom_tabs {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
</style>