sports_wap/vue_sports/.svn/pristine/af/af119b63f3af006113b0c0973b44b7b420ba6c50.svn-base

<template>
  <div>
    <div class="box">
      <div class="row allAlignment center head_on_box">
        <p
          class="logo"
          style="font-size:.6rem;color:#E1E1DF;font-family:  'Franklin Gothic Medium'"
        >
          <i style="color:#F76649;">HX</i>669
        </p>
        <p style="color:#fffffe;font-size:.36rem">盈亏记录</p>
        <!-- <img class="log" src="../assets/st-imges/indexlogo.png" alt=""> -->
        <div class="row allAlignment center">
          <yd-button type="primary" bgcolor="rgba(0,0,0,0)" @click.native="isshow()">
            <img class="user-ion" src="@/assets/st-imges/user.png" alt>
          </yd-button>
          <!-- <div v-if="nameShow" class="row allAlignment center username">
              {{name}}
          </div>-->
          <img
            style="margin-left: 0.44rem;"
            class="user-ion"
            src="@/assets/st-imges/contact.png"
            alt
          >
        </div>
      </div>
    </div>
    <div class="box row">
      <div id="NavSlide">
        <nav>
          <p v-for="(item,index) in arr" @click="getdates(item.start,item.end,index)" :key="index">
            <span :class="{active:index==active}">{{item.title}}</span>
          </p>
        </nav>
      </div>
      <div class="date row center">
        <yd-button-group>
          <yd-button size="large" bgcolor="rgba(0,0,0,0)" @click.native="open">
            <img :src="img" style="width:.3rem;height:.3rem">日历
          </yd-button>
        </yd-button-group>
      </div>
    </div>
    <div class="row classify average">
      <div
        v-for="(item,index) in list"
        :class="item.id==classifynum?'classifyactive':''"
        :key="index"
        @click="classifyclick(index)"
      >{{item.title}}</div>
    </div>
    <div
      class="row center"
      style="height:.88rem;color:#333;font-size:.32rem;"
      v-if="data.status=='2001'"
    >对不起，您当前没有登录，请前往登录</div>
    <div>
      <div class="datalist">
        <div class="datalistbox row allAlignment">
          <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
            <yd-list theme="1" slot="list">
              <div v-for="(item,index) in data.list" :key="index">
                <div
                  v-if="item.money_type==1"
                  :style="classifynum==0?'':'display:none'"
                  class="datalist-box row allAlignment"
                >
                  <p>{{item.money_time}}</p>
                  <p>+{{item.money}}</p>
                </div>
                <div
                  v-if="item.money_type==2"
                  :style="classifynum==1?'':'display:none'"
                  class="datalist-box row allAlignment"
                >
                  <p>{{item.money_time}}</p>
                  <p>-{{item.money}}</p>
                </div>
              </div>
            </yd-list>

            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg">
          </yd-infinitescroll>
        </div>
      </div>
    </div>
    <yd-cell-group style="display:none;">
      <yd-cell-item arrow>
        <yd-datetime
          type="date"
          ref="datetime"
          start-year="2014"
          :end-date="endyear"
          v-model="datetime"
          slot="right"
        ></yd-datetime>
      </yd-cell-item>
    </yd-cell-group>
    <Login v-if="isShow"/>
  </div>
