xmt/pages/user/article.vue

<template>
	<view class="content">
		<view class="text-box">
			<view class="text-title">
				<view class="text-1">{{artData.title}}</view>
				<view class="text-2" v-if="artData.mer && artData.mer.name">
					<view class="name clamp">
						{{artData.mer.name}}
					</view>
					<view class="gg"></view>
					<view class="time">
						{{artData.add_time | getTime}}
					</view>
					<!-- <view class="gg"></view>
					<view class="time">
						已阅读 {{artData.visit}}
					</view> -->
				</view>
			</view>
			<view class="text-content-title" @click="navTo('/pages/user/dydetail?id=' + artData.mer.id)" v-if="artData.mer">
				<view class="title-left-box">
					<view class="image" >
						<image :src="artData.mer.headimg" mode=""></image>
					</view>
					<view class="title-left-box-content">
						<view class="title-left-box-name">
							<view class="name-title" v-if="artData.mer && artData.mer.name">
								{{artData.mer.name}}
							</view>
							<view class="name-dingyue" v-if="artData.mer.is_sub==1">
								已订阅
							</view>
							<view class="name-dingyue" v-else>
								+订阅
							</view>
						</view>
						<!-- <view class="title-left-box-title">
							<text>发表文章:{{artData.mer.count}}</text><text
								style="margin-left: 20rpx;">订阅:{{artData.mer.sub}}</text>
						</view> -->
					</view>
				</view>

				<view class="tt">
					>
				</view>
			</view>
			<view class="content-content" v-html="artData.content"></view>
		</view>
		<view class="pinglun" v-if="plList.length > 0">
			<view class=" pinglun-box ">
				<view class="pinglun-title">
					评论交流({{plNum}})
				</view>
				<view class="" v-if="isZhankai==true && plIemt.user" v-for="plIemt in plList">
					<view class="pinglun-content" >
						<view class="pinglun-content-left">
							<image :src="plIemt.user.avatar" mode=""></image>
						</view>
						<view class="pinglun-content-right">
							<view class="pinglun-name">
								{{plIemt.user.nickname }}
							</view>
							<view class="pinglun-tit">
								{{plIemt.content}}
							</view>
							<view class="pinglun-time">
								{{plIemt.add_time | getTime}}
							</view>
						</view>
					</view>
					<view class="hf-wrap" v-if="plIemt.to.length > 0">
						<view class="hf" v-for="hfitem in plIemt.to">
							<!-- <text style="color: #3ea8cb;">作者</text> -->
							<text style="color: #3ea8cb;">回复</text>：<text>{{hfitem.content}}</text>
						</view>
					</view>
					<view class="" style="height: 10rpx;"  v-if="plIemt.to.length > 0">
						
					</view>
				</view>
				

				<view class="zhankai" @click="zhankai()">
					<view class="all" v-if="isZhankai==true">
						收起
					</view>
					<view class="all" v-else>
						展开全部
					</view>
					<image src="../../static/img/top.png" mode="" v-if="isZhankai==true"></image>
					<image src="../../static/img/bottom.png" mode="" v-else></image>
				</view>
			</view>
		</view>
		<view class="look">
			<view class=" look-box ">
				<view class="look-title">
					相关阅读
				</view>
				<view class="look-content" v-for="(xgItem,index) in xgList"
					@click="navTo('/pages/user/article?id=' + xgItem.id)">
					<view class="look-content-right">
						<view class="look-name">
							{{index + 1}}
						</view>
						<view class="look-tit  clamp">
							{{xgItem.title}}
						</view>
					</view>
					<view class="look-time">
						<!-- {{xgItem.visit}}次 -->
					</view>
				</view>
			</view>
		</view>
		<view class="pw">

		</view>
		<view class="send-box" @click="buy()">
			<input type="text" class="input" value="" placeholder="我来聊两句..." confirm-type="发布" v-model="myPl"
				@confirm="subPl" />
			<image src="../../static/img/dianzan.png" mode="" @click="dianZan"></image>
			<!-- <image src="../../static/img/share1.png" mode=""></image> -->
			<text style="color: #999;font-weight: bold;font-size: 28rpx;" @click="subPl">发布</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		weixindata,
		shareLoad
	} from '@/utils/wxAuthorized.js';
	import {
		getArtDetail,
		getPlList,
		getXgList,
		dianZan,
		subPl,
		getnoArtDetail
	} from '@/api/art.js'
	import {
		getTime
	} from '@/utils/rocessor.js'
	export default {
		data() {
			return {
				isDingyue: false, //是否订阅
				plNum: 10, //评论数量
				dyNumber: 10, //订阅人数
				isZhankai: false, //是否展开
				artId: 0,
				artData: {},
				plList: [],
				xgList: [], //相关阅读
				myPl: '', //我的评论
			};
		},
		filters: {
			getTime
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
		},
		onLoad(opt) {
			if (opt.id) {
				this.artId = opt.id
			}
			if(this.hasLogin) {
				this.getArtDetail()
				this.getPlList()
			}else {
				this.getPlList()
				this.getnoArtDetail()
			}
			
		},
		methods: {
			// 分享
			IndexShare() {
				let obj = this;
				// let money = obj.money;
				let item = {
					link: obj.$store.state.baseURL + '/index/#/pages/user/article?id=' + obj.artId, // 分享链接
					imgUrl: obj.artData.image_input[0],
					desc: obj.artData.synopsis,
					title: obj.artData.title,
					success: console.log('分享加载成功')
				};
				shareLoad(item);
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},

			//展开全部
			zhankai() {
				if (this.isZhankai == false) {
					this.isZhankai = true
				} else if (this.isZhankai == true) {
					this.isZhankai = false
				}

			},
			// 获取详情
			getArtDetail() {
				let obj = this
				getArtDetail({}, obj.artId).then(res => {
					console.log(res)
					obj.artData = res.data
					if (obj.artData.content != null) {
						obj.artData.content = obj.artData.content.replace(/<img/g,
							"<img style='max-width:100%;height:auto;'").replace(/<video/g,"<video style='max-width:100%;height:auto;'");
					} //小程序商品详情图超出屏幕问题
					this.getXgList(res.data.cid)
					this.IndexShare()
				})
			},
			//
			getnoArtDetail() {
				let obj = this
				getnoArtDetail({},obj.artId).then(res => {
					obj.artData = res.data
					if (obj.artData.content != null) {
						obj.artData.content = obj.artData.content.replace(/<img/g,
							"<img style='max-width:100%;height:auto;'").replace(/<video/g,'"<video :custom-cache="false""').replace(/<video/g,"<video style='max-width:100%;height:auto;'");
						console.log(obj.artData.content,'obj.artData.content');
					} //小程序商品详情图超出屏幕问题
					this.getXgList(res.data.cid)
					this.IndexShare()
				})
			},
			getPlList() {
				let obj = this
				getPlList({}, obj.artId).then(res => {
					console.log(res)
					obj.plNum = res.data.count
					obj.plList = res.data.list
					// let arr = []//评论列表
					// let brr = []//回复列表
					// if (res.data.list.length > 0) {
					// 	res.data.list.forEach(item => {
					// 		if (item.user) {
					// 			arr.push(item)
					// 		} else {
					// 			brr.push(item)
					// 		}
					// 	})
					// }
					
					// console.log(arr, brr, 'arr++brr')
				})
			},
			getXgList(cid) {
				let obj = this
				getXgList({
					type: cid
				}).then(res => {
					console.log(res)
					obj.xgList = res.data
				})
			},
			subPl() {
				let obj = this
				console.log('发布评论')
				if (obj.myPl == '') {
					return obj.$api.msg('请输入评论内容')
				}
				subPl({
					content: obj.myPl
				}, obj.artId).then(res => {
					obj.myPl = ''
					obj.$api.msg('发布成功！')
					this.getPlList()
				})
			},
			// 点赞
			dianZan() {
				let obj = this
				dianZan({}, obj.artId).then(res => {
					obj.$api.msg('点赞成功！')
				})
			}

		},
	}
