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

更换socket

master
程 2023-01-12 14:35:24 +08:00
parent bbe315fb45
commit 83b2295818
2 changed files with 848 additions and 733 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
pages/mine/im/index.vue
View File

@ -10,8 +10,7 @@
<!-- 消息 --> <!-- 消息 -->
<view class="flex-column-start" v-if="msgList.length" v-for="(item, index) in msgList" :key="index"> <view class="flex-column-start" v-if="msgList.length" v-for="(item, index) in msgList" :key="index">
<view class="flex-row-start column-time"> <view class="flex-row-start column-time">
<view v-show="compareTime(index, item.createTime)" class="flex-row-start date-text" <view v-show="compareTime(index, item.createTime)" class="flex-row-start date-text">
>
</view> </view>
</view> </view>
<!-- 用户消息 头像可选加入--> <!-- 用户消息 头像可选加入-->
@ -20,11 +19,14 @@
<view> <view>
<view class="user-name">{{ user.nickName }}</view> <view class="user-name">{{ user.nickName }}</view>
<view class="margin-left padding-chat bg-user-orang" style="border-radius: 35rpx; "> <view class="margin-left padding-chat bg-user-orang" style="border-radius: 35rpx; ">
<text style="word-break: break-all;" v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text> <text style="word-break: break-all;"
<!-- <view v-if="item.messageType == 'GOODS'"> v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
<view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; "> <view v-if="item.messageType == 'GOODS'">
<view class="goodsCard u-flex u-row-between u-p-b-0"
style="width:100%;margin: 0 0; ">
<view class="imagebox" @click="jumpGoodDelic"> <view class="imagebox" @click="jumpGoodDelic">
<image class="image" :src="JSON.parse(item.text)['thumbnail']" mode="widthFix"></image> <image class="image" :src="JSON.parse(item.text)['thumbnail']"
mode="widthFix"></image>
</view> </view>
<view class="goodsdesc" @click="jumpGoodDelic"> <view class="goodsdesc" @click="jumpGoodDelic">
<view class="goodsdesc-name"> <view class="goodsdesc-name">
@ -39,49 +41,49 @@
</view> </view>
</view> </view>
</view> </view>
</view> --> </view>
<!-- <view v-if="item.messageType === 'ORDER'"> <view v-if="item.messageType == 'ORDER'">
<view class="orderSn"> <view class="orderSn">
<text>订单号：{{ JSON.parse(item.text)['sn'] }}</text> <text>订单号：{{ JSON.parse(item.text)['sn'] }}</text>
<view class="oederList"> <view class="oederList">
<img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;" <img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;"
:src="JSON.parse(item.text)['groupImages']" mode="widthFix" /> :src="JSON.parse(item.text)['groupImages']" mode="widthFix" />
<view class="groupNameOrTime"> <view class="groupNameOrTime">
<text @click="linkTosOrders(JSON.parse(item.text)['sn'])">{{ JSON.parse(item.text)['groupName'] <text @click="linkTosOrders(item.text)">{{ JSON.parse(item.text)['groupName']
}}</text> }}</text>
<view class="orderTime"> <text>{{ JSON.parse(item.text)['paymentTime'] }}</text></view> <view class="orderTime">
<text>{{ JSON.parse(item.text)['paymentTime'] }}</text>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
</view> -->
</view> </view>
</view> </view>
</view> </view>
<view> <view>
<u-avatar :src="user.face" :text="user.face ? '' : user.name" bg-color="#DDDDDD"></u-avatar> <u-avatar :src="user.face" :text="user.face ? '' : user.name" bg-color="#DDDDDD"></u-avatar>
<!-- <u-image class="chat-img margin-left" style="height: 100rpx;width: 100rpx;" shape="circle"
:src="user.face || 'https://avatars.dicebear.com/api/initials/' + user.nickName + '.svg?fontSize=38'"
mode="aspectFill"></u-image> -->
</view> </view>
</view> </view>
<!-- 接收人消息 --> <!-- 接收人消息 -->
<view v-else class="flex-row-start margin-left margin-top one-show"> <view v-else class="flex-row-start margin-left margin-top one-show">
<view class="chat-img flex-row-center"> <view class="chat-img flex-row-center">
<u-avatar :src="toUser.face" :text="toUser.face ? '' : toUser.name" bg-color="#DDDDDD"></u-avatar> <u-avatar :src="toUser.face" :text="toUser.face ? '' : toUser.name" bg-color="#DDDDDD">
<!-- <u-image style="height: 100rpx;width: 100rpx;" shape="circle" </u-avatar>
:src="toUser.face || 'https://avatars.dicebear.com/api/initials/' + toUser.name + '.svg?fontSize=38'"
mode="aspectFit"></u-image> -->
</view> </view>
<view class="flex" style="width: 500rpx;"> <view class="flex" style="width: 500rpx;">
<view> <view>
<view class="other-name">{{ toUser.name }}</view> <view class="other-name">{{ toUser.name }}</view>
<view class="margin-left padding-chat flex-column-start bg-to-color" style="border-radius: 35rpx;"> <view class="margin-left padding-chat flex-column-start bg-to-color"
<text style="word-break: break-all;" v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text> style="border-radius: 35rpx;">
<text style="word-break: break-all;"
v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
<view v-if="item.messageType === 'GOODS'"> <view v-if="item.messageType === 'GOODS'">
<!-- <view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; "> <view class="goodsCard u-flex u-row-between u-p-b-0"
style="width:100%;margin: 0 0; ">
<view class="imagebox" @click="jumpGoodDelic"> <view class="imagebox" @click="jumpGoodDelic">
<image class="image" :src="JSON.parse(item.text)['thumbnail']" mode="widthFix"></image> <image class="image" :src="JSON.parse(item.text)['thumbnail']"
mode="widthFix"></image>
</view> </view>
<view class="goodsdesc" @click="jumpGoodDelic"> <view class="goodsdesc" @click="jumpGoodDelic">
<view class="goodsdesc-name"> <view class="goodsdesc-name">
@ -95,22 +97,24 @@
}}</text> }}</text>
</view> </view>
</view> </view>
</view> -->
</view> </view>
<!-- <view v-if="item.messageType === 'ORDER'"> </view>
<view v-if="item.messageType === 'ORDER'">
<view class="orderSn"> <view class="orderSn">
<text>订单号：{{ JSON.parse(item.text)['sn'] }}</text> <text>订单号：{{ JSON.parse(item.text)['sn'] }}</text>
<view class="oederList"> <view class="oederList">
<img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;" <img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;"
:src="JSON.parse(item.text)['groupImages']" mode="widthFix" /> :src="JSON.parse(item.text)['groupImages']" mode="widthFix" />
<view class="groupNameOrTime"> <view class="groupNameOrTime">
<text @click="linkTosOrders(JSON.parse(item.text)['sn'])">{{ JSON.parse(item.text)['groupName'] <text @click="linkTosOrders(item.text)">{{ JSON.parse(item.text)['groupName']
}}</text> }}</text>
<view class="orderTime"> <text>{{ JSON.parse(item.text)['paymentTime'] }}</text></view> <view class="orderTime">
<text>{{ JSON.parse(item.text)['paymentTime'] }}</text>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
</view> -->
</view> </view>
</view> </view>
@ -131,7 +135,8 @@
goodListData.goodsName goodListData.goodsName
}}</text> }}</text>
</view> </view>
<view class="goodsdesc-rice" style="margin-top:10rpx; color: orange;"><text style="font-size:20rpx;">¥{{ <view class="goodsdesc-rice" style="margin-top:10rpx; color: orange;"><text
style="font-size:20rpx;">¥{{
goodListData.price goodListData.price
}}</text> }}</text>
</view> </view>
@ -151,9 +156,9 @@
<view class="flex" style="width: 500rpx;"> <view class="flex" style="width: 500rpx;">
<view class="margin-left padding-chat flex-column-start" <view class="margin-left padding-chat flex-column-start"
style="border-radius: 35rpx;background-color: #f9f9f9;"> style="border-radius: 35rpx;background-color: #f9f9f9;">
<view class="cuIcon-loading turn-load" style="font-size: 35rpx;color: #3e9982;"> <!-- <view class="cuIcon-loading turn-load" style="font-size: 35rpx;color: #3e9982;">
</view> </view> -->
</view> </view>
</view> </view>
</view> </view>
@ -165,8 +170,9 @@
<view class="flex-column-center" style="position: fixed;bottom: -180px;" :animation="animationData"> <view class="flex-column-center" style="position: fixed;bottom: -180px;" :animation="animationData">
<view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;"> <view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;">
<!-- vue无法使用软键盘"发送" --> <!-- vue无法使用软键盘"发送" -->
<input v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;" @confirm="sendMessage" <input v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;"
confirm-type="search" placeholder-class="my-neirong-sm" placeholder="用一句简短的话描述您的问题" /> @confirm="sendMessage" confirm-type="search" placeholder-class="my-neirong-sm"
placeholder="用一句简短的话描述您的问题" />
<view @click="sendMessage" class="cu-tag bg-cyan round"> <view @click="sendMessage" class="cu-tag bg-cyan round">
发送 发送
</view> </view>
@ -194,20 +200,36 @@ var l
var wh var wh
// 顶部空盒子的高度 // 顶部空盒子的高度
var mgUpHeight var mgUpHeight
import { getTalkMessage, getTalkByUser, jumpObtain } from "@/api/im.js"; import {
getTalkMessage,
getTalkByUser,
jumpObtain
} from "@/api/im.js";
import SocketService from "@/utils/socket_service.js"; import SocketService from "@/utils/socket_service.js";
import storage from "@/utils/storage.js"; import storage from "@/utils/storage.js";
import { beautifyTime } from "@/utils/filters.js" import {
beautifyTime
} from "@/utils/filters.js"
import config from '@/config/config.js'
export default { export default {
// 页面卸载后清除imGoodId // 页面卸载后清除imGoodId
onUnload() { onUnload() {
storage.setImGoodsLink('') // #ifdef H5
uni.setStorageSync("imGoodId", '');
// #endif
if (this.socketOpen == true) {
uni.closeSocket();
}
}, },
onLoad(options) { onLoad(options) {
this.sokcet();
// 没有goodsid则不显示 发送商品弹窗 // 没有goodsid则不显示 发送商品弹窗
this.showHideModel = options.goodsid this.showHideModel = options.goodsid
// 发送后刷新页面不显示 发送商品弹窗 local里面imGoodId不为空显示 // 发送后刷新页面不显示 发送商品弹窗 local里面imGoodId不为空显示
this.localImGoodsId = storage.getImGoodsLink() // #ifdef H5
this.localImGoodsId = uni.getStorageSync("imGoodId");
// #endif
this.resolve = options this.resolve = options
// 请求商品信息 // 请求商品信息
if (this.resolve.goodsid) { if (this.resolve.goodsid) {
@ -249,7 +271,8 @@ export default {
} }
this.ws.connect(); // this.ws.connect();
this.sokcet()
}, },
onPullDownRefresh() { onPullDownRefresh() {
this.params.pageNumber = this.params.pageNumber + 1 this.params.pageNumber = this.params.pageNumber + 1
@ -261,6 +284,7 @@ export default {
data() { data() {
return { return {
socketOpen: false, //是否连接
storage, storage,
fixed: 'fixed', fixed: 'fixed',
bottom: '50px', bottom: '50px',
@ -290,38 +314,54 @@ export default {
goodListData: {} goodListData: {}
} }
}, },
watch: { // watch: {
'ws.callBackMapping': { // 'ws.callBackMapping': {
handler: function (val) { // handler: function (val) {
val = JSON.parse(val) // val = JSON.parse(val)
if (val.messageResultType == 'MESSAGE') { // if (val.messageResultType == 'MESSAGE') {
this.msgList.push(val.result) // this.msgList.push(val.result)
} // }
this.newMessageNum++; // this.newMessageNum++;
//接收到消息后发送已读 // //接收到消息后发送已读
let msg = val // let msg = val
msg.operation_type = 'READ' // msg.operation_type = 'READ'
this.ws.send(JSON.stringify(msg)) // this.ws.send(JSON.stringify(msg))
} // }
} // }
}, // },
methods: { methods: {
beautifyTime, sendMessage() {
//订单详情 if (this.msg == "") {
linkTosOrders (val) { return 0;
console.log(val); }
uni.navigateTo({ if (this.socketOpen == false) {
url: '/pages/order/orderDetail?sn=' + val, return
}
let msg = {
operation_type: "MESSAGE",
to: this.toUser.userId,
from: this.user.id,
message_type: "MESSAGE",
context: this.msg,
talk_id: this.params.talkId,
}
let data = JSON.stringify(msg);
try {
uni.sendSocketMessage({
data: data
}); });
this.msgList.push({
"text": this.msg,
"my": true,
"messageType": 'MESSAGE'
})
let type = 'down';
this.msgGo(type)
this.msg = ""
} catch (e) {
uni.closeSocket();
}
}, },
// 跳转商品详情页
jumpGoodDelic () {
uni.navigateTo({
url: `/pages/product/goods?id=${this.resolve.skuid}&goodsId=${this.resolve.goodsid}`,
});
},
//发送商品
sendGoodsMessage() { sendGoodsMessage() {
let msg = { let msg = {
operation_type: "MESSAGE", operation_type: "MESSAGE",
@ -331,19 +371,88 @@ export default {
context: this.goodListData, context: this.goodListData,
talk_id: this.params.talkId, talk_id: this.params.talkId,
} }
this.ws.send(JSON.stringify(msg)) let data = JSON.stringify(msg);
this.msgList.push({ "text": JSON.stringify(this.goodListData), "my": true, "messageType": 'GOODS' }) uni.sendSocketMessage({
data: data
});
this.msgList.push({
"text": JSON.stringify(this.goodListData),
"my": true,
"messageType": 'GOODS'
})
this.showHide = false this.showHide = false
storage.setImGoodsLink(this.params.talkId) // #ifdef H5
//成功发送商品连接后，滚动到底部 uni.setStorageSync("imGoodId", 1111111);
// #endif
this.$nextTick(() => { this.$nextTick(() => {
uni.pageScrollTo({ uni.pageScrollTo({
scrollTop: 2000000, scrollTop: 2000000,
duration: 0 duration: 300
}); });
}) })
}, },
sokcet() {
var _this = this;
uni.closeSocket();
this.socketOpen = false;
try {
//WebSocket的地址
var url = config.baseWsUrl + '/' + storage.getAccessToken();
// 连接
uni.connectSocket({
url: url,
});
// 监听WebSocket连接已打开
uni.onSocketOpen(function(res) {
_this.socketOpen = true;
});
// 监听连接失败
uni.onSocketError(function(err) {
if (err && err.code !== 1000) {
setTimeout(function() {
_this.socketOpen = true;
uni.connectSocket({
url: url,
});
}, 5 * 1000)
}
});
// 监听连接关闭
uni.onSocketClose(function(err) {
if (err && err.code !== 1000) {
setTimeout(function() {
_this.socketOpen = true;
uni.connectSocket({
url: url,
});
}, 5 * 1000)
}
});
// 监听收到信息
uni.onSocketMessage(function(res) {
uni.hideLoading()
})
} catch (e) {
}
},
beautifyTime,
//订单详情
linkTosOrders(val) {
let order = JSON.parse(val)
uni.navigateTo({
url: '/pages/order/orderDetail?sn=' + order.sn,
});
},
// 跳转商品详情页
jumpGoodDelic() {
uni.navigateTo({
url: `/pages/product/goods?id=${this.resolve.skuid}&goodsId=${this.resolve.goodsid}`,
});
},
//取消发送 //取消发送
cancelModel() { cancelModel() {
this.showHide = false this.showHide = false
@ -423,30 +532,35 @@ export default {
// 这里应该传入问题的id,模拟就用index代替了 // 这里应该传入问题的id,模拟就用index代替了
}, },
sendMessage () { // sendMessage() {
// 消息为空不做任何操作 // // 消息为空不做任何操作
if (this.msg == "") { // if (this.msg == "") {
return 0; // return 0;
} // }
// 显示消息 msg消息文本,my鉴别是谁发的消息(不能用俩个消息数组循环,否则消息不会穿插) // // 显示消息 msg消息文本,my鉴别是谁发的消息(不能用俩个消息数组循环,否则消息不会穿插)
let msg = { // let msg = {
operation_type: "MESSAGE", // operation_type: "MESSAGE",
to: this.toUser.userId, // to: this.toUser.userId,
from: this.user.id, // from: this.user.id,
message_type: "MESSAGE", // message_type: "MESSAGE",
context: this.msg, // context: this.msg,
talk_id: this.params.talkId, // talk_id: this.params.talkId,
} // }
this.ws.send(JSON.stringify(msg)) // this.ws.send(JSON.stringify(msg))
this.msgList.push({ "text": this.msg, "my": true, "messageType": 'MESSAGE' }) // this.msgList.push({
// 保证消息可见 // "text": this.msg,
let type = 'down'; // "my": true,
this.msgGo(type) // "messageType": 'MESSAGE'
// 回答问题 // })
// this.msgKf(this.msg) // console.log(this.msgList, 'this.msgListthis.msgListthis.msgListthis.msgListthis.msgList')
// 清除消息 // // 保证消息可见
this.msg = "" // let type = 'down';
}, // this.msgGo(type)
// // 回答问题
// // this.msgKf(this.msg)
// // 清除消息
// this.msg = ""
// },
// msgKf(x) { // msgKf(x) {
// // loading // // loading
// // this.msgLoad = true // // this.msgLoad = true
@ -503,7 +617,6 @@ export default {
}) })
} }
}) })
this.msgGo(type) this.msgGo(type)
}, },
touchMoreMessage(e) { touchMoreMessage(e) {
@ -534,8 +647,10 @@ export default {
if (this.msgList[index].is_revoke == 1) { if (this.msgList[index].is_revoke == 1) {
return false; return false;
} }
if (datetime) {
datetime = datetime.replace(/-/g, "/"); datetime = datetime.replace(/-/g, "/");
}
let time = Math.floor(Date.parse(datetime) / 1000); let time = Math.floor(Date.parse(datetime) / 1000);
let currTime = Math.floor(new Date().getTime() / 1000); let currTime = Math.floor(new Date().getTime() / 1000);
@ -546,7 +661,7 @@ export default {
return true; return true;
} }
let nextDate let nextDate
if (this.msgList[index + 1]) { if (this.msgList[index + 1] && this.msgList[index + 1].createTime) {
nextDate = this.msgList[index + 1].createTime.replace(/-/g, "/"); nextDate = this.msgList[index + 1].createTime.replace(/-/g, "/");
if (nextDate - datetime < 300) return false; if (nextDate - datetime < 300) return false;
} }
@ -585,9 +700,9 @@ export default {
if (new RegExp("(" + k + ")").test(_format)) if (new RegExp("(" + k + ")").test(_format))
_format = _format.replace( _format = _format.replace(
RegExp.$1, RegExp.$1,
RegExp.$1.length === 1 RegExp.$1.length === 1 ?
? o[k] o[k] :
: ("00" + o[k]).substr(("" + o[k]).length) ("00" + o[k]).substr(("" + o[k]).length)
); );
return _format; return _format;
}, },

8
pages/product/goods.vue
View File

@ -601,10 +601,10 @@ export default {
linkMsgDetail () { linkMsgDetail () {
// lili 基础客服 // lili 基础客服
this.$options.filters.talkIm(this.storeDetail.storeId) // this.$options.filters.talkIm(this.storeDetail.storeId)
// uni.navigateTo({ uni.navigateTo({
// url: `/pages/mine/im/index?userId=${this.goodsDetail.storeId}&goodsid=${this.routerVal.goodsId}&skuid=${this.routerVal.id}` url: `/pages/mine/im/index?userId=${this.goodsDetail.storeId}&goodsid=${this.routerVal.goodsId}&skuid=${this.routerVal.id}`
// }); });
// udesk 代码 // udesk 代码
// if (this.storeDetail.merchantEuid) { // if (this.storeDetail.merchantEuid) {