</template>
<script>
import "@/css/index.css";
import Login from "@/pages/Login/index/StLogin";
import register from "@/pages/Login/index/register";
export default {
  name: "BettingRecord",
  data() {
    return {
      isShow: true,
      img: require("@/assets/st-imges/date.png"),
      img1: require("@/assets/st-imges/home.png"),
      img2: require("@/assets/st-imges/gengduo-1.png"),
      timearr: [],
      arr: [],
      active: 0,
      // 是否继续请求
      ajaxto: true,

      data: "",
      datetime: "2017-05-11",
      //   查询开始结束时间
      startTime: "",
      endTime: "",
      startyear: "",
      endyear: "",
      list: [{ title: "本月已盈利", id: 0 }, { title: "本月已亏损", id: 1 }],
      classifynum: 0,
      // 分页
      page: 1,
      pageSize: 15,
      PageList: []
    };
  },
  computed: {
    Isshow: function() {
      return this.$store.state.isShow;
    }
  },
  components: {
    Login
  },
  created() {
    this.fun_date();
    if(this.ajaxto){
      this.loadList();
    } 
  },
  methods: {
    //   分页查询时间
    getdates(start, end, index) {
      this.active = index;
      this.startTime = start;
      this.endTime = end;
      if(this.ajaxto){
         this.loadList();
      }
    },
    loadList(ispage) {
      let date = new Date(),
        date2 = new Date(date);
      this.startTime = `${date2.getFullYear()}-${
        date2.getMonth() + 1 < 10
          ? "0" + (date2.getMonth() + 1)
          : date2.getMonth() + 1
      }-${
        date2.getDate() - 7 < 10
          ? "0" + date2.getDate() - 7
          : date2.getDate() - 7
      } 00:00:00`;
      this.endTime = `${date2.getFullYear()}-${
        date2.getMonth() + 1 < 10
          ? "0" + (date2.getMonth() + 1)
          : date2.getMonth() + 1
      }-${
        date2.getDate() - 7 < 10
          ? "0" + date2.getDate() - 7
          : date2.getDate() - 7
      } ${date2.getHours() < 10 ? "0" + date2.getHours() : date2.getHours()}:${
        date2.getMinutes() < 10 ? "0" + date2.getMinutes() : date2.getMinutes()
      }:${
        date2.getSeconds() < 10 ? "0" + date2.getSeconds() : date2.getSeconds()
      }`;
      this.$http
        .post(this.$ports.login.ProfitAndLossRecord, {
          currentPage: this.page,
          pageSize: this.pageSize,
          token: "Ym0dZz15559259655cbd8bcdbd7ef" //localStorage.getItem("token")
        })
        .then(res => {
          if (res) {
            this.data = res.data.data;
            console.log(res.data.data)
            if(res.data.data.list.length<this.pageSize){
                this.ajaxto=false
            }
          }

          /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.finishLoad");
          //   判断是否需要页码加一
          if (ispage) {
            this.page++;
          }
        });
    },
    classifyclick(i) {
      this.classifynum = i;
    },
    open() {
      this.$refs.datetime.open();
    },
    isshow() {
      let isShow = true;
      this.$store.dispatch("GET_ISSHOW", isShow);
    },
    //设置一周赛事
    fun_date: function() {
      let date = new Date();
      this.endyear = this.endyear + date.getFullYear() + "/";
      this.endyear =
        this.endyear +
        (date.getMonth() < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        "/";
      this.endyear =
        this.endyear +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
      let date2 = new Date(date);
      let newday = new Date();
      let endmonth = newday.getMonth() + 1;
      newday.setDate(0);
      let daynum = newday.getDate();
      let num = 0,
        org,
        str;
      for (let i = daynum; i >= 1; i--) {
        date2.setDate(date2.getDate() - 1);
        org = date2.getDay();
        switch (org) {
          case 0:
            str = "星期日";
            break;
          case 1:
            str = "星期一";
            break;
          case 2:
            str = "星期二";
            break;
          case 3:
            str = "星期三";
            break;
          case 4:
            str = "星期四";
            break;
          case 5:
            str = "星期五";
            break;
          case 6:
            str = "星期六";
            break;
        }
        let years = date2.getFullYear();

        let month =
          date2.getMonth() + 1 < 10
            ? "0" + (date2.getMonth() + 1)
            : date2.getMonth() + 1;
        let day =
          date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate();
        let time2 = {};
        time2.id = num;
        if (i == daynum) {
          time2.title = month + "-" + day + "今天";
          time2.start = `${date.getFullYear()}-${month}-${day} 00:00:00`;
          time2.end = `${date.getFullYear()}-${month}-${day} ${
            date2.getHours() < 10 ? "0" + date2.getHours() : date2.getHours()
          }:${
            date2.getMinutes() < 10
              ? "0" + date2.getMinutes()
              : date2.getMinutes()
          }:${
            date2.getSeconds() < 10
              ? "0" + date2.getSeconds()
              : date2.getSeconds()
          }`;
        } else if (i == daynum - 1) {
          time2.title = month + "-" + day + "昨天";
          time2.start = `${date2.getFullYear()}-${month}-${day} 00:00:00`;
          time2.end = `${date2.getFullYear()}-${month}-${day} 23:59:59`;
        } else if (i == daynum - 2) {
          time2.title = month + "-" + day + "前天";
          time2.start = `${date2.getFullYear()}-${month}-${day} 00:00:00`;
          time2.end = `${date2.getFullYear()}-${month}-${day} 23:59:59`;
        } else {
          time2.title = month + "-" + day + str;
          time2.start = `${date2.getFullYear()}-${month}-${day} 00:00:00`;
          time2.end = `${date2.getFullYear()}-${month}-${day} 23:59:59`;
        }
        this.arr.push(time2);
        num++;
      }
    }
  },
  watch: {
    Isshow(val) {
      this.isShow = val;
    }
  },
  mounted() {}
};
</script>
<style  scoped>
.datalist-box p {
  height: 0.88rem;
  display: flex;
  align-items: center;
}
.datalistbox div {
  width: 100%;
}
.datalist-box {
  width: 100%;
  height: 0.88rem;
}
.paging {
  width: 100%;
  height: 0.88rem;
  position: absolute;
  bottom: 0;
}
.paging p {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.05rem;
  border-radius: 0.08rem;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #363636;
}
.paging p input {
  width: 0.6rem;
  height: 0.6rem;
  background: #ebebeb;
  border: 2px solid #ccc;
  border-radius: 0.08rem;
}
.paging p button {
  width: 0.6rem;
  height: 0.6rem;
  border: none;
  background: #555;
  color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.08rem;
}
.paging p button:active {
  background: rgb(126, 125, 125);
  color: #ccc;
}
.datalistbox {
  margin-top: 0.3rem;
  background: #efefef;
  padding: 0.2rem 0.3rem;
  font-size: 0.28rem;
  color: #555555;
  line-height: 0.4rem;
}
.datalist {
  position: relative;
}
.datalistlet {
  background-color: #cccccc;
}
.datalist .active {
  background: #f76649 !important;
  color: #efefef !important;
}
.msg {
  height: 0.88rem;
  margin-top: 0.3rem;
  color: #ccc;
  background: #333;
}
.classifyactive {
  color: #f76649;

  border-bottom: 2px solid #f76649;
}
.classify {
  height: 0.88rem;
  font-size: 0.3rem;
  line-height: 0.66rem;
  font-weight: normal;
  color: #777777;
  background-color: #efefef;
  padding: 0.1rem 0;
}
.active {
  color: rgb(247, 102, 73) !important;
}
.box {
  background: #ebebeb;
  padding-left: 0.14rem;
}
.date {
  width: 20%;
  background: #ccc;
  height: 0.88rem;
}
#NavSlide {
  width: 100%;
  overflow: hidden;
}
#NavSlide nav {
  padding-top: 0.1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
}
div /deep/ .yd-datetime-content,
div /deep/ .yd-datetime-shade,
div /deep/ .yd-datetime-indicator {
  height: 2rem !important;
}
div /deep/ .yd-button {
  padding: 0;
  width: 100%;
  height: 100%;
}
div /deep/ .yd-button button {
  margin: 0;
  border-radius: 0;
}
#NavSlide p {
  text-align: center;
  font-size: 0.28rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.1rem;
  color: #b8b8b8;
}
/* #NavSlide p a{
	color: #E5E5E5;
	text-decoration: none;
} */
#NavSlide p span.active {
  color: #363636;
}

.head_on_box {
  padding: 0 0.32rem;
}
.box {
  height: 0.88rem;
  background: linear-gradient(to bottom, #999999, #6a6a6b);
  overflow: hidden;
}
.user-ion {
  width: 0.3rem;
  height: 0.3rem;
}
#NavSlide p {
  width: 1.1rem;
}
</style>