school_uni/package1/ieBrowser/chatList.vue

<template>
	<view class="chat-list-page">
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="back" @tap="back">‹</view>
			<view class="title">聊天记录</view>
			<view class="filter">同校</view>
		</view>

		<view class="summary-card">
			<view>
				<view class="summary-title">今天有 5 个新话题</view>
				<view class="summary-sub">别让有趣的人掉进已读不回</view>
			</view>
			<view class="bubble">聊</view>
		</view>

		<view class="tabs">
			<view class="tab active">全部</view>
			<view class="tab">找搭子</view>
			<view class="tab">新朋友</view>
		</view>

		<view class="chat-card" v-for="item in chats" :key="item.name" @tap="goChat">
			<view class="avatar" :class="item.type">{{ item.type.toUpperCase() }}</view>
			<view class="chat-main">
				<view class="chat-line">
					<text class="name">{{ item.name }}</text>
					<text class="time">{{ item.time }}</text>
				</view>
				<view class="message">{{ item.message }}</view>
				<view class="tags">
					<text>{{ item.scene }}</text>
					<text>{{ item.status }}</text>
				</view>
			</view>
			<view class="unread" v-if="item.unread">{{ item.unread }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 24
				},
				chats: [{
					name: '橘子汽水',
					type: 'e',
					time: '刚刚',
					message: '北门那家米线你去过吗？我想找个试吃搭子',
					scene: '饭搭子',
					status: '正在输入',
					unread: 2
				}, {
					name: '凌晨两点半',
					type: 'i',
					time: '14:20',
					message: '电影社今晚放映，可以一起坐后排安静看。',
					scene: '电影搭子',
					status: '同频 88%',
					unread: 0
				}, {
					name: 'DChuo',
					type: 'i',
					time: '昨天',
					message: '明天图书馆三楼还有位置吗？',
					scene: '自习搭子',
					status: '已互关',
					unread: 1
				}]
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			goChat() {
				uni.navigateTo({
					url: '/package1/ieBrowser/chat'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f6f8ff;
	}

	.chat-list-page {
		min-height: 100vh;
		padding: 0 28rpx 48rpx;
		background:
			radial-gradient(circle at 14% 8%, rgba(131, 255, 216, 0.3), rgba(131, 255, 216, 0) 250rpx),
			linear-gradient(180deg, #fcfdff 0%, #f3f6ff 100%);
		box-sizing: border-box;
	}

	.nav {
		height: 88rpx;
		display: flex;
		align-items: center;
	}

	.back {
		width: 58rpx;
		font-size: 56rpx;
		line-height: 56rpx;
	}

	.title {
		flex: 1;
		font-size: 34rpx;
		font-weight: 900;
	}

	.filter {
		height: 54rpx;
		line-height: 54rpx;
		padding: 0 22rpx;
		border-radius: 999rpx;
		background: #111;
		color: #fff;
		font-size: 24rpx;
		font-weight: 900;
	}

	.summary-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 34rpx;
		border-radius: 38rpx;
		background: linear-gradient(135deg, #111 0%, #35413f 100%);
		color: #fff;
		box-shadow: 0 22rpx 46rpx rgba(30, 43, 50, 0.14);
	}

	.summary-title {
		font-size: 36rpx;
		font-weight: 900;
	}

	.summary-sub {
		margin-top: 10rpx;
		color: rgba(255, 255, 255, 0.72);
		font-size: 24rpx;
	}

	.bubble {
		width: 96rpx;
		height: 96rpx;
		border-radius: 32rpx;
		background: linear-gradient(135deg, #bdfce9, #ffdf75);
		color: #111;
		text-align: center;
		line-height: 96rpx;
		font-size: 40rpx;
		font-weight: 900;
	}

	.tabs {
		display: flex;
		margin: 28rpx 0;
		padding: 8rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 14rpx 30rpx rgba(33, 45, 72, 0.07);
	}

	.tab {
		flex: 1;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		border-radius: 999rpx;
		color: #71807b;
		font-size: 24rpx;
		font-weight: 900;
	}

	.tab.active {
		background: #111;
		color: #fff;
	}

	.chat-card {
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
		padding: 24rpx;
		border-radius: 34rpx;
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 18rpx 38rpx rgba(33, 45, 72, 0.07);
	}

	.avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 88rpx;
		font-size: 34rpx;
		font-weight: 900;
	}

	.avatar.i {
		background: #c9fff0;
		color: #08705c;
	}

	.avatar.e {
		background: #ffe69a;
		color: #a45c00;
	}

	.chat-main {
		flex: 1;
		margin-left: 20rpx;
		min-width: 0;
	}

	.chat-line {
		display: flex;
		align-items: center;
	}

	.name {
		flex: 1;
		font-size: 30rpx;
		font-weight: 900;
	}

	.time {
		color: #98a4a0;
		font-size: 22rpx;
	}

	.message {
		margin-top: 8rpx;
		color: #53615d;
		font-size: 24rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tags {
		margin-top: 12rpx;
	}

	.tags text {
		margin-right: 8rpx;
		padding: 4rpx 10rpx;
		border-radius: 999rpx;
		background: rgba(127, 108, 255, 0.1);
		color: #7f6cff;
		font-size: 20rpx;
		font-weight: 900;
	}

	.unread {
		min-width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		padding: 0 8rpx;
		border-radius: 999rpx;
		background: #ff3b57;
		color: #fff;
		text-align: center;
		font-size: 20rpx;
		font-weight: 900;
	}
</style>