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

<template>
	<view>
		<image class="banner" src="../../static/img/banner-skillsTraining.png" mode="scaleToFill"></image>
		<view class="statistics u-flex u-row-between f-padding f-mb">
			<view class="statistics-item u-flex">我的学习时长：206小时</view>
			<view class="statistics-item u-flex">我的考试通过数：32</view>
		</view>
		<u-card class="iconNav no-head" :border="false" :head-border-bottom="false" :foot-border-top="false" :full="true" border-radius="0">
			<view class="card-head" slot="head">
				<view class="card-head-title">综合服务</view>
			</view>
			<view class="iconNav-body u-flex u-flex-wrap u-row-left" slot="body">
				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')">
					<image class="iconNav-item-img" src="../../static/img/index-service-01.png" mode="aspectFill"></image>
					<view class="iconNav-item-text">网络课程</view>
				</view>
				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
					<image class="iconNav-item-img" src="../../static/img/index-service-02.png" mode="aspectFill"></image>
					<view class="iconNav-item-text">线下实训</view>
				</view>
				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
					<image class="iconNav-item-img" src="../../static/img/index-service-03.png" mode="aspectFill"></image>
					<view class="iconNav-item-text">参加考试</view>
				</view>
				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
					<image class="iconNav-item-img" src="../../static/img/index-service-04.png" mode="aspectFill"></image>
					<view class="iconNav-item-text">我的班级</view>
				</view>
			</view>
		</u-card>
		<u-search class="search f-padding" placeholder="搜索课程" v-model="keyword" @focus="selectShow = true" @search="search" @custom="search" ></u-search>
		<u-select v-model="selectShow"  mode="mutil-column-auto" :list="selectList" @confirm="selectConfirm"></u-select>
		
		<u-card class="skill-list"
		:body-style="{'padding-bottom':'0'}"
		:border="false" 
		:foot-border-top="false" 
		:full="true" border-radius="0">
			<view class="card-head" slot="head">
				<view class="card-head-title">技能包</view>
			</view>
			<view class="news-list-body u-flex u-row-between u-flex-wrap" slot="body">
				<u-nodata notice="暂无新闻" v-if="skillList.length==0"></u-nodata>
				<view v-for="(item,index) in skillList" 
				@click="skillClick(item)"
				:key="item.artId" 
				class="u-body-item">
					<image :src="item.img" mode="scaleToFill"></image>
					<view class="text">
						<view class="name">{{item.name}}</view>
						<view class="school">{{item.school}}</view>
					</view>
				</view>
			</view>
		</u-card>
		
		<u-card class="school-list"
		:body-style="{'margin-bottom':'0','padding-bottom':'0'}"
		:border="false" 
		:foot-border-top="false" 
		:full="true" border-radius="0">
			<view class="card-head u-flex u-row-between" slot="head">
				<view class="card-head-title">合作院校</view>
				<view class="right" @click="openPage('pages/schools/schools')">
					查看更多
					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
				</view>
			</view>
			<view class="school-list-body" slot="body">
				<u-nodata notice="暂无合作院校" v-if="schoolList.length==0"></u-nodata>
				<view class="school-logo-wrap u-flex u-row-between">
					<image 
					@click="schoolToggle(index)"
					:class="{active:schoolActive==index}"
					class="school-logo" 
					v-for="(item,index) in schoolList" :key="item.id" 
					:src="item.schoolLogoUrl" 
					mode="aspectFit"></image>
				</view>
				<view class="name u-flex u-row-between" @click="schoolClick(schoolList[schoolActive])">
					<view class="text">{{schoolList[schoolActive].schoolName}}</view>
					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
				</view>
				<view class="content">
					{{schoolList[schoolActive].detatil}}
				</view>
			</view>
		</u-card>
		<u-card class="support"
		:body-style="{'margin-bottom':'24rpx'}"
		:border="false" 
		:foot-border-top="false" 
		:full="true" border-radius="0">
			<view class="card-head u-flex u-row-between" slot="head">
				<view class="card-head-title">政策支持</view>
			</view>
			<view class="support-body" slot="body">
				<u-nodata notice="暂无新闻" v-if="schoolList.length==0"></u-nodata>
				<view class="big-news" @click="$u.route('/pages/newsDetails/newsDetails',{artId:bigNews.artId})">
					<image :src="bigNews.artImage" mode="aspectFill"></image>
					<view class="text">{{bigNews.artTitle}}</view>
				</view>
				<view v-for="(item,index) in newsList"
				@click="$u.route('/pages/newsDetails/newsDetails',{artId:item.artId})"
				:key="item.artId" 
				class="u-body-item u-flex u-border-bottom u-col-between u-row-between">
					<view class="news-text">
						<view class="u-body-item-title u-line-2">{{item.artTitle}}</view>
						<view class="foot u-flex">
							<view class="">{{item.artCategoryName}}</view>
							<view class="time">{{$u.timeFormat(item.createTime.replace(/-/g, '/'), 'mm月dd日 hh时MM分')}}</view>
						</view>
					</view>
					<image :src="item.artImage" mode="aspectFill"></image>
				</view>
			</view>
		</u-card>
	</view>
