cbz/page_shop/pages/message/message.vue

<template>
	<view class="content">
		
		<view class="list">
			<view class="list_item hflex acenter" @click="toList('notice')">
				<image class="item_img" src="/static/images/mine/notice.png" mode="aspectFill"></image>
				<view class="number" v-if="notice_num > 0">{{notice_num}}</view>
				<view class="item_right">
					<view class="hflex acenter jbetween">
						<view class="hflex acenter">
							<view class="name">系统通知</view>
						</view>
						<!-- <view class="text_style1">{{pageList1[0].create_at}}</view> -->
					</view>
					<!-- <u-parse :content="pageList1[0].content"></u-parse> -->
				</view>
			</view>
			<view class="list_item hflex acenter" @click="toList('message')">
				<image class="item_img" src="/static/images/mine/message1.png" mode="aspectFill"></image>
				<view class="number" v-if="message_num > 0">{{message_num}}</view>
				<view class="item_right">
					<view class="hflex acenter jbetween">
						<view class="hflex acenter">
							<view class="name">船百知小助手</view>
							<view class="text_style2">官方</view>
						</view>
						<!-- <view class="text_style1">{{pageList1[0].create_at}}</view> -->
					</view>
					<!-- <u-parse :content="pageList1[0].content"></u-parse> -->
				</view>
			</view>
		</view>
		<view class="chat_list_wraper">
			<scroll-view scroll-y="true"
				:class="'chat_list_wraper ' + (gotop ? (isIPX ? 'goTopX' : 'goTop') : 'goback')"
				:style="'padding-bottom: ' + (isIPX ? '270rpx' : '226rpx')">
				<view class="search_input" v-if="search_chats">
					<view>
						<icon type="search" size="12"></icon>
						<input placeholder="搜索" placeholder-style="color:#9B9B9B;line-height:21px;font-size:15px;"
							auto-focus confirm-type="search" type="text" @confirm="onSearch" @input="onInput"
							:value="input_code" />
						<icon type="clear" size="12" @tap.stop="clearInput" v-if="show_clear"></icon>
					</view>
					<text @tap="cancel">取消</text>
				</view>
		
				<view v-for="(item, index) in arr" :key="index" class="chat_list" :data-item="item" @tap.stop="del_chat"
					@longpress="longpress">
					<swipe-delete>
						<view class="tap_mask" @tap.stop="into_chatRoom" :data-item="item">
							<!-- 消息列表 -->
							<view class="list_box">
								<view class="list_left" :data-username="item.your.nickname">
									<view class="list_pic">
										<view class="em-msgNum"
											v-if="item.unReadCount > 0 || item.unReadCount == '99+'">
											{{ item.unReadCount }}</view>
		
										<image :src="item.your.avatarurl?item.your.avatarurl:'/static/images/theme2x.png'"></image>
									</view>
									<view class="list_text">
										<text class="list_user text_hide">{{item.your.nickname?item.your.nickname:item.username}}</text>
										<text class="list_word" v-if="item.msg.data[0].data">{{
								item.msg.data[0].data
							  }}</text>
										<text class="list_word" v-if="item.msg.type == 'img'">[图片]</text>
										<text class="list_word" v-if="item.msg.type == 'audio'">[语音]</text>
										<!-- <text class="list_word" v-if="item.msg.type == 'video'"
								>[视频]</text
							  > -->
									</view>
								</view>
								<view class="list_right">
									<text :data-username="item.username">{{ item.time }}</text>
								</view>
							</view>
						</view>
					</swipe-delete>
				</view>
		
				<long-press-modal :winSize="winSize" :popButton="popButton" @change="pickerMenuChange"
					:showPop="showPop" @hidePop="hidePop" :popStyle="popStyle" />
				<view v-if="!arr" class="chat_noChat">
					<image class="ctbg" src="/static/images/ctbg.png"></image>
					暂无聊天消息
				</view>
				<!-- </view> -->
			</scroll-view>
			<!-- bug: margin-bottom 不生效 需要加一个空标签-->
			<view style="height: 1px"></view>
		
			<view class="mask" @tap="close_mask" v-if="show_mask"></view>
		
			<!-- <view :class="isIPX ? 'chatRoom_tab_X' : 'chatRoom_tab'"> -->
				<!-- <view class="tableBar">
					<view v-if="unReadSpotNum > 0 || unReadSpotNum == '99+'"
						:class="'em-unread-spot ' +(unReadSpotNum == '99+' ? 'em-unread-spot-litleFont' : '')">
						{{ unReadSpotNum == '99+'?unReadSpotNum:unReadSpotNum+ unReadTotalNotNum }}</view>
					<image :class="unReadSpotNum > 0 || unReadSpotNum == '99+' ? 'haveSpot' : ''"
						src="@/static/images/sessionhighlight2x.png"></image>
					<text class="activeText">消息</text>
				</view>
		
				<view class="tableBar" @tap="tab_contacts">
					<image src="/static/images/comtacts2x.png"></image>
					<text>联系人</text>
				</view> -->
		
				<!-- <view class="tableBar" @tap="tab_notification">
			<view v-if="unReadTotalNotNum > 0" class="em-unread-spot">{{
			  unReadTotalNotNum
			}}</view>
			<image
			  :class="unReadTotalNotNum > 0 ? 'haveSpot' : ''"
			  src="/static/images/notice.png"
			></image>
			<text>通知</text>
		  </view> -->
		
				<!-- <view class="tableBar" @tap="tab_setting">
				<image src="/static/images/setting2x.png"></image>
				<text>我的</text>
			</view> -->
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	let disp = require("@/utils/broadcast");
	var WebIM = require("@/utils/WebIM")["default"];
	let isfirstTime = true;
	import swipeDelete from "@/components/swipedelete/swipedelete";
	import longPressModal from "@/components/longPressModal/index";
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageList: [
					
				],
				pageList1: [],
				page: 1,
				total: 1,
				notice_num: 0,
				message_num:0,
				search_btn: true,
				search_chats: false,
				show_mask: false,
				yourname: "",
				unReadSpotNum: 0,
				unReadNoticeNum: 0,
				messageNum: 0,
				unReadTotalNotNum: 0,
				arr: [],
				show_clear: false,
				member: "",
				isIPX: false,
				gotop: false,
				input_code: "",
				
				groupName: {},
				winSize: {},
				popButton: ["删除该聊天"],
				showPop: false,
				popStyle: "",
				currentVal: ''
			}
		},
		components: {
			swipeDelete,
			longPressModal,
		},
		props: {},
		
		onLoad() {
			that = this
			this.getWindowSize();
			this.getWindowSize();
			
			let me = this;
			//监听加好友申请
			disp.on("em.subscribe", function() {
				me.getChatList();
				/* me.setData({
					messageNum: getApp().globalData.saveFriendList.length,
					unReadTotalNotNum: getApp().globalData.saveFriendList.length +
						getApp().globalData.saveGroupInvitedList.length,
				}); */
			});
			
			//监听解散群
			disp.on("em.invite.deleteGroup", function() {
				me.listGroups();
				me.getRoster();
				me.getChatList();
				me.messageNum= getApp().globalData.saveFriendList.length
			});
			
			//监听未读消息数
			disp.on("em.unreadspot", function(message) {
				me.getChatList();
				me.unReadSpotNum= getApp().globalData.unReadMessageNum > 99 ?
						"99+" :
						getApp().globalData.unReadMessageNum
			});
			
			//监听未读加群“通知”
			disp.on("em.invite.joingroup", function() {
				me.unReadNoticeNum= getApp().globalData.saveGroupInvitedList.length
				me.unReadTotalNotNum= getApp().globalData.saveFriendList.length +
					getApp().globalData.saveGroupInvitedList.length
			});
			
			disp.on("em.contacts.remove", function() {
				me.getChatList();
				me.getRoster();
			});
			
			this.getRoster();
		},
		onShow() {
			that.getNum()
			uni.hideHomeButton();
			this.getChatList();
			this.unReadSpotNum =
				getApp().globalData.unReadMessageNum > 99 ?
				"99+" :
				getApp().globalData.unReadMessageNum
			this.messageNum = getApp().globalData.saveFriendList.length
			this.unReadNoticeNum = getApp().globalData.saveGroupInvitedList.length
			this.unReadTotalNotNum =
				getApp().globalData.saveFriendList.length +
				getApp().globalData.saveGroupInvitedList.length
			
			if (getApp().globalData.isIPX) {
				this.isIPX = true
			}
		},
		methods: {
			getNum() {
				$api.req({
					url: '/data/api.auth.Center/messagenoread',
					method: 'POST'
				}, function(res) {
					if(res.code == 1) {
						that.notice_num = res.data.notice_count
						that.message_num = res.data.message_count
					}
				})
			},
			// 查看详情
			toDetail(id) {
				$api.jump('/page_shop/pages/message/detail?id=' + id)
			},
			toList(type) {
				$api.jump('/page_shop/pages/message/notice?type=' + type)
			},
			onReachBottom() {
				if (Number(that.page) * 15 >= Number(that.total)) {
					$api.info("没有更多了")
				} else {
					that.page++
					that.getList()
				}
				
			},
			listGroups() {
				var me = this;
				return WebIM.conn.getGroup({
					limit: 50,
					success: function(res) {
						let groupName = {};
						let listGroup = res.data || [];
						listGroup.forEach((item) => {
							groupName[item.groupid] = item.groupname;
						});
			
						me.groupName= groupName,
						uni.setStorage({
							key: "listGroup",
							data: res.data,
						});
						me.getChatList();
					},
					error: function(err) {
						console.log(err);
					},
				});
			},
			
			getRoster() {
				let me = this;
				let rosters = {
					success(roster) {
						var member = [];
						for (let i = 0; i < roster.length; i++) {
							if (roster[i].subscription == "both") {
								member.push(roster[i]);
							}
						}
						uni.setStorage({
							key: "member",
							data: member,
						});
						me.member= member
						me.listGroups();
						//if(!systemReady){
						disp.fire("em.main.ready");
						//systemReady = true;
						//}
						me.arr= me.getChatList(),
						me.unReadSpotNum= getApp().globalData.unReadMessageNum > 99 ?
							"99+" :
							getApp().globalData.unReadMessageNum
					},
					error(err) {
						console.log(err);
					},
				};
				WebIM.conn.getRoster(rosters);
			},
			
			// 包含陌生人版本
			getChatList() {
				var myName = uni.getStorageSync("myUsername");
				var array = [];
				const me = this;
				uni.getStorageInfo({
					success: function(res) {
						let storageKeys = res.keys;
						let newChatMsgKeys = [];
						let historyChatMsgKeys = [];
						let len = myName.length;
						storageKeys.forEach((item) => {
							if (item.slice(-len) == myName && item.indexOf("rendered_") == -1) {
								newChatMsgKeys.push(item);
							} else if (
								item.slice(-len) == myName &&
								item.indexOf("rendered_") > -1
							) {
								
								historyChatMsgKeys.push(item);
							} else if (item === "INFORM") {
								newChatMsgKeys.push(item);
							}
						});
			
						cul.call(me, newChatMsgKeys, historyChatMsgKeys);
					},
				});
			
				function cul(newChatMsgKeys, historyChatMsgKeys) {
					let array = [];
					let lastChatMsg;
					for (let i = historyChatMsgKeys.length; i > 0, i--;) {
						let index = newChatMsgKeys.indexOf(historyChatMsgKeys[i].slice(9));
						if (index > -1) {
							let newChatMsgs = uni.getStorageSync(newChatMsgKeys[index]) || [];
							if (newChatMsgKeys.includes()) {}
							if (newChatMsgs.length) {
								lastChatMsg = newChatMsgs[newChatMsgs.length - 1];
								lastChatMsg.unReadCount = newChatMsgs.length;
								if (lastChatMsg.unReadCount > 99) {
									lastChatMsg.unReadCount = "99+";
								}
								let dateArr = lastChatMsg.time.split(" ")[0].split("-");
								let timeArr = lastChatMsg.time.split(" ")[1].split(":");
								let month = dateArr[2] < 10 ? "0" + dateArr[2] : dateArr[2];
								lastChatMsg.dateTimeNum = `${dateArr[1]}${month}${timeArr[0]}${timeArr[1]}${timeArr[2]}`;
								lastChatMsg.time = `${dateArr[1]}月${dateArr[2]}日 ${timeArr[0]}:${timeArr[1]}`;
								newChatMsgKeys.splice(index, 1);
							} else {
								let historyChatMsgs = uni.getStorageSync(historyChatMsgKeys[i]);
								if (historyChatMsgs.length) {
									lastChatMsg = historyChatMsgs[historyChatMsgs.length - 1];
									let dateArr = lastChatMsg.time.split(" ")[0].split("-");
									let timeArr = lastChatMsg.time.split(" ")[1].split(":");
									let month = dateArr[2] < 10 ? "0" + dateArr[2] : dateArr[2];
									lastChatMsg.dateTimeNum =
										`${dateArr[1]}${month}${timeArr[0]}${timeArr[1]}${timeArr[2]}`;
									lastChatMsg.time = `${dateArr[1]}月${dateArr[2]}日 ${timeArr[0]}:${timeArr[1]}`;
								}
							}
						} else {
							let historyChatMsgs = uni.getStorageSync(historyChatMsgKeys[i]);
							if (historyChatMsgs.length) {
								lastChatMsg = historyChatMsgs[historyChatMsgs.length - 1];
								let dateArr = lastChatMsg.time.split(" ")[0].split("-");
								let timeArr = lastChatMsg.time.split(" ")[1].split(":");
								let month = dateArr[2] < 10 ? "0" + dateArr[2] : dateArr[2];
								lastChatMsg.dateTimeNum = `${dateArr[1]}${month}${timeArr[0]}${timeArr[1]}${timeArr[2]}`;
								lastChatMsg.time = `${dateArr[1]}月${dateArr[2]}日 ${timeArr[0]}:${timeArr[1]}`;
							}
						}
						if (
							lastChatMsg &&
							(lastChatMsg.chatType == "groupchat" ||
								lastChatMsg.chatType == "chatRoom")
						) {
							lastChatMsg.groupName = me.groupName[lastChatMsg.info.to];
						}
						lastChatMsg && lastChatMsg.username != myName &&
							array.push(lastChatMsg);
					}
			
					for (let i = newChatMsgKeys.length; i > 0, i--;) {
						let newChatMsgs = uni.getStorageSync(newChatMsgKeys[i]) || [];
						if (newChatMsgs.length) {
							lastChatMsg = newChatMsgs[newChatMsgs.length - 1];
							lastChatMsg.unReadCount = newChatMsgs.length;
							if (lastChatMsg.unReadCount > 99) {
								lastChatMsg.unReadCount = "99+";
							}
							let dateArr = lastChatMsg.time.split(" ")[0].split("-");
							let timeArr = lastChatMsg.time.split(" ")[1].split(":");
							let month = dateArr[2] < 10 ? "0" + dateArr[2] : dateArr[2];
							lastChatMsg.dateTimeNum = `${dateArr[1]}${month}${timeArr[0]}${timeArr[1]}${timeArr[2]}`;
							lastChatMsg.time = `${dateArr[1]}月${dateArr[2]}日 ${timeArr[0]}:${timeArr[1]}`;
							if (
								lastChatMsg.chatType == "groupchat" ||
								lastChatMsg.chatType == "chatRoom"
							) {
								lastChatMsg.groupName = me.groupName[lastChatMsg.info.to];
							}
							lastChatMsg.username != myName && array.push(lastChatMsg);
						}
					}
			
					array.sort((a, b) => {
						return b.dateTimeNum - a.dateTimeNum;
					});
					
					this.arr= array
					console.log(this.arr);
				}
			},
			
			openSearch: function() {
				this.search_btn= false
				this.search_chats= true
				this.gotop= true
			},
			
			onSearch: function(val) {
				let searchValue = val.detail.value;
				var myName = uni.getStorageSync("myUsername");
				const me = this;
				let serchList = [];
				let arr = [];
				uni.getStorageInfo({
					success: function(res) {
						let storageKeys = res.keys;
						let chatKeys = [];
						let len = myName.length;
						storageKeys.forEach((item) => {
							if (item.slice(-len) == myName) {
								chatKeys.push(item);
							}
						});
						chatKeys.forEach((item, index) => {
							if (item.indexOf(searchValue) != -1) {
								serchList.push(item);
							}
						});
						let lastChatMsg = "";
						serchList.forEach((item, index) => {
							let chatMsgs = uni.getStorageSync(item) || [];
							if (chatMsgs.length) {
								lastChatMsg = chatMsgs[chatMsgs.length - 1];
			
								let dateArr = lastChatMsg.time.split(" ")[0].split("-");
								let timeArr = lastChatMsg.time.split(" ")[1].split(":");
								let month = dateArr[2] < 10 ? "0" + dateArr[2] : dateArr[2];
								lastChatMsg.dateTimeNum =
									`${dateArr[1]}${month}${timeArr[0]}${timeArr[1]}${timeArr[2]}`;
								lastChatMsg.time =
									`${dateArr[1]}月${dateArr[2]}日 ${timeArr[0]}:${timeArr[1]}`;
								arr.push(lastChatMsg);
							}
						});
						me.arr = arr
					},
				});
			},
			leftClick() {},
			cancel: function() {
				this.getChatList();
				this.search_btn= true
				this.search_chats= false
				//arr: this.getChatList(),
				this.unReadSpotNum= getApp().globalData.unReadMessageNum > 99 ? "99+" : getApp().globalData.unReadMessageNum
				this.gotop= false
			},
			clearInput: function() {
				this.input_code= ""
				this.show_clear= false
			},
			onInput: function(e) {
				let inputValue = e.detail.value;
				if (inputValue) {
					this.show_clear= true
				} else {
					this.show_clear= false
				}
			},
			tab_contacts: function() {
				uni.redirectTo({
					url: "../main/main?myName=" + uni.getStorageSync("myUsername"),
				});
			},
			close_mask: function() {
				this.search_btn= true
				this.search_chats= false
				this.show_mask= false
			},
			tab_setting: function() {
				uni.redirectTo({
					url: "../setting/setting",
				});
			},
			tab_notification: function() {
				uni.redirectTo({
					url: "../notification/notification",
				});
			},
			into_chatRoom: function(event) {
				let detail = event.currentTarget.dataset.item;
				if (
					detail.chatType == "groupchat" ||
					detail.chatType == "chatRoom" ||
					detail.groupName
				) {
					this.into_groupChatRoom(detail);
				} else {
					this.into_singleChatRoom(detail);
				}
			},
			// 单聊
			into_singleChatRoom: function(detail) {
				var my = uni.getStorageSync("myUsername");
				var nameList = {
					myName: my,
					your: detail.username,
				};
				uni.navigateTo({
					url: "/pages/chatroom/chatroom?username=" + JSON.stringify(nameList),
				});
			},
			// 群聊 和 聊天室 （两个概念）
			into_groupChatRoom: function(detail) {
				var my = uni.getStorageSync("myUsername");
				var nameList = {
					myName: my,
					your: detail.groupName,
					groupId: detail.info.to,
				};
				uni.navigateTo({
					url: "../groupChatRoom/groupChatRoom?username=" + JSON.stringify(nameList),
				});
			},
			
			into_inform: function() {
				uni.redirectTo({
					url: "../notification/notification",
				});
			},
			
			removeAndRefresh: function(event) {
				let removeId = event.currentTarget.dataset.item.info.from
				let ary = getApp().globalData.saveFriendList
				let idx
				if (ary.length > 0) {
					ary.forEach((v, k) => {
						if (v.from == removeId) {
							idx = k
						}
					})
					getApp().globalData.saveFriendList.splice(idx, 1);
				}
				uni.removeStorageSync('INFORM')
			},
			
			del_chat: function(event) {
				let detail = event.currentTarget.dataset.item;
				let nameList = {};
				let me = this;
				// 删除当前选中群组聊天列表
				if (detail.chatType == "groupchat" || detail.chatType == "chatRoom") {
					nameList = {
						your: detail.info.to,
					};
					//删除当前选中通知列表
				} else if (detail.chatType === "INFORM") {
					nameList = {
						your: "INFORM",
					};
				}
				//删除当前选中好友聊天列表
				else {
					nameList = {
						your: detail.username,
					};
				}
				var myName = uni.getStorageSync("myUsername");
				var currentPage = getCurrentPages();
			
				uni.showModal({
					title: "确认删除？",
					confirmText: "删除",
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync(nameList.your + myName);
							uni.removeStorageSync("rendered_" + nameList.your + myName);
							nameList.your === 'INFORM' && me.removeAndRefresh(event);
							// if (Object.keys(currentPage[0]).length>0) {
							//   currentPage[0].onShow();
							// }
							disp.fire("em.chat.session.remove");
							me.getChatList();
						}
					},
					fail: function(err) {
						console.log('删除列表', err);
					},
				});
			},
			longpress: function(e) {
				//将当前选中的值存在data中方便后续操作
				this.currentVal = e
				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index, ];
			
				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > this.winSize.height / 2) {
					style = `bottom:${this.winSize.height - touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > this.winSize.witdh / 2) {
					style += `right:${this.winSize.witdh - touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}
			
				this.popStyle = style;
				// this.pickerUserIndex = Number(index);
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							witdh: res.windowWidth,
							height: res.windowHeight,
						};
					},
				});
			},
			hidePop() {
				this.showPop = false;
			},
			pickerMenuChange() {
				console.log("当前选中>>", this.currentVal);
				this.del_chat(this.currentVal)
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "./chat.css";
	.content {
		padding: 0 30rpx;
		background-color: #fff;
		.list {
			width: 100%;
			.list_item {
				width: 100%;
				margin: 48rpx 0 36rpx;
				position: relative;
				.item_img {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					
				}
				.number {
					position: absolute;
					top: 5rpx;
					left: 70rpx;
					width: 32rpx;
					height: 32rpx;
					background-color: #ff4b4b;
					border: 1rpx solid #fff;
					border-radius: 50%;
					font-size: 24rpx;
					color: #fff;
					text-align: center;
					line-height: 32rpx;
				}
				.item_right {
					width: calc(100% - 108rpx);
					padding-left: 20rpx;
					.name {
						max-width: calc(300rpx - 56rpx);
						font-size: 28rpx;
						color: #222;
					}
					.text_style1 {
						font-size: 24rpx;
						color: #999;
					}
					.text_style2 {
						margin-left: 10rpx;
						width: 56rpx;
						height: 28rpx;
						border-radius: 8rpx;
						border: 1rpx solid #506dff;
						font-size: 20rpx;
						color: #506dff;
						text-align: center;
						line-height: 28rpx;
					}
				}
			}
		}
	}
</style>