NurseStationPersonAppletUl/pages/Orderlearning/Orderlearning.vue

<template>
	<view class="app">
		<view class="" style="background-color: #F4F5F7;height: 17rpx;width:100%"></view>
		<!-- 		<u-tabs :list="tablist" :is-scroll="false" :current="tabcurrent" @change="tabchange" font-size='34'
			bar-height='7' bar-width='43' inactive-color='#A09F9F' active-color='#4271B9'>
		</u-tabs> -->
		<view class="content" v-if="tabcurrent==0">
		</view>
		<view class="directory" v-if="tabcurrent==1">
			<view class="imagetext" v-if="imgtextlist.length>0">
				<view class="topheader">
					图文学习
				</view>
				<view class="items">
					<view class="item" v-for="(item,index) in imgtextlist" :key='item.trainingItemId'
						@tap='goImglearning(item)'>
						<image :src="baseurl+item.trainingItemCoverUrl" mode=""></image>
						<view class="title">
							{{item.trainingItemTitle}}
						</view>
						<view class="text">
							{{item.trainingItemDetails?item.trainingItemDetails:''}}
						</view>
					</view>
				</view>
			</view>
			<view class="video" v-if="videolist.length>0">
				<view class="topheader">
					视频学习
				</view>
				<view class="items">
					<view class="item" v-for="(item,index) in videolist" :key='item.trainingItemId'
						@tap='goVideolearningdetails(item)'>
						<image :src="baseurl+item.trainingItemCoverUrl" mode=""></image>
						<view class="title">
							{{item.trainingItemTitle}}
						</view>
						<view class="text">
							{{item.trainingItemDetails?item.trainingItemDetails:''}}
						</view>
					</view>
				</view>
			</view>
			<view v-if='videolist.length==0&&imgtextlist.length==0' class="" style="padding-top: 100rpx;">
				<u-empty text="暂无目录" mode="list" icon-size='240' font-size='32'></u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		selectTrainingOrderItemList,
	} from '@/api/Orderlearning/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				baseurl: undefined,
				videolist: [], //视频信息
				imgtextlist: [], //图文信息
				tabcurrent: 1, //tabsindex
				tablist: [{ //tabs的list
					name: '基础课程'
				}, {
					name: '进阶课程'
				}],
				trainingParentId: undefined,
				nurseStationPersonId: undefined,
			};
		},
		onLoad(options) {
			const that = this
			this.baseurl = baseurl
			this.trainingParentId = options.trainingParentId
			this.trainingOrderNo = options.trainingOrderNo
			const value = uni.getStorageSync('nursePersonId');
			if (value) {
				that.nurseStationPersonId = value
				that.info();
			} else {}
		},
		methods: {
			//跳转图文学习
			goImglearning(item) {
				uni.navigateTo({
					url: `/pages/Imglearning/Imglearning?trainingItemId=${item.trainingItemId}`
				})
			},
			//跳转视频学习详情
			goVideolearningdetails(item) {
				uni.navigateTo({
					url: `/pages/Ordervideolearning/Ordervideolearning?trainingItemId=${item.trainingItemId}&trainingOrderNo=${item.trainingOrderNo}`
				})
			},
			info() {
				selectTrainingOrderItemList(this.trainingParentId, this.nurseStationPersonId, this.trainingOrderNo).then(
					res => {
						res.data.forEach(e => {
							if (e.trainingItemType == 'VIDEO_LEARNING') {
								this.videolist.push(e)
							} else if (e.trainingItemType == 'GRAPHIC_LEARNING') {
								this.imgtextlist.push(e)
							}
						})
					})
			},
			//点击tabs
			tabchange(index) {
				this.tabcurrent = index;
			},
		},
	}
</script>

<style lang="scss">
	@import "./Orderlearning.scss";
</style>