juliancheng/pages/index/articleDetails.vue

<template>
	<view class="container">
		<view class="contents">
			<view class="flex align-center margin-bottom-sm" style="color: #FBC600;" @click="callback">
				<image style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" src="../../static/index/callback.png" mode=""></image>返回首页
			</view>
			<view class="article">
				<view class="article-title">{{articleDetail.title}}</view>
				<view class="article-browse">
					<text class="text-left">
						{{articleDetail.virtual_view + articleDetail.view}}人浏览
					</text>
					<text class="text-right">
						{{articleDetail.created_at}}
					</text>
				</view>
				<view class="article-content">
					<fengparse :content="articleDetail.content == null? '暂无文章数据' : articleDetail.content" @preview="preview" @navigate="navigate"
					 className="articleDetailContent" />
				</view>
				<view class="article-view">

				</view>
			</view>
		</view>
		<!-- 底部tab -->
		<view class="article-foot">
			<button class="article-foot-item" @click="collect">
				<view class="foot-item-img">
					<image class="item-img" :src="collectStatu == 0 ? '../../static/index/collect.png':'../../static/index/collect-active.png'" />
				</view>
				<view class="foot-item-title">
					{{collectStatu == 0 ? '收藏':'已收藏'}}
				</view>
			</button>
			<button class="article-foot-item" v-if="isshare()" @click="shareartic">
				<view class="foot-item-img">
					<image class="item-img" src="../../static/index/share.png" />
				</view>
				<view class="foot-item-title">转发</view>
			</button>
		</view>
		<!-- 获取微信信息弹窗框 -->
		<view class="cu-modal" :class="modalName == 'WxModal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">您还未登录</view>
					<view class="action" @tap="modalName = ''">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">
					<view class="top-title" style="">
						<!-- <text class="top-title1">您还未登录</text></br> -->
						<text class="top-title1">请先登录再进行操作</text>
					</view>
					<view class="flex justify-around">
						<button type="primary" @tap="modalName = ''" class="cu-btn round greyBg lg">暂不登录</button>
						<button type="primary" @click="gotologin" class="cu-btn round yellowBg lg" hover-class="btn-hover">立刻登录</button>
					</view>
				</view>
			</view>
		</view>

		<view class="app_share" v-if="isshow">
			<view class="app_arrow">
			</view>
			<view class="app_item">
				<image src="../../static/index/fork_white.png" style="width: 72rpx;height: 72rpx;" @click="isshow=false" mode=""></image>
				<view class="app_title">
					点击右上角选择发送给朋友
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import fengparse from '@/components/feng-parse/parse.vue'
	export default {
		name: 'articleDetails',
		components: {
			// uParse
			fengparse
		},
		data() {
			return {
				modalName: null,
				collectStatu: 0, // 收藏状态
				articleDetail: {},
				articleDetailId: null, //文章id
				isshow: false,
				artictitle: ""
			}
		},
		// // 页面分享
		// onShareAppMessage: function() {
		// 	let that = this;
		// 	return {
		// 		title: that.articleDetail.title,
		// 		desc: that.articleDetail.title,
		// 		path: '/pages/index/index?articleId=' + this.articleDetailId + '&up_id=' + this.user.id
		// 	};
		// },
		onLoad(options) {
			this.articleDetailId = options.id;
			this.articleDetailInfo(this.articleDetailId)
			//#ifdef H5
			if (window.location.href.split("&")[1] != undefined) {
				let id = window.location.href.split("&")[1].split("=")[1]
				console.log(parseInt(id))
				uni.setStorageSync('up_id', id)
			}
			//#endif
		},
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		mounted() {

		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			callback(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			articleDetailInfo(id) {
				this.$request.get('/api/Article/articleDetail?id=' + id).then(res => {
					if (res.code == 200) {
						this.articleDetail = res.data
						console.log(this.articleDetail)
						this.articleDetail.content = this.articleDetail.content.replace(
							/<span style="font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px;">/ig,
							'<span>')
						this.collectStatu = res.data.favorite
						this.sharefun(res.data.title, this.user.id)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						});
					}
				});
			},
			shareartic() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login",
						fail: (err) => {
							console.log(err)
						}
					})
					return;
				}
				this.isshow = true
			},
			sharefun(artictitle, id) {
				if (!this.hasLogin) {
					return false;
				}
				if (this.$wechat.is_weixin()) {
					this.$wechat.share({
						title: artictitle,
						desc: '点击查看详情',
						imgUrl: "https://zhengda.oss-cn-chengdu.aliyuncs.com/juyin/static/index/20201222144544.png",
					}, window.location.href, id, false)
				}
			},
			isshare() {
				if (this.$util.is_weixin()) {
					return true
				} else {
					return false
				}
			},
			// 收藏
			async collect() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login",
						fail: (err) => {
							console.log(err)
						}
					})
					return;
				}
				let url = ''
				if (this.collectStatu == 0) {
					url = '/api/Article/addfavorite?id=' + this.articleDetailId
				} else {
					url = '/api/article/deleteFavroite?id=' + this.articleDetailId
				}
				let res = await this.$request.get(url);
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title: res.messaged
					})
					this.articleDetailInfo(this.articleDetailId)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			},
			share: function() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login",
						fail: (err) => {
							console.log(err)
						}
					})
					return;
				}
			},
			gotologin() {
				this.modalName = '';
				uni.navigateTo({
					url: "../login/login",
					fail: (err) => {
						console.log(err)
					}
				})
			}
			// wxLogin: function(e) {
			// 	console.log(e)
			// 	if (e.detail.userInfo == undefined) {
			// 		uni.showToast({
			// 			title: '微信登录失败'
			// 		});
			// 		return;
			// 	}
			// 	this.modalName = ''
			// 	user.loginByWeixin(e.detail.userInfo)
			// 		.then(res => {
			// 			this.getUser(true);
			// 		})
			// 		.catch(res => {
			// 			console.info(res)
			// 			uni.showToast({
			// 				title: '微信登录失败'
			// 			});
			// 		});
			// }
		}
	}
