lineage-app/pages/main/friends/details.vue

<template>
	<view style="width: 100%;">
		<tui-modal :show="editname" @cancel="hide1" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<input  placeholder="请输入内容" class="tui-modal-input"/>
				<tui-button height="72rpx" :size="28" shape="circle" @click="handleClick1">保存</tui-button>
			</view>
		</tui-modal>
		<tui-modal :show="editbirthday" @cancel="hide2" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<input  placeholder="日期" class="tui-modal-input"/>
				<tui-button height="72rpx" :size="28" shape="circle" @click="handleClick2">保存</tui-button>
			</view>
		</tui-modal>
		<tui-modal :show="edithobby" @cancel="hide3" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<input  placeholder="爱好" class="tui-modal-input"/>
				<tui-button height="72rpx" :size="28" shape="circle" @click="handleClick3">保存</tui-button>
			</view>
		</tui-modal>
			<view v-if="" class="hello">
				<view id="moments">
					<view class="home-pic">
						<view class="home-pic-base">
							<view class="top-pic" @tap="personal">
								<image class="header" src="@/static/index/test/header06.jpg"></image>
							</view>
							<view class="top-name">{{userName}}</view>
							<view class="top-id">ID号:3867676552</view>
						</view>
					</view>
					
					<view style="margin-top: 30px;">
						<tui-tabs :tabs="navbar" backgroundColor="#fafafa" :height="88" :currentTab="currentTab>1?0:currentTab"
						 :sliderWidth="75" :sliderHeight="60" bottom="50%" color="#888" selectedColor="#C74547" :bold="true"
						 sliderBgColor="#C74547" @change="change" itemWidth="50%" :width="100" unlined></tui-tabs>
					</view>
				
					<view v-if="currentTab==0" style="padding: 30rpx 30rpx;" :key="index" :id="'post-'+index">

						<view class="tui-flex" style="width: 100%;height:128rpx;margin-bottom:30rpx;">
							<view class="tui-col-2" style="font-size: 40rpx;display: table-cell;">01<text style="font-size: 28rpx;">8月</text></view>
							<view class="tui-col-2">
								<image style="width: 100%;height: 100%;" src="@/static/images/basic/grid.png"></image>
							</view>
							<view class=" tui-col-8" style="margin-left: 20rpx;overflow: hidden;font-size: 28rpx;padding: 10rpx 0;">奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师</view>
						</view>
					</view>
					<view v-if="currentTab==1" style="padding: 30rpx 30rpx;" :key="index" :id="'post-'+index">
						<view style="margin: 10rpx 0;">
							<view class="tui-title">
								<view>姓名<tui-icon name="edit" :size="22" style="margin-left: 6rpx;" @click="name"></tui-icon></view>
							</view>
							<view class="tui-default" style="background: #fff;font-size: 24rpx;">
								<view class="contenfont">
									<view class="container" v-for="(item,index11) in textfont" :key="index11" :class="fold ? 'fold' : 'unfold'"  v-if="item.font !==''" >
										<label>    
											<span>{{item.font}}</span>
										</label>
									</view>
									<view style="width: 100%;text-align: center;">
										<view class="show" @click="btn" v-show="fold"><tui-icon name="arrowdown"></tui-icon></view>
										<view class="show" @click="btn" v-show="!fold"><tui-icon name="arrowup"></tui-icon></view>
									</view>
								</view>
							</view>
						</view>
						<view style="margin: 10rpx 0;">
							<view class="tui-title">
								<view>生日<tui-icon name="edit" :size="22" style="margin-left: 6rpx;" @click="birthday"></tui-icon></view>
							</view>
							<view class="tui-default" style="background: #fff;font-size: 24rpx;">
								<view class="contenfont">
									<view class="container" v-for="(item,index11) in textfont" :key="index11" :class="fold ? 'fold' : 'unfold'"  v-if="item.font !==''" >
									
										<label>    
										
											<span>{{item.font}}</span>
										
										</label>
									
									</view>
									
									<view style="width: 100%;text-align: center;">
									<view class="show" @click="btn" v-show="fold"><tui-icon name="arrowdown"></tui-icon></view>
									<view class="show" @click="btn" v-show="!fold"><tui-icon name="arrowup"></tui-icon></view>
									</view>
								</view>
							</view>
						</view>
						<view style="margin: 10rpx 0;">
							<view class="tui-title">
								<view>喜好<tui-icon name="edit" :size="22" style="margin-left: 6rpx;" @click="hobby"></tui-icon></view>
							</view>
							<view class="tui-default" style="background: #fff;font-size: 24rpx;">
								<view class="contenfont">
									<view class="container" v-for="(item,index11) in textfont" :key="index11" :class="fold ? 'fold' : 'unfold'"  v-if="item.font !==''" >
									
									<label>    
									
									<span>{{item.font}}</span>
									
									</label>
									
									</view>
									
									<view style="width: 100%;text-align: center;">
									<view class="show" @click="btn" v-show="fold"><tui-icon name="arrowdown"></tui-icon></view>
									<view class="show" @click="btn" v-show="!fold"><tui-icon name="arrowup"></tui-icon></view>
									</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>
			</view>
	</view>
