店铺详情下拉刷新优化，下载邀请图片功能添加
This commit is contained in:
277
pages/chat/index.vue
Normal file
277
pages/chat/index.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<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>
|
||||
273
pages/chat/publish.vue
Normal file
273
pages/chat/publish.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="page" @touchstart="touchStart" @touchend="touchEnd">
|
||||
<form>
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder="这一刻的想法..." v-model="input_content" />
|
||||
</view>
|
||||
<view class="uni-list list-pd">
|
||||
<view class="uni-list-cell cell-pd">
|
||||
<view class="uni-uploader">
|
||||
<view class="uni-uploader-head">
|
||||
<view class="uni-uploader-title"></view>
|
||||
<view class="uni-uploader-info">{{imageList.length}}/9</view>
|
||||
</view>
|
||||
<view class="uni-uploader-body">
|
||||
<view class="uni-uploader__files">
|
||||
<block v-for="(image,index) in imageList" :key="index">
|
||||
<view class="uni-uploader__file" style="position: relative;">
|
||||
<image class="uni-uploader__img" mode="aspectFill" :src="image"
|
||||
:data-src="image" @tap="previewImage"></image>
|
||||
<view class="close-view" @click="close(index)">×</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="uni-uploader__input-box" v-show="imageList.length < 9">
|
||||
<view class="uni-uploader__input" @tap="chooseImage"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer">
|
||||
<button type="default" class="feedback-submit" @click="publish">提交</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import image from '@/common/image.js';
|
||||
|
||||
var sourceType = [
|
||||
['camera'],
|
||||
['album'],
|
||||
['camera', 'album']
|
||||
]
|
||||
var sizeType = [
|
||||
['compressed'],
|
||||
['original'],
|
||||
['compressed', 'original']
|
||||
]
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// title: 'choose/previewImage',
|
||||
input_content: '',
|
||||
imageList: [],
|
||||
|
||||
|
||||
|
||||
sourceTypeIndex: 2,
|
||||
sourceType: ['拍照', '相册', '拍照或相册'],
|
||||
sizeTypeIndex: 2,
|
||||
sizeType: ['压缩', '原图', '压缩或原图'],
|
||||
countIndex: 8,
|
||||
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
|
||||
//侧滑返回start
|
||||
startX: 0, //点击屏幕起始位置
|
||||
movedX: 0, //横向移动的距离
|
||||
endX: 0, //接触屏幕后移开时的位置
|
||||
//end
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
this.imageList = [],
|
||||
this.sourceTypeIndex = 2,
|
||||
this.sourceType = ['拍照', '相册', '拍照或相册'],
|
||||
this.sizeTypeIndex = 2,
|
||||
this.sizeType = ['压缩', '原图', '压缩或原图'],
|
||||
this.countIndex = 8;
|
||||
},
|
||||
|
||||
methods: {
|
||||
async publish() {
|
||||
if (!this.input_content) {
|
||||
uni.showModal({
|
||||
content: '内容不能为空',
|
||||
showCancel: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '发布中'
|
||||
});
|
||||
|
||||
var location = await this.getLocation(); //位置信息,可删除,主要想记录一下异步转同步处理
|
||||
var images = [];
|
||||
for (var i = 0, len = this.imageList.length; i < len; i++) {
|
||||
var image_obj = {
|
||||
name: 'image-' + i,
|
||||
uri: this.imageList[i]
|
||||
};
|
||||
images.push(image_obj);
|
||||
}
|
||||
|
||||
uni.uploadFile({ //该上传仅为示例,可根据自己业务修改或封装,注意:统一上传可能会导致服务器压力过大
|
||||
url: 'moment/moments', //仅为示例，非真实的接口地址
|
||||
files: images, //有files时,会忽略filePath和name
|
||||
filePath: '',
|
||||
name: '',
|
||||
formData: { //后台以post方式接收
|
||||
'user_id': '1', //自己系统中的用户id
|
||||
'text': this.input_content, //moment文字部分
|
||||
'longitude': location.longitude, //经度
|
||||
'latitude': location.latitude //纬度
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: "发布成功"
|
||||
})
|
||||
uni.navigateBack({ //可根据实际情况使用其他路由方式
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log("e: " + JSON.stringify(e));
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: "发布失败,请检查网络"
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getLocation() { //h5中可能不支持,自己选择
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function(res) {
|
||||
resolve(res);
|
||||
},
|
||||
fail: (e) => {
|
||||
reject(e);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
close(e) {
|
||||
this.imageList.splice(e, 1);
|
||||
},
|
||||
chooseImage: async function() {
|
||||
if (this.imageList.length === 9) {
|
||||
let isContinue = await this.isFullImg();
|
||||
console.log("是否继续?", isContinue);
|
||||
if (!isContinue) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
uni.chooseImage({
|
||||
sourceType: sourceType[this.sourceTypeIndex],
|
||||
sizeType: sizeType[this.sizeTypeIndex],
|
||||
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList
|
||||
.length : this.count[this.countIndex],
|
||||
success: (res) => {
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
//提交压缩,因为使用了H5+ Api,所以自定义压缩目前仅支持APP平台
|
||||
var compressd = cp_images => {
|
||||
this.imageList = this.imageList.concat(cp_images) //压缩后的图片路径
|
||||
}
|
||||
image.compress(res.tempFilePaths, compressd);
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
this.imageList = this.imageList.concat(res
|
||||
.tempFilePaths) //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
|
||||
// #endif
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
isFullImg: function() {
|
||||
return new Promise((res) => {
|
||||
uni.showModal({
|
||||
content: "已经有9张图片了,是否清空现有图片？",
|
||||
success: (e) => {
|
||||
if (e.confirm) {
|
||||
this.imageList = [];
|
||||
res(true);
|
||||
} else {
|
||||
res(false)
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
res(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
previewImage: function(e) {
|
||||
var current = e.target.dataset.src
|
||||
uni.previewImage({
|
||||
current: current,
|
||||
urls: this.imageList
|
||||
})
|
||||
},
|
||||
touchStart: function(e) {
|
||||
this.startX = e.mp.changedTouches[0].pageX;
|
||||
},
|
||||
|
||||
touchEnd: function(e) {
|
||||
this.endX = e.mp.changedTouches[0].pageX;
|
||||
if (this.endX - this.startX > 200) {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
margin-top: 80upx;
|
||||
}
|
||||
|
||||
.cell-pd {
|
||||
padding: 20upx 30upx;
|
||||
}
|
||||
|
||||
.uni-textarea {
|
||||
width: auto;
|
||||
padding: 20upx 25upx;
|
||||
line-height: 1.6;
|
||||
height: 150upx;
|
||||
}
|
||||
|
||||
.uni-list::before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.uni-list:after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.list-pd {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.close-view {
|
||||
text-align: center;
|
||||
line-height: 30upx;
|
||||
height: 35upx;
|
||||
width: 35upx;
|
||||
background: #ef5350;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 1upx;
|
||||
right: 1upx;
|
||||
font-size: 35upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 750upx;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user