sport_mobile/.svn/pristine/97/975599dc7a43f4f19e51a1b10e70f06211de1980.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:12%">编号</p>
                    <p style="width:12%">类别</p>
                    <p style="width:20%">投注详情</p>
                    <p style="width:12%">投注类别</p>
                    <p style="width:12%">比赛</p>
                    <p style="width:10%">赛果</p>
                    <p style="width:12%">投注额/可赢额</p>
                    <p style="width:10%">赢 / 输</p>
                  </div>
                  <ul class="list row">
                    <li style="width:12%">{{index+1}}</li>
                    <li style="width:12%">{{item.odds_name}}</li>
                    <li style="width:20%">
                      <p style="width:100%;text-align: center;">{{item.ctime}}</p>
                      <p style="width:90%;text-align: center;">{{item.order_id}}</p>
                    </li>
                    <li style="width:12%"><p>{{item.odds_name}}</p><p>{{item.odds}}@{{item.condition}}</p></li>
                    <li style="width:12%">
                      <p style="width:100%;text-align:center;">{{item.home_team}}</p>
                      <p>vs</p>
                      <p style="width:100%;text-align:center;">{{item.guest_team}}</p>
                    </li>
                    <li style="width:10%">{{item.matchResult?item.matchResult:'--'}}</li>
                    <li style="width:12%"><p style="width:100%;text-align: center;">投注额：{{item.bet_money}}</p><p style="width:100%;text-align: center;">可赢额：{{item.willMoney}}</p></li>
                    <li style="width:10%">{{item.result==0?'--':item.result==1?'赢':'输'}}</li>
                  </ul>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </yd-infinitescroll>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "unitary",
  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() {
      console.log(this.startTime + " 00:00:00",this.endTime + " 23:59:50")
      this.$http
        .post(this.$ports.login.bettingRecord, {
          token: localStorage.getItem("token"),
          startTime: this.startTime + " 00:00:00",
          endTime: this.endTime + " 23:59:59",
          type: '', // 所有类型，包括串式和单式
          currentPage: this.page,
          pageSize: 10
        })
        .then(res => {
          console.log(res)
          this.list = [...this.list, ...res.data.data.list];
          console.log('list',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: 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: 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>