微信小程序商品詳情 + 評論功能實現

這是一個商品展示並能進行評論和答復的功能頁面，

遇到的問題有：

1. 分享功能沒有辦法將json數據寫在地址中，只能傳id來進行獲取
2. 這里必須新加一個狀態用來判斷是否顯示x回復@x，因為我以前的判斷這個依據是如果回復的人是樓主則不顯示（評論其實就是回復的樓主），后來發現如果樓主回復了你，你再想回復樓主的話就無法顯示x回復@x，所以這里要加一個參數，所有回復的都是false，評論都是true，加上這個條件就能判斷出你是單純的評論還是回復了

<!--pages/wantDetail/wantDetail.wxml-->
<view class='qiu' bindtouchstart="touchstar">
  <view class='qiu_titleAndUser'>
    <text class='title'>{{title}}</text>
    <view class='user'>
      <image class='userImg' src='{{userImg}}'></image>
      <text class='userName' style='position: absolute; margin-left:20rpx;'>{{userName}}</text>
    </view>
    <view class='text_detail'>{{content}}</view>
    <image wx:if="{{imgUrl !==''}}" class='img' src='https://qhds.drefore.cn{{imgUrl}}'></image>
    <view class='three_but'>
      <view class='three_view'>
        <button class='share' open-type='share'>
          <image class='countImg' src="../../resources/images/share.png" />
        </button>
      </view>
      <view class='three_view'>
        <image bindtap='addWantImg' class='countImg' src='../../resources/images/anscount.png'></image>
        <text class='count'>{{count}}</text>
      </view>
      <view class='three_view'>
        <text class='time'>{{time}}</text>
      </view>
    </view>
  </view>
</view>
<view class='reply'>
  <view class='replyUser' wx:for="{{wantReplay}}" wx:key="{{index}}" bindtouchstart="touchstar">
    <block wx:if="{{item.replyName === userName && item.state === true}}">
      <image class='userImg' src='{{item.userImg}}'></image>
      <text class='userName' style='position: absolute; margin-left:20rpx;'>{{item.userName}}</text>
      <view class='reply_content' data-replyuserid='{{item.userID}}' data-replyname='{{item.userName}}' bindtap='getReplyUserID'>{{item.content}}</view>
      <view class='reply_time'>{{item.time}}</view>
    </block>
    <block wx:else>
      <image class='userImg' src='{{item.userImg}}'></image>
      <view class='huifu'>
        <text class='userName'>{{item.userName}}</text>
        <text class='huifu_text'>回復@</text>
        <text class='userName'>{{item.replyName}}</text>
      </view>
      <view class='reply_content' data-replyuserid='{{item.userID}}' data-replyname='{{item.userName}}' bindtap='getReplyUserID'>{{item.content}}</view>
      <view class='reply_time'>{{item.time}}</view>
    </block>
  </view>
</view>
<view class='ask'>
  <block wx:if="{{check}}">
    <input class='input' type='text' placeholder='我來評論' bindinput='contentInp' value='{{contentInp}}' focus='{{focus}}'></input>
    <button class='button' bindtap='addWant'>評論</button>
  </block>
  <block wx:else>
    <input class='input' type='text' placeholder='回復@{{replyName}}' bindinput='replyInp' value='{{replyInp}}' focus='{{focus}}'></input>
    <button class='button' bindtap='addWant'>評論</button>
  </block>
</view>

