luoyangCoachApp/pages/indexEntry/settlement/settlement.vue

<template>
	<!-- 结算明细 -->
	<view class="pageBgImg">
		<topNavbar title="结算明细"></topNavbar>
		<view class="pad">
			<searchRow placeholder="搜索学员姓名/学员手机号"/>
		</view>
		<scroll-view class="scroll-view_w" scroll-x="true"  scroll-with-animation :scroll-into-view="'tab'+currentTab" scroll-left="140">
			<view class="tabs">
				<view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
				<view class="rightPad"></view>
			</view>
		</scroll-view>
		<view class="content pad">
			<view class="month_row" @click="showDate=true">
				<!-- <view class="month">8</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">结算金额共计</view>
			<view class="record">
				<view class="card" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/indexEntry/settlement/detail/detail')">
					<stage/>
				</view>
			</view>
		</view>
		<u-popup :show="showDate" mode="bottom" :round="20" >
			<view class="popupCon">
				<view class="popTab">
					<view class="tabItem" :class="{active: currentPopTab==1}" @click="changePopTab(1)">月份选择</view>
					<view class="tabItem" :class="{active: currentPopTab==2}" @click="changePopTab(2)">自定义时间</view>
				</view>
				<view class="timer">
					<view class="tabCon" v-if="currentPopTab==1">
						<view class="dateBtn" @click="showDatePickerFn(1)"  :class="{hui: !date1}">{{ date1 }}</view>
						<!-- <u-datetime-picker-my
								:show="show"
								v-model="value1"
								mode="year-month"
								:showToolbar="false"
								:visibleItemCount="4"
								@confirm="confirm"
						></u-datetime-picker-my> -->
					</view>
					<view class="tabCon" v-else>
						<view class="dateBtn" :class="{hui: !date2}" @click="showDatePickerFn(2)">{{ date2 }}</view>
						<view class="to">至</view>
						<view class="dateBtn" :class="{hui: !date3}" @click="showDatePickerFn(3)">{{ date3 }}</view>
					</view>
					<view class="btnBg" @click="selectDateClick">确定</view>
					<!-- <u-picker-my></u-picker-my> -->
				</view>
			</view>
		</u-popup>
		<u-datetime-picker
				:show="showDatePicker"
				v-model="value1"
				mode="year-month"
				:visibleItemCount="4"
				:closeOnClickOverlay="false"
				@confirm="confirmDatePicker"
				@cancel="cancelDatePicker"
		></u-datetime-picker>
	</view>
</template>

<script>
	import stage from '../../tabbar/statistics/comp/stage.vue'
	export default {
		components: { stage },
		data() {
			return {
				date3: '',
				date2: '',
				date1: '',
				value1: '',
				showDate: false,
				showDatePicker: false,
				show: false,
				tabData: [{
						text: '全部',
						id: 10
					},
					{
						text: '阶段一',
						id: 0
					},
					{
						text: '阶段二',
						id: 1
					},
					{
						text: '阶段三',
						id: 2
					},
					{
						text: '阶段四',
						id: 3
					},
					{
						text: '阶段五',
						id: 4
					},
					{
						text: '阶段六',
						id: 5
					},
				],
				currentTab: 2,
				currentPopTab: 2,
				currentBtnDate: 1,
				selectDate: '',//筛选日期
			}
		},
		methods: {
			// tab切换
			changeTab(val) {
				this.currentTab = val.id
			},
			// 切换选择时间的类型
			changePopTab(num) {
				this.currentPopTab = num
			},
			// 1打开时间选择器
			showDatePickerFn(num) {
				this.showDate = false
				this.showDatePicker = true
				this.currentBtnDate = num
			},
			// 2选择时间选择器里的时间
			confirmDatePicker(val) {
				this.showDate = true
				this.showDatePicker = false
				let date = uni.$u.date(val.value, 'yyyy-mm-dd')
				if(this.currentBtnDate==1) {
					date = uni.$u.date(val.value, 'yyyy-mm')
				}
				this['date'+this.currentBtnDate] = date
			},
			// 3最后确定具体选择使用什么时间
			selectDateClick() {
				this.showDate = false
				this.selectDate = this['date'+this.currentBtnDate]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_w {
		width: 100%;
		margin: 30rpx  0 40rpx 0;
		.tabs {
			display: flex;
			flex-wrap: nowrap;
			padding: 0 0rpx 10rpx 32rpx;
			width: auto;
			.tab {
				width: 108rpx;
				height: 60rpx;
				border-radius: 8rpx;
				border: 2rpx solid #FFFFFF;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				line-height: 60rpx;
				margin-right: 28rpx;
				flex-shrink: 0;
		
				&.active {
					background-color: #fff;
					color: $themC;
				}
		
				&.all {
					width: 96rpx;
				}
			}
			.rightPad {
				min-width: 10rpx;
				height: 60rpx;
				
			}
		}
	}
	.month_row {
		display: flex;
		align-items: center;
		color: $themC;
		.month {
			font-size: 50rpx;
			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>