jje_spread_uniapp/pages/earningsList/earningsList.vue

<template>
    <view class="page">
        <!-- #ifdef H5-->
        <uni-nav-bar v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"
                     left-icon="left" title="收益记录" @clickLeft="back"/>
        <!-- #endif -->

        <mescroll-uni ref="mescrollRef" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
                      :up="upOption" @up="upCallback" @emptyclick="emptyClick">

            <view class="flex-col statistics">
                <view class="flex-row grid">
                    <view class="flex-col gridItem">
                        <view class="title flex-row justify-center">
                            <text>累计奖励</text>
                        </view>
                        <view class="number flex-row justify-center">
                            <text>{{withdrawStaticsData.totalIncome}}</text>
                        </view>
                    </view>
                    <view class="flex-col gridItem leftBorder">
                        <view class="title flex-row justify-center">
                            <text>累计提现</text>
                        </view>
                        <view class="number flex-row justify-center">
                            <text>{{withdrawStaticsData.totalWithdraw}}</text>
                        </view>
                    </view>
                    <view class="flex-col gridItem leftBorder">
                        <view class="title flex-row justify-center">
                            <text>可提现</text>
                        </view>
                        <view class="number flex-row justify-center">
                            <text>{{withdrawStaticsData.canWithdraw}}</text>
                        </view>
                    </view>
                </view>
                <view class="flex-row justify-center">
                    <view class="flex-row justify-center tixian" @click="navigateTo('/pages/withdraw/withdraw')">
                        <text>去提现</text>
                        <u-icon name="arrow-right" color="#000" size="14"></u-icon>
                    </view>
                </view>

            </view>
            <view class="bgColor">
                <view class="flex-row grid1">
                    <view class="flex-col justify-evenly gridItem1">
                        <view class="title flex-row justify-center">
                            <text>累计拓客</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppTotalData.totalExpand}}</text>
                        </view>
                    </view>
                    <view class="flex-col justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>用券人数</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppTotalData.useCouponTotal}}</text>
                        </view>
                    </view>
                    <view class="flex-col justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>充值人数</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppTotalData.rechargeTotal}}</text>
                        </view>
                    </view>
                    <view class="flex-col  justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>消费次数累计</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppTotalData.consume}}</text>
                        </view>
                    </view>
                </view>

                <view class="title-h1">
                    <text>拓客数据(今日)</text>
                </view>
                <view class="flex-row grid1">
                    <view class="flex-col justify-evenly gridItem1">
                        <view class="title flex-row justify-center">
                            <text>累计拓客</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppTodayData.totalExpand}}</text>
                        </view>
                    </view>
                    <view class="flex-col justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>用券人数</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppTodayData.useCouponTotal}}</text>
                        </view>
                    </view>
                    <view class="flex-col justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>充值人数</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppTodayData.rechargeTotal}}</text>
                        </view>
                    </view>
                    <view class="flex-col  justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>消费次数累计</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppTodayData.consume}}</text>
                        </view>
                    </view>
                </view>
                <view class="title-h1">
                    <text>间接拓客数据(今日)</text>
                </view>
                <view class="flex-row grid1">
                    <view class="flex-col justify-evenly gridItem1">
                        <view class="title flex-row justify-center">
                            <text>累计拓客</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppIndirectData.totalExpand}}</text>
                        </view>
                    </view>
                    <view class="flex-col justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>用券人数</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppIndirectData.useCouponTotal}}</text>
                        </view>
                    </view>
                    <view class="flex-col justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>充值人数</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppIndirectData.rechargeTotal}}</text>
                        </view>
                    </view>
                    <view class="flex-col  justify-evenly gridItem1 leftBorder1">
                        <view class="title flex-row justify-center">
                            <text>消费次数累计</text>
                        </view>
                        <view class="number1 flex-row justify-center">
                            <text>{{expandAppIndirectData.consume}}</text>
                        </view>
                    </view>
                </view>
                <view v-for="(key,index) in  mapListCopy.keys()" :key="index">

                    <view class="title-h1 flex-row" @click="clickKey(key)">
                        <text>{{key}}</text>
                        <u-icon name="arrow-down" color="#000" size="16" v-if="selectDate == key"></u-icon>
                        <u-icon name="arrow-right" color="#000" size="16" v-else></u-icon>
                    </view>

                    <view class="listItem" v-if="selectDate == key" v-for="(item,index) in mapListCopy.get(key)">
                        <view class="flex-row justify-between listItemMsg">
                            <view class="memberNo">
                                <text>会员编号：{{item.memberNo}}</text>
                            </view>
                            <view class="flex-row justify-between msg">
                                <text>{{item.remake}}</text>
                                <text>{{item.amount}}</text>
                            </view>
                        </view>
                        <view class="time">
                            <text>{{item.createTime}}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!--		<view class="flex-row justify-center seeMore">-->
            <!--			<text>查看更多</text>-->
            <!--		</view>-->
        </mescroll-uni>

        <!--#ifdef H5-->
        <liu-drag-button v-if="$isWxBrowser()" @clickBtn="back">返回</liu-drag-button>
        <!--#endif-->
    </view>
</template>

<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"

    export default {
        mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
        components: {},

        data() {
            return {

                mapList: new Map(),
                mapListCopy: new Map(),
                selectDate: '',
                height: '',
                withdrawStaticsData: {},
                expandAppTotalData: {},
                expandAppTodayData: {},
                expandAppIndirectData: {},
                downOption: {
                    auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
                },
                upOption: {
                    auto: true, // 自动加载
                    // page: {
                    // 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    // 	size: 10 // 每页数据的数量
                    // },
                    noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    empty: {
                        icon: '/static/dataNull.png',
                        tip: '暂无内容', // 提示
                        // btnText: '去看看'
                    },
                    textNoMore: '没有更多了'
                },
            }
        },
        onLoad(e) {
            let sysInfo = uni.getSystemInfoSync()
            this.height = sysInfo.windowHeight - 70 + 'px' //除标题栏栏外的屏幕可用高度
            this.downCallback()
        },
        onShow() {
            this.withdrawStatics()
            this.expandAppTotal()
            this.expandAppToday()
            this.expandAppIndirect()
        },
        methods: {

            clickKey(key) {
                if (this.selectDate === key) {
                    this.selectDate = ''
                } else {
                    this.selectDate = key
                }
            },


            withdrawStatics() {
                this.$api.service.withdrawStatics().then(res => {
                    this.withdrawStaticsData = res.data.data
                })

            },
            expandAppTotal() {
                this.$api.service.expandAppTotal().then(res => {
                    this.expandAppTotalData = res.data.data
                })

            },

            expandAppToday() {
                this.$api.service.expandAppToday().then(res => {
                    this.expandAppTodayData = res.data.data
                })

            },

            expandAppIndirect() {
                this.$api.service.expandAppIndirect().then(res => {
                    this.expandAppIndirectData = res.data.data
                })

            },


            navigateTo(url) {
                uni.navigateTo({
                    url: url
                })
            },

            back() {
                let pages = getCurrentPages()
                if (pages.length > 1) {
                    uni.navigateBack({
                        delta: 1,
                        fail: err => {
                            console.log(err)
                        }
                    })
                } else {
                    uni.switchTab({
                        url: '/pages/my/my'
                    });
                }
            },

            /*下拉刷新的回调 */
            downCallback() {
                // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
                // loadSwiper();
                // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
                this.mescroll.resetUpScroll()
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
                //联网加载数据
                let httpData = {
                    pageNum: page.num,
                    pageSize: 100
                }
                this.$api.service.getRecord(httpData).then((res) => {
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    this.mescroll.endSuccess(res.data.data.length, res.data.data.length === 100);
                    //设置列表数据
                    if (page.num === 1) this.mapList = new Map(); //如果是第一页需手动制空列表

                    res.data.data.forEach(item => {
                        let date = item.createTime.substring(0, 7)
                        if (this.mapList.has(date)) {
                            //键已存在
                            this.mapList.get(date).push(item)
                        } else {
                            //键不存在
                            this.mapList.set(date, [item])
                        }
                    })
                    this.mapListCopy = new Map()
                    this.mapListCopy = this.mapList
                    if (page.num === 1) {
                        const keys = Array.from(this.mapListCopy.keys());
                        this.selectDate = keys[0];
                    }
                    console.log('++++++++++++++++++++++++', this.mapListCopy)


                }).catch((err) => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                })


            },

            //点击空布局按钮的回调
            emptyClick() {
                uni.showToast({
                    title: '点击了按钮,具体逻辑自行实现'
                })
            },


        }
    }
</script>

<style lang="scss" scoped>
    @import './index.rpx.css';
</style>