微信小程序云开发-树洞小程序Treehole小我页面功能实现

标签:程序,开发,树洞,小我,页面,功能,实现 发布时间:2021年01月23日 点击19
这一章节重要的是实现小我页面的内的功能和内容。 小我页面里面所必要实现的也许有:查看别人与我的评论、点赞,查看我本身的帖子(通俗和出售),还有一个伪聊天。

先上一个结果图。

首先的话是上一个这个主页面的wxml:

  1. <view class='UCenter-bg'>
  2. <image class='Userhead' src='{{User_head_url}}' bindtap='uploadhead'></image>
  3. <view >
  4. </view>
  5. <modal hidden="{{hiddenmodalput}}" title="修改新名字" confirm-text="提交" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm">
  6. <form bindsubmit="formSubmit">
  7. <input type='text' placeholder="请输入新名字" bindinput='ChangeName' name="userName" value='{{Username}}' auto-focus/>
  8. </form>
  9. </modal>
  10. <view class='text-xl text-xl' bindtap="modalinput">
  11. {{Username}}
  12. </view>
  13. <text>已加入{{Join_Time}}天</text>
  14. <image src="https://image.weilanwl3564/gif/wave.gif" mode="scaleToFill" class="gif-wave"></image>
  15. </view>
  16. <view class='three_button_view' >
  17. <view class='three_button_view_in' bindtap="discussbutton">
  18. <view>
  19. <image src='../../images/discuss.png' style='width:60rpx;height:60rpx'></image>
  20. </view>
  21. <view style='margin-top:10rpx'>
  22. 评论
  23. </view>
  24. </view>
  25. <view class='three_button_view_in' bindtap="upbutton">
  26. <view>
  27. <image src='../../images/up.png' style='width:60rpx;height:60rpx'></image>
  28. </view>
  29. <view style='margin-top:10rpx'>
  30. 点赞
  31. </view>
  32. </view>
  33. <view class='three_button_view_in' bindtap="chatbutton">
  34. <view>
  35. <image src='../../images/chat.png' style='width:60rpx;height:60rpx'></image>
  36. </view>
  37. <view style='margin-top:10rpx'>
  38. 新闻
  39. </view>
  40. </view>
  41. </view>
  42. <view class='bottom_view'>
  43. <view class='bottom_center_view'>
  44. <view class='bottom_list' bindtap='toMinemypost'>
  45. <view class='list_button_view'>
  46. <image src='/images/book.png' style='width:60rpx;height:60rpx'></image>
  47. </view>
  48. <view class='list_button_text' >
  49. 我的发布
  50. </view>
  51. <view class='list_button_jiantou'>
  52. ></view>
  53. </view>
  54. <view class='bottom_list'bindtap='toMineMySell'>
  55. <view class='list_button_view'>
  56. <image src='/images/shop.png' style='width:50rpx;height:50rpx'></image>
  57. </view>
  58. <view class='list_button_text'>
  59. 我的出售
  60. </view>
  61. <view class='list_button_jiantou'>
  62. ></view>
  63. </view>
  64. <view class='bottom_list'>
  65. <view class='list_button_view'>
  66. <image src='/images/class.png' style='width:50rpx;height:50rpx'></image>
  67. </view>
  68. <view class='list_button_text'>
  69. 我的课表
  70. </view>
  71. <view class='list_button_jiantou'>
  72. ></view>
  73. </view>
  74. <view class='bottom_list' style="position:relative">
  75. <view class='list_button_view'>
  76. <image src='/images/fankui.png' style='width:60rpx;height:60rpx'></image>
  77. </view>
  78. <view class='list_button_text' >
  79. 反馈建议
  80. </view>
  81. <view class='list_button_jiantou'>
  82. ></view>
  83. <button open-type='feedback' style="position:absolute;top:0;left:0;height:102rpx;width:100%;z-index:100"></button>
  84. </view>
  85. <view style='width:100%;height:100rpx; align-items: center;display: flex;font-size: 30rpx; color:rgb(0, 0, 0,0.8);'>
  86. <view class='list_button_view'>
  87. <image src='/images/Aboutus.png' style='width:50rpx;height:50rpx'></image>
  88. </view>
  89. <view class='list_button_text' bindtap='ShowAboutus'>
  90. 关于我们
  91. </view>
  92. <view class='list_button_jiantou'>
  93. ></view>
  94. </view>
  95. </view>
  96. </view>
  97. <view class='left_red_radius' wx:if="{{replyNumber>0}}">{{replyNumber}}</view>
  98. <view class='center_red_radius' wx:if="{{toupNumber>0}}">{{toupNumber}}</view>
  99. <view class='right_red_radius' wx:if="{{chatNumber>0}}">{{chatNumber}}</view>

这里有一个Number的计数,就是用来实现那种小红点新闻的结果。

下面开始上功能的js。

首先是比较简单的修改名字和头像,对应的wxml这一段代码。

  1. <modal hidden="{{hiddenmodalput}}" title="修改新名字" confirm-text="提交" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm">
  2. <form bindsubmit="formSubmit">
  3. <input type='text' placeholder="请输入新名字" bindinput='ChangeName' name="userName" value='{{Username}}' auto-focus/>
  4. </form>
  5. </modal>
  6. <view class='text-xl text-xl' bindtap="modalinput">
  7. {{Username}}
  8. </view>

修改名字的框是一个modal,当点击的时候弹出。