</template>

<script>
	import chatInput from '@/components/im-chat/chatinput.vue'; //input框
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiIcon from '@/components/thorui/tui-icon/tui-icon';
	import tRtPopup from '@/components/views/t-rt-popup/t-rt-popup';
	import postData from '@/common/index/index.post.data.js';//族友圈数据
	import personalData from '@/common/index/personal.post.data.js';//我的近况数据
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import tuiModal from "@/components/thorui/tui-modal/tui-modal"
	
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		components: {
			chatInput,
			tuiButton,
			tRtPopup,
			tuiIcon,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			tuiModal
		},
		data() {
			return {
				editname: false,
				editbirthday: false,
				edithobby: false,
				navbar: [ {
					name: "TA的说说"
				}, {
					name: "TA详情"
				}],
				textfont:[{
				
				font:"合抱之木，生于毫末；九层之台，起于垒土。实现中华民族伟大复兴是一个长期而艰巨的过程，需要凝聚磅礴之力，才能实现质的飞跃实现中华民族伟大复兴的中国梦汇聚了强。大的中国力量2013年3月17日"
				
				    }],
				users: personalData,
				show: false,
				posts: postData,//模拟数据
				user_id: 4,
				username: 'Liuxy',
				index: '',
				fold:true,
				comment_index: '',
				currentTab: 0,
				input_placeholder: '评论', //占位内容
				focus: false, //是否自动聚焦输入框
				is_reply: false, //回复还是评论
				showInput: false, //评论输入框
		
				screenHeight: '', //屏幕高度(系统)
				platform: '',
				windowHeight: '' ,//可用窗口高度(不计入软键盘)
				
				loadMoreText: "加载中...",
				showLoadMore: false,
			}
		},
		mounted() {
			
			uni.getStorage({
				key: 'posts',
				success: function (res) {
					console.log(res.data);
					this.posts = res.data;
				}
			});
		
		},
		onLoad() {
			uni.getSystemInfo({ //获取设备信息
				success: (res) => {
					this.screenHeight = res.screenHeight;
					this.platform = res.platform;
				}
			});
			uni.startPullDownRefresh();
		},
		onShow() {
			uni.onWindowResize((res) => { //监听窗口尺寸变化,窗口尺寸不包括底部导航栏
				if(this.platform === 'ios'){
					this.windowHeight = res.size.windowHeight;
					this.adjust();
				}else{
					if (this.screenHeight - res.size.windowHeight > 60 && this.windowHeight <= res.size.windowHeight) {
						this.windowHeight = res.size.windowHeight;
						this.adjust();
					}
				}
			});
		},
		onHide() {
			
		},
		onUnload() {
			this.max = 0,
				this.data = [],
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() { //监听上拉触底事件
			console.log('onReachBottom');
			this.showLoadMore = true;
			setTimeout(() => {
				//获取数据
				if (this.posts.length < 20){//测试数据
					this.posts = this.posts.concat(this.posts);
				}else{
					this.loadMoreText = "暂无更多";
				}
			}, 1000);
		},
		onPullDownRefresh() { //监听下拉刷新动作
			console.log('onPullDownRefresh');
			// 这里获取数据
			setTimeout(function() {
				//初始化数据
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1000);
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				this.$refs.rtBubble.toggle();
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		methods: {
			name() {
				this.editname = true;
			},
			hide1() {
				this.editname = false;
			},
			handleClick1() {
				this.hide1();
			},
			birthday() {
				this.editbirthday = true;
			},
			hide2() {
				this.editbirthday = false;
			},
			handleClick2() {
				this.hide2();
			},
			hobby() {
				this.edithobby = true;
			},
			hide3() {
				this.edithobby = false;
			},
			handleClick3() {
				this.hide3();
			},
			btn:function(){      // 收起 展开
			
			this.fold=!this.fold;
			
			},
			open(){
			         this.$refs.popup.open()
			      },
			close(){
			         this.$refs.popup.close()
			      },
			change(e) {
				this.currentTab = e.index
			},
			showTips: function(e) {
				let index = e.currentTarget.dataset.index;
				let options = {
					msg: this.basicData[index].msg,
					duration: this.basicData[index].duration || 2000,
					type: this.basicData[index].type
				};
				this.$refs.toast.showTips(options);
			},
			switchTabs: function(e) {
				this.index = e.currentTarget.dataset.index
			},
			friends: function() {
				uni.navigateTo({
					url: './friends/friends'
				});
			},
			join: function() {
				uni.navigateTo({
					url: './join/join'
				});
			},
			establish: function() {
				uni.navigateTo({
					url: './establish/establish'
				});
			},
			personal: function() {
				uni.navigateTo({
					url: './personal/personal'
				});
			},
			loginurl: function() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			rtBubble() {
				this.$refs.rtBubble.toggle();
			},
			topBubble() {
				this.show = !this.show;
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			like(index) {
				if (this.posts[index].islike === 0) {
					this.posts[index].islike = 1;
					this.posts[index].like.push({
						"uid": this.user_id,
						"username": "," + this.username
					});
				} else {
					this.posts[index].islike = 0;
					this.posts[index].like.splice(this.posts[index].like.indexOf({
						"uid": this.user_id,
						"username": "," + this.username
					}), 1);
				}
			},
			comment(index) {
				this.showInput = true; //调起input框
				this.focus = true;
				this.index = index;
			},
			adjust() { //当弹出软键盘发生评论动作时,调整页面位置pageScrollTo
				return;
				uni.createSelectorQuery().selectViewport().scrollOffset(res => {
					var scrollTop = res.scrollTop;
					let view = uni.createSelectorQuery().select("#post-" + this.index);
					view.boundingClientRect(data => {
						console.log("data:" + JSON.stringify(data));
						console.log("手机屏幕高度:" + this.screenHeight);
						console.log("竖直滚动位置" + scrollTop);
						console.log("节点离页面顶部的距离为" + data.top);
						console.log("节点高度为" + data.height);
						console.log("窗口高度为" + this.windowHeight);
			
						uni.pageScrollTo({
							scrollTop: scrollTop - (this.windowHeight - (data.height + data.top + 45)), //一顿乱算
							// scrollTop: 50, 
							duration: 300
						});
					}).exec();
				}).exec();
			},
			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;
			},
			blur: function() {
				this.init_input();
			},
			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();
			},
			init_input() {
				this.showInput = false;
				this.focus = false;
				this.input_placeholder = '评论';
				this.is_reply = false;
			},
			previewImage(imageList, image_index) {
				var current = imageList[image_index];
				uni.previewImage({
					current: current,
					urls: imageList
				});
			},
			goPublish() {
				uni.navigateTo({
					url: './publish/publish',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		}

	}
</script>

<style>
	@import url("@/common/index/index.css");
	@import '@/static/style/thorui.css';
	
	.tui-modal-input {
		width: 80%;
		border-bottom: 1rpx solid #e6e6e6;
		margin: 30rpx auto 50rpx;
		padding-bottom: 20rpx;
		font-size: 32rpx;
	}
	
.fold{
	height: 120rpx;
	    overflow: hidden;
	    padding: 20rpx 20rpx 0px 20rpx;
}

.unfold{height: auto;
	    overflow: hidden;
	    padding: 20rpx 20rpx 0px 20rpx;}

	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 100%;
	}
	
	.uni-loadmore{
		height:80upx;
		line-height:80upx;
		text-align:center;
		padding-bottom:30upx;
	}
	
	.tui-subsection {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 80upx auto 20upx;
		border-radius: 10rpx;
		overflow: hidden;
		transform: translateZ(0);
		border: 0;
		position: relative;
		border: 1rpx solid #5677fc;
	}
	
	.tui-subsection-item {
		position: relative;
		z-index: 10;
	}
	.tui-subsection view {
		flex: 1;
		font-size: 28rpx;
		text-align: center;
		padding: 10rpx 30rpx;
		color: #5677fc;
		position: relative;
		border-right: 1rpx solid #5677fc;
	}
	.tui-last-child {
		border-right: 0 !important;
	}
	
	.tui-subsection .tui-active {
		background-color: #5677fc;
		color: #fff;
	}
	
	.title {
		color: #8f8f94;
		margin-top: 210upx;
	}

	.ul {
		font-size: 110upx;
		color: #8f8f94;
		margin-top: 210upx;
		width: 100%;
	}

	.ul>view {
		line-height: 50rpx;
	}
	
	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}
	
	.tui-title {
		width: 100%;
		box-sizing: border-box;
		font-weight: bold;
	}
	
	.tui-btn-box {
		width: 100%;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		position: relative;
	}
	
	.tui-chat-item {
		width: 100%;
		padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
	}
	
	.tui-chat-box {
		max-width: 70%;
	}
	
	.tui-user-name {
		font-size: 24rpx;
		color: #999;
	}
	
	.tui-chat-text {
		width: 100%;
		min-width: 40rpx;
		padding: 18rpx 24rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		word-break: break-all;
		box-sizing: border-box;
	}
	
	.tui-user-avatar {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}
	
	.tui-mr {
		margin-right: 24rpx;
	}
	
	.tui-ml {
		margin-left: 24rpx;
	}
	
	.tui-flex-end {
		justify-content: flex-end;
	}
	
	.tui-chat-text {
		width: 100%;
		min-width: 40rpx;
		padding: 18rpx 24rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		word-break: break-all;
		color: #fff;
		box-sizing: border-box;
	}
	
	.tui-menu-item {
		width: 100%;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}
</style>