</script>

<style lang="scss">
	@import url("@/components/feng-parse/parse.css");

	.app_share {
		background-color: #000000;
		opacity: 1;
		border-radius: 15px;
		position: fixed;
		z-index: 9999;
		top: 16rpx;
		right: 6rpx;
		height: 72rpx;
	}

	.app_arrow {
		width: 0;
		height: 0;
		border-right: 16rpx solid transparent;
		border-left: 16rpx solid transparent;
		position: absolute;
		top: -11rpx;
		right: 45rpx;
		border-bottom: 6px solid #000000;
		opacity: 1;
	}

	.app_item {
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.app_title {
		color: #ffffff;
		margin: 0 28rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.greyBg {
		background: grey !important;
	}

	.container {
		width: 100vw;
		background: #FFFFFF;

		.contents {
			padding: 5vw;

			.article {
				background: #fff;
				border-radius: 5px;

				.article-title {
					font-size: 20px;
					margin-bottom: 15px;
				}

				.article-img {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.article-browse {
					display: flex;
					justify-content: space-between;
					color: #999999;
					border-bottom: 1px solid;
				}

				.article-content {
					margin: 10px 0;
					text-align: center;

					.articleDetailContent {
						text-align: left;
					}
				}

				.article-view {
					width: 100%;
					height: 150rpx;
				}
			}
		}

		.article-foot {
			display: flex;
			justify-content: space-around;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9;
			background: #fff;
			width: 100%;
			height: 50px;
			border-top: 1px solid #eee;

			.article-foot-item {
				width: 90px;
				heigth: 50px;
				margin: 0;
				padding: 0;
				color: #999;
				font-size: 15px;
				background: #fff;

				&:after {
					border: none;
				}

				.foot-item-img {
					padding: 3px 0;
					display: flex;
					justify-content: center;
					align-items: center;

					.item-img {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.foot-item-title {
					width: 100%;
					height: 15px;
					line-height: 15px;
					text-align: center;
					font-size: 14px;
					color: #a2a2a2;
				}
			}
		}

		.yellow {
			color: #f5cc57;
		}

		.yellowBg {
			background: #f5cc57 !important;
		}

		.top-title {
			margin-bottom: 15px;
		}

		.top-title .top-title1 {
			font-size: 19px;
			color: #000000;
			margin-top: 10px;
		}
	}
</style>