odd_job_applet/pages/article/detail.vue

<template>
	<view v-if="pageloading">

		<view class="echo-article-title bg-white">
			{{article.title}}
		</view>
		<view class="echo-article-meta bg-white">
			<view class="echo-article-meta-left">
				<text>{{article.createtime_text}}</text>
				<text>{{article.articleCate.title}}</text>
				<text>{{article.author}}</text>
			</view>
			<view class="echo-article-meta-right">
				<text>浏览 {{article.volume}}</text>
			</view>
		</view>

		<view class="echo-article-details bg-white">
			<u-parse :content="article.details" noData="详情内容..." @navigate="navigate"></u-parse>
		</view>
		
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 用户评论
			</view>
			<view class="action" @click="goPage('/pages/article/comment?articleid='+article.id)">
				<text class="text-df">共{{article.article_comment_count}}条评论 </text>
				<view class="cuIcon-right"></view>
			</view>
		</view>
		<view class="cu-list menu-avatar comment solids-top">
			<block v-for="(item,index) in commentlist" :key="item.id">
				<view class="cu-item" :data-puserid="item.userid" :data-nickname="item.user.nickname">
					<view class="cu-avatar round" :style="'background-image:url('+item.user.avatar+');'"></view>
					<view class="content">
						<view class="padding-bottom-sm flex justify-between">
							<view class="text-grey">{{item.user.nickname}}</view>
							<view class="text-gray">{{item.createtime}}</view>
						</view>
						<view class="text-content padding-bottom-xs">
							<text v-if="item.puserid">回复 <text class="text-red">{{item.puser.nickname}}</text>：</text> 
							{{item.details}}
						</view>
					</view>
				</view>
			</block>
		</view>
		
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 相关推荐
			</view>
			<view class="action" @click="goPage('/pages/article/article')">
				<text class="text-df">全部文章 </text>
				<view class="cuIcon-right"></view>
			</view>
		</view>
		<block v-for="(item,index) in articlelist" :key="index">
			<view class="cu-card article no-card solid-bottom">
				<view class="cu-item shadow" @tap="goArticle(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>
		
		
		<view class="padding"></view>
		<view class="padding"></view>
		<view class="cu-bar bg-white tabbar input foot">
			<input placeholder="说点什么吧..." @tap="goPage('/pages/article/comment?articleid='+article.id+'&modalname=commentModal')" disabled class="solid-bottom"></input>
			
			<view class="action text-gray" @click="goPage('/pages/article/comment?articleid='+article.id)">
				<view class="cuIcon-commentfill"></view>
				{{article.article_comment_count}}
			</view>

			<view class="action text-gray" v-if="mythumb==0" @click="setThumb">
				<view class="cuIcon-appreciatefill"></view>
				{{article.article_thumb_count}}
			</view>
			<view class="action text-orange" v-else @click="setThumb">
				<view class="cuIcon-appreciatefill"></view>
				{{article.article_thumb_count}}
			</view>
			
			<view class="action text-gray" v-if="mycollect==0" @click="setCollect">
				<view class="cuIcon-favorfill"></view>
				收藏
			</view>
			<view class="action text-orange" v-else @click="setCollect">
				<view class="cuIcon-favorfill"></view>
				已收藏
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue';
	var _this;
	export default {
		components: {
			uParse
		},
		data() {
			return {
				pageloading: false,
				userinfo: {},
				
				article: {},
				mythumb: 0,
				mycollect: 0,
				
				articlelist: [],
				commentlist: []
			}
		},
		onLoad: function(option) {
			_this = this;
			var articleid = option.articleid || 0;
			_this.userinfo = uni.getStorageSync('userinfo');
			_this.$req.ajax({
				path: "article/getarticle",
				data: {
					articleid: articleid,
					userid: _this.userinfo.id || 0
				}
			}).then((data) => {
				_this.article = data.article;
				_this.mythumb = data.mythumb;
				_this.mycollect = data.mycollect;
				_this.articlelist = data.articlelist;
				_this.commentlist = data.commentlist;
				if (_this.article.atype==2) {
					uni.redirectTo({
						url: _this.article.tilurl
					});
				} else if (_this.article.atype==3) {
					// #ifdef H5
					location.href = _this.article.tilurl;
					// #endif
					// #ifndef H5
					uni.redirectTo({
						url: '/pages/tool/webview?pagesrc=' + encodeURIComponent(_this.article.tilurl)
					});
					// #endif
				}
				_this.pageloading = true;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onShareAppMessage: function(res) {
			return {
				title: _this.article.title,
				path: "/pages/article/detail?articleid="+_this.article.id
		    }
		},
		methods: {
			
			setThumb: function() {
				_this.userinfo = _this.checkLogin("/pages/article/detail?articleid="+_this.article.id);
				if (_this.userinfo===false){
					return false;
				}
				_this.$req.ajax({
					path: "article/setthumb",
					data: {
						articleid: _this.article.id,
						userid: _this.userinfo.id || 0
					}
				}).then((data) => {
					_this.mythumb = data.mythumb;
					_this.article.article_thumb_count = data.thumbcount;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			setCollect: function() {
				_this.userinfo = _this.checkLogin("/pages/article/detail?articleid="+_this.article.id);
				if (_this.userinfo===false){
					return false;
				}
				_this.$req.ajax({
					path: "article/setcollect",
					data: {
						articleid: _this.article.id,
						userid: _this.userinfo.id || 0
					}
				}).then((data) => {
					_this.mycollect = data.mycollect;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			goPage: function(pageurl) {
				uni.navigateTo({
					url: pageurl
				});
			},
			
			goArticle: 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
						});
					});
				}
			},
			
			navigate: function(href, e) {
				// #ifdef H5
				location.href = href;
				// #endif
				// #ifndef H5
				uni.navigateTo({
					url: '/pages/tool/webview?pagesrc=' + encodeURIComponent(href)
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	
	.cu-bar.tabbar .action{ -webkit-box-flex: 0.4 !important; -webkit-flex: 0.4 !important; -ms-flex: 0.4 !important; flex: 0.4 !important; margin: 0 !important; }
	
</style>