sport_mobile/.svn/pristine/53/534d92360353795c35bf4ba95c551c090f605668.svn-base

<template>
  <div>
    <div class="abstract">
      <div class="abstract-title pdg20">取款</div>
      <div class="abstract-date pdg20 row item-center">
        <div class="row item-center">
          <p style="color:#666;">开始日期</p>
          <input type="date" :max="newTime" v-model="startTime">
        </div>
        <div class="row item-center" style="margin:0 .2rem;">
          <p style="color:#666;">结束日期</p>
          <input type="date" :max="newTime" v-model="endTime" :min="startTime">
        </div>
        <button @click="ajaxclick()">查询</button>
      </div>
      <div class="abstract-options row allAlignment">
        <div class="row">
          <div class="row center" @click="options(3)" :class="optionsActive==3?'active':''">过去30天</div>
          <div class="row center" @click="options(2)" :class="optionsActive==2?'active':''">昨日</div>
          <div class="row center" @click="options(1)" :class="optionsActive==1?'active':''">今日</div>
        </div>
      </div>
      <div class="abstract-box scroll">
        <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
          <yd-list theme="5" slot="list">
            <yd-list-item>
              <yd-list-other slot="other">
                <div
                  v-for="(item,index) in list" :key="index"
                  style="border-left:.01rem solid #ccc;border-top:.01rem solid #ccc;border-right:.01rem solid #ccc;"
                >
                  <div class="title row item-center allAlignment">
                    <p style="width:8%">编号</p>
                    <p style="width:12%">操作时间</p>
                    <p style="width:12%">通过时间</p>
                    <p style="width:12%">打款时间</p>
                    <p style="width:12%">银行卡号</p>
                    <p style="width:12%">银行信息</p>
                    <p style="width:12%">金额</p>
                    <p style="width:12%">资金剩余</p>
                    <p style="width:8%">审核</p>
                  </div>
                  <ul class="list row allAlignment" style="width:100%;">
                    <li style="width:8%">{{index+1}}</li>
                    <li style="width:12%">{{item.apply_time}}</li>
                    <li style="width:12%">{{item.pass_time}}</li>
                    <li style="width:12%">{{item.give_time}}</li>
                    <li style="width:12%">{{item.bank_no}}</li>
                    <li style="width:12%">{{item.bank_info}}</li>
                    <li style="width:12%">{{item.money}}</li>
                    <li style="width:12%">{{item.money_cash}}</li>
                    <li style="width:8%" :style="item.status==0?'color:#ccc':item.status==1?'color:#4caf50':'color:red'">{{item.status==0?'待审核':item.status==1?'通过':'未通过'}}</li>
                  </ul>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </yd-infinitescroll>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "withdrawals",
  data() {
    return {
      optionsActive: 3,
      startTime: "",
      newTime: "",
      endTime: "",
      page: 1,
      pageSize: 10,
      list: ""
    };
  },
  methods: {
        ajaxclick(){
      this.list='';
      this.page=1;
      this.loadList()
    },
     options(num) {
      let date = new Date();
      this.optionsActive = num;
      if (this.optionsActive == 1) {
        this.startTime = `${date.getFullYear()}-${
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1
        }-${
          date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
        }`;
        this.endTime = `${date.getFullYear()}-${
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1
        }-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
        this.page = 1;
        this.list = "";
        this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.reInit");
        this.loadList();
      } else if (this.optionsActive == 2) {
        this.startTime = `${date.getFullYear()}-${
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1
        }-${
          date.getDate() - 1 < 10
            ? "0" + (date.getDate() - 1)
            : date.getDate() - 1
        }`;
        this.endTime = `${date.getFullYear()}-${
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1
        }-${
          date.getDate() - 1 < 10
            ? "0" + (date.getDate() - 1)
            : date.getDate() - 1
        }`;
        this.page = 1;
        this.list = "";
        this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.reInit");
        this.loadList();
      } else {
        this.startTime = `${date.getFullYear()}-${
          date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth()
        }-${
          date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
        }`;
        this.endTime = `${date.getFullYear()}-${
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1
        }-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
        this.page = 1;
        this.list = "";
        this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.reInit");
        this.loadList();
      }
    },
    date_fun() {
      let date = new Date();
      let date1 = new Date(date);
      this.newTime = `${date1.getFullYear()}-${
        date1.getMonth() + 1 < 10
          ? "0" + (date1.getMonth() + 1)
          : date1.getMonth() + 1
      }-${date1.getDate() < 10 ? "0" + date1.getDate() : date1.getDate()}`;
      date1.setMonth(date.getMonth() - 3);
      this.startTime = `${date1.getFullYear()}-${
        date1.getMonth() + 1 < 10
          ? "0" + (date1.getMonth() + 1)
          : date1.getMonth() + 1
      }-${date1.getDate() < 10 ? "0" + date1.getDate() : date1.getDate()}`;
      this.endTime = `${date1.getFullYear()}-${
        date1.getMonth() + 1 < 10
          ? "0" + (date1.getMonth() + 1)
          : date1.getMonth() + 1
      }-${date1.getDate() < 10 ? "0" + date1.getDate() : date1.getDate()}`;
      date1.setMonth(date.getMonth() - 3);
    },
    loadList() {
      this.$http
        .post(this.$ports.login.withdrawalsRecord, {
          token: localStorage.getItem("token"),
          startTime: this.startTime + " 00:00:00",
          endTime: this.endTime + " 23:59:00",
          currentPage: this.page,
          pageSize: 10
        })
        .then(res => {
          // console.log(res);
          if (res) {
            res.data.data.list.forEach((e, index) => {
              if (e.status == 0) {
                res.data.data.list.splice(index, 1);
              }
            });
            this.list = [...this.list, ...res.data.data.list];
          }
          if (this.pageSize > res.data.data.list.length) {
            /* 所有数据加载完毕 */
            this.$refs.infinitescrollDemo.$emit(
              "ydui.infinitescroll.loadedDone"
            );
            return;
          } else {
            /* 单次请求数据完毕 */
            this.$refs.infinitescrollDemo.$emit(
              "ydui.infinitescroll.finishLoad"
            );
            this.page++;
          }
        });
    }
  },
  created() {
    this.date_fun();
  },
  mounted() {
    this.options(3)
  }
};
</script>

