会话存档

src/project/pidu/AppConversation/AppConversation.vue

@@ -1,283 +1,309 @@
 <template>
-  <div class="AppConversation">
+  <section class="AppConversation">
     <AiTopFixed>
-      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6"
+      <u-search v-model="keyword" :clearabled="true" placeholder="搜索" :show-action="false" bg-color="#F5F5F5"
-        inactive-color="#A1C1E8" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#ffffff " @change="change">
+        search-icon-color="#999" color="#999" height="58" @search="getUserListInit" @clear="getDeptListInit">
-      </u-tabs>
+      </u-search>
-      <div class="top-search">
+      <div class="hint">
-        <div class="left">
+        <span v-for="(item, index) in selectDeptPath" :key="index">
-          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
+          <span v-if="index>0" class="mar-h4">/</span>
-            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
+          <span class="color-3F8DF5" @click="deptNameClick(item, index)">{{ item.name }}</span>
-            <span v-else style="color:#999;">部门名称</span>
+        </span>
-            <div class="clear-btn" v-if="deptUserList.length" @click.stop="clearDept">
-              <img src="./img/del-icon.png" alt="" class="del-icon">
-            </div>
-            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;" v-else/>
-           
-          </AiPagePicker>
-        </div>
-        <div class="right">
-          <u-search v-model="keyword" :clearabled="true" :placeholder="currentTabs != 1 ? '请输入群名称' : '请输入昵称'" :show-action="false" bg-color="#F5F5F5"
-            search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
-          </u-search>
-        </div>
       </div>
-      <!-- <div class="top-search">
-        <div class="left">
-          <u-search v-model="keyword" :clearabled="true" :placeholder="currentTabs != 1 ? '请输入群名称' : '请输入昵称'" :show-action="false" bg-color="#F5F5F5"
-            search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
-          </u-search>
-        </div>
-      </div>
-      <div class="top-select">
-        <div class="item">
-          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
-            <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
-            <span v-else style="color:#999;">行政区划</span>
-            <u-icon name="arrow-down" color="#999" size="28" style="margin-left: 4px" />
-          </AiAreaPicker>
-        </div>
-        <div class="item">
-          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
-            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
-            <span v-else style="color:#999;">部门名称</span>
-            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;"/>
-          </AiPagePicker>
-        </div>
-      </div> -->
     </AiTopFixed>
-    <div class="user-list" v-if="list.length">
+    <div class="header-middle">
-      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
+      <div class="cards" v-for="item in treeList" :key="item.id" @click="itemClick(item)">
-        <img :src="item.toUserAvatar" alt="" v-if="currentTabs == 1">
+        <div class="imges">
-        <img src="./img/group-img.png" alt="" v-else>
+          <img src="./img/dept-img.png" alt="" class="avatras"/>
-        <div class="item-border">
+        </div>
-          <div class="flex-left">
+        <div class="rightes">
-            <p>{{currentTabs == 1 ? item.toUserName : item.roomName}}</p>
+          <div class="applicationNames">{{ item.name }}</div>
-          </div>
-          <div class="flex-right" :class="`type`+item.userType" v-if="item.userType > 0">{{item.userType == 1 ? '内部' : '外部'}}</div>
         </div>
       </div>
+      <div v-if="userList.length">
+        <div class="userCards" v-for="e in userList" :key="e.id" @click="toList(e)">
+          <div class="imges">
+            <img :src="e.avatar" alt="" class="avatras" v-if="e.avatar">
+            <img src="./img/user-img.png" alt="" class="avatras" v-else/>
+          </div>
+          <div class="rights fill">
+            <div class="applicationNames" v-html="brightenKeyword(e.name, keyword)"></div>
+            <div class="idNumbers">{{ e.mobile }}</div>
+          </div>
+        </div>
+      </div>
+      <AiEmpty description="暂无数据" v-if="!hasData"/>
     </div>
-    <AiEmpty v-else/>
+  </section>
-  </div>
 </template>
 
 <script>
