veterans_H5/h5_web/pages/index/index.vue

<template>
	<view class="content">
		<view class="message" @click="openPage('pages/inbuild/inbuild','消息中心')" >
			<u-icon name="chat" color="#000000" size="48"></u-icon>
			<u-badge size="mini" type="success" count="7"></u-badge>
		</view>
		<u-swiper
			:list="bannerList"
			name="bannerUrl"
			border-radius="0"
			mode="none"
			height="427"
			img-mode="scaleToFill"
			@click="swiperClick"
		></u-swiper>
		<!-- <view class="notice u-flex u-p-l-35 u-p-r-40">
			<u-image width="113rpx" height="83rpx" src="/static/img/tip.png"></u-image>
			<view class="notice-wrap u-flex-1">
				<u-notice-bar
				@click="noticeClick"
				mode="vertical" 
				:list="noticeList" 
				:more-icon="true" 
				:volume-icon="false" 
				bg-color="#fff" 
				color="#373737"></u-notice-bar>
			</view>
		</view> -->
		<u-card class="service" :border="false" :foot-border-top="false" :full="true" border-radius="0">
			<view class="service-head" slot="head">
				<view class="card-head-title">综合服务</view>
			</view>
			<view class="service-body u-flex u-flex-wrap u-row-left" slot="body">
				<view class="service-item" @click="openPage('pages/policyNews/policyNews')">
					<image class="service-item-img" src="../../static/img/index-service-01.png" mode="aspectFill"></image>
					<view class="service-item-text">政策资讯</view>
				</view>
				<view class="service-item" @click="openPage('pages/inbuild/inbuild','招聘就业')" >
					<image class="service-item-img" src="../../static/img/index-service-02.png" mode="aspectFill"></image>
					<view class="service-item-text">招聘就业</view>
				</view>
				<view class="service-item" @click="openPage('pages/inbuild/inbuild','合作企业')" >
					<image class="service-item-img" src="../../static/img/index-service-03.png" mode="aspectFill"></image>
					<view class="service-item-text">合作企业</view>
				</view>
				<view class="service-item" @click="openPage('pages/schools/schools')" >
					<image class="service-item-img" src="../../static/img/index-service-04.png" mode="aspectFill"></image>
					<view class="service-item-text">合作院校</view>
				</view>
				<view class="service-item" @click="openPage('pages/skillsTraining/skillsTraining')" >
					<image class="service-item-img" src="../../static/img/index-service-05.png" mode="aspectFill"></image>
					<view class="service-item-text">技能培训</view>
				</view>
				<view class="service-item" @click="openPage('pages/basicTraining/basicTraining')" >
					<image class="service-item-img" src="../../static/img/index-service-06.png" mode="aspectFill"></image>
					<view class="service-item-text">适应性培训</view>
				</view>
				<view class="service-item" @click="openPage('pages/upgrade/upgrade')" >
					<image class="service-item-img" src="../../static/img/index-service-07.png" mode="aspectFill"></image>
					<view class="service-item-text">学历提升</view>
				</view>
				<view class="service-item" @click="openPage('pages/inbuild/inbuild','创业指引')" >
					<image class="service-item-img" src="../../static/img/index-service-08.png" mode="aspectFill"></image>
					<view class="service-item-text">创业指导</view>
				</view>
			</view>
		</u-card>
		<u-card class="news-list" 
		:body-style="{'padding-top':0}"
		:border="false" 
		:foot-border-top="false" 
		:full="true" border-radius="0">
			<view class="news-list-head" slot="head">
				<view class="card-head-title">新闻动态</view>
			</view>
			<view class="news-list-body" slot="body">
				<u-nodata notice="暂无新闻" v-if="newsList.length==0"></u-nodata>
				<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>
	export default {
		data() {
			return {
				paginationConfig:{
					  pageNo: 1,
					  pageSize: 10
				},
				bannerList: [],
				newsList:[],
				noticeList:['贵州轮胎股份有限公司对您感兴趣，为您提供了职位。','您有一个面试邀请'],
			}
		},
		onLoad() {
			// console.log(this.$u.config.v);
			
		},
		onShow() {
			this.getBannerList();
			this.getNewsList();
		},
		methods: {
			/**
				 * 打开新页面
				 * @param {String} path 跳转路径
				 * */
			openPage(path,msg) {
			  this.$u.route({
			    url: path,
				params:{
					msg:msg
				}
			  })
			},
			getNewsList(){
				let params ={
					// artCategoryId:2,
					pageNum:1,
					pageSize:10
				}
				this.$u.api.getIndexNewsList(params)
				.then(res=>{
					if(res.code==200){
						this.newsList = res.rows;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					
					// console.log('newsList',JSON.parse(JSON.stringify(res.rows)));
				})
			},
			getBannerList(){
				this.$u.api.getIndexBannerList()
				.then(res=>{
					this.bannerList = res.data;
					// console.log('bannerList',JSON.parse(JSON.stringify(res)));
				})
			},
			// 轮播图点击
			swiperClick (index) {
				// console.log('swiperClick',index);
				// console.log('bannerList',this.bannerList);
				if(this.bannerList[index].jumpUrl){
					// console.log(this.bannerList[index].jumpUrl);
					let url = this.bannerList[index].jumpUrl.split('#')[1];
					// console.log('url',url);
					this.$u.route({
						url: url,
					});
				}else{
					this.$u.route({
						url: 'pages/bannerDetails/bannerDetails',
						params: {
						  id: this.bannerList[index].id
						}
					})
				}
			},
			noticeClick(e){
				console.log('e',e)
				this.openPage('pages/inbuild/inbuild','我的消息')
			}

		}
	}
</script>

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