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

<template>
  <view class="customer-list">
    <view class="list-wrap">
      <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>
      <u-sticky bgColor="#fff"  offsetTop="54">
      <view class="tabs-wrap">
        <u-tabs :list="tablist" :current="active" @click="changeTab" lineColor="#4680F9">
        </u-tabs>
      </view>
      </u-sticky>
      
      <template v-if="customerList.length">
        <u-list @scrolltolower="scrolltolower">
          <u-list-item v-for="(item, index) in customerList" :key="index">
            <card :data="item"></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 './card.vue'
import {getCustomerList} from '../../api/customer'
export default {
  data(){
    return {
      keyword:'',
      active:0,
      value:'',
      customerList:[],
      tablist:[{
          name:this.$t("customer_meter.all"),
      }, {
          name:this.$t("customer_meter.sale"),
      }, {
          name:this.$t("customer_meter.purchase")
      }],
      page: {
        pages: 1,
        size: 10,
      },
      total: 0,
      hasMore: true,
    }
  },
  components:{
    card
  },
  onLoad() {
    this.getCustomerList()
  },
  methods:{
    //加载更多
    scrolltolower() {
      console.log('1111111111');
      if (this.hasMore) {
        this.page.pages += 1;
        this.getCustomerList();
      }
    },
    //搜索列表
    searchList(){
      this.page.pages = 1
      this.hasMore = false
      this.getCustomerList()
    },
    getCustomerList(){
      let data = {
        current:this.page.pages,
        size:this.page.size,
        type:this.active == 0 ? '' : (this.active == 1 ? '102' : '104'),
        keywords:this.keyword || '' ,
      }
      getCustomerList(data).then(res=>{
        if(res.statusCode == 200 ){
          // this.customerList=res.data.data.records
          if (this.hasMore) {
            this.customerList = [
              ...this.customerList,
              ...res.data.data.records,
            ];
          }
          console.log(this.customerList);
          this.total = res.data.data.total;
          if (this.customerList.length >= this.total) {
            this.hasMore = false;
          } else {
            this.hasMore = true;
          }
        }
      })
    },
    onClickRight(){
      uni.navigateTo({ url: `/subpages/customer/add-edit` })
    },
    changeTab(item){
      if(item.index == this.active){
        return
      }else{
        this.keyword=''
        this.active = item.index;
        this.page.pages = 1 
        this.hasMore = false
        this.getCustomerList()
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .customer-list{
    background: #fff;
    .list-wrap{
      // padding-top: 88rpx;
      .tabs-wrap{
        padding: 0 24rpx;
        background-color: #fff;
      }
      .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: #4680F9;
            border-left: 1px solid #9fc4ff;
          }
        }
      }
    }
  }
//  /deep/ .u-search{
// }
/deep/ .u-empty{
  background-color: #fff;
}
</style>