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="0"
            mode="round"
            height="380"
            img-mode="scaleToFill"
            @click="swiperClick"
            :mode="bannerList.length > 1 ? 'round' : 'none'"
          />
        </view>
      </view>
    </view>

    <!-- 滚动通知 -->
    <view class="notice">
      <u-notice-bar
        mode="horizontal"
        :type="unreadInfoNum > 0 ? 'primary' : 'none'"
        :list="noticeList"
        bg-color="#fff"
        duration="2000"
        @click="noticeBarClick"
      />
    </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/entrepreneurshipGuidelines/entrepreneurshipGuidelines')">
          <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="#d2d3d5"></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="newsItemClick(item)"
            :key="index"
            class="news-list-body-item u-body-item u-flex 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 class="image-border">
              <u-image :src="item.artImage" mode="aspectFill" width="160" height="120" border-radius="10">
                <view slot="error">
                  <u-image src="../../static/img/default-news.png" mode="aspectFill" width="160" height="120" border-radius="10" />
                </view>
              </u-image>
            </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: [
        {
          bannerUrl: '../../static/img/default.png'
        }
      ],
      // 新闻列表
      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: 5
      };
      this.$u.api.indexApi.getIndexNewsListApi(params).then((res) => {
        if (res?.code == 200) {
          this.newsList = res.rows;
        }
      });
    },
    /**
     * 获取轮播广告
     */
    getBannerList() {
      this.$u.api.indexApi
        .indexBannerListApi({
          type: 0
        })
        .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) {
        location.href = this.bannerList[index].jumpUrl
      } else {
        this.$u.route({
          url: 'pages/bannerDetails/bannerDetails',
          params: {
            id: this.bannerList[index].id,
            type: 0
          }
        });
      }
    },
    /**
     * 滚动条
     */
    noticeBarClick() {
      this.openPage('pages/notification/notification');
    },
    /**
     * @description: 新闻点击
     * @param {*} item
     * @return {*}
     */
    newsItemClick(item) {
      let routeUrl = '/pages/newsDetails/newsDetails';
      if (item.artLinkUrl) {
				location.href = item.artLinkUrl
      } else {
				this.$u.route(routeUrl, { artId: item.artId });
			}
    }
  }
};
</script>

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