learning-system-mobile/pages/my/myAssesses.vue

<template>
	<!--我的测评-->
	<view style="background-color: #fff;padding: 0 36upx;">
		<page-title :showBack="true">我的测评</page-title>
		<view class="top-content">
			<!-- inputAlign="center" -->
			<view>
				<u-search 
				:clearabled="true"
				@search="findList(true)"
				@clear="findList(true)"
				placeholder="搜索" 
				:height="36"
				v-model="keyword" 
				:showAction="false">
				</u-search>
			</view>
		</view>
		<view class="listbox">
			<view class="assess" v-for="(item,idx) in testList" :key="idx" @click="myAssessdetail(item)">
				<view class="assess-info">
					<view class="assess-info-content">
						<img :src="coverFilter(item.cover)">
						<view class="assess-text">
							<view class="assess-text-title" v-html="$keywordActiveShow(item.title,keyword)"></view>
							<view class="assess-text-text">完成时间：{{item.date}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 60upx;margin: 0 auto;">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>

	</view>

	</view>
</template>

<script>
	// import apiBoeCourse from '@/api/modules/course.js';
	import apiBoeCourse from '@/api/boe/course.js';
	export default {
		data() {
			return {
				keyword: '',
				testList:'',
				total:0,
			    chaturl:'',
			    size:8,
				page:1,
				loadStatus: 'more',
				list:[]
			}
		},
		onPullDownRefresh() {
			this.onReachBottom();
		},
		onReachBottom() {
			this.loadStatus = 'loading'; //more,loading,noMore
			let $this = this;
			setTimeout(function() {
				$this.loadStatus = 'noMore';
			}, 1000);
		},
		onLoad(options) {
			this.findList();
		},
		methods:{
			// 测评跳转详情
			myAssessdetail(item){
				//console.log(item.id)
				//console.log('编码前：'+item.url)
				let encodeUrl=encodeURIComponent(item.url);
				//console.log('编码后：'+encodeUrl)
				uni.navigateTo({
					url: '/pages/my/myAssdetail?reurl='+encodeUrl
				});
			},
			
			findList(flag){
				uni.showLoading({ title: '加载中...' });
				let params={
					keyword:this.keyword,
					pagesize:this.page,
					size:this.size
				}
				 if (this.keyWord) {
					params.keyWord = this.keyWord;
				 }
			  apiBoeCourse.reportList(params).then(rs=>{
			      //console.log(rs.result.reportList);
			    
			    //this.total = rs.result.count
				  //   rs.result.reportList.forEach(item=>{
						// console.log(item.cover,'item.conver');
						
						// // if(item.cover && item.cover.length>0){
						// // 	item.cover=item.cover[0];
						// // 	console.log(item.cover,'item.conver');
						// // }
				  //   })
					this.testList = rs.result.reportList;
					setTimeout(function() {uni.hideLoading();}, 100);
			  })
			},
			coverFilter(url){
				return  url[0].url||url[0]
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .big-box_top{
	//     height: 38px;
	//     display: flex;
	//     padding-top: 15upx;
	// }
	.top-content {
		padding: 28upx 0  10upx 0;
		margin-bottom: 20upx;

	}
.listbox{
	display: flex;
	flex-wrap: wrap;
}
	.assess {
		// flex: 38%;
		// padding: 20upx;
		margin-bottom: 20upx;
		&:nth-child(2n-1){
			margin-right: 28upx;
		}

		.assess-info {
			text-align: center;
			padding-top: 8px;

			.assess-info-content {
				line-height: 40upx;

				img {
					width: 300upx;
					height: 400upx;
				}

				.assess-text {
					max-width: 300upx;
					width: 300upx;
					padding: 0 12upx;
					margin-top: 24upx;
					.assess-text-title{
						// padding: 0 12upx;
						font-size: 28upx;
						font-weight: 600;
						line-height: 20px;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical; 
						display: -webkit-box;-webkit-line-clamp: 3; 
						word-break:break-all;
					}
					.assess-text-text{
						margin-top: 8upx;
						font-size: 24upx;
						color: #666666;
						line-height: 17px;
					}

				}

				// .assess-text :nth-child(2) {
    //                 font-size: 28upx;
				// 	color: #909090;
				// 	margin-top: 50upx;
				// }

			}
		}

	}
</style>