<style scoped>
div /deep/ .yd-list-theme5 .yd-list-item .yd-list-mes {
  padding: 0;
}
div /deep/ .yd-list-theme5 .yd-list-item .yd-list-other {
  padding: 0;
}
div /deep/ .yd-list-other {
  display: block;
}
.yd-list-theme5 .yd-list-item {
  padding: 0;
}
div /deep/ .yd-list-img {
  display: none;
}
div /deep/ .yd-list-loading {
  display: none;
}
.pdg20 {
  padding: 0 0.2rem;
}
.abstract-title {
  font-size: 0.18rem;
  color: #fff;
  height: 0.5rem;
  background: #999;
  line-height: 0.5rem;
}
.abstract-date {
  height: 0.8rem;
  font-size: 0.14rem;
}
input {
  width: 1.7rem;
  height: 0.4rem;
  font-size: 0.14rem;
  color: #666;
  border: 0.01rem solid #ddd;
  border-radius: 0.05rem;
  margin-left: 0.1rem;
  cursor: pointer;
}
input[type="date"]::-webkit-inner-spin-button {
  visibility: hidden;
}
input[type="date"]::-webkit-clear-button {
  display: none;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  background-color: #eee;
}
input[type="date"]::-webkit-datetime-edit {
  /* content: '起始时间'; */
  padding-left: 0.1rem;
}
button {
  background: #999;
  border: none;
  width: 0.6rem;
  height: 0.4rem;
  border-radius: 0.05rem;
  color: #fff;
  margin-left: 0.2rem;
  cursor: pointer;
}
.abstract-options {
  height: 0.4rem;
  border-bottom: 0.01rem solid #999;
}
.abstract-options > div > div {
  width: 1rem;
  height: 0.4rem;
  color: #fff;
  background: #ccc;
  margin-left: 0.01rem;
  border-radius: 5px 5px 0px 0px;
  cursor: pointer;
}
.abstract-options div.active {
  background: #666;
}
.abstract-box {
  min-height: 2.8rem;
  max-height: 6.6rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.abstract-box > div {
  margin-top: 0.2rem;
}
.abstract-box .title {
  height: 0.4rem;
  background: #ddd;
  color: #333;
}
.abstract-box .title p {
  text-align: center;
}
.abstract-box .title div {
  width: 50%;
  text-align: center;
  line-height: 0.4rem;
}
.abstract-box .list li {
  width: 50%;
  height: 0.4rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.14rem;
  border-top: 0.01rem solid #ccc;
  border-left: 0.01rem solid #ccc;
  border-bottom: 0.01rem solid #ccc;
}
.abstract-box .list li:nth-child(1) {
  border-left: none;
}
</style>