menduner-uniapp/pages/index/communicate.vue

<template>
  <layout-page class="ss-m-x-15">
    <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: 100vw;height: 100vh;">
		</image>
  </layout-page>
</template>

<script setup>
import { ref, watch } from 'vue'
import layoutPage from '@/layout'
import { getAccessToken } from '@/utils/request'
import { showAuthModal } from '@/hooks/useModal'
import { getConversationSync } from '@/api/common'
import { onShow } 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], () => {  
	console.log('变了')
	init()
})

onShow(() => {
	init()
})



const handleTo = ({ userInfoVo, thatName, postNameCn, enterpriseAnotherName, channel_id }) => {
	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)}`
  })
}

// if (!getAccessToken()) {
// 	uni.showToast({
// 		title: '请先登录',
// 		icon: 'none'
// 	})
// 	showAuthModal()
// 	return
// }

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">
.box {
	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;
		}
	}
}
.enterAvatar{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin: 0 auto;
}
</style>