微信小程序雲開發-樹洞小程序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
                })
              }
            }
          }
        })
      }
    })
  },