jp-zeroWorkerStation/pages/packages/skillTraining/skillTraining.vue

<template>
	<view>
		<u-navbar back-text="技能培训" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>

		<view class="content"   v-for="(item,i) in list" 
		 
		 :key="i" @click="gotoUrl('pages/packages/skillTraining/trainingRegistration?id='+item.id)" >
			<!-- 图片 -->
			<view class="picture">
				
				<img  
				:src=" item.file?item.file: errorFile" alt="">
			</view>
			<u-line color="#e6e6e6" />
			<!-- 标题 -->
			<view class="title">
				{{item.name}}
			</view>
			<!-- 报名状态 -->
			<view class="state" :class="{
				state2:item.status!=1
			}">
				{{item.status==1?'开放报名':'结束报名'}}
			</view>
		</view>
		
		<u-divider v-if="list.length==recordsTotal"
		  :isnone="list.length==0" nonetext="没有找到相关内容" 
		 bg-color="#F0F0F0" margin-top="20" border-color="#CFD2D5">已经到底了</u-divider>
		
	</view>
</template>

<script>
	var file=require("@/assets/img/traniningPicture.png")
	import * as API from '@/apis/pagejs/packages.js'
	export default {
		data() {
			return {
				errorFile:file,
				list: [],
				recordsTotal: 0,
				listFrom: {
					pageIndex: 1,
					pageSize: 20,

				}
			}
		},
		onReachBottom() {

			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		onLoad(op) {

			this.getList();
		},
		methods: {
			myLoadmore() {
				this.listFrom.pageIndex += 1;
				this.getList();
			},
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.trainingList({

					pageSize: this.listFrom.pageSize,
					pageIndex: this.listFrom.pageIndex,
				}).then((res) => {
					uni.hideLoading();

					if (this.listFrom.pageIndex == 1) {
						this.list = res.data.data;
					} else {
						this.list = [
							...this.list,
							...res.data.data
						];
					}

					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>

<style lang="scss" scoped>
	.content {
		margin: 24rpx 32rpx 0;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 24rpx;

		.picture {
			width: 100%;
			height: 240rpx;
			margin-bottom: 24rpx;

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

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			margin-top: 24rpx;
		}

		// 报名状态
		.state {
			color: rgba(0, 185, 98, 1);
			font-size: 24rpx;
			margin-top: 60rpx;
		}

		.state2 {
			color: rgba(153, 153, 153, 1);
		}
	}
</style>