MeetMateApp/pages/chat/message.vue

<template>
	<view class="page-message" @click="showMore = false">
		<!-- topbar -->
		<cl-sticky is-topbar v-if="false">
			<cl-topbar :title="null" :show-back="false" :border="false">
				<view class="content">
					消息
				</view>
				<image v-if="false" src="../../static/icon/service.png" @click="navigateToService"></image>
			</cl-topbar>
		</cl-sticky>
		<view class="header">
			<view class="left">
				<image class="img" mode="widthFix" src="../../static/sms/sms_name.png"></image>
			</view>
			<view class="right" @tap.stop="showMore = true">
				<image class="img" mode="widthFix" src="../../static/sms/more.png"></image>
			</view>
		</view>
		<view class="pop_more" v-if="showMore">
			<view class="item" @click="goPage('/pages/chat/newGroup?type=newGroup')">
				<image class="img" mode="widthFix" src="../../static/sms/new_group.png"></image>
				<text>创建群聊</text>
			</view>
			<view class="line"></view>
			<view class="item" @click="goPage('/pages/chat/newGroup?type=joinGroup')">
				<image class="img" mode="widthFix" src="../../static/sms/join_group.png"></image>
				<text>加入群聊</text>
			</view>
		</view>
		<view class="tab_list">
			<view class="item" :class="tab==0?'active':''" @click="goTab(0)">
				<view class="yuan">
					<image class="icon" mode="widthFix" src="../../static/sms/icon1.png"></image>
				</view>
				<text>私聊</text>
			</view>
			<view class="item" :class="tab==1?'active':''" @click="goTab(1)">
				<view class="yuan">
					<image class="icon" mode="widthFix" src="../../static/sms/icon2.png"></image>
				</view>
				<text>打赏交友</text>
			</view>
			<view class="item" :class="tab==2?'active':''" @click="goTab(2)">
				<view class="yuan">
					<image class="icon" mode="widthFix" src="../../static/sms/icon3.png"></image>
				</view>
				<text>互动</text>
			</view>
			<view class="item" :class="tab==3?'active':''" @click="goTab(3)">
				<view class="yuan">
					<image class="icon" mode="widthFix" src="../../static/sms/icon4.png"></image>
				</view>
				<text>系统通知</text>
			</view>
		</view>
		<view class="no-content" v-if="hasNo">
			<image class="icon" mode="widthFix" src="../../static/home/no.png"></image>
			<text>还没有消息</text>
		</view>
		<block v-if="tab == 0">
			<view class="list">
				<view v-for="(item, index) in list" :key="item.conversationID" class="list-content">
					<next-swipe-action :btnGroup="btnGroup" :index="item.conversationID" @btnClick="onclick"
						@nextSwipeActive="nextSwipeActive" :activeKey="activeKey">
						<view class="item" @tap="navigateToChatDetail(item)">
							<template v-if="item.type=='GROUP' || item.type=='C2C'">
								<!-- 头像 -->
								<view class="avatar">
									<template v-if="item.type=='GROUP'">
										<!-- <view class="avatorImg">{{item.groupProfile.ava_name}}</view> -->
										<image lazy-load="true" :src="item.groupProfile.avator" mode="aspectFill" />
									</template>
									<template v-else>
										<view v-if="false" class="avatorImg2">{{item.userProfile.ava_name}}</view>
										<image lazy-load="true" :src="item.userProfile.avator" mode="aspectFill" />
									</template>
									<view class="number" v-if="item.unreadCount!=0">{{ item.unreadCount }}</view>
								</view>

								<view class="content">
									<view class="info">
										<template v-if="item.type=='GROUP'">
											<text class="name">{{ item.groupProfile.name }}</text>
										</template>
										<template v-else>
											<text class="name">{{ item.userProfile.nick }}</text>
										</template>

										<text class="last">{{ item.lastMessage.messageForShow }}</text>
									</view>
									<text class="time">
										{{ item.lastMessage.lastTimeFormat }}
									</text>
								</view>
							</template>
						</view>
					</next-swipe-action>
				</view>

			</view>
			<view style="height:100rpx;"></view>

		</block>
		<block v-if="tab == 3">

			<view class="listSys">
				<block v-for="(item, index) in sysmsg_list" :key="index">
					<view class="item">
						<view class="img">
							<view class="bg">
								<image class="icon" mode="widthFix" src="../../static/icon/icon_msg.png"></image>
							</view>
						</view>
						<view class="content">
							<view class="title">
								{{item.content}}
							</view>
							<text class="time">
								{{item.create_time}}
							</text>
						</view>
					</view>
				</block>
			</view>
		</block>



		<!-- <view class="kongbai" v-if="list.length == 0">
			<image src="../../static/images/kongbai.png" mode="widthFix"></image>
			<view>还没有消息哦</view>
			<view>赶紧去找人聊聊天吧~</view>
		</view> -->

		<uni-popup ref="popupDel" type="center">
			<view class="PopMain" @click="deletes()">
				删除会话
			</view>
		</uni-popup>
		<delete-conversation ref="deleteConversation"></delete-conversation>
	</view>
</template>

