<!--
 * @Author: your name
 * @Date: 2022-01-14 11:42:25
 * @LastEditTime: 2022-01-14 15:24:14
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /hs-app-project/src/pages/brands/everyDay.vue
-->
<template>
  <!-- 每日上新 -->
  <view>
    <u-card full :head-border-bottom="false">
      <view slot="body">
        <view class="hotFlex">
          <hot-style
            v-if="recordsList.length > 0"
            :recordsList="recordsList"
            @update="update"
          ></hot-style>
        </view>
      </view>
    </u-card>
    <view v-if="loadText" class="loadStyle">没有可用的数据了</view>
  </view>
</template>

<script>
import hotStyle from "./components/hotStyle"; //热门款式
export default {
  components: {
    hotStyle,
  },
  data() {
    return {
      recordsList: [],
      total: 0, //总页数
      current: 1,
      size: 10,
      loadText: false, //判断加载数据完显示什么
    };
  },
  created() {
    // console.log("ces");
    this.materialDetail(1, 10);
  },
  methods: {
    //更新
    update() {
      this.materialDetail(1, 10);
    },
    // 每日上新接口
    materialDetail(current, size) {
      let param = {
        current: current,
        size: size,
        styleTag: "",
      };
      this.$http("mobileBrand.dailyNewStylePage", param).then((res) => {
        let { code, data } = res;
        if (code === 200) {
          if (current == 1) {
            this.recordsList = data.recordspush;
          } else {
            this.recordsList.push(...data.records);
          }
          this.total = data.total;
        }
      });
    },
  },
  //上拉加载
  onReachBottom() {
    //判断当前页是否到达总页数
    if (this.current >= this.total) {
      this.loadText = true;
    } else {
      this.current++;
      (this.size = 5), this.materialDetail(this.current, this.size);
    }
  },
};
</script>

<style lang="scss" scoped>
// 上拉加载
.loadStyle {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
::v-deep .u-card__body {
  padding-top: 20rpx !important;
  background-color: #f5f5f5;
}
::v-deep .u-card__head {
  padding: 0rpx !important;
}
.hotFlex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
