c-my/NEUP-FleaMarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modify Message function.

Browse Source 
1. Add historical message tag.
2. Add baned info after user's nickname
3. Add time info for every message.
4. Stop the loop when error occurs.
This commit is contained in:
Harry Zhou
2017-06-13 20:53:09 +08:00
parent 21943d5d19
commit 7c6fe183d4
4 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/MessageController.php
+6 -7
View File
@@ -30,16 +30,15 @@ class MessageController extends Controller
{
$user_id = $request->session()->get('user_id');
$contact_id = $request->contact_id;
$messages = Message::where('receiver_id', $user_id)->where('sender_id', $contact_id)
->orWhere('receiver_id', $contact_id)->where('sender_id', $user_id)
->orderBy('id', 'desc')
->paginate(20);
Message::where('receiver_id', $user_id)->where('sender_id', $contact_id)
->update(['is_read' => true]);
MessageContact::where('user_id', $user_id)
->where('contact_id', $contact_id)
->update(['unread_count' => 0]);
$messages = Message::where('receiver_id', $user_id)->where('sender_id', $contact_id)
->orWhere('receiver_id', $contact_id)->where('sender_id', $user_id)
->orderBy('id', 'desc')
->paginate(20);
return json_encode($messages);
}
@@ -124,7 +123,7 @@ class MessageController extends Controller
$contacts = MessageContact::where('user_id', $user_id)
->orderBy('last_contact_time', 'desc')
->with(['contact' => function ($query) {
$query->select('id', 'nickname');
$query->select('id', 'nickname', 'baned');
}])
->paginate(10);
return json_encode($contacts);
@@ -137,7 +136,7 @@ class MessageController extends Controller
->where('unread_count', '>', 0)
->orderBy('last_contact_time', 'desc')
->with(['contact' => function ($query) {
$query->select('id', 'nickname');
$query->select('id', 'nickname', 'baned');
}])
->get();
return json_encode($contacts);
public/css/message.css
Vendored
+18
View File
@@ -8,6 +8,9 @@
margin-top: 0.5em;
padding: 0.1em;
list-style-type: none;
}
.msg.box {
border-style: solid;
border-width: 1px;
border-color: #cccccc;
@@ -86,6 +89,21 @@
font-weight: bold;
}
.time-tag {
color: #7b7a80;
margin: 1px;
font-size: 10px;
float: right;
position: relative;
top: -2em;
left: -2em;
}
.history-text {
color: #7b7a80;
float: right;
}
#message-container::-webkit-scrollbar {
width: 10px;
height: 10px;
public/js/message.js
+34 -4
View File
@@ -54,6 +54,7 @@ Vue.component('contact-list', {
})
.catch(function (error) {
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
vm.$emit('network-error');
})
},
setTop: function (tops) {
@@ -74,6 +75,7 @@ Vue.component('contact-list', {
})
.catch(function (error) {
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
vm.$emit('network-error');
})
},
loadDialog: function (index) {
@@ -141,11 +143,20 @@ Vue.component('message-dialog', {
vm.current_page = response.data.current_page;
vm.last_page = response.data.last_page;
for (var i in response.data.data)
{
vm.messages.unshift(response.data.data[i]);
if (parseInt(i) + 1 < response.data.data.length &&
response.data.data[i].is_read !== response.data.data[parseInt(i) + 1].is_read)
vm.messages.unshift({
id: -1,
type: 'history-info'
});
}
vm.isHidden = false;
})
.catch(function (error) {
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
vm.$emit('network-error');
})
}
else {
@@ -153,11 +164,22 @@ Vue.component('message-dialog', {
.then(function (response) {
vm.current_page = response.data.current_page;
vm.last_page = response.data.last_page;
vm.messages = response.data.data.reverse();
vm.messages = [];
for (var i in response.data.data)
{
vm.messages.unshift(response.data.data[i]);
if (parseInt(i) + 1 < response.data.data.length &&
response.data.data[i].is_read !== response.data.data[parseInt(i) + 1].is_read)
vm.messages.unshift({
id: -1,
type: 'history-info'
});
}
vm.isHidden = false;
})
.catch(function (error) {
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
vm.$emit('network-error');
})
this.contact_id = contact_id;
}
@@ -179,7 +201,8 @@ Vue.component('message-dialog', {
vm.$emit('top-contact', vm.contact_id);
})
.catch(function (error) {
vm.errorMessage = error;
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
vm.$emit('network-error');
})
},
getNewMessage: function () {
@@ -196,12 +219,12 @@ Vue.component('message-dialog', {
})
.catch(function (error) {
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
vm.$emit('network-error');
})
}
},
scrollToButtom: function () {
var c = $('#message-container');
//console.log(c[0].scrollHeight);
c.scrollTop(c[0].scrollHeight + 1000);
}
}
@@ -210,11 +233,14 @@ Vue.component('message-dialog', {
// 创建根实例
var Message = new Vue({
el: '#message',
data: {
timer: null
},
methods: {
startLoop: function () {
var vm = this;
vm.loadContact();
window.setInterval(function() {
vm.timer = window.setInterval(function() {
vm.refreshContact();
vm.refreshMessage();
}, 5000);
@@ -236,6 +262,10 @@ var Message = new Vue({
},
topContactCallback: function (contact_id) {
this.$refs.contactList.$emit('topContactHandler', contact_id)
},
stopTimerCallback: function () {
var vm = this;
vm.timer = window.clearInterval(vm.timer);
}
}
});
resources/views/message/message.blade.php
+31 -15
View File
@@ -8,10 +8,12 @@
{{--<a v-on:click="refreshContact">???</a>--}}
<div class="row">
<div class="column large-8 small-12">
<message-dialog ref="messageDialog" v-on:top-contact="topContactCallback"></message-dialog>
<message-dialog ref="messageDialog" v-on:top-contact="topContactCallback"
v-on:network-error="stopTimerCallback"></message-dialog>
</div>
<div class="column large-4 small-12">
<contact-list ref="contactList" v-on:load-dialog="loadDialogCallback"></contact-list>
<contact-list ref="contactList" v-on:load-dialog="loadDialogCallback"
v-on:network-error="stopTimerCallback"></contact-list>
</div>
</div>
</div>
@@ -23,18 +25,24 @@
<ul>
<table class="con-wrapper">
<transition-group name="contact-list" tag="ul">
<li :class="{ con: true, active: current_contact_id === contact.contact_id }"
v-bind:key="contact.contact_id" v-for="(contact, index) in contacts" v-on:click="loadDialog(index)">
<tr>
<td>
<li :class="{ con: true, active: current_contact_id === contact.contact_id }"
v-bind:key="contact.contact_id" v-for="(contact, index) in contacts"
v-on:click="loadDialog(index)">
<tr>
<td>
<span>
<img class="mavatar" :src="'/avatar/' + contact.contact_id + '/64/64'"/>
<i v-if="contact.unread_count > 0" class="balloon-tip">@{{ contact.unread_count }}</i>
<i v-if="contact.unread_count > 0"
class="balloon-tip">@{{ contact.unread_count }}</i>
</span>
</td>
<td><p class="con-name">@{{ contact.contact_id == 0 ? "系统消息" : contact.contact.nickname }}</p></td>
</tr>
</li>
</td>
<td>
<p class="con-name">@{{ contact.contact_id == 0 ? "系统消息" :
(contact.contact.baned == 0 ? contact.contact.nickname :
contact.contact.nickname + '【已封禁】') }}</p>
</td>
</tr>
</li>
</transition-group>
</table>
</ul>
@@ -48,10 +56,18 @@
<p v-else>没有更多了</p>
<ul id="message-container" class="message-container">
<transition-group name="message-list" tag="ul">
<li class="msg message-list-item" v-for="message in messages" v-bind:key="message.id">
<img class="mavatar" :src="'/avatar/' + message.sender_id + '/64/64'"/>
@{{ message.content }}
</li>
<li :class="{ box: message.type !== 'history-info' }" class="msg message-list-item"
v-for="message in messages" v-bind:key="message.id">
<span v-if="message.type !== 'history-info'">
<img class="mavatar" :src="'/avatar/' + message.sender_id + '/64/64'"/>
@{{ message.content }}<br/><br/>
<i class="time-tag">@{{ message.updated_at }}</i>
</span>
<span v-else>
<i class="history-text">以上是历史消息</i>
<hr/>
</span>
</li>
</transition-group>
</ul>
<p class="err-msg" v-if="errorMessage">@{{ errorMessage }}</p>