jnpf_app/pages/message/chat/index.vue

<template>
	<view class="message-v">
		<view class="search-box">
			<u-search :placeholder=" $t('app.apply.pleaseKeyword')" v-model="keyword" height="72" :show-action="false"
				@change="search" bg-color="#f0f2f6" shape="square" style="width: 100%;">
			</u-search>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :sticky="false"
			:down="downOption" :up="upOption" :bottombar="false">
			<view class="message-list">
				<view class="message-list-box">
					<SwipeItem :list="list" :buttons="options" @action="handleRelocation" ref="swipeItem">
						<template v-slot="{ item }">
							<view class="reply-item u-border-bottom u-flex" @click="toIm(item)">
								<view class="reply-item-img">
									<u-avatar :src="baseURL+item.headIcon" mode="square" size="96" />
								</view>
								<view class="reply-item-txt u-flex-1">
									<view class="reply-item-cell reply-item-title u-flex u-row-between">
										<text class="title">{{item.realName}}/{{item.account}}</text>
										<text class="u-font-24 againColor">{{jnpf.toDateText(item.latestDate)}}</text>
									</view>
									<view class="reply-item-cell u-flex u-row-between">
										<text
											class="reply-item-txt-msg u-line-1 againColor">{{getMsgText(item.latestMessage,item.messageType)}}</text>
										<u-badge type="error" :count="item.unreadMessage" :absolute="false" />
									</view>
								</view>
							</view>
						</template>
					</SwipeItem>
				</view>
			</view>
		</mescroll-body>
		<!-- -->
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import SwipeItem from "@/components/SwipeItem/index"
	import resources from '@/libs/resources.js'
	import {
		useChatStore
	} from '@/store/modules/chat'
	import {
		getIMReply,
		relocation
	} from '@/api/message.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			SwipeItem
		},
		data() {
			return {
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: this.$t('common.noData'),
						fixed: true,
						top: "300rpx",
					}
				},
				key: +new Date(),
				keyword: '',
				list: [],
				options: [{
					text: '移除',
					style: {
						backgroundColor: '#dd524d',
					},
					value: 'delete'
				}],
				swipeAction: false
			}
		},
		computed: {
			msgInfo() {
				const chatStore = useChatStore()
				return chatStore.getMsgInfo
			},
			baseURL() {
				return this.define.baseURL
			},
		},
		onLoad() {
			this.keyword = ''
			uni.$on('updateList', data => {
				this.$nextTick(() => {
					this.mescroll.triggerDownScroll()
				})
			})
			uni.$on('updateMsgNum', id => {
				this.updateMsgNum(id)
			})
		},
		onUnload() {
			uni.$off('updateList')
			uni.$off('updateMsgNum')
		},
		methods: {
			handleRelocation(data) {
				let {
					index,
					action,
					btn,
					item
				} = data
				this.list.splice(index, 1)
				relocation(item.id).then(res => {
					this.init({
						...this.upOption.page
					})
				})
			},
			upCallback(page) {
				this.init(page)
			},
			init(page) {
				let query = {
					currentPage: page.num,
					pageSize: page.size,
					keyword: this.keyword
				}
				getIMReply(query).then(res => {
					this.mescroll.endSuccess(res.data.list.length, false);
					this.list = res.data.list || [];
					this.swipeAction = true
					uni.hideLoading()
				}).catch(() => {
					this.mescroll && this.mescroll.endErr();
				})
			},
			search() {
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300)
			},
			updateMsgNum(id) {
				const chatStore = useChatStore()
				const len = this.list.length
				for (let i = 0; i < len; i++) {
					if (id === this.list[i].id) {
						const num = this.list[i].unreadMessage
						chatStore.reduceBadgeNum(num)
						this.list[i].unreadMessage = 0
						break
					}
				}
			},
			getMsgText(text, type) {
				if (type === 'voice') return '[语音]';
				if (type === 'image') return '[图片]';
				return text;
			},
			toIm(item) {
				const chatStore = useChatStore()
				const name = item.realName + '/' + item.account
				if (item.unreadMessage) {
					chatStore.reduceBadgeNum(item.unreadMessage)
					item.unreadMessage = 0
				}
				this.$nextTick(() => {
					this.$refs.swipeItem.closeSwipe()
				})
				uni.navigateTo({
					url: '/pages/message/im/index?name=' + item.realName + '/' + item.account + '&formUserId=' +
						item.id + '&headIcon=' + item.headIcon
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.message-v {
		.search-box {
			height: 120rpx;
			padding: 0rpx 20rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-bottom: 16rpx;
		}

		.replyList {
			padding: 0 20rpx;
			background-color: #fff;

			.againColor {
				color: #909399;
			}
		}

		.reply-item {
			height: 142rpx;
			background-color: #fff;
			padding: 0 20rpx;

			.reply-item-img-sysMsg {
				width: 96rpx;
				height: 96rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 16rpx;
				flex-shrink: 0;
			}

			.reply-item-img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 16rpx;
				flex-shrink: 0;
			}

			.reply-item-icon-color {
				background-color: #2bd34f;
			}

			.reply-item-icon-color2 {
				background-color: #3B87F7;
			}

			.reply-item-icon {

				.icon-ym {
					color: #fff;
					font-size: 50rpx;
				}
			}

			.reply-item-txt {
				.reply-item-cell {
					height: 40rpx;
					color: #C6C6C6;
					font-size: 24rpx;

					&.reply-item-title {
						height: 44rpx;
						margin-bottom: 4px;

						.title {
							font-size: 28rpx;
							color: #303133;
						}
					}

					.reply-item-txt-msg {
						width: 480rpx;
					}
				}
			}
		}
	}

	.search-box_sticky {
		padding: 0 32rpx;
	}

	.message-list .uni-swipe {
		margin-bottom: 0px !important;
		border-radius: 0px !important;
	}

	.message-list {
		.message-list-box {
			margin: 0px !important;

			::v-deep .u-swipe-action {
				border-radius: 0;
			}
		}
	}
</style>