<template> <view class="pad-x120" v-if="isLoading"> <!-- 头部 --> <status-nav :ifReturn="false" navBarTitle="首页" marginBottom="0"></status-nav> <!-- 轮播图 --> <view class="banner-bg pad-sx10 pad-zy20 border-box"> <view class="banner radius10"> <swiper-pull newRadius="10rpx" :bannerList="bannerList" newHeight="272rpx" newBottom="16rpx" :isplay='isplay'></swiper-pull> </view> </view> <!-- 推荐视频 --> <view class="index-video-bg"> <view class="index-title"> <title-pull nameTxt="推荐视频" moreUrl="/pagesA/video/video"></title-pull> </view> <view class="index-video"> <list-all :videoList="videoList" videoPadding="10rpx"></list-all> </view> </view> <!-- 线路信息及报价 --> <view class="index-line-bg"> <view class="index-title"> <title-pull nameTxt="线路信息及报价" moreUrl="/pages/line/line"></title-pull> </view> <view class="index-line"> <list-all :lineList="lineList"></list-all> </view> </view> <!-- 新闻资讯 --> <view class="index-news-bg"> <view class="index-title"> <title-pull nameTxt="新闻资讯" moreUrl="/pagesA/news/news"></title-pull> </view> <view class="index-news"> <list-all :newsList="newsList"></list-all> </view> </view> <!-- 尾部 --> <foot-tab></foot-tab> </view> </template> <script> import swiperPull from '@/components/swiper/swiper-pull.vue'; import titlePull from '@/components/title/title-pull.vue'; import listAll from '@/components/list/list-all.vue'; export default { components:{ swiperPull, titlePull, listAll }, data() { return { screenHeight:uni.getSystemInfoSync().screenHeight, statusHeight:uni.getSystemInfoSync().statusBarHeight, bannerList:[], //banner列表 isplay:false, //是否自动轮播 playTimer:null, //间隔时间 videoList:[], //视频列表 lineList:[], //线路列表 newsList:[], //资讯列表 isLoading:false, } }, onLoad(op) { // 获取banner this.getBannerList(); // 获取推荐视频 this.getVideoList(); // 获取推荐线路 this.getLineList(); // 获取推荐资讯 this.getNewsList(); }, onShow() { this.playTimer = setTimeout(()=>{ this.isplay = true; },2000) }, onHide() { clearTimeout(this.playTimer); this.isplay =false; }, // 分享到微信 onShareAppMessage(res) { let shareObj = { title:'上海集正', imageUrl:'/static/public/shear-logo.jpg', } // 返回shareObj return shareObj; }, // 分享到朋友圈 onShareTimeline(res){ let shareObj = { title:'上海集正', imageUrl:'/static/public/shear-logo.jpg', } // 返回shareObj return shareObj; }, methods: { // 获取banner getBannerList(){ this.$requst.get('/api/common/slides',{position:'home-banner'}).then(res=>{ if(res.code==0){ console.log(res,'轮播列表'); let bannerArr= [] res.data.forEach(item=>{ let obj = { imgSrc: item.src, url: item.url } bannerArr.push(obj); }) this.bannerList = bannerArr; } }) }, // 获取推荐视频 getVideoList(){ this.$requst.post('/api/common/recommend-video').then(res=>{ if(res.code==0){ console.log(res,'推荐视频'); let obj = { id:res.data.id, title:res.data.title, cover:res.data.cover, src:res.data.src, } this.videoList.push(obj); } }) }, // 获取推荐线路 getLineList(){ let params = { page:1, size:4 } this.$requst.post('/api/common/line-list',params).then(res=>{ if(res.code==0){ console.log(res,'推荐线路'); let lineArr = []; res.data.list.forEach(item=>{ let obj = { flag:item.logistics_type_text, title:item.title, start_addr:item.place_origin, arrive_addr:item.destination, start_time:item.start_time.slice(0,10).split('-').join('.'), end_time:item.end_time.slice(0,10).split('-').join('.'), max_price:item.highest_price, min_price:item.minimum_price } lineArr.push(obj); }) this.lineList = lineArr; } }) }, // 获取推荐资讯 getNewsList(){ uni.showLoading({ title:'加载中' }) let params = { page:1, size:4 } this.$requst.post('/api/common/news-list',params).then(res=>{ if(res.code==0){ console.log(res,'推荐资讯'); let newsArr = []; res.data.list.forEach(item=>{ let obj = { id:item.id, cover:item.cover, title:item.title, info:item.summary, click:item.view } newsArr.push(obj); }) this.newsList = newsArr; uni.hideLoading(); this.isLoading = true; } }) }, } } </script> <style scoped> /* banner */ .banner-bg{ width: 100%; background-image: linear-gradient(to top,#bdc0dd,#1c2588); } .banner{ width: 100%; overflow: hidden; } /* 推荐视频 */ .index-video-bg{ background-image: linear-gradient(to top,#f6f7fb,#bdc0dd); } /* 标题 */ .index-title{ padding-top: 32rpx; } </style>