sport_mobile/.svn/pristine/5d/5dc04b3c473dd29be358e602bb7ff81fa2d0931d.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:20%">编号</p>
                    <p style="width:25%">更新日期 / 时间</p>
                    <p style="width:20%">交易号</p>
                    <!-- <p style="width:12%">游戏玩法</p>
                    <p style="width:18%">赛事</p>-->
                    <p style="width:20%">金额</p>
                    <p style="width:15%">状态</p>
                  </div>
                  <ul class="list row allAlignment" style="width:100%;">
                    <li style="width:20%">{{index+1}}</li>
                    <li style="width:25%">{{item.money_time}}</li>
                    <li style="width:20%">{{item.order_id}}</li>
                    <!-- <li style="width:12%">足球-让球</li>
                    <li style="width:18%">乌拉圭vs冰岛</li>-->
                    <li style="width:20%">{{item.getmoney}}</li>
                    <li style="width:15%">已核实</li>
                  </ul>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </yd-infinitescroll>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loss",
  data() {
    return {
      optionsActive: 3, //选项卡激活
      startTime: "",
      newTime: "",
      endTime: "",
      page: 1,
      pageSize: 20,
      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.ProfitAndLossRecord, {
         currentPage: this.page,
          pageSize: this.pageSize,
          startTime: this.startTime + " 00:00:00", //此处是补全开始时间的时间
          endTime:this.endTime + ' 23:59:59',
          token: localStorage.getItem("token"),
          money_type: 1
        })
        .then(res => {
          console.log(res);
          if (res) {
            let arr=[]
            res.data.data.list.forEach((e, index) => {
              e.gain_money = parseFloat(e.gain_money)
              if((e.gain_money - e.money)<0){
                e.getmoney = e.gain_money - e.money
                e.getmoney = e.getmoney.toFixed(2)
                arr.push(e)
              }
            });
            this.list = [...this.list, ...arr];
            console.log(this.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++;
          }
        });
    },
    // 点击查询
    ajaxClick() {
      this.page = 1;
      this.list = "";
      this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.reInit");
      this.loadList();
    }
  },
  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>