sport_mobile/.svn/pristine/47/473e6855c787c76f9933a056f15428b221aca832.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">
        </div>
        <div class="row item-center" style="margin:0 .2rem;">
          <p style="color:#666;">结束日期</p>
          <input type="date">
        </div>
        <button @click="category(1)">查询单式投注</button>
        <button @click="category(2)">查询串式投注</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:10%">编号</p>
                    <p style="width:10%">类别</p>
                    <p style="width:20%">投注详情</p>
                    <p style="width:10%">投注类别</p>
                    <p style="width:22%">选项</p>
                    <p style="width:10%">投注额</p>
                    <p style="width:10%">赢 / 输</p>
                    <p style="width:8%">状态</p>
                  </div>
                  <ul class="list row">
                    <li style="width:10%">{{index+1}}</li>
                    <li style="width:10%">体育</li>
                    <li style="width:20%">
                      <p>{{item.ctime}}</p>
                      <p>{{item.order_id}}</p>
                    </li>
                    <li style="width:10%">{{item.odds_name}}</li>
                    <li style="width:22%">
                      <p style="width:100%;text-align: center;">{{item.home_team}}</p>
                      <p style="width:100%;text-align: center;">vs</p>
                      <p style="width:100%;text-align: center;">{{item.guest_team}}</p>
                    </li>
                    <li style="width:10%">{{item.bet_money}}</li>
                    <li style="width:10%">{{item.status==0?'未开奖':item.status==1?'中奖':'未开奖'}}</li>
                    <li style="width:8%">确认</li>
                  </ul>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </yd-infinitescroll>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "settlementBetting",
  data() {
    return {
      optionsActive: 3,
      bettingCategory: 1, //投注类别 单注 串式
      startTime: "",
      newTime: "",
      endTime: "",
      page: 1,
      pageSize: 10,
      list: "",
    };
  },
  methods: {
    category(num) {
      this.bettingCategory = num;
      this.list = []
      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.bettingRecord, {
          token: localStorage.getItem("token"),
          startTime: this.startTime + " 00:00:00",
          endTime: this.endTime + " 23:59:59",
          type: this.bettingCategory,
          currentPage: this.page,
          pageSize: 10,
          result:0,
        })
        .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];
            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++;
          }
        });
    }
  },
  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: 1rem;
  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: 1.1rem;
  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>