会话存档

src/project/pidu/AppConversation/conversationDetail.vue

@@ -19,26 +19,36 @@
     </AiTopFixed>
     <div class="conversation-list" v-if="list.length">
       <div v-for="(item, index) in list" :key="index">
-        <div class="item item-right" v-if="item.userId == user.wxUserId">
+        <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">
           <div class="content">
-            <span v-if="item.msgType == 'text'"></span>
+            <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>
-            <!-- <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> -->
+
+            <video :src="item.sdkFileUrl" v-if="item.msgType == 'video'" />
+
+            <div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}{{item.msgSendTime.substring(0, 16)}}撤回了一条消息</div>
+
+            <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.msgType }}.{{ item.msgType }}</span>
+                </label>
+                <span>{{ item.msgType }}</span>
+              </u-row>
+            </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 v-if="item.msgType == 'text'">{{item.content}}</p>
-          </div>
-          <!-- <img src="./img/fail-icon.png" alt="" class="fail-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>
@@ -56,9 +66,9 @@ export default {
     return {
       tabList: [
         {name: '全部', value: ''},
-        {name: '文本', value: 'text'},
-        {name: '图片', value: 'image'},
+        {name: '图片/视频', value: 'imagevideo'},
         {name: '语音', value: 'voice'},
+        {name: '文件', value: 'file'},
       ],
       currentTabs: 0,
       barStyle: {
@@ -133,8 +143,9 @@ export default {
       this.$http.post(`/app/appsessionarchiveinfo/listByUser`, null, {
         params: {
           current: this.current,
-          size: 10,
+          size: 15,
           msgType: this.tabList[this.currentTabs].value,
+          // msgType: 'file',
           toUserId: this.toUserId,
           roomId: this.roomId,
           type: this.type,
@@ -165,6 +176,12 @@ export default {
         current: img
       })
     },
+    prevFile(file) {
+      this.$loading()
+      this.previewFile({ ...file }).then(()=>{
+        this.$hideLoading()
+      })
+    },
   },
   onReachBottom() {
     this.current ++
@@ -225,7 +242,7 @@ export default {
       .content {
         max-width: calc(100% - 144px);
         position: relative;
-        span {
+        .cir {
           width: 0px;
           height: 0px;
           border: 10px solid transparent;
@@ -254,10 +271,73 @@ export default {
           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: #ddd;
+        color: #666;
+        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;
         }
@@ -270,7 +350,7 @@ export default {
         margin: 0 0 0 20px;
       }
       .content {
-        span {
+        .cir {
           border-left-color: #C7E7FE;
           right: -18px;
         }
@@ -279,6 +359,9 @@ export default {
           padding: 14px 32px 14px 54px;
         }
       }
+      .fail-img {
+        margin: auto 24px auto 0;
+      }
     }
   }
   .footer{