-import {mapState} from "vuex";
 export default {
   name: "AppConversation",
   appName: "会话存档",
   data() {
     return {
-      tabList: [
+      selected: [],
-        {name: '群聊会话'},
+      allData: null,
-        {name: '私聊会话'},
+      treeList: [],
-      ],
+      selectDeptPath: [],
-      currentTabs: 0,
+      userList: [],
-      barStyle: {
+      keyword: ''
-        'width': '24px',
+    }
-        'height': '2px',
-        'border-radius': '0',
-        'bottom': '5px'
-      },
-      activeStyle: {
-        'font-weight' : '400',
-      },
-      keyword: '',
-      areaId: '',
-      areaName: '',
-      current: 1,
-      pages: 2,
-      list: [],
-      deptUserList: []
-    };
   },
   computed: {
-    ...mapState(['user']),
+    hasData() {
+      return this.treeList?.length > 0 || this.userList?.length > 0
+    }
   },
   onLoad() {
-    this.areaId = this.user.areaId
+    this.getAllDepts()
-    this.areaName = this.user.areaName
-    // this.deptUserList = [{id: this.user.departId, name: this.user.departName}]
-    this.getList()
-  },
-  onShow() {
-    
   },
   methods: {
-    clearDept() {
+    isSelected(id, corpId) {
-      this.deptUserList = []
+      return !!this.selected.find(e => e.id == id && e.corpId == corpId)
-      this.getListInit()
     },
-    change(index) {
+    getAllDepts() {
-      this.keyword = ''
+      this.$http.post('/app/wxcp/wxdepartment/listAllByCorp').then((res) => {
-      this.currentTabs = index
+        if (res?.data) {
-      this.getListInit()
+          let parents = res.data.map(e => e.parentid)
-    },
+          this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id), isChecked: this.isSelected(e.id, e.corpId)}))
-    getListInit() {
+          this.deptInit()
-      this.current = 1
-      this.pages = 2
-      this.list = []
-      this.getList()
-    },
-    areaSelect(e) {
-      this.areaId = e
-      this.getListInit()
-    },
-    deptSelect(e) {
-      this.deptUserList = e
-      this.getListInit()
-    },
-    getList() {
-      if(this.current > this.pages)  return
-      this.$http.post(`/app/appsessionarchiveindex/listByUser`, null, {
-        params: {
-          current: this.current,
-          size: 15,
-          type: this.currentTabs == 1 ? 0 : 1,
-          // areaId: this.areaId,
-          toUserName: this.currentTabs == 1 ? this.keyword : '',
-          roomName: this.currentTabs == 1 ? '' : this.keyword,
-          departmentId: this.deptUserList.length ? this.deptUserList[0].id : ''
-        }
-      }).then(res=> {
-        if(res?.data) {
-          res.data.records.map((item) => {
-            if(item.type == 1) {
-              item.userType = item.roomType
-            }else {
-              item.userType = item.toUserType
-            }
-          })
-          this.list = this.current > 1 ? [...this.list, ...res.data.records]: res.data.records
-          this.pages = res.data.pages
         }
       })
     },
-    toDetail(row) {
+    deptInit() {
-      var query = row.type == 1 ? `?roomId=${row.roomId}` : `?toUserId=${row.toUserId}`
+      this.treeList = this.allData.filter(e => !e.parentid)
-      uni.navigateTo({ url: `./conversationDetail${query}&type=${row.type}`})
+      this.selectDeptPath = [{name: "可选范围", id: ''}]
+    },
+    itemClick({id, name, corpId}) {
+      let index = this.selectDeptPath.findIndex(e => e.id == id && e.corpId == corpId)
+      if (index == -1) {
+        this.selectDeptPath.push({name, id, corpId})
+        this.getDeptsAndUsersByParent(id, corpId)
+      }
+    },
+    getDeptsAndUsersByParent(departmentId, corpId) {
+      this.treeList = this.allData.filter(e => e.parentid == departmentId && e.corpId == corpId)
+      this.userList = []
+      this.$http.post(`/app/wxcp/wxuser/listByDeptId`, null, {
+        params: {departmentId, status: 1, cid: corpId, name: this.keyword}
+      }).then(res => {
+        if (res?.data) {
+          if(this.keyword) {
+            res.data.map((item) => {
+              var nameList = item.name.split(this.keyword)
+              console.log(nameList)
+            })
+          }
+          
+          this.userList = res.data
+        }
+      })
+    },
+    getRedWords(contentText, keyword) {
+      let keywordArray = keyword.split('');
+      let wordsArray = [];
+      for(let key of keywordArray){
+        if(contentText.includes(key)){
+          wordsArray.push(key)
+        }
+      }
+      return wordsArray;
+    },
+    brightenKeyword(contentText, keyword) {
+      let wordsArray = this.getRedWords(contentText, keyword);
+      let res = contentText;//res的初始值是不带任何红色格式的
+      //遍历相同字数组，
+      for(let word of wordsArray){
+        const Reg = new RegExp(word, 'i');
+        //替换每一个相同字
+        res = res.replace(Reg, `<span style="color: #1365DD;">${word}</span>`);
+      }
+      return res;
+    },
+    getUserListInit() {
+      var e = this.selectDeptPath[this.selectDeptPath.length - 1]
+      if(!e.id) {  //第一级 根节点
+        return this.$u.toast('请选择部门后再搜索人员')
+      }
+      this.getDeptsAndUsersByParent(e.id, e.corpId)
+    },
+    getDeptListInit() {
+      var e = this.selectDeptPath[this.selectDeptPath.length - 1]
+      if(!e.id) {  //第一级
+        this.treeList = this.allData.filter(e => !e.parentid)
+        this.userList = []
+      }else {
+        this.getDeptsAndUsersByParent(e.id || '', e.corpId || '')
+      }
+    },
+    deptNameClick(row, index) {
+      this.userList = []
+      if (!index) { //第一级别
+        this.deptInit()
+      } else {
+        let length = this.selectDeptPath.length - index
+        this.selectDeptPath.splice(index + 1, length)
+        this.getDeptsAndUsersByParent(row.id, row.corpId)
+      }
+    },
+    itemCheck(row, kind) {
+      row.isChecked = !row.isChecked
+      if (row.isChecked) {
+        this.selected.push({...row, kind})
+      } else {
+        let index = this.selected.findIndex(e => e.id == row.id)
+        this.selected.splice(index, 1)
+      }
+      this.$forceUpdate()
+    },
+    toList(row) {
+      uni.navigateTo({url: `./list?id=${row.id}`})
     }
-  },
-  onReachBottom() {
-    this.current ++
-    this.getList()
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
 .AppConversation {
   height: 100%;
-  ::v-deep .AiTopFixed {
+  background: #fff;
-    .placeholder {
+
-      .content {
+  .header-top {
-        padding: 0 !important;
+    background: #fff;
-      }
-    }
-    .fixed {
-      margin: 0 !important;
-      .content {
-        padding: 0 !important;
-      }
-    }
-  }
-  .top-search {
     padding: 20px 32px;
-    display: flex;
-    .left {
-      width: 350px;
-      line-height: 64px;
-      .clear-btn {
-        display: inline-block;
-        padding: 0 16px;
-      }
-      .del-icon {
-        width: 32px;
-        height: 32px;
-        vertical-align: middle;
-      }
-    }
-    .right {
-      width: calc(100% - 350px);
-    }
   }
-  .top-select {
+
-    display: flex;
+  .header-middle {
-    padding: 28px 0;
+    // padding-bottom: 140px;
-    .item {
+
-      flex: 1;
+    .hint {
-      padding: 0 8px;
+      padding: 28px 20px 28px 32px;
-      text-align: center;
+      line-height: 56px;
-      span {
+      box-shadow: 0 1px 0 0 #e4e5e6;
-        display: inline-block;
+      font-size: 30px;
-        font-family: PingFangSC-Medium;
+      font-weight: 500;
-        font-weight: 500;
+      word-break: break-all;
-        font-size: 28px;
-        color: #666;
-        line-height: 40px;
-      }
     }
-  }
+
-  .user-list {
+    .empty-div {
-    border-top: 1px solid #eee;
+      height: 16px;
-    background-color: #fff;
+      background: #f5f5f5;
-    .item {
+    }
-      padding: 24px 0 0 32px;
+
+    .imges {
       display: flex;
-      .item-border {
+      align-items: center;
-        width: calc(100% - 112px);
+
-        padding-right: 32px;
+      .avatras {
+        width: 74px;
+        height: 74px;
+        border-radius: 8px;
+      }
+    }
+
+    .cards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+
+      img {
+        width: 74px;
+        height: 74px;
+        border-radius: 8px;
+      }
+
+      .rightes {
+        width: calc(100% - 106px);
+        display: flex;
+        align-items: center;
+        margin-left: 32px;
+        border-bottom: 1px solid #e4e5e6;
+
+        .applicationNames {
+          flex: 1;
+          min-width: 0;
+          font-size: 36px;
+          font-weight: 500;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .imgs {
+          flex-shrink: 0;
+          width: 40px;
+          height: 40px;
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .userCards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+      .rights {
         display: flex;
         justify-content: space-between;
-        border-bottom: 1px solid #eee;
+        align-items: center;
-      }
+        margin-left: 32px;
-      .flex-left {
+        border-bottom: 1px solid #e4e5e6;
-        padding-right: 8px;
+        padding-right: 40px;
-        box-sizing: border-box;
+        height: inherit;
-      }
+
-      .flex-right {
+        .applicationNames {
-        font-size: 24px;
+          font-size: 36px;
-        margin-top: 26px;
+          font-weight: 500;
-        width: 78px;
+          color: #333333;
-        height: 34px;
+          overflow: hidden;
-        line-height: 34px;
+          white-space: nowrap;
-        text-align: center;
+          text-overflow: ellipsis;
-        border-radius: 4px;
+        }
-      }
+
-      .type1 {
+        .idNumbers {
-        background-color: #EAF4FF;
+          color: #666;
-        color: #267EF0;
+        }
-      }
-      .type2 {
-        background-color: #FDEEE1;
-        color: #FB7D29;
-      }
-      img {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        margin-right: 32px;
-      }
-      p {
-        padding-bottom: 32px;
-        width: calc(100% - 112px);
-        line-height: 80px;
-        font-family: PingFangSC-Medium;
-        font-weight: 500;
-        font-size: 32px;
-        color: #333;
-        letter-spacing: 0.3px;
-        display: inline-block;
-        vertical-align: top;
-        width: 100%;
-      }
-    }
-    .item:nth-last-child(1) {
-      p {
-        border-bottom: 0;
       }
     }
   }
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 118px;
+    background: #f4f8fb;
+
+    div {
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 4px;
+      font-size: 32px;
+      color: #fff;
+      margin: 20px 34px 0 0;
+      float: right;
+    }
+  }
+
+  .color-3F8DF5 {
+    color: #3F8DF5;
+  }
+
+  .mar-h4 {
+    margin: 0 4px;
+  }
 }
-</style>
+</style>

src/project/pidu/AppConversation/conversationDetail.vue

@@ -20,12 +20,12 @@
     <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" v-if="list.length" :style="{height: scrollHeight+'px'}">
 			<div class="conversation-list">
         <div v-for="(item, index) in list" :key="index">
-          <div class="item" :class="item.userId == user.wxUserId ? 'item-right' : 'item-left'">
+          <div class="item" :class="item.userId == id ? 'item-right' : 'item-left'">
 
             <!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId == user.wxUserId"> -->
 
-            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != user.wxUserId && item.userAvatar">
+            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != id && item.userAvatar">
-            <img src="./img/user-img.png" alt="" class="user-img" v-if="item.userId != user.wxUserId && !item.userAvatar">
+            <img src="./img/user-img.png" alt="" class="user-img" v-if="item.userId != id && !item.userAvatar">
 
             <p class="user-name">{{item.userName}}<span>{{item.msgSendTime}}</span></p>
 
@@ -111,7 +111,7 @@
               </div>
 
             </div>
-            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == user.wxUserId">
+            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == id">
 
             <!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId != user.wxUserId"> -->
           </div>
@@ -158,7 +158,8 @@ export default {
       dateList: [],
       scrollTop: 0,
       scrollHeight: '',
-      preveHeight: ''
+      preveHeight: '',
+      id: ''
     };
   },
   computed: {
@@ -171,6 +172,7 @@ export default {
       this.roomId = option.roomId
     }
     this.type = option.type
+    this.id = option.id
     this.getList()
     console.log()
     this.scrollHeight = uni.getSystemInfoSync().windowHeight - 150 
@@ -234,12 +236,13 @@ export default {
           this.preveHeight = res.height  
         }).exec();
       }
-      this.$http.post(`/app/appsessionarchiveinfo/listByUser`, null, {
+      this.$http.post(`/app/appsessionarchiveinfo/list`, null, {
         params: {
           current: this.current,
           size: 10,
           msgType: this.tabList[this.currentTabs].value,
           // msgType: 'link',
+          userId: this.id,
           toUserId: this.toUserId,
           roomId: this.roomId,
           type: this.type,

src/project/pidu/AppConversation/list.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="conversation-list">
+    <AiTopFixed>
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6"
+        inactive-color="#A1C1E8" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#ffffff " @change="change">
+      </u-tabs>
+      <div class="top-search">
+        <div class="left">
+          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
+            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
+            <span v-else style="color:#999;">部门名称</span>
+            <div class="clear-btn" v-if="deptUserList.length" @click.stop="clearDept">
+              <img src="./img/del-icon.png" alt="" class="del-icon">
+            </div>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;" v-else/>
+           
+          </AiPagePicker>
+        </div>
+        <div class="right">
+          <u-search v-model="keyword" :clearabled="true" :placeholder="currentTabs != 1 ? '请输入群名称' : '请输入昵称'" :show-action="false" bg-color="#F5F5F5"
+            search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
+          </u-search>
+        </div>
+      </div>
+      <!-- <div class="top-search">
+        <div class="left">
+          <u-search v-model="keyword" :clearabled="true" :placeholder="currentTabs != 1 ? '请输入群名称' : '请输入昵称'" :show-action="false" bg-color="#F5F5F5"
+            search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
+          </u-search>
+        </div>
+      </div>
+      <div class="top-select">
+        <div class="item">
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
+            <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+            <span v-else style="color:#999;">行政区划</span>
+            <u-icon name="arrow-down" color="#999" size="28" style="margin-left: 4px" />
+          </AiAreaPicker>
+        </div>
+        <div class="item">
+          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
+            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
+            <span v-else style="color:#999;">部门名称</span>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;"/>
+          </AiPagePicker>
+        </div>
+      </div> -->
+    </AiTopFixed>
+    <div class="user-list" v-if="list.length">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
+        <img :src="item.toUserAvatar" alt="" v-if="currentTabs == 1">
+        <img src="./img/group-img.png" alt="" v-else>
+        <div class="item-border">
+          <div class="flex-left">
+            <p>{{currentTabs == 1 ? item.toUserName : item.roomName}}</p>
+          </div>
+          <div class="flex-right" :class="`type`+item.userType" v-if="item.userType > 0">{{item.userType == 1 ? '内部' : '外部'}}</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-else/>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  name: "conversationList",
+  data() {
+    return {
+      tabList: [
+        {name: '群聊会话'},
+        {name: '私聊会话'},
+      ],
+      currentTabs: 0,
+      barStyle: {
+        'width': '24px',
+        'height': '2px',
+        'border-radius': '0',
+        'bottom': '5px'
+      },
+      activeStyle: {
+        'font-weight' : '400',
+      },
+      keyword: '',
+      areaId: '',
+      areaName: '',
+      current: 1,
+      pages: 2,
+      list: [],
+      deptUserList: [],
+      id: ''
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad(options) {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    // this.deptUserList = [{id: this.user.departId, name: this.user.departName}]
+    this.id = options.id
+    this.getList()
+  },
+  onShow() {
+    document.title = '会话存档'
+  },
+  methods: {
+    clearDept() {
+      this.deptUserList = []
+      this.getListInit()
+    },
+    change(index) {
+      this.keyword = ''
+      this.currentTabs = index
+      this.getListInit()
+    },
+    getListInit() {
+      this.current = 1
+      this.pages = 2
+      this.list = []
+      this.getList()
+    },
+    areaSelect(e) {
+      this.areaId = e
+      this.getListInit()
+    },
+    deptSelect(e) {
+      this.deptUserList = e
+      this.getListInit()
+    },
+    getList() {
+      if(this.current > this.pages)  return
+      this.$http.post(`/app/appsessionarchiveindex/list`, null, {
+        params: {
+          current: this.current,
+          size: 15,
+          type: this.currentTabs == 1 ? 0 : 1,
+          // areaId: this.areaId,
+          userId: this.id,
+          toUserName: this.currentTabs == 1 ? this.keyword : '',
+          roomName: this.currentTabs == 1 ? '' : this.keyword,
+          departmentId: this.deptUserList.length ? this.deptUserList[0].id : ''
+        }
+      }).then(res=> {
+        if(res?.data) {
+          res.data.records.map((item) => {
+            if(item.type == 1) {
+              item.userType = item.roomType
+            }else {
+              item.userType = item.toUserType
+            }
+          })
+          this.list = this.current > 1 ? [...this.list, ...res.data.records]: res.data.records
+          this.pages = res.data.pages
+        }
+      })
+    },
+    toDetail(row) {
+      var query = row.type == 1 ? `?roomId=${row.roomId}` : `?toUserId=${row.toUserId}`
+      uni.navigateTo({ url: `./conversationDetail${query}&type=${row.type}&id=${this.id}`})
+    }
+  },
+  onReachBottom() {
+    this.current ++
+    this.getList()
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.conversation-list {
+  height: 100%;
+  ::v-deep .AiTopFixed {
+    .placeholder {
+      .content {
+        padding: 0 !important;
+      }
+    }
+    .fixed {
+      margin: 0 !important;
+      .content {
+        padding: 0 !important;
+      }
+    }
+  }
+  .top-search {
+    padding: 20px 32px;
+    display: flex;
+    .left {
+      width: 350px;
+      line-height: 64px;
+      .clear-btn {
+        display: inline-block;
+        padding: 0 16px;
+      }
+      .del-icon {
+        width: 32px;
+        height: 32px;
+        vertical-align: middle;
+      }
+    }
+    .right {
+      width: calc(100% - 350px);
+    }
+  }
+  .top-select {
+    display: flex;
+    padding: 28px 0;
+    .item {
+      flex: 1;
+      padding: 0 8px;
+      text-align: center;
+      span {
+        display: inline-block;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 28px;
+        color: #666;
+        line-height: 40px;
+      }
+    }
+  }
+  .user-list {
+    border-top: 1px solid #eee;
+    background-color: #fff;
+    .item {
+      padding: 24px 0 0 32px;
+      display: flex;
+      .item-border {
+        width: calc(100% - 112px);
+        padding-right: 32px;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #eee;
+      }
+      .flex-left {
+        padding-right: 8px;
+        box-sizing: border-box;
+      }
+      .flex-right {
+        font-size: 24px;
+        margin-top: 26px;
+        width: 78px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        border-radius: 4px;
+      }
+      .type1 {
+        background-color: #EAF4FF;
+        color: #267EF0;
+      }
+      .type2 {
+        background-color: #FDEEE1;
+        color: #FB7D29;
+      }
+      img {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        margin-right: 32px;
+      }
+      p {
+        padding-bottom: 32px;
+        width: calc(100% - 112px);
+        line-height: 80px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 32px;
+        color: #333;
+        letter-spacing: 0.3px;
+        display: inline-block;
+        vertical-align: top;
+        width: 100%;
+      }
+    }
+    .item:nth-last-child(1) {
+      p {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+</style>