lineage-app/pages/show/show.vue

<template>
	<view id="moments" style="width: 100%;">

		<view class="moments__post">
			<view class="post-left">
				<image class="post_header" src="@/static/index/test/header04.jpg"></image>
			</view>

			<view class="post_right">
				<text class="post-username">昵称</text>
				<view id="paragraph" class="paragraph">文字内容</view>
				<!-- 相册 -->
				<view class="thumbnails">

				</view>
				<!-- 资料条 -->
				<view class="toolbar">
					<view class="timestamp">2020年9月25日 11:04 <text style="margin-left: 10rpx;color: #36648B;"  hover-class="tui-actionsheet-hover">删除</text></view>
					
					<view class="like">
						<image src="../../static/index/islike.png"></image>
					</view>
					<view class="comment" @tap="comment(index)">
						<image src="../../static/index/comment.png"></image>
					</view>
				</view>
				
			</view>
			<!-- 结束 post -->
			
		</view>
		<!-- 赞／评论区 -->
		<view class="moments__post" style="margin-top: 20rpx;">
			<view class="post_right" style="padding-left: 0;">
				
				<view class="post-footer" style="margin-top: 0;border-radius:8rpx">
					<view class="footer_content tui-flex">
						<view class="tui-center tui-col-1">
							<tui-icon style="position: absolute;top: 10px;" name="like" :size="16" color="#36648B"></tui-icon>
						</view>
						<view class="tui-center tui-col-11" style="display: -webkit-box;">
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
							<image class="post_toux" src="@/static/index/test/header01.jpg"></image>
						</view>
					</view>
					<view class="footer_content" style="padding: 10rpx;" @tap="reply">
						<view class="moments__huifu" style="width: 100%;">
							<view class="post-left">
								<image class="post_toux" src="@/static/index/test/header04.jpg"></image>
							</view>
						
							<view class="post_right">
								<view class="comment-nickname">昵称</view>
								<view class="comment-content">文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</view>
							</view>
							<!-- 结束 post -->
						</view>
						<view class="moments__huifu" style="width: 100%;">
							<view class="post-left">
								<image class="post_toux" src="@/static/index/test/header04.jpg"></image>
							</view>
						
							<view class="post_right">
								<text class="comment-nickname">昵称</text>
								<view class="comment-content"><text>回复<text class="comment-nickname" style="margin-left: 10rpx">王小虎：</text></text>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</view>
							</view>
							<!-- 结束 post -->
						</view>
					</view>
				</view>
			</view>	
		</view>

		<view class="foot" v-show="showInput">
			<chat-input @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder"></chat-input>
			<!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>

</template>

<script>
	import chatInput from '../../components/im-chat/chatinput.vue'; //input框
	import postData from '../../common/index/index.post.data.js';//朋友圈数据
	import tuiIcon from '@/components/thorui/tui-icon/tui-icon';
	
	export default {
		components: {
			chatInput,
			tuiIcon
		},
		data() {
			return {
				posts: postData,//模拟数据
				user_id: 4,
				username: 'Liuxy',

				index: '',
				comment_index: '',

				input_placeholder: '评论', //占位内容
				focus: false, //是否自动聚焦输入框
				is_reply: false, //回复还是评论
				showInput: false, //评论输入框

				screenHeight: '', //屏幕高度(系统)
				platform: '',
				windowHeight: '' ,//可用窗口高度(不计入软键盘)
				
				loadMoreText: "加载中...",
				showLoadMore: false
			}
		},
		computed:{
			
		},
		methods: {
			comment(index) {
				this.showInput = true; //调起input框
				this.focus = true;
				this.index = index;
			},
			reply(index, comment_index) {
				this.is_reply = true; //回复中
				this.showInput = true; //调起input框
				let replyTo = this.posts[index].comments.comment[comment_index].username;
				this.input_placeholder = '回复' + replyTo;
				this.index = index; //post索引
				this.comment_index = comment_index; //评论索引
				this.focus = true;
			},
			send_comment: function(message) {
			
				if (this.is_reply) {
					var reply_username = this.posts[this.index].comments.comment[this.comment_index].username;
					var comment_content = '回复' + reply_username + ':' + message.content;
				} else {
					var comment_content = message.content;
				}
				this.posts[this.index].comments.total += 1;
				this.posts[this.index].comments.comment.push({
					"uid": this.user_id,
					"username": this.username,
					"content": comment_content //直接获取input中的值
				});
				this.init_input();
			},
			blur: function() {
				this.init_input();
			},
			init_input() {
				this.showInput = false;
				this.focus = false;
				this.input_placeholder = '评论';
				this.is_reply = false;
			},
		}
	}
</script>

<style scoped>
	@import url("../../common/index/index.css");
	@import '@/static/style/thorui.css';
	.post_toux {
		
		width: 64rpx !important;
		height: 64rpx !important;
		border-radius: 10rpx;
		margin: 8rpx;
	}
	
	.moments__huifu {
		display: block;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		border-top: 1px solid #dddddd;
	}
</style>