微信小程序-订单评价交互样式（WXML&WXSS&JS）

效果图：

核心代码：

<view class="weui-flex order_comment_type">
            <view class="weui-flex__item">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="GOOD">
                <image src="{{item.commentType=='GOOD'?'/images/icon_good_select.png':'/images/icon_good.png'}}" style="width:30rpx;height:30rpx;"></image>
                <text class="{{item.commentType=='GOOD'?'order_comment_type_selected':'order_comment_type_default'}}">好评</text>
              </view>
            </view>
            <view class="weui-flex__item" style="text-align:center;">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="NOTBAD">
                <image src="{{item.commentType=='NOTBAD'?'/images/icon_middle_select.png':'/images/icon_middle.png'}}" style="width:30rpx;height:30rpx;"></image>
                <text class="{{item.commentType=='NOTBAD'?'order_comment_type_selected':'order_comment_type_default'}}">中评</text>
              </view>
            </view>
            <view class="weui-flex__item" style="text-align:right;">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="BAD">
                <image src="{{item.commentType=='BAD'?'/images/icon_bad_select.png':'/images/icon_bad.png'}}" style="width:30rpx;height:30rpx;"></image>
                <text class="{{item.commentType=='BAD'?'order_comment_type_selected':'order_comment_type_default'}}">差评</text>
              </view>
            </view>
          </view>

selectCommentType: function (e) {
    console.log('选中的是第几条评论的哪一种类型', e.currentTarget.dataset);
    var commentList = this.data.commentList;
    var index = parseInt(e.currentTarget.dataset.index);
    commentList[index].commentType = e.currentTarget.dataset.type;
    this.setData({
      'commentList': commentList
    });
  }

完整代码：

wxml

 <form>
  <view class="order_comment_bg">
    <view wx:for="{{commentList}}" style="background:#fff;">
      <view class="order_comment_item">
        <view class="weui-flex order_comment_content bottom_border">
          <view>
            <view class="placeholder">
              <image src="{{item.commodityIcon}}" class="order_comment_img"></image>
            </view>
          </view>
          <view class="weui-flex__item order_comment_textarea_box">
            <view class="placeholder">
              <textarea class="weui-textarea order_comment_textarea" placeholder="写评论" bindblur="saveContent" data-index="{{index}}" value="{{item.content}}" auto-height />
            </view>
          </view>
        </view>
        <view>
          <view class="weui-flex order_comment_type">
            <view class="weui-flex__item">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="GOOD">
                <image src="{{item.commentType=='GOOD'?'/images/icon_good_select.png':'/images/icon_good.png'}}" style="width:30rpx;height:30rpx;"></image>
                <text class="{{item.commentType=='GOOD'?'order_comment_type_selected':'order_comment_type_default'}}">好评</text>
              </view>
            </view>
            <view class="weui-flex__item" style="text-align:center;">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="NOTBAD">
                <image src="{{item.commentType=='NOTBAD'?'/images/icon_middle_select.png':'/images/icon_middle.png'}}" style="width:30rpx;height:30rpx;"></image>
                <text class="{{item.commentType=='NOTBAD'?'order_comment_type_selected':'order_comment_type_default'}}">中评</text>
              </view>
            </view>
            <view class="weui-flex__item" style="text-align:right;">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="BAD">
                <image src="{{item.commentType=='BAD'?'/images/icon_bad_select.png':'/images/icon_bad.png'}}" style="width:30rpx;height:30rpx;"></image>
                <text class="{{item.commentType=='BAD'?'order_comment_type_selected':'order_comment_type_default'}}">差评</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="line"></view>
    </view>
    <view class="commnet_btn_box">
      <button class="weui-btn" style="background:#158447;font-size:30rpx;padding:10rpx 0;" type="primary" formType="submit">确定</button>
    </view>
  </view>
</form>

js

Page({
  data: {
    windowHeight: 'auto',
    commentList: [
      {
        url: 'http://share.30days-tech.com/daka/pictures/commodity_icon.png',
        id: 1
      },
      {
        url: 'http://share.30days-tech.com/daka/pictures/commodity_icon.png',
        id: 2
      },
      {
        url: 'http://share.30days-tech.com/daka/pictures/commodity_icon.png',
        id: 3
      }
    ]
  },
  onShow: function () {
    // 页面显示
    var vm = this
    // 初始化评论选项为好评
    for (var i = 0, len = commentList.length; i < len; i++) {
      commentList[i].commentType = 'GOOD';
    }
  },
  selectCommentType: function (e) {
    console.log('选中的是第几条评论的哪一种类型', e.currentTarget.dataset);
    var commentList = this.data.commentList;
    var index = parseInt(e.currentTarget.dataset.index);
    commentList[index].commentType = e.currentTarget.dataset.type;
    this.setData({
      'commentList': commentList
    });
  },
  saveContent: function (e) {
    console.log('保存评论到列表', e.detail.value, e.currentTarget.dataset.index);
    var vm = this;
    var commentList = vm.data.commentList;
    var index = e.currentTarget.dataset.index;
    commentList[index].content = e.detail.value;
    vm.setData({
      commentList: commentList
    });
  }
})

wxss

.order_comment_bg {
  overflow: scroll;
  background: #efeff4;
}

.order_comment_item {
  padding: 30rpx 0;
  margin: 0 0 0 30rpx;
}

.order_comment_img {
  width: 134rpx;
  height: 134rpx;
  border: 1px solid #e5e5e5;
}

.order_comment_content {
  padding-bottom: 16rpx;
}

.order_comment_textarea_box {
  margin-left: 20rpx;
}

.order_comment_textarea {
  font-size: 30rpx;
}

.order_comment_type {
  padding: 12rpx 30rpx 0 0;
}

.order_comment_type_default, .order_comment_type_selected {
    font-size:30rpx;
    margin-left:10rpx;
}
.order_comment_type_default{
    color: #888888;
}

.order_comment_type_selected{
    color: #000000;
}
.commnet_btn_box{
    width:90%;
    margin:20rpx 5%;
}