shjz-applet/pages/index/index.vue

<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>