update

pages/im/friends/info.vue

@@ -1,12 +1,46 @@
-<template>
-    <view>
-        好友资料，
-        <u-button @click="toPrivate">发送消息</u-button>
-    </view>
+<template>
+	<view class="content">
+		<!-- 用户信息 -->
+		<view class="user-info">
+			<u-avatar
+				src="https://cdn.uviewui.com/uview/album/1.jpg"
+				size="58"
+			></u-avatar>
+			<view class="nickname">{{ userInfo.name }}</view>
+			<view class="sex">
+				<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
+				<!-- <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag> -->
+			</view>
+		</view>
+		<view class="user-lists">
+			<view class="user-lists-item">
+				<label>地区</label>
+				<text>黑龙江 哈尔滨</text>
+			</view>
+		</view>
+		<!-- 发送消息 -->
+		<view class="info-footer">
+			<button class="open-btn" @click="toPrivate">发送消息</button>
+		</view>
+	</view>
 </template>
 
 <script>
+    import {
+        getUserInfo
+    } from '@/apis/interfaces/im.js'
+    
     export default {
+        data() {
+            return {
+                userInfo: {}
+            }
+        },
+        onLoad(e) {
+            getUserInfo(e.targetId).then(res => {
+                this.userInfo = res
+            })
+        },
         methods: {
             toPrivate() {
                 uni.navigateTo({
@@ -17,5 +51,72 @@
     }
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.content{
+		min-height: 100vh;
+		background: $window-color;
+	}
+	// 用户信息
+	.user-info{
+		padding: $padding*3 $padding;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background: white;
+		.nickname{
+			font-size: 42rpx;
+			padding-top: $padding;
+			color: $text-color;
+		}
+		.sex{
+			padding-top: $padding/2;
+			text{
+				font-size: $title-size-sm;
+				background: #303133;
+				padding: 0 10rpx;
+				color: white;
+				border-radius: $radius-m;
+				line-height: 30rpx;
+				display: inline-block;
+			}
+		}
+	}
+	.user-lists{
+		margin-top: $margin;
+		background: white;
+		.user-lists-item{
+			padding: 0 $padding;
+			display: flex;
+			justify-content: space-between;
+			line-height: 90rpx;
+			font-size: $title-size-lg;
+			label{
+				color: $text-color;
+			}
+			text{
+				color: $text-gray;
+			}
+		}
+	}
+	// 发送消息
+	.info-footer{
+		padding: $padding;
+		width: 100%;
+		box-sizing: border-box;
+		.open-btn{
+			width: 100%;
+			height: 90rpx;
+			line-height: 90rpx;
+			background: $main-color;
+			border-radius: $radius-lg;
+			padding: 0;
+			margin: 0;
+			color: white;
+			font-size: $title-size;
+			&::after{
+				display: none;
+			}
+		}
+	}
 </style>