peiwan-uniapp/pages/im/index.vue

<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>