index.wxml:
提交评论：
<!-- 评论 --> <!--textarea--> <view class="message"> <form bindsubmit="formSubmit" class='form'> <input type="text" name="liuyantext" placeholder='留下你精彩的评论吧' value='{{keyValue}}' class="input-style" /> <button formType="submit" class="btn">发送</button> <input type="text" name="nickname" value='{{videoid}}' style="display:none;" /> <input type="text" name="headimg" value='{{avatarUrl}}' style="display:none;" /> </form> </view>显示全部评论：
<view class='allMessage'> <view class="title"> <text>全部评论</text> </view> <view class='tab-content'> <view class='comment-list'> <!-- 提交评论显示 --> <view class='comment-item' class="{{showOrHidden?'show':'hide'}}" style='width: 100%;height: auto;overflow: hidden;padding: 16px 0;border-bottom: 1px solid #f3f3f5;'> <view class='comment-person'> <image class='comment-person-avatar' src='{{photo2}}'></image> <view class='comment-person-info ellipsis'> <view class='comment-person-name ellipsis'>{{nickname2}}</view> <view class='comment-time ellipsis'>{{date2}}</view> </view> </view> <view class='comment-text'>{{comment2}}</view> </view> <!-- 读取数据显示全部评论 --> <view class='comment-item' wx:for="{{comment}}" wx:key="{{item.id}}"> <view class='comment-person'> <image class='comment-person-avatar' src='{{item.photo}}'></image> <view class='comment-person-info ellipsis'> <view class='comment-person-name ellipsis'>{{item.nickname}}</view> <view class='comment-time ellipsis'>{{item.created_at}}</view> </view> </view> <view class='comment-text'>{{item.content}}</view> </view> </view> </view> </view>index.wxss:
提交评论样式：
.form{ width: 94%; margin:0 auto;}.input-style{ width: 70%; height: 40px; border-radius: 25px; background: #f3f3f5; font-size: 14px; /* text-indent: 15px; */ padding-left: 15px; float: left; color:#808286;} .btn{ width: 20%; font-size: 14px; float: right; border-radius: 10px; color: #2c3036; background: #f3f3f5; letter-spacing: 2px;} .liuyanview{ width: 90%; margin: 10px auto;} .result{ text-align: center; font-size: 14px; color: #f00; margin-top: 20px;} .headimg{ width: 45px; height: 45px; border-radius: 100%;} .headimg image{ width: 45px; height: 45px; border-radius: 100%;} .nickname_liuyantext{ width: calc(100% - 55px); float: right; margin-top:-45px;} .nickname_liuyantext .nickname{ font-size: 15px; color: #999;} .nickname_liuyantext .nickname .time{ font-size: 11px; color: #999; float: right;} .nickname_liuyantext .text{ font-size: 16px; color: #666;}.message{ width: 100%; height: 50px; display: flex; padding: 10px auto; background-color: #fff; position: fixed; bottom:0;}显示全部评论样式：
/* 全部评论 */.allMessage { clear: both; width: 92%; margin: 0 auto; padding: 4%; background-color: #fff; padding-bottom: 120rpx;}.allMessage .title { border-left: 5px solid #2c3036; /* margin: 12px 0; */ height: 20px; line-height: 20px; text-indent: 10px; color: #2c3036; font-size: 18px; margin-bottom: 10px;}.comment-item { width: 100%; height: auto; overflow: hidden; padding: 16px 0; border-bottom: 1px solid #f3f3f5;}.comment-person { display: flex; align-items: center;}.comment-person-avatar { width: 42px; height: 42px; border-radius: 21px; margin: 0 10px 0 0; flex: 0 0 42px;}.comment-person-info { flex: 1;}.comment-person-name { font-size: 16px; font-weight: 800; color: #2c3036;}.comment-time { font-size: 13px; color: #808286;}.comment-text { font-size: 14px; color: #2c3036; line-height: 25px; padding: 24rpx 0 0 20px;}.goods-box .goods-thumb { width: 300rpx; height: 300rpx; margin: 35rpx 0 125rpx;}.to-carts-icon { position: absolute; right: 70rpx; top: 70rpx; width: 10rpx; height: 10rpx; border-radius: 50%; opacity: 0.6; -webkit-animation: to_cart 0.3s ease-out; animation: to_cart 0.3s ease-out;}@-webkit-keyframes to_cart { 0% { right: 100rpx; top: 530rpx; -webkit-transform: scale(4); }/*60%{ top: 20rpx; }*/}@keyframes to_cart { 0% { right: 100rpx; top: 530rpx; transform: scale(4); }/*60%{ top: 20rpx; }*/}.carts-icon { position: absolute; right: 40rpx; top: 40rpx; width: 75rpx; height: 75rpx;}.carts-icon image { width: 100%; height: 100%;}.carts-icon.on { -webkit-animation: to_cart_scale 0.3s ease; animation: to_cart_scale 0.3s ease;}@-webkit-keyframes to_cart_scale { 50% { -webkit-transform: scale(1.2); }}@keyframes to_cart_scale { 50% { transform: scale(1.2); }}.carts-icon-num { position: absolute; left: -15rpx; width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; background: #ab956d; color: #fff; font-size: 24rpx;}.goods-box .goods-operation { position: relative; width: 100%; height: 100rpx; line-height: 100rpx; padding: 0 50rpx; margin-bottom: 60rpx; box-sizing: border-box; border-radius: 50rpx; background: #76b44e; color: #fff; font-size: 28rpx;}.goods-operation text { display: inline-block; height: 100rpx;}.goods-operation-num { width: 160rpx;}.goods-operation-add { width: 80rpx; margin-right: 30rpx;}.goods-to-cart { width: 210rpx; padding-right: 75rpx;}.goods-cart-img { position: absolute; right: 50rpx; top: 28rpx; width: 45rpx; height: 45rpx;}.goods-stock { font-size: 28rpx; margin-bottom: 20rpx;}.goods-price { font-size: 40rpx;}.goods-tab-nav { display: inline-block; width: 33.33%; height: 90rpx; line-height: 90rpx; border-bottom: 1rpx solid #ededed; box-sizing: border-box; text-align: center; color: #c7c7cb;}.goods-tab-nav.on { color: #bcaa8a; border-bottom: 5rpx solid #bcaa8a;}.goods-content { padding: 40rpx; font-size: 13px;}button::after { border: none;}button { background: none;}.shareMain { width: 100%; margin: 30px 0;}.shareMain .mainList { overflow: hidden; margin: 0 auto; text-align: center;}.shareMain .title { margin: 0 auto; text-align: center; font-size: 13px; margin-top: -13px;}js：
formSubmit: function(e) { console.log(app.globalData.userInfo.nickName); wx.showToast({ title: '评论成功', icon: 'success', duration: 3000 }) var that = this; var liuyantext = e.detail.value.liuyantext; //获取表单所有name=liuyantext的值 console.log('视频id' + that.data.id); console.log('留言number:' + that.data.number); wx.request({ url: 'https://xxxx/comment', data: { content: liuyantext, number: that.data.number, id: that.data.id }, header: { 'Content-Type': 'application/json' }, success: function(res) { // console.log(res.data) that.setData({ showOrHidden: true, re: res.data, keyValue:'', photo2: res.data.result.comment.photo, nickname2: res.data.result.comment.nickname, date2: res.data.result.comment.date, comment2: res.data.result.comment.comment }) wx.hideToast(); console.log(res); } }) },
