会话存档

src/project/pidu/AppConversation/AppConversation.vue

@@ -13,37 +13,36 @@
       </div>
       <div class="top-select">
         <div class="item">
-          <AiAreaPicker v-model="areaId" :areaId="areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
+          <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="#666" size="28" style="margin-left: 4px" />
+            <u-icon name="arrow-down" color="#999" size="28" style="margin-left: 4px" />
           </AiAreaPicker>
         </div>
         <div class="item">
-          <span style="color:#999;">部门名称</span>
-          <!-- <span v-else>{{ $dict.getLabel('EP_handleType', handleType) }}</span> -->
-          <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
+          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect" isAuth>
+            <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">
-      <div class="item">
-        <img src="./img/user-img.png" alt="">
-        <p>李毅</p>
-      </div>
-      <div class="item">
-        <img src="./img/user-img.png" alt="">
-        <p>李毅</p>
-      </div>
-      <div class="item">
-        <img src="./img/user-img.png" alt="">
-        <p>李毅</p>
+    <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">
+        <p v-if="currentTabs == 1">{{item.toUserName}}</p>
+
+        <img src="./img/group-img.png" alt="" v-if="currentTabs != 1">
+        <p v-if="currentTabs != 1">{{item.roomName}}</p>
       </div>
     </div>
+    <AiEmpty v-else/>
   </div>
 </template>
 
 <script>
+import {mapState} from "vuex";
 export default {
   name: "AppConversation",
   appName: "会话存档",
@@ -66,8 +65,21 @@ export default {
       keyword: '',
       areaId: '',
       areaName: '',
+      current: 1,
+      pages: 2,
+      list: [],
+      deptUserList: []
     };
   },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.deptUserList = [{id: this.user.departId, name: this.user.departName}]
+    this.getList()
+  },
   onShow() {
     
   },
@@ -78,14 +90,47 @@ export default {
       this.getListInit()
     },
     getListInit() {
-
+      this.current = 1
+      this.pages = 2
+      this.list = []
+      this.getList()
     },
     areaSelect(e) {
       this.areaId = e
       this.getListInit()
-      this.getTotal()
     },
