微信小程序---评论功能实现

た入场券 2022-03-20 11:16 633阅读 0赞

index.wxml:

提交评论：

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