boschchina-wechat-crm/pages/message/index.vue

<template>
	<view class="message-container">
		<view class="top-tabs">
			<view class="tab-item" :class="{ active: currentTab === 'system' }" @click="switchTab('system')">
				<text class="tab-text">系统消息</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'business' }" @click="switchTab('business')">
				<text class="tab-text">业务消息</text>
			</view>
		</view>

		<scroll-view class="message-list" scroll-y>
			<view class="message-item" v-for="(item, index) in messageList" :key="index" @click="viewDetail">
				<view class="message-icon">
					<uni-icons type="bell" size="24" color="#1890ff"></uni-icons>
				</view>
				<view class="message-content">
					<view class="message-header">
						<text class="message-title">{{ item.title }}</text>
						<text class="message-time">{{ item.time }}</text>
					</view>
					<text class="message-desc">{{ item.content }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	const currentTab = ref('system')

	const messageList = reactive([])

	const switchTab = (tab) => {
		currentTab.value = tab
	}

	const viewDetail = () => {
		uni.showToast({
			title: '阿斯顿发的是',
			icon: 'none'
		})
	}
</script>
<style lang="scss" scoped>
	.message-container {
		background: #f5f6f8;
	}

	.top-tabs {
		display: flex;
		align-items: center;
		padding: 20rpx 32rpx;
		margin-bottom: 20rpx;

		.tab-item {
			width: 182rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			background: #ffffff;

			.tab-text {
				font-size: 28rpx;
				color: #666666;
			}

			&.active {
				background: linear-gradient(90deg, #5B86F5 0%, #36D1DC 100%);

				.tab-text {
					color: #ffffff;
					font-weight: 600;
				}
			}

			&:not(:last-child) {
				margin-right: 24rpx;
			}
		}
	}

	.message-list {
		padding: 0 20rpx;

		.message-item {
			display: flex;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 28rpx;
			margin-bottom: 20rpx;

			.message-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60rpx;
				height: 60rpx;
				background: #e6f7ff;
				border-radius: 50%;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.message-content {
				flex: 1;

				.message-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12rpx;

					.message-title {
						font-size: 30rpx;
						font-weight: 600;
						color: #333333;
					}

					.message-time {
						font-size: 22rpx;
						color: #999999;
						flex-shrink: 0;
						margin-left: 16rpx;
					}
				}

				.message-desc {
					display: block;
					font-size: 26rpx;
					color: #666666;
					line-height: 1.6;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>