</script>

<style lang="scss">
	page,
	.content {
		overflow-x: hidden;
		width: 100%;
		height: 100%;
	}

	.text-box {
		padding: 30rpx;
		border: 1rpx solid #EEEEEE;
		width: 100%;
		background-color: #fff;

		.text-title {
			display: flex;
			flex-direction: column;

			.text-1 {
				font-size: 40rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.text-2 {

				display: flex;
				align-items: center;

				.name {
					font-size: 25rpx;
					font-weight: 500;
					color: #666666;
				}

				.gg {
					margin: 0 15rpx;
					width: 3rpx;
					height: 25rpx;
					background: #EEEEEE;
				}

				.time {
					flex-shrink: 0;
					font-size: 22rpx;
					font-weight: 500;
					color: #999999;
				}
			}

		}
	}

	.text-content-title {
		margin: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #F5F5F5;
		padding: 17rpx 30rpx;
		border-radius: 7rpx;


		.title-left-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.image {
				width: 85rpx;
				height: 85rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 18rpx;


				image {
					width: 100%;
					height: 100%;
				}
			}

			.title-left-box-content {
				display: flex;
				flex-direction: column;

				.title-left-box-name {

					display: flex;
					justify-content: space-between;
					align-items: center;

					.name-title {
						font-size: 29rpx;
						font-weight: bold;
						color: #333333;
					}

					.name-dingyue {
						margin-left: 15rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #F3554F;
						width: 92rpx;
						height: 34rpx;
						border: 1rpx solid #F3554F;
						border-radius: 17rpx;
						line-height: 34rpx;
						text-align: center;


					}
				}
			}

			.title-left-box-title {
				text {
					font-size: 20rpx;
					font-weight: 500;
					color: #999999;
				}
			}
		}


		.tt {
			color: #B3B3B3;
		}

	}

	/deep/ .content-content {
		p {
			text-align: justify;
		}
	}

	.pinglun {
		background: #F8F8F8;
		padding: 20rpx 0;
	}

	.pinglun-box {
		background: #FFFFFF;

		.pinglun-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			line-height: 80rpx;
			margin-left: 30rpx;
		}

		.pinglun-content {
			display: flex;
			border-top: 1rpx solid #EEEEEE;
			// border-bottom: 1rpx solid #EEEEEE;
			padding: 30rpx 0 0 30rpx;

			.pinglun-content-left {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.pinglun-content-right {
				display: flex;
				justify-content: space-between;
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;

				.pinglun-name {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
				}

				.pinglun-tit {
					margin: 8rpx 0;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}

				.pinglun-time {
					font-size: 22rpx;
					font-weight: bold;
					color: #999999;
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.zhankai {
		padding: 10rpx 0;
		justify-content: center;
		display: flex;
		align-items: center;

		.all {}

		image {
			margin-left: 10rpx;
			width: 20rpx;
			height: 20rpx;

		}
	}

	.look {
		background: #FFFFFF;
		margin-top: 20rpx;

		.look-box {
			margin: 0 30rpx;

			.look-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				line-height: 80rpx;
				margin-left: 30rpx;
			}

			.look-content {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;

				border-top: 1px solid #EEEEEE;
				border-bottom: 1px solid #EEEEEE;

				.look-content-right {
					display: flex;
					align-items: center;

					.look-name {

						width: 37rpx;
						height: 37rpx;
						background: #EE6231;
						border-radius: 50%;
						font-size: 27rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 37rpx;
						text-align: center;

					}

					.look-tit {
						margin-left: 10rpx;
						width: 500rpx;

						font-size: 27rpx;
						font-weight: 500;
						color: #333333;
					}
				}

				.look-time {}
			}
		}
	}



	.send-box {
		// border-top: 1rpx solid #999999;
		background: #FFFFFF;
		padding: 30rpx;
		width: 100%;
		position: fixed;
		bottom: 0;

		display: flex;
		justify-content: space-around;
		align-items: center;

		.input {
			padding-left: 30rpx;
			width: 550rpx;
			height: 60rpx;
			background: #EEEEEE;
			border-radius: 31rpx;
		}

		image {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.pw {
		height: 120rpx;
	}
	.hf-wrap {
		width: 600rpx;
		background-color: #f4f4f4;
		margin-left: 120rpx;
		padding: 10rpx;
		padding-bottom: 0;
		font-size: 26rpx;
		border-radius: 10rpx;
		.hf {
			padding-bottom: 10rpx;
		}
	}
</style>