<script>
	import deleteConversation from "./components/delete-conversation.vue"

	import wsRequest from '../../common/websocketUtil.js'
	export default {
		components: {
			deleteConversation
		},
		data() {
			return {
				skey: '',
				tab: 0,
				tabsActive: "match",
				tabs: [{
					label: "聊天",
					name: "match",
				}],
				can_load_more: true,
				offset: 0,
				page: 1,
				limit: 20,
				list: [],
				hasNo: true,
				showMore: false,
				sysmsg_list: [],
				conversationID: '',
				activeKey: '',
				btnGroup: [{
					name: '删除',
					action: 'del',
					style: {
						bgColor: '#ff4d4f'
					}
				}]
			};
		},
		onLoad(params) {
			this.skey = params.skey || getApp().globalData.skey;
			getApp().globalData.skey = this.skey;
			let __this = this;
			uni.$on('conversationUpdate', function(data) {
				__this.loadData();
			});

		},
		onShow() {
			// this.TIM.getConversationList();
			// console.log("sdf")
			if (getApp().globalData.isLogin == 0) {
				getApp().globalData.socket.send({
					cmd: "login",
					data: {
						"uuid": getApp().globalData.uuid,
						"appId": 101
					}
				});
			}
			if (getApp().globalData.socket != null) {
				getApp().globalData.socket.restart();
			}
			this.loadData();
			this.loadSystemMsg();
		},
		methods: {
			nextSwipeActive(activeKey) {
				console.log(activeKey, 'activeKeyactiveKey');
				this.activeKey = activeKey
			},
			onclick(e) {
				// this.deletec(e.index)
				// console.log('所点击的列表索引：', e.index)
				// console.log('所点击的按钮数据：', e.item)
				// console.log("this.activeKey", this.activeKey)
				uni.request({
					url: this.$apiHost2 + '/Chat/sessDel', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						sessID: e.index
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						// console.log("----", res.data.list);
						if (res.data.success == 'yes') {
							this.page = 1;
							this.loadData();
						}
					}
				});
			},
			deletec(conversationID) {
				this.conversationID = conversationID;
				console.log("conversationID", conversationID);
				this.$refs.popupDel.open();
			},
			deletes() {

			},
			goTab(tabb) {
				this.tab = tabb;
				this.hasNo = true;
				if (tabb == 0) {
					if (this.list.length > 0) {
						// this.is_no_data = 0;
						this.hasNo = false;
					}
				} else if (tabb == 3) {
					if (this.sysmsg_list.length > 0) {
						// this.is_no_data = 0;
						this.hasNo = false;
					}
				}
			},
			goPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			loadSystemMsg() {
				uni.request({
					url: this.$apiHost + '/Plat/getSysmsg', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log("msg", res.data)
						if (res.data.list == undefined || res.data.list == null) {
							res.data.list = []
						}
						this.sysmsg_list = res.data.list;
					}
				});
			},
			loadData() {
				console.log("thiskey", this.skey);
				var offset = (this.page - 1) * 20;
				uni.request({
					url: this.$apiHost2 + '/Chat/sessionList', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						offset: offset
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log("----", res.data.list);
						if (res.data.list == undefined || res.data.list == null) {
							res.data.list = []
						}
						if (res.data.list.length > 0) {
							// this.is_no_data = 0;
							this.hasNo = false;
						}
						if (this.page > 1) {
							this.list = this.list.concat(res.data.list)
						} else {
							this.list = res.data.list;
						}
					}
				});
			},
			setList() {
				// this.list = this.TIM.conversations;
				this.list = [{
					conversationID: 1,
					type: 'GROUP',
					unreadCount: 0,
					groupProfile: {
						name: '官方群',
						avatar: 'https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg'
					},
					lastMessage: {
						messageForShow: '最后一条消息记录',
						lastTimeFormat: '2024-09-20 12:30:30'
					}
				}]
				console.log(this.list)
			},
			activeTabs(item) {
				this.tabsActive = item.name;
			},
			navigateToChatDetail(item) {
				var jsonConversationID = encodeURIComponent(JSON.stringify(item.conversationID));
				var jsonConversationType = encodeURIComponent(JSON.stringify(item.type));

				if (item.type == "GROUP") {
					var jsonUserID = encodeURIComponent(JSON.stringify(item.groupProfile.groupID));
					var jsonNickName = encodeURIComponent(JSON.stringify(item.groupProfile.name));
				} else {
					var jsonUserID = encodeURIComponent(JSON.stringify(item.userProfile.userID));
					var jsonNickName = encodeURIComponent(JSON.stringify(item.userProfile.nick));
				}

				uni.navigateTo({
					url: "/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName +
						"&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
				})
			},
			navigateToService() {
				let jsonUserID = encodeURIComponent(JSON.stringify("51"));
				let jsonNickName = encodeURIComponent(JSON.stringify("cp交友官方客服"));
				let jsonConversationID = encodeURIComponent(JSON.stringify("C2C51"));
				let jsonConversationType = encodeURIComponent(JSON.stringify("C2C"));
				uni.navigateTo({
					url: "/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName +
						"&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
				})
			},
			async getUserInfoByIdNum(idNums) {
				let [err, res] = await this.$http.get('user/getByIdNums', {
					id_nums: idNums
				});

				if (!this.$http.errorCheck(err, res)) {
					return;
				}
			},
		},
		//滚动到底部
		onReachBottom() {
			if (this.list.length > 0) {
				this.page++;
				this.loadData()
			}

		},
		//下拉刷新
		onPullDownRefresh() {
			this.list = []
			this.page = 1
			// console.log(this.lx)
			this.loadData()
			// setTimeout(() => {
			//     uni.stopPullDownRefresh()
			// },1000)
		},
	};
</script>

<style lang="scss" scoped>
	@import 'message.scss';
</style>