veterans_H5/h5_web/pages/basicTraining/myBasicTraining/myBasicTraining.vue

<template>
	<view>
		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
		<image class="bg" src="../../../static/img/banner-myBasicTraining.png" mode="widthFix"></image>
		<view class="title u-flex u-row-between">
			<view class="left">
				学习进度
			</view>
			<!-- <view class="right">
				查看全部
			</view> -->
		</view>
		<view class="course">
			<view class="course-item u-flex u-row-between" 
			v-for="(item,index) in onlineData"
			 :key="index"
			:class="{ 'unstudy':item.flag == 0, 'studying':item.flag == 1, 'studyed':item.flag == 2 }"
			@click="courseClick(item)">
				<view class="left">
					<view class="course-item-title">
						第{{index + 1}}节
					</view>
					<view class="course-item-name">
						{{item.adaptName}}
					</view>
				</view>
				<view class="right">
					<u-icon v-if="item.flag == 2" name="checkbox-mark" color="#00a046" size="28" ></u-icon>
					<u-icon v-else name="arrow-right" color="#2683e5" size="28" ></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				onlineData:[],
			}
		},
		onLoad(){
			
		},
		onShow(){
			this.getAdaptTrainOnline();
		},
		methods:{
			getAdaptTrainOnline(){
				this.$u.api.getAdaptTrainOnline().then(res=>{
					if(res.code == 200){
						this.onlineData = res.data;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					
					console.log('getAdaptTrainOnline',JSON.parse(JSON.stringify(res)));
				})
			},
			courseClick(item){
				this.$u.route({
					url: 'pages/basicTraining/basicTrainingDetails/basicTrainingDetails',
					params: {
						id: item.id
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{padding-bottom: 48rpx;background-color: #eee;}
	.bg{width: 100%;}
	.title {padding: 24rpx;;background-color: #fff;border-bottom: 1px solid #ddd;}
	.title .left{font-size: 36rpx;}
	.course{background-color: #fff;}
	.course-item{margin-bottom: 24rpx;padding: 20rpx 24rpx;}
	.course-item + .course-item{border-top: 1px solid #ddd;}
	.course-item.studyed .left{color: #c5c5c5;}
	// @import  './myBasicTraining.scss'
</style>