E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序—评论功能实现
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