聊天设置界面调整

pages.json

@@ -413,7 +413,7 @@
             "path": "pages/im/private/setting",
             "name": "imPrivateSetting",
             "style": {
-                "navigationBarTitleText": "设置"
+                "navigationBarTitleText": "聊天设置"
             }
         },
         {

pages/im/private/setting.vue

@@ -1,11 +1,31 @@
-<template>
+<template>
-    <div>
+	<view class="content">
-        会话设置 {{ targetId}}
+		<!-- 聊天信息 -->
-        <div @click="setStatus">免打扰开关 {{status}}</div>
+		<view class="set-user">
-        <div @click="setTop">置顶会话 {{isTop}}</div>
+			<u-avatar
-		
+				src="https://cdn.uviewui.com/uview/album/1.jpg"
-        <u-button @click="toIndex">会首页</u-button>
+				size="48"
-    </div>
+			></u-avatar>
+			<view class="set-user-nickname">唐明明</view>
+		</view>
+		<!-- 聊天设置 -->
+		<view class="set-group">
+			<view class="group-flex">
+				<label>消息免打扰</label>
+				<u-switch activeColor="#34CE98" size="22"></u-switch>
+			</view>
+			<view class="group-flex">
+				<label>置顶会话</label>
+				<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
+			</view>
+		</view>
+		<view class="set-group">
+			<view class="group-flex">
+				<label>清空聊天记录</label>
+				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -64,6 +84,49 @@
     }
 </script>
 
-<style>
+<style lang="scss" scoped>
-	
+	.content{
+		min-height: 100vh;
+		background: $window-color;
+		// 用户信息
+		.set-user{
+			background: white;
+			padding: $padding;
+			display: flex;
+			align-items: center;
+			.set-user-nickname{
+				padding-left: $padding;
+				flex: 1;
+				line-height: 70rpx;
+				font-size: $title-size + 6;
+			}
+		}
+		// 聊天设置
+		.set-group{
+			margin: $margin 0;
+			background: white;
+			.group-flex{
+				position: relative;
+				display: flex;
+				justify-content: space-between;
+				height: 90rpx;
+				line-height: 90rpx;
+				padding: 0 $padding;
+				font-size: $title-size;
+				align-items: center;
+				&::after{
+					content: " ";
+					position: absolute;
+					left: $margin;
+					right: 0;
+					bottom: 0;
+					height: 1rpx;
+					background-color: $border-color;
+				}
+				&:last-child::after{
+					display: none;
+				}
+			}
+		}
+	}
 </style>