index.vue 4.02 KB
<template>
  <view>
    <u-sticky bgColor="#fff" customNavHeight="0" offsetTop="0">
      <u-search placeholder="搜索感兴趣的内容" v-model="keyword" :show-action="false" margin="30rpx 34rpx 15rpx 34rpx"
        borderColor="rgb(230, 230, 230)" height="74rpx" bgColor="#F5F6FA" @search="search"></u-search>
      <u-tabs :list="tabList" :activeStyle="{'color': '#cf000d','font-weight':'bold'}" lineWidth="30rpx"
        lineHeight="4rpx" lineColor="#cf000d" :current="current" @click="tabChange"></u-tabs>
    </u-sticky>
    <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="NewsList.length <= 0"></u-empty>
    <newsList v-for="(item,index) in NewsList" :key="index" :newItem="item" v-else></newsList>
    <u-loadmore :status="status" v-if="NewsList.length > 0" />
  </view>
</template>

<script>
  import newsList from '@/components/news-list/news-list.vue'
  import {
    getInfoMarketInformationlist
  } from '@/api/infoMarketInformation.js'
  import {
    listSimpleDictDatas
  } from '@/api/dict.js'
  export default {
    components: {
      newsList
    },
    props: {

    },
    data() {
      return {
        keyword: "",
        current: 0,
        status:"loadmore",
        total: null,
        queryParameter: {
          pageNum: 1,
          pageSize: 10
        },
        tabList: [{
          name: "全部",
        }, {
          name: "宏观经济",
        }, {
          name: "产业政策",
        }, {
          name: "行业动态",
        }, {
          name: "友商动态",
        }, {
          name: "用户资讯",
        }, {
          name: "国际能源",
        }],
        NewsList: [],
      }
    },
    computed: {

    },
    onLoad() {
      this.initData()
    },
    onReachBottom() {
      let allTotal = this.queryParameter.pageNum * this.queryParameter.pageSize
      if (allTotal < this.total) {
        //当前条数小于总条数 则增加请求页数
        this.queryParameter.pageNum++;
        this.status = 'loading';
        this.updateList() //调用加载数据方法
      } else {
        this.status = "nomore"
        // console.log('已加载全部数据')
      }
    },
    onPullDownRefresh() {
      this.resetQuery();
      this.keyword = "";
      this.current = 0;
      this.initData();
      setTimeout(() => {
        //结束下拉刷新
        uni.stopPullDownRefresh();
      }, 500);
    },
    methods: {
      initData() {
        this.updateList()
      },
      resetQuery(){
        this.NewsList = [];
        this.queryParameter = {
          pageNum: 1,
          pageSize: 10
        }
      },
      search() {
        this.resetQuery();
        this.updateList()
      },
      checkTotal(){
        let allTotal = this.queryParameter.pageNum * this.queryParameter.pageSize
        if(this.total < allTotal){
          this.status = "nomore"
        }
      },
      updateList() {
        let Params
        if (this.keyword && this.current !== -1) {
          Params = {
            title: this.keyword,
            plateName: this.current
          }
        } else if (this.keyword !== "") {
          Params = {
            title: this.keyword,
          }
        } else if (this.current !== 0) {
          Params = {
            plateName: this.current - 1
          }
        }
        Params = {
          ...this.queryParameter,
          ...Params
        };
        // console.log(111111, Params);
        getInfoMarketInformationlist(Params).then(res => {
          // console.log(res);
          if (res.code === 200) {
            if(this.queryParameter.pageSize > 1){
              this.NewsList = [...this.NewsList,...res.rows]
            }else{
              this.NewsList = res.rows
            }
            this.total = res.total;
            console.log(this.NewsList);
          }
        })
        this.checkTotal();
      },
      tabChange(e) {
        console.log(e);
        this.resetQuery()
        this.current = e.index
        console.log(this.current);
        this.updateList()
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>