factory_mp_old/pages/exam/exam.vue

<template>
	<view class="wrap">
		<uni-nav-bar @clickLeft="goBack()" height="110upx" leftWidth="200upx" leftText="考试列表" leftIcon="left" border
			backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="my-top-search-nav">
			<!-- 主体 导航栏 -->
			<view class="tabbar-title">
				<view :class="{'text-title':true, 'active':type==='attend'}" @click="changeList('attend')">可参与</view>
				<view :class="{'text-title':true, 'active':type==='my'}" @click="changeList('my')">我的</view>
			</view>
		</view> 
		<view class="content" v-if="examList.length>0">
			<view class="item-wrap" v-for="(item,index) in examList" :key="item.id">
				<view class="duty-item">
					<view class="top-info">
						<view class="info-title">{{item.name}}-{{item.paper_name}}</view>
					</view>
					<view class="center-info">
						<view class="info-details">试卷总分：{{item.paper_total_score}} </view>
						<view class="info-details">合格分数：{{item.paper_pass_score}} </view>
						<view class="info-details">开启时间：{{item.open_time}} </view>
						<view class="info-details">结束时间：{{item.close_time}} </view>
						<view class="info-details">考试机会：{{item.chance}} </view>
					</view>
					<view class="bottom-btns"  v-if="type === 'attend'">
						<u-button v-if="tabIndex==0" class="bottom-btn" type="primary" @click="attendExam(item)">我要参加</u-button>
					</view>
				</view>
			</view>
			<view v-if="isBottom" class="bottomText"> 已经到底了</view>
		</view>
		<view class="content" v-else>
			<view style="text-align: center;"> 暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ticket',
		data() {
			return {
				params: {
					can_attend:true,
					is_my:true,
					page:1
				},
				tabBars:[
					{name:'可参与',
					id:'attend'},
					{name:'我的',
					id:'my'},
				],
				type:'attend',
				examList: [],
				tabIndex:0,
				isLoading: false,
				refreshText: "",
				loadingText: '加载中...',
				isBottom:false,
			}
		},
		// onLoad(params) {
		// 	setTimeout(()=>{
		// 	  this.getExamList('attend');
		// 	},350)
		// },
		//上拉加载
		onReachBottom() {
			if (this.isBottom) {} else {
				this.params.page += 1;
				this.getexamList(this.type);
			}
		},
		onShow() {
			this.examList = [];
			this.getExamList();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.params.page = 1;
			this.examList = [];
			this.getExamList();
		},
		methods: {
			getExamList(type) {
				let that = this;
				if(type=='attend'){
					that.params.can_attend = true;
				}else{
					that.params.can_attend = false;
				}
				that.isLoading = true;
				
				that.$u.api.getExamList(that.query).then(res=>{
					console.log(res)
					if(res.results&&res.results.length>0){
						that.isBottom = false;
						console.log('有数据')
						that.examList = that.examList.concat(res.results)
					}
				}).catch(()=>{
					console.log('没有数据')
					that.isBottom = true;
				})
			},
			changeList(index) {
				// debugger;
				this.type = index;
				this.examList = [];
				this.params.page = 1;
				if (index === 'attend') {
					this.params.can_attend = true;
				} else if (index === 'my') {
					this.params.can_attend = false;
				} 
				this.getExamList(index);
			
			},
			//参加考试
			attendExam(val){
				console.log('currentExam',val)
				uni.setStorageSync('currentExam', val)
				uni.navigateTo({
					url:"/pages/exam/preview"
				})
			},
			
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchHandle() {
				this.params.page = 1;
				this.examList = [];
				this.getExamList()
			},
			resetSearch() {
				this.params.page = 1;
				this.params.search = "";
				this.examList = [];
				this.getExamList();
			},
			
		}
	}
</script>

<style scoped>
	.empty-view {
		height: 120upx;
	}

>>>.uni-navbar__header,
	>>>.uni-status-bar{
		background-image: linear-gradient(270deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}
	page{
		height: 100%;
	}
	.wrap{
		height: 100%;
		    background-color: #f3fbff;
	}
	.content {
		padding: 14upx;
		padding-top: 120upx;
	}

	.item-wrap {
		margin-bottom: 14upx;
	}

	.duty-item {
		width: 720upx;
		background-color: #ffffff;
		border-radius: 10upx;
		margin: 0 auto;
		padding: 24upx 21upx;
		box-sizing: border-box;
	}

	.info-title {
		font-family: PingFang-SC-Medium;
		font-size: 30upx;
		line-height: 72upx;
		color: #3d3d3d;
		flex: 1;
		border-bottom: 1upx solid #efefef;
		margin-bottom: 10upx;
	}


	.info-details {
		font-size: 28upx;
		line-height: 50upx;
		color: #5b5b5b;
	}

	.bottom-btns {
		text-align: center;
		font-family: PingFang-SC-Medium;
		font-size: 28upx;
		line-height: 83upx;
		display: flex;
	}

	.bottom-btn {
		flex: 1;
		width: 50%;
		margin: 20upx 25vw 0 25vw; 
		border-right: 1upx solid #eeeeee;
	}
	.bottomText{
		 font-size: 20upx;
		 text-align: center;
		 height: 50upx;
	}
</style>