微信小程序，五星好评

JS

Page({
    data: {
        startNum0: 0,
        startNum1: 0
    },
    evaluate: function(e) {
        if (e.currentTarget.dataset.type == 0) {
            this.setData({
                startNum0: e.currentTarget.dataset.id
            })
        }
        if (e.currentTarget.dataset.type == 1) {
            this.setData({
                startNum1: e.currentTarget.dataset.id
            })
        }
    },
    reset: function() {
        this.setData({
            startNum0: 0,
            startNum1: 0
        })
    }
})

wxml

<view class="box">
    <view class="title">五星好评</view>
    <view class="flex">
        <block wx:for="{{[1,2,3,4,5]}}" wx:for-item="item" wx:key="**this">
            <image class="star" src="/images/{{startNum0<item?'star_gay':'star_ye'}}.png" data-id="{{item}}" data-type="0" bindtap="evaluate"></image>
        </block>
    </view>
</view>
<view class="box">
    <view class="title">五星好评</view>
    <view class="flex">
        <block wx:for="{{[1,2,3,4,5]}}" wx:for-item="item" wx:key="**this">
            <image class="star" src="/images/{{startNum1<item?'star_gay':'star_ye'}}.png" data-id="{{item}}" data-type="1" bindtap="evaluate"></image>
        </block>
    </view>
</view>
<view class="show">
    <view>第一个评价：{{startNum0}} 星</view>
    <view>第二个评价：{{startNum1}} 星</view>
</view>

<button bindtap="reset">清除</button>

wxss

.box {
    padding: 50rpx;
    text-align: center;
}

.title {
    font-size: 36rpx;
}

.flex {
    display: flex;
    justify-content: center;
}

.star {
    width: 90rpx;
    height: 84rpx;
    margin: 40rpx;
}

.show {
    text-align: center;
}

.show view {
    margin: 40rpx;
}

button{
    width: 400rpx;
    background: linear-gradient(90deg, #FFE36A 0%, #FFC339 100%);
}