增加开发版本融云

pages/im/index.vue

@@ -1,6 +1,43 @@
 <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 in 2" :key="item" class="mssage-box">
+				<view class="mssage-action" @click="$Router.push({name: 'ImChat'})">
+					<u-avatar
+						clsss="mssage-action-cover"
+						src="https://cdn.uviewui.com/uview/album/1.jpg"
+						size="44"
+						text="唐"
+						font-size="14"
+						randomBgColor
+					></u-avatar>
+					<view class="mssage-action-content">
+						<view class="mssage-header">
+							<view class="header-name">唐明明</view>
+							<view class="header-time">2021/12/31</view>
+						</view>
+						<view class="mssage-msg">消息</view>
+					</view>
+				</view>
+			</view>
+		</block>
 	</view>
 </template>
 
@@ -9,12 +46,104 @@
 	export default {
 		data() {
 			return {
-				
+				messageArr	 : [],
+				optionsAction: [
+					{
+						text: '删除',
+						style: {
+							backgroundColor: '#e6576b'
+						}
+					}
+				]
 			};
+		},
+		methods:{
+			openChum(){
+				this.$Router.push({name: 'ImChum'})
+				console.log("好友列表")
+			}
+		},
+		onNavigationBarButtonTap(e) {
+			switch (e.index){
+				case 1:
+					this.openChum()
+					break;
+				case 0:
+					console.log("扫码添加好友")
+					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>