<template>
  <div class="main">
    <div class="user_jf">
      <img src="../assets/images/memberJF/member.png" alt class="img" />
      <div class="user_number">{{ point }}</div>
      <a href>积分兑换>></a>
    </div>
    <div class="content">
      <van-tabs
        v-model="active"
        color="#4ca0ff"
        title-active-color="#4ca0ff"
        style="border-radus:.35rem;width:95%;margin:0 auto"
      >
        <van-tab title="积分历史">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了~~" @load="onLoad">
            <ul class="history">
              <li v-for="(item,index) in Integraldata" :key="index">
                <div>
                  <img src="../assets/images/memberJF/item_1.png" />
                </div>
                <div>{{item.action}}</div>
                <div>{{item.increase?"+":"-"}}{{item.value}}</div>
              </li>
            </ul>
          </van-list>
        </van-tab>
        <van-tab title="积分规则">
          <div v-html="description"></div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab).use(Tabs);
export default {
  name: "memberJF",
  data() {
    return {
      active: 0,
      pageIndex: 1,//页数
      pageSize: 10,//数据
      secretPhone: "",
      Integraldata: [],//调用接口
      loading: false,//数据提示
      finished: false,
      description: "",
      balance: "",
      point: this.$route.query.point
    };
  },
   created() {
    //  this.GetmemberJFLS();
    // setTimeout(_=>{
     this.GetmemberJF();
    // },200)
    // this.GetmemberCZZ();
  },
  filters: {},
  methods: {
    onLoad() {
      if (this.finished) return;
      this.GetmemberJFLS();
    },
    // 获取积分
    GetmemberJFLS() {
      var obj = {
        page: this.pageIndex, //页码
        size: this.pageSize //页大小
      };

      this.$http.GetmemberJFLS(obj).then(res => {
        if (res.data.success) {
          this.Integraldata = this.Integraldata.concat(res.data.data.content);
          this.loading = false;
          console.log(this.Integraldata.concat(res.data.data.content));
          if (this.Integraldata.length == res.data.data.totalElements) {
            this.finished = true;
          }
          this.pageIndex++;
        } else {
          this.$toast(res.data.msg);
        }
      });
    },
    // 积分说明
    GetmemberJF() {
      var obj = {};
      this.$http.GetmemberJF(obj).then(res => {
        if (res.data.success) {
          this.description = res.data.data.description;
        } else {
          this.$toast(res.data.msg);
        }
        // console.log(res);
        //  console.log(res.data.data)
      });
    }
    // GetmemberCZZ() {
    //   var obj = {};
    //   this.$http.GetmemberCZZ(obj).then(res => {
    //     //  console.log(res);
    //     this.balance = res.data.data.content;
    //     console.log(res.data.data.content);
    //   });
    // }
  },
  mounted() {
    document.querySelector(".main").style.minHeight =
      window.screen.height + "px";
  }
};
</script>
<style lang="less">
.main {
  overflow: hidden;
}
.user_jf {
  position: relative;
  width: 95%;
  height: 3.16rem;
  margin: 0.2rem auto;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  border-radius: 0.15rem;
  background-image: linear-gradient(to right, #4db0ff, #3e8bfc);
  color: #fff;
  .img {
    display: block;
    width: 1.26rem;
    height: 1.26rem;
    object-fit: contain;
  }
  .user_number {
    font-size: 0.5rem;
  }
  a {
    position: absolute;
    right: 0.3rem;
    bottom: 0.1rem;
    font-size: 0.3rem;
  }
}
.content {
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.2rem;
  margin-bottom: 0.2rem;
}
.history {
  li {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 1.18rem;
    > div:first-child {
      width: 20%;
    }
    > div:nth-child(2) {
      width: 60%;
      height: 1.18rem;
      line-height: 1.18rem;
      font-size: 0.3rem;
    }
    > div:last-child {
      width: 10%;
      height: 1.18rem;
      line-height: 1.18rem;
      font-size: 0.26rem;
    }
    img {
      width: 0.68rem;
      height: 0.68rem;
      object-fit: contain;
    }
  }
}
</style>
