renshou/components/msg-number/index.vue

<template>
	<view>
		<view class="lt-msg ddflex" @click="jumpConversation()" :style="'bottom:'+bottom+';'">
			<view class="ddflex" style="position: relative;width: 100%;height: 100%;">
				<image src="../../static/pages/images/lt.png"></image>
				<view class="lt-msg-num" v-if="unReadSpotNum>0">{{unReadSpotNum}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	let disp = require("../../hxChatSDK/utils/broadcast");

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				unReadSpotNum: 0
			};
		},

		components: {},
		props: {
			bottom: {
			  type: String,
			  default: '200rpx',
			}
		},
		watch: {},

		mounted() {
			//发起获取未读消息通知
			disp.fire("em.main.ready");
			//监听未读消息数
			disp.on("em.unreadspot", this.onChatPageUnreadspot);
		},

		onUnload() {
			disp.off("em.unreadspot", this.onChatPageUnreadspot)
		},

		methods: {
			onChatPageUnreadspot(message) {
				this.unReadSpotNum = getApp().globalData.unReadMessageNum > 99 ?
					"99+" : getApp().globalData.unReadMessageNum;
			},

			jumpConversation() {
				req.jumpConversation();
			},

		}
	};
</script>

<style>
	@import "./index.css";
</style>