payment/src/views/record/index.vue

<template>
  <div class="mianBox">
    <van-row class="headerBox">
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      消费记录
    </van-row>
    <van-tabs v-model="active" class="type" color="red" line-width="60px"  @click="tab"> 
      <van-tab title="充值记录">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :style="height"
            line-width="60px"
          >
            <van-row class="listBoxCell" v-for="(item,index) in recharge" :key="index">
                <van-col span="18">
                    <van-row class="jlName">{{item.type}}</van-row>
                    <van-row class="jlTime">时间：{{item.createTime}}</van-row>
                    <van-row class="jlBalance">余额：{{item.balance}}</van-row>
                </van-col>
                <van-col span="6" class="jlMoney" :class="item%2?'just':'negative'">+{{item.amt}}</van-col>
            </van-row>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="消费记录">
        
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :style="height"
          >
            <van-row class="listBoxCell" v-for="(item,index) in consumption" :key="index">
                <van-col span="18">
                    <van-row class="jlName">{{item.shopName}}</van-row>
                    <van-row class="jlTime">时间：{{item.createTime}}</van-row>
                </van-col>
                <van-col span="6" class="jlMoney" :class="item%2?'just':'negative'">+200元</van-col>
            </van-row>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <van-cell title="选择日期区间" :value="date" @click="show = true"   style="position: absolute;top:94px;left:0;z-index:10;"/>
    <van-calendar v-model="show" type="range" @confirm="onConfirm"  :min-date="minDate" />
    
  </div>
</template>

<script>
import {  Toast } from "vant";
import { RechargeConsumption } from '@/plugins/common'
export default {
  data() {
    return {
      recharge: [],
      consumption:[],
      loading: false,
      finished: true,
      refreshing: true,
      height:{
        height:false,
        marginTop:'60px',
      },
      active: 0,
      date: '',
      show: false,
      minDate: new Date(2020, 1,1),
    };
  },
  components: {
    [Toast.name]: Toast
  },
  created(){
    this.height.height = (document.documentElement.clientHeight - 120) + 'px'
    this.onLoad();

    
  },
  methods: {
    tab(name, title) {
      // Toast(name);
      if(name==0){
        this.consumption = []
      }else{
        this.recharge = []
      }
      this.date = ''
      
      

    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
     
      this.show = false;
      
      var start_ = new Date(date[0]);
      var starTime= start_.getFullYear() + '-' + (start_.getMonth() + 1) + '-' + start_.getDate() 
      // + ' ' + start_.getHours() + '0:' + start_.getMinutes() + '0:0' + start_.getSeconds();
      var end_ = new Date(date[1]);
      var endTime=end_.getFullYear() + '-' + (end_.getMonth() + 1) + '-' + end_.getDate()  
      // + ' ' + end_.getHours() + '0:' + end_.getMinutes() + '0:0' + end_.getSeconds();
      this.date = starTime + ' 至 ' + endTime
      RechargeConsumption("charge", starTime + ' 00:00:00', endTime + ' 00:00:00' , 1, 20).then((res=>{
        console.log(res)
        this.recharge = []
        if(res.data.data.records.length>0){
          this.recharge = res.data.data.records
        }else {
          this.finished = false
          this.finished = true
        }

      }))
    },
    onLoad() {
      RechargeConsumption("charge",  null, null , 1, 20)
      .then((res=>{
        console.log(res)
        if(res.data.data.records.length>0){
          this.recharge = res.data.data.records
        }else {
          this.finished = false
          this.finished = true
        }
      }))
      // setTimeout(() => {
      //   if (this.refreshing) {
      //     this.list = [];
      //     this.refreshing = false;
      //   }
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }
      //   this.loading = false;
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style lang="scss" scoped>
.mianBox {
  width: 100vw;
  padding-top: 44px;
  height: 100vh;
  color: #000;
  box-sizing: border-box;
  overflow-y: hidden;

  
}
.listBoxCell{
  height: 75px;
  width: 100%;
  padding:0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(237,237,237,1);
  .jlName{
      font-size: 16px;
      color: #000;
  }
  .jlTime{
      margin-top: 10px;
      font-size: 12px;
      color: #ccc;
  }
  .jlBalance{
    margin-top:10px;
    font-size: 14px;
    color: rgba(242,46,60,1);
  }
  .jlMoney{
      text-align: right;
      font-size: 16px;
  }
  .jlMoney.just{
      color: rgba(56,129,253,1); 
  }
  .jlMoney.negative{
      color: rgba(242,46,60,1);
  }
}
.van-list{
  overflow-y: auto;
}
</style>