format

pages/im/components/sentText.nvue

@@ -1,6 +1,6 @@
 <template>
     <view class="sent--text">
-        <input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
+        <input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
         <!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
     </view>
 </template>
@@ -51,6 +51,12 @@
                         this.inputTxt = ''
                     })
                 }
+            },
+            focus() {
+                this.$emit('focus')
+            },
+            blur() {
+               this.$emit('blur') 
             }
         }
     }

pages/im/index.vue

@@ -9,12 +9,12 @@
                     <view class="item" @click="onNav('', {})">群聊</view>
                 </view>
                 <view class="btns">
-                    <view class="item" @click="onNav('imFriends', {})">
-                        <uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
-                    </view>
                     <view class="item" @click="scanQrCode">
                         <uni-icons color="#555" type="scan" size="22"></uni-icons>
                     </view>
+                    <view class="item" @click="onNav('imFriends', {})">
+                        <uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
+                    </view>
                     <!-- <view class="item" @click="onNav('', {})">
                         <uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
                     </view> -->
@@ -29,16 +29,16 @@
                 </view>
             </block>
             <block v-else>
-                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true" />
+                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
                 <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
-                    @tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
+                    @click="toDetail(item)" @longpress="onLongPress" :data-item="item">
-                    <view class="avatar">
+                    <view class="avatar" @click="toFriend(item.targetId)">
                         <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
                             :value="item.unreadMessageCount" />
                         <u-avatar :src="friend(item.targetId).portraitUrl || require('@/static/user/cover.png')"
-                            shape="square" size="46" />
+                            shape="square" size="44" />
                     </view>
-                    <view class="content">
+                    <view class="content u-border-bottom">
                         <view class="header">
                             <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
                             <view class="time">{{ item.sentTime|timeCustomCN }}</view>
@@ -47,9 +47,9 @@
                     </view>
                 </view>
                 <!-- TODO 长按的弹出框，怎么点击隐藏，没搞明白 -->
-                <view class="shade" @tap="hidePop">
+                <view class="shade" @click="hidePop" v-show="showPop">
                     <view class="pop" :style="popStyle" :class="{'show':showPop}">
-                        <view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
+                        <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
                             {{item}}
                         </view>
                     </view>
@@ -209,8 +209,11 @@
                     url: '/pages/im/private/chat?targetId=' + item.targetId + '&conversationType=' + item
                         .conversationType
                 })
-
+            },
-                // url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType
+            toFriend(targetId) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + targetId
+                })
             },
             // 点击按钮
             onNav(name, params) {
@@ -318,7 +321,7 @@
 
         .message {
             background: white;
-            padding: 30rpx 0 0 30rpx;
+            padding: 20rpx 0 0 20rpx;
             position: relative;
             display: flex;
 
@@ -326,7 +329,6 @@
             &.is-top {
                 background: $window-color;
                 border-bottom: #e8e8e8;
-                // background-color: rgba($color: $main-color, $alpha: 0.02);
             }
 
             .avatar {
@@ -341,7 +343,6 @@
                 margin-left: 30rpx;
                 width: calc(100% - 46px);
                 box-sizing: border-box;
-                border-bottom: solid 1rpx #f3f3f3;
                 position: relative;
 
                 .header {
@@ -368,29 +369,20 @@
                     padding-top: $padding - 20;
                     padding-bottom: $padding;
                     font-size: $title-size-m;
-                    height: 40rpx;
+                    height: 32rpx;
-                    line-height: 40rpx;
+                    line-height: 32rpx;
                     width: 500rpx;
                     @extend .nowrap;
                 }
             }
         }
-
-        // .message:not(:last-child) {
-        //     &::after {
-        //         position: absolute;
-        //         left: calc(44px + #{$padding} + 30rpx);
-        //         right: 0;
-        //         bottom: 0;
-        //         content: " ";
-        //         height: 1rpx;
-        //         background: $border-color;
-        //     }
-        // }
     }
 
     /* 遮罩 */
     .shade {
+        position: fixed;
+        width: 100%;
+        height: 100%;
 
         .pop {
             position: fixed;

pages/im/private/chat.nvue

@@ -36,7 +36,7 @@
                 @success="getMessageList" />
             <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
                 @success="getMessageList" />
-            <view class="msg-type msg-push" @click="showPopups = !showPopups">
+            <view class="msg-type" @click="showPopups = !showPopups">
                 <image class="icon" src="@/static/icon/popups-icon.png"></image>
             </view>
         </view>
@@ -73,7 +73,8 @@
                     portraitUrl: ''
                 },
                 chatType: 1, // 0 语音，1 文本
-                showPopups: false
+                showPopups: false,
+                inputFocus: false // 输入框是否获得了焦点
             }
         },
         components: {