jiuyiUniapp/service/pages/index/index.vue

<script setup>
// 消息首页

import api from '@/api/index.js'
import {
	onMounted, onUnmounted,
	ref,
	reactive,
	getCurrentInstance,
} from 'vue';
import {
	onLoad,
	onReady,
	onHide,
	onPullDownRefresh,
	onReachBottom,
} from '@dcloudio/uni-app'
// 路由
import util from '@/common/js/util.js'

const chatList = reactive([{
	id: 1,
	avatar: 'https://p3-flow-imagex-sign.byteimg.com/user-avatar/9f4488a87a17f6f31b9716331e14fe26~tplv-a9rns2rl98-icon-tiny.jpeg?rk3s=98c978ad&x-expires=1740537084&x-signature=OrjX8tZaafN4XJE2o8QzZDs3Q20%3D',
	name: '客户 A',
	lastMessage: '您好，商品什么时候发货？',
	dot: 1,
},
{
	id: 2,
	avatar: 'https://p3-flow-imagex-sign.byteimg.com/user-avatar/9f4488a87a17f6f31b9716331e14fe26~tplv-a9rns2rl98-icon-tiny.jpeg?rk3s=98c978ad&x-expires=1740537084&x-signature=OrjX8tZaafN4XJE2o8QzZDs3Q20%3D',
	name: '客户 B',
	lastMessage: '这个商品有优惠吗？',
	dot: '',
}
])
 

// 用户信息
const userinfo = JSON.parse(uni.getStorageSync('userinfo'))


console.log(userinfo);



onMounted(() => {
	getList()
	addListener()
})

onUnmounted(() => {
	removeListener()
})

// 开启监听消息
function addListener() {
	let onMessageReceived = function (event) {
		getList()
	}

	uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onMessageReceived);
}

// 移除监听
function removeListener() {
	uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED);
}

// 获取消息列表
function getList() {
	api.news.getMessageList({
		query: {
			userId: userinfo.serviceId,
		}
	}).then(rs => {
		if (rs.code == 200) {
			// list.data = handleList(rs.data);
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})
}




/**
 * 去聊天
 * @param {Number} item 聊天对象
 */
function handleChat(item) {
	// 
}

/**
 * 跳转
 * @param {String} url 路由地址
 */
function link(url) {
	uni.navigateTo({
		url,
	})
}


// 退出登录
function handleLogout() {
	util.alert({
		content: '确认退出登录吗？',
	}).then(rs => {
		if (!rs.confirm) return 
		
		util.logout(() => {
			// #ifdef APP
			plus.runtime.restart()
			// #endif
		})
	})
}
</script>

<template>
	<view class="container">
		<view class="header pr ptb30 plr20">
			<image src="/static/mine-b.png" class="background pfull" mode="aspectFill" />
			<view class="content pr rows">
				<view class="avatar">
					<image class="wh120 cir" mode="aspectFill"
						src="https://p3-flow-imagex-sign.byteimg.com/user-avatar/9f4488a87a17f6f31b9716331e14fe26~tplv-a9rns2rl98-icon-tiny.jpeg?rk3s=98c978ad&x-expires=1740537084&x-signature=OrjX8tZaafN4XJE2o8QzZDs3Q20%3D" />
				</view>

				<view class="info f1 ml20">
					<view class="name c333 f34">{{ userinfo.serviceName }}</view>
					<view class="mt10 c666 f28">店铺客服</view>
				</view>
			</view>
			<view class="pr login-out">
				<view class="out-btn" @click="handleLogout">退出登录</view>
			</view>
		</view>

		<!-- 商家订单 -->
		<view class=" rows ptb30 plr20">
			<view class="">商家订单管理</view>
			<uni-icons type="right" />
		</view>

		<view class="list">
			<view class="item rows ptb20 plr20" v-for="(item, index) in chatList" :key="index"
				@click="handleChat(item)">
				<view class="avatar">
					<image :src="item.avatar" class="wh80 cir" />
				</view>

				<view class="info f1 ml20">
					<view class="rows">
						<view class="name c333 f28">{{ item.name }}</view>
						<view class="time c999 f22">2024.05.06 13:00</view>
					</view>

					<view class="rows">
						<view class="content mt10 c666 f24">{{ item.lastMessage }}</view>
						<view class="dot cfff f22">
							<view class="content" v-if="item.dot">{{ item.dot }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
// 个人信息
.header {
	display: flex;
	justify-content: space-between;

	.background {
		width: 100%;
		height: 100%;
	}

	.login-out {
		display: table;

		.out-btn {
			display: table-cell;
			vertical-align: middle;
		}
	}
}

// 
.list {
	.item {
		border-top: 1rpx solid #eee;

		.dot {
			padding: 5rpx;
			border-radius: 100rpx;
			background-color: #f00;

			// 内容
			.content {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
}
</style>