更换socket

master
2023-01-12 14:35:24 +08:00
parent bbe315fb45
commit 83b2295818
2 changed files with 848 additions and 733 deletions

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-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>
<!-- 用户消息 头像可选加入-->
@ -20,68 +19,71 @@
<view>
<view class="user-name">{{ user.nickName }}</view>
<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>
<!-- <view v-if="item.messageType == 'GOODS'">
<view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; ">
<text style="word-break: break-all;"
v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
<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">
<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 class="goodsdesc" @click="jumpGoodDelic">
<view class="goodsdesc-name">
<text class="goodsCard_goodNmae">{{
JSON.parse(item.text)['goodsName']
}}</text>
}}</text>
</view>
<view class="goodsdesc-rice" style="margin-top:10rpx; color: orange;"><text
style="font-size:20rpx;">¥{{
JSON.parse(item.text)['price']
}}</text>
}}</text>
</view>
</view>
</view>
</view> -->
<!-- <view v-if="item.messageType === 'ORDER'">
</view>
<view v-if="item.messageType == 'ORDER'">
<view class="orderSn">
<text>订单号{{ JSON.parse(item.text)['sn'] }}</text>
<view class="oederList">
<img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;"
:src="JSON.parse(item.text)['groupImages']" mode="widthFix" />
<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>
<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>
<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 v-else class="flex-row-start margin-left margin-top one-show">
<view class="chat-img flex-row-center">
<u-avatar :src="toUser.face" :text="toUser.face ? '' : toUser.name" bg-color="#DDDDDD"></u-avatar>
<!-- <u-image style="height: 100rpx;width: 100rpx;" shape="circle"
:src="toUser.face || 'https://avatars.dicebear.com/api/initials/' + toUser.name + '.svg?fontSize=38'"
mode="aspectFit"></u-image> -->
<u-avatar :src="toUser.face" :text="toUser.face ? '' : toUser.name" bg-color="#DDDDDD">
</u-avatar>
</view>
<view class="flex" style="width: 500rpx;">
<view>
<view class="other-name">{{ toUser.name }}</view>
<view class="margin-left padding-chat flex-column-start bg-to-color" style="border-radius: 35rpx;">
<text style="word-break: break-all;" v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
<view class="margin-left padding-chat flex-column-start bg-to-color"
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 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">
<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 class="goodsdesc" @click="jumpGoodDelic">
<view class="goodsdesc-name">
@ -95,22 +97,24 @@
}}</text>
</view>
</view>
</view> -->
</view>
<!-- <view v-if="item.messageType === 'ORDER'">
</view>
<view v-if="item.messageType === 'ORDER'">
<view class="orderSn">
<text>订单号{{ JSON.parse(item.text)['sn'] }}</text>
<view class="oederList">
<img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;"
:src="JSON.parse(item.text)['groupImages']" mode="widthFix" />
<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>
<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>
@ -129,11 +133,12 @@
<view class="goodsdesc-name">
<text class="goodsCard_goodNmae">{{
goodListData.goodsName
}}</text>
}}</text>
</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
}}</text>
}}</text>
</view>
</view>
<view class="cancel" @click="cancelModel">X</view>
@ -151,9 +156,9 @@
<view class="flex" style="width: 500rpx;">
<view class="margin-left padding-chat flex-column-start"
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>
@ -165,8 +170,9 @@
<view class="flex-column-center" style="position: fixed;bottom: -180px;" :animation="animationData">
<view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;">
<!-- vue无法使用软键盘"发送" -->
<input v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;" @confirm="sendMessage"
confirm-type="search" placeholder-class="my-neirong-sm" placeholder="用一句简短的话描述您的问题" />
<input v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;"
@confirm="sendMessage" confirm-type="search" placeholder-class="my-neirong-sm"
placeholder="用一句简短的话描述您的问题" />
<view @click="sendMessage" class="cu-tag bg-cyan round">
发送
</view>
@ -188,26 +194,42 @@
</template>
<script>
// rpxpx
var l
//
var wh
//
var mgUpHeight
import { getTalkMessage, getTalkByUser, jumpObtain } from "@/api/im.js";
import SocketService from "@/utils/socket_service.js";
import storage from "@/utils/storage.js";
import { beautifyTime } from "@/utils/filters.js"
export default {
// rpxpx
var l
//
var wh
//
var mgUpHeight
import {
getTalkMessage,
getTalkByUser,
jumpObtain
} from "@/api/im.js";
import SocketService from "@/utils/socket_service.js";
import storage from "@/utils/storage.js";
import {
beautifyTime
} from "@/utils/filters.js"
import config from '@/config/config.js'
export default {
// imGoodId
onUnload () {
storage.setImGoodsLink('')
onUnload() {
// #ifdef H5
uni.setStorageSync("imGoodId", '');
// #endif
if (this.socketOpen == true) {
uni.closeSocket();
}
},
onLoad (options) {
onLoad(options) {
this.sokcet();
// goodsid
this.showHideModel = options.goodsid
// localimGoodId
this.localImGoodsId = storage.getImGoodsLink()
// #ifdef H5
this.localImGoodsId = uni.getStorageSync("imGoodId");
// #endif
this.resolve = options
//
if (this.resolve.goodsid) {
@ -249,18 +271,20 @@ export default {
}
this.ws.connect();
// this.ws.connect();
this.sokcet()
},
onPullDownRefresh () {
onPullDownRefresh() {
this.params.pageNumber = this.params.pageNumber + 1
this.getTalkMessage()
setTimeout(function () {
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
data () {
data() {
return {
socketOpen: false, //
storage,
fixed: 'fixed',
bottom: '50px',
@ -290,39 +314,55 @@ export default {
goodListData: {}
}
},
watch: {
'ws.callBackMapping': {
handler: function (val) {
val = JSON.parse(val)
if (val.messageResultType == 'MESSAGE') {
this.msgList.push(val.result)
}
this.newMessageNum++;
//
let msg = val
msg.operation_type = 'READ'
this.ws.send(JSON.stringify(msg))
}
}
},
// watch: {
// 'ws.callBackMapping': {
// handler: function (val) {
// val = JSON.parse(val)
// if (val.messageResultType == 'MESSAGE') {
// this.msgList.push(val.result)
// }
// this.newMessageNum++;
// //
// let msg = val
// msg.operation_type = 'READ'
// this.ws.send(JSON.stringify(msg))
// }
// }
// },
methods: {
beautifyTime,
//
linkTosOrders (val) {
console.log(val);
uni.navigateTo({
url: '/pages/order/orderDetail?sn=' + val,
sendMessage() {
if (this.msg == "") {
return 0;
}
if (this.socketOpen == false) {
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 = {
operation_type: "MESSAGE",
to: this.toUser.userId,
@ -331,32 +371,101 @@ export default {
context: this.goodListData,
talk_id: this.params.talkId,
}
this.ws.send(JSON.stringify(msg))
this.msgList.push({ "text": JSON.stringify(this.goodListData), "my": true, "messageType": 'GOODS' })
let data = JSON.stringify(msg);
uni.sendSocketMessage({
data: data
});
this.msgList.push({
"text": JSON.stringify(this.goodListData),
"my": true,
"messageType": 'GOODS'
})
this.showHide = false
storage.setImGoodsLink(this.params.talkId)
//
// #ifdef H5
uni.setStorageSync("imGoodId", 1111111);
// #endif
this.$nextTick(() => {
uni.pageScrollTo({
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
},
//
commodityDetails () {
commodityDetails() {
jumpObtain(this.resolve.skuid, this.resolve.goodsid).then((res) => {
this.goodListData = res.data.result.data
})
},
// (-->bug)
goPag (kh) {
goPag(kh) {
this.retractBox(0, 250)
if (this.keyHeight != 0) {
if (kh - this.keyHeight > 0) {
@ -366,7 +475,7 @@ export default {
}
},
//
messageBoxMove (x, t) {
messageBoxMove(x, t) {
var animation = uni.createAnimation({
duration: t,
timingFunction: 'linear',
@ -379,7 +488,7 @@ export default {
this.anData = animation.export()
},
//
msgGo (type) {
msgGo(type) {
console.log(type, 'typetypetype');
const query = uni.createSelectorQuery()
// 100ms
@ -419,34 +528,39 @@ export default {
}, 100)
},
//
answer (id) {
answer(id) {
// id,index
},
sendMessage () {
//
if (this.msg == "") {
return 0;
}
// msg,my(,穿)
let msg = {
operation_type: "MESSAGE",
to: this.toUser.userId,
from: this.user.id,
message_type: "MESSAGE",
context: this.msg,
talk_id: this.params.talkId,
}
this.ws.send(JSON.stringify(msg))
this.msgList.push({ "text": this.msg, "my": true, "messageType": 'MESSAGE' })
//
let type = 'down';
this.msgGo(type)
//
// this.msgKf(this.msg)
//
this.msg = ""
},
// sendMessage() {
// //
// if (this.msg == "") {
// return 0;
// }
// // msg,my(,穿)
// let msg = {
// operation_type: "MESSAGE",
// to: this.toUser.userId,
// from: this.user.id,
// message_type: "MESSAGE",
// context: this.msg,
// talk_id: this.params.talkId,
// }
// this.ws.send(JSON.stringify(msg))
// this.msgList.push({
// "text": this.msg,
// "my": true,
// "messageType": 'MESSAGE'
// })
// console.log(this.msgList, 'this.msgListthis.msgListthis.msgListthis.msgListthis.msgList')
// //
// let type = 'down';
// this.msgGo(type)
// //
// // this.msgKf(this.msg)
// //
// this.msg = ""
// },
// msgKf(x) {
// // loading
// // this.msgLoad = true
@ -460,7 +574,7 @@ export default {
// // }, 2000)
// },
//
ckAdd () {
ckAdd() {
if (!this.showTow) {
this.retractBox(-180, 350)
} else {
@ -468,11 +582,11 @@ export default {
}
this.showTow = !this.showTow
},
hideKey () {
hideKey() {
uni.hideKeyboard()
},
// /
retractBox (x, t) {
retractBox(x, t) {
var animation = uni.createAnimation({
duration: t,
@ -485,7 +599,7 @@ export default {
this.animationData = animation.export()
},
async getTalkMessage () {
async getTalkMessage() {
let type = '';
await getTalkMessage(this.params).then(res => {
if (res.data.success) {
@ -503,17 +617,16 @@ export default {
})
}
})
this.msgGo(type)
},
touchMoreMessage (e) {
touchMoreMessage(e) {
if (e.target.scrollTop == 0) {
this.params.pageNumber = this.params.pageNumber + 1
this.getTalkMessage()
}
},
async getTalk (userId) {
async getTalk(userId) {
getTalkByUser(userId).then(res => {
if (res.data.success) {
this.toUser = res.data.result
@ -523,7 +636,7 @@ export default {
})
},
//
compareTime (index, datetime) {
compareTime(index, datetime) {
if (datetime == undefined) {
return false;
}
@ -534,8 +647,10 @@ export default {
if (this.msgList[index].is_revoke == 1) {
return false;
}
if (datetime) {
datetime = datetime.replace(/-/g, "/");
}
let time = Math.floor(Date.parse(datetime) / 1000);
let currTime = Math.floor(new Date().getTime() / 1000);
@ -546,7 +661,7 @@ export default {
return true;
}
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, "/");
if (nextDate - datetime < 300) return false;
}
@ -563,7 +678,7 @@ export default {
* @param format 转换格式
* @returns {*|string}
*/
unixToDate (unix, format) {
unixToDate(unix, format) {
if (!unix) return unix;
let _format = format || "yyyy-MM-dd hh:mm:ss";
const d = new Date(unix);
@ -585,55 +700,55 @@ export default {
if (new RegExp("(" + k + ")").test(_format))
_format = _format.replace(
RegExp.$1,
RegExp.$1.length === 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
RegExp.$1.length === 1 ?
o[k] :
("00" + o[k]).substr(("" + o[k]).length)
);
return _format;
},
}
}
}
</script>
<style lang="scss" scoped>
.orderTime {
.orderTime {
margin-top: 15rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.wrapper {
.wrapper {
height: auto !important;
}
}
.oederList {
.oederList {
display: flex;
color: black;
font-size: 20rpx;
font-weight: bold;
width: 95%;
}
}
.orderSn {
.orderSn {
width: 350rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.groupNameOrTime {
.groupNameOrTime {
margin: 15rpx 15rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.orderGood {
.orderGood {
background-color: #ffffff;
}
}
.goodsCard {
.goodsCard {
border-radius: 20rpx;
margin-top: 15rpx;
background-color: #ffffff;
@ -700,104 +815,104 @@ export default {
top: 20rpx;
right: 20rpx;
}
}
}
.cancel {
.cancel {
color: #737373;
position: relative;
bottom: 40rpx;
left: 12%;
}
}
.cartMessage {
.cartMessage {
display: flex;
justify-content: center;
align-items: center;
}
}
.bottom-dh-char {
.bottom-dh-char {
background-color: #f9f9f9;
width: 750rpx;
height: 110rpx;
}
}
.user-name {
.user-name {
text-align: right;
font-size: 24rpx;
color: #737373;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
}
.other-name {
.other-name {
text-align: left;
font-size: 24rpx;
color: #737373;
margin-bottom: 10rpx;
margin-left: 10rpx;
}
}
.column-time {
.column-time {
justify-content: center;
}
}
.center-box {
.center-box {
width: 720rpx;
padding-left: 25rpx;
}
}
.hui-box {
.hui-box {
width: 750rpx;
height: 100%;
}
}
.date-text {
.date-text {
font-size: 12px;
color: grey;
}
}
.dh-input {
.dh-input {
width: 500rpx;
height: 65rpx;
border-radius: 30rpx;
padding-left: 15rpx;
font-size: 35rpx;
background-color: #FFFFFF;
}
}
.box-normal {
.box-normal {
width: 750rpx;
height: 180px;
background-color: #FFFFFF;
}
}
.tb-text view {
.tb-text view {
font-size: 65rpx;
}
}
.tb-text text {
.tb-text text {
font-size: 25rpx;
color: #737373;
}
}
.chat-img {
.chat-img {
border-radius: 50%;
width: 100rpx;
height: 100rpx;
background-color: #f7f7f7;
}
}
.padding-chat {
.padding-chat {
padding: 17rpx 20rpx;
}
}
.tb-nv {
.tb-nv {
width: 50rpx;
height: 50rpx;
}
}
</style>
<style lang="scss" scoped>
@import "./index-app.scss";
@import "./index-app.scss";
</style>

View File

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