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

2017-01-11

效果图: 

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

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

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



核心代码:

<view class="weui-flex__item">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="GOOD">
                <image wx:if="{{item.commentType!='GOOD'}}" src="/images/icon_good.png"
                style="width:30rpx;height:30rpx;"></image>
                <text wx:if="{{item.commentType!='GOOD'}}" class="order_comment_type_default">好评</text>

                <!--选中-->
                <image wx:if="{{item.commentType=='GOOD'}}" src="/images/icon_good_select.png"
                style="width:30rpx;height:30rpx;"></image>
                <text wx:if="{{item.commentType=='GOOD'}}" class="order_comment_type_selected">好评</text>
              </view>
            </view>123456789101112
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
    });
  }12345678910

完整代码:

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 wx:if="{{item.commentType!='GOOD'}}" src="/images/icon_good.png"
                style="width:30rpx;height:30rpx;"></image>
                <text wx:if="{{item.commentType!='GOOD'}}" class="order_comment_type_default">好评</text>

                <!--选中-->
                <image wx:if="{{item.commentType=='GOOD'}}" src="/images/icon_good_select.png"
                style="width:30rpx;height:30rpx;"></image>
                <text wx:if="{{item.commentType=='GOOD'}}" class="order_comment_type_selected">好评</text>
              </view>
            </view>
            <view class="weui-flex__item" style="text-align:center;">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="NOTBAD">
                <image wx:if="{{item.commentType!='NOTBAD'}}" src="/images/icon_middle.png"
                style="width:30rpx;height:30rpx;"></image>
                <text wx:if="{{item.commentType!='NOTBAD'}}" class="order_comment_type_default">中评</text>

                <!--选中-->
                <image wx:if="{{item.commentType=='NOTBAD'}}" src="/images/icon_middle_select.png"
                style="width:30rpx;height:30rpx;"></image>
                <text wx:if="{{item.commentType=='NOTBAD'}}" class="order_comment_type_selected">中评</text>
              </view>
            </view>
            <view class="weui-flex__item" style="text-align:right;">
              <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="BAD">
                <image wx:if="{{item.commentType!='BAD'}}" src="/images/icon_bad.png"
                style="width:30rpx;height:30rpx;"></image>
                <text wx:if="{{item.commentType!='BAD'}}" class="order_comment_type_default">差评</text>

                <!--选中-->
                <image wx:if="{{item.commentType=='BAD'}}" src="/images/icon_middle_select.png"
                style="width:30rpx;height:30rpx;"></image>
                <text wx:if="{{item.commentType=='BAD'}}" class="order_comment_type_selected">差评</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>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364

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

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%;}




0
收藏