jiuyiUniapp/service/pages/index/index.vue

<script setup>
	// 消息首页

	import {
		onMounted,
		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 = computed(() => {
	// 	return store.state.userinfo
	// })

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

	/**
	 * 跳转
	 * @param {String} url 路由地址
	 */
	function link(url) {
		uni.navigateTo({
			url,
		})
	}
</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">客服小A</view>
					<view class="mt10 c666 f28">店铺客服</view>
				</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 {
		.background {
			width: 100%;
			height: 100%;
		}
	}

	// 
	.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>