@小程序vant-rate星级评价Button多选功能实现

效果图

wxml 部分

<view class="nav_box">
 <view class="rate">
  <van-rate
  name="rate_value"
  value="{{ value }}"
  size="{{ 25 }}"
  color="#FFD21E"
  void-color="#eee"
  void-icon="star"
  bind:change="onChange"
  touchable
/>
<view class="reate_eavl">
  <view wx:for="{{eval_rate}}" :key="item.id" class="rate_eval" name="rate_eavl" wx:if="{{item.id===rate_eavl}}">{{item.rate}}</view>
</view>
<view class="rate_but">
<view wx:for="{{eval_but}}" style="display:inline-block"  wx:key="index" data-item="{{index}}" wx:if="{{index==rate_eavl}}">
<view style="display:inline-block">
 <text  wx:for="{{eval_but[rate_eavl]}}" data-item="{{item.id}}" wx:key="item.id" data-index="{{index}}"  data-name="{{item.name}}" class="reate_style {{tools.fn_indexOf(choiceIdStyle,item.id).indexOf ? 'reate_active' : ''}}" bindtap="clickButton">{{item.name}}</text>
</view>
</view>

 <!-- <van-button  class="reate_style {{item.id >1 ? 'reate_active' : 'reate_style'}}" size="small" round  data-item="{{item}}" wx:for="{{eval_but}}" wx:key="{{item.id}}" bindtap="clickButton">{{item.eval}}</van-button> -->
</view>
</view>
</view>
<view class="subimt_but">
  <van-button color="#FFB71B" block bindtap="subimtBut" disabled="{{isSubmit}}">匿名提交</van-button>
</view>
</view>

js 部分

  data: {
    rate_eavl: 0,
    rate_value: 0,
    isSubmit: true,
    eval_but: [],
    eval_rate: [{
      id: 0,
      rate: '待评价'
    }, {
      id: 1,
      rate: '非常不满意，各方面都很差；'
    }, {
      id: 2,
      rate: '不满意，比较差；'
    }, {
      id: 3,
      rate: '一般，还需改善；'
    }, {
      id: 4,
      rate: '比较满意，仍可改善；'
    }, {
      id: 5,
      rate: '非常满意，无需挑剔；'
    }]
  },

vant-rate 星级评价增加判断button 设为disabled

  onChange(e) {
    console.log(e.detail)
    this.setData({
      rate_value: e.detail,
      rate_eavl: e.detail,
    })
    if (e.detail < 1) {
      this.setData({
        isSubmit: true
      })
    } else {
      this.setData({
        isSubmit: false
      })
    }
  },

获取评价Lable 标签

  getEvalLabel() {
    const that = this
    app.post(service.xxxxxx).then(res => {
      if (res.code == 200) {
        console.log(res.data)
        that.eval_but = res.data
        console.log(that.eval_but)
        this.setData({
          eval_but: that.eval_but
        })
      } else if (res.code == 400) {
        wx.showToast({
          title: '获取标签失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  }

clickButton(e) {
    const that = this
    console.log(e)
    let _data = e.currentTarget.dataset;
    let _list_data = _data.item;
    let _idArr = that.data.eval_but[that.data.rate_value];  //后台返回的对应星级的标签数据；
    let eq = _idArr.indexOf(_list_data)    // 判断这个标签是是否存在被选
    console.log(eq)
    if (eq == -1) {
      _idArr.push(_list_data)   // 没有就添加
      var _filter_idarr = _idArr.filter((element, index, self) => {
        return typeof element !== 'object'
      })     
       //因为放在一个数组里面，然后filter 过滤一下，！==='object'要传参给后台
    } else {
      _idArr.splice(eq, 1)
    }
    this.setData({
      choiceIdStyle: _idArr,
      _filter_idarr: _filter_idarr
    })

  },
 ## button 按钮提交
  subimtBut() {
    const that = this
    app.post(service.xxxxxx, {
      extension_id: that.data.id,
      ids: this.data._filter_idarr.join(',')
    }).then(res => {
      if (res.code == 200) {
        console.log(res.data)
        wx.navigateBack();
        wx.showToast({
          title: '评价成功',
          icon: 'none',
          duration: 2000
        })
      } else if (res.code == 400) {
        wx.showToast({
          title: '获取标签失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  },