jp-education-student/pages/youth/course/paymentRecords.vue

<template>
	<view>
		<u-navbar title="缴费记录"></u-navbar>
		<view class="screen">
			<view class="date" @click="show = true">
				<view class="text">
					{{year}}年
				</view>
				<view class="icon">
					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
				</view>
			</view>
			<u-line color="#999999" direction="col" length="40" margin="auto" />
			<view class="course" @click="courseShow = true">
				<view class="text">
					{{studentName}}
				</view>
				<view class="icon">
					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
				</view>
			</view>
		</view>

		<u-picker mode="time" v-model="show" :params="params" :defaultTime="defaultTime" @confirm="confirm">
		</u-picker>

		<u-select v-model="courseShow" mode="single-column" :list="studentList" @confirm="courseConfirm"></u-select>

		<view class="main">
			
			
			<view class="item" v-for="(item,index) in paymentList" :key="index"
				@click="gotoUrl('pages/youth/course/paymentDetail?id=' + item.billNum + '&studentId=' + item.studentId)">
				<view class="date">
					{{item.buyTime}}
				</view>
				<view class="infos">
					<view class="picture">
						<img v-if="item.posterUrl != null" :src="item.posterUrl" alt="">
						<img v-else src="../../../assets/img/picture1.png" alt="">
					</view>
					<view class="course">
						<view class="name">
							{{item.className}}
						</view>
						<view class="season-hour">
							<view class="season">
								{{item.packageName}}
							</view>
							<!-- <view class="hour">
								 {{item.buyTime}}课时
							</view> -->
						</view>

					</view>
					<view class="price">
						{{item.realPay!=null ? item.realPay.toFixed(2) : ''}}
					</view>
				</view>
			</view>
		</view>
		<!-- <u-divider v-if="paymentList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px">没有更多数据了
		</u-divider> -->
	</view>
</template>

<script>
	import * as courseApi from '@/apis/youth/course.js'
	import * as mineApi from '@/apis/youth/mine.js'

	export default {
		data() {
			return {
				courseName: '全部课程',
				courseShow: false,
				courseList: [],
				courseId: '',
				pageNum: 1,
				pageSize: 5,
				recordsTotal: 0,
				paymentList: [],
				studentId: '',
				year: '',
				defaultTime: '',
				params: {
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: true
				},
				show: false,
				studentId: '',
				studentName: '全部',
				studentList: []
			}
		},
		onReady() {
			var date = new Date();
			this.year = date.getFullYear();

			// this.studentId = this.carhelp.getStudentId().studentId;
			// this.getLoadMyBuyLog();
			// this.getCourseList();
			this.getStudentList();
		},
		// onReachBottom() {
		// 	if (this.paymentList.length < this.recordsTotal) {
		// 		this.myLoadmore();
		// 	}
		// },
		methods: {
			courseConfirm(e) {
				this.studentId = e[0].value;
				this.studentName = e[0].label;
				if(this.studentName == '全部') {
					this.getStudentList();
				} else {
					this.getLoadMyBuyLog();
				}
			},
			getStudentList() {
				this.studentList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.studentList().then((res) => {
					uni.hideLoading();
					var list = res.data.studentList;
					var list2 = [];
					this.studentList.push({
						value: '',
						label: '全部'
					});
					for (var i = 0; i < list.length; i++) {
						this.studentList.push({
							value: list[i].studentId,
							label: list[i].studentName
						})
						this.studentId = list[i].studentId;
						this.getLoadMyBuyLog();
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getCourseList() {
				this.courseList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.loadMyBuyCourseNames({
					studentId: this.studentId
				}).then((res) => {
					uni.hideLoading();
					var list = res.data;
					this.courseList.push({
						value: '',
						label: '全部'
					});
					for (var i = 0; i < list.length; i++) {
						this.courseList.push({
							value: list[i].courseId,
							label: list[i].courseName
						});
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// myLoadmore() {
			// 	this.pageNum += 1;
			// 	this.getLoadMyBuyLog()
			// },
			confirm(params) {
				this.year = params.year;
				this.getLoadMyBuyLog();
			},
			getLoadMyBuyLog() {
				this.paymentList = [];
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				// if (bl) {
				// 	this.paymentList = [];
				// 	this.pageNum = 1;
				// }
				courseApi.loadMyBuyLog({
					studentId: this.studentId,
					year: this.year,
					courseId: this.courseId,
					pageNum: 1,
					pageSize: 1000
				}).then((res) => {
					uni.hideLoading();
					// this.paymentList = [
					// 	...this.paymentList,
					// 	...res.data.data
					// ];
					// this.recordsTotal = res.data.recordsTotal;
					var list = res.data.data;
					for (var i = 0; i < list.length; i++) {
						this.paymentList.push(list[i]);
					}
					// this.paymentList = res.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.screen {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		text-align: center;
		height: 44px;
		line-height: 44px;
		position:fixed;
		top: 88rpx;
		left: 0;
		right: 0;
		z-index: 999;
	
	.date {

			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				margin-right: 8rpx;
			}
		}

		.course {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;

			.text {
				margin-right: 8rpx;
			}
		}
	}


	.main {
		margin-top:88rpx;
		.item {
			.date {
				padding: 24rpx 32rpx;
				color: rgba(119, 119, 119, 1);
			}

			.infos {
				background-color: #fff;
				padding: 24rpx 36rpx;
				display: flex;
				align-items: center;

				.picture {
					width: 92rpx;
					height: 92rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.course {
					margin-left: 24rpx;

					.name {
						color: rgba(51, 51, 51, 1);
						font-size: 16px;
						font-weight: bold;
					}

					.season-hour {
						display: flex;
						color: rgba(119, 119, 119, 1);
						margin-top: 8rpx;

						.hour {
							margin-left: 8rpx;
						}
					}

				}

				.price {
					color: rgba(16, 16, 16, 1);
					font-size: 18px;
					font-weight: bold;
					margin-left: auto;
				}
			}
		}
	}
</style>