微信小程序云开发-树洞小程序Treehole（个人页面功能实现）
这一章节主要的是实现个人页面的内的功能和内容。
个人页面里面所需要实现的大概有：查看别人与我的评论、点赞，查看我自己的帖子（普通和出售），还有一个伪聊天。
页面布局的话是使用的ColorUi的一个页面布局，github地址:https://github.com/weilanwl/ColorUI
先上一个效果图。
首先的话是上一个这个主页面的wxml：
{{Username}}
已加入{{Join_Time}}天
评论
点赞
消息
我的发布
>
我的出售
>
我的课表
>
反馈建议
>
关于我们
>
{{replyNumber}}
{{toupNumber}}
{{chatNumber}}
这里有一个Number的计数，就是用来实现那种小红点消息的效果。
下面开始上功能的js。
首先是比较简单的修改名字和头像，对应的wxml这一段代码。
{{Username}}
修改名字的框是一个modal，当点击的时候弹出。
下面这一部分是用来修改名字的小功能，因为modal的关系，不好处理，键入的时候之前的会覆盖，所以用两个变量来存。
//点击按钮
modalinput: function () {
this.setData({
Oldname: this.data.Username,
hiddenmodalput: !this.data.hiddenmodalput
})
console.log(this.data.Oldname)
},
//取消按钮
cancel: function () {
let that=this
that.setData({
hiddenmodalput: true
});
if (that.data.Oldname != that.data.Username){
that.setData({
Username:that.data.Oldname
});
}
},
//确认修改名字
confirm: function (e) {
let that=this
this.setData({
hiddenmodalput: true
})
if(this.data.Oldname!=this.data.Username){
wx.cloud.callFunction({
name: 'Assistant_update_Username',
data: {
Usernewname: that.data.Username,
User_inf_id: that.data.U_id
},
success: function (res) {
wx.showToast({
title: '修改成功',
icon: 'success',
duration: 1500
})
},
fail: err => {
console.log('error:', err)
}
})
}
},
ChangeName: function(e){
this.setData({
Username: e.detail.value
})
},下面这个是实现更换个人头像的功能，跟上传图片的原理是一样的，唯一不一样的就是要更新用户信息。
uploadhead:function(){
let that=this
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
Promise.all(res.tempFilePaths.map((value) => {
return wx.cloud.uploadFile({
cloudPath: Date.now() + parseInt(Math.random() * 100) + value.match(/\.[^.]+?$/)[0],
filePath: value,
})
})).then(res => {
return res.map((res) => {
return res.fileID
});
}).then(res => {
that.setData({
User_head_url:res[0]
})
wx.cloud.callFunction({
name: 'Assistant_Up_Userhead',
data: {
User_head: res[0],
User_inf_id:that.data.U_id
},
success: function (res) {
wx.showToast({
title: '修改成功',
icon: 'success',
duration: 1500
})
},
fail: err => {
console.log('error:', err)
}
})
}).catch((exp) => {
console.log(exp);
})
}
});
},然后进入这个页面的话，需要加载数据，例如要有右上角小红点的效果，就是判断时间戳的前后时间。
onLoad: function (options) {
var that = this
wx.hideTabBarRedDot({
index: 1,
})
let Nowtime=Date.now();
db.collection('Assistant_User').where({
_openid: wx.getStorageSync("myOpenId"),
}).get({
success: res => {
if (86400000>(Nowtime - res.data[0].Creat_user_Time))
{
Nowtime=1;
}
else{
Nowtime=parseInt((Nowtime - res.data[0].Creat_user_Time) / 86400000)+1
}
console.log(Nowtime)
that.setData({
Username:res.data[0].Username,
User_head_url:res.data[0].User_head_url,
Last_to_Reply: res.data[0].Last_to_Reply,
Last_toup_Time: res.data[0].Last_toup_Time,
U_id:res.data[0]._id,
Join_Time: Nowtime
})
db.collection('Assistant_Up').where({
Up_id: wx.getStorageSync("myOpenId"),
}).get({
success: res => {
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].Time_s > that.data.Last_toup_Time) {
that.setData({
toupNumber: that.data.toupNumber + 1
})
}
}
}
})
db.collection('My_ReplyData').where({
PostUserId: wx.getStorageSync("myOpenId"),
}).get({
success: res => {
// console.log(res.data)
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].time > that.data.Last_toup_Time) {
that.setData({
replyNumber: that.data.replyNumber + 1
})
}
}
}
})
db.collection('Assistant_Sell_Intention').where({
buypostopenid: wx.getStorageSync("myOpenId"),
}).get({
success: res => {
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].Time_s > that.data.Last_toup_Time) {//改成最后进入聊天的时间
that.setData({
chatNumber: that.data.chatNumber + 1
})
}
}
}
})
}
})
},