<template>
  <view>
    <!-- 搜索框 -->
   <view class="flex items-center px-40rpx text-32rpx bg-white py-30rpx sticky z-1500 suspension">
     <view class="mr-15rpx">手机号：</view>
     <u-search @search="searchGoods" class="flex-1" placeholder="用户手机号" v-model="keyword" :show-action="false"></u-search>
   </view>
   <mescroll-body  :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
     :down="downOption" :up="upOption">
      <view class="pt-base">
        <block v-for="(item,index) in dataList" :key="index">
         <view class="mb-24rpx">
            <order-item  :goods="item"  />
         </view>
        </block>
      </view>
       </mescroll-body>
  </view>
</template>
<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import OrderItem from './conponents/order-item.vue';
  export default {
     mixins: [MescrollMixin], // 使用mixin
    components: {
      OrderItem,
    },
    data() {
      return {
        keyword:'',
        downOption: {},
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1,
        },
        dataList: [], //获取到的数据
      };
    },
    computed:{
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 88 + 'px';
      },
    },
    methods: {
      //搜索
      searchGoods(e){
        if(this.keyword!='' && !this.$u.test.mobile(this.keyword)){
          return this.$u.toast('手机号格式不正确')
        }
        this.downCallback()
      },
      downCallback() {
        this.mescroll.resetUpScroll();
        this.dataList = []
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        this.$api.get(`/v1/order/underline`, {
          params: {
            page: page.num,
            per_page: page.size,
            phone:this.keyword
          }
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
    },
  };
</script>
<style lang="scss" scoped>
  .badge {
    @apply bg-badge;
  }
  .suspension {
    top:0;
    // #ifdef H5
    top: 44px  // #endif
  }
</style>
