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"
            class="listData"
            line-width="60px"
            :immediate-check="false"
          >
            <van-row
              class="listBoxCell"
              v-for="(item, index) in recharge"
              :key="index"
            >
              <van-col span="18">
                <van-row class="jlName">{{ item.shopName }}</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 just">+{{ 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"
            class="listData"
            :immediate-check="false"
          >
            <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-row class="jlBalance">余额：{{ item.balance }} 元</van-row>
              </van-col>
              <van-col span="6" class="jlMoney negative"> - {{ item.amt }}元</van-col>
            </van-row>
          </van-list>
        <!-- </van-pull-refresh> -->
      </van-tab>
    </van-tabs>
    <van-cell
      title="选择日期区间"
      :value="date"
      @click="show = true"
      class="timeSelect"
    />
    <van-calendar
      v-model="show"
      type="range"
      @confirm="onConfirm"
      :min-date="minDate"
    />
  </div>
</template>

<script>
import { Toast, } from "vant";
export default {
  data() {
    return {
      recharge: [],//支付记录
      consumption: [], //消费记录
      loading: false,
      finished: false,
      refreshing: true,
      height: {
        height: false,
      },
      active: 0,
      date: "",
      show: false,
      minDate: new Date(2020, 1, 1),
      page1:1,
      page2:1,
      current:20,
      isref:true,
      starTime:undefined,
      endTime:undefined
    };
  },
  components: {
    [Toast.name]: Toast,
  },
  created() {
    this.height.height = document.documentElement.clientHeight - 120 + "px";
    if(localStorage.getItem("user")){
      this.charge()
    }else{
      this.finished = true
    }
  },
  
  methods: {
    tab(name, title) {
      this.date = "";
      this.active = name
      if (name == 0) {
        if (this.recharge.length == 0) {
          this.charge()
        }
        this.starTime = undefined,
        this.endTime = undefined
      } else {
        if (this.consumption.length == 0) {
          this.dish()
        }
      }
      
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      var start_ = new Date(date[0]);
      this.starTime =start_.getFullYear() +"-" +(start_.getMonth() + 1) +"-" +start_.getDate() + ' ' + '00:00:00' 
      var end_ = new Date(date[1]);
      this.endTime = end_.getFullYear() + "-" + (end_.getMonth() + 1) + "-" + end_.getDate() + ' ' + '23:59:59' 
      this.date = this.starTime.slice(0,10) + " 至 " + this.endTime.slice(0,10);
      this.isref = true
      if(this.active == 0){
        this.page1 = 1
        this.charge()
        this.recharge = []
      }else{
        this.page2 = 1
        this.consumption = []
        this.dish()
      }
    },
    charge(){//充值
      axios.post(`/dxtop/charge/page`,{
          "startTime":this.starTime, 
          "endTime":this.endTime,
          "size":this.current,
          "current":this.page1,
          "userId":"0001T11000000000V6UQ"
      }).then(res => {
        if (res?.data?.data?.records.length > 0) {
          let data = res.data.data.records
          for(let i =0;i<data.length;i++){
            this.recharge.push(data[i])
          }
          this.page1 ++
          this.isref = true
          
        } else {
          this.page1--
          this.isref = false
          this.finished = true
        }
        this.loading = false
      }).catch(err =>{
        console.log(err)
      })
    },
    dish(){//消费
      axios.post(`/dxtop/dish/page`,{
        "startTime":this.starTime, 
        "endTime":this.endTime,
        "size":this.current,
        "current":this.page2,
        "id":"0001T11000000000V6UQ"
      }).then(res => {
        if (res?.data?.data?.records.length > 0) {
          let data = res.data.data.records
          for(let i =0;i<data.length;i++){
            this.consumption.push(data[i])
          }
          this.page2 ++
          this.isref = true
        } else {
          this.page2--
          this.isref = false
          this.finished = true
        }
        this.loading = false
      })
    },
    onLoad() {
      if(timeout){
        clearTimeout(timeout);
      }
      let timeout = setTimeout(() => {//节流
        if (this.isref) {
          this.loading = true;
          //防止多次上滑动导致page等于2没加载出来就加载page等于3的内容
          this.isref = false;
          if(this.active == 0){
            this.charge()
          }else{
            this.dish()
          }
          this.loading = false;
        }
	    }, 1000);
    },
    onRefresh() {
      
      // 清空列表数据
      // this.finished = false;
      // console.log(1111)
      // // 重新加载数据
      // // 将 loading 设置为 true，表示处于加载状态
      // this.loading = false;
      // 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: 10px 10px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(237, 237, 237, 1);
  .jlName {
    font-size: 14px;
    color: #000;
  }
  .jlTime {
    margin-top: 5px;
    font-size: 12px;
    color: #ccc;
  }
  .jlBalance {
    margin-top: 5px;
    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;
}
.timeSelect{
  position: absolute; 
  top: 92px; 
  left: 0; 
  z-index: 10
}
.listData{
  margin-top:40px;
  height:calc(100vh - 10rem);
  overflow-y: scroll;
}
/deep/ .van-list__finished-text{
  margin-bottom:30px !important;
}
@media screen and (max-width:374px){
  .timeSelect{
    position: absolute; 
    top: 86px; 
  }
}
@media screen and (max-width:350px){
  .timeSelect{
    position: absolute; 
    top: 84px; 
  }
}
@media screen and (min-width:410px){
  .listData{
    margin-top:50px
  }
}
</style>
<style>
/* .van-cell__title, .van-cell__value{
  flex:none
}
.van-cell__value{
  margin-left:20px
} */
</style>