veterans_H5/h5_web/pages/basicTraining/components/online.vue

<template>
	<view class="online">
		<view class="statistics u-flex u-row-between">
			<view class="statistics-item">
				<view class="up">已看课程</view>
				<view class="down"><text>{{rate.play}}</text> 节</view>
			</view>
			<view class="statistics-item">
				<view class="up">还需观看</view>
				<view class="down"><text>{{rate.playNot}}</text> 节</view>
			</view>
		</view>
		<view class="content">
			<!-- <u-tabs ref="otabs" :list="onlineTabs" :is-scroll="false" :current="onlineTabIndex" @change="onlineTabChange"></u-tabs> -->
			<view class="instructions" v-if="onlineTabIndex==0">
				<view class="text">
					培训内容包括单不限于思想政治教育，法律法规政策介绍，就业创业指导，心里引导，求职技巧指导，服务项目指引等。
				</view>
				<!-- <image src="../../../static/img/instructions-01.png" mode=""></image> -->
				<!-- <image src="../../../static/img/instructions-02.png" mode=""></image> -->
				<view class="catalog f-padding">
					<view 
					class="catalog-item u-flex" 
					:class="{ 'unstudy':item.flag == 0, 'studying':item.flag == 1, 'studyed':item.flag == 2 }"
					v-for="(item,index) in onlineData" :key="item.id+index" 
					@click="catalogItemClick(item)">
						<view class="number">{{index + 1}}.</view>
						<view class="name">{{item.adaptName}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="catalog f-padding" v-if="onlineTabIndex==1">
				<view 
				class="catalog-item u-flex" 
				:class="{ 'unstudy':item.flag == 0, 'studying':item.flag == 1, 'studyed':item.flag == 2 }"
				v-for="(item,index) in onlineData" :key="item.id+index" 
				@click="catalogItemClick(item)">
					<view class="number">{{index + 1}}.</view>
					<view class="name">{{item.adaptName}}</view>
				</view>
			</view> -->
		</view>
		<u-bottom>
			<view slot="content" class="status-btn fix-bottom">
				学习状态：{{rate.status|verifyStatusFilter}}
			</view>
		</u-bottom>
	</view>
</template>

<script>
	export default{
		name: 'onlineTraining',
		props:{
			onlineData: {
				type: Array,
				default: function() {
					return []
				}
			},
			rate:{
				type:Object,
				default: function() {
					return new Object()
				}
			}
		},
		data(){
			return{
				onlineTabs: [{name: '课程说明'},{name:'课程视频'}],
				onlineTabIndex:0,
				catalogList:[]
			}
		},
		onLoad(){
			
		},
		onShow(){
			
		},
		filters: {
		  verifyStatusFilter(value) {
			if (value === 0) {
			  return '未全部完成';
			}else if(value === 1){
				return '已全部完成';
			}else {
			  return '未知';
			}
		  },
		},
		methods:{
			onlineTabChange(index){
				this.onlineTabIndex = index;
			},
			catalogItemClick(item){
				this.$u.route({
					url: 'pages/basicTraining/basicTrainingDetails/basicTrainingDetails',
					params: {
						id: item.id
					}
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.online{margin: 24rpx;}
	.statistics{text-align: center;background-color: #fff;border-radius: 8rpx;padding: 24rpx;margin-bottom: 24rpx;}
	.statistics-item{width: 50%;}
	.statistics-item .up{font-size: 30rpx;color: #444;}
	.statistics-item .down{color: #969696;}
	.statistics-item .down text{font-weight: bold;margin-right: 5rpx;}
	.catalog{background-color: #fff;font-size: 36rpx;padding-bottom: 24rpx;}
	.catalog-item{margin-bottom: 24rpx;}
	.catalog-item.unstudy{}
	.catalog-item.studying{color: #e87c7c;}
	.catalog-item.studyed{color: #c5c5c5;}
	.catalog-item .number{margin-right: 15rpx;}
	.content{background-color: #fff;}
	.instructions .text{padding: 24rpx;color: #969696;}
	.instructions image{width: 100%;}
	.status-btn{background-color: #4433d9;color: #fff;margin: 0 24rpx;padding: 24rpx;border-radius: 8rpx;}
	// @import  './online.scss'
</style>