<template>
|
<div class="news-page">
|
<!--轮播-->
|
<swiper auto
|
height="214px"
|
:show-dots="true"
|
v-if="swiperList.length">
|
<swiper-item v-for="(item, index) in swiperList"
|
:key="index"
|
@click.native="handleBannerJump(item)">
|
<img :src="item.context" class="swiperImg">
|
<p class="swiper-item-title">{{item.name}}</p>
|
</swiper-item>
|
</swiper>
|
<!--下拉列表-->
|
<newsList :newsList="newsList" @on-click-news="handleNewsJump"></newsList>
|
<FSpace type="large"></FSpace>
|
<!--footer-->
|
<FFooter :index="2"></FFooter>
|
</div>
|
</template>
|
<script>
|
/**
|
* Created by z.x.q on 2018/3/22.
|
* 资讯首页
|
*/
|
import {XButton, Flexbox, FlexboxItem, Swiper, SwiperItem} from 'vux';
|
import newsList from '../../components/NewsList';
|
import FFooter from '../../components/common/FFooter.vue';
|
import FSpace from '../../components/common/FSpace.vue';
|
import sysApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
|
export default {
|
name: 'f-news',
|
components: {
|
newsList,
|
Swiper,
|
SwiperItem,
|
FSpace,
|
FFooter
|
},
|
data() {
|
return {
|
swiperList: [],
|
newsList: [], // 资讯列表信息
|
detailContent: '', // 资讯条目的内容
|
}
|
},
|
methods: {
|
// 初始化页面信息
|
init() {
|
let _this = this;
|
sysApi.fetchNewsList({}).then((res) => {
|
_this.swiperList = res.body.banners;
|
_this.newsList = res.body.information;
|
}, (error) => {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
});
|
},
|
// banner的类型跳转
|
// 1:为导航页面, 2:为分类页面, 3:为产品页面, 4:为第三方网页, 5:为空白不反应
|
// detailContent, 跳转地址，有type 来决定是否使用跳转
|
handleBannerJump(item) {
|
switch (item.type) {
|
case 1:
|
//跳转到对应的导航页面
|
this.$router.push({path: item.detailContent});
|
break;
|
case 2:
|
//跳转到对应的贷款分类
|
this.$router.push({path: item.detailContent});
|
break;
|
case 3:
|
//跳转到贷款详情，需要产品ID
|
if (item.prodTypeId === 40000005) {
|
this.$router.push({path: '/f-loan-detail', query: {id: item.detailContent}});
|
} else if (item.prodTypeId === 40000006) {
|
this.$router.push({path: '/f-loan-detail', query: {id: item.detailContent}});
|
} else if (item.prodTypeId === 40000007) {
|
this.$router.push({path: '/f-credit-detail', query: {id: item.detailContent}});
|
}
|
break;
|
case 4:
|
//第三方页面
|
window.location.href = item.detailContent;
|
break;
|
case 5:
|
//什么都不做
|
break;
|
case 6:
|
//资讯
|
this.$router.push({path: '/f-news-detail',query:{id:item.detailContent}});
|
break;
|
default:
|
break;
|
}
|
},
|
// 资讯的跳转
|
handleNewsJump(item) {
|
// 2 我们后台创建的文章
|
// 1 类型(1为跳转第三方,2为内容直接展示)
|
if (item.type === 1) {
|
// 获取资讯的详情, detailContent内容，有可能是地址，有可能是 html 代码片段
|
sysApi.fetchNewsDetail({noticeId: item.id}).then((res) =>{
|
window.location.href = res.body.detailContent;
|
}, (error)=>{
|
statusCodeManage.showTipOfStatusCode(error);
|
});
|
} else if (item.type === 2) {
|
// 返回html片段，跳转到我们的页面
|
this.$router.push({
|
path: '/f-news-detail',query:{id:item.id}
|
});
|
}
|
}
|
},
|
activated: function () {
|
this.init();
|
}
|
}
|
</script>
|
<style lang="less">
|
@import "../../style/mixin.less";
|
|
.news-page {
|
background: @color-white;
|
.vux-swiper-item {
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
.swiper-item-title {
|
position: relative;
|
width: 250px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
top: -34px;
|
left: 12px;
|
color: @color-white;
|
font-size: @font-size-medium;
|
}
|
}
|
.vux-indicator {
|
a {
|
.active {
|
background-color: @color-white !important;
|
}
|
}
|
}
|
.vux-icon-dot {
|
width: 5px !important;
|
height: 5px !important;
|
border-radius: 50% !important;
|
}
|
}
|
</style>
|
