微信小程序云开发-树洞小程序Treehole（个人页面功能实现）

这一章节主要的是实现个人页面的内的功能和内容。

个人页面里面所需要实现的大概有：查看别人与我的评论、点赞，查看我自己的帖子（普通和出售），还有一个伪聊天。

页面布局的话是使用的ColorUi的一个页面布局，github地址:https://github.com/weilanwl/ColorUI

先上一个效果图。

 

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

<view class='UCenter-bg'>

  <image class='Userhead' src='{{User_head_url}}' bindtap='uploadhead'></image>

<view >	
</view>
<modal hidden="{{hiddenmodalput}}" title="修改新名字" confirm-text="提交" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm"> 
<form bindsubmit="formSubmit"> 
 <input type='text' placeholder="请输入新名字" bindinput='ChangeName' name="userName" value='{{Username}}' auto-focus/>
 </form>
</modal>

  <view class='text-xl text-xl' bindtap="modalinput">
  {{Username}}
  </view>
  <text>已加入{{Join_Time}}天</text>
  <image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-wave"></image>

</view>
<view class='three_button_view' >
  <view class='three_button_view_in' bindtap="discussbutton">

    <view>
      <image src='../../images/discuss.png' style='width:60rpx;height:60rpx'></image>
    </view>
    <view style='margin-top:10rpx'>
    评论
    </view>
  </view>
  <view class='three_button_view_in'  bindtap="upbutton">
    <view>
      <image src='../../images/up.png' style='width:60rpx;height:60rpx'></image>
    </view>
    <view style='margin-top:10rpx'>
    点赞
    </view>
  </view>
   <view class='three_button_view_in'  bindtap="chatbutton">
    <view>
      <image src='../../images/chat.png' style='width:60rpx;height:60rpx'></image>
    </view>
    <view style='margin-top:10rpx'>
    消息
    </view>
  </view>
</view>
<view class='bottom_view'>
  <view class='bottom_center_view'>

    <view class='bottom_list' bindtap='toMinemypost'>
      <view class='list_button_view'>
        <image src='/images/book.png' style='width:60rpx;height:60rpx'></image>
      </view>
      <view class='list_button_text' >
        我的发布
      </view>
      <view class='list_button_jiantou'>
      ></view>
    </view>
    <view class='bottom_list'bindtap='toMineMySell'>
      <view class='list_button_view'>
            <image src='/images/shop.png' style='width:50rpx;height:50rpx'></image>
      </view>
      <view class='list_button_text'>
        我的出售
      </view>
      <view class='list_button_jiantou'>
      ></view>
    </view>

    <view class='bottom_list'>
      <view class='list_button_view'>
        <image src='/images/class.png' style='width:50rpx;height:50rpx'></image>
      </view>
       <view class='list_button_text'>
        我的课表
      </view>
      <view class='list_button_jiantou'>
      ></view>
    </view>
    
    <view class='bottom_list' style="position:relative">
      <view class='list_button_view'>
        <image src='/images/fankui.png' style='width:60rpx;height:60rpx'></image>
      </view>
      <view class='list_button_text' >
            反馈建议
      </view>
      <view class='list_button_jiantou'>
      ></view>
      <button  open-type='feedback' style="position:absolute;top:0;left:0;height:102rpx;width:100%;z-index:100"></button>
    </view>

    <view style='width:100%;height:100rpx; align-items: center;display: flex;font-size: 30rpx;  color:rgb(0, 0, 0,0.8);'>
      <view class='list_button_view'>
        <image src='/images/Aboutus.png' style='width:50rpx;height:50rpx'></image>
      </view>
      <view class='list_button_text' bindtap='ShowAboutus'>
       关于我们
      </view>
      <view class='list_button_jiantou'>
      ></view>
    </view>

  </view>
</view>

<view class='left_red_radius' wx:if="{{replyNumber>0}}">{{replyNumber}}</view>
<view class='center_red_radius' wx:if="{{toupNumber>0}}">{{toupNumber}}</view>
<view class='right_red_radius' wx:if="{{chatNumber>0}}">{{chatNumber}}</view>

这里有一个Number的计数，就是用来实现那种小红点消息的效果。

下面开始上功能的js。

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

<modal hidden="{{hiddenmodalput}}" title="修改新名字" confirm-text="提交" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm"> 
<form bindsubmit="formSubmit"> 
 <input type='text' placeholder="请输入新名字" bindinput='ChangeName' name="userName" value='{{Username}}' auto-focus/>
 </form>
</modal>

  <view class='text-xl text-xl' bindtap="modalinput">
  {{Username}}
  </view>

修改名字的框是一个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
                })
              }
            }
          }
        })
      }
    })
  },