prevent_drowning_app/news/pages/article/index.vue

<template>
  <view class="box">
	<view class="flex1 overh boxtop">
		<tablist :tablist="tablist" :tabval="tabval" @getCheck="getCheck"></tablist>
	</view>
	<view class="stepbox" :style="tabval==2?'padding-top:0px':''">
		<box-list :datainfo="list" :type="type" @getDetail="getDetail"></box-list>
	</view>
	<loading></loading>
  </view>
</template>

<script>
import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
import {getDictionaryFn} from "@/api/mine/register.js";
import {getNewsList} from "@/api/work/index.js"
import tablist from '@/components/tabs/index.vue'
import boxList from "@/news/components/box/list.vue"
  export default {
	components:{tablist,boxList},
	data(){
		return{
			list:[],
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			tabval:'',
			tablist:[],
			wtdt:'',
			type:'article',//article：文章，avideo:视频
		}
	},
	onShow() {
		
	},
    onLoad: function() {
		this.init();
    },
	// 上拉触底加载更多触发事件
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	methods:{
		checkPermi,checkRole,
		init(){
			//新闻类型
			getDictionaryFn('newtype').then(res => {
				if (res.code == 200) {
					this.tablist = res.data.map(v => {
						this.tabval=res.data[0].dictValue
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}	
					})
					this.getDataFn()
				}
			})
		},
		getCheck(val){
			this.tabval=val;
			if(val==2){
				this.type="avideo";
			}else{
				this.type="article";
			}
			this.getrefreshData()
		},
		getrefreshData(){
			this.pageNum=1;
			this.list=[];
			this.reachflag=true;
			this.getDataFn()
		},
		getDetail(e){
			this.$tab.navigateTo(`/news/pages/article/detail?id=${e}`) 
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
				status:'0',//0启用，1不启用
				newType:this.tabval
			}
			getNewsList(params).then(res=>{
				if(res.code==200){
					if (res.rows.length < this.pageSize) {
						this.reachflag = false
						this.wtdt = '到底了~';
					} else {
						var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
						if (num < res.total) {
							this.reachflag = true
							this.wtdt = ''
						} else {
							this.reachflag = false
							this.wtdt = '到底了~';
						}
					}
					var arr=JSON.parse(JSON.stringify(res.rows));
					if(this.tabval==2){
						arr=res.rows.map(v => {
							if(v.newUrl){
								v.newUrl=v.newUrl.split(',')
							}
							return v
						})
					}
					if (this.pageNum == 1) {
						this.list = arr;
					} else {
						this.list = this.list.concat(arr)
					}
				}else{
					this.$toast(res.msg)
				}
			})
				
		},
		
		
		
	}
  }
</script>
<style lang="scss" scoped>
.boxtop{padding: 18rpx 0 0;background-color: #ffffff;
	position: fixed;left: 0;top: 0;right: 0;z-index: 2;
}
.box{padding-top: 100rpx;}
.stepbox{padding: 24rpx 24rpx 0;}
</style>