+    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: 10,
+          type: this.currentTabs == 1 ? 0 : 1,
+          areaId: this.areaId,
+          toUserName: this.currentTabs == 1 ? this.keyword : '',
+          roomName: this.currentTabs == 1 ? '' : this.keyword,
+          departId: this.deptUserList[0].id
+        }
+      }).then(res=> {
+        if(res?.data) {
+          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}`})
+    }
+  },
+  onReachBottom() {
+    this.current ++
+    this.getList()
+  }
 };
 </script>
 
@@ -138,6 +183,7 @@ export default {
       img {
         width: 80px;
         height: 80px;
+        border-radius: 50%;
         margin-right: 32px;
       }
       p {

src/project/pidu/AppConversation/conversationDetail.vue

@@ -5,9 +5,10 @@
         inactive-color="#666666" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#3975C6 " @change="change">
       </u-tabs>
       <div class="top-search">
-        <div class="left">
-          <!-- <div class="color-999">开始时间-结束时间</div> -->
-          <div>2023-03-01至2023-03-10</div>
+        <div class="left" @click="isShowDate=true">
+          <div class="color-999" v-if="!dateList.length">开始时间-结束时间</div>
+          <div v-else>{{dateList[0]}}至{{dateList[1]}}</div>
+          <img src="./img/del-icon.png" alt="" v-if="dateList.length" @click.stop="clearDate()">
         </div>
         <div class="right">
           <u-search v-model="keyword" :clearabled="true" placeholder="请输入关键词" :show-action="false" bg-color="#F5F5F5"
@@ -16,38 +17,49 @@
         </div>
       </div>
     </AiTopFixed>
-    <div class="conversation-list">
+    <div class="conversation-list" v-if="list.length">
       <div v-for="(item, index) in list" :key="index">
-        <div class="item item-left" v-if="item.type">
-          <img src="./img/user-img.png" alt="" class="user-img">
+        <div class="item item-right" v-if="item.userId == user.wxUserId">
+          <div class="content">
+            <span v-if="item.msgType == 'text'"></span>
+            <p v-if="item.msgType == 'text'">{{item.content}}</p>
+            <div class="img-list" v-if="item.msgType == 'image'">
+              <img :src="item.sdkFileUrl" alt="" @click="previewImage(item.sdkFileUrl)">
+            </div>
+            <!-- <AiVideo :src="item.sdkFileUrl" autoplay v-if="item.msgType == 'voice'"></AiVideo> -->
+            <audio :src="item.sdkFileUrl" ref="audio" :controls="true"  style="display: block;" v-if="item.msgType == 'voice'"></audio>
+            <!-- <div @click="openRecord(item)" v-if="item.msgType == 'voice'">123</div> -->
+          </div>
+          <img :src="item.userAvatar" alt="" class="user-img">
+        </div>
+        <div class="item item-left" v-else>
+          <img :src="item.userAvatar" alt="" class="user-img">
           <div class="content">
             <span></span>
-            <p>{{item.content}}</p>
+            <p v-if="item.msgType == 'text'">{{item.content}}</p>
           </div>
-          <img src="./img/fail-icon.png" alt="" class="fail-img">
-        </div>
-        <div class="item item-right" v-else>
-          <div class="content">
-            <span></span>
-            <p>{{item.content}}</p>
-          </div>
-          <img src="./img/user-img.png" alt="" class="user-img">
+          <!-- <img src="./img/fail-icon.png" alt="" class="fail-img"> -->
         </div>
       </div>
     </div>
+    <AiEmpty v-else/>
+    <u-calendar v-model="isShowDate" @change="onDateChange" mode="range"></u-calendar>
+    <div class="footer" @click="toGroup">{{type == 1 ? '群详情' : '个人信息'}}</div>
   </div>
 </template>
 
 <script>
+import {mapState} from "vuex";
+import BenzAMRRecoder from 'benz-amr-recorder';
 export default {
   name: "conversationDetail",
   data() {
     return {
       tabList: [
         {name: '全部'},
-        {name: '图片/视频'},
+        {name: '图片'},
         {name: '语音'},
-        {name: '文件'}
+        {name: '文本'}
       ],
       currentTabs: 0,
       barStyle: {
@@ -61,28 +73,153 @@ export default {
         'color': '#000000'
       },
       keyword: '',
-      list: [
-        {type: 0, content: '123全部全部全部全部全部全部全部全部全部全部全部全部'},
-        {type: 1, content: '123'},
-        {type: 0, content: '456'},
-        {type: 0, content: '123'},
-        {type: 1, content: '123'},
-      ]
+      toUserId: '',
+      roomId: '',
+      current: 1,
+      pages: 2,
+      list: [],
+      type: '',
+      isShowDate: false,
+      dateList: [],
+
+      amrPlay: '',
+      amrPlayStatus: false,
     };
   },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad(option) {
+    if(option.toUserId) {
+      this.toUserId = option.toUserId
+    }else {
+      this.roomId = option.roomId
+    }
+    this.type = option.type
+    this.getList()
+  },
   onShow() {
     document.title = '会话详情'
   },
   methods: {
+    toGroup() {
+      if(this.type == 1) {
+        uni.navigateTo({url: `./groupDetail`})
+      }else {
+        uni.navigateTo({url: `./userInfo`})
+      }
+    },
     change(index) {
       this.keyword = ''
       this.currentTabs = index
       this.getListInit()
     },
+    onDateChange (e) {
+      console.log(e)
+      this.dateList = [e.startDate, e.endDate]
+      this.getListInit()
+    },
+    clearDate() {
+      this.dateList = []
+      this.getListInit()
+    },
     getListInit() {
+      this.current = 1
+      this.pages = 2
+      this.list = []
+      this.getList()
+    },
+    getList() {
+      if(this.current > this.pages)  return
+      var msgTypeList = ['','image', 'voice', 'text']
+      this.$http.post(`/app/appsessionarchiveinfo/listByUser`, null, {
+        params: {
+          current: this.current,
+          size: 10,
+          msgType: msgTypeList[this.currentTabs],
+          toUserId: this.toUserId,
+          roomId: this.roomId,
+          type: this.type,
+          content: this.keyword
+        }
+      }).then(res=> {
+        if(res?.data) {
+          res.data.records.map((item) => {
+            if(item.msgType == 'voice'){
+              //amr对象不能共用，所以要为每条语音消息初始化一个amr对象
+              var amr = new BenzAMRRecoder();
+              amr.initWithUrl(`请求的amr地址`).then(() => {
+                item.amrTime = Math.ceil(amr.getDuration());    //获取音频总时长
+              });
+              item.amr = amr;  //将初始化好的amr赋值到当前消息对象data中
+            }
+          })
+          this.list = this.current > 1 ? [...this.list, ...res.data.records]: res.data.records
+          this.pages = res.data.pages
+        }
+      })
+    },
+    previewImage(img) {
+      uni.previewImage({
+        urls: [img],
+        current: img
+      })
+    },
+    openRecord (row) {
+      // this.amrPlayStatus = false
+      // this.$nextTick(() => {
+      //   this.amrPlay = new BenzAMRRecoder()
+      //   this.amrPlay.onPlay(() => {
+      //     this.amrPlayStatus = true
+      //   })
+      //   this.amrPlay.onStop(() => {
+      //     this.amrPlayStatus = false
+      //   })
+      //   this.amrPlay.onPause(() => {
+      //     this.amrPlayStatus = false
+      //   })
+      //   this.amrPlay.onResume(() => {
+      //     this.amrPlayStatus = true
+      //   })
+      //   this.amrPlay.initWithUrl(row.sdkFileUrl).then(() => {
+      //     console.info('armPlay:', this.amrPlay)
+      //     this.amrPlay.play()
+      //   })
+      // })
+
+      //amr.isPlaying()，音频播放状态，正在播放为true，否则为false；
+      if (row.amr.isPlaying()) {
+        row.amr.pause();  //暂停
+      } else {
+        row.amr.play();  //播放
+      }
+
 
     },
+    handleClose () {
+      if (this.amrPlay) {
+        this.amrPlay.stop()
+      }
     },
+    pauseAmrPlay () {
+      if (this.amrPlay) {
+        this.amrPlay.pause()
+      }
+    },
+    resumeAmrPlay () {
+      if (this.amrPlay) {
+        if (this.amrPlay.isPaused()) {
+          this.amrPlay.resume()
+        } else if (!this.amrPlay.isPlaying()) {
+          this.amrPlay.play()
+        }
+      }
+    },
+  },
+  onReachBottom() {
+    this.current ++
+    this.getList()
+  }
 };
 </script>
 
@@ -106,17 +243,25 @@ export default {
     padding: 20px 32px;
     display: flex;
     .left {
-      width: 360px;
+      width: 400px;
       div {
+        display: inline-block;
         line-height: 64px;
       }
+      img {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        margin-left: 8px;
+        vertical-align: middle;
+      }
     }
     .right {
-      width: calc(100% - 360px);
+      width: calc(100% - 400px);
     }
   }
   .conversation-list {
-    padding: 48px 32px;
+    padding: 48px 32px 160px;
     // background-color: #EBECF0;
     .item {
       margin-bottom: 48px;
@@ -125,6 +270,7 @@ export default {
         width: 72px;
         height: 72px;
         margin-right: 20px;
+        border-radius: 50%;
       }
       .content {
         max-width: calc(100% - 144px);
@@ -151,6 +297,13 @@ export default {
         height: 32px;
         margin: auto 0 auto 24px;
       }
+      .img-list {
+        img {
+          width: 100px;
+          height: 100px;
+          margin: 0 16px 16px 0;
+        }
+      }
     }
     .item-left {
       .content {
@@ -178,5 +331,20 @@ export default {
       }
     }
   }
+  .footer{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365DD;
+    box-shadow: inset 0px 1px 0px 0px #EEEEEE;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
 }
 </style>

src/project/pidu/AppConversation/groupDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="AppGroupDetail">
+  <div class="groupDetail">
     <div class="bg-fff">
       <div class="group-info">
         <img src="./img/down-icon.png" alt="">
@@ -32,7 +32,7 @@
 
 <script>
 export default {
-  name: "AppGroupDetail",
+  name: "groupDetail",
   appName: "群详情",
   data() {
     return {
@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.AppGroupDetail {
+.groupDetail {
   height: 100vh;
   background-color: #f5f5f5;
   .bg-fff {