sport_mobile/.svn/pristine/50/50415648361d3ba4761d44b119fb32492add528a.svn-base

<template>
  <div>
    <div class="abstract">
      <div class="abstract-title pdg20">串式注单</div>
      <div class="abstract-date pdg20 row item-cenrte">
        <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>
        <div class="row item-center" style="margin:0.2rem;">
          <p style="color:#666;">注单状态</p>
          <select v-model="status" class="select_class">
            <option value=0 style="height: 0.4rem">全部</option>
            <option value=1>未结算</option>
            <option value=2>已结算</option>
            <option value=-1>无效</option>
          </select>
        </div>
        <button @click="ajaxclick()" style="margin-top:0.2rem">查询</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 style="width:100%;height:.6rem;background:#ccc;color:#f76649;border-bottom:.01rem solid #bbb;padding:0 .2rem" class="row center allAlignment">
                    <p style="color:#777;">{{"时间："+item.money_time}}</p>
                    <p style="color:#333;">{{item.batch_id}}</p>
                    <p>投注额：{{item.money}}元</p>
                    <p>预期中奖金额：{{item.prize_money}}元</p>
                    <p :style="item.game_status==0?'color:#aaa;':item.game_status==1&&item.game_status==3?'color:#296':'color:red;'">赢/输：{{item.game_status==0?'审核中':item.game_status==1?'赢':item.game_status==2?'输':'平'}}</p>
                </div>
                <div v-for="(items,i) in item.money_buy" :key="i">
                  <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:22%">比赛</p>
                    <p style="width:12%">赛果</p>
                    <p style="width:10%">赢 / 输</p>
                  </div>
                  <ul class="list row">
                    <li style="width:12%">{{i+1}}</li>
                    <li style="width:12%">{{$public.getGameType(items.game_code)}}</li>
                    <li style="width:20%">
                      <p>{{item.money_time}}</p>
                      <p>{{item.order_id}}</p>
                    </li>
                    <li style="width:12%"><p style="width:100%;text-align: center;">{{items.odds_name}}</p><p style="width:100%;text-align: center;">{{items.condition}}@{{items.odds}}</p></li>
                    <li style="width:22%">
                      <p style="width:100%;text-align:center;">{{items.home_team}}</p>
                      <p>vs</p>
                      <p style="width:100%;text-align:center;">{{items.guest_team}}</p>
                    </li>
                    <li style="width:12%">{{items.matchresult?items.matchresult:'--'}}</li>
                    <li style="width:10%">{{items.status==0?'--':items.status==1?'赢':'输'}}</li>
                  </ul>
                </div>
                </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: "",
      status: 0,
      statusType: [
        {label: '全部', value: ''},
        {label: '已结算', value: 1},
        {label: '未结算', value: 2},
        {label: '已失效', value: 3},
      ]
    };
  },
  methods: {
        ajaxclick(){
      // this.list='';
      // this.page=1;
      // this.loadList()
      this.list = ''
      this.page = 1
      this.options(this.optionActive);
    },
     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('status', this.status)
      this.$http
        .post(this.$ports.login.bettingRecord, {
          token: localStorage.getItem("token"),
          startTime: this.startTime + " 00:00:00",
          endTime: this.endTime + " 23:59:59",
          type: 2,
          currentPage: this.page,
          pageSize: 10,
          set_status: this.status
        })
        .then(res => {
          // console.log(res,'res');
          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: 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;
}
.select_class {
    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;
    padding-left: 0.1rem;
    cursor: pointer;
}
</style>