kly_uniapp/pages/message/index.vue

<!-- 消息列表 -->

<template>
	<navigator style="margin-top: 100upx;" v-if="IS_TOURIST==1||isTrader2 == 1 " url="../login/index"
		class="main_btn_m get_phone to_login">
		{{isTrader2 == 1?'去登陆商户':'未登录'}}
	</navigator>
	<scroll-view v-else class="conversations" scroll-y="true">
		<view class="tab_status_box" style="margin-top: 10upx;">
			<view class="tab_status_box_focus">消息列表
			</view>
			<view style="position: relative;" class="tab_status_box_no_focus">
				<navigator url="./notice">平台消息</navigator>
				<view v-if="user_info.ss_notice_unreaded>0" class="num">{{user_info.ss_notice_unreaded}}</view>
			</view>
		</view>
		<view style="background-color: #f7f7f7;height: 10upx;margin-top: 0upx;"></view>
		<view v-if="conversations.length !=0">
			<view @click="navigateToChat(conversation)" class="scroll-item" v-for="(conversation, key) in conversations"
				:key="key">
				<view class="item-head">
					<image style="border-radius: 100%;overflow: hidden;"
						:src="conversation.data.avatar||'../../static/user.png'" class="head-icon"></image>
					<view class="item-head_unread" v-if="conversation.unread">{{conversation.unread}}</view>
				</view>
				<view class="scroll-item_info">
					<view class="item-info-top">
						<text style="max-width: 380upx;"
							class="item-info-top_name nowrap">{{conversation.data.name||'用户名称'}}</text>
						<view style="display: flex;align-items: center;">
							<view style="background-color: #00c3b8;color: #FFFFFF;margin-right: 10upx;font-size: 24upx;height: 32upx;line-height: 32upx;width: 106upx;text-align: center;" v-if="conversation.userId.indexOf('userlogin')==0">官方客服</view>
							<view class="item-info-top_time nowrap">{{formatDate(conversation.lastMessage.timestamp)}}
							</view>
						</view>
						<!-- <view class="item-info-top_time">{{(conversation.lastMessage.timestamp)}}</view> -->
					</view>
					<view class="item-info-bottom">
						<view class="item-info-bottom-item">
							<view class="item-info-top_content" v-if="conversation.lastMessage.type == 'text'">
								{{conversation.lastMessage.payload.text}}
							</view>
							<view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'video'">
								[视频消息]</view>
							<view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'audio'">
								[语音消息]</view>
							<view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'image'">
								[图片消息]</view>
							<view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'file'">
								[文件消息]</view>
							<view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'order'">
								[自定义消息:订单]</view>
							<view class="item-info-top_content" v-else>[[未识别内容]]</view>
							<view class="item-info-bottom_action" @click.stop="removeConversation(conversation)"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-conversation" v-else>
			当前没有会话
		</view>
		<view class="action-container" v-if="action.show">
			<view class="layer" @click="action.show = false"></view>
			<view class="action-box">
				<view class="action-item" @click="topConversation">{{action.conversation.top ? '取消置顶' : '置顶聊天'}}</view>
				<view class="action-item" @click="removeConversation">删除聊天</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'

	export default {
		data() {
			return {
				isTrader2: 2,
				IS_TOURIST: uni.getStorageSync('IS_TOURIST'), //获取游客模式
				formatDate: commonFun.formatDate,
				sys_role: commonData.sys_role, //角色
				unreadTotal: 0,
				conversations: [],
				action: {
					conversation: null,
					show: false,
					user_info: {},
				},
				user_info: {}
			}
		},
		onPullDownRefresh() {
			if (this.isTrader2 != 1 && this.IS_TOURIST != 1) {
				this.get_data()
			}else{
				uni.stopPullDownRefresh();
			}
		},
		onShow() {
			this.IS_TOURIST = uni.getStorageSync('IS_TOURIST')||0
			let isTrader2 = uni.getStorageSync('isTrader2') || 2 //设置isTrader2为是否是现场经理
			this.isTrader2 = isTrader2
			if (isTrader2 != 1 && this.IS_TOURIST != 1) {
				this.get_info(this.get_data())
			}
		},
		methods: {
			// 获取个人信息 
			get_info(callback = () => {}) {
				commonFun.get_user_info(res => {
					this.user_info = res.data.Result
					console.log('消息页获取个人信息')
					console.log(this.user_info)
					callback()
				})
			},
			// 获取数据
			get_data() {
				//监听会话列表变化
				let self = this;
				commonFun.goEasy.im.on(commonFun.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, (content) => {
					self.renderConversations(content);
				});
				//加载会话列表
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				commonFun.goEasy.im.latestConversations({
					onSuccess: function(result) {
						console.log('加载会话列表成功')
						let content = result.content;
						console.log(content)
						self.renderConversations(content);
						uni.hideLoading();
						uni.stopPullDownRefresh();
					},
					onFailed: function(error) {
						uni.hideLoading()
						uni.stopPullDownRefresh();
						console.log("获取最新会话列表失败：, code:" + error.code + " content:" + error.content);
					}
				});
			},
			// 置顶/取消会话
			topConversation() {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				let conversation = this.action.conversation;
				let failedDescription = conversation.top ? '取消置顶失败' : '置顶失败';
				this.action.show = false;
				if (conversation.type === commonFun.GoEasy.IM_SCENE.PRIVATE) {
					commonFun.goEasy.im.topPrivateConversation({
						userId: conversation.userId,
						top: !conversation.top,
						onSuccess: function() {
							uni.hideLoading();
						},
						onFailed: function(error) {
							uni.hideLoading();
							uni.showToast({
								title: failedDescription,
								icon: "none"
							});
							console.log(error);
						}
					});
				} else {
					commonFun.goEasy.im.topGroupConversation({
						groupId: conversation.groupId,
						top: !conversation.top,
						onSuccess: function() {
							uni.hideLoading();
						},
						onFailed: function(error) {
							uni.hideLoading();
							uni.showToast({
								title: failedDescription,
								icon: "none"
							});
							console.log(error);
						}
					});
				}
			},
			// 移除会话
			removeConversation(conversation) {
				uni.showModal({
					content: '确认删除?',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: "加载中...",
								mask: true
							});
							let failedDescription = "删除失败";
							// let conversation = this.action.conversation;
							// this.action.show = false;
							if (conversation.type === commonFun.GoEasy.IM_SCENE.PRIVATE) {
								commonFun.goEasy.im.removePrivateConversation({
									userId: conversation.userId,
									onSuccess: function() {
										uni.hideLoading();
									},
									onFailed: function(error) {
										uni.hideLoading();
										uni.showToast({
											title: failedDescription,
											icon: "none"
										});
										console.log(error);
									}
								});
							} else {
								commonFun.goEasy.im.removeGroupConversation({
									groupId: conversation.groupId,
									onSuccess: function() {
										uni.hideLoading()
									},
									onFailed: function(error) {
										uni.hideLoading();
										uni.showToast({
											title: failedDescription,
											icon: "none"
										});
										console.log(error);
									}
								});
							}
						}
					}
				})
			},
			// 渲染数据列表
			renderConversations(content) {
				// this.save_friends_info(content.conversations)
				// console.log(content.conversations)
				this.conversations = content.conversations || [];
				let unreadTotal = content.unreadTotal;
				this.setUnreadAmount(unreadTotal);
			},
			// 将基本信息存入本地(go_easy不会获取历史头像和姓名)
			// save_friends_info(data) {
			// 	let friends_info = uni.getStorageSync('friends_info') || []
			// 	let friends_info_new = []
			// 	data.map(item => {
			// 		if (item.data.name) {
			// 			friends_info_new.push(item)
			// 		} else {
			// 			friends_info.map(item2 => {

			// 			})
			// 		}
			// 	})
			// 	uni.setStorageSync('friends_info', friends_info_new)
			// },
			// 渲染icon右上角数字
			setUnreadAmount(unreadTotal) {
				commonFun.get_user_info(res => {
					let ss_notice_unreaded = res.data.Result.ss_notice_unreaded
					this.user_info = res.data.Result
					this.unreadTotal = Number(unreadTotal) + ss_notice_unreaded;
					if (this.unreadTotal > 0) {
						uni.setTabBarBadge({
							index: 1,
							text: this.unreadTotal.toString()
						});
					} else {
						uni.removeTabBarBadge({
							index: 1
						});
					}
				})
			},
			// 跳转到会话区
			navigateToChat(conversation) {
				console.log(conversation)
				uni.setStorageSync('targetUser', {
					...conversation.data
				})
				uni.navigateTo({
					url: './chat?to=' + conversation.userId
				});
			},
			showAction(conversation) {
				this.action.conversation = conversation;
				this.action.show = true;
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.num {
		position: absolute;
		width: 40upx;
		height: 40upx;
		background: #FF0000;
		border-radius: 50%;
		color: #ffffff;
		text-align: center;
		line-height: 40upx;
		font-size: 22upx !important;
		right: -40upx;
		top: 0upx;
	}

	.conversations {
		width: 750rpx;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		/* height: 100%; */
		padding-bottom: 100upx;
	}

	.conversations .scroll-item {
		height: 152rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		border-bottom: 1px solid #EFEFEF;
	}

	.conversations .scroll-item .head-icon {
		width: 100rpx;
		height: 100rpx;
		margin-right: 28rpx;
	}

	.conversations .scroll-item_info {
		height: 151rpx;
		width: 590rpx;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.conversations .scroll-item_info .item-info-top {
		padding-top: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.conversations .item-info-top_name {
		font-size: 34rpx;
		color: #262628;
	}



	.conversations .item-info-top_time {
		font-size: 26rpx;
		color: rgba(179, 179, 179, 0.8);
		font-family: Source Han Sans CN;
	}

	.conversations .item-info-bottom {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
	}

	.conversations .item-info-bottom-item {
		display: flex;
		justify-content: space-between;
	}

	.item-info-bottom .item-info-top_content {
		font-size: 30rpx;
		color: #b3b3b3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.item-info-bottom .item-info-bottom_action {
		width: 50rpx;
		height: 50rpx;
		font-size: 20rpx;
		background: url("../../static/images_go/action.png") no-repeat center;
		background-size: 28rpx 30rpx;
	}

	.no-conversation {
		width: 100%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #9D9D9D;
	}

	.item-head {
		position: relative;
	}

	.item-head .item-head_unread {
		padding: 6rpx;
		background-color: #EE593C;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 28rpx;
		border-radius: 24rpx;
		min-width: 24rpx;
		min-height: 24rpx;
		text-align: center;
		position: absolute;
		top: 0;
		right: 15rpx;
	}

	.action-container {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action-container .layer {
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(51, 51, 51, 0.5);
		width: 100%;
		height: 100%;
		z-index: 99;
	}

	.action-box {
		width: 400rpx;
		height: 240rpx;
		background: #ffffff;
		position: relative;
		z-index: 100;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.action-item {
		text-align: center;
		line-height: 120rpx;
		font-size: 34rpx;
		color: #262628;
		border-bottom: 1px solid #EFEFEF;

	}
</style>