<template>
  <view class='content'>
    <view class='top-view c-flex-column'>
      <text>{{ userInfo.integration }}</text>
      <text>会员积分</text>
    </view>
    <text class='integral-detail-title'>积分明细</text>
    <scroll-view style='margin: 10rpx 20rpx'>
      <integral-item v-for='(item,index) in tradeList' :key='index' :item='item' />
    </scroll-view>
  </view>
</template>

<script lang='ts' setup>
import IntegralItem from './components/integral-item.vue';
import { getIntegralList } from '@/api/user';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const tradeList = ref([]);

onLoad((e) => {
  fetchData();
});

const fetchData = async () => {
  const { rows } = await getIntegralList({
    fbean: { 'pageNum': 1, 'pageSize': 10, 'bean': {} }
  });
  tradeList.value = rows;
};

</script>

<style lang='scss' scoped>

.top-view {
  height: 195rpx;
  background: linear-gradient(#F32B2B, #F95D5D);
  align-items: center;
  justify-content: center;

  text:nth-of-type(1) {
    font-weight: 400;
    font-size: 50rpx;
    color: #FFFFFF;
  }

  text:nth-of-type(2) {
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    margin-top: 10rpx;
  }
}

.integral-detail-title {
  margin: 20rpx 24rpx;
  font-weight: bold;
  font-size: 30rpx;
  color: #333333;
  position: relative;
}

scroll-view {
  width: auto;
}
</style>
