278 lines
11 KiB
Vue
278 lines
11 KiB
Vue
<template>
|
||
<view id="moments">
|
||
|
||
<view class="home-pic">
|
||
<view class="home-pic-base">
|
||
<view class="top-pic">
|
||
<image class="header" src="../../static/chat/index/test/header06.jpg" @tap="test"></image>
|
||
</view>
|
||
<view class="top-name">Liuxy</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view 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/chat/index/islike.png':'../../static/chat/index/like.png'">
|
||
</image>
|
||
</view>
|
||
<view class="comment" @tap="comment(index)">
|
||
<image src="../../static/chat/index/comment.png"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 赞／评论区 -->
|
||
<view class="post-footer">
|
||
<view class="footer_content">
|
||
<image class="liked" src="../../static/chat/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 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'; //朋友圈数据
|
||
|
||
export default {
|
||
components: {
|
||
chatInput
|
||
},
|
||
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,
|
||
}
|
||
},
|
||
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() {
|
||
// uni.offWindowResize(); //取消监听窗口尺寸变化
|
||
},
|
||
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) {
|
||
uni.navigateTo({
|
||
url: '/pages/chat/publish'
|
||
})
|
||
}
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
methods: {
|
||
test() {
|
||
this.navigateTo('../test/test');
|
||
},
|
||
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 scoped>
|
||
@import url("../../common/index/index.css");
|
||
</style>
|