count-pass-app/subpages/material/material.vue

<template>
  <view class="customer-list">
      <!-- <u-navbar
        :title="$t('mine.mater')"
        rightIcon="plus"
        :autoBack="true"
        @rightClick="onClickRight"
        :placeholder="true"
      >
      </u-navbar> -->
    <view class="list-wrap">
      <!-- <u-sticky bgColor="#fff" :offset-top="topheight"> -->
      <u-sticky bgColor="#fff">
        <view class="search-wrap">
          <view class="input-wrap">
            <u-search
            bgColor='#fff'
            :showAction='false' 
            :placeholder="$t('base.common.inputPlaceholder')" 
            @search="searchList"
            @clear='searchList'
            v-model="keyword">
            </u-search>
            <view class="search-btn" @click="searchList">{{$t("customer_meter.search")}}</view>
          </view>
          <u-icon name="plus" size='22' @click="onClickRight"></u-icon>
        </view>
      </u-sticky>
      <template v-if="materList.length">
        <u-list
          @scrolltolower="scrolltolower"
        >
          <u-list-item
            v-for="(item, index) in materList"
            :key="index"
          >
            <card :data="item" :path="'material'"></card>
          </u-list-item>
        </u-list>
      </template>
      <template v-else>
        <u-empty
          mode="list"
          icon="https://cdn.uviewui.com/uview/empty/list.png"
        >
        </u-empty>
      </template>
    </view>
  </view>
</template>

<script>
import card from '../material/card.vue'
import {getMaterialList} from '../../api/customer'
export default {
  data(){
    return {
      keyword:'',
      active:0,
      value:'',
      materList:[],
      topheight:0,
      page:{
        pages:1,
        size:10,
      },
      total:0,
      hasMore:true,
    }
  },
  components:{
    card
  },
  onLoad() {
    // this.getTopHeight()
  },
  onShow(){
    this.getMaterialList()
  },
  methods:{
    //搜索列表
    searchList(){
      this.page.pages = 1
      this.hasMore = false
      this.getMaterialList()
    },
    //
    scrolltolower() {
      console.log(222);
      if(this.hasMore){
        this.page.pages+=1
        this.getMaterialList()
      }
      
    },
    //适配状态栏高度
    // getTopHeight() {
    //   console.log('123');
    //   let that = this;
    //   uni.getSystemInfo({
    //     success: function (e) {
    //          //48为自定义导航栏高度，一般为44
		// 		let topPx = e.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
		// 		that.topheight = topPx // px转rpx，这里必须转化为rpx，不然适配失败
		
    //     },
    //   });
    // },
    getMaterialList(){
      let data={
        current:this.page.pages,
        size:this.page.size,
        keywords:this.keyword || '' ,
      }
      getMaterialList(data).then(res=>{
        if(res.statusCode == 200 ){
          if(this.hasMore){
            this.materList=[...this.materList,...res.data.data.records]
          }else{
            this.materList=res.data.data.records
          }
          console.log(this.materList);
          this.total=res.data.data.total
          if(this.materList.length >= this.total){
            this.hasMore=false
          }else{
            this.hasMore=true
          }
        }
      })
    },
    onClickRight(){
      uni.navigateTo({ url: `/subpages/material/add-edit` })
    },
    changeTab(item){
      this.active=item.index
    },
  }
}
</script>

<style lang="less" scoped>
  .customer-list{
    background: #f7f8fa;
    .list-wrap{
      // padding-top: 128rpx;
      .top-option{
        display: flex;
        padding-right: 32rpx;
      }
      .search-wrap{
        padding: 20rpx 32rpx;
        background-color: #f2f2f2;
        display: flex;
        .input-wrap{
          flex: 1;
          display: flex;
          background-color: #fff;
          border-radius: 100rpx;
          align-items: center;
          margin-right: 20rpx;
          .search-btn{
            align-items: center;
            margin-right: 32rpx;
            padding-left: 20rpx;
            height: 44rpx;
            line-height: 44rpx;
            color: #333;
            border-left: 1px solid #d3d3d3;
          }
        }
      }
    }
  }
/deep/ .u-tabs__wrapper__nav{
  padding: 0 24rpx;
}
//  /deep/ .u-search{
// }
/deep/ .u-navbar--fixed{
  z-index: 1000;
}
/deep/ .u-empty{
  background-color: #fff;
}
</style>