veterans_H5/h5_web/pages/index/index.vue

<template>
	<view class="index">
    <!-- <view class="index-head"></view> -->
    <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="7" :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="0"
          	mode="round"
          	height="440"
          	img-mode="scaleToFill"
          	@click="swiperClick"
          ></u-swiper>
        </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/policyNews/policyNews')"> -->
        <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>
      			<image :src="item.artImage" mode="aspectFill"></image>
      		</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 {
        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',
							type: 'error',
							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"
            }
          );
				})
			},
			// 轮播图点击
			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>