<template>
  <view class="px-30rpx pt-20rpx">
    <view class="sticky top-0 z-1500 bg-hex-F5F5F5 rounded-full grid grid-cols-3 text-28rpx text-hex-333 leading-40rpx py-10rpx">
      <view class="text-center">会员类型</view>
      <view class="text-center">购买金额</view>
      <view class="text-center">购买时间</view>
    </view>
    <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption">
      <block v-for="(item,index) in dataList" :key="index">
        <view  class="grid grid-cols-3 text-28rpx text-h666 py-18rpx mt-16rpx ">
          <view class="text-center line-1 ">{{item.name}}</view>
          <view class="text-center price-text">{{item.price}}</view>
          <view class="text-center " v-if="item.success_time">{{item.success_time.substring(0,10)}}</view>
        </view>
        <u-line></u-line>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1,
        },
        dataList: [], //获取到的数据
      };
    },
    computed:{
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
    },
    methods: {
      downCallback() {
        this.mescroll.resetUpScroll();
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        this.$api.get(`/v1/vip/buy`, {
          params: {
            page: page.num,
            per_page: page.size
          }
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
           this.dataList = this.dataList.concat(res.data,);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="scss">
page{
  background: #ffffff;
}
</style>
