微信小程序五星评分，多个订单多个商品五星评分

**

商品评价的时候基本都需要用到五星评分，多个订单，订单下又有多个商品 的五星评价，一个朋友她不知道怎么处理，正好帮她处理了下，代码是在她写的基础上更改的，我就没自己去写样式了。

**

效果图

思路如下：

1. 两个循环，外层循环包裹内层循环：外层循环订单，内层循环商品
2. 点击订单评价的时候 拿到订单的下标、点击几颗星的下标 （下标从0开始需+1）
3. 点击商品评价的时候 拿到订单的下标、 商品的下标、点击几颗星的下标（下标从0开始需+1）然后去改data里面对应数据中的值就行了，从而渲染到界面显示

看代码

js部分代码

Page({
  data: {
    //五星评价参数
    stars: [0, 1, 2, 3, 4],
    aStarSrc: "/images/selected.png",
    noStarSrc: "/images/not-selected.png",

    commodity: [{
      "odno": "YDZ101000119120001", //订单编号
      "time": "2019-12-06", //交付日期
      "score": 0, //客户打分
      "review": "", //客户评价
      "bodylist": [{
        "tocdate": "2019-12-06", //交付日期
        "score": 0, //客户打分
        "review": "" //客户评价
      }]
    }, {
      "odno": "YDZ101000119120022",//订单编号
      "time": "2019-12-06", //交付日期
      "score": 0, //订单总评分
      "review": "", //订单总评价
      "bodylist": [{
        "tocdate": "2019-12-06",
        "score": 0,
        "review": ""
      }, {
        "tocdate": "2019-12-06",
        "score": 0,
        "review": ""
      }]
    }]
  },

  /**
   * 订单整体评分点击
   */
  click: function(e) {
    let index = e.currentTarget.dataset.orderIndex //订单下标
    let index2 = e.currentTarget.dataset.orderScoreIndex //订单评分下标
    this.setData({
      [`commodity[${index}].score`]: index2 + 1 //商品评分下标是从0开始 所以需要+1
    })
  },

  /**
   * 订单商品宝贝评分点击
   */
  click2: function(e) {
    let index = e.currentTarget.dataset.orderIndex //订单下标
    let index2 = e.currentTarget.dataset.goodsIndex //商品下标
    let index3 = e.currentTarget.dataset.goodsScoreIndex //商品评分下标
    this.setData({
      [`commodity[${index}].bodylist[${index2}].score`]: index3 + 1 //商品评分下标是从0开始 所以需要+1
    })
  }
})

wxml部分代码

<form bindsubmit="formSubmit">
  <view class="view1" wx:for="{{commodity}}" wx:key>
    <view class="view2">第{{index+1}}个订单</view>
    <view class="view3"></view>
    <view class='score'>
      <view class="left">订单总评分</view>
      <view class='right'>
        <view class="star" wx:for="{{stars}}" wx:key wx:for-index="order-score-index" wx:for-item="star" catchtap="click" data-order-index="{{index}}" data-order-score-index="{{star}}">
          <image class="star-image" src="{{item.score>star ? aStarSrc: noStarSrc}}">
          </image>
        </view>
        <text class='rtxt' data-id="{{item.odno}}" value='aa' id="index">{{item.score}}.0分</text>
      </view>
    </view>
    <view class="view3"></view>
    <!--商品循环-->
    <view wx:for="{{item.bodylist}}" wx:key wx:for-item="itemd" wx:for-index="indexs">
      <view class='score'>
        <view class='left'>宝贝评价</view>
        <view class='right'>
          <view class="star" wx:for="{{stars}}" wx:key wx:for-index="index3" wx:for-item="star" catchtap="click2" data-order-index="{{index}}" data-goods-index="{{indexs}}" data-goods-score-index="{{index3}}">
            <image class="star-image" src="{{itemd.score>index3 ? aStarSrc: noStarSrc}}">
            </image>
          </view>
          <view class='rtxt' name="{{itemd.rowno}}" data-id="{{index}}" data-idx="{{itemd.rowno}}" id='{{index}}'>{{itemd.score}}.0分</view>
        </view>
      </view>
    </view>
  </view>
</form>

wxss部分代码

page {
  background-color: #f7f8fd;
}

.view1 {
  width: 99%;
  margin: auto;
  border-radius: 12px;
}

.view2 {
  margin: 15px;
  font-size: 15px;
  color: rgb(107, 196, 66);
  font-weight: bold;
}

.view3 {
  width: 100%;
  height: 1px;
  background-color: #000;
}

.score {
  display: flex;
  margin: 0rpx 20rpx;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
}

.score .left {
  width: 150rpx;
  font-size: 30rpx;
}

.score .right {
  width: 400rpx;
  font-size: 30rpx;
  color: #888;
}

.score .right .star {
  float: left;
  width: 50rpx;
}

.score .right  .star image {
  width: 40rpx;
  height: 40rpx;
  margin-top: 30rpx;
}

.score .right .rtxt {
  display: inline-block;
  height: 100rpx;
  line-height: 100rpx;
  margin-left: 15rpx;
  color: #c00;
  font-weight: bold;
}

json部分代码

{
  "navigationBarTitleText": "五星服务评价"
}

images 里面的图片的话 直接去阿里巴巴矢量库找就行了，我这里就不直接发出来了

有什么问题欢迎留言评论指出。