项目初始化
This commit is contained in:
jerry
194
pages/im/index.vue
Normal file
194
pages/im/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<view class="container page-app theme-light main-green font-1">
|
||||
<layout v-if="groupId > 0 && receiveUserId > 0" @hidedKeyboard="hidedKeyboard" :isReconnecting="isReconnecting" :groupId="groupId" :userId="receiveUserId" ref="im">
|
||||
<template #chat-bar="{keyboardHeight, user}">
|
||||
<chat-bar ref="chatBar" :user="user" :keyboardHeight="keyboardHeight" @send="sendMessage" @openGift="openGift" @voiceOk="voiceOk" @getWeixin="getWeixin" @imageOk="imageOk"></chat-bar>
|
||||
</template>
|
||||
</layout>
|
||||
|
||||
<s-auth-modal />
|
||||
|
||||
<qrcode-modal />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Layout from '@/pages/im/components/layout.vue';
|
||||
import ChatBar from "@/pages/im/components/chatBar.vue";
|
||||
import ImMessageApi from '@/sheep/api/im/memberMessage';
|
||||
import qrcodeModal from '@/components/qrcode-modal/qrcode-modal.vue';
|
||||
import FileApi from '@/sheep/api/infra/file';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import sheep from '@/sheep';
|
||||
import { WxaSubscribeTemplate, WebSocketMessageTypeConstants } from '@/sheep/util/const';
|
||||
import { useWebSocket } from '@/sheep/hooks/useWebSocket';
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
ChatBar,
|
||||
qrcodeModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupId: 0,
|
||||
receiveUserId: 0,
|
||||
|
||||
Reconnect: {},
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.groupId = option.groupId;
|
||||
this.receiveUserId = option.receiveUserId;
|
||||
},
|
||||
onShow() {
|
||||
//======================= 聊天工具相关 end =======================
|
||||
const { options } = useWebSocket({
|
||||
// 连接成功
|
||||
onConnected: async () => {
|
||||
console.log('连接成功');
|
||||
},
|
||||
// 收到消息
|
||||
onMessage: async (data) => {
|
||||
console.log('接收消息');
|
||||
const type = data.type;
|
||||
if (!type) {
|
||||
console.error('未知的消息类型：' + data.value);
|
||||
return;
|
||||
}
|
||||
if (type == WebSocketMessageTypeConstants.IM_MESSAGE_READ) {
|
||||
console.log('刷新消息');
|
||||
var that = this;
|
||||
setTimeout(function(){
|
||||
var message = JSON.parse(data.content);
|
||||
if(message.groupId != that.groupId){
|
||||
return;
|
||||
}
|
||||
that.$nextTick(function() {
|
||||
that.$refs.im.reload(message);
|
||||
});
|
||||
},1000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (type == WebSocketMessageTypeConstants.IM_MESSAGE_NEWS) {
|
||||
var message = JSON.parse(data.content);
|
||||
if(message.groupId != this.groupId){
|
||||
return;
|
||||
}
|
||||
ImMessageApi.updateReadStatus(message.id);
|
||||
|
||||
this.$nextTick(function() {
|
||||
this.$refs.im.reload(message);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 2.2 消息类型：KEFU_MESSAGE_TYPE
|
||||
if (type == WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
|
||||
console.log('刷新消息');
|
||||
// 刷新消息列表
|
||||
//await messageListRef.value.refreshMessageList(JSON.parse(data.content));
|
||||
return;
|
||||
}
|
||||
// 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
|
||||
if (type == WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
|
||||
console.log('管理员已读消息');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
this.Reconnect = options; // 重连状态
|
||||
},
|
||||
computed: {
|
||||
isReconnecting() {
|
||||
return this.Reconnect.isReconnecting;
|
||||
},
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
hidedKeyboard() {
|
||||
this.$refs.chatBar.hideDrawer();
|
||||
},
|
||||
sendMessage(e) {
|
||||
// #ifdef MP
|
||||
// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
|
||||
this.autoSubscribeMessage();
|
||||
// #endif
|
||||
|
||||
ImMessageApi.sendImMessage({
|
||||
groupId: this.groupId,
|
||||
receiveUserId: this.receiveUserId,
|
||||
contentType: e.contentType,
|
||||
content: e.content,
|
||||
voiceSec: e.voiceSec,
|
||||
imgWidth: e.imgWidth,
|
||||
imgHeight: e.imgHeight,
|
||||
}).then(res => {
|
||||
this.$refs.im.reload();
|
||||
});
|
||||
},
|
||||
async imageOk(e) {
|
||||
const res = await FileApi.uploadFile(e.path);
|
||||
var data = {
|
||||
contentType: 4,
|
||||
content: res.data,
|
||||
imgWidth: e.imgWidth,
|
||||
imgHeight: e.imgHeight,
|
||||
}
|
||||
this.sendMessage(data);
|
||||
},
|
||||
openGift() {
|
||||
sheep.$router.go('/pages/user/detail/index',{id: this.receiveUserId});
|
||||
},
|
||||
getWeixin() {
|
||||
UserApi.getQrcodeByUserId(this.receiveUserId).then(res => {
|
||||
if(res.data){
|
||||
uni.previewImage({
|
||||
current: 0, //预览图片的下标
|
||||
urls: [res.data], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
|
||||
indicator: 'number',
|
||||
loop: true
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
showDayTime(datetime) {
|
||||
if (!datetime) return "";
|
||||
return dayjs(datetime).fromNow();
|
||||
},
|
||||
async voiceOk(e) {
|
||||
const res = await FileApi.uploadFile(e.path);
|
||||
var data = {
|
||||
contentType: 3,
|
||||
content: res.data,
|
||||
voiceSec: e.sec,
|
||||
}
|
||||
this.sendMessage(data);
|
||||
},
|
||||
subscribeMessage() {
|
||||
const event = [WxaSubscribeTemplate.UNREAD_MESSAGE];
|
||||
event.push(WxaSubscribeTemplate.CLERK_BLIND);
|
||||
event.push(WxaSubscribeTemplate.CLERK_ORDER);
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
|
||||
// 订阅后记录一下订阅状态
|
||||
uni.removeStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
|
||||
uni.setStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE, '已订阅');
|
||||
});
|
||||
},
|
||||
async autoSubscribeMessage() {
|
||||
// 2. 订阅消息
|
||||
this.subscribeMessage();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
height: calc(100vh);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user