hlm_pl_mall_store/pages/seller/inviter/OrderList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container">
        <view class="div common-header-wrap">
            <view class="status-holder"></view>
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="分销业绩" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
		<view class="scroll-view div" style="position:relative">
			<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div" @scrolltolower="loadMore" scroll-y="true">
					<view class="div settle-item mt-5" v-for="item in order_list" :key="item.orderinviter_id">
						<view class="div title">
							<text class="time">{{$moment.unix(item.orderinviter_addtime).format('YYYY年MM月DD日')}}</text>
							<text class="span membername">{{item.orderinviter_member_name}}</text>
						</view>
						<view class="div content">
							{{item.orderinviter_remark}}
						</view>
						<view class="div payment-account">
							<text class="span">{{item.orderinviter_money}}</text>
							<view class="btn div common-btn default ds-button-small"   disabled>{{item.orderinviter_valid_text}}</view>
						</view>
					</view>
			</scroll-view>
        <empty-record v-if="order_list && !order_list.length"></empty-record>
    </view>
</view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'

import EmptyRecord from '../../EmptyRecord'
import { getInviterOrderList } from '../../../api/sellerInviter'
export default {
  name: 'OrderList',
  components:{
    TitleHeader,
    SellerBase,
    EmptyRecord
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      // 分销商品列表
      order_list: false
    }
  },
  created: function () {
	this.loadMore()
    //this.getOrderList()
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    getOrderList (ispush) {
      uni.showLoading({ title: '加载中' })
      let params = this.params
      getInviterOrderList(params).then(res => {
        uni.hideLoading()

            if (ispush && this.order_list) {
              this.order_list = this.order_list.concat(res.result.order_list)
            } else {
              this.order_list = res.result.order_list
            }
            if (res.result.hasmore) {
              this.isMore = true
            } else {
              this.isMore = false
            }

      }).catch(error=>{
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
      })
    },
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getOrderList(true)
      }
    }
  }
}
</script>

<style scoped lang="scss">
	.scroll-view-wrapper{display: flex;flex-direction: column;}
	.scroll-view{flex:1}
    .settle-item {
        background: #fff;
        padding:  .5rem;
        box-sizing: border-box;
        border-radius: .5rem;
    .title {
        font-size: .7rem;
        color: #999;
        display: flex;
        align-items: center;
        .membername{
        	margin-left: auto;
        	color: $primaryColor;
        	font-size: .8rem;
        }
    }
    .content {
        padding: .5rem 0;
        display: flex;
        line-height: 1.5;
        font-size:$subFontSize;
		.item {
			flex: 1;
			.mt {
				font-size:$fontSize;
				color: #999
			}
			.mc {
				font-size:$fontSize;
				color: #000;
				.strong {
					font-size:$subFontSize;
				}
			}
			.mc.income {
				color: #4caf50
			}
			.mc.outlay {
				color: #f31c47
			}
		}
    }
    .payment-account{font-size:.7rem;color:#333;padding:.5rem 0;border-top:1px dashed #DBDADF;display:flex;
    	.span{flex:1;line-height:1.65rem;padding-right:.5rem;color: #fb2630;font-size: 1.2rem;font-weight: bold;}
    	.btn{width:4rem;background-color: $primaryColor;color: #fff;font-size: .7rem;padding: .1rem .4rem;}
    }
    }
</style>