使用Laravel Livewire星级评分组件如何在Blade视图展示总评分星级

第一步：修改Livewire组件，计算平均评分与总评分数量 #

你现有的组件没有计算平均评分相关字段，先调整ProductRating.php的render方法即可，mount方法无需修改：

public function render()
{
    $comments = Rating::where('product_id', $this->product->id)->where('status', 1)->with('user')->get();
    // 新增：计算平均评分和总评分数量
    $averageRating = Rating::where('product_id', $this->product->id)->where('status', 1)->avg('rating');
    $totalRatings = Rating::where('product_id', $this->product->id)->where('status', 1)->count();
    return view('livewire.product-ratings', compact('comments', 'averageRating', 'totalRatings'));
}

第二步：编写Blade视图星级展示代码 #

以下代码默认使用Font Awesome图标库实现星星效果，你也可以替换为自定义SVG、图片或者文本星号。

场景1：总平均星级展示 #

<!-- 总评分展示区域 -->
<div class="rating-overview">
    <div class="stars">
        @for ($i = 1; $i <= 5; $i++)
            @if ($i <= $averageRating)
                <!-- 满星 -->
                <i class="fa fa-star text-yellow-400"></i>
            @elseif ($i - 0.5 <= $averageRating)
                <!-- 半星，不需要可以删除该判断分支 -->
                <i class="fa fa-star-half-o text-yellow-400"></i>
            @else
                <!-- 空星 -->
                <i class="fa fa-star-o text-gray-300"></i>
            @endif
        @endfor
    </div>
    <span class="rating-score">{{ number_format($averageRating, 1) }}</span>
    <span class="total-ratings">({{ $totalRatings }} 条评价)</span>
</div>

场景2：单条用户评论的星级展示 #

<!-- 评论列表区域 -->
<div class="comments-list">
    @foreach($comments as $comment)
        <div class="comment-item">
            <div class="comment-stars">
                @for ($i = 1; $i <= 5; $i++)
                    <i class="fa fa-star {{ $i <= $comment->rating ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                @endfor
            </div>
            <div class="comment-content">
                <p>{{ $comment->comment }}</p>
                <span>评论人：{{ $comment->user->name }}</span>
            </div>
        </div>
    @endforeach
</div>

场景3：用户提交评分的可点击星级选择器 #

<!-- 评分提交表单区域 -->
@if(!$hideForm)
    <div class="rating-form">
        <div class="select-stars">
            @for ($i = 1; $i <= 5; $i++)
                <button type="button" wire:click="$set('rating', {{ $i }})" class="star-btn">
                    <i class="fa fa-star {{ $i <= $rating ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                </button>
            @endfor
            @error('rating') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>
        <textarea wire:model="comment" placeholder="写下你的评价"></textarea>
        @error('comment') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        <button type="button" wire:click="submitRating">提交评价</button>
    </div>
@endif

注意：如果未引入Font Awesome，可将标签替换为文本「★」「☆」或者自定义的星星样式。