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" @click="openPage('pages/notification/notification')" >
            <u-icon name="bell" color="#FFFFFF" size="48"></u-icon>
            <u-badge size="mini" type="error" count="7" :absolute="false" class="header-top-notice-badge"></u-badge>
          </view>
          <view class="header-top-scan">
            <u-icon name="scan" color="#FFFFFF" size="48"></u-icon>
          </view>
        </view>
        <view class="index-header-banner">
          <u-swiper
          	:list="bannerList"
          	name="bannerUrl"
          	border-radius="0"
          	mode="round"
          	height="440"
          	img-mode="scaleToFill"
          	@click="swiperClick"
          ></u-swiper>
        </view>
      </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/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')" >
					<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="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="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>
    
    <!-- ########################## -- 底部导航栏 -- ################################ -->
    <u-tabbar
      :list="tabbarConfig.tabbarList"
      :mid-button="tabbarConfig.midButton"
      :inactive-color="tabbarConfig.inactiveColor"
      :active-color="tabbarConfig.activeColor"
      :mid-button-size="tabbarConfig.midButtonSize"
    ></u-tabbar>
	</view>
</template>

<script>
  import tabbarconfig from 'tabbarconfig.js';
  
	export default {
		data() {
			return {
        headerTopKeyword: '',
				paginationConfig:{
					  pageNo: 1,
					  pageSize: 10
				},
				bannerList: [],
				newsList:[],
				noticeList:['贵州轮胎股份有限公司对您感兴趣，为您提供了职位。','您有一个面试邀请'],
        tabbarConfig: tabbarconfig
			}
		},
		onLoad() {
			// console.log(this.$u.config.v);
			
		},
		onShow() {
			this.getBannerList();
			this.getNewsList();
		},
		methods: {
      /**
       * 打开新页面
       * @param {String} path 跳转路径
       * */
      openPage(path, msg) {
        let tempRoute = {
          url: path
        };
        if (msg) {
          tempRoute.params = {
            msg: msg
          };
        }
        this.$u.route(tempRoute);
      },
			getNewsList(){
				let params ={
					// artCategoryId:2,
					pageNum:1,
					pageSize:10
				}
				this.$u.api.getIndexNewsList(params)
				.then(res=>{
          if(!res) return;
					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=>{
          if(!res) return;
					this.bannerList = res?.data || [];
          this.bannerList = [];
          this.bannerList.push(
            {
              bannerUrl: 'https://img.xiaopiu.com/userImages/img3072177d2e954f8.jpg',
              content: '<p>代码固定测试内容999998</p>',
              id: "999998",
              name: "代码固定测试999998"
            }
          );
          this.bannerList.push(
            {
              bannerUrl: 'https://img.xiaopiu.com/userImages/img14661769874c088.jpg',
              content: '<p>代码固定测试内容999999</p>',
              id: "999999",
              name: "代码固定测试999999"
            }
          );
					console.log('bannerList',JSON.parse(JSON.stringify(res)));
				})
			},
			// 轮播图点击
			swiperClick (index) {
				// console.log('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
						}
					})
				}
			},
			noticeClick(e){
				console.log('e',e)
				this.openPage('pages/inbuild/inbuild','我的消息')
			}

		}
	}
</script>

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