unimall/unimall-app/pageB/news/news.vue

<template>
	<view class="container">
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="item.value==TabCur?'text-orange cur':''" v-for="item in categoryList"@tap="tabSelect" :data-id="item.value">
					{{item.label}}
				</view>
			</view>
		</scroll-view>
		<view class="guess-section">
			<view 
				v-for="(item, index) in newsInfo" :key="index"
				class="guess-item"
				@click="navToDetailPage(item.id)"
			>
			<view class="cu-card article no-card" >
				<view class="cu-item shadow">
					<view class="title">
						<view class="text-cut">{{item.title}}</view>
					</view>
					<view class="content">
						<image :src="item.titleImg"
						 mode="aspectFit"></image>
						<view class="desc">
							<view class="text-content">
								 <view class="u-content" :selectable="true">
								 	<u-parse :html="item.abstractContent"></u-parse>
								 </view>
							</view>
							<view style="margin-bottom: 30upx;">
								<view class="cu-tag bg-red light radius">{{item.from}}</view>
								<view class="cu-tag bg-green light radius">{{item.gmtUpdate}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			</view>
			<view v-show="isLoadMore">
			    <uni-load-more :status="loadStatus" ></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsInfo: [],
				categoryList:[],
				pages:1,//页数
				limit:10 ,//每次取条目数
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false  ,//是否加载中
				TabCur: 0,
				category:0
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.loadData()
		},
		onReachBottom(){  //上拉触底函数
		  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
				this.isLoadMore=true
				this.pages += 1
				this.getNewsInfo()
		  }
		},
		onLoad() {
			uni.showLoading({
				title: '正在加载',
				mask:true
			})
			const that = this
			that.$api.request('dict', 'getDictDataList',{
				dictType: "news_type"
			}, failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}).then(res => {
				let data = res.data
				console.log("categoryList:"+ data)
				console.log(data)
				that.categoryList = data
				uni.hideLoading()
				uni.stopPullDownRefresh()
			})
			this.loadData() 
		},
		methods: {
			async loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				
				that.$api.request('news', 'getNewsInfo',{
					category:this.category,
					page: this.pages,
					limit:this.limit
				}, failres => {
					that.$api.msg(failres.errmsg)
					this.isLoadMore = false
					this.loadStatus = 'nomore'
					if(this.pages>1){this.pages=1}
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					console.log(data)
					that.newsInfo = data
					uni.hideLoading()
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.category = this.TabCur
				this.pages = 1
				this.loadData()
			},
			//详情
			navToDetailPage(item) {
				let id = item;
				uni.navigateTo({
					url: `/pageB/news/news_detail?id=${id}`
				})
			},
			getNewsInfo(){
				const that = this
				var pages=that.pages
				var limit=that.limit
			   
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('news', 'getNewsInfo', {
					category:this.category,
					page: pages,
					limit:limit
				},failres => {
					that.$api.msg(failres.errmsg)
					that.isLoadMore=false
					that.loadStatus = 'nomore'
					if(that.pages>1){that.pages-=1}
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					if(data.length > 0){
						that.newsInfo = that.newsInfo.concat(data)
						that.isLoadMore=false
					}
					else{
						if(that.pages>1){that.pages-=1}						
						that.isLoadMore=true
						that.loadStatus = 'nomore'
					}
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang='scss'>
	.container{
		padding-bottom: 100upx;
	}
	.cu-form-group input {
		text-align: right;
	}
	.cu-form-group textarea {
		text-align: right;
	}
	.place{
		font-size: 40rpx;
		line-height: 1;
		padding-right: 10upx;
	}
	.place-center{
		font-size: 28rpx;
	}
	.guess-item{
		/* margin-top: 10rpx; */
	}
	.btn-size{
		font-size: 28rpx;
	}
	.place-bottom{
		margin-top: 20rpx;
	}
	.guess-section{
		padding-bottom: 100upx;
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 98%;
			border-bottom:1px solid #ccc;
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: #121212;
		}
		.price-orther{
			font-size: $font-sm;
			color:$font-color-base;
		}
		.price{
			font-size: 64rpx;
			color: #39b54a;
			line-height: 1;
			padding-right: 10upx;
		}
		
		.goods1{
			font-size: $font-sm;
			color: $font-color-base;
		}
		.goods2{
			font-size: $font-sm;
			color: $font-color-base;
			padding-left: 10%;
		}
		.goods3{
			font-size: $font-sm;
			color: $font-color-base;
			padding-left: 10%;
		}
		.goods4{
			font-size: $font-sm;
			color: #ff5500;
		}
		.goods5{
			font-size: $font-sm;
			color: $font-color-base;
		}
		.view-item{
			width: 100%;
			// line-height: 40upx;
			padding-top: 10upx;
		}
		.confirm-btn {
			margin-left: 20%;
		}
		.date-time {
			margin-left: 30%;
		}
		.padding-xs-tmp {
			padding: 15upx 10upx 10upx 10upx;
		}
	}
</style>