小程序 朋友圈，点赞 ,评论，发布动态，功能，上传图片 -----发布动态
分析需要实现的功能
一、点击弹出输入内容的弹出框；
1、弹出输入框
2、隐藏那个底部导航条
二、上传图片
1、图片要在选择后，显示在弹出框，
2、图片要在选择后，要能预览，
3、图片要在选择后，要能删除，
4、图片要在选择后，要限制大小上传，
5、图片上传之前，要先进行审核（这部分后端可以进行的，前端需要云函数，我没弄懂，不好意思）
三、点击发表
点击发表的时候要进行内容审核，
1、影藏输入框
2、显示底部导航条
效果
前端相关代码
<view class='pupContentBG {{click?"showBG":"hideBG"}}{{option?"openBG":"closeBG"}}'
catchtap='clickPup' > </view>
<view class='pupContent {{click? "showContent": "hideContent"}} {{option? "open": "close"}}' hover-stop-propagation='true'>
<view class="bgTalkabout" >
<view class="profSubmit">
<button bindtap="profiSubmit">发表动态 </button>
</view>
<textarea class="textarea" bindinput='textTapTalk' value='{{talkValue}}' placeholder-class="textClass" placeholder="发表你的感想"> </textarea>
<view class="choosImg">
<block wx:for="{{tempFilePaths}}" wx:key="{{index}}" wx:key="index">
<view class="profList">
<image class="profImg" src="{{item}}" bindtap="talkPreImg" data-index="{{index}}" mode="aspectFill"></image>
<image class="deleImg" bindtap="delImage" data-index="{{index}}" src="/yb_mingpian/static/images/red_img/cha@2x.png"> </image>
</view>
</block>
<view class="profList profListAdd ">
<image class="addIMg" bindtap="choosImg"
src="{{imgUrl}}/4/goods/441080e485fb0a31cdcfe58f99254c35.png" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
<image src="{{imgUrl}}/4/public/upload/bargain/c8ee99090ae7c4bb078af23139626dd1.png"
class="fixedImg" bindtap="clickPup"></image>
css样式
/* =====发表动态 弹出层====== */
/* 设置显示的背景 */
.pupContent { width: 100%; background: #fff; position: absolute;
bottom: 0; box-shadow: 0 0 10rpx #333; height: 0; z-index: 999;}
.showBG { display: block;}
.hideBG { display: none;}
/* 弹出或关闭动画来动态设置内容高度 */
@keyframes slideBGtUp {
from { background: transparent; } to { background: rgba(0, 0, 0, 0.6); }
}
@keyframes slideBGDown {
from { background: rgba(0, 0, 0, 0.6); } to { background: transparent; }
}
/* 显示或关闭内容时动画 */
.openBG { animation: slideBGtUp 0.5s ease-in both;}
.closeBG { animation: slideBGDown 0.5s ease-in both;}
/* 设置显示内容 */
.showContent { display: block;}
.hideContent { display: none;}
/* 弹出或关闭动画来动态设置内容高度 */
@keyframes slideContentUp {
from { height: 0; } to { height: 1100rpx; }
}
@keyframes slideContentDown {
from { height: 1100rpx; } to { height: 0; }
}
/* 显示或关闭内容时动画 */
.open {
animation: slideContentUp 0.5s ease-in both;
}
.close {
animation: slideContentDown 0.5s ease-in both;
}
.textarea{ font-size: 32rpx; width: auto; background: #fbfbfb; margin: 30rpx;
box-sizing: border-box; padding: 20rpx; margin-top: 60rpx; height: 180rpx;}
.bgTalkabout{ background: #fff;}
.choosImg{ padding: 100rpx 30rpx 0;}
.profList{ width: 140rpx; height: 140rpx;
position: relative; display: inline-block; margin: 10rpx;
}
.profList .profImg{ width: 120rpx; height: 120rpx;}
.deleImg{ position: absolute; right: 0; top:-10%; width: 38rpx; height: 38rpx;
background: rgba(0, 0, 0, 0.5); border-radius: 38rpx
}
.addIMg{ width: 120rpx; height: 120rpx;}
.profListAdd{ background: #fbfbfb; display: flex;
justify-content: center; align-items: center;}
.profListAdd image{ width: 60rpx; height: 60rpx;}
.profSubmit{ border-top: 1px solid #eaeaea; display: inline-block; padding: 20rpx 0 0;}
.profSubmit button{ font-size: 32rpx; height: 70rpx; line-height: 70rpx;
background: rgb(13, 189, 145); color: #fff; float: right; margin-right: 30rpx;
}
.profSubmit .button-hover { background: rgb(103, 163, 148);}
.fixedImg{ position: fixed; bottom: 10%; right: 6%; width: 100rpx; height: 100rpx; }
js
// 用户点击显示动态 弹窗
clickPup: function() {
let _that = this;
if (!_that.data.click) {
wx.hideTabBar({ success: function(res) { } })
_that.setData({ click: true, })
}
if (_that.data.option) {
_that.setData({ option: false, })
// 关闭显示弹窗动画的内容，
setTimeout(() => { _that.setData({ click: false, })
wx.showTabBar({ success: function(res) { } })
}, 500)
} else {
_that.setData({ option: true })
}
}
// 选择图片 上传
choosImg: function() {
let that = this;
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'], // 指定是原图/压缩图，
sourceType: ['album', 'camera'], // 指定来源是相册/相机，
success: res => {
// 本地文件路径列表，
let tempFilePaths = res.tempFilePaths;
let tempF = res.tempFiles; //这个里面有图片大小size 信息
/**-上传到服务器 */
for (let i = 0; i < tempFilePaths.length; i++) {
if (tempF[i].size <= 300000) {
wx.uploadFile({
//此处往服务器上传的时候，后端那边要进行图片审核，
url: netUrl + 's=/web/People/upload_img',
filePath: tempFilePaths[i],
name: 'image',//后端规定好的字段的名称
formData: { 'mch_id': t.siteInfo.uniacid },
header: { "Content-Type": "multipart/form-data" },
success: function(res) {
wx.showLoading({
title: '上传中....',
mask: true,
success: function(red) {
console.log('=', res, red)
that.data.filePathImg.push(res.data)
//、将符合规范的图片在弹出框显示
that.setData({ tempFilePaths: that.data.filePathImg})
//showLoading 和hideLoading 要配对使用不然会报错，但是界面不受影响
wx.hideLoading()
}
})
}
});
} else {
a.toast('上传图片不能大于3M!')
}
}
}
})
},
// 发布动态
profiSubmit: function() {
console.log('filePathImg', this.data.filePathImg)
let filePathImg = this.data.filePathImg.toString();
let textTapTalk = this.data.textTalk;
var that = this;
if (textTapTalk) {
wx.request({
url: netUrl + 's=/web/People/send_comment',
data: {
uid: t.getCache("userinfo").uid,//发表动态的用户id
shaya_content: textTapTalk, //发表的文字内容
shaya_sid: filePathImg, // 图片路径
type: 1,
},
method: 'post',
success: (res) => {
if (res.data.code == 0) {
//发表成功后清空数据，影藏弹窗
that.onLoad();
that.clickPup();
that.setData({
talkValue: '',
tempFilePaths: [],
filePathImg: [],
isTalk: true
})
a.success("发布成功")
wx.showTabBar({ success: function(res) { } })
} else {
a.toast(res.data.message)
}
},
})
}else {
a.toast("内容不能为空")
}
},
// 取消发布
profOff: function() {
this.setData({ isTalk: true })
wx.showTabBar({
success: function(res) { console.log(res) }
})
},
//失去焦点，获取当前输入框内容，并保存
textTapTalk: function(e) {
console.log(e)
this.setData({
textTalk: e.detail.value
})
},
// 删除动态
deteilListdata: function(e) {
var listId = e.currentTarget.dataset.listid;//动态 id
wx.request({
url: netUrl + 's=amic_del' + '&id=' + listId,
method: 'get',
success: (res) => {
this.onLoad();//加载页面数据
a.success('删除成功')
},
})
},
/**
* 预览图片方法
*/
talkPreImg: function(e) {
let index = e.target.dataset.index;
let that = this;
wx.previewImage({
current: that.data.tempFilePaths[index],
urls: that.data.tempFilePaths,
success: function(res) {
wx.showToast({
title: '正在加载...',
icon: 'loading',
mask: true,
duration: 1000,
})
}
})
},
// 删除图片
delImage: function(e) {
let index = e.currentTarget.dataset.index;
this.data.tempFilePaths.splice(index, 1);
this.setData({
tempFilePaths: this.data.tempFilePaths
})
},
此项目，功能都实现了，但是有一个瑕疵，就是图片的大小的判断那里，有点不舒服，
没处理好，如果各位仁兄有什么好的办法，欢迎私信我
扫一扫
3772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
