From e77a81e38e15ba576109b7d4ffda74e3e3152c31 Mon Sep 17 00:00:00 2001
From: zhangdongxue <zhangdongxue@uz.cn>
Date: Fri, 18 Feb 2022 14:39:44 +0800
Subject: [PATCH 1/3] ...

---
 pages/im/group/info.vue     |   9 +-
 pages/im/group/invite.vue   | 181 +++++++++++++++++++-----------------
 pages/im/group/reviewed.vue |   5 +-
 3 files changed, 101 insertions(+), 94 deletions(-)

diff --git a/pages/im/group/info.vue b/pages/im/group/info.vue
index 4c185f1..5dee573 100644
--- a/pages/im/group/info.vue
+++ b/pages/im/group/info.vue
@@ -84,15 +84,10 @@
         onLoad(e) {
             this.targetId = e.targetId
             this.qrContent += e.targetId
-            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
-                status
-            }) => {
+            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({status}) => {
                 this.status = !Boolean(status)
             })
-            RongIMLib.getConversation(this.conversationType, this.targetId, ({
-                code,
-                conversation
-            }) => {
+            RongIMLib.getConversation(this.conversationType, this.targetId, ({code,conversation}) => {
                 if (code == 0) {
                     this.isTop = conversation.isTop
                 }
diff --git a/pages/im/group/invite.vue b/pages/im/group/invite.vue
index 2abafc0..dec52c5 100644
--- a/pages/im/group/invite.vue
+++ b/pages/im/group/invite.vue
@@ -1,74 +1,59 @@
 <template>
-    <view>
-       <!-- <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
-            <view class="search">
-                <u--input class="search-input" placeholder="搜索" border="none" prefixIcon="search" v-model="searchTxt"
-                    disabledColor="#Fff" prefixIconStyle="font-size: 22px;color: #909399" />
-            </view>
-            <block v-if="friends.length > 0">
-                <u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
+    <view class="invite">
+        <view class="search">
+            <u--input class="search-input" placeholder="搜索" border="none" prefixIcon="search" v-model="searchTxt"
+                disabledColor="#Fff" prefixIconStyle="font-size: 22px;color: #909399" />
+        </view>
+        <block v-if="friends.length > 0">
+            <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
+                <u-checkbox-group v-if="friends.length > 0" v-model="checkboxValue" placement="column">
                     <u-index-item v-for="(item, fkey) in friends" :key="fkey">
                         <u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
                             style="padding:10rpx 30rpx" />
                         <view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
-                            @click="selectFriend(friendItem.targetId)">
-                            <u-checkbox :customStyle="{marginBottom: '8px'}" :name="friendItem.targetId" />
-                            <u-avatar class="avatar-img" size="40" shape="square" :src="contact(friendItem.targetId).portraitUrl" />
+                            @click="addContact(friendItem.targetId)">
+                            <u-checkbox :name="friendItem.targetId" shape="square" activeColor="#34ce98"
+                                style="margin-right: 20rpx;" />
+                            <u-avatar class="avatar-img" size="40" shape="square"
+                                :src="contact(friendItem.targetId).portraitUrl" />
                             <view class="info">
                                 <view class="name">{{ contact(friendItem.targetId).name }}</view>
+                                <!-- <view class="address">Hash:{{ friendItem.address }}</view> -->
                             </view>
                         </view>
                     </u-index-item>
                 </u-checkbox-group>
-            </block>
-            <view class="no-lists" v-else>
-                <u-image class="cover" radius="4" width="400rpx" height="400rpx"
-                    :src="searchTxt=== '' ? require('@/static/imgs/no-friend.png') :require('@/static/imgs/no-search.png')"
-                    :lazy-load="true" />
-                <span>{{searchTxt=== ''?'暂无好友列表~':'暂无搜索内容~'}}</span>
-            </view> -->
-        <button type="default" @click="onInvite">确定</button>
-        <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
-            <u-checkbox-group v-if="friends.length > 0" v-model="checkboxValue" placement="column">
-                <u-index-item v-for="(item, fkey) in friends" :key="fkey">
-                    <u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
-                        style="padding:10rpx 30rpx" />
-                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
-                        @click="addContact(friendItem.targetId)">
-                        <u-checkbox :name="friendItem.targetId" shape="circle" />
-                        <u-avatar class="avatar-img" size="40" shape="square"
-                            :src="contact(friendItem.targetId).portraitUrl" />
-                        <view class="info">
-                            <view class="name">{{ contact(friendItem.targetId).name }}</view>
-                            <!-- <view class="address">Hash:{{ friendItem.address }}</view> -->
-                        </view>
-                    </view>
-                </u-index-item>
-            </u-checkbox-group>
-        </u-index-list>
+            </u-index-list>
+            <view class="bottom">
+                <span class="onInvite" @click="onInvite">完成<span>{{`(${checkboxValue.length})` || ''}}</span></span>
+            </view>
+        </block>
+        <view class="no-lists" v-else>
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+                :src="searchTxt=== '' ? require('@/static/imgs/no-friend.png') :require('@/static/imgs/no-search.png')"
+                :lazy-load="true" />
+            <span>{{searchTxt=== ''?'暂无好友列表~':'暂无搜索内容~'}}</span>
+        </view>
     </view>
 </template>
 
 <script>
     import {
         getFriendsLetter,
-        inviteGroupUser
-
+        inviteGroupUser,
+        getGroupUsers
     } from '@/apis/interfaces/im';
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
 
     export default {
         data() {
             return {
-                // indexs: [],
-                // friends: [],
-                // pendingCount: 0,
-                // searchTxt: '',
-                // checkboxValue: [],
-                targetId: '',
+                searchTxt: '',
+                targetId: '',
                 indexs: [],
                 friends: [],
-                checkboxValue: []
+                checkboxValue: [],
+                selectValue:[]
             };
         },
         computed: {
@@ -78,19 +63,6 @@
                 }
             }
         },
-        // onLoad() {
-        //     this.getFriendList()
-        //     this.checkNewFriendPending()
-        //     uni.$on('onContactNotification', this.checkNewFriendPending)
-        // },
-        // methods: {
-        //     // group事件
-        //     checkboxChange(n) {
-        //         console.log('change', n);
-        //     },
-        //     getFriendList() {
-        //         getFriendsLetter().then(res => {
-        //             console.log(res)
         onLoad(e) {
             this.targetId = e.targetId
             this.getFriendList()
@@ -101,34 +73,30 @@
                     this.indexs = res.indexList
                     this.friends = res.itemArr
                 })
+                getGroupUsers(this.targetId).then(res => {
+                    res.map(res => {
+                        this.checkboxValue.push(res.targetId + "")
+                        this.selectValue.push(res.targetId+"")
+                    })
+                })
             },
-            
-            // selectFriend(targetId) {
-            //     console.log(targetId,typeof targetId)
-            //     let arr = this.checkboxValue
-            //     let index = arr.findIndex(item => item === targetId)
-            //     if(index>0){
-            //         console.log('选择了再次点击清除数据le')
-                    
-            //     }else{
-            //         console.log('没有选择过，添加数据')
-                    
-            //     }
-                
-            //     console.log(this.checkboxValue,index)
-            //     console.log('奥克兰打开',targetId)
-            // },
+            // 点击名字新增或删除选中数据
             addContact(targetId) {
-                if (!this.checkboxValue.find(item => item == targetId)) {
+                const index = this.checkboxValue.findIndex(item => item == targetId)
+                if (index === -1) {
                     this.checkboxValue.push(targetId)
                 } else {
-                    const index = this.checkboxValue.findIndex(item => item == targetId)
-                    this.checkboxValue = this.checkboxValue.splice(index, 1)
+                    this.checkboxValue.splice(index, 1)
                 }
             },
             onInvite() {
                 inviteGroupUser(this.targetId, this.checkboxValue).then(res => {
-                    uni.navigateBack()
+                    console.log(res,'res')
+                    uni.navigateBack({
+                        delta: 1,
+                        animationType: 'pop-out',
+                        animationDuration: 200
+                    });
                 }).catch(err => {
                     uni.showToast({
                         icon: 'none',
@@ -198,18 +166,61 @@
         background-color: #fff;
     }
 
-    .search {
-        background-color: #fff;
-        padding: 30rpx;
+    .invite {
+        position: relative;
+        padding: 100rpx 0;
+        box-sizing: border-box;
+        z-index: 0;
 
-        .search-input {
-            padding: 10rpx $padding;
+        .bottom {
+            position: fixed;
+            bottom: 0;
             width: 100%;
+            height: 120rpx;
+            background-color: $window-color;
+            z-index: 100;
+            color: #fff;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            box-sizing: border-box;
+            padding-right: 30rpx;
+            padding-bottom: 10rpx;
+
+            .onInvite {
+                background-color: $main-color;
+                font-size: $title-size;
+                display: inline-block;
+                padding: 10rpx 30rpx;
+                border-radius: 10rpx;
+
+                span {
+                    font-size: $title-size - 2;
+                }
+            }
         }
 
-        .searchTxt {}
+        .search {
+            background-color: #fff;
+            padding: 30rpx;
+            position: fixed;
+            width: 100%;
+            box-sizing: border-box;
+            top: 0;
+            z-index: 100;
+
+            .search-input {
+                padding: 10rpx $padding;
+                width: 100%;
+            }
+
+            .searchTxt {}
+        }
     }
 
+
+
     .no-lists {
         padding-top: $padding * 3;
         display: flex;
diff --git a/pages/im/group/reviewed.vue b/pages/im/group/reviewed.vue
index 76ba1ff..9c6452c 100644
--- a/pages/im/group/reviewed.vue
+++ b/pages/im/group/reviewed.vue
@@ -4,10 +4,10 @@
         <view class="reviewed-item">
             <u-avatar class="avatar" src="require('@/static/user/cover.png')" shape="square" size="36" />
             <view style="flex:1;">
-                <view class="nickname"><span>{{`艾米的猫儿 `}}</span>想邀请<span>{{` 艾米的猫儿洛基艾米`}}</span>加入群聊</view>
+                <view class="nickname"><span>{{`艾米的猫儿  `}}</span>想邀请<span>{{`  用户8066`}}</span>加入群聊</view>
                 <view> 申请原因：{{`呵呵哒。。`}}</view>
             </view>
-            <view class="sure" @click="sure(2)"> 去确认 </view>
+            <view class="sure" @click="sure(2)"> 通过 </view>
         </view>
     </view>
 </template>
@@ -60,6 +60,7 @@
 
                 span {
                     color: $text-color;
+                    font-size: $title-size-m +1;
                 }
             }
 

From 0deef8bc6ad743f5f8cc62f3de0a35b3c27f979d Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 18 Feb 2022 15:12:51 +0800
Subject: [PATCH 2/3] update

---
 pages/im/group/invite.vue | 51 ++++++++++++++++++++++++++++++++-------
 utils/filters.js          | 15 ++++++------
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/pages/im/group/invite.vue b/pages/im/group/invite.vue
index dec52c5..b523d3f 100644
--- a/pages/im/group/invite.vue
+++ b/pages/im/group/invite.vue
@@ -2,18 +2,18 @@
     <view class="invite">
         <view class="search">
             <u--input class="search-input" placeholder="搜索" border="none" prefixIcon="search" v-model="searchTxt"
-                disabledColor="#Fff" prefixIconStyle="font-size: 22px;color: #909399" />
+                disabledColor="#Fff" prefixIconStyle="font-size: 22px;color: #909399" @change="onSearch" />
         </view>
         <block v-if="friends.length > 0">
             <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
                 <u-checkbox-group v-if="friends.length > 0" v-model="checkboxValue" placement="column">
                     <u-index-item v-for="(item, fkey) in friends" :key="fkey">
-                        <u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
-                            style="padding:10rpx 30rpx" />
+                        <u-index-anchor :text="indexs[fkey]" v-if="indexs[fkey]" bgColor="#ededed" height="20" size="12"
+                            color="#666" style="padding:10rpx 30rpx" />
                         <view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
                             @click="addContact(friendItem.targetId)">
-                            <u-checkbox :name="friendItem.targetId" shape="square" activeColor="#34ce98"
-                                style="margin-right: 20rpx;" />
+                            <u-checkbox :name="friendItem.targetId" shape="circle" activeColor="#34ce98"
+                                style="margin-right: 20rpx;" :disabled="canSelect(friendItem.targetId)" />
                             <u-avatar class="avatar-img" size="40" shape="square"
                                 :src="contact(friendItem.targetId).portraitUrl" />
                             <view class="info">
@@ -43,6 +43,8 @@
         inviteGroupUser,
         getGroupUsers
     } from '@/apis/interfaces/im';
+    import utils from '@/utils/index.js'
+
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
 
     export default {
@@ -51,9 +53,11 @@
                 searchTxt: '',
                 targetId: '',
                 indexs: [],
+                orignalIndexs: [],
                 friends: [],
+                orignalFriends: [],
                 checkboxValue: [],
-                selectValue:[]
+                selectValue: []
             };
         },
         computed: {
@@ -68,15 +72,44 @@
             this.getFriendList()
         },
         methods: {
+            onSearch(val) {
+                if (val) {
+                    var ix = []
+                    this.friends = this.orignalFriends.map((list, index) => {
+                        const resList = list.filter(item => item.name.indexOf(val) > 0)
+                        if (resList.length > 0) {
+                            this.indexs.filter((t, i) => i == index)
+                        }
+                        // if (resList.length > 0) {
+                        //     ix = this.orignalIndexs.map((t, i) => {
+                        //         if (i == index) {
+                        //             return t
+                        //         }
+                        //     }).filter(Boolean)
+                        // }
+                        return resList
+                    })
+
+                    console.log( this.indexs);
+                } else {
+                    this.friends = this.orignalFriends
+                    this.indexs = this.orignalIndexs
+                }
+            },
+            canSelect(targetId) {
+                return utils.inArray(targetId, this.selectValue)
+            },
             getFriendList() {
                 getFriendsLetter().then(res => {
                     this.indexs = res.indexList
                     this.friends = res.itemArr
+                    this.orignalFriends = res.itemArr
+                    this.orignalIndexs = res.indexList
                 })
                 getGroupUsers(this.targetId).then(res => {
                     res.map(res => {
-                        this.checkboxValue.push(res.targetId + "")
-                        this.selectValue.push(res.targetId+"")
+                        this.checkboxValue.push(String(res.targetId))
+                        this.selectValue.push(String(res.targetId))
                     })
                 })
             },
@@ -91,7 +124,7 @@
             },
             onInvite() {
                 inviteGroupUser(this.targetId, this.checkboxValue).then(res => {
-                    console.log(res,'res')
+                    console.log(res, 'res')
                     uni.navigateBack({
                         delta: 1,
                         animationType: 'pop-out',
diff --git a/utils/filters.js b/utils/filters.js
index d541c07..cfab948 100644
--- a/utils/filters.js
+++ b/utils/filters.js
@@ -16,18 +16,18 @@ export const timeCustomCN = (val) => {
     let currentMonth = currentDate.getMonth() + 1;
     let date = val.substring(0, 19);
     date = date.replace(/-/g, '/');
-    let valDate = new Date(date);
+    let valDate = new Date(date);
     let valD = valDate.getDate();
     let valYear = valDate.getFullYear();
     let valMonth = valDate.getMonth() + 1;
     // 判断是否属于今天，计算时分
-    let difftime = (currentDate - valDate) / 1000;
-    if (currentYear === valYear && currentMonth === valMonth && currentD === valD) {
-        let minute = parseInt(difftime % 3600 / 60);
-        if (minute <= 60) {
-            return minute === 0 ? '刚刚' : minute + '分钟前';
+    let difftime = (currentDate - valDate) / 1000;
+    if (currentYear === valYear && currentMonth === valMonth && currentD === valD) {
+        if (difftime < 3600) {
+            let minute = parseInt(difftime % 3600 / 60);
+            return minute === 0 ? '刚刚' : minute + '分钟前';
         } else {
-            return (minute * 60).toFixed(0) + '小时前';
+            return (difftime / 3600).toFixed(0) + '小时前';
         }
     } else {
         // 计算天
@@ -37,7 +37,6 @@ export const timeCustomCN = (val) => {
             let days = Math.abs(currentDate.getTime() - valDate.getTime()) / (1000 * 60 * 60 * 24);
             return Math.ceil(days) + '天前';
         }
-
     }
 }
 

From e95721763528b5c586f7c82601db20223a55535e Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 18 Feb 2022 17:02:32 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=88=B0=E5=BA=95=EF=BC=8C=E5=A6=82=E6=9E=9C?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=95=B0=E6=8D=AE=E8=BE=83=E7=9F=AD=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=EF=BC=8C=E8=BF=98=E6=B2=A1=E6=9C=89=E5=A5=BD?=
 =?UTF-8?q?=E5=8A=9E=E6=B3=95=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                |   5 +-
 pages/im/private/chat.vue | 129 +++++++++++++++++++-------------------
 2 files changed, 69 insertions(+), 65 deletions(-)

diff --git a/pages.json b/pages.json
index 6179384..79e4cef 100644
--- a/pages.json
+++ b/pages.json
@@ -374,7 +374,10 @@
             "path": "pages/im/private/chat",
             "style": {
                 "navigationBarTitleText": "聊天",
-                "navigationBarBackgroundColor": "#F3F6FB"
+                "navigationBarBackgroundColor": "#F3F6FB",
+                "app-plus": {
+                    "bounce": "none"
+                }
             }
         },
         {
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index ec7131d..c49c8b7 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -1,29 +1,31 @@
 <template>
     <view class="chat">
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
         <!-- chat -->
         <view class="body">
-            <view class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="time">{{ item.sentTime|timeCustomCN }}</view>
-                <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
-                    <u-avatar class="avatar" size="40" shape="square"
-                        @click="showUser(item.senderUserId, item.messageDirection)"
-                        :src="contact(item.senderUserId).portraitUrl" />
-                    <view class="msg">
-                        <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" />
-                        <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" />
-                        <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" />
-                        <view class="state" v-if="item.messageDirection == 1">
-                            <text
-                                :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
+            <view class="scroll">
+                <view class="cell" v-for="(item, index) in messages" :key="index">
+                    <view class="time">{{ item.sentTime|timeCustomCN }}</view>
+                    <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
+                        <u-avatar class="avatar" size="40" shape="square"
+                            @click="showUser(item.senderUserId, item.messageDirection)"
+                            :src="contact(item.senderUserId).portraitUrl" />
+                        <view class="msg">
+                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" />
+                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" />
+                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" />
+                            <view class="state" v-if="item.messageDirection == 1">
+                                <text
+                                    :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
+                            </view>
                         </view>
                     </view>
                 </view>
             </view>
         </view>
-        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
     </view>
 </template>
 
@@ -108,10 +110,9 @@
                     this.latestMessage.sentTime || 0,
                     1,
                     false,
-                    (messages) => {
-                        console.log(messages);
+                    (messages) => {
                         this.messages.unshift(...messages)
-                        // this.scrollBottom()
+                        this.scrollBottom()
                     })
             },
             // 获取消息列表
@@ -124,7 +125,7 @@
                     true,
                     (messages) => {
                         this.messages = messages
-                        // this.scrollBottom()
+                        this.scrollBottom()
                     })
             },
             // 展示好友信息,  type 1 是自己， 2 是对方
@@ -145,13 +146,6 @@
                     // 更新badge提醒数量
                     im.setNotifyBadge()
                 }
-                setTimeout(() => {
-                    let el = this.$refs.chatBottom
-                    ChatList.scrollToElement(el, {
-                        offset: 0,
-                        animated: false
-                    })
-                }, 50)
             }
         }
     }
@@ -160,65 +154,72 @@
 <style scoped lang="scss">
     /* 窗口 */
     .chat {
+        background: $window-color;
         height: 100vh;
         display: flex;
-        flex-direction: column;
-        overflow: scroll;
+        flex-direction: column-reverse;
 
         .body {
+            overflow: scroll;
             flex: 1;
+            height: 0;
             display: flex;
             flex-direction: column-reverse;
-            justify-content: flex-end;
 
-            .cell {
-                padding: 10rpx 30rpx;
+            .scroll {
+                display: flex;
+                flex-direction: column-reverse;
+                justify-content: flex-end;
 
-                .time {
-                    text-align: center;
-                    font-size: 24rpx;
-                    color: #666;
-                }
+                .cell {
+                    padding: 10rpx 30rpx;
 
-                .cell-item {
-                    display: flex;
-                    width: 690rpx;
-                    justify-content: flex-start;
-
-                    &.left {
-                        flex-direction: row;
+                    .time {
+                        text-align: center;
+                        font-size: 24rpx;
+                        color: #666;
                     }
 
-                    &.right {
-                        flex-direction: row-reverse;
+                    .cell-item {
+                        display: flex;
+                        width: 690rpx;
+                        justify-content: flex-start;
 
-                        .state {
+                        &.left {
                             flex-direction: row;
-                            justify-content: flex-end;
                         }
-                    }
 
-                    .msg {
-                        margin: 0 20rpx;
+                        &.right {
+                            flex-direction: row-reverse;
 
-                        .state {
-                            padding-top: 10rpx;
-
-                            .state-text {
-                                font-size: $title-size-m - 2;
-                                color: rgba($color: $main-color, $alpha: 0.3)
+                            .state {
+                                flex-direction: row;
+                                justify-content: flex-end;
                             }
+                        }
 
-                            .state-text-active {
-                                font-size: $title-size-m - 2;
-                                color: #cecece;
+                        .msg {
+                            margin: 0 20rpx;
+
+                            .state {
+                                padding-top: 10rpx;
+
+                                .state-text {
+                                    font-size: $title-size-m - 2;
+                                    color: rgba($color: $main-color, $alpha: 0.3)
+                                }
+
+                                .state-text-active {
+                                    font-size: $title-size-m - 2;
+                                    color: #cecece;
+                                }
                             }
                         }
                     }
-                }
 
-                .cell-footer {
-                    height: 20rpx;
+                    .cell-footer {
+                        height: 20rpx;
+                    }
                 }
             }
         }