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"
    >
    <div class="timeSelectWrap">
      <p class="start" @click="start(1)">{{startTime2}}</p> ~
      <p class="end" @click="end(2)">{{endTime2}}</p>
      <van-icon name="search"  @click="search" class="searchIcon"/>
    </div>
      <van-tab title="充值记录">
        <div class="listHeight">
          <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="14">
                <van-row class="jlName">{{ item.shopName }}</van-row>
                <van-row class="jlTime">时间：{{ item.createTime }}</van-row>
              </van-col>
              <van-col span="10">
                <div  class="jlMoney just">{{ item.amt }}元</div>
                <div class="jlBalance">余额：{{ item.balance }} 元</div>
              </van-col>
              
            </van-row>
          </van-list>
        </div>
      </van-tab>
      <van-tab title="消费记录">
        <div class="listHeight">
          <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="14">
                <div class="jlName">{{ item.shopName }}</div>
                <div class="jlTime">时间：{{ item.createTime }}</div>
              </van-col>
              <van-col span="10">
                <div class="jlMoney negative">  {{ item.amt>0 ? '-'  + item.amt : '+' + Math.abs(item.amt)}}元</div>
                
                <div class="jlBalance">余额：{{ item.balance }} 元</div>
              </van-col>
            </van-row>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
    

    <van-overlay :show="loading3" style="z-index: 1; position: fixed" />
    <van-datetime-picker
        v-if="timeStatus"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        class="timeSelect2"
        @cancel="cancel"
        @confirm="confirm"
        
      />
    
    <!-- <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";
// import { DatetimePicker } from 'vant';
import { getMonthStartDate, getMonthEndDate, getDateStrNowDay} from '@/assets/js/dataFormate.js'
import { returnFloat } from '@/assets/js/common.js'
import Cookies from "js-cookie";
export default {
  data() {
    return {
      minDate: new Date(2022, 1, 1),
      maxDate: new Date(2099, 12, 31),
      currentDate: new Date(),
      timeStatus:false,
      startTime2:undefined,
      endTime2:undefined,
      select:undefined,
      loading3:false,
      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,
      userId:undefined
    };
  },
  components: {
    [Toast.name]: Toast,
  },
  created() {
    this.startTime2 = getMonthStartDate(),
    this.endTime2 =  getDateStrNowDay(),
    this.height.height = document.documentElement.clientHeight - 120 + "px";
    if(localStorage.getItem("user_wt")){//ERP途径
      this.userId = localStorage.getItem("user_wt")
    }
    if(Cookies.get("userId57")){//公众号途径
      this.userId = Cookies.get("userId57")
    }
    if(this.userId){
      if(this.$route.query){
        if(this.$route.query.id == "1"){
          this.active = 0
          this.charge()
          this.charge2()
        }else if(this.$route.query.id == "2"){
          this.active = 1
          this.dish()
          this.dish2()
        }else{
          this.active = 0
          this.charge()
          this.charge2()
        }
      }
      
    }else{
      this.finished = true
    }
  },
  mouted(){
    if(Cookies.get("userId57")){//公众号途径
      document.title = '中国东信智慧园区'
    }
  },
  
  methods: {
    // 标准日转化为年月日
    transformTime(date){
      let data = new Date(date);
      let d = data.getDate()

      let m = (data.getMonth() + 1)
      if(d<10){
        d = "0" + d
      }
      if(m<10){
        m = "0" + m
      }
      let datetime =  data.getFullYear() + "-" + m + "-" + d;
      return datetime;
    },

    //时间选择开始
    start(){
      this.timeStatus = true
      this.select = 1
      this.loading3 = true
    },
    //时间选择结束
    end(){
      this.timeStatus = true
      this.select = 2
      this.loading3 = true
    },
    //时间选择搜索
    search(){
      this.page1 = 1
      this.page2 = 1
      let start = Date.parse(new Date(this.startTime2)) / 1000
      let end = Date.parse(new Date(this.endTime2)) / 1000
      if(start>end){
        Toast("开始时间不能大于结束时间")
      }else{
        if(this.active == 0){
          this.recharge = []
          this.charge()
        }else{
          this.consumption = []
          this.dish()
        }
      }
    },
    //时间选择取消
    cancel(){
      this.timeStatus = false
      this.loading3 = false
    },
    //时间选择确定
    confirm(val){
      if(this.select == 1){
        this.startTime2 = this.transformTime(val)
      }else{
        this.endTime2 = this.transformTime(val)
      }
      this.timeStatus = false
      this.loading3 = false
    },
    // change(picker, value, colum) {
    //   let startTime = picker.getValues();
    //   console.log(startTime,value, colum)
    //   // this.startTime = startTime[0] + ":" + startTime[1];
    //   // console.log(this.startTime);
    // },
    tab(name, title) {
      this.date = "";
      this.active = name
      if (name == 0) {
        if (this.recharge.length == 0) {
          this.charge()
          this.charge2()
        }
        this.starTime = undefined,
        this.endTime = undefined
      } else {
        if (this.consumption.length == 0) {
          this.dish()
          this.dish2()
        }
      }
    },
    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(){//充值
      this.finished = false
      axios.post(`/dxtop/charge/page`,{
          "startTime":this.startTime2 + " 00:00:00", 
          "endTime":this.endTime2 + " 23:59:59",
          "size":this.current,
          "current":this.page1,
           //"userId":"0001T110000000002HBL" //测试
           "userId":this.userId
      }).then(res => {
        if (res?.data?.data?.records.length > 0) {
          let data = res.data.data.records
          for(let i =0;i<data.length;i++){
            if(data[i].type == "31") {//减帐
              data[i].amt = "- " + data[i].amt
            }else{
              data[i].amt = "+ " + data[i].amt
            }
            this.recharge.push(data[i])
            this.recharge[i].balance = returnFloat(data[i].balance)
          }
          this.page1 ++
          this.isref = true
        } else {
          this.page1--
          this.isref = false
        }
        this.finished = true
      }).catch(err =>{
      })
    },
    charge2(){//充值未读改已读
      axios.put(`/dxtop/charge?userId=${this.userId}`
      ).then(res => {
      })
    },
    dish2(){//消费未读改已读
      axios.put(`/dxtop/dish?userId=${this.userId}`,{
         "userId":this.userId
      }).then(res => {
      })
    },
    dish(){//消费
    this.finished = false
      axios.post(`/dxtop/dish/page`,{
        "startTime":this.startTime2 + " 00:00:00", 
        "endTime":this.endTime2 + " 23:59:59",
        "size":this.current,
        "current":this.page2,
        //"userId":"0001T110000000002HBL" //测试
         "userId":this.userId
      }).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.consumption[i].balance = returnFloat(data[i].balance)
          }
          this.page2 ++
          this.isref = true
        } else {
          this.page2--
          this.isref = false
        }
        this.finished = true
      })
    },
    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() {
    },
  }
}
</script>

