odd_job_applet/pages/article/article.vue

<template>
	<view>
		
		<scroll-view scroll-x class="bg-white nav text-center solid-bottom echo-fixed-top">
			<view class="cu-item" :class="item.id==cateid?'text-blue cur':''" v-for="(item, index) in allcate" :key="item.id" @tap="tabSelect" :data-id="item.id">
				{{item.title}}
			</view>
		</scroll-view>
		<view class="echo-fixed-top-empty"></view>
		
		<block v-for="(item,index) in plist" :key="index">
			<view class="cu-card article no-card solid-bottom">
				<view class="cu-item shadow" @tap="goDetail(item.atype, item.id, item.tilurl)">
					<view class="title"><view class="text-cut">{{item.title}}</view></view>
					<view class="content">
						<image :src="item.tilpic" mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">{{item.summary}}</view>
							<view class="flex justify-between">
								<view class="text-sm text-gray">{{item.createtime_text}}</view>
								<view class="text-sm text-gray text-right" v-if="item.atype==1">
									<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.volume}}
									<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.article_thumb_count}}
									<text class="cuIcon-messagefill margin-lr-xs"></text> {{item.article_comment_count}}
								</view>
								<view class="text-sm text-gray text-right" v-else>
									<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.volume}}
									<text class="cuIcon-discoverfill margin-lr-xs"></text> 链接
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>

		<uni-load-more :status="pstatus"></uni-load-more>
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				cateid: 0,
				allcate: [],

				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: []
			};
		},
		onLoad: function(option){
			_this = this;
			_this.cateid = option.cateid || 0;
			_this.$req.ajax({
				path: "article/allcate"
			}).then((data) => {
				_this.allcate = data.allcate;
				_this.getMore();
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onShareAppMessage: function(res) {
			return {
				title: "文章资讯",
				path: "/pages/article/article?cateid="+_this.cateid
		    }
		},
		onPullDownRefresh: function() {
			_this.ppage = 1;
			_this.pstatus = 'more';
			_this.plist = [];
			_this.getMore();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			tabSelect: function(e) {
				_this.cateid = e.currentTarget.dataset.id;
				_this.pageRefresh();
			},
			
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			getMore: function() {
				_this.$req.ajax({
					path: "article/listarticle",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						cateid: _this.cateid
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			goDetail: function(atype, articleid, tilurl) {
				if (atype==1){
					uni.navigateTo({
						url: '/pages/article/detail?articleid=' + articleid
					});
				}else{
					_this.$req.ajax({
						path: "article/getarticle",
						data: {
							articleid: articleid
						}
					}).then((data) => {
						if (atype==2) {
							uni.navigateTo({
								url: tilurl
							});
						} else{
							// #ifdef H5
							location.href = tilurl;
							// #endif
							// #ifndef H5
							uni.navigateTo({
								url: '/pages/tool/webview?pagesrc=' + encodeURIComponent(tilurl)
							});
							// #endif
						}
					}).catch((err) => {
						uni.showModal({
							title: '信息提示',
							content: err,
							showCancel: false
						});
					});
				}
			}
		}
	}
</script>

<style>
</style>