DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/OpenLessonPlanOfElectiveStudent/list.vue

<template>
	<view class="page">
		<view class="mainpage" :class="sideOpen ? 'show' : ''" style="padding-top: 40px;">
			<!-- <l-customlist-banner></l-customlist-banner> -->
			<view class="records">共 {{ records }} 条数据</view>
			<l-scroll-list v-if="ready" @pullDown="pullDown" @toBottom="fetchList()" ref="data">
				<l-customlist :tips="loadState" showTips>
					<view class="pageBox customlist-item" showDelete="true" v-for="(item, ind) in data"
						:key="item.MakeDate" @click="tapClick(item)">
						<view class="">
							<text>学年:</text>
							{{ item.AcademicYearNo }}
						</view>
						<view class="">
							<text>学期:</text>
							{{ item.Semester }}
						</view>
						<view class="">
							<text>课程名称:</text>
							{{ item.LessonName }}
						</view>
						<view class="">
							<text>上课节次:</text>
							{{ jieci(item.LessonSection) }}
						</view>
						<view class="">
							<text>上课时间:</text>
							{{ item.LessonTime }}
						</view>
						<view class="">
							<text>学分:</text>
							{{ item.StudyScore }}
						</view>
						<view class="">
							<text>教师姓名:</text>
							{{ item.EmpName }}
						</view>
						<view class="">
							<text>教室名称:</text>
							{{ item.ClassRoomNo }}
						</view>
						<view class="">
							<text>人数上限:</text>
							{{ item.StuNumMax }}
						</view>
						<view class="">
							<text>已报名人数:</text>
							{{ item.StuNumOfApplyPre }}
						</view>
						<view class="pageType">{{ typePd(item.StatusPre) }}</view>
						<view class="delbtn" @click.stop="delTap(item)">取消报名</view>
					</view>
				</l-customlist>
			</l-scroll-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weekChina: ['一', '二', '三', '四', '五', '六', '日'],
				user: null,
				data: [],
				total: 1,
				records: 0,
				ready: false,
				page: 1,
				rows: 10,
				multipleData: null,
				sideOpen: false,
				loadState: '向下翻以加载更多'
			};
		},
		onUnload() {
			this.OFF('OpenLessonPlanOfElectiveStudent');
		},
		methods: {
			init() {
				this.ON('OpenLessonPlanOfElectiveStudent', this.refreshList);
				// 拉取加载列表和数据源
				Promise.all([() => {}]);
				var _this = this;
				this.user = this.GET_GLOBAL('loginUser');
				this.fetchList();
				this.ready = true;
			},
			// 拉取列表
			async fetchList() {
				if (this.page > this.total) {
					return;
				}
				let _this = this;
				let _postParam = {
					pagination: {
						rows: _this.rows,
						page: _this.page,
						sidx: 'LessonNo',
						sord: 'asc'
					},
					queryJson: '{}'
				};
				if (true) {
					_postParam.queryJson = JSON.stringify({
						StuNo: _this.user.account,
						StuMajorNo: _this.user.majorno,
						StuGrade: _this.user.grade,
					});
				}
				_this.LOADING('加载数据中…')
				_this.HTTP_GET('learun/OpenLessonPlanOfElectiveStudent/pagelist', _postParam, '加载数据时出错').then(res => {
					_this.HIDE_LOADING();
					this.data = this.data.concat(res.rows);
					_this.total = res.total;
					_this.records = res.records;
					this.page = res.page + 1;
					this.loadState = res.page >= res.total ? '已加载所有项目' : '向下翻以加载更多';
					// console.log(_this.data);
				});
			},
			// 列表下拉
			pullDown() {
				this.refreshList().then(() => {
					this.$refs.data.stopPullDown();
				});
			},
			async refreshList() {
				this.page = 1;
				this.total = 1;
				this.data = [];

				this.fetchList();
			},
			tapClick(data) {
				this.NAV_TO('./from', data.Id, true);
			},
			delTap(item) {
				// console.log(item)
				let _this = this;
				this.CONFIRM('数字化校园提示', '确定要取消报名吗？', true).then(res => {
					if (res) {
						let _postData = {
							keyValue: item.Id,
							StuNo: _this.user.account
						}
						_this.LOADING('正在取消报名…')
						_this.HTTP_POST(
							'learun/OpenLessonPlanOfElectiveStudent/Cancel',
							_postData,
							'加载数据时出错'
						).then(data => {
							_this.HIDE_LOADING()
							// console.log(data)
							if (data) { // 成功
								this.TOAST('取消报名成功！');
								this.refreshList()
							}
						})
					}
				})
			}
		},
		computed: {
			jieci() {
				return str => {
					let ls = '';
					if (str.indexOf(',') == -1) ls = '星期' + this.weekChina[str.slice(0, 1) - 1] + '第' + str.slice(1) +
						'节';
					else ls = '星期' + this.weekChina[str.slice(0, 1) - 1] + '第' + str.slice(1, 2) + '、' + str.slice(4) +
						'节';

					return ls;
				};
			},
			typePd() {
				return num => {
					let txt = '';
					if (num == 1) {
						txt = '审核中';
					} else if (num == 2) {
						txt = '报名成功';
					} else if (num == 3) {
						txt = '报名失败';
					} else {
						txt = '未报名';
					}
					return txt;
				};
			}
		},
		created() {
			this.init();
		}
	};
</script>

<style lang="less" scoped>
	@import '~@/common/css/sidepage.less';
	@import '~@/common/css/customlist.less';

	.page {
		background-color: #fff;
	}

	.page-content {
		margin-top: 39px;
	}

	.records {
		color: #8f8f94;
		background: #ffffff;
		padding: 10px 12px;
		width: 100%;
		vertical-align: middle;
		border-bottom: 0.5px solid #ddd;
		position: fixed;
		top: var(--window-top);
		z-index: 1024;
		border-bottom: 0.5px solid #ddd;
		height: 40px;
		width: 100%;
		box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.1);
		// background: #f1f1f1;
	}

	.pageBox {
		// margin-top: 34px;
		padding: 5px 15px;
		line-height: 24px;
		border-bottom: 5px solid #f5f5f5;
	}

	.delbtn {
		position: absolute;
		right: 15px;
		bottom: 7px;
		padding: 3px 10px;
		background: #dd524d;
		color: #fff;
		border-radius: 3px;
	}
</style>