luoyangCoachApp/pages/indexEntry/settlement/settlement.vue

<template>
	<!-- 结算明细 -->
	<view class="pageBg">
		<view class="bgImg">
			<topNavbar title="结算明细"></topNavbar>
			<view class="pad">
				<searchRow placeholder="搜索学员姓名/学员手机号"  @searchFn="searchFn"/>
				<view class="tabs">
					<view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item)"
						:class="{active: params.payStep==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
				</view>
			</view>
			<!-- <scroll-view class="scroll-view_w" scroll-x="true" scroll-with-animation
				:scroll-into-view="'tab'+params.payStep" scroll-left="140"> -->
				
			<!-- </scroll-view> -->
		</view>

		<view class="content pad">
			<view class="month_row" @click="showDatePicker=true">
				<view class="month">{{params.searchMonth}}</view>
				<!-- <view class="unit">月</view> -->
				<view class="">{{ selectDate }}</view>
				<view class="iconFont">
					<u-icon name="arrow-down" color="#686B73" size="14"></u-icon>
				</view>
			</view>
			<view class="total">结算金额共计: {{ extend }} 元</view>
			<view class="record" v-if="list.length">
				<view class="card" v-for="(item,index) in list" :key="index"
					@click="$goPage('/pages/indexEntry/settlement/detail/detail')">
					<stage :item="item"/>
				</view>
			</view>
			<nodata v-if="!list.length&&status=='nomore'"></nodata>
		</view>
		
		<u-datetime-picker :show="showDatePicker" v-model="searchMonth" mode="year-month" :visibleItemCount="4"
			:closeOnClickOverlay="false" @confirm="confirmDatePicker" @cancel="showDatePicker=false"></u-datetime-picker>
	</view>
</template>

<script>
	import stage from '../../tabbar/statistics/comp/stage.vue'
	import {
		settle_list
	} from '@/config/api.js'
	export default {
		components: {
			stage
		},
		data() {
			return {
				date3: '',
				date2: '',
				date1: '',
				searchMonth: '',
				showDatePicker: false,
				show: false,
				tabData: [{
						text: '全部',
						id: 0
					},
					{
						text: '阶段一',
						id: 1
					},
					{
						text: '阶段二',
						id: 2
					},
					{
						text: '阶段三',
						id: 3
					},
					{
						text: '阶段四',
						id: 4
					}
				],
				currentPopTab: 2,
				currentBtnDate: 1,
				selectDate: '', //筛选日期
				params: {
					"pageNo": 1,
					"pageSize": 20,
					"queryCondition": "",
					// "coachId": '',
					"payStep": 0,
					"searchMonth": ''
				},
				list: [],
				status: 'loading',
				extend: 0,
				total: 0
			}
		},
		onLoad() {
			this.searchMonth = this.params.searchMonth = uni.$u.timeFormat(Date.now(), 'yyyy/mm');
			console.log(this.params.searchMonth)
			this.initList()
		},
		onPullDownRefresh() {
			this.initList()
		},
		onReachBottom() {
			if(this.total>this.list.length) {
				this.settle_listFn()
			}
		},
		methods: {
			searchFn(val) {
				this.params.queryCondition = val
				this.initList()
			},
			initList() {
				this.list = []
				this.params.pageNo = 1
				this.settle_listFn()
			},
			// tab切换
			changeTab(val) {
				if(this.params.payStep == val.id) return
				this.params.payStep = val.id
				this.initList()
			},
			
			// 选择时间选择器里的时间
			confirmDatePicker(val) {
				this.showDatePicker = false
				let date = uni.$u.date(val.value, 'yyyy/mm')
				this.searchMonth = this.params.searchMonth = date
				console.log(this.params.searchMonth)
				this.initList()
			},
			// 请求数据
			async settle_listFn() {
				let obj = Object.assign({},this.params)
				if(obj.payStep==0) delete obj.payStep
				obj.searchMonth = obj.searchMonth.replace('/','')
				// delete obj.searchMonth
				const {
					data: res
				} = await settle_list(obj)
				let list = res.list
				this.params.pageNo ++
				if(list&&list.length) {
					this.list.push(...list)
				}
				if(this.list.length>=res.total) {
					this.status='nomore'
				}
				this.total = res.total
				this.extend = res.extend
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgImg {
		height: 100%;
	}

	// .scroll-view_w {
	// 	width: 100%;
	// 	margin: 30rpx 0 0rpx 0;

		.tabs {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			padding: 30rpx 0;
			width: 100%;

			.tab {
				width: 118rpx;
				height: 60rpx;
				border-radius: 8rpx;
				border: 2rpx solid #FFFFFF;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				line-height: 60rpx;
				flex-shrink: 0;

				&.active {
					background-color: #fff;
					color: $themC;
				}

				&.all {
					width: 96rpx;
				}
			}
		}
	// }

	.month_row {
		display: flex;
		align-items: center;
		color: $themC;
		padding: 20rpx 0 0rpx 0;

		.month {
			font-size: 36rpx;
			margin-right: 10rpx;
			// font-weight: 600;
		}

		.unit {
			font-size: 30rpx;
			margin: 0 4rpx;
		}
	}

	.total {
		padding: 20rpx 0;
	}

	.card {
		margin-bottom: 24rpx;
	}

	.popupCon {
		height: 430rpx;

		.popTab {
			display: flex;
			padding: 40rpx 32rpx;

			.tabItem {
				font-size: 32rpx;
				color: #333;
				margin-right: 60rpx;

				&.active {
					color: $themC;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 128rpx;
						height: 4rpx;
						background: #1989FA;
						border-radius: 3rpx;
					}
				}
			}
		}

	}

	.tabCon {
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		padding-top: 20rpx;

		.dateBtn {
			width: 280rpx;
			height: 80rpx;
			border-radius: 10rpx;
			border: 2rpx solid #1989FA;
			line-height: 80rpx;
			text-align: center;
			color: $themC;
			font-size: 32rpx;

			&.hui {
				border: 2rpx solid #E8E9EC;
			}
		}

		.to {
			font-size: 32rpx;
			margin: 0 40rpx;
		}
	}

	.btnBg {
		width: 396rpx;
		margin: 34rpx auto 42rpx auto;
	}
</style>