<template>
  <view class="points">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">积分</view>
    <view class="content">
      <scroll-view
        show-scrollbar="false"
        scroll-y="true"
        class="scroll"
        refresher-enabled="true"
        refresher-threshold="40"
        @refresherrefresh="onRefresherRefresh"
        lower-threshold="100"
        @scrolltolower="onScrollToLower"
        :refresher-triggered="triggered"
        v-if="pointslist.length!= 0"
      >
        <uni-card class="card" v-for="(item, index) in pointslist" :key="index" >
          <view
            class="card-content"
            :style="{ 'background-color': item.status == 0 ? '#ff000011' : '#11ff002b'  }"
          >
 
            <view class="info"><view>{{ item.info }}</view>&nbsp;&nbsp;<view class="num">{{item.status == 0? '-'+ item.number : '+' +item.number }}</view></view>
            <view class="time">
              {{ formatDate(item.time) }}
            </view>
          </view>
        </uni-card>
      </scroll-view>
      <view v-if="pointslist.length == 0" class="empty">暂无积分记录</view>
    </view>
  </view>
</template>

<script>
import request from "../../../components/request.js";
import formatDate from "../../../components/formatDate.js";
export default {
  data() {
    return {
      title: "Hello",
      userinfo: {},
      page: 0,
      triggered:false,
      pointslist:[],
    };
  },
  onLoad() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.userinfo = res.data;
        this.onRefresherRefresh();
      },
    });
  },
  methods: {
    formatDate: formatDate,
    //下拉刷新
    onRefresherRefresh() {
      this.page = 0;
      this.triggered = true;
      this.pointslist = [];
      this.getPointsDetail();
    },
    //上拉加载
    onScrollToLower() {
      this.page += 1;
      this.getPointsDetail();
    },
    //获取积分详情
    getPointsDetail() {
      request({
        url: "user/pointsDetail",
        method: "POST",
        data: {
          userId: this.userinfo.id,
          page: this.page,
          size: 10,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code === 200) {
          this.pointslist.push(...res.data);
          this.triggered = false;
        } else {
          console.log(res.msg);
        }
      });
    },
    // 返回上一页
    onBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: absolute;
  top: 110rpx;
  left: 35rpx;
  width: 46rpx;
  height: 46rpx;
}
.title {
  position: absolute;
  top: 120rpx;
  left: 335rpx;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.content {
  position: absolute;
  top: 250rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 50rpx;
}
.scroll {
  height: 100%;
  width: 750rpx;
}
.empty{
  height: 100%;
  width: 750rpx;
  line-height: 1200rpx;
  text-align: center;
  font-size: 28rpx;
  color: #898989;
}
.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  width: 600rpx;
  padding: 0 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  margin-left: 50rpx;
}
.time {
  font-size: 24rpx;
  color: #7b7b7b;
}
.info {
  font-size: 24rpx;
  color: #898989;
  display: flex;
}
.num {
  font-size: 24rpx;
  color: #000000;
  font-weight: bold;
}
</style>