下面这一部分是用来修改名字的小功能,由于modal的关系网站优化公司,不益处理,键入的时候之前的会覆盖加油站税控,所以用两个变量来存。

  1. //点击按钮
  2. modalinput: function () {
  3. this.setData({
  4. Oldname: this.data.Username,
  5. hiddenmodalput: !this.data.hiddenmodalput
  6. })
  7. console.log(this.data.Oldname)
  8. },
  9. //取消按钮
  10. cancel: function () {
  11. let that=this
  12. that.setData({
  13. hiddenmodalput: true
  14. });
  15. if (that.data.Oldname != that.data.Username){
  16. that.setData({
  17. Username:that.data.Oldname
  18. });
  19. }
  20. },
  21. //确认修改名字
  22. confirm: function (e) {
  23. let that=this
  24. this.setData({
  25. hiddenmodalput: true
  26. })
  27. if(this.data.Oldname!=this.data.Username){
  28. wx.cloud.callFunction({
  29. name: 'Assistant_update_Username',
  30. data: {
  31. Usernewname: that.data.Username,
  32. User_inf_id: that.data.U_id
  33. },
  34. success: function (res) {
  35. wx.showToast({
  36. title: '修改成功',
  37. icon: 'success',
  38. duration: 1500
  39. })
  40. },
  41. fail: err => {
  42. console.log('error:', err)
  43. }
  44. })
  45. }
  46. },
  47. ChangeName: function(e){
  48. this.setData({
  49. Username: e.detail.value
  50. })
  51. },

下面这个是实现替换小我头像的功能成都人事考试中心,跟上传图片的原理是一样的模块电源,唯一不一样的就是要更新用户信息。

  1. uploadhead:function(){
  2. let that=this
  3. wx.chooseImage({
  4. count: 1,
  5. sizeType: ['compressed'],
  6. sourceType: ['album', 'camera'],
  7. success: function (res) {
  8. Promise.all(res.tempFilePaths.map((value) => {
  9. return wx.cloud.uploadFile({
  10. cloudPath: Date.now() + parseInt(Math.random() * 100) + value.match(/\.[^.]+?$/)[0],
  11. filePath: value,
  12. })
  13. })).then(res => {
  14. return res.map((res) => {
  15. return res.fileID
  16. });
  17. }).then(res => {
  18. that.setData({
  19. User_head_url:res[0]
  20. })
  21. wx.cloud.callFunction({
  22. name: 'Assistant_Up_Userhead',
  23. data: {
  24. User_head: res[0],
  25. User_inf_id:that.data.U_id
  26. },
  27. success: function (res) {
  28. wx.showToast({
  29. title: '修改成功',
  30. icon: 'success',
  31. duration: 1500
  32. })
  33. },
  34. fail: err => {
  35. console.log('error:', err)
  36. }
  37. })
  38. })7514ch((exp) => {
  39. console.log(exp);
  40. })
  41. }
  42. });
  43. },

然后进入这个页面的话,必要加载数据,例如要有右上角小红点的结果,就是判断时间戳的前后时间。

  1. onLoad: function (options) {
  2. var that = this
  3. wx.hideTabBarRedDot({
  4. index: 1,
  5. })
  6. let Nowtime=Date.now();
  7. db.collection('Assistant_User').where({
  8. _openid: wx.getStorageSync("myOpenId"),
  9. }).get({
  10. success: res => {
  11. if (86400000>(Nowtime - res.data[0].Creat_user_Time))
  12. {
  13. Nowtime=1;
  14. }
  15. else{
  16. Nowtime=parseInt((Nowtime - res.data[0].Creat_user_Time) / 86400000)+1
  17. }
  18. console.log(Nowtime)
  19. that.setData({
  20. Username:res.data[0].Username,
  21. User_head_url:res.data[0].User_head_url,
  22. Last_to_Reply: res.data[0].Last_to_Reply,
  23. Last_toup_Time: res.data[0].Last_toup_Time,
  24. U_id:res.data[0]._id,
  25. Join_Time: Nowtime
  26. })
  27. db.collection('Assistant_Up').where({
  28. Up_id: wx.getStorageSync("myOpenId"),
  29. }).get({
  30. success: res => {
  31. for (var i = 0; i < res.data.length; i++) {
  32. if (res.data[i].Time_s > that.data.Last_toup_Time) {
  33. that.setData({
  34. toupNumber: that.data.toupNumber + 1
  35. })
  36. }
  37. }
  38. }
  39. })
  40. db.collection('My_ReplyData').where({
  41. PostUserId: wx.getStorageSync("myOpenId"),
  42. }).get({
  43. success: res => {
  44. // console.log(res.data)
  45. for (var i = 0; i < res.data.length; i++) {
  46. if (res.data[i].time > that.data.Last_toup_Time) {
  47. that.setData({
  48. replyNumber: that.data.replyNumber + 1
  49. })
  50. }
  51. }
  52. }
  53. })
  54. db.collection('Assistant_Sell_Intention').where({
  55. buypostopenid: wx.getStorageSync("myOpenId"),
  56. }).get({
  57. success: res => {
  58. for (var i = 0; i < res.data.length; i++) {
  59. if (res.data[i].Time_s > that.data.Last_toup_Time) {//改成最后进入聊天的时间
  60. that.setData({
  61. chatNumber: that.data.chatNumber + 1
  62. })
  63. }
  64. }
  65. }
  66. })
  67. }
  68. })
  69. },

 

手机网站建设