zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ 优化im 接口403判定，新增从买家端以及卖家端进行跳转im权限判定，新增im掉线重连以及重连成功提醒，新增发送的消息断线将会进行重新发送消息提示，优化最近浏览 订单列表空展示。注释部分im打印的日志信息

master
学习很差啦 2023-03-01 14:59:54 +08:00
parent 32b29f45e7
commit 4700bc995a
16 changed files with 288 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
buyer/src/components/mixes/talkIm.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div></div>
</template>
<script>
import { getIMDetail } from "@/api/common";
import Storage from "@/plugins/storage";
import { getMemberMsg } from "@/api/login";
export default {
data() {
return {
Storage,
IMLink: "",
};
},
methods: {
// 跳转im客服
async IMService() {
// 获取访问Token
let accessToken = Storage.getItem("accessToken");
await this.getIMDetailMethods();
const userInfo = await getMemberMsg();
if (userInfo.success) {
window.open(
this.IMLink + "?token=" + accessToken + "&id=" + this.storeMsg.storeId
);
} else {
this.$Message.error("请登录后再联系客服");
return;
}
},
// 获取im信息
async getIMDetailMethods() {
let res = await getIMDetail();
if (res.success) {
this.IMLink = res.result;
}
},
},
};
</script>
<style lang="scss" scoped></style>

46
buyer/src/pages/GoodsDetail.vue
View File

