menduner-uniapp/pages/index/communicate.vue

<template>
  <layout-page>
		<view class="height defaultBgc">
			<scroll-view class="scrollBox" scroll-y="true" >
				<view class="box" v-for="item in items" :key="item.id" @tap="handleTo(item)">
					<view class="box-header">
						<template v-if="item.unread === '0'">
							<image
								class="enterAvatar"
								:src="getUserAvatar(item?.userInfoVo?.userInfoResp?.avatar, item?.userInfoVo?.userInfoResp?.sex)"
							></image>
						</template>
						<template v-else>
							<uni-badge class="uni-badge-left-margin" :text="item.unread" absolute="rightTop" size="small">
								<image
									class="enterAvatar"
									:src="getUserAvatar(item?.userInfoVo?.userInfoResp?.avatar, item?.userInfoVo?.userInfoResp?.sex)"
								></image>
							</uni-badge>
						</template>
					</view>
					<view class="box-content">
						<view class="box-content-names">
							<view class="name">
								{{ item.thatName }}
								<text class="nameSub">{{ item.enterpriseAnotherName }}</text>
								<span class="line" v-if="item.postNameCn && item.enterpriseAnotherName"></span>
								<text class="nameSub">{{ item.postNameCn }}</text>
							</view>
							<!-- <view class="time">{{ item.updateTime }}</view> -->
						</view>
						<view class="box-content-text">{{ timesTampChange(+item.timestamp.padEnd(13, '0')) }}</view>
					</view>
				</view>
				<image
					v-if=" items.length===0 "
					src="https://minio.citupro.com/dev/static/nodata.png"
					mode="widthFix"
					style="width: 100%;">
				</image>
				<uni-load-more status="noMore" />
			</scroll-view>
		</view>
  </layout-page>
</template>

<script setup>
import { ref, watch } from 'vue'
import layoutPage from '@/layout'
import { getConversationSync } from '@/api/common'
import { onShow, onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { getUserAvatar } from '@/utils/avatar'
import { timesTampChange } from '@/utils/date'
import { userStore } from '@/store/user'
import { useIMStore } from '@/store/im'

const IM = useIMStore()

const useUserStore = userStore()

const items = ref([])
watch([() => useUserStore.refreshToken, () => IM.newMsg], () => {
	// 检测实例是否存在
	if (!IM.uid?.value) {
		return
	}
	init()
})

watch(() => IM.uid, (val) => {
	if (!val) {
		return
	}
	// 监听uid变化
	init()
})

onShow(() => {
	const currentPage = getCurrentPages()[0];  // 获取当前页面实例
	const currentTabBar = currentPage?.getTabBar?.();

	// 设置当前tab页的下标index
	currentTabBar?.setData({ selected: 1 });
	init()
})
onLoad(() => {
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage']
  })
  onShareAppMessage(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
			imageUrl: 'https://minio.menduner.com/dev/menduner/miniProgram/share-cover.png'
    }
  })
})



const handleTo = (item) => {
	const { userInfoVo, thatName, postNameCn, enterpriseAnotherName, channel_id } = item
	const query = {
		id: userInfoVo?.userInfoResp?.userId,
		name: thatName,
		postName: postNameCn,
		enterpriseName: enterpriseAnotherName,
		enterpriseId: userInfoVo?.userInfoResp?.enterpriseId,
		channelId: channel_id,
		avatar: userInfoVo?.userInfoResp?.avatar,
		sex: userInfoVo?.userInfoResp?.sex,
	}
	const queryStr = Object.keys(query).reduce((r, v) => {
		return r += `${v}=${encodeURIComponent(query[v])}&`
	}, '?')
	uni.navigateTo({
    url: `/pagesA/chart/index${queryStr.slice(0, -1)}`
  })
}

async function init () {
	try {
		const { data } = await getConversationSync({ msg_count: 1 })
		if (!data) {
			return
		}
		items.value = data.map(item => {
			return {
				thatName: item?.userInfoVo ? (item.userInfoVo.userInfoResp?.name ? item.userInfoVo.userInfoResp.name : '游客') : '系统消息',
				enterpriseAnotherName: item?.userInfoVo?.userInfoResp?.enterpriseAnotherName ?? '',
				postNameCn: item?.userInfoVo?.userInfoResp?.postNameCn ?? '',
				...item
			}
		})
	} catch (error) {

	}
}



</script>

<style scoped lang="scss">
.scrollBox {
	padding-bottom: 24rpx;
  box-sizing: border-box;
}
.box {
	background: #FFF;
	height: 130rpx;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	border-bottom: 2rpx solid #eee;
	&-header {
		width: 120rpx;
		height: 100%;
		position: relative;
	}
	&-content {
		flex: 1;
		width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&-names {
			display: flex;
			justify-content: space-between;
			
			.name {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				.nameSub {
					font-size: 0.75em;
					color: #999;
				}
				.line {
					display: inline-block;
					width: 2rpx;
					height: 24rpx;
					vertical-align: middle;
					background-color: #e0e0e0;
					margin: 0 6rpx;
				}
			}
			.time {
				color: #999;
				font-size: .85em;
			}
		}
		&-text {
			color: #999;
			font-size: .85em;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
.height {
	height: 100vh;
	padding-bottom: 120rpx;
	box-sizing: border-box;
}
.enterAvatar{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin: 0 auto;
}
</style>