luban-mall/pages/tabbar/news/news.vue

<template>
	<view class="pad-b150">
		<status-nav :ifReturn="false" navBarTitle="资讯" :marginBottom="0"></status-nav>
		<view class="nav-list-bg news-nav-bg" :style="{top:newTop+'px'}">
			<nav-tab :list="navTabList" :maxNum="5" @chooseEv="chooseEv" :newWidth="tabWidth"></nav-tab>
		</view>
		<view class="news-list-bg" v-if="isLoading">
			<pull-list :list="articleList" :collection="0"  @toDetail="toArticleDetail"></pull-list>
		</view>
		<!-- 暂无更多内容 -->
		<view class="more-txt" v-if="totalAll == total">暂无更多内容</view>
		<!-- 购物车btn -->
		<enter-cart></enter-cart>
		<!-- 底部tab -->
		<foot-tab current="3"></foot-tab>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import navTab from '@/components/nav-tab/nav-tab.vue';
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue'
	import pullList from '@/components/pull-list/pull-list.vue';
	import enterCart from '@/components/enter-cart/enter-cart.vue';
	// 底部组件
	import footTab from '@/components/foot-tab/foot-tab.vue';
	import {getCartNum,userInfoEv} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		components:{
			statusNav,
			navTab,
			swiperTab,
			pullList,
			enterCart,
			footTab,
		},
		data() {
			return {
				scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
				newWidth:uni.getSystemInfoSync().windowWidth,
				newTop:uni.getSystemInfoSync().statusBarHeight + 50,
				articleList:[], //解答&资讯列表
				navTabList:[], //导航列表
				currentIndex:0, //当前位置
				page:1, //第几页
				size:10, //查询条数
				total:0, //总数
				totalAll:-1,//总数
				cacheBusinessId:-1, //商户id
				isLoading:false,
				tabWidth:'',
			}
		},
		computed:{
			...mapState({
				footHeight: state => state.moduleA.footHeight,
			}),
		},
		onLoad(op) {
			if(op.business_id){
				this.cacheBusinessId = op.business_id;
			}
		},
		onShow() {
			if(this.cacheBusinessId !== -1){
				this.$requst.post('/api/index/change-business',{business_id:this.cacheBusinessId}).then(res=>{
					if(res.code == 0){
						this.articleList=[];
						this.getArticleNav();
						userInfoEv();
					}
				})
			}else{
				this.articleList=[];
				this.getArticleNav();
				userInfoEv();
			}
		},
		onReachBottom(e) {
			if(this.articleList.length<this.total){
				this.page++;
				this.getArticleList();
			}
		},
		// 分享到微信
		onShareAppMessage() {
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		// 分享到朋友圈
		onShareTimeline(res){
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		methods: {
			// 获取文章栏目
			getArticleNav(){
				this.$requst.get('/api/archives/category').then(res=>{
					if(res.code == 0){
						let newArr = [];
						res.data.forEach(item=>{
							let obj = {
								id:item.id,
								title:item.title,
								name:item.title,
							}
							newArr.push(obj)
						})
						this.navTabList = newArr;
						this.tabWidth = this.navTabList.length*210-50+'rpx';
						this.articleNavId = this.navTabList[0].id;
						// 获取文章列表
						this.getArticleList();
					}
				})
			},
			// 切换事件
			chooseEv(index,id){
				if(this.currentIndex !== index){
					this.articleList = [];
					this.page = 1;
					this.currentIndex = index;
					this.articleNavId = id;
					// 获取文章列表
					this.getArticleList();
				}
			},
			// 获取疑难解答、行业资讯列表
			getArticleList(){
				uni.showLoading({
					title: '加载中'
				});
				this.isLoading =false;
				let params = {
					page:this.page,
					size:this.size,
					category_id:this.articleNavId
				}
				this.$requst.get('/api/archives/list',params).then(res=>{
					if(res.code == 0){
						this.total = res.data.total;
						let newArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id:item.id,
								title:item.title,
								time:this.dateFormat(item.published_at.replace(/-/g,'/')),
								src:item.cover
							}
							newArr.push(obj)
						})
						this.articleList = this.articleList.concat(newArr);
						if(this.articleList.length == this.total){
							this.totalAll = this.total;
						}
					}
					uni.hideLoading();
					this.isLoading =true;
				})
			},
			// 时间格式转换
			dateFormat (dateData) {
			    var date = new Date(dateData)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? '0' + m : m
			    var d = date.getDate()
			    d = d < 10 ? '0' + d : d
			    const time = y + '.' + m + '.' + d
			    return time
			},
			//去文章详情
			toArticleDetail(id){
				uni.navigateTo({
					url:`/pages/tabbar/news/detail?id=${id.id}`
				})
			},
		}
	}
</script>

<style>
</style>