/common/free-lib/chat.js
import $U from "./util.js";
import $H from './request.js';
import $store from '@/store/index.js';
class chat {
constructor(arg) {
this.url = arg.url
this.isOnline = false
this.socket = null
this.reconnectConfirm = 0
this.isOpenReconnect = false
// 擷取目前使用者相關資訊
let user = $U.getStorage('user');
this.user = user ? JSON.parse(user) : {},
// 初始化聊天對象
this.TO = false;
// 連接配接和監聽
if (this.user.token) {
this.connectSocket()
}
}
// 斷線重連
reconnect(){
if(this.isOnline){
return;
}
if(this.reconnectTime >= 3){
return this.reconnectConfirm();
}
this.reconnectTime += 1;
this.connectSocket();
}
// 連接配接socket
connectSocket() {
console.log(this.user);
this.socket = uni.connectSocket({
url: this.url + '?token=' + this.user.token,
complete: () => {}
})
// 監聽連接配接成功
this.socket.onOpen(() => this.onOpen())
// 監聽接收資訊
this.socket.onMessage((res) => this.onMessage(res))
// 監聽斷開
this.socket.onClose(() => this.onClose())
// 監聽錯誤
this.socket.onError(() => this.onError())
}
// 監聽打開
onOpen() {
// 使用者狀态上線
this.isOnline = true;
console.log('socket連接配接成功');
this.reconnectTime = 0;
this.isOpenReconnect = true;
// 擷取使用者離線消息
this.getMessage();
}
// 擷取離線消息
getMessage() {
$H.post('/chat/getmessage');
}
// 擷取聊天記錄
getChatDetail(key = false) {
key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`
return this.getStorage(key)
}
// 監聽關閉
onClose() {
// 使用者下線
this.isOnline = false;
this.socket = null;
if(this.isOpenReconnect){
this.reconnect();
}
console.log('socket連接配接關閉');
}
// 監聽消息
onMessage(data) {
console.log('監聽消息', data);
let res = JSON.parse(data.data)
// 錯誤
switch (res.msg) {
case 'fail':
return uni.showToast({
title: res.data,
icon: 'none'
});
break;
case 'recall': // 撤回消息
this.handleOnRecall(res.data)
break;
case 'updateApplyList': // 新的好友申請
$store.dispatch('getApply');
break;
case 'moment': // 朋友圈更新
this.handleMoment(res.data)
break;
default:
// 處理消息
this.handleOnMessage(res.data)
break;
}
}
// 擷取本地存儲中的朋友圈動态通知
getNotice(){
let notice = $U.getStorage('moment_'+this.user.id);
return notice ? JSON.parse(notice) : {
avatar:'',
user_id:0,
num:0
}
}
// 處理朋友圈通知
async handleMoment(message){
let notice = this.getNotice();
switch(message.type){
case 'new':
if(message.user_id !== this.user.id){
notice.avatar = message.avatar;
notice.user_id = message.user_id;
uni.showTabBarRedDot({
index:2
})
}
break;
default:
if(message.user_id !== this.user.id){
notice.avatar = message.avatar
notice.user_id = message.user_id
notice.num += 1
}
if(notice.num > 0){
uni.setTabBarBadge({
index:2,
text:notice.num > 99 ? '99+' : notice.num.toString()
})
}else{
uni.removeTabBarBadge({
index:2
})
}
break;
}
uni.$emit('momentNotice',notice);
$U.setStorage('moment_'+this.user.id,JSON.stringify(notice));
}
// 讀取朋友圈動态
async readMoments(){
let notice = {
avatar:'',
user_id:0,
num:0
};
$U.setStorage('moment_'+this.user.id,JSON.stringify(notice));
uni.hideTabBarRedDot({
index:2
})
uni.removeTabBarBadge({
index:2
})
uni.$emit('momentNotice',notice);
}
// 監聽撤回消息處理
async handleOnRecall(message) {
// 通知聊天頁撤回消息
uni.$emit('onMessage', {
...message,
isremove: 1
})
// 修改聊天記錄
let id = message.chat_type === 'group' ? message.to_id : message.from_id
// key值：chatDetail_目前使用者id_會話類型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`
// 擷取原來的聊天記錄
let list = this.getChatDetail(key)
// 根據k查找對應聊天記錄
let index = list.findIndex(item => item.id === message.id)
if (index === -1) return;
list[index].isremove = 1
// 存儲
this.setStorage(key, list)
// 目前會話最後一條消息的顯示
this.updateChatItem({
id,
chat_type: message.chat_type
}, (item) => {
item.data = '對方撤回了一條消息'
item.update_time = (new Date()).getTime()
return item
})
}
// 處理消息
async handleOnMessage(message) {
// 添加消息記錄到本地存儲中
let {
data
} = this.addChatDetail(message, false)
// 更新會話清單
this.updateChatList(data, false)
// 全局通知
uni.$emit('onMessage', data)
// 消息提示
// this.messageNotice()
}
// 監聽連接配接錯誤
onError() {
// 使用者下線
this.isOnline = false;
this.socket = null;
console.log('socket連接配接錯誤');
}
// 關閉連接配接
close() {
this.socket.close()
this.isOpenReconnect = false
}
// 建立聊天對象
createChatObject(detail) {
this.TO = detail;
console.log('建立聊天對象', this.TO)
}
// 銷毀聊天對象
destoryChatObject() {
this.TO = false
}
// 組織發送資訊格式
formatSendData(params) {
return {
id: 0, // 唯一id，後端生成，用于撤回指定消息
from_avatar: this.user.avatar, // 發送者頭像
from_name: this.user.nickname || this.user.username, // 發送者昵稱
from_id: this.user.id, // 發送者id
to_id: params.to_id || this.TO.id, // 接收人/群 id
to_name: params.to_name || this.TO.name, // 接收人/群 名稱
to_avatar: params.to_avatar || this.TO.avatar, // 接收人/群 頭像
chat_type: params.chat_type || this.TO.chat_type, // 接收類型
type: params.type, // 消息類型
data: params.data, // 消息内容
options: params.options ? params.options : {}, // 其他參數
create_time: (new Date()).getTime(), // 建立時間
isremove: 0, // 是否撤回
sendStatus: params.sendStatus ? params.sendStatus : "pending" // 發送狀态，success發送成功,fail發送失敗,pending發送中
}
}
// 發送資訊
send(message, onProgress = false) {
return new Promise(async (result,) => {
// 添加消息曆史記錄
// this.addChatDetail();
let {
k
} = this.addChatDetail(message);
// 更新會話清單
this.updateChatList(message);
// 驗證是否上線
if (!this.checkOnLine()) return reject('未上線');
// 上傳檔案
let isUpload = (message.type !== 'text' && message.type !== 'emoticon' && message.type !==
'card' && !message.data.startsWith('http://akyan.oss-cn-beijing.aliyuncs.com/'))
let uploadResult = ''
if (isUpload) {
uploadResult = await $H.upload('/upload', {
filePath: message.data
}, onProgress);
}
// 送出到後端
let data = isUpload ? uploadResult : message.data;
$H.post('/chat/send', {
to_id: this.TO.id,
type: message.type,
chat_type: this.TO.chat_type,
data,
options: JSON.stringify(message.options)
}).then(res => {
// 發送成功
console.log('chat.js發送成功');
message.id = res.id
message.sendStatus = 'success';
if (message.type === 'video') {
message.data = res.data;
message.options = res.options;
}
// 更新指定曆史記錄
console.log('更新指定曆史記錄',message);
this.updateChatDetail(message, k);
result(res);
}).catch(err => {
// 發送失敗
console.log('chat.js發送失敗');
message.sendStatus = 'fail';
// 更新指定曆史記錄
this.updateChatDetail(message, k);
// 斷線重連提示
result(err);
});
})
}
// 驗證是否上線
checkOnLine() {
if (!this.isOnline) {
// 斷線重連提示
this.reconnectConfirm();
return false;
}
return true;
}
// 斷線重連提示
reconnectConfirm() {
uni.showModal({
title: '你已經斷線，是否重新連接配接？',
content: '重新連接配接',
success: res => {
if (res.confirm) {
this.connectSocket();
}
},
});
}
// 添加聊天記錄
addChatDetail(message, isSend = true) {
console.log('添加到聊天記錄');
// 擷取對方id
let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
if (!id) {
return {
data: {},
k: 0
}
}
// key值：chatDetail_目前使用者id_會話類型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
console.log(key);
// 擷取原來的聊天記錄
let list = this.getChatdetail(key)
console.log('擷取原來的聊天記錄', list);
// 辨別
message.k = 'k' + list.length
list.push(message)
// 加入存儲
console.log('加入存儲', message);
this.setStorage(key, list);
// 傳回
return {
data: message,
k: message.k
}
}
// 删除指定聊天記錄
async deleteChatDetailItem(message,isSend = true){
// 擷取對方id
let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
// key值：chatDetail_目前使用者id_會話類型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
// 擷取原來的聊天記錄
let list = this.getChatdetail(key);
// 根據k查找對應聊天記錄
let index = list.findIndex(item => item.k === message.k || item.id === message.id);
if (index === -1) return;
list.splice(index,1);
// 存儲
this.setStorage(key, list);
}
// 更新指定曆史記錄
async updateChatDetail(message, k, isSend = true) {
// 擷取對方id
let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
// key值：chatDetail_目前使用者id_會話類型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
// 擷取原來的聊天記錄
let list = this.getChatdetail(key);
// 根據k查找對應聊天記錄
let index = list.findIndex(item => item.k === k);
if (index === -1) return;
list[index] = message;
// 存儲
this.setStorage(key, list);
}
// 擷取聊天記錄
getChatdetail(key = false) {
key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`;
return this.getStorage(key);
}
// 格式化會話最後一條消息顯示
formatChatItemData(message,) {
let data = message.data.length > 18 ? message.data.slice(0, 17) + '...' : message.data;
switch (message.type) {
case 'emoticon':
data = '[表情]'
break;
case 'image':
data = '[圖檔]'
break;
case 'audio':
data = '[語音]'
break;
case 'video':
data = '[視訊]'
break;
case 'card':
data = '[名片]'
break;
}
data = isSend ? data : `${message.from_name}: ${data}`
return data
}
// 更新會話清單
updateChatList(message, isSend = true) {
// 擷取本地存儲會話清單
let list = this.getChatList()
// 是否處于目前聊天中
let isCurrentChat = false
// 接收人/群 id/頭像/昵稱
let id = 0
let avatar = ''
let name = ''
// 判斷私聊還是群聊
if (message.chat_type === 'user') { // 私聊
// 聊天對象是否存在
isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : this.TO.id === message.from_id) :
false
id = isSend ? message.to_id : message.from_id
avatar = isSend ? message.to_avatar : message.from_avatar
name = isSend ? message.to_name : message.from_name
} else { // 群聊
isCurrentChat = this.TO && (this.TO.id === message.to_id)
id = message.to_id
avatar = message.to_avatar
name = message.to_name
}
// 會話是否存在
let index = list.findIndex(item => {
return item.chat_type === message.chat_type && item.id === id
})
// 最後一條消息展現形式
// let data = isSend ? message.data : `${message.from_name}: ${message.data}`
let data = this.formatChatItemData(message, isSend)
// 會話不存在，建立會話
// 未讀數是否 + 1
let noreadnum = (isSend || isCurrentChat) ? 0 : 1
if (index === -1) {
let chatItem = {
id, // 接收人/群 id
chat_type: message.chat_type, // 接收類型 user單聊 group群聊
avatar, // 接收人/群 頭像
name, // 接收人/群 昵稱
update_time: (new Date()).getTime(), // 最後一條消息的時間戳
data, // 最後一條消息内容
type: message.type, // 最後一條消息類型
noreadnum, // 未讀數
istop: false, // 是否置頂
shownickname: false, // 是否顯示昵稱
nowarn: false, // 消息免打擾
strongwarn: false, // 是否開啟強提醒
}
// 群聊
if (message.chat_type === 'group' && message.group) {
chatItem.shownickname = true
chatItem.name = message.to_name
chatItem = {
...chatItem,
user_id: message.group.user_id, // 群管理者id
remark: "", // 群公告
invite_confirm: 1, // 邀請确認
}
}
list.unshift(chatItem)
} else { // 存在，更新會話
// 拿到目前會話
let item = list[index]
// 更新該會話最後一條消息時間，内容，類型
item.update_time = (new Date()).getTime()
item.name = message.to_name
item.data = data
item.type = message.type
// 未讀數更新
item.noreadnum += noreadnum
// 置頂會話
list = this.listToFirst(list, index)
}
// 存儲
let key = `chatlist_${this.user.id}`
this.setStorage(key, list)
// 更新未讀數
this.updateBadge(list)
// 通知更新vuex中的聊天會話清單
uni.$emit('onUpdateChatList', list)
return list
}
// 擷取聊天記錄
getChatList() {
let key = `chatlist_${this.user.id}`
return this.getStorage(key)
}
getChatList_old(message, isSend = true) {
// 擷取本地存儲會話清單
let list = this.getChatList();
// 是否處在目前聊天中
let isCurrentChat = false
// 接收人/群 id/頭像/昵稱
let id = 0;
let avatar = '';
let name = '';
// 判斷私聊還是群聊
if (message.chat_type === 'user') {
// 私聊
isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : message.from_id) : false;
id = isSend ? message.to_id : message.from_id;
avatar = isSend ? message.to_avatar : message.from_avatar
name = isSend ? message.to_name : message.from_name
} else {
// 群聊
}
// 會話是否存在
let index = list.findIndex(item => {
return item.chat_type === message.chat_type && item.id === id;
})
// 最後一條消息展現形式
let data = isSend ? message.data : `${message.from_name}:${message.data}`;
// 未讀數是否 +1
let noreadnum = (isSend || isCurrentChat) ? 0 : 1;
// 會話不存在 建立會話
if (index === -1) {
let chatItem = {
id, // 接收人/群 id
chat_type: message.chat_type, // 接收類型 user 單聊 group群聊
name, // 接收人/群 昵稱
avatar, // 接收人/群 頭像
update_time: (new Date()).getTime(), // 最後發送的時間
data, // 最後一條消息的内容
type: message.type,
noreadnum: 1, // 未讀數
istop: false, // 是否置頂
shownickname: false, // 是否顯示昵稱
nowarn: false, // 是否免打擾
strongwarn: false, // 是否強提醒
}
if (message.chat_type === 'group') {
chatItem = {
...chatItem,
user_id: 0, // 管理者id
remark: '', // 群公告
invite_confirm: 0 // 邀請确認
}
}
list.unshift(chatItem)
} else {
// 存在，更新會話
// 拿到目前會話
let item = list[index]
// 更新改會話最後一條消息時間，内容，類型
item.update_time = (new Date()).getTime();
item.data = data;
item.type = message.type;
// 未讀數更新
item.noreadnum += noreadnum
// 置頂會話
list = this.listToFirst(list, index);
}
// 存儲
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 更新未讀數
this.updateBadge(list);
// 更新vuex中的聊天會話清單
uni.$emit('onUpdateChatList', list);
console.log('擷取到的會話清單：', list)
return list;
/**
* {
id:1, // 接收人/群 id
chat_type:'user', // 接收類型 user 單聊 group群聊
name:'昵稱', // 接收人/群 昵稱
avatar:"/static/images/demo/demo6.jpg", // 接收人/群 頭像
type:'',// 最後一條消息類型
update_time:1628069958, // 最後發送的時間
data:"你好啊，哈哈哈", // 最後一條消息的内容
noreadnum:1, // 未讀數
istop:false, // 是否置頂
shownickname:0, // 是否顯示昵稱
nowarn:0, // 是否免打擾
strongwarn:0, // 是否強提醒
user_id://管理者id，
remark:'公告', // 群公告
invite_confirm:0, // 邀請确認
},
**/
}
// 擷取本地存儲會話清單
getChatList() {
let key = `chatlist_${this.user.id}`;
return this.getStorage(key);
}
// 更新指定會話
async updateChatItem(where,) {
// 擷取所有會話清單
let list = this.getChatList();
// 找到目前會話
let index = list.findIndex(item => item.id === where.id && item.chat_type === where.chat_type);
if (index === -1) return;
// 更新資料
if(typeof data === 'function'){
list[index] = data(list[index])
}else{
list[index] = data
}
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 更新會話清單狀态
uni.$emit('onUpdateChatList', list);
}
// 讀取指定會話
async readChatItem(id,) {
// 擷取所有會話清單
let list = this.getChatList();
// 找到目前會話
let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
if (index !== -1) {
list[index].noreadnum = 0;
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 重新擷取未讀數
this.updateBadge();
// 更新會話清單狀态
uni.$emit('onUpdateChatList', list);
}
}
// 删除指定會話
async removeChatItem(id,) {
// 擷取所有會話清單
let list = this.getChatList();
// 找到目前會話
let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
if (index !== -1) {
list.splice(index, 1);
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 重新擷取未讀數
this.updateBadge();
// 更新會話清單狀态
uni.$emit('onUpdateChatList', list);
}
}
// 清空聊天記錄
async clearChatDetail(id,) {
let key = `chatDetail_${this.user.id}_${chat_type}_${id}`;
$U.removeStorage(key);
// 擷取所有會話清單
let list = this.getChatList();
// 找到目前會話
let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
if (index !== -1) {
list[index].data = '';
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 更新會話清單狀态
uni.$emit('onUpdateChatList', list);
}
}
/**
{
id:1, // 接收人/群 id
chat_type:'user', // 接收類型 user單聊 group群聊
avatar:'', // 接收人/群 頭像
name:'昵稱', // 接收人/群 昵稱
update_time:(new Date()).getTime(), // 最後一條消息的時間戳
data:"最後一條消息内容", // 最後一條消息内容
type:'text', // 最後一條消息類型
noreadnum:0, // 未讀數
istop:false, // 是否置頂
shownickname:0, // 是否顯示昵稱
nowarn:0, // 消息免打擾
strongwarn:0, // 是否開啟強提醒
user_id:0, // 群管理者id
remark:"公告", // 群公告
invite_confirm:0, // 邀請确認
}
* **/
// 初始化會話
initChatListItem(message) {
// 擷取本地存儲會話清單
let list = this.getChatList()
// 會話是否存在
let index = list.findIndex(item => {
return item.chat_type === message.chat_type && item.id === message.to_id
})
// 最後一條消息展現形式
let data = this.formatChatItemData(message, true)
// 會話不存在，建立會話
if (index === -1) {
let chatItem = {
id: message.to_id, // 接收人/群 id
chat_type: message.chat_type, // 接收類型 user單聊 group群聊
avatar: message.to_avatar, // 接收人/群 頭像
name: message.to_name, // 接收人/群 昵稱
update_time: (new Date()).getTime(), // 最後一條消息的時間戳
data: message.data, // 最後一條消息内容
type: 'system', // 最後一條消息類型
noreadnum: 0, // 未讀數
istop: false, // 是否置頂
shownickname: false, // 是否顯示昵稱
nowarn: false, // 消息免打擾
strongwarn: false, // 是否開啟強提醒
}
// 群聊
if (message.chat_type === 'group' && message.group) {
chatItem = {
...chatItem,
user_id: message.group.user_id, // 群管理者id
remark: '', // 群公告
invite_confirm: message.group.invite_confirm, // 邀請确認
}
}
list.unshift(chatItem)
// 存儲
let key = `chatlist_${this.user.id}`
this.setStorage(key, list)
// 通知更新vuex中的聊天會話清單
uni.$emit('onUpdateChatList', list)
}
}
// 擷取指定會話
getChatListItem(id,) {
// 擷取所有會話清單
let list = this.getChatList()
// 找到目前會話
let index = list.findIndex(item => item.id === id && item.chat_type === chat_type)
if (index !== -1) {
return list[index]
}
return false
}
// 更新未讀數
async updateBadge(list = false) {
// 擷取所有會話清單
list = list ? list : this.getChatList()
// 統計所有未讀數
let total = 0
list.forEach(item => {
total += item.noreadnum
})
// 設定底部導航欄角标
if (total > 0) {
uni.setTabBarBadge({
index: 0,
text: total <= 99 ? total.toString() : '99+'
})
} else {
uni.removeTabBarBadge({
index: 0
})
}
uni.$emit('totalNoreadnum', total)
}
// 擷取存儲
getStorage(key) {
let list = $U.getStorage(key);
return list ? JSON.parse(list) : [];
}
// 設定存儲
setStorage(key,) {
return $U.setStorage(key, JSON.stringify(value));
}
// 數組置頂
listToFirst(arr,) {
if (index != 0) {
arr.unshift(arr.splice(index, 1)[0]);
}
return arr;
}
// 撤回消息
recall(message) {
return new Promise((result,) => {
$H.post('/chat/recall', {
to_id: message.to_id,
chat_type: message.chat_type,
id: message.id,
}).then(res => {
// key值：chatDetail_目前使用者id_會話類型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${message.to_id}`
// 擷取原來的聊天記錄
let list = this.getChatDetail(key)
// 根據k查找對應聊天記錄
let index = list.findIndex(item => item.id === message.id)
if (index === -1) return;
list[index].isremove = 1
// 存儲
this.setStorage(key, list)
result(res)
// 更新會話最後一條消息顯示
this.updateChatItem({
id: message.to_id,
chat_type: message.chat_type
}, (item) => {
item.data = '你撤回了一條消息'
item.update_time = (new Date()).getTime()
return item
})
}).catch(err => {
reject(err)
})
})
}
}
export default
/store/modules/user.js
import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
import Chat from '@/common/free-lib/chat.js';
import $C from '@/common/free-lib/config.js';
export default {
state: {
user: false,
apply: {
rows: [],
count: 0,
},
mailList: [],
chat: null,
// 會話清單
chatList: [],
// 總未讀數
totalNoreadnum: 0,
notice: {
avatar: '',
user_id: 0,
num: 0
}
},
mutations: {
updateUser(state, {
k,
v
}) {
if (state.user) {
state.user[k] = v;
$U.setStorage('user', JSON.stringify(state.user));
}
}
},
actions: {
// 登入後處理
login({
state,
dispatch
},) {
// 存到狀态種
state.user = user;
// 存儲到本地存儲中
$U.setStorage('token', user.token);
$U.setStorage('user', JSON.stringify(user));
$U.setStorage('user_id', user.id);
// 擷取好友申請清單
dispatch('getApply');
// 更新角标提示
dispatch('updateMailBadge');
// 連接配接socket
state.chat = new Chat({
url: $C.socketUrl
})
// 擷取會話清單
dispatch('getChatList');
// 初始化總未讀數角标
dispatch('updateBadge');
// 擷取朋友圈動态通知
dispatch('getNotice');
},
// 登出
logout({
state
}) {
// 清除登入狀态
state.user = false;
// 清除本地存儲資料
$U.removeStorage('token');
$U.removeStorage('user');
$U.removeStorage('user_id');
// 關閉socket連接配接
state.chat.close();
state.chat = null;
// 跳轉到登入頁
uni.reLaunch({
url: '/pages/common/login/login'
})
// 登出監聽事件
uni.$off('onUpdateChatList')
uni.$off('momentNotice')
uni.$off('totalNoreadnum')
},
// 初始化登入狀态
initLogin({
state,
dispatch
}) {
// 拿到存儲的資料
let user = $U.getStorage('user');
if (user) {
// 初始化登入狀态
state.user = JSON.parse(user);
// 連接配接socket
state.chat = new Chat({
url: $C.socketUrl
})
// 擷取會話清單
dispatch('getChatList');
// 擷取離線資訊
// 擷取好友申請清單
dispatch('getApply');
// 初始化總未讀數角标
dispatch('updateBadge');
// 擷取朋友圈動态通知
dispatch('getNotice');
}
},
// 擷取好友申請清單
getApply({
state,
dispatch
}, page = 1) {
$H.get('/apply/' + page).then(res => {
if (page === 1) {
state.apply = res
} else {
// 下拉重新整理
state.apply.rows = [...state.apply.rows, ...res.rows]
state.apply.count = res.count
}
// 更新通訊錄角标提示
dispatch('updateMailBadge');
});
},
// 更新通訊錄角标提示
updateMailBadge({
state
}) {
let count = state.apply.count > 99 ? '99+' : state.apply.count.toString();
console.log(state.apply.count);
if (state.apply.count > 0) {
return uni.setTabBarBadge({
index: 1,
text: count
})
}
uni.removeTabBarBadge({
index: 1
})
},
// 擷取通訊錄清單
getMailList({
state
}) {
$H.get('/friend/list').then(res => {
state.mailList = res.rows.newList ? res.rows.newList : [];
})
},
// 擷取會話清單
getChatList({
state
}) {
state.chatList = state.chat.getChatList()
// 監聽會話清單變化
uni.$on('onUpdateChatList', (list) => {
state.chatList = list
})
},
// 擷取朋友圈動态通知
getNotice({
state
}) {
state.notice = state.chat.getNotice();
if (state.notice.num > 0) {
uni.setTabBarBadge({
index: 2,
text: state.notice.num > 99 ? '99+' : state.notice.num.toString()
})
} else {
uni.removeTabBarBadge({
index: 2
})
}
uni.$on('momentNotice', (notice) => {
state.notice = notice
})
},
// 初始化總未讀數角标
// 更新未讀數
async updateBadge(list = false) {
// 開啟監聽總未讀數變化
uni.$on('totalNoreadnum', (num) => {
state.totalNoreadnum = num
})
state.chat.updateBadge()
},
// 初始化總未讀數角标
updateBadge({
state
}) {
// 開啟監聽總未讀數變化
uni.$on('totalNoreadnum', (num) => {
console.log('totalNoreadnum:', num);
state.totalNoreadnum = num
})
state.chat.updateBadge()
},
// 斷線自動重連
reconnect({state}){
if(state.user && state.chat){
state.chat.reconnect()
}
}
},
}
/App.vue
<script>
export default {
onLaunch: function() {
// #ifdef APP-PLUS-NVUE
// 加載公共圖示庫
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont",
'src': "url('/static/font_1365296_2ijcbdrmsg.ttf')"
});
// #endif
// 初始化錄音管理器
this.$store.commit('initRECORD');
// 初始化登入狀态
this.$store.dispatch('initLogin');
console.log('App Launch')
},
onShow: function() {
this.$store.dispatch('reconnect');
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每個頁面公共css */
@import "./common/free.css";
@import "./common/common.css";
/* #ifndef APP-PLUS-NVUE */
@import "./common/free-icon.css";
/* #endif */
</style>
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)