同步代码

pages/im/index.vue

@@ -1,6 +1,50 @@
 <template>
-	<view>
-		im
+	<view class="content">
+		<block v-if="messageArr.length < 1">
+			<view class="vertical null-list">
+				<u-empty
+					icon="http://cdn.uviewui.com/uview/empty/message.png"
+					textColor="#999"
+					text="暂无好友消息"
+				>
+					<template>
+						<view class="null-list-btn" @click="openChum">开启聊天</view>
+					</template>
+				</u-empty>
+			</view>
+		</block>
+		<block v-else>
+			<!-- <button type="default">连接</button> -->
+			<!-- <button type="default">发送</button> -->
+			
+			<view v-for="(item, index) in messageArr" :key="index" class="mssage-box">
+				<view class="mssage-action" @click="openChum">
+					<block v-if="item.cover === ''">
+						<u-avatar
+							clsss="mssage-action-cover"
+							size="44"
+							:text="item.text"
+							font-size="14"
+							randomBgColor
+						></u-avatar>
+					</block>
+					<block v-else>
+						<u-avatar
+							clsss="mssage-action-cover"
+							:src="item.cover"
+							size="44"
+						></u-avatar>
+					</block>
+					<view class="mssage-action-content">
+						<view class="mssage-header">
+							<view class="header-name">{{item.name}}</view>
+							<view class="header-time">{{item.time}}</view>
+						</view>
+						<view class="mssage-msg">{{item.message}}</view>
+					</view>
+				</view>
+			</view>
+		</block>
 	</view>
 </template>
 
@@ -9,12 +53,139 @@
 	export default {
 		data() {
 			return {
-				
+				messageArr	 : [
+					{
+						cover: 'https://cdn.uviewui.com/uview/album/1.jpg',
+						name: '班班五月',
+						message: '咱们进直播间了吗？上课啦~今天教大家【拆解项目背后的逻辑】',
+						time: '昨天'
+					},
+					{
+						cover: 'https://cdn.uviewui.com/uview/album/4.jpg',
+						name: '周磊',
+						message: '[语音]',
+						time: '周一'
+					},
+					{
+						cover: '',
+						text: 'S',
+						name: 'SKY',
+						message: '谢谢',
+						time: '2022/1/5'
+					},
+					{
+						cover: 'https://cdn.uviewui.com/uview/album/5.jpg',
+						name: '俊少',
+						message: '[语音]',
+						time: '2022/1/4'
+					},
+				],
+				optionsAction: [
+					{
+						text: '删除',
+						style: {
+							backgroundColor: '#e6576b'
+						}
+					}
+				]
 			};
+		},
+		methods:{
+			openChum(){
+				uni.showToast({
+					title: '聊聊系统正在开发中，敬请期待',
+					icon : 'none'
+				})
+			}
+		},
+		onNavigationBarButtonTap(e) {
+			
+			switch (e.index){
+				case 1:
+					uni.showToast({
+						title: '聊聊好友系统正在开发中，敬请期待',
+						icon : 'none'
+					})
+					break;
+				case 0:
+					uni.showToast({
+						title: '聊聊扫一扫系统正在开发中，敬请期待',
+						icon : 'none'
+					})
+					break;
+			}
 		}
 	}
 </script>
 
-<style lang="scss">
-	
+<style lang="scss" scoped>
+	.content{
+		background-color: $window-color;
+		min-height: 100vh;
+		.null-list{
+			height: 100vh;
+			text-align: center;
+			&-btn{
+				margin-top: $margin * 2;
+				line-height: 70rpx;
+				color: $main-color;
+				border:solid 1rpx $main-color;
+				padding: 0 ($padding*3);
+				font-size: $title-size-m;
+				border-radius: 35rpx;
+				box-sizing: border-box;
+			}
+		}
+		.mssage-box{
+			background: white;
+			.mssage-action{
+				position: relative;
+				padding: 20rpx $padding;
+				&::after{
+					position: absolute;
+					left: $padding + 108;
+					right: 0;
+					bottom: 0;
+					content: " ";
+					height: 1rpx;
+					background: $border-color;
+				}
+				&-content{
+					position: absolute;
+					top: 20rpx;
+					height: 44px;
+					left: $padding + 108;
+					right: $margin;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					.mssage-header{
+						display: flex;
+						font-size: $title-size;
+						line-height: 40rpx;
+						justify-content: space-between;
+						.header-name{
+							flex: 1;
+							@extend .nowrap;
+						}
+						.header-time{
+							padding-left: $padding;
+							font-size: $title-size-sm - 2;
+							color: $text-gray;
+						}
+					}
+					.mssage-msg{
+						font-size: $title-size-sm - 2;
+						color: $text-gray;
+						@extend .nowrap;
+					}
+				}
+			}
+			&-item:last-child{
+				.mssage-action::after{
+					display: none;
+				}
+			}
+		}
+	}
 </style>