Wechat applet realizes five-star evaluation

pingxing.js

function pingfenxing(pingfen) {
  var _this = this,             //  The path of the picture here ,  I need to modify 
  data = {
    ling: "/img/icon-ling.png",
    zheng: "/img/icon-zheng.png",
    ban: "/img/icon-ban.png",
  },
  nums =[];// Here is an array that returns the order in which the pictures are arranged ,  Here we should pay attention to the path of the image when the page is used , But it doesn't matter if you use web photos if((pingfen/0.2)%2==0){//  If the score is positive , Such as 4.0, 5.0}

// The full score of this effect is 5 branch , if 10 Special rules 
//var pingfen = Math.ceil(pingfen)/2;

  if((pingfen/0.2) % 2 == 0) {
    for (var i = 0; i < 5; i++) {
      if (i < pingfen) {
        nums.push(data.zheng);
      } else {
        nums.push(data.ling)
      }
    }
  } else { //  Score is not an integer ,  Such as 3.5, 2.5
    for(var i=0; i<5; i++) {
      if(i<pingfen-0.5) {
        nums.push(data.zheng);        // First, separate the certificates , Such as : 3.5  Here is to put 3 separate from , Put it on behalf of 1 Put the picture of 
      } else if(i==(pingfen-0.5)) {
        nums.push(data.ban);        //  Separate the decimal parts , Such as : 3.5 Inside 0.5,  Put it on behalf of 0.5 Put the picture of 
      } else {
        nums.push(data.ling);   // Then the rest is represented by the not full 0 Put the picture of , Such as : 3.5,  It's inside 3 A representative 1 Pictures of the , Then put it in 1 A representative 0.5 Pictures of the , Finally, there is a picture left , At this time, it means 0 Pictures of the 
      }
    }
  }
  return nums;
}

function information(data){
  for (var i = 0; i < data.length; i++) {
    // console.log(data[i].score)  Find the scoring data in the data 
    data[i].pingfenpic = this.pingfen(parseFloat(data[i].score)); // Using functions 
  }

module.exports = {
  pingfen: pingfenxing,
  information: information
}

js

var pingxin = require("../../utils/pingxing.js");
Page({
  /**
   *  Initial data of the page 
   */
   data: {
       tiyan: [              // score 
          {pingfen: 3.5}
        ], 
   }
     /**
   *  Life cycle function -- Monitor page loading 
   */
    onLoad: function(options) {
    var _this = this;
    var tiyan = this.data.tiyan;

    tiyan = pingxin.information(tiyan);

    _this.setData({
      tiyan: tiyan
    })
  },
})

wxss

image {
  width: 14rpx;
  height: 14rpx;
  margin-right: 5rpx;
}

wxml

<block wx:for="{
   {tiyan}}" wx:key="index">
              <block wx:for="{
   {item.pingfenpic}}" wx:key="index">
                <image src="{
   {item}}"></image>
              </block>
            </block>

Pictures of stars