|
|
@@ -0,0 +1,197 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
|
|
|
+ <title>通知栏</title>
|
|
|
+ <!-- CSRF Token -->
|
|
|
+ <meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
+ <link href="{{ mix('css/app.css') }}" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+ html{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ body{
|
|
|
+ width: 510px;
|
|
|
+ margin : 0 auto;
|
|
|
+ }
|
|
|
+ .b-container{
|
|
|
+ background: RGB(245,250,245) !important;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ max-height: 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ border: RGB(204, 204, 204) solid 1px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ #msg{
|
|
|
+ width:266px;
|
|
|
+ position: fixed;
|
|
|
+ z-index:999;
|
|
|
+ top: 49%;
|
|
|
+ margin-top:-80px;
|
|
|
+ left:50%;
|
|
|
+ margin-left:-133px;
|
|
|
+ background:#fff;
|
|
|
+ box-shadow:5px 5px 8px #999;
|
|
|
+ font-size:17px;
|
|
|
+ color:#666;
|
|
|
+ border:1px solid #f8f8f8;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 2rem;
|
|
|
+ display:inline-block;
|
|
|
+ padding-bottom:20px;
|
|
|
+ border-radius:5px;
|
|
|
+ }
|
|
|
+ #msg_top {
|
|
|
+ background: #f8f8f8;
|
|
|
+ padding: 5px 15px 5px 20px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ #msg_top span{
|
|
|
+ font-size:22px;
|
|
|
+ float:right;
|
|
|
+ cursor:pointer;
|
|
|
+ }
|
|
|
+ #msg_cont{
|
|
|
+ padding:15px 20px 20px;
|
|
|
+ text-align:left;
|
|
|
+ }
|
|
|
+ #msg_clear{
|
|
|
+ background:#8fc31f;
|
|
|
+ float:right;
|
|
|
+ }
|
|
|
+ #msg_success{
|
|
|
+ background:#2a9055;
|
|
|
+ float:right;
|
|
|
+ }
|
|
|
+ .msg_btn{
|
|
|
+ display:inline-block;
|
|
|
+ color:#fff;
|
|
|
+ padding:1px 15px;
|
|
|
+ border-radius:2px;
|
|
|
+ margin-right:15px;
|
|
|
+ cursor:pointer;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body class="h-100">
|
|
|
+ <div id="notification" class="w-100 h-100 b-container p-0 card">
|
|
|
+ <div class="card-header">
|
|
|
+ <label class="h3 text-center w-100">
|
|
|
+ <b style="font-family:STHupo">@{{ count }}</b>
|
|
|
+ <label class="text-secondary" style="font-family:STZhongsong">条未处理通知</label>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="card-body p-0">
|
|
|
+ <ul class="list-group" id="scroll-list">
|
|
|
+ <li class="list-group-item mt-3" v-for="info in infos" @click="toTarget(info)">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-7 row">
|
|
|
+ <div class="col-3 pr-0 h5" v-if="info.delivered=='0'"><span class="badge badge-secondary">New</span></div>
|
|
|
+ <div v-else class="col-1"></div>
|
|
|
+ <div class="text-left text-overflow-replace font-weight-bold col-8 p-0">@{{ info.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-right text-secondary col-5">@{{ info.created_at }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="offset-2 mt-2 text-muted" v-html="info.message">
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script src="{{ mix('js/app.js') }}"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+ var audioPlay = false;
|
|
|
+ //重绘弹窗样式
|
|
|
+ function alert(e){
|
|
|
+ $("body").append('<div id="msg"><div id="msg_top">设置<span class="msg_close">×</span></div><div id="msg_cont">'+e+
|
|
|
+ '</div><div class="msg_close msg_btn" id="msg_clear">取消</div><div class="msg_close msg_btn" id="msg_success">确定</div></div>');
|
|
|
+ $("#msg_clear").click(function (){
|
|
|
+ $("#msg").remove();
|
|
|
+ });
|
|
|
+ $("#msg_success").click(function (){
|
|
|
+ audioPlay = true;
|
|
|
+ $("#msg").remove();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ alert("是否开启音频?");
|
|
|
+ new Vue({
|
|
|
+ el:"#notification",
|
|
|
+ data:{
|
|
|
+ infos:{!! $infos !!},
|
|
|
+ loadSign:false,
|
|
|
+ count: {!! $count !!},
|
|
|
+ page:2,
|
|
|
+ mark:{
|
|
|
+ "0" : "/storage/audio.mp3",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ if(this.infos.length===15)this.bindListen();
|
|
|
+ $(document.body).append($('<audio id="audio" src="" autoplay></audio>'));
|
|
|
+ this.initBroadcast();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ bindListen(){
|
|
|
+ $("#scroll-list").scroll(()=>{
|
|
|
+ let element = $("#scroll-list");
|
|
|
+ let scrollTop = element.scrollTop();
|
|
|
+ let scrollHeight = element[0].scrollHeight;
|
|
|
+ let height = element.height();
|
|
|
+ if(scrollTop + height > scrollHeight-50){
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initBroadcast() {
|
|
|
+ initEcho();
|
|
|
+ Echo.private('App.User.' + {{\Illuminate\Support\Facades\Auth::id()}})
|
|
|
+ .notification((notification) => {
|
|
|
+ console.log(notification);
|
|
|
+ this.count++;
|
|
|
+ this.infos.unshift(notification);
|
|
|
+ if (notification.mark==0)this.playAudio(notification.mark);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ playAudio(mark){
|
|
|
+ if (!audioPlay)return;
|
|
|
+ let audio = document.getElementById('audio');
|
|
|
+ audio.src = this.mark[mark];
|
|
|
+ setTimeout(()=>{
|
|
|
+ audio.play();
|
|
|
+ },0);
|
|
|
+ },
|
|
|
+ toTarget(info = null){
|
|
|
+ if (info.delivered==='0'){
|
|
|
+ window.tempTip.postBasicRequest("{{url('notification/toTarget')}}",
|
|
|
+ {id:info.no ? info.no : info.id},res=>{
|
|
|
+ info.delivered = '1';
|
|
|
+ this.count--;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ window.open('{{url('')}}'+'/'+info.link);
|
|
|
+ },
|
|
|
+ loadData(){
|
|
|
+ if (this.loadSign)return;
|
|
|
+ this.loadSign = true;
|
|
|
+ let last = this.infos[this.infos.length-1];
|
|
|
+ window.tempTip.postBasicRequest("{{url('notification/regular')}}",
|
|
|
+ {id:last.no ? last.no : last.id,page:this.page},res=>{
|
|
|
+ this.loadSign = false;
|
|
|
+ this.page++;
|
|
|
+ if (res)this.infos.push.apply(this.infos,res);
|
|
|
+ if (!res || res.length<15)$("#scroll-list").unbind("scroll");
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</html>
|