<style lang="scss" scoped>
.mianBox {
  width: 100vw;
  padding-top: 44px;
  height: 100vh;
  color: #000;
  box-sizing: border-box;
  overflow-y: hidden;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  letter-spacing: 1px;
}
.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: 16px;
    color: #000;
  }
  .jlTime {
    margin-top: 5px;
    font-size: 13px;
    color: #ccc;
  }
  .jlBalance {
    margin-top: 5px;
    font-size: 13px;
    color: #000;
    display: block;
    text-align: right;
  }
  .jlMoney {
    text-align: right;
    font-size: 16px;
  }
  .jlMoney.just {
    color: rgba(56, 129, 253, 1);
    text-align: right;
  }
  .jlMoney.negative {
    color: rgba(242, 46, 60, 1);
    text-align: right;
  }
}
.van-list {
  overflow-y: auto;
}
.timeSelectWrap{
  width:calc(100% - 20px);
  margin:10px;
  overflow: hidden;
  background-color: #fff;
  border:1px solid #ccc;
  border-radius: 20px;
  height:35px;
  line-height: 35px;
  position: relative;
  .start{
    display: inline-block;
    font-size: 16px;
    line-height: 30px;
    margin-left:15px;
    width:30%;
  }
  .end{
    display: inline-block;
    font-size: 16px;
    width:30%;
    margin-left:10px;
  }
  .search{
    background-color: rgba(242, 46, 60, 1);
    border-radius: 6px;
    margin-top:-2px;
    color:#fff;
    width:10%;
    
  }
  .searchIcon{
    color:rgba(242, 46, 60, 1);
    font-size: 24px;
    position: absolute;
    top:6px;
    right:10px;
  }
}
.timeSelect2{
  width:100%;
  height:30%;
  position: fixed; 
  bottom:0;
  // position: absolute;
  // top: 92px; 
  left: 0; 
  z-index: 10
}



.timeSelect{
  // width:100%;
  // height:30%;
  // position: fixed; 
  // bottom:0;
  position: absolute;
  top: 92px; 
  left: 0; 
  z-index: 10
}

.listHeight{
  margin-top:10px;
  height:78vh;
  width:100%;
  overflow: hidden;
  padding-bottom:50px;
  .listData{
    height:100%;
    overflow-y: scroll;
    padding:0 4px;
  }
}

</style>
<style>

.van-tab__text--ellipsis{
  font-size: 16px !important;
}
.van-tabs__line{
  width:187px !important
}
</style>