Merge remote-tracking branch 'origin/dev' into dev

src/project/pidu/AppConversation/AppConversation.vue

@@ -13,37 +13,35 @@
       </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">
+            <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 +64,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 +89,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,
+          departmentId: this.deptUserList.length ? 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 +182,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,60 @@
         </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" :class="item.userId == user.wxUserId ? '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="./img/user-img.png" alt="" class="user-img" v-if="item.userId != user.wxUserId && !item.userAvatar">
           <div class="content">
-            <span></span>
-            <p>{{item.content}}</p>
+            <span class="cir" 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>
+
+            <audio :src="item.sdkFileUrl" controls  style="display: block;" v-if="item.msgType == 'voice'"></audio>
+
+            <video :src="item.sdkFileUrl" v-if="item.msgType == 'video'" />
+
+            <div class="file" @click="prevFile(item)" v-if="item.msgType == 'file'">
+              <u-row justify="between">
+                <label class="left">
+                  <img :src="$cdn + 'common/appendix.png'" alt="">
+                  <span>{{ item.sdkFileName }}</span>
+                </label>
+                <span>{{ item.fileSizeStr }}</span>
+              </u-row>
+            </div>
+
+            <div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}{{item.msgSendTime.substring(0, 16)}}撤回了一条消息</div>
+
           </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="item.userAvatar" alt="" class="user-img" v-if="item.userId == user.wxUserId">
+          <!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId != user.wxUserId"> -->
         </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, mapActions} from "vuex";
 export default {
   name: "conversationDetail",
+  enablePullDownRefresh: true,
   data() {
     return {
       tabList: [
-        {name: '全部'},
-        {name: '图片/视频'},
-        {name: '语音'},
-        {name: '文件'}
+        {name: '全部', value: ''},
+        {name: '图片/视频', value: 'imagevideo'},
+        {name: '语音', value: 'voice'},
+        {name: '文件', value: 'file'},
       ],
       currentTabs: 0,
       barStyle: {
@@ -61,28 +84,123 @@ 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 = '会话详情'
   },
+  onPullDownRefresh() {
+    if(this.current > this.pages) {
+      uni.stopPullDownRefresh()
+      return this.$u.toast('已加载完成，没有更多数据')
+    }else {
+      this.current ++
+      this.getList()
+      setTimeout(() => {
+        uni.stopPullDownRefresh()
+      }, 1000)
+    }
+  },
   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() {
+      this.$http.post(`/app/appsessionarchiveinfo/listByUser`, null, {
+        params: {
+          current: this.current,
+          size: 15,
+          msgType: this.tabList[this.currentTabs].value,
+          // msgType: 'file',
+          toUserId: this.toUserId,
+          roomId: this.roomId,
+          type: this.type,
+          content: this.keyword,
+          startTime: this.dateList.length ? this.dateList[0] : '',
+          endTime: this.dateList.length ? this.dateList[1] : ''
+        }
+      }).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 ? [ ...res.data.records, ...this.list]: res.data.records
+          this.pages = res.data.pages
+        }
+      })
+    },
+    previewImage(img) {
+      uni.previewImage({
+        urls: [img],
+        current: img
+      })
+    },
+    ...mapActions(['previewFile']),
+    prevFile(file) {
+      this.$loading()
+      this.previewFile({ ...file }).then(()=>{
+        this.$hideLoading()
+      })
     },
   },
+  onReachBottom() {
+    // this.current ++
+    // this.getList()
+  }
 };
 </script>
 
@@ -106,17 +224,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,11 +251,12 @@ export default {
         width: 72px;
         height: 72px;
         margin-right: 20px;
+        border-radius: 50%;
       }
       .content {
         max-width: calc(100% - 144px);
         position: relative;
-        span {
+        .cir {
           width: 0px;
           height: 0px;
           border: 10px solid transparent;
@@ -139,11 +266,13 @@ export default {
         p {
           display: inline-block;
           padding: 14px 54px 14px 32px;
+          width: 100%;
           background-color: #fff;
           font-family: PingFangSC-Regular;
           font-size: 32px;
           color: #333;
           word-break: break-all;
+          box-sizing: border-box;
         }
       }
       .fail-img {
@@ -151,10 +280,80 @@ export default {
         height: 32px;
         margin: auto 0 auto 24px;
       }
+      .img-list {
+        img {
+          width: 100px;
+          height: 100px;
+          margin: 0 16px 16px 0;
+        }
+      }
+      ::v-deep .uni-audio-default {
+        height: 72px;
+      }
+      ::v-deep .uni-audio-left {
+        height: 72px;
+        width: 72px;
+        .uni-audio-button {
+          margin: 14px;
+        }
+      }
+      ::v-deep .uni-audio-right {
+        height: 72px;
+        margin-left: 72px;
+        padding: 10px 32px 10px 0;
+      }
+      .revoke-text {
+        line-height: 54px;
+        padding: 0 24px;
+        border-radius: 8px;
+        background-color: #EEE;
+        color: #999;
+        margin-top: 16px;
+      }
+      .file {
+        height: 128px;
+        background: #FFFFFF;
+        border-radius: 8px;
+        border: 1px solid #CCCCCC;
+        box-sizing: border-box;
+        padding: 0 16px;
+        margin-bottom: 32px;
+
+        & > .u-row {
+          height: 100%;
+
+          .left {
+            width: 522px;
+            display: flex;
+            align-items: center;
+
+            & > img {
+              width: 96px;
+              height: 96px;
+            }
+
+            & > span {
+              font-size: 32px;
+              color: #333333;
+              display: inline-block;
+              line-height: 44px;
+              text-overflow: ellipsis;
+              overflow-x: hidden;
+              white-space: nowrap;
+            }
+          }
+
+          & > span {
+            font-size: 28px;
+            color: #999;
+            margin: -8px 0 0 16px;
+          }
+        }
+      }
     }
     .item-left {
       .content {
-        span {
+        .cir {
           left: -18px;
           border-right-color: #fff;
         }
@@ -167,7 +366,7 @@ export default {
         margin: 0 0 0 20px;
       }
       .content {
-        span {
+        .cir {
           border-left-color: #C7E7FE;
           right: -18px;
         }
@@ -176,7 +375,26 @@ export default {
           padding: 14px 32px 14px 54px;
         }
       }
+      .fail-img {
+        margin: auto 24px auto 0;
+      }
     }
   }
+  .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;
+    z-index: 99;
+  }
 }
 </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 {