更新优化

src/layout/components/components/class-list.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="class-list">
+    <div class="searchContainer">
+      <div class="search">
+        <el-input
+          placeholder="搜索"
+          v-model="search"
+          size="mini"
+          :border="false"
+          clearable
+        />
+        <el-button type="primary" round size="mini" @click="onSearch"
+          >搜索</el-button
+        >
+      </div>
+    </div>
     <van-list
       v-model="loading"
       :finished="finished"
@@ -57,6 +71,7 @@ export default {
   name: "class-list",
   data() {
     return {
+      search: "",
       groupLogo,
       teacherLogo,
       list: [],
@@ -68,11 +83,16 @@ export default {
     this.onLoad();
   },
   methods: {
+    onSearch() {
+      this.finished = false;
+      this.list = [];
+      this.onLoad();
+    },
     async onLoad() {
       try {
         this.loading = true;
-        await queryGroupList().then(res => {
-          console.log(res, "res");
+        await queryGroupList({ search: this.search }).then(res => {
+          // console.log(res, "res");
           this.list = res.data;
           this.loading = false;
           this.finished = true;
@@ -109,6 +129,29 @@ export default {
     background: #f5f5f5;
   }
 }
+
+.searchContainer {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  width: 100%;
+  padding: 10px;
+  background: #fff;
+  border-bottom: 1px solid #ebedf0;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
+}
+.search {
+  display: flex;
+  background: #f7f7f7;
+  border-radius: 40px;
+  padding: 3px 5px 3px 0;
+  ::v-deep .el-input {
+    input {
+      border: 0;
+      background: transparent;
+    }
+  }
+}
 .class-content {
   padding-left: 10px;
   .username {

src/layout/components/components/contacts-list.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="contact-list">
+    <div class="searchContainer">
+      <div class="search">
+        <el-input
+          placeholder="搜索"
+          v-model="search"
+          size="mini"
+          :border="false"
+          clearable
+        />
+        <el-button type="primary" round size="mini" @click="onSearch"
+          >搜索</el-button
+        >
+      </div>
+    </div>
     <van-list
       v-model="loading"
       :finished="finished"
@@ -58,6 +72,7 @@ export default {
   name: "contact-list",
   data() {
     return {
+      search: "",
       groupLogo,
       teacherLogo,
       list: [],
@@ -69,10 +84,15 @@ export default {
     this.onLoad();
   },
   methods: {
+    onSearch() {
+      this.finished = false;
+      this.list = [];
+      this.onLoad();
+    },
     async onLoad() {
       try {
         this.loading = true;
-        await queryFriendList().then(res => {
+        await queryFriendList({ search: this.search }).then(res => {
           this.list = res.data;
           this.loading = false;
           this.finished = true;
@@ -91,6 +111,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.contact-list {
+  // position: relative;
+}
 .contact-item {
   cursor: pointer;
   &.isHover,
@@ -98,6 +121,28 @@ export default {
     background: #f5f5f5;
   }
 }
+.searchContainer {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  width: 100%;
+  padding: 10px;
+  background: #fff;
+  border-bottom: 1px solid #ebedf0;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
+}
+.search {
+  display: flex;
+  background: #f7f7f7;
+  border-radius: 40px;
+  padding: 3px 5px 3px 0;
+  ::v-deep .el-input {
+    input {
+      border: 0;
+      background: transparent;
+    }
+  }
+}
 .contact-content {
   padding-left: 10px;
   .username {

src/layout/components/components/message-item.vue

@@ -29,6 +29,7 @@
                 class="m-image"
                 :src="addBase64head(message.content.content)"
                 @error="onError"
+                :preview-src-list="[message.content.imageUri]"
               />
               <!-- :preview-src-list="[addBase64head(message.content.content)]" -->
             </div>
@@ -345,6 +346,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.el-image-viewer__close {
+  display: block !important;
+}
 .send-item {
   display: flex;
   padding: 6px 20px;

src/layout/components/modal/chat-model.vue

@@ -55,7 +55,10 @@
       </div>
     </div>
     <el-container style="margin-top: 56px">
-      <el-aside width="280px" style="border-right: 1px solid #f7f7f7;">
+      <el-aside
+        width="280px"
+        style="border-right: 1px solid #f7f7f7;position: relative;"
+      >
         <conversation-list
           ref="conversationList"
           v-show="active === 'conversation'"