// pages/wantDetail/wantDetail.js
var app = getApp();
Page({
 
  /**
   * 頁面的初始數據
   * user開頭的數據都是樓主的
   */
  data: {
    wantID: 0,
    userID: 0, //userID
    replyUserID: 0, //回復哪個人的userID 默認等於樓主id
    replyName: "",
    count: 0,
    content: "",
    imgUrl: "",
    time: "",
    title: "",
    userName: "",
    userImg: "",
    limit: 5,
    wantReplay: [],
    contentInp: "",
    replyInp: "",
    focus: false,
    check: true, //默認顯示我來評論input
  },
 
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    this.setData({
      wantID: options.id
    })
    this.getWantDetail();
  },
 
  getWantDetail() {
    let params = {
      wantID: this.data.wantID,
      offset: 0,
      limit: this.data.limit
    }
    app.getWantDetail(params).then(res => {
      let wantDetail = [];
      for (var i = 0; i < res.data.wantDetail.length; i++) {
        if (res.data.wantDetail[i].pid === 0) {
          wantDetail = res.data.wantDetail[i]
          res.data.wantDetail.splice(i, 1)
        }
      }
      this.setData({
        wantReplay: res.data.wantDetail,
        count: wantDetail.count,
        content: wantDetail.content,
        imgUrl: wantDetail.imgUrl,
        time: wantDetail.time,
        title: wantDetail.title,
        userName: wantDetail.userName,
        userImg: wantDetail.userImg,
        userID: wantDetail.userID,
        replyUserID: wantDetail.userID,
      })
    })
  },
 
  onReachBottom: function() {
    this.data.limit = this.data.limit + 4
    this.getWantDetail();
  },
  //觸摸事件切換到回復樓主
  touchstar: function() {
    this.setData({
      check: true,
      focus: false,
      contentInp: "",
      replyInp: "",
    })
  },
  /**評論輸入框 */
  contentInp(e) {
    this.setData({
      contentInp: e.detail.value
    })
  },
  /**答復輸入框 */
  replyInp(e) {
    this.setData({
      replyInp: e.detail.value
    })
  },
 
  /**消息圖片點擊 */
  addWantImg() {
    this.setData({
      focus: true,
    })
  },
  addWant() {
    if (this.data.contentInp.length > 100) {
      wx.showToast({
        title: '請將字數控制在100字以內哦',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else {
      if (this.data.replyUserID === this.data.userID && this.data.check === true) {
        this.addComment();
      } else {
        this.addReply();
      }
    }
  },
 
  /**發表評論 */
  addComment() {
    let params = {
      pID: this.data.wantID,
      userID: app.globalData.userID,
      content: this.data.contentInp,
      replyUserID: this.data.userID,
      type: 1,
      state: true
    }
    app.addReply(params).then(res => {
      if (res.state === 1) {
        this.setData({
          contentInp: ""
        })
        wx.showToast({
          title: '評論成功',
          icon: "none",
          duration: 1000,
          mask: true,
        })
        this.getWantDetail();
      }
    })
  },
  /**點擊評論獲取要回復的人的id */
  getReplyUserID(e) {
    let replyID = e.currentTarget.dataset.replyuserid;
    if (replyID === app.globalData.userID) {
      wx.showToast({
        title: '請不要回復自己哦',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else {
      this.setData({
        replyUserID: replyID,
        replyName: e.currentTarget.dataset.replyname,
        focus: true,
        check: false
      })
    }
  },
  /**回復 */
  addReply() {
    let params = {
      pID: this.data.wantID,
      userID: app.globalData.userID,
      content: this.data.replyInp,
      replyUserID: this.data.replyUserID,
      type: 1,
      state: false
    }
    app.addReply(params).then(res => {
      if (res.state === 1) {
        this.setData({
          replyInp: "",
          check: true
        })
        wx.showToast({
          title: '評論成功',
          icon: "none",
          duration: 1000,
          mask: true,
        })
        this.getWantDetail();
      }
    })
  },
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function(ops) {
    wx.showShareMenu({
      withShareTicket: true
    })
    return {
      title: 'xxxx',
      path: 'pages/wantDetail/wantDetail?id=' + this.data.wantID,
      imageUrl: "https://qhds.drefore.cn" + this.data.imgUrl,
      success: function(res) {
        console.log("success" + res)
      },
      fail: function(res) {
        console.log("fail" + res)
      }
    }
  },
})

/* pages/wantDetail/wantDetail.wxss */
 
page {
  background-color: #f1f5fc;
}
 
.qiu {
  width: 100%;
  background-color: white;
}
 
.qiu_titleAndUser {
  margin-left: 20rpx;
}
 
.title {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.user {
  width: 100%;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
 
.userImg {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
 
.userName {
  font-size: 30rpx;
  color: #566f98;
}
 
.text_detail {
  font-size: 30rpx;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}
 
.img {
  width: 90%;
  height: 500rpx;
  margin: 20rpx 20rpx;
}
 
.countImg {
  width: 50rpx;
  height: 50rpx;
}
 
.count {
  font-size: 20rpx;
  margin-left: 5rpx;
}
 
.time {
  font-size: 25rpx;
  color: #757575;
  margin-left: 410rpx;  
}
 
.reply {
  width: 100%;
  background-color: white;
  margin-top: 20rpx;
  margin-bottom: 100rpx;
}
 
.replyUser {
  padding-top: 10rpx;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
  width: 100%;
}
 
.reply_content {
  width: 80%;
  font-size: 30rpx;
  margin-left: 90rpx;
  margin-top: -30rpx;
}
 
.reply_time {
  width: 260rpx;
  height: 50rpx;
  font-size: 25rpx;
  color: #757575;
  margin-left: 480rpx;  
}
 
.huifu {
  position: absolute;
  margin-left: 90rpx;
  margin-top: -90rpx;
}
 
.huifu_text {
  font-size: 30rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
}
 
.ask {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background-color: white;
  display: flex;
  flex-direction: row;
}
 
.input {
  width: 600rpx;
  border: 1rpx solid #f1f1f1;
  margin: 12rpx 0rpx 12rpx 20rpx;
  border-radius: 30rpx;
  background: #f1f5fc;
  font-size: 25rpx;
  text-align: center;
}
 
.button {
  background: #6fb442;
  color: white;
  border-radius: 30rpx;
  font-size: 30rpx;
  width: 130rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12rpx 20rpx;
}