medicine_app/pages/miniClass/taskList.vue

<template>
	<view style="min-height: calc(100vh - 120rpx); background-color: #ebf2f5;">
		<z-nav-bar :title="pageName">
			
		</z-nav-bar>
		<view class="pad20">			
			<view v-if="taskList.length > 0 ">
				<view class="submitRecode">
					<view class="newBox">
						<view class="item " v-for="(item, index) in taskList" @click="clickTask(item)">
							<view class="leve1 flex_box">
								<text style="font-size: 30rpx; font-weight: blod; flex: 1;">{{item.title}}</text>
								<template v-if="item.otherInfo.userNoCount > 0">
								<text v-if="item.otherInfo.userNoCount > 0" class="red light_text">{{item.otherInfo.userNoCount}}</text>
								<!-- <text v-if="item.otherInfo.userNoCount > 0 && item.scoreSuccess >= 2" class="blue light_text">{{item.otherInfo.userNoCount}}</text> -->
								<!-- <text v-else class="score" style="padding-left: 10rpx;">{{item.score}}'</text> -->
								</template>
							</view>							
							<view class="leve2 " >
							<view class="jianjie timeText">
								发布时间：{{item.createTime}}
							</view>
								<!-- <view class="item flex_box" style="align-items: center;" v-if="item.otherInfo.setNoGiveScoreNumber > 0">									
									<view class="">
										未评分 <b>{{item.otherInfo.setNoGiveScoreNumber}}</b> 人
									</view>
								</view> -->
							</view>	
						</view>
					</view>
				</view>
			</view>
			<u-divider v-show="status == 2" text="已加载全部"></u-divider>
			<u-divider v-show="status == 3" text="暂无数据"></u-divider>
			<u-divider v-show="status == 1" text="加载中..."></u-divider>
		</view>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';	
  // const taskLIst1 = require('@/data/taskList.json')
	export default {
		data() {
			return {
				classId: undefined,
				pageType: undefined,
				pPage: 0,
				status: 88,
				loadFlag: false,
				pageName: '',
				taskList: [],
				roleCode:'',
				classState:undefined
			}
		},
		onLoad(e) {
			console.log('e',e);
			this.classId = e.classId
			this.pageType = e.type
			this.classState = e.classState
			this.roleCode = e.roleCode
			if (e.type == '0') {
				this.pageName = '作业列表'
			} else if (this.pageName = '医案列表') {

			} else {
				this.pageName = '心得列表'
			}
			// this.getList()
		},
		onPullDownRefresh() {
			this.pPage = 0
			this.taskList = []
			this.getList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.status != 2 && this.status != 3) {
				this.getList()
			}
		},
		onShow() {
			this.pPage = 0
			this.taskList = []
			this.getList()
			// this.getList()
		},		
		methods: {
			// 点击作业或者医案，进入作业提交情况
			clickTask(item){
				// console.log('options',options);
				uni.navigateTo({
					url:`/pages/miniClass/taskDetailForMan?id=${item.id}&roleCode=${this.roleCode}&type=${this.pageType}&classState=${this.classState}`
				})
			},
			getList() {
				this.status = 1;
				if (this.loadFlag) {
					console.log("有未完成的进程");
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				this.loadFlag = true;
				this.pPage++;
				$http.request({
						url: "common/class/getClassTaskList",
						method: "POST",
						data: {
							"limit": 10,
							"page": this.pPage,
							"classId": this.classId,
							"type": this.pageType + '', //类型 0班内任务1医案2心得							    
							"title": ""
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.page.records.length > 0) {
								console.log('数据获取成功', res.page.records);
								var lis = res.page.records
								this.taskList = this.taskList.concat(lis)
								// this.taskList = taskLIst1.page.records // 测试数据
								if (res.page.pages > this.pPage) {
									this.status = 0;
								} else {
									this.status = 2;
								}
							} else {
								this.status = 3; // 暂无数据
							}
							this.loadFlag = false;
							console.log('res', res);
							uni.hideLoading()
						}
					}).catch(e => {
						console.log(e, '数据报错')
						uni.hideLoading()
						this.loadFlag = false;
						uni.showToast({
							title: e.msg,
							icon: 'error'
						})
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/mixin.scss";

	.example-body {
		padding: 10px;
	}

	.pad20 {
		padding: 20rpx;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	.submitRecode {
		// padding: 20rpx;

		.newBox {
			.classmateImg {
				width: 60rpx !important;
				height: 60rpx !important;

				image {
					width: 60rpx !important;
					height: 60rpx;
				}
			}

			.item {
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: none !important;
				// border-bottom: 1px solid #eee;
				border-radius: 20rpx;
				padding: 20rpx ;
				margin-bottom: 20rpx;
				.leve1 {
					align-items: center;
					
					// padding-bottom: 20rpx;					
					// .userName{}
				}

				.leve2 { justify-content: center;
				margin-top: 20rpx;
					color: #999; font-size: 24rpx; border-top: 1px dashed #eee;
					border-top: 1px dashed #eee;
					.timeText{font-size: 26rpx; padding-top: 16rpx;}
					b{font-size: 34rpx; padding: 0 4rpx; font-weight: normal; color: #333; color: red;}
					.item{text-align: center; padding-top: 0; padding-bottom: 0; margin-bottom: 0;}
				}

				.leve3 {
					color: $themeColor;
					text-align: center;
					padding-top: 10rpx;

					.tips {
						width: 100%;
						justify-content: space-between;
						font-size: 26rpx;
						color: #999;
					}

					.date {}

					.btn {
						border: 1px solid $themeColor;
						margin-top: 20rpx;
						display: inline-block;
						width: 50%;
						padding: 6rpx 0;
						border-radius: 10rpx;
					}
				}

				.leve3.no {
					color: #ff9277;
					text-align: center;
				}
			}
		}
	}
	.light_text{padding: 4rpx; color: #fff; font-size: 26rpx; border-radius: 50rpx;}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}

	.close {
		padding: 10px;
	}
</style>