微信小程序商品详情 + 评论功能实现

版权声明：本文为博主原创文章，转载时请务必注明本文地址。 https://blog.csdn.net/qq_43196107/article/details/88290327

 这是一个商品展示并能进行评论和答复的功能页面，

遇到的问题有：

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;
}