消息通知列表

app/Http/Controllers/NotificationsController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Auth;
+
+class NotificationsController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function index()
+    {
+        // 获取登录用户的所有通知
+        $notifications = Auth::user()->notifications()->paginate(20);
+        // 标记为已读，未读数量清零
+        Auth::user()->markAsRead();
+        return view('notifications.index', compact('notifications'));
+    }
+}

app/Models/User.php

@@ -57,4 +57,11 @@ public function replies()
     {
         return $this->hasMany(Reply::class);
     }
+
+    public function markAsRead()
+    {
+        $this->notification_count = 0;
+        $this->save();
+        $this->unreadNotifications->markAsRead();
+    }
 }

public/css/app.css

@@ -17115,3 +17115,18 @@ body {
   color: #b3b3b3;
 }
 
+/* 消息通知 */
+
+.notification-badge .badge {
+  font-size: 12px;
+  margin-top: 14px;
+}
+
+.notification-badge .badge-secondary {
+  background-color: #EBE8E8;
+}
+
+.notification-badge .badge-hint {
+  background-color: #d15b47 !important;
+}
+

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=01f14ce060780bc99e14",
-    "/css/app.css": "/css/app.css?id=4e0ad8f00195f8911365"
+    "/css/app.css": "/css/app.css?id=b07bc73c4efd2274c2d2"
 }

resources/sass/app.scss

@@ -149,3 +149,20 @@ body {
         color: #b3b3b3;
     }
 }
+
+
+/* 消息通知 */
+.notification-badge {
+  .badge {
+    font-size: 12px;
+    margin-top: 14px;
+  }
+
+  .badge-secondary {
+    background-color: #EBE8E8;
+  }
+
+  .badge-hint {
+    background-color: #d15b47 !important;
+  }
+}

resources/views/layouts/_header.blade.php

@@ -30,6 +30,12 @@
               <i class="fa fa-plus"></i>
             </a>
           </li>
+
+          <li class="nav-item notification-badge">
+            <a class="nav-link mr-3 badge badge-pill badge-{{ Auth::user()->notification_count > 0 ? 'hint' : 'secondary' }} text-white" href="{{ route('notifications.index') }}">
+              {{ Auth::user()->notification_count }}
+            </a>
+          </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <img src="{{ Auth::user()->avatar }}" class="img-responsive img-circle" width="30px" height="30px">

resources/views/notifications/index.blade.php

@@ -0,0 +1,35 @@
+@extends('layouts.app')
+
+@section('title', '我的通知')
+
+@section('content')
+  <div class="container">
+    <div class="col-md-10 offset-md-1">
+      <div class="card ">
+
+        <div class="card-body">
+
+          <h3 class="text-xs-center">
+            <i class="far fa-bell" aria-hidden="true"></i> 我的通知
+          </h3>
+          <hr>
+
+          @if ($notifications->count())
+
+            <div class="list-unstyled notification-list">
+              @foreach ($notifications as $notification)
+                @include('notifications.types._' . Str::snake(class_basename($notification->type)))
+              @endforeach
+
+              {!! $notifications->render() !!}
+            </div>
+
+          @else
+            <div class="empty-block">没有消息通知！</div>
+          @endif
+
+        </div>
+      </div>
+    </div>
+  </div>
+@stop

resources/views/notifications/types/_topic_replied.blade.php

@@ -0,0 +1,24 @@
+<li class="media @if ( ! $loop->last) border-bottom @endif">
+  <div class="media-left">
+    <a href="{{ route('users.show', $notification->data['user_id']) }}">
+      <img class="media-object img-thumbnail mr-3" alt="{{ $notification->data['user_name'] }}" src="{{ $notification->data['user_avatar'] }}" style="width:48px;height:48px;" />
+    </a>
+  </div>
+
+  <div class="media-body">
+    <div class="media-heading mt-0 mb-1 text-secondary">
+      <a href="{{ route('users.show', $notification->data['user_id']) }}">{{ $notification->data['user_name'] }}</a>
+      评论了
+      <a href="{{ $notification->data['topic_link'] }}">{{ $notification->data['topic_title'] }}</a>
+
+      {{-- 回复删除按钮 --}}
+      <span class="meta float-right" title="{{ $notification->created_at }}">
+        <i class="far fa-clock"></i>
+        {{ $notification->created_at->diffForHumans() }}
+      </span>
+    </div>
+    <div class="reply-content">
+      {!! $notification->data['reply_content'] !!}
+    </div>
+  </div>
+</li>

routes/web.php

@@ -34,3 +34,5 @@
 Route::resource('replies', 'RepliesController', ['only' => ['index', 'show', 'create', 'store', 'update', 'edit', 'destroy']]);
 
 Route::resource('replies', 'RepliesController', ['only' => ['store', 'destroy']]);
+
+Route::resource('notifications', 'NotificationsController', ['only' => ['index']]);