lineage-app/pages/main/main.vue

<template>
	<view style="width: 100%;">
		<t-rt-popup ref="rtBubble"></t-rt-popup>
		<uni-popup ref="popup" type="center">
			<view>
				<tui-button type="warning" style="width: 200rpx;height: 200rpx;float: left;margin: 10rpx;" @tap="establish">
					<view>
						<image style="width: 100rpx;height:100rpx;vertical-align: text-top;" src="../../static/img/main/join.png">
						<view style="width: 100%;font-size: 24rpx;line-height: 1;">创建家族</view>
					</view>
				</tui-button>
				<tui-button style="width: 200rpx;height: 200rpx;float: right;margin: 10rpx;" @tap="join">
					<view>
						<image style="width: 100rpx;height:100rpx;vertical-align: text-top;" src="../../static/img/main/add.png">
						<view style="width: 100%;font-size: 24rpx;line-height: 1;">加入家族</view>
					</view>
				</tui-button>
			</view>
			<view style="position: absolute;top: 230rpx;width: 100%;">
				<tui-button plain @click="close">随便看看</tui-button>
				<tui-button style="margin-top: 10rpx;" plain type="white" @click="close">取消</tui-button>
			</view>
			
		</uni-popup>
		<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 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 class="top-button">
							<view style="float: left;">
							<tui-button type="warning" shadow width="170rpx" height="85rpx" :size="36" @tap="friends">+ 好友</tui-button>
							</view>
							<view style="float: right;">
							<tui-button type="danger" shadow width="170rpx" height="85rpx" :size="36" @click="open">+ 家族</tui-button>
							</view>
						</view>
					</view>
				</view>
				
				<view style="margin-top: 30px;">
					<tui-tabs :tabs="navbar" backgroundColor="#fafafa" :height="88" :currentTab="currentTab>2?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" class="moments__post" v-for="(post,index) in posts" :key="index" :id="'post-'+index">
					<view class="post-left">
						<image class="post_header" :src="post.header_image"></image>
					</view>
			
					<view class="post_right">
						<text class="post-username">{{post.username}}</text>
						<view id="paragraph" class="paragraph">{{post.content.text}}</view>
						<!-- 相册 -->
						<view class="thumbnails">
							<view :class="post.content.images.length === 1?'my-gallery':'thumbnail'" v-for="(image, index_images) in post.content.images" :key="index_images">
								<image class="gallery_img" lazy-load mode="aspectFill" :src="image" :data-src="image" @tap="previewImage(post.content.images,index_images)"></image>
							</view>
						</view>
						<!-- 资料条 -->
						<view class="toolbar">
							<view class="timestamp">{{post.timestamp}}</view>
							<view class="like" @tap="like(index)">
								<image :src="post.islike===0?'../../static/index/islike.png':'../../static/index/like.png'"></image>
							</view>
							<view class="comment" @tap="comment(index)">
								<image src="../../static/index/comment.png"></image>
							</view>
						</view>
						<!-- 赞／评论区 -->
						<view class="post-footer">
							<view class="footer_content">
								<image class="liked" src="../../static/index/liked.png"></image>
								<text class="nickname" v-for="(user,index_like) in post.like" :key="index_like">{{user.username}}</text>
							</view>
							<view class="footer_content" v-for="(comment,comment_index) in post.comments.comment" :key="comment_index" @tap="reply(index,comment_index)">
								<text class="comment-nickname">{{comment.username}}: <text class="comment-content">{{comment.content}}</text></text>
							</view>
						</view>
					</view>
					<!-- 结束 post -->
				</view>
				<view v-if="currentTab==1" 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;">今天</view>
						<view class="tui-center tui-col-2" style="background-color: #eaeaea;" @tap="goPublish" hover-class="tui-opcity">
							<tui-icon name="camera-fill" :size="24"></tui-icon>
						</view>
						<view class=" tui-col-8" style="margin-left: 20rpx;overflow: hidden;font-size: 28rpx;"></view>
					</view>
					<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" @tap="details">
							<image style="width: 100%;height: 100%;" src="../../static/images/basic/grid.png"></image>
						</view>
						<view class=" tui-col-8" @tap="details" style="margin-left: 20rpx;overflow: hidden;font-size: 28rpx;padding: 10rpx 0;">奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师奥术大师</view>
					</view>
				</view>
				<view v-if="currentTab==2" 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" style="margin-bottom: 50px;" 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: "族友圈"
				}, {
					name: "我都近况"
				}, {
					name: "个人详情"
				}],
				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;
				}
			});
		
		},
		onReady() {
			uni.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#c74547' });
		},
		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']),
		onLoad() {
			const loginType = uni.getStorageSync('login_type')
			if (loginType === 'local') {
				this.login(uni.getStorageSync('username'))
				return
			}
			let uniIdToken = uni.getStorageSync('uniIdToken')
			if (uniIdToken) {
				this.login(uni.getStorageSync('username'))
				uniCloud.callFunction({
					name: 'user-center',
					data: {
						action: 'checkToken',
					},
					success: (e) => {

						console.log('checkToken success', e);

						if (e.result.code > 0) {
							//token过期或token不合法，重新登录
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					},
					fail(e) {
						uni.showModal({
							content: JSON.stringify(e),
							showCancel: false
						})
					}
				})
			} else {
				this.guideToLogin()
			}
		},
		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
			},
			details: function() {
				uni.navigateTo({
					url: '../show/show'
				});
			},
			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: () => {}
				});
			},
			...mapMutations(['login']),
			guideToLogin() {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		}

	}
</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:80rpx;
		line-height:80rpx;
		text-align:center;
		padding-bottom:30rpx;
	}
	
	.tui-subsection {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 80rpx auto 20rpx;
		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: 210rpx;
	}

	.ul {
		font-size: 11rpx;
		color: #8f8f94;
		margin-top: 210rpx;
		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>