AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:43

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序-订单评价交互样式(WXML&WXSS&JS)
相关的资讯,希望对您有帮助。

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

作者:Pluto,来自授权地址,本文作者还制作了另外一个不错的东西,在相关文章内;效果图:核心代码:view class=weui-flex__item view class=placeholder bindtap=selectCommentType data-index={{index}} ...

作者:Pluto,来自授权地址,本文作者还制作了另外一个不错的东西,在相关文章内;

效果图: 



核心代码:

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
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
    });
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

完整代码:

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

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
    });
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

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

42阅读 | 0评论
你的回应
写文章

7003