这是一个商品展示并能进行评论和答复的功能页面，
遇到的问题有：
- 分享功能没有办法将json数据写在地址中，只能传id来进行获取
- 这里必须新加一个状态用来判断是否显示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;
}