我的资料

pages/im/friends/mine.vue

@@ -1,8 +1,45 @@
 <template>
-    <div>
-        我的资料，也就展示个二维码吧
-		获取一波资料吧
-    </div>
+    <view class="content">
+        <!-- 用户信息 -->
+        <view class="info-flex">
+            <u-avatar
+                :src="infoObj.portraitUrl"
+                shape="square"
+                size="50"
+                bg-color="#fff"
+            ></u-avatar>
+            <view class="info-text">
+                <view class="nickname">{{infoObj.name}}</view>
+                <view class="address">地址：{{infoObj.address}}</view>
+            </view>
+        </view>
+        <!-- 按钮组 -->
+        <view class="info-btns">
+            <view class="item">
+                <label>性别</label>
+                <view class="text">{{infoObj.gender === 0 ? '男': '女'}}</view>
+            </view>
+            <view class="item">
+                <label>地址二维码</label>
+                <u-icon name="arrow-right" color="#999" size="14"></u-icon>
+            </view>
+        </view>
+        <!-- footer -->
+        <view class="footer">
+            <view class="footer-item">
+                <view class="icon">
+                    <u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
+                </view>
+                <view class="text">发消息</view>
+            </view>
+            <view class="footer-item">
+                <view class="icon">
+                    <u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
+                </view>
+                <view class="text">发消息</view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
@@ -10,14 +47,25 @@
 	export default{
 		data(){
 			return{
-				
+				infoObj: {
+                    userId      : '',
+                    username    : '',
+                    name        : '',
+                    address     : '',
+                    portraitUrl : '',
+                    gender      : 0,
+                    hash        : ''
+                }
 			}
 		},
+        onLoad(e){
+            console.log(e)
+        },
 		mounted() {
-			console.log(this.$Route)
-			// getUserInfo(this.$Route.query.id).then(res => {
-				
-			// })
+			getUserInfo(this.$Route.query.targetId).then(res => {
+                this.infoObj = res
+                console.log(this.infoObj)
+			})
 		},
 		methods: {
 			
@@ -26,4 +74,80 @@
 </script>
 
 <style lang="scss" scoped>
+    .content{
+        background: $window-color;
+        min-height: 100vh;
+        // footer
+        .footer{
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: $padding*2 $padding;
+            display: flex;
+            justify-content: space-around;
+            .footer-item{
+                margin: 0 $margin/2;
+                .icon{
+                    background: $main-color;
+                    width: 88rpx;
+                    height: 88rpx;
+                    line-height: 88rpx;
+                    display: inline-block;
+                    border-radius: 50%;
+                    .icon-u{
+                        margin-top: calc((88rpx/2) - 13px);
+                        margin-left: calc((88rpx/2) - 13px);
+                    }
+                }
+                .text{
+                    color: $main-color;
+                    font-size: $title-size-m;
+                    text-align: center;
+                    padding-top: 10rpx;
+                }
+            }
+        }
+        // 用户信息
+        .info-flex{
+            padding: $padding;
+            display: flex;
+            .info-text{
+                width: calc(100% - 50px);
+                padding-left: $padding;
+                box-sizing: border-box;
+                .nickname{
+                    line-height: 30px;
+                    font-size: $title-size + 6;
+                    color: $text-color;
+                }
+                .address{
+                    line-height: 20px;
+                    font-size: $title-size-lg;
+                    color: $text-gray;
+                    @extend .nowrap;
+                }
+            }
+        }
+        // 用户信息
+        .info-btns{
+            background: white;
+            margin: 0 $margin;
+            border-radius: $radius;
+            .item{
+                line-height: 100rpx;
+                border-bottom: solid 1rpx $border-color;
+                display: flex;
+                padding: 0 $padding;
+                justify-content: space-between;
+                font-size: $title-size-lg;
+                &:last-child{
+                    border-bottom: none;
+                }
+                .text{
+                    color: $text-gray-m;
+                }
+            }
+        }
+    }
 </style>