veterans_chat_h5/pages/index/index.vue

<template>
	<view class="index">
		<!-- <view class="index-tab">
			<u-tabs :list="list" :is-scroll="false" :current="current" font-size="32" :bold="false" @change="tabChange"
				bar-width="100"></u-tabs>
		</view> -->
		
		<!-- 聊天记录 -->
		<view class="index-records" v-if="current === 0">
			<view class="index-records-list">
				<view class="index-records-list-item" v-for="(item, index) in conversationList" :key="index" @click="toChat(item)">
					<view class="item-img">
						<u-avatar :src="item.userProfile.avatar" size="100"></u-avatar>
					</view>
					<view class="item-text">
						<view class="item-user">
							{{ item.userProfile.nick }}
						</view>
						<view class="item-text-info">
							<rich-text :nodes="nodesFliter(item.lastMessage.messageForShow)"></rich-text>
						</view>
					</view>
					<view class="item-msg">
						<view class="item-msg-icon" v-if="item.unreadCount">{{ item.unreadCount }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 好友列表 -->
		<view class="index-friends" v-if="current === 1">
			<view class="index-friends-list">
				<view class="index-friends-list-item" v-for="(item, index) in friendList" :key="index" @click="checkUserToRoom(item)">
					<view class="user-img">
						<u-avatar :src="item.img" size="100"></u-avatar>
					</view>
					<view class="user-name">
						{{ item.user }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				current: 0,
				list: [{
						name: '聊天记录'
					}
				],
				friendList: [
					{ userId: '1', user: '1', img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1735490596,2760195857&fm=26&gp=0.jpg' },
					{ userId: '2', user: '2', img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1735490596,2760195857&fm=26&gp=0.jpg' }
				]
			}
		},
		computed: {
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady,
				conversationList: state => state.conversationList,
			})
		},
		watch: {
			isSDKReady(val) {
				if (val) {
					// 更新用户自己的基础资料（头像+昵称+个性签名）
					this.updateUserInfo()
					// 请求会话列表
					this.getConversationList()
				}
			}
		},
		onShow() {
			if (!this.isLogin) {
				this.$u.route({
					url: 'pages/login/login'
				})
			} else {
				if (this.isSDKReady) {
					this.getConversationList()
				}
			}
		},
		methods: {
			/**
			 * tab切换触发
			 * @param {Object} index
			 */
			tabChange(index) {
				this.current = index
				if (this.isSDKReady) {
					this.getConversationList()
				}
			},
			/**
			 * 获取消息列表
			 */
			getConversationList() {
				this.tim.getConversationList().then(res => {
					let conversationList = res.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
					if (conversationList.length) {
						this.$store.commit("updateConversationList", conversationList);
					}
				})
			},
			/**
			 * 聊天的节点加上外层的div
			 * @param {Object} str
			 */
			nodesFliter(str) {
				let nodeStr = '<div style="align-items: center;word-wrap:break-word;">' + str + '</div>'
				return nodeStr
			},
			/**
			 * 提交用户的基础信息到Im
			 */
			updateUserInfo() {
				// 将已经登陆的用户信息 提交到IM中
				// let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				// this.tim.updateMyProfile({
				// 	nick: userInfo.user,
				// 	avatar: userInfo.img,
				// 	gender: this.$TIM.TYPES.GENDER_MALE,
				// 	selfSignature: '暂无个性签名',
				// 	allowType: this.$TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
				// }).then((res) => {
				// 	console.log('提交资料成功')
				// }).catch((err) => {
				// 	console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
				// });
			},
			/**
			 * 去聊天
			 * @param {Object} item
			 */
			toChat(item) {
				console.log('聊天用户:', item)
				this.$store.commit('updateConversationActive', item)
				setTimeout(() => {
					this.$u.route({
						url: 'pages/chat/chat'
					})
				}, 200)
			},
			/**
			 * @param {Object} toUserInfo
			 */
			checkUserToRoom(toUserInfo) {
				this.$store.commit('createConversationActive', toUserInfo.userId)
				this.$u.route({
					url: 'pages/chat/chat'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		padding: 30rpx;
		
		&-tab {
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
			border-bottom: solid 2px #eee;
		}
		
		&-records {
			&-list {
				&-item {
					width: 100%;
					padding: 20rpx 0;
					overflow: hidden;
					border-bottom: 1px solid #eee;
					display: flex;
					justify-content: space-between;
					.item-text {
						margin-left: 30rpx;
						width: 500rpx;
						height: 100rpx;
						color: #666;
						font-size: 28rpx;
					}
					.item-user {
						height: 60rpx;
						line-height: 60rpx;
						color: 333;
						font-size: 32rpx;
					}
					.item-text-info {
						height: 60rpx;
						line-height: 60rpx;
						color: #666;
						font-szie: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.item-msg {
						width: 40rpx;
						height: 100rpx;
					}
					.item-msg-icon {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #f06c7a;
						color: #fff;
						line-height: 40rpx;
						margin-top: 30rpx;
						text-align: center;
						font-size: 24rpx;
					}
				}
			}
		}
		
		&-friends {
			&-list {
				&-item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					width: 100%;
					cursor: pointer;
					border-bottom: 1px solid #eee;
					
					.user-img {
						margin-right: 20rpx;
					}
					.user-name {
						width: 250rpx;
						color: #666;
						font-weight: 500;
					}
				}
			}
		}
	}
</style>