调整聊聊页面

App.vue

@@ -4,7 +4,7 @@
 
     export default {
         onLaunch: function() {
-            im.initIm('lmxuhwaglu76d')
+            // im.initIm('lmxuhwaglu76d')
             //#ifdef APP-PLUS
             // 获取系统版本号
             getVersions({

manifest.json

@@ -2,8 +2,8 @@
     "name" : "ZH-HEALTH",
     "appid" : "__UNI__C29473D",
     "description" : "ZH-HEALTH，您手上的健康管理专家",
-    "versionName" : "1.0.2",
-    "versionCode" : 102,
+    "versionName" : "1.0.3",
+    "versionCode" : 103,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

pages.json

@@ -363,28 +363,8 @@
             "path": "pages/im/index",
             "name": "IM",
             "style": {
-                "navigationBarTitleText": "聊聊",
-                "navigationBarBackgroundColor": "#FFFFFF",
-                "app-plus": {
-                    "titleNView": {
-                        "buttons": [
-                            {
-                                "float": "left",
-                                "text": "\ue605",
-                                "fontSrc": "/static/iconfont.ttf",
-                                "color": "#000",
-                                "fontSize": "20px"
-                            },
-                            {
-                                "float": "right",
-                                "text": "\ue606",
-                                "fontSrc": "/static/iconfont.ttf",
-                                "color": "#000",
-                                "fontSize": "20px"
-                            }
-                        ]
-                    }
-                }
+                "navigationBarBackgroundColor": "#FFFFFF",
+				"navigationStyle":"custom"
             }
         },
         {

pages/im/index.vue

@@ -1,5 +1,25 @@
 <template>
-    <view class="content">
+    <view class="content">
+		<!-- header -->
+		<view class="custom-header">
+			<view class="header-flex">
+				<view class="tabs">
+					<view class="item show">私聊</view>
+					<view class="item">群聊</view>
+				</view>
+				<view class="btns">
+					<view class="item">
+						<uni-icons color="#555" custom-prefix="iconfont" type="icon-sousuo" size="22"></uni-icons>
+					</view>
+					<view class="item">
+						<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
+					</view>
+					<view class="item">
+						<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
+					</view>
+				</view>
+			</view>
+		</view>
         <view v-if="$store.state.token != ''">
             <block v-if="conversations.length < 1">
                 <view class="vertical null-list">
@@ -14,9 +34,7 @@
                 <view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
                     <view class="mssage-action">
                         <block v-if="!friend(item.targetId).portraitUrl">
-                            <u-avatar clsss="mssage-action-cover" size="44"
-                                :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
-                                font-size="14" randomBgColor></u-avatar>
+                            <u-avatar clsss="mssage-action-cover" size="44" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="14" randomBgColor></u-avatar>
                         </block>
                         <block v-else>
                             <u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
@@ -138,7 +156,50 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>
+	// header
+	.custom-header{
+		@extend .ios-top;
+		background: white;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 99;
+		.header-flex{
+			padding: 20rpx $padding;
+			display: flex;
+			justify-content: space-between;
+			height: 60rpx;
+			line-height: 60rpx;
+			.tabs{
+				.item{
+					margin-left: $margin;
+					display: inline-block;
+					font-size: $title-size-lg;
+					color: $text-gray;
+					padding: 0 ($padding - 10);
+					border-radius: 30rpx;
+					&:first-child{
+						margin: 0;
+					}
+					&.show{
+						background: rgba($color: $main-color, $alpha: .1);
+						color: $main-color;
+						font-weight: bold;
+					}
+				}
+			}
+			.btns{
+				.item{
+					display: inline-block;
+					margin-left: $margin;
+				}
+			}
+		}
+	}
+	
+	// content
     .content {
         background-color: $window-color;
         min-height: 100vh;
@@ -151,7 +212,7 @@
                 margin-top: $margin * 2;
                 line-height: 70rpx;
                 color: $main-color;
-                border: solid 1rpx $main-color;
+                border: solid 2rpx $main-color;
                 padding: 0 ($padding*3);
                 font-size: $title-size-m;
                 border-radius: 35rpx;

static/iconfont.css

@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gengduo2:before {
+  content: "\e608";
+}
+
 .icon-gengduo:before {
   content: "\e607";
 }