cosmetics_shop_wxapp/pages/distribution/index.vue

<template>
	<view class="distribution">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">分销中心</view></cu-custom>
		  <view class="grid col-3 text-center bg-white padding">
			  <view>
				  <view>合计购买次数</view>
				  <view class="text-bold text-black margin-top">{{params.sum_count}}</view>
			  </view>
			  <view>
			  		<view>累计现金收益</view>
			  		<view class="text-bold text-black margin-top">{{params.sum_cash}}</view>
			  </view>
			  <view>
			  		<view>累计积分收益</view>
			  		<view class="text-bold text-black margin-top">{{params.sum_point}}</view>
			  </view>
		  </view>
		  <view class="cu-bar search bg-white border">
		    <view class="search-form round">
		      <text class="cuIcon-search"></text>
		      <input :value="searchInput" @input="searchChange" type="text" placeholder="下级分销商姓名" confirm-type="search"></input>
		    </view>
		    <view class="action">
		      <button @click="handler" class="cu-btn bg-green shadow-blur round">搜索</button>
			  <button v-if="searchInput" @click="resetFunc" class="cu-btn margin-left-sm shadow-blur round">重置</button>
		    </view>
		  </view>
		  <view class="flex border padding-lr bg-white">
		  		<view class="text-center text-black text-cut text-bold lineheight">序号</view>
		  		<view class="text-center text-black text-cut text-bold lineheight ">姓名</view>
		  		<view class="text-center text-black text-cut text-bold lineheight ">消费金额</view>
		  		<view class=" text-center text-black text-cut text-bold lineheight ">消费积分</view>
		  </view>
		  <view  class="flex border padding-lr bg-white">
		  		<view class="text-center text-black text-cut text-bold lineheight ">合计</view>
		  		<view class="text-center text-black text-cut text-bold lineheight "> </view>
		  		<view class="text-center text-black text-cut text-bold lineheight ">{{params.sum_amount}}</view>
		  		<view class="text-center text-black text-cut text-bold lineheight ">{{params.total_point}}</view>
		  </view>
		  <!-- section -->
       <view class="bg-white">
	        <cu-scrollView @scroll="scrollFunc" @refresherpulling="refresherpulling" :height="height">
				  <view class="section padding">
					 <view v-for="(item,index) in ListValue" :key="index" class="row">
						 <view class="cell text-center padding-tb-sm text-cut bordera">{{index+1}}</view>
						 <view class="cell text-center padding-tb-sm text-cut bordera">{{item.name}}</view>
						 <view class="cell text-center padding-tb-sm text-cut bordera">{{item.total_amount}}</view>
						 <view class="cell text-center padding-tb-sm text-cut bordera">{{item.total_point}}</view>
					 </view>
				  </view>
				  <!-- 状态管理 -->
				  <view class="cu-load" :class="{ loading: currentPage <= totalPage, over: currentPage > totalPage }"></view>
	         </cu-scrollView>
           </view>
	</view>
</template>

<script>
	import {CustomBarHeight} from "@/common/device/index.js";
	import api from "./api.js";
	export default {
		data(){
			return {
				searchInput:"",
				ListValue:[],
				totalPage:1,
				currentPage:1,
				params:{}
			}
		},
		async onShow(){
		 await this.requestList(true);
		},
		methods:{
			handler(){
				this.requestList(true,this.searchInput)
			},
			searchChange(e){
				this.searchInput=e.detail.value;
			},
			async resetFunc(){
				this.searchInput='';
				await this.requestList(true);
			},
			async requestList (status,name){
				let {currentPage,totalPage,ListValue}=this;
				if (status){
					currentPage=1,totalPage=1;ListValue=[]
				};
				if(currentPage>totalPage) return false;
				let params =name ? {limit:20,page:currentPage,name} :{limit:20,page:currentPage};
				var result=await api.detail(params);
				if(result.code!=0) return false;
				this.currentPage=currentPage+1;
				this.totalPage = result.totalPage;
				this.ListValue =ListValue.concat(result.data.data);
				this.params=result.data.footer;
			},
			async refresherpulling(){
			    await this.requestList(true);
			},
			async scrollFunc(){
				await this.requestList();
			}
		},
		computed:{
			height(){
				let value=CustomBarHeight;
				return `calc(100vh - ${value}px - 420rpx)`
			}
		},
		watch:{
			searchInput:function(newVal,oldVal){
				if(newVal) this.requestList(true,newVal);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.distribution{
		.border{
			position: relative;
			&::after{
				content:"";
				width: 100%;
				position: absolute;
				bottom: 0;left: 0;
				border-bottom: 1upx solid #ccc;
				transform: scale(1,0.5);
			}
		}
		.lineheight{
			line-height: 80upx;
			&:nth-child(1){
				width: 10%;
			}
			&:not(:nth-child(1)){
				width: 30%;
			}
		}
		.bordera{
			position: relative;
			&::after{
				content:"";
				width: 100%;
				position: absolute;
				bottom: 0;left: 0;
				border-bottom: 1upx solid #eee;
				transform: scale(1,0.5);
			}
		}
	  .section{
		  display: table;
		  width: 100vw;
		  box-sizing: border-box;
		  .row{
			  display: table-row;
			  .cell{
				  display: table-cell;
			  }
			  .cell:nth-child(1){
			  	width: 10%;
			  }
			  .cell:not(:nth-child(1)){
			  	width: 30%;
			  }
		  }
		  .fixed{
			  position: fixed;left: 0;
			  width: 100vw;
		  }
	  }
	}
</style>