</template>
<script>
	import mock from "../../static/js/mock.js";
	export default{
		data(){
			return{
				schoolActive:0,
				keyword:'',
				selectShow:false,
				newsList:[],
				bigNews:[],
				skillList:mock.skillList,
				schoolList:[],
				selectList:[
					{
						value: 1,
						label: '贵州交通职业技术学院',
						children: [
							{
								value: 2,
								label: '技术1'
							},
							{
								value: 5,
								label: '技术2'
							}
						]
					},
					{
						value: 8,
						label: '贵州医学院',
						children: [
							{
								value: 9,
								label: '技术3'
							}
						]
					}
				],
			}
		},
		onLoad(){
			this.getNewsList();
			this.getSchoolList();
		},
		onShow(){
			
		},
		methods:{
			getSchoolList(){
				this.$u.api.getSchoolList({pageNum:1,pageSize:5}).then(res=>{
					if(res.code ==200){
						this.schoolList = res.rows
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			},
			openPage(path,msg) {
			  this.$u.route({
			    url: path,
				params:{
					msg:msg
				}
			  })
			},
			getNewsList(){
				let params ={
					artCategoryId:2,
					pageNum:1,
					pageSize:10
				}
				this.$u.api.indexApi.getIndexNewsListApi(params)
				.then(res=>{
					this.newsList = res.rows;
					this.bigNews = this.newsList[0];
					this.newsList.shift();
					console.log('this.newsList', this.newsList)
					// console.log('newsList',JSON.parse(JSON.stringify(res.rows)));
				})
			},
			selectConfirm(e){
				console.log('selectConfirm',e);
				this.keyword = e[0].label +' ' + e[1].label
			},
			search(e){
				this.$u.route({
					url: 'pages/index/index',
					type:'switchTab'
				});
				console.log('selectConfirm',e)
			},
			schoolToggle(index){
				this.schoolActive = index;
				console.log('schoolToggle index',index)
			},
			skillClick(item){
				console.log('item',item);
				let 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:item.name,//类别名称 例：XX学校，SS考试
				};
				// 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);
				// 		analysisParams.ipAddress = ip[0];
				// 		console.log('analysisParams',analysisParams);
				// 	}
				// });
				this.$u.api.postAnalysis(analysisParams).then(res=>{
					console.log('res',res);
				});
				this.$u.route({
					url: '/pages/inbuild/inbuild',
					params: {
						msg: '',
						artId:item.artId
					}
				});
			},
			schoolClick(item){
				console.log('schoolClick item',item);
				let 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:item.schoolName,//类别名称 例：XX学校，SS考试
				};
				this.$u.api.postAnalysis(analysisParams).then(res=>{
					console.log('res',res);
					if(res.code == 200){
						location.href = item.schoolUrl
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				});
			}
			
		}
	}
</script>

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