veterans_H5/h5_web/pages/basicTraining/basicTraining.vue

<template>
	<view class="training">
		<image class="bg" src="../../static/img/basic-training-bg.png" mode="widthFix"></image>
		<view class="tab">
			<view class="tab-bg">
				<view class="tab-list">
					<view class="tab-item" v-for="(item, index) in tabs" :key="index" :class="{'active': tabIndex === index}" @click="tabChange(index)">{{ item.name }}</view>
				</view>
				
				<view class="training-data" v-if="tabIndex === 0">
					<view class="training-data-item">
						<view>已看课程</view>
						<view><text>{{ online.play }}</text>个</view>
					</view>
					<view class="training-data-item">
						<view>还需观看</view>
						<view><text style="color: #FF7E00;">{{ online.playNot }}</text>个</view>
					</view>
				</view>
				<view class="training-offline" v-if="tabIndex === 1">
					<view>未参加线下培训</view>
					<view>（注：必须参加线下培训才能通过适应性培训）</view>
				</view>
			</view>
		</view>
		
		<!-- 适应性培训 -->
		<view class="training-adaptability mt26" v-if="tabIndex === 0">
			<view class="training-adaptability-title">线上课程</view>
		</view>
		<view class="training-adaptability" v-if="tabIndex === 0">
			<view class="training-adaptability-list">
				<view class="training-adaptability-list-item"
				v-for="(item, index) in list"
				:key="index"
				@click="recordBrowseTotal(item)"
				>
					<view class="left">
						<u-image :src="item.titleImg" width="198" height="144"></u-image>
					</view>
					<view class="right">
						<view>{{ item.adaptName }}</view>
						<view>共{{ item.amount }}节课，已学完{{ item.finishCount }}节课，学习进度{{ item.finishPercent ? item.finishPercent : 0 }}%</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 线下培训 -->
		<view class="training-offline1" v-if="tabIndex === 1">
			<view class="training-offline1-title">
				线下培训
			</view>
			<view class="training-offline1-list">
				<view class="training-offline1-list-item" v-for="(item, index) in offLineList" :key="index" @click="recordBrowseTotal(item, 1)">
					<view class="bottom">
						<view>{{ item.adaptName }}</view>
					</view>
					<view class="top">
						<view>{{ item.adaptAddress }}</view>
						<view>{{ item.createTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="study-status" v-if="tabIndex === 0">学习状态：{{ online.status === 0 ? '未完成' : '已完成' }}</view>
		<view class="study-status" v-if="tabIndex === 1">学习状态：{{ offlineStatus === 0 ? '未完成' : '已完成'}}</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabs: [
					{ name: '适应性培训' },
					{ name:'线下培训' },
				],
				tabIndex: 0,
				list: [],
				online: {
					status: 0,
					play: 0,
					playNot: 0
				},
				offlineStatus: 0,
				offLineList: []
			}
		},
		onShow() {
			this.getOnlineList(1, 200000);
			this.getOnlineStatus();
			this.getOfflineList()
		},
		methods:{
			// 切换菜单
			tabChange(index) {
				this.tabIndex = index;
			},
			/**
			 * 获取在线课程
			 * @param {Object} pageNum
			 * @param {Object} pageSize
			 */
			getOnlineList(pageNum, pageSize) {
				this.$u.api.training.getOnlineListApi({pageNum, pageSize}).then(res => {
					if (res.code === 200) {
						this.list = res.rows
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			/**
			 * 获取在线课程学习状态
			 */
			getOnlineStatus() {
				this.$u.api.training.getOnlineStatusApi().then(res => {
					if (res.code === 200) {
						this.online.status = res.data.status
						this.online.play = res.data.play
						this.online.playNot = res.data.playNot
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			getOfflineList() {
				this.$u.api.training.getOfflineListApi({
					pageNum: 1,
					paheSize: 3000
				}).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.offLineList = res.rows
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			jumpPage(url, params) {
				this.$u.route({
					url: url,
					params: params
				})
			},
			/**
			 * 适应性培训关注度统计
			 * @param {Object} item
			 */
			recordBrowseTotal(item, type) {
				const query = {
					platform: '1', // 平台:1-H5 2-APP 3-小程序 4-PC端
					pages: location.href,//页面路径
					btnName: '查看课程详情',//按钮名称
					btnEvent: '1',//按钮事件: 1-点击 2-长按 3-滑动
					ipAddress: '',//IP地址
					typeName: '适应性培训关注度',//类型名称 例：学校关注度 、适应性考试等
					typeCode: 'SYXPXGZD',// 类型编码 例：类型名称首字母缩写(XXGZD)
					categoryName: item.adaptName,//类别名称 例：XX学校，SS考试
				}
				this.$u.api.postAnalysis(query).then(res => {
					if (type === 1) {
						this.jumpPage('pages/basicTraining/offlineTrainingDetails/offlineTrainingDetails', { id: item.id })
					} else {
						this.jumpPage('/pages/basicTraining/onlineTrainingDetails/onlineTrainingDetails', { id: item.id })
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './basicTraining.scss';
</style>