demingshangjia/pages/user/contentDetails.vue

<template>
	<view class="details">
		<view class="main">
			<view class="title">{{ info.article_title }}</view>
			<view class="detail">{{ info.article_content }}</view>
		</view>
		<view class="imgbox">
			<view v-if="type==1">
				<image :src="list" mode="" v-for="list in info.article_image"></image>
			</view>
			<view v-else>
				<video :src="info.video_path" controls></video>
			</view>
		</view>
		<view class="data-list">
			<view>
				<image src="/static/image/user/2.png"></image>
				<text>{{ info.comment_num }}</text>
			</view>
			<view>
				<image src="/static/image/user/3.png" v-if="0"></image>
				<image src="/static/image/user/7.png" v-else></image>
				<text>{{ info.collect_num }}</text>
			</view>
			<view>
				<image src="/static/image/user/4.png" v-if="0"></image>
				<image src="/static/image/user/6.png" v-else></image>
				<text>{{ info.like_num }}</text>
			</view>
		</view>
		<view class="comment-list">
			<view class="item" v-for="(item, index) in info.articlecomment" :key="index">
				<view class="info">
					<image></image>
					<view class="center">
						<view class="name">{{item.member_nickname}}</view>
						<view class="time">{{item.create_time}}</view>
					</view>
					<view class="btn" @click="showreply(item.id)">回复</view>
				</view>
				<view class="content u-line-1">{{item.content}}</view>
			</view>
		</view>
		<u-popup v-model="showChat" mode="bottom" :mask="false">
			<view class="chat">
				<view class="input-box">
					<input type="text" v-model="content"/>
					<view class="btn" @click="reply">发送</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {
			showChat: false,
			id: 0,
			info: {
				article_image: []
			},
			type:1,
			content:"",
			pid:null
		};
	},
	onLoad(option) {
		this.setNavTitle(option.current);
		this.type = option.current
		this.id = option.id;
		this.getdetail();
	},
	methods: {
		// 展示回复弹框
		showreply(id){
			this.showChat = true
			this.pid = id
		},
		// 回复评论
		reply(){
			if(this.content==""){
				this.$refs.uToast.show({
					title:"内容不能为空",
					type: 'error'
				});
				return
			}
			let that = this;
			this.$u.api.reply({
				pid:that.pid,
				content:that.content,
				article_id: that.id
			}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.pid = "";
					this.content = "";
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					});
				}
			});
		},
		// 设置顶部标题
		setNavTitle(current) {
			uni.setNavigationBarTitle({
				title: current == 1 ? '图文详情' : '视频详情'
			});
		},
		// 获取文章详情
		getdetail() {
			let that = this;
			this.$u.api.getdetail({
				article_id: that.id
			}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.info = res.data.article[0];
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.details {
	min-height: calc(100vh - var(--window-top));
	background-color: #ececec;
	.main {
		margin: 2rpx 0rpx 0;
		background-color: #ffffff;
		.title {
			width: 100%;
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
			padding: 30rpx 0;
		}
		.detail {
			width: 100%;
			text-indent: 40rpx;
			font-size: 26rpx;
			text-align: justify;
			padding: 0 30rpx 85rpx;
		}
	}
	.imgbox {
		width: 750rpx;
		display: flex;
		justify-content: flex-start;
		background-color: #FFFFFF;
		image {
			width: 210rpx;
			height: 210rpx;
			margin: 10rpx 15rpx;
		}
		video {
			width: 210rpx;
			height: 210rpx;
			margin: 10rpx 15rpx;
		}
	}
	.comment-list {
		.item {
			background-color: #ffffff;
			padding: 30rpx;
			margin-bottom: 2rpx;
			.info {
				display: flex;
				align-items: flex-end;
				margin-bottom: 20rpx;
				> image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					background-color: aqua;
				}
				.center {
					margin-right: auto;
					.name {
						font-size: 26rpx;
						color: rgba(51, 51, 51, 1);
						margin-bottom: auto;
					}
					.time {
						font-size: 22rpx;
						color: rgba(153, 153, 153, 1);
					}
				}
				.btn {
					font-size: 26rpx;
					color: rgba(51, 51, 51, 1);
				}
			}
			.content {
				margin-left: 80rpx;
				display: flex;
			}
		}
	}
	.data-list {
		background-color: #ffffff;
		display: flex;
		height: 88rpx;
		padding: 0 30rpx;
		align-items: center;
		justify-content: space-between;
		@mixin image-class($width) {
			> image {
				width: $width;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
		> view {
			display: flex;
			align-items: center;
			&:first-child {
				@include image-class(45rpx);
			}
			&:nth-child(2) {
				@include image-class(40rpx);
			}
			&:last-child {
				@include image-class(32rpx);
			}
			> text {
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
	.chat {
		background-color: #ececec;
		width: 100%;
		height: 98rpx;
		padding: 19rpx 30rpx;
		.input-box {
			background-color: #ffffff;
			width: 690rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			> input {
				flex: 1;
				padding: 10rpx 30rpx;
			}
			.btn {
				width: 90rpx;
				background: rgba(255, 120, 15, 1);
				border-radius: 25rpx;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 1);
				line-height: 50rpx;
				text-align: center;
				margin-right: 5rpx;
			}
		}
	}
}
</style>