veterans_H5/h5_web/pages/basicTraining/basicTraining - 副本.vue

<template>
	<view>
		<image class="bg" src="../../static/img/basic-training-bg.png" mode="widthFix"></image>
		<view class="tab">
			<view class="tab-bg">
				<!-- <u-tabs ref="btabs" :list="tabs" :is-scroll="false" :current="tabIndex" @change="tabChange"></u-tabs> -->
				<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">
					<view class="training-data-item" v-if="tabIndex === 0">
						<view>已看课程</view>
						<view><text>8</text>个</view>
					</view>
					<view class="training-data-item">
						<view>还需观看</view>
						<view><text>10</text>个</view>
					</view>
				</view>
			</view>
		</view>
		<onlineTraining v-show="tabIndex=='0'" :key="1" :onlineData="onlineData" :rate="rate"></onlineTraining>
		<offlineTraining v-show="tabIndex=='1'" :key="2" :offlineId="offlineId"></offlineTraining>
	</view>
</template>

<script>
	import onlineTraining from './components/online.vue';
	import offlineTraining from './components/offline.vue';
	export default{
		components:{
			onlineTraining,
			offlineTraining
		},
		data(){
			return{
				tabs: [{name: '适应性培训'},{name:'线下培训'}],
				tabIndex: 0 ,// tab下标
				onlineData:[],
				rate:{},
				offlineId:'',
				analysisParams:{
					platform:'1',//平台:1-H5 2-APP 3-小程序 4-PC端
					pages:location.href,//页面路径
					btnName:'',//按钮名称
					btnEvent:'1',//按钮事件: 1-点击 2-长按 3-滑动
					ipAddress:'',//IP地址
					typeName:'适应性培训',//类型名称 例：学校关注度 、适应性考试等
					typeCode:'',//类型编码 例：类型名称首字母缩写(XXGZD)
					categoryName:'',//类别名称 例：XX学校，SS考试
				}
			}
		},
		onLoad(page){
			if(page?.type=='offline'){
				this.tabIndex = 1;
				if(page.id){
					this.offlineId = page.id;
					console.log('this.offlineId',this.offlineId)
				}
			};
			
		
		},
		onShow(){
			this.getAdaptTrainOnline();
			this.getAdaptTrainOnlineRate();			
		},
		mounted() {
			this.postAnalysis();
			
		},
		methods:{
			getip(){
				let that = this;
				uni.request({
				    url:'/apis/cityjson?ie=utf-8',
					method:'GET',
					success: (res) => {
						// console.log('this',this);
				        const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
						let ip = reg.exec(res.data);
						// that.analysisParams.ipAddress = ip[0];
						console.log('analysisParams',this.analysisParams);
					}
				});
			},
			async postAnalysis(){
				await this.getip();
				this.$u.api.postAnalysis(this.analysisParams).then(res=>{
					console.log('res',res);
				});
			},
			// 切换菜单
			tabChange(index) {
				console.log(index)
				this.tabIndex = index;
				
			},
			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)));
				})
			},
			getAdaptTrainOnlineRate(){
				this.$u.api.getAdaptTrainOnlineRate().then(res=>{
					this.rate = res.data;
					console.log('getAdaptTrainOnlineRate',JSON.parse(JSON.stringify(res)));
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f9f9f9;
		padding-bottom: 48rpx;
	}
	.bg {
		width: 100%;
	}
	.tab {
		background-color: #fff;
		border-radius: 0 0 18rpx 18rpx;
		height: 348rpx;
	}
	.tab-bg {
		background: url(../../static/img/basic-training-tab-bg.png) no-repeat center center;
		background-size: 100%;
		height: 198rpx;
	}
	.tab-list {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 40rpx 160rpx 30rpx 160rpx;
	}
	.tab-item {
		font-size: 34rpx;
		color: #000000;
	}
	.active {
		color: #335CEB;
		border-bottom: solid 2px #335CEB;
		padding-bottom: 10rpx;
	}
	.training-data {
		width: calc(100% - 60rpx);
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.11);
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		&-item {
			width: 50%;
			text-align: center;
			padding: 36rpx 0;
			view {
				color: #656565;
				font-size: 28rpx;
				&:last-child {
					font-size: 26rpx;
					text {
						color: #505050;
						font-size: 60rpx;
					}
				}
			}
		}
	}
</style>