0729-0205-h01

src/components/imFloat/imFloat.vue

@@ -30,15 +30,39 @@
                                 <div :class="orderData.tab=='user'?'aside-tab-items active':'aside-tab-items'" @click="handleClick('user')">当前咨询</div>
                                 <div :class="orderData.tab=='order'?'aside-tab-items active':'aside-tab-items'" @click="handleClick('order')">历史咨询</div>
                             </div> -->
+                            <div class="chat-search">
+                                <el-input v-model="chatData.key" placeholder="用户昵称" clearable :style="{ width: '100%' }"></el-input>
+                                <el-button @click="searchChat">搜索</el-button>
+                            </div>
                             <el-main class="nopadding">
-                                <div class="chat-contact">
+                                <div  v-if="chatData.loading && chatContact.length==0">
+                                    <div class="chat-loading-sk" v-for="(item,indx) in 10">
+                                        <el-skeleton :animated="true">
+                                            <template #template>
+                                                <div class="chat-sk-flex">
+                                                    <el-skeleton-item variant="image" style="width: 40px; height: 40px" />
+                                                    <div class="sk-right">
+                                                        <el-skeleton-item variant="h3" style="width: 50%" />
+                                                        <div style="margin-top: 5px;">
+                                                            <el-skeleton-item variant="text" style="width: 30%;" />
+                                                        </div>
+                                                    </div>
+                                                    <div class="time">
+                                                        <el-skeleton-item variant="text" />
+                                                    </div>
+                                                </div>
+                                            </template>
+                                        </el-skeleton>
+                                    </div>
+                                </div>
+                                <div class="chat-contact" v-else>
                                     <div :class="checkChat==index?'contact-item active':'contact-item'" v-for="(item,index) in chatContact" :key="index" @click="checkChatItem(index)">
-                                            <div class="img">
-                                                <el-image :src="item.user.avatar" fit="contain" style="width: 40px; height: 40px"></el-image>
-                                                <span class="last-num" v-if="item.last.num > 0">{{item.last.num}}</span>
-                                            </div>
-                                            <div class="kefu-store">
-                                            <div class="name">{{item.user.nickname}}</div>
+                                        <div class="img">
+                                            <el-image :src="item.user.avatar" fit="contain" style="width: 40px; height: 40px"></el-image>
+                                            <span class="last-num" v-if="item.last.num > 0">{{item.last.num}}</span>
+                                        </div>
+                                        <div class="kefu-store">
+                                            <div class="name">{{item.user.nickname?item.user.nickname:'-'}}</div>
                                             <div class="desc" v-if="item.last.type=='text'">{{item.last.content}}</div>
                                             <div class="desc" v-if="item.last.type=='order'">[订单消息]</div>
                                             <div class="desc" v-if="item.last.type=='image'">[图片消息]</div>
@@ -52,6 +76,12 @@
                                     </div>
                                 </div>
                             </el-main>
+                            <el-footer>
+                                <div class="chet-more">
+                                    <el-button text @click="loadMoreChat" v-if="!chatData.end">{{chatData.loading?'加载中':'加载更多...'}}</el-button>
+                                    <el-button text v-else>没有更多了</el-button>
+                                </div>
+                            </el-footer>
                         </el-container>
                     </el-aside>
                     <el-container v-if="chatItem">
@@ -390,6 +420,14 @@ export default {
             msgSize:20,
             orderSize:10,
             chatContact:[],
+            chatData:{
+                page:1,
+                size:10,
+                loading:false,
+                total:0,
+                end:false,
+                key:""
+            },
             checkChat:null,
             chatItem:null,
             emojiList:[],
@@ -870,18 +908,32 @@ export default {
                 this.unreadCount = 0
             }
             if (this.chatContact.length == 0) {
-                this.loadMsg = true;
-                var resp = await this.$API.chat.list.get({page:this.page,pageSize:this.size})
-                this.loadMsg = false;
-                if (resp.code == 0) {
-                    return this.$message.error(resp.msg)
-                }
-                this.chatContact = this.chatContact.concat(resp.data.rows)
+                this.loadMoreChat();
             }
             // this.chatItem = this.chatContact[0]
             // this.userId = this.chatItem.openid;
             // this.getMsgData();
         },
+        async loadMoreChat(){
+            this.chatData.loading = true;
+            var resp = await this.$API.chat.list.get({page:this.chatData.page,pageSize:this.chatData.size,key:this.chatData.key})
+            this.chatData.loading = false;
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.chatContact = this.chatContact.concat(resp.data.rows)
+            if (resp.data.total > this.chatContact.length) {
+                this.chatData.page++;
+                this.chatData.end = false;
+            } else {
+                this.chatData.end = true;
+            }
+        },
+        searchChat(){
+            this.chatData.page = 1;
+            this.chatContact = [];
+            this.loadMoreChat()
+        },
         /**
          * 加载更多
          */
@@ -1017,6 +1069,12 @@ export default {
 <style scoped lang="scss">
 @import '@/style/index.scss';
 
+.chet-more{display: flex;align-items: center;justify-content: center;}
+.chat-search{padding: 10px;display: flex;align-items: center;justify-content: space-between;gap: 10px;border-bottom: 1px solid #f8f8f8;}
+.chat-sk-flex{display: flex;align-items: center;gap: 10px;padding: 10px;flex: 1;border-bottom: 1px solid #f8f8f8;}
+.chat-sk-flex .sk-right{flex: 1;}
+.chat-sk-flex .time{margin-left: auto;margin-right: 0;width: 20px;}
+
 .order-info-user{background-color: #fff;padding: 10px;margin-top: 10px;}
 .order-info-user .title{font-size: 16px;color: #333;font-weight: bold;padding-bottom: 10px;border-bottom: 1px solid #f8f8f8;}
 .order-info-user .info-item{height: 40px;line-height: 40px;font-size: 12px;display: flex;align-items: center;border-bottom: 1px solid #f8f8f8;}