veterans_H5/h5_web/pages/index/index.vue

<template>
	<view class="index">
		<view class="index-header">
			<view class="index-header-container">
				<view class="index-header-left"></view>
				<view class="index-header-right"></view>
				<view class="index-header-top">
					<u-search placeholder="请输入您关键词" v-model="headerTopKeyword" :show-action="false"
						class="header-top-usearch"></u-search>
					<view class="header-top-notice" @tap="openPage('pages/notification/notification')">
						<u-icon name="bell" color="#FFFFFF" size="48"></u-icon>
						<u-badge size="mini" type="error" :count="unreadInfoNum" :absolute="false"
							class="header-top-notice-badge">
						</u-badge>
					</view>
					<view class="header-top-scan">
						<u-icon name="scan" color="#FFFFFF" size="48" class="header-scan-icon"></u-icon>
					</view>
				</view>
				<view class="index-header-banner">
					<u-swiper :list="bannerList" name="bannerUrl" border-radius="16" mode="round" height="440"
						img-mode="scaleToFill" @click="swiperClick" bg-color="transparent"/>
				</view>
			</view>
		</view>

		<!-- 滚动通知 -->
		<view class="notice">
			<u-notice-bar mode="horizontal" type="none" :list="noticeList" bg-color="#fff" duration="1000" />
		</view>

		<!-- 宫格 -->
		<view class="service">
			<view class="service-body u-flex u-flex-wrap u-row-left">
				<view class="service-item" @click="openPage('pages/policyInfo/policyInfo')">
					<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/recruitment/recruitment')">
					<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/cooperativeEnterprise/cooperativeEnterprise')">
					<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/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>
		</view>

		<!-- 新闻动态 -->
		<view class="news">
			<u-card class="news-list" :body-style="{ 'padding-top':0 }" :border="false" :foot-border-top="false"
				:head-border-bottom="false" :full="true" :border-radius="10" margin="0">
				<view class="news-list-head" slot="head">
					<view class="news-list-head-item">
						<view class="card-head-title">新闻动态</view>
						<view @click="openPage('/pages/newsInformation/newsInformation')">更多<u-icon name="arrow-right"
								color="#A3A3A3"></u-icon>
						</view>
					</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="news-list-body-item u-body-item u-flex u-border-bottom u-col-between u-row-between">
						<view class="news-text">
							<view class="news-text-title u-body-item-title u-line-2">{{item.artTitle}}</view>
							<view class="news-text-foot foot u-flex u-flex-wrap">
								<view>{{item.artCategoryName}}</view>
								<view>{{$u.timeFormat(item.createTime.replace(/-/g, '/'), 'mm-dd hh:MM')}}</view>
							</view>
						</view>
						<view>
							<u-image :src="item.artImage" mode="aspectFill" width="160" height="120"
								border-radius="10" />
						</view>
					</view>
				</view>
			</u-card>
		</view>

		<!-- ########################## -- 底部导航栏 -- ################################ -->
		<u-tabbar :list="tabbarConfig.tabbarList" :height="tabbarConfig.height" :mid-button="tabbarConfig.midButton"
			:inactive-color="tabbarConfig.inactiveColor" :active-color="tabbarConfig.activeColor"
			:mid-button-size="tabbarConfig.midButtonSize" />
	</view>
</template>

<script>
	import tabbarconfig from 'tabbarconfig.js';
	export default {
		data() {
			return {
				unreadInfoNum: 0,
				headerTopKeyword: '',
				paginationConfig: {
					pageNo: 1,
					pageSize: 10
				},
				// 轮播图
				bannerList: [],
				// 新闻列表
				newsList: [],
				// 消息通知
				noticeList: [],
				// 自定义tabbar
				tabbarConfig: tabbarconfig
			}
		},
		onLoad() {},
		onShow() {
			this.getUnreadInfoNum();
			this.getBannerList();
			this.getNewsList();
			this.getNewestInfo();
		},
		methods: {
			/**
			 * 打开新页面
			 * @param {String} path 跳转路径
			 * */
			openPage(path, msg) {
				let tempRoute = {
					url: path
				};
				if (msg) {
					tempRoute.params = {
						msg: msg
					};
				}
				this.$u.route(tempRoute);
			},
			/**
			 * 获取未读消息条数
			 */
			getUnreadInfoNum() {
				this.$u.api.indexApi.getUnreadInfoNumApi().then(res => {
					if (res?.code === 200) {
						this.unreadInfoNum = res.data;
					}
				})
			},
			/**
			 * 获取最新三条信息
			 */
			getNewestInfo() {
				this.$u.api.indexApi.getNewestInfoApi().then(res => {
					if (res?.code === 200) {
						this.noticeList = res.data.map(item => {
							return item.name
						})
					}
				})
			},
			/**
			 * 获取新闻列表
			 */
			getNewsList() {
				let params = {
					artCategoryId: 2,
					pageNum: 1,
					pageSize: 3
				}
				this.$u.api.indexApi.getIndexNewsListApi(params).then(res => {
					if (res?.code == 200) {
						this.newsList = res.rows;
					}
				})
			},
			/**
			 * 获取轮播广告
			 */
			getBannerList() {
				this.$u.api.indexApi.indexBannerListApi().then(res => {
					if (res?.code === 200) {
						this.bannerList = res.data.map(item => {
							return {
								...item,
								image: item.bannerUrl,
								title: item.name
							}
						});
					} else {

					}
				})
			},
			/**
			 * 轮播图点击
			 * @param {Object} index
			 */
			swiperClick(index) {
				if (this.bannerList[index].jumpUrl) {
					let url = this.bannerList[index].jumpUrl.split('#')[1];
					this.$u.route({
						url: url,
					});
				} else {
					this.$u.route({
						url: 'pages/bannerDetails/bannerDetails',
						params: {
							id: this.bannerList[index].id
						}
					})
				}
			}
		}
	}
</script>

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