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-col  listItemMsg">
              <view class="flex-row justify-between">
                <text class="memberNo">会员编号：{{ item.memberNo }}</text>
                <view class="flex-row justify-between msg" >
                  <text>{{ item.remake }}</text>
                  <text>{{ item.amount }}</text>
                </view>
              </view>
              <view class="flex-row justify-between">
                <text class="time">{{ item.createTime }}</text>
                <view  v-if="item.remake == '充值'" class="time">当前可提现：{{ item.canWithdrawAmount }}</view>
              </view>
            </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>