@ -50,8 +50,7 @@ import {
getGoodsDistribution, getGoodsDistribution,
} from "@/api/member"; } from "@/api/member";
import { getDetailById } from "@/api/shopentry"; import { getDetailById } from "@/api/shopentry";
import { getIMDetail } from "@/api/common"; import imTalk from '@/components/mixes/talkIm'
import Storage from "../plugins/storage";
export default { export default {
name: "GoodsDetail", name: "GoodsDetail",
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
@ -61,6 +60,7 @@ export default {
created () { created () {
this.getGoodsDetail(); this.getGoodsDetail();
}, },
mixins: [imTalk],
data () { data () {
return { return {
goodsMsg: {}, // 商品信息 goodsMsg: {}, // 商品信息
@ -68,49 +68,11 @@ export default {
categoryBar: [], // 分类 categoryBar: [], // 分类
storeCollected: false, // 商品收藏 storeCollected: false, // 商品收藏
storeMsg: {}, // 店铺信息 storeMsg: {}, // 店铺信息
IMLink: "",
}; };
}, },
methods: { methods: {
// 跳转im客服
async IMService () {
// 获取访问Token
let accessToken = Storage.getItem("accessToken");
await this.getIMDetailMethods();
if (!accessToken) {
this.$Message.error("请登录后再联系客服");
return;
}
window.open(
this.IMLink +
"?token=" +
accessToken +
"&id=" +
this.goodsMsg.data.storeId +
"&goodsId=" +
this.goodsMsg.data.goodsId +
"&skuId=" +
this.goodsMsg.data.id
);
// window.open(
// 'http://192.168.0.139:8000/' +
// "?token=" +
// accessToken +
// "&id=" +
// this.goodsMsg.data.storeId +
// "&goodsId=" +
// this.goodsMsg.data.goodsId +
// "&skuId=" +
// this.goodsMsg.data.id
// );
},
// 获取im信息
async getIMDetailMethods () {
let res = await getIMDetail();
if (res.success) {
this.IMLink = res.result;
}
},
// 点击规格 // 点击规格
targetClickSku (val) { targetClickSku (val) {
this.getGoodsDetail(val); this.getGoodsDetail(val);

32
buyer/src/pages/Merchant.vue
View File

@ -106,8 +106,7 @@
</template> </template>
<script> <script>
import {getIMDetail} from "@/api/common";
import Storage from "../plugins/storage";
import {getDetailById, getCateById} from "@/api/shopentry"; import {getDetailById, getCateById} from "@/api/shopentry";
import {cancelCollect, collectGoods, isCollection} from "@/api/member"; import {cancelCollect, collectGoods, isCollection} from "@/api/member";
import {goodsList} from "@/api/goods"; import {goodsList} from "@/api/goods";
@ -117,6 +116,7 @@ import HoverSearch from "@/components/header/hoverSearch";
import storage from "@/plugins/storage"; import storage from "@/plugins/storage";
import {getFloorStoreData} from "@/api/index.js"; import {getFloorStoreData} from "@/api/index.js";
import {seckillByDay} from "@/api/promotion"; import {seckillByDay} from "@/api/promotion";
import imTalk from '@/components/mixes/talkIm'
export default { export default {
name: "Merchant", name: "Merchant",
@ -125,6 +125,7 @@ export default {
ModelForm, ModelForm,
HoverSearch, HoverSearch,
}, },
mixins: [imTalk],
data() { data() {
return { return {
// 店铺装修的内容 // 店铺装修的内容
@ -140,7 +141,6 @@ export default {
cateList: [], // 店铺分裂 cateList: [], // 店铺分裂
goodsList: [], // 商品列表 goodsList: [], // 商品列表
total: 0, // 商品数量 total: 0, // 商品数量
IMLink: "",
params: { params: {
// 请求参数 // 请求参数
pageNumber: 1, pageNumber: 1,
@ -187,30 +187,8 @@ export default {
} }
); );
}, },
// 跳转im客服
async IMService() {
// 获取访问Token
let accessToken = Storage.getItem("accessToken");
await this.getIMDetailMethods();
if (!accessToken) {
this.$Message.error("请登录后再联系客服");
return;
}
window.open(
this.IMLink +
"?token=" +
accessToken +
"&id=" +
this.storeMsg.storeId
);
},
// 获取im信息
async getIMDetailMethods() {
let res = await getIMDetail();
if (res.success) {
this.IMLink = res.result;
}
},
// getStoreMsg () { // 店铺信息 // getStoreMsg () { // 店铺信息
// getDetailById(this.$route.query.id).then(res => { // getDetailById(this.$route.query.id).then(res => {
// if (res.success) { // if (res.success) {

74
im/src/components/chat/panel/TalkPanel.vue
View File

@ -58,16 +58,21 @@
{{ item.float == "right" ? name : toUser.name }} | {{ item.float == "right" ? name : toUser.name }} |
{{ unixToDate(item.createTime, "MM月dd日 hh:mm") }} {{ unixToDate(item.createTime, "MM月dd日 hh:mm") }}
</span> </span>
<!-- 文本消息 --> <div class="flex flex-a-c">
<div v-if="item.messageType == 'MESSAGE'" style="background-color: #d0e9ff;color: black;" <i @click="againSendMessage(item)" v-if="item.webSocketStatus" class="el-icon-refresh-left again main-color"></i>
class="text-message" :class="{ <!-- 文本消息 -->
left: item.float == 'left', <div v-if="item.messageType == 'MESSAGE'" style="background-color: #d0e9ff;color: black;"
right: item.float == 'right', class="text-message" :class="{
}"> left: item.float == 'left',
<div class="arrow"></div> right: item.float == 'right',
<pre v-if="!emojistwo.includes(item.text)" v-html="item.text" /> }">
<pre v-if="emojistwo.includes(item.text)" v-html="textReplaceEmoji(item.text)" /> <div class="arrow"></div>
<pre v-if="!emojistwo.includes(item.text)" v-html="item.text" />
<pre v-if="emojistwo.includes(item.text)" v-html="textReplaceEmoji(item.text)" />
</div>
</div> </div>
<div v-if="item.webSocketStatus" class="tips">网络异常发送失败，请重新发送。</div>
<div v-if="item.messageType == 'GOODS' && item.text != null" class="goodsStyle " :class="{ <div v-if="item.messageType == 'GOODS' && item.text != null" class="goodsStyle " :class="{
left: item.float == 'left', left: item.float == 'left',
@ -93,17 +98,24 @@
left: item.float == 'left', left: item.float == 'left',
right: item.float == 'right', right: item.float == 'right',
}" @click="linkToOrders(item.text.sn)"> }" @click="linkToOrders(item.text.sn)">
<div class="oedersn"> <div class="oedersn">
<el-tooltip class="item" effect="dark" :content="item.text.sn" placement="top-start"> <el-tooltip class="item" effect="dark" :content="item.text.sn" placement="top-start">
<a> 订单号:{{ item.text.sn }} </a> <a> 订单号:{{ item.text.sn }} </a>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="goods-shared-box"> <div class="goods-shared-box">
<div>
<img :src="item.text.groupImages" style="height: 100px;width: 100px;" /> <div class="goods-item" v-for="(order,orderIndex) in item.text.orderItems" :key="orderIndex">
<img :src="order.image" style="height: 100px;width: 100px;" />
<div>
<span class="orderGoodsName">{{ order.name }}</span>
<div class="goods-item-price">
<span>{{ order.goodsPrice | unitPrice('￥') }}</span>
</div>
</div>
</div> </div>
<div class="shared-goods"> <div class="shared-goods">
<span class="orderGoodsName">{{ item.text.groupName }}</span>
<div class="orderGoodsTime">{{ item.text.paymentTime }}</div> <div class="orderGoodsTime">{{ item.text.paymentTime }}</div>
<span class="orderFlowPrice"> <span class="orderFlowPrice">
订单金额：<span>{{ item.text.flowPrice | unitPrice('￥') }}</span> 订单金额：<span>{{ item.text.flowPrice | unitPrice('￥') }}</span>
@ -395,6 +407,12 @@ export default {
}, },
// #冗余代码结束 // #冗余代码结束
// 重新发送消息
againSendMessage(val){
this.submitSendMessage(val.text)
},
// 回车键发送消息回调事件 // 回车键发送消息回调事件
submitSendMessage (content) { submitSendMessage (content) {
const record = { const record = {
@ -848,7 +866,21 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.flex-a-c{
align-items: center;
>div{
margin-left: 10px;
}
}
.tips{
margin-top:10px;
color: #999;
font-size: 12px;
}
.again{
margin-top: 5px;
cursor: pointer;
}
.oderStyle { .oderStyle {
border: 1px solid #f2f2f2; border: 1px solid #f2f2f2;
@ -926,13 +958,18 @@ export default {
.orderFlowPrice { .orderFlowPrice {
color: #999; color: #999;
font-size: 12px; font-size: 12px;
>span{ >span{
color: red; color: red;
font-size: 18px; font-size: 18px;
} }
} }
.goods-item-price{
margin-top: 10px;
font-size: 13px;
color: red;
}
.main-box { .main-box {
position: relative; position: relative;
@ -1247,7 +1284,14 @@ export default {
} }
} }
.goods-shared-box{ .goods-shared-box{
display: flex; cursor: pointer;
>.goods-item{
margin: 10px 0;
display: flex;
border-bottom: 1px solid #ededed;
align-items: center;
}
>.shared-goods{ >.shared-goods{
padding-left: 10px; padding-left: 10px;
display: flex; display: flex;

62
im/src/components/chat/panel/template/footPrint.vue
View File

@ -3,7 +3,7 @@
<div class="tab"> <div class="tab">
<el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true> <el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
<el-tab-pane label="最近浏览" name="goods"> <el-tab-pane label="最近浏览" name="goods">
<dl> <dl v-if='list.length' class='base-list'>
<dd :key="index" @click="linkToGoods(item.goodsId, item.id)" v-for="(item,index) in list" v-infinite-scroll="loadMore"> <dd :key="index" @click="linkToGoods(item.goodsId, item.id)" v-for="(item,index) in list" v-infinite-scroll="loadMore">
<div class="base"> <div class="base">
<div> <div>
@ -27,32 +27,38 @@
</dd> </dd>
</dl> </dl>
<div v-else class='no-more'>
{{noMoreList.goods.title}}
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="订单列表" name="orders"> <el-tab-pane label="订单列表" name="orders">
<dl> <dl class='base-order-list' v-if='orderList.length'>
<dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index"> <dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
<div class="order-list"> <div class="order-list">
<div class="order-top order-padding"> <div class="order-top order-padding">
<span class="order-sn" @click="linkToOrders(item.sn)">订单号:{{ item.sn }}</span> <span class="order-sn" @click="linkToOrders(item.sn)">订单号:{{ item.sn }}</span>
</div> </div>
<div class="order-section order-padding"> <div class="order-section order-padding">
<img :src="item.groupImages" alt=""> <div class="order-items" v-for="(order,orderIndex) in item.orderItems" :key="orderIndex">
<span class="order-goods-name" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span> <img :src="order.image" alt="">
<span class="order-goods-name" @click="linkToOrders(item.sn)"> {{ order.name }}</span>
<span class="price">{{order.goodsPrice | unitPrice("￥")}}</span>
</div>
<!-- <img :src="item.groupImages" alt=""> -->
<div class="order-btn "> <div class="order-btn ">
<el-button class="store-button" v-if="item.btnHide == 1 && toUser.storeFlag" <el-button class="store-button" v-if="item.btnHide == 1 && toUser.storeFlag"
size="mini" @click="submitSendOrderMessage(item, index)" plain>发送</el-button> size="mini" @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
</div> </div>
</div> </div>
<div class="order-footer order-padding"> <div class="order-footer order-padding">
<span> 订单金额： <span style="color: red;">{{ <span></span>
item.orderItems[0].goodsPrice | unitPrice("￥")
}}</span></span>
<el-tag size='mini' :type="col[item.orderStatus]">{{ <el-tag size='mini' :type="col[item.orderStatus]">{{
item.orderStatus == 'STAY_PICKED_UP' ? '待自提' item.orderStatus == 'STAY_PICKED_UP' ? '待自提'
: item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus : item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus
== ==
'PAID' ? '已付款' : item.orderStatus == 'UNDELIVERED' ? '待发货' : item.orderStatus == 'DELIVERED' 'PAID' ? '已付款' : item.orderStatus == 'UNDELIVERED' ? '待发货' : item.orderStatus == 'DELIVERED'
? '已发货' : item.orderStatus == 'COMPLETED' ? '已完成' : item.orderStatus == 'TAKE' ? '待校验' : ? '已发货' : item.orderStatus == 'COMPLETED' ? '已完成' : item.orderStatus == 'TAKE' ? '待核销' :
'' ''
}}</el-tag> }}</el-tag>
</div> </div>
@ -61,6 +67,9 @@
</dd> </dd>
</dl> </dl>
<div v-else class='no-more'>
{{noMoreList.orders.title}}
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -78,12 +87,16 @@ export default {
}, },
data () { data () {
return { return {
noMoreList:{
'goods':{title:'暂无最近浏览',value:false},
'orders':{title:'暂无订单信息',value:false},
},
activeName: 'goods', activeName: 'goods',
btnHide: undefined, btnHide: undefined,
hide: true, hide: true,
col: { col: {
CANCELLED: 'error', CANCELLED: 'danger',
PAID: 'error', PAID: 'danger',
TAKE: '', TAKE: '',
COMPLETED: 'success', COMPLETED: 'success',
DELIVERED: 'danger', DELIVERED: 'danger',
@ -142,12 +155,14 @@ export default {
// 发送订单列表 // 发送订单列表
submitSendOrderMessage (item, index) { submitSendOrderMessage (item, index) {
console.log(item, 'item'); console.log(item, 'item');
const context = { const context = {
sn: item.sn, sn: item.sn,
groupImages: item.groupImages, groupImages: item.groupImages,
paymentTime: item.paymentTime, paymentTime: item.paymentTime,
groupName: item.groupName, groupName: item.groupName,
flowPrice: item.flowPrice, flowPrice: item.flowPrice,
orderItems:item.orderItems,
orderStatus: item.orderStatus orderStatus: item.orderStatus
} }
const record = { const record = {
@ -163,7 +178,7 @@ export default {
item.btnHide = 0 item.btnHide = 0
}, },
handleClick (tab, event) { handleClick (tab, event) {
console.log(tab, event);
} }
}, },
props: { props: {
@ -178,7 +193,7 @@ export default {
}, },
mounted () { mounted () {
// state.user.toUser // state.user.toUser
console.log(this.orderList, ' this.$store.state.user.toUser this.$store.state.user.toUser this.$store.state.user.toUser'); // console.log(this.orderList, ' this.$store.state.user.toUser this.$store.state.user.toUser this.$store.state.user.toUser');
this.btnHide = localStorage.getItem('btnHide') this.btnHide = localStorage.getItem('btnHide')
} }
} }
@ -193,7 +208,12 @@ export default {
white-space: nowrap; white-space: nowrap;
width: 200px; width: 200px;
} }
.no-more{
font-size: 12px;
color: #999;
text-align: center;
margin-top: 20px;
}
.box { .box {
max-width: 362px; max-width: 362px;
@ -374,4 +394,18 @@ export default {
// height: calc(100vh - 110px); // height: calc(100vh - 110px);
// overflow-y: auto; // overflow-y: auto;
// } // }
.base-list{
padding-bottom: 120px;
}
.base-order-list{
padding-bottom: 100px;
}
.price{
color: red;
margin-left: 10px;
margin-bottom: 10px;
}
.order-items{
margin-bottom: 10px;
}
</style> </style>

1
im/src/components/editor/MeEditor.vue
View File

@ -173,7 +173,6 @@ export default {
methods: { methods: {
// 读取对话编辑草稿信息 并赋值给当前富文本 // 读取对话编辑草稿信息 并赋值给当前富文本
getDraftText (index_name) { getDraftText (index_name) {
console.log("findTalk(index_name)", findTalk(index_name));
return findTalk(index_name)?.draft_text || ""; return findTalk(index_name)?.draft_text || "";
}, },

8
im/src/components/face.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<img :src="text" alt=""/> <img :src="text || 'https://avatars.dicebear.com/api/initials/'+name+'.svg?fontSize=38'" alt=""/>
</template> </template>
<script> <script>
@ -8,7 +8,11 @@
text:{ text:{
type:null, type:null,
default:'' default:''
} },
name:{
type:null,
default:''
},
} }
} }
</script> </script>

3
im/src/core/lazy-use.js
View File

@ -85,5 +85,4 @@ Vue.prototype.$alert = MessageBox.alert
import Contextmenu from 'vue-contextmenujs' import Contextmenu from 'vue-contextmenujs'
Vue.use(Contextmenu) Vue.use(Contextmenu)
process.env.NODE_ENV !== 'production' &&
console.warn('[Lumen-IM] NOTICE: element-ui use lazy-load.')

121
im/src/plugins/ws-socket.js
View File

@ -1,3 +1,6 @@
import { Notification, MessageBox } from "element-ui";
let wsSignIn; // ws 是否是掉线状态
import store from "@/store";
class WsSocket { class WsSocket {
/** /**
* Websocket 连接 * Websocket 连接
@ -25,7 +28,7 @@ class WsSocket {
reconnect: { reconnect: {
lockReconnect: false, lockReconnect: false,
setTimeout: null, // 计时器对象 setTimeout: null, // 计时器对象
time: 5000, // 重连间隔时间 time: 1000, // 重连间隔时间
number: 1000, // 重连次数 number: 1000, // 重连次数
}, },
}; };
@ -49,9 +52,9 @@ class WsSocket {
// 定义 WebSocket 原生方法 // 定义 WebSocket 原生方法
this.events = Object.assign( this.events = Object.assign(
{ {
onError: (evt) => { }, onError: (evt) => {},
onOpen: (evt) => { }, onOpen: (evt) => {},
onClose: (evt) => { }, onClose: (evt) => {},
}, },
events events
); );
@ -63,7 +66,7 @@ class WsSocket {
* @param {String} event 事件名 * @param {String} event 事件名
* @param {Function} callBack 回调方法 * @param {Function} callBack 回调方法
*/ */
on (event, callBack) { on(event, callBack) {
// 对应 socket-instance.js // 对应 socket-instance.js
this.onCallBacks[event] = callBack; this.onCallBacks[event] = callBack;
return this; return this;
@ -72,7 +75,23 @@ class WsSocket {
/** /**
* 加载 WebSocket * 加载 WebSocket
*/ */
loadSocket () { loadSocket() {
/**
* 判断当前如果是掉线提示
* 重连成功后关闭掉线提示，新增重连提示
*/
if (wsSignIn) {
store.commit('SET_WS_STATUS',true);
wsSignIn.close();
Notification({
title: "成功",
message: "重连成功",
type: "success",
position: "top-right",
duration: 1000,
});
}
// 判断当前是否已经连接 // 判断当前是否已经连接
if (this.connect != null) { if (this.connect != null) {
this.connect.close(); this.connect.close();
@ -85,41 +104,72 @@ class WsSocket {
connect.onopen = this.onOpen.bind(this); connect.onopen = this.onOpen.bind(this);
connect.onmessage = this.onMessage.bind(this); connect.onmessage = this.onMessage.bind(this);
connect.onclose = this.onClose.bind(this); connect.onclose = this.onClose.bind(this);
this.connect = connect; this.connect = connect;
} }
/** /**
* 连接 Websocket * 连接 Websocket
*/ */
connection () { connection() {
this.loadSocket(); this.loadSocket();
} }
/** /**
* 掉线重连 Websocket * 掉线重连 Websocket
*/ */
reconnect () { reconnect() {
console.log("掉线重连接");
/**
* 长时间挂载页面中并且重连次数为空的时候进行提示
*/
if (this.config.reconnect.number == 0) {
MessageBox("当前对话链接已失效，请从关闭重新进入。", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnPressEscape: false,
closeOnClickModal: false,
type: "warning",
})
.then(() => {
window.close();
Notification({
title: "对话链接已失效提示",
message: "请手动关闭当前页面",
type: "error",
position: "top-right",
});
})
.catch(() => {
Notification({
title: "对话链接已失效提示",
message: "请手动关闭当前页面",
type: "error",
position: "top-right",
});
});
return false;
}
// 掉线重连提示
wsSignIn = Notification({
title: "掉线重连接提示",
message: `网络连接已断开，正在尝试重新连接......`,
type: "error",
position: "top-right",
duration: 0,
});
// 掉线更改消息状态
store.commit('SET_WS_STATUS',true);
let reconnect = this.config.reconnect; let reconnect = this.config.reconnect;
if (reconnect.lockReconnect || reconnect.number == 0) { if (reconnect.lockReconnect || reconnect.number == 0) {
return; return;
} }
this.config.reconnect.lockReconnect = true; this.config.reconnect.lockReconnect = true;
// 没连接上会一直重连，设置延迟避免请求过多 // 没连接上会一直重连，设置延迟避免请求过多
reconnect.setTimeout && clearTimeout(reconnect.setTimeout); reconnect.setTimeout && clearTimeout(reconnect.setTimeout);
this.config.reconnect.setTimeout = setTimeout(() => { this.config.reconnect.setTimeout = setTimeout(() => {
this.connection(); this.connection();
this.config.reconnect.lockReconnect = false; this.config.reconnect.lockReconnect = false;
this.config.reconnect.number--; this.config.reconnect.number--;
console.log(
`网络连接已断开，正在尝试重新连接(${this.config.reconnect.number})...`
);
}, reconnect.time); }, reconnect.time);
} }
@ -128,8 +178,7 @@ class WsSocket {
* *
* @param {Object} evt Websocket 消息 * @param {Object} evt Websocket 消息
*/ */
onParse (evt) { onParse(evt) {
const res = JSON.parse(evt.data).result; const res = JSON.parse(evt.data).result;
//如果创建时间是时间戳类型则转换为 日期类型，否则新压入栈的消息的创建时间和从数据库读取出来的创建时间格式对不上，处理的时候会出异常。 //如果创建时间是时间戳类型则转换为 日期类型，否则新压入栈的消息的创建时间和从数据库读取出来的创建时间格式对不上，处理的时候会出异常。
@ -145,7 +194,7 @@ class WsSocket {
* @param format 转换格式 * @param format 转换格式
* @returns {*|string} * @returns {*|string}
*/ */
unixToDate (unix, format) { unixToDate(unix, format) {
if (!unix) return unix; if (!unix) return unix;
let _format = format || "yyyy-MM-dd hh:mm:ss"; let _format = format || "yyyy-MM-dd hh:mm:ss";
const d = new Date(unix); const d = new Date(unix);
@ -179,7 +228,7 @@ class WsSocket {
* *
* @param {Object} evt Websocket 消息 * @param {Object} evt Websocket 消息
*/ */
onOpen (evt) { onOpen(evt) {
this.events.onOpen(evt); this.events.onOpen(evt);
if (this.config.heartbeat.enabled) { if (this.config.heartbeat.enabled) {
@ -192,7 +241,7 @@ class WsSocket {
* *
* @param {Object} evt Websocket 消息 * @param {Object} evt Websocket 消息
*/ */
onClose (evt) { onClose(evt) {
console.log("关闭连接", evt); console.log("关闭连接", evt);
if (this.config.heartbeat.enabled) { if (this.config.heartbeat.enabled) {
clearInterval(this.config.heartbeat.setInterval); clearInterval(this.config.heartbeat.setInterval);
@ -211,7 +260,7 @@ class WsSocket {
* *
* @param {Object} evt Websocket 消息 * @param {Object} evt Websocket 消息
*/ */
onError (evt) { onError(evt) {
this.events.onError(evt); this.events.onError(evt);
} }
@ -220,28 +269,30 @@ class WsSocket {
* *
* @param {Object} evt Websocket 消息 * @param {Object} evt Websocket 消息
*/ */
onMessage (evt) { onMessage(evt) {
let result = this.onParse(evt); let result = this.onParse(evt);
if (this.onParse(evt).text.includes('goodsName') || this.onParse(evt).text.includes('groupName')) { if (
this.onParse(evt).text.includes("goodsName") ||
this.onParse(evt).text.includes("groupName")
) {
let params = { let params = {
...this.onParse(evt), ...this.onParse(evt),
text: JSON.parse(this.onParse(evt).text) text: JSON.parse(this.onParse(evt).text),
} };
this.onCallBacks["event_talk"](params); this.onCallBacks["event_talk"](params);
} else { } else {
let params = { let params = {
...this.onParse(evt), ...this.onParse(evt),
text: this.onParse(evt).text text: this.onParse(evt).text,
} };
this.onCallBacks["event_talk"](params); this.onCallBacks["event_talk"](params);
} }
// 指定推送消息 // 指定推送消息
} }
/** /**
* WebSocket心跳检测 * WebSocket心跳检测
*/ */
heartbeat () { heartbeat() {
console.log("WebSocket心跳检测"); console.log("WebSocket心跳检测");
this.config.heartbeat.setInterval = setInterval(() => { this.config.heartbeat.setInterval = setInterval(() => {
this.connect.send("PING"); this.connect.send("PING");
@ -253,14 +304,14 @@ class WsSocket {
* *
* @param {Object} message * @param {Object} message
*/ */
send (message) { send(message) {
this.connect.send(JSON.stringify(message)); this.connect.send(JSON.stringify(message));
} }
/** /**
* 关闭连接 * 关闭连接
*/ */
close () { close() {
this.connect.close(); this.connect.close();
} }
@ -270,7 +321,7 @@ class WsSocket {
* @param {String} event 事件名 * @param {String} event 事件名
* @param {Object} data 数据 * @param {Object} data 数据
*/ */
emit (event, data) { emit(event, data) {
if (this.connect && this.connect.readyState === 1) { if (this.connect && this.connect.readyState === 1) {
this.connect.send(JSON.stringify(data)); this.connect.send(JSON.stringify(data));
} else { } else {

8
im/src/store/modules/dialogue.js
View File

@ -21,11 +21,15 @@ export default {
float: "", float: "",
}, },
], ],
webSocketWithOut:false, // ws 是否是掉线 无输出状态
// 对话索引（聊天对话的唯一索引） // 对话索引（聊天对话的唯一索引）
index_name: null, index_name: null,
}, },
mutations: { mutations: {
// 设置ws状态
SET_WS_STATUS: (state,resource) =>{
state.webSocketWithOut = resource
},
// 更新对话 // 更新对话
UPDATE_DIALOGUE_MESSAGE (state, resource) { UPDATE_DIALOGUE_MESSAGE (state, resource) {
state.records = []; state.records = [];
@ -56,6 +60,8 @@ export default {
// 推送对话记录 // 推送对话记录
PUSH_DIALOGUE (state, record) { PUSH_DIALOGUE (state, record) {
record = {...record,webSocketStatus:state.webSocketWithOut}
console.log("推送对话",)
state.records.push(record); state.records.push(record);
}, },

1
im/src/store/modules/talk.js
View File

@ -37,6 +37,7 @@ const Talk = {
talkNum: (state) => state.items.length, talkNum: (state) => state.items.length,
}, },
mutations: { mutations: {
// 设置对话列表 // 设置对话列表
SET_TALK_ITEMS (state, resource) { SET_TALK_ITEMS (state, resource) {
Vue.set(state, 'items', resource.items) Vue.set(state, 'items', resource.items)

1
im/src/store/modules/user.js
View File

@ -19,7 +19,6 @@ let state = {
// 判断用户是否登录 // 判断用户是否登录
if (getToken()) { if (getToken()) {
let userInfo = getUserInfo(); let userInfo = getUserInfo();
console.error(userInfo)
state.name = userInfo.name; state.name = userInfo.name;
state.id = userInfo.id; state.id = userInfo.id;
state.face = userInfo.face ? userInfo.face : state.avatar; state.face = userInfo.face ? userInfo.face : state.avatar;

2
im/src/store/state.js
View File

@ -4,8 +4,6 @@ const defaultAvatar = require('@/assets/image/detault-avatar.jpg')
const state = { const state = {
socketStatus: false, socketStatus: false,
website_name: process.env.VUE_APP_WEBSITE_NAME, website_name: process.env.VUE_APP_WEBSITE_NAME,
copyright: `©2020 - 2021 ${process.env.VUE_APP_WEBSITE_NAME} 在线聊天 <a href="https://github.com/gzydong/LumenIM" style="color: #777272;font-weight: 400;" target="_blank">Github源码</a>`,
// 头像加载失败后的默认头像 // 头像加载失败后的默认头像
defaultAvatar: "this.src='" + defaultAvatar + "'", defaultAvatar: "this.src='" + defaultAvatar + "'",
} }

11
im/src/utils/request.js
View File

@ -14,6 +14,7 @@ const request = axios.create({
timeout: 20000, timeout: 20000,
}); });
let isRefreshing = false
/** /**
* 异常拦截处理器 * 异常拦截处理器
* *
@ -27,10 +28,12 @@ const errorHandler = (error) => {
removeAll(); removeAll();
location.reload(); location.reload();
} else if (error.response.status == 403) { } else if (error.response.status == 403) {
if(!isRefreshing){
/** /**
* 403提示将重新从商家移动端进入当前页面 * 403提示将重新从商家移动端进入当前页面
*/ */
MessageBox("当前登录已失效，请从商家管理后台重新登录。", "提示", { MessageBox("当前登录已失效，请从关闭重新进入。", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
closeOnPressEscape: false, closeOnPressEscape: false,
@ -38,6 +41,7 @@ const errorHandler = (error) => {
type: "warning", type: "warning",
}) })
.then(() => { .then(() => {
isRefreshing = true
window.close(); window.close();
Notification({ Notification({
title:"登录失效提示", title:"登录失效提示",
@ -45,9 +49,10 @@ const errorHandler = (error) => {
type:"error", type:"error",
position: "top-right", position: "top-right",
}); });
}) })
.catch(() => { .catch(() => {
isRefreshing = true
Notification({ Notification({
title:"登录失效提示", title:"登录失效提示",
message: "请手动关闭当前页面", message: "请手动关闭当前页面",
@ -55,6 +60,8 @@ const errorHandler = (error) => {
position: "top-right", position: "top-right",
}); });
}); });
isRefreshing = false
}
} else if(error.response.status == 400){ } else if(error.response.status == 400){
Notification({ Notification({
message: error.response.data.message, message: error.response.data.message,

4
im/src/views/message/index.vue
View File

@ -9,7 +9,7 @@
<el-header height="60px" class="header"> <el-header height="60px" class="header">
<div class="user-login" v-popover:usercard> <div class="user-login" v-popover:usercard>
<div class="user-box"> <div class="user-box">
<face :text="face" class="user-face"></face> <face :text="face" :name="name" class="user-face"></face>
</div> </div>
</div> </div>
<p class="user-status"> <p class="user-status">
@ -263,7 +263,7 @@ export default {
}, },
unreadNum (value) { unreadNum (value) {
clearInterval(this.interval); clearInterval(this.interval);
console.log("%c 更新未读消息", "color:#32ccbc"); // console.log("%c 更新未读消息", "color:#32ccbc");
this.$store.commit("SET_UNREAD_NUM", value); this.$store.commit("SET_UNREAD_NUM", value);
if (value > 0) { if (value > 0) {

24
seller/src/views/home/home.vue
View File

@ -21,7 +21,7 @@
<div>店铺状态：{{ userData.storeDisable == 'OPEN' ? '开启中' : '关闭' }}</div> <div>店铺状态：{{ userData.storeDisable == 'OPEN' ? '开启中' : '关闭' }}</div>
</div> </div>
<div class="box-item" @click="im()"> <div class="box-item" @click="im()">
<Button type="info">点击登录客服</Button> <Button type="info" :loading='load'>点击登录客服</Button>
</div> </div>
</div> </div>
@ -207,7 +207,7 @@ import { getSellerHomeData, getHomeNotice } from "@/api/index";
import { getIMDetail } from "@/api/common" import { getIMDetail } from "@/api/common"
import { seeArticle } from "@/api/pages"; import { seeArticle } from "@/api/pages";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { userMsg } from "@/api/index";
export default { export default {
name: "home", name: "home",
data () { data () {
@ -221,8 +221,10 @@ export default {
title: "", title: "",
}, },
IMLink: "", IMLink: "",
load:false, //加载Im
}; };
}, },
methods: { methods: {
// 跳转页面 // 跳转页面
navigateTo (name) { navigateTo (name) {
@ -249,16 +251,24 @@ export default {
this.noticeFlage = true; this.noticeFlage = true;
} }
}, },
/**
* 点击登录im的时候需要去判断一下当前店铺信息是否失效
* 失效的话重新请求刷新token保证最新的token去访问im
*/
async im () { async im () {
// 获取访问Token // 获取访问Token
let accessToken = this.getStore("accessToken"); let accessToken = this.getStore("accessToken");
this.load = true
await this.getIMDetailMethods(); await this.getIMDetailMethods();
let res = await getIMDetail(); const userInfo = await userMsg();
if (!accessToken) { this.load = false
this.$Message.error("请登录后再联系客服"); if (userInfo.success && this.IMLink) {
return; window.open(`${this.IMLink}?token=` + accessToken);
}
else{
this.$Message.error("请登录后再联系客服");
} }
window.open(`${res.result}?token=` + accessToken);
}, },
// 获取im信息 // 获取im信息