Merge branch 'master' of http://gitlab.corp.qinqinxiaobao.com:9880/uniplat/customer-service

chat-list.vue

@@ -207,7 +207,7 @@ export default class ChatList extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .chat-list-con {
   .title {
     padding-left: 20px;

chat-room.vue

@@ -178,7 +178,7 @@ export default class ChatRoom extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .room-title {
   font-size: 16px;
   padding: 0 20px;
@@ -270,7 +270,7 @@ export default class ChatRoom extends Vue {
   }
 }
 .chat-area {
-  $input-height: 130px;
+  --input-height: 130px;
 
   .chat-messages {
     height: calc(100% - 130px + 1px);
@@ -278,7 +278,7 @@ export default class ChatRoom extends Vue {
   }
 
   .chat-input {
-    height: $input-height;
+    height: var(--input-height);
   }
 }
 .order-info-con {

chat.vue

@@ -46,7 +46,7 @@ export default class Chat extends Vue {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .chat-dialog-con {
   /deep/ .el-dialog__header {
     display: none;

components/file-icon.vue

@@ -3,15 +3,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Model, Vue } from "vue-property-decorator"
-;
+import { Component, Model, Vue } from "vue-property-decorator";
 
 import { FileType, getSvg } from "./file-controller";
 
 @Component({ components: {} })
 export default class FileIcon extends Vue {
   @Model("update")
-    private value!: FileType
+  private value!: FileType;
 
   private get audio() {
     return this.value === FileType.Audio;
@@ -67,7 +66,7 @@ export default class FileIcon extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="less" scoped>
 .file-icon {
   margin-left: 10px;
 

components/image-preview.vue

@@ -36,10 +36,10 @@ import { Component, Model, Prop, Vue } from "vue-property-decorator";
 @Component({ components: {} })
 export default class ImagePreview extends Vue {
   @Model("update")
-    private value!: boolean
+  private value!: boolean;
 
   @Prop()
-    private file!: { name: string; url: string }
+  private file!: { name: string; url: string };
 
   private style: {
     "max-height": number | string;
@@ -47,12 +47,11 @@ export default class ImagePreview extends Vue {
   } = {
     "max-height": "300px",
     "max-width": "600px",
-    }
+  };
 
   private close() {
     setTimeout(
-            () =>
-                (this.style = { "max-height": "300px", "max-width": "600px" }),
+      () => (this.style = { "max-height": "300px", "max-width": "600px" }),
       300
     );
     this.$emit("update", false);
@@ -71,7 +70,7 @@ export default class ImagePreview extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .preview-title {
   font-size: 18px;
   color: #333;

components/message.vue

@@ -430,7 +430,7 @@ export default class Message extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .message-con {
   margin: 20px 0;
 

components/video-preview.vue

@@ -37,18 +37,25 @@
 </template>
 
 <script lang="ts">
-import { Component, Model, Prop, Ref, Vue, Watch } from "vue-property-decorator";
+import {
+  Component,
+  Model,
+  Prop,
+  Ref,
+  Vue,
+  Watch,
+} from "vue-property-decorator";
 
 @Component({ components: {} })
 export default class VideoPreview extends Vue {
   @Model("update")
-    private value!: boolean
+  private value!: boolean;
 
   @Prop()
-    private file!: { name: string; url: string }
+  private file!: { name: string; url: string };
 
   @Ref("video")
-    private video!: HTMLVideoElement
+  private video!: HTMLVideoElement;
 
   private style: {
     "max-height": number | string;
@@ -56,12 +63,11 @@ export default class VideoPreview extends Vue {
   } = {
     "max-height": "800px",
     "max-width": "800px",
-    }
+  };
 
   private close() {
     setTimeout(
-            () =>
-                (this.style = { "max-height": "300px", "max-width": "600px" }),
+      () => (this.style = { "max-height": "300px", "max-width": "600px" }),
       300
     );
     this.$emit("update", false);
@@ -90,7 +96,7 @@ export default class VideoPreview extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .preview-title {
   font-size: 18px;
   color: #333;

components/who-read-list.vue

@@ -138,7 +138,7 @@ export default class WhoReadList extends Vue {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .who-read-list {
   ::before {
     content: "";

create-chat.vue

@@ -88,4 +88,4 @@ export default class ChatCreator extends Vue {
   }
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>

hybrid-input/index.vue

@@ -512,7 +512,7 @@ export default class Input extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .input-wrap {
   position: relative;
   padding-left: 20px;

message-list.vue

@@ -14,9 +14,7 @@
         <div :key="item.id" class="message-template">
           <div
             v-if="
-                            item.id > 0 &&
-                            messageTimestampDictionary[item.id] &&
-                            item.msg
+              item.id > 0 && messageTimestampDictionary[item.id] && item.msg
             "
             class="text-center text-hint timestamp"
           >
@@ -35,10 +33,7 @@
     </el-scrollbar>
 
     <image-preview v-model="preview" :file="imagePreview"></image-preview>
-        <video-preview
-            v-model="previewVideo"
-            :file="videoPreview"
-        ></video-preview>
+    <video-preview v-model="previewVideo" :file="videoPreview"></video-preview>
   </div>
 </template>
 
@@ -57,34 +52,34 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
 @Component({ components: { message, ImagePreview, VideoPreview } })
 export default class MessageList extends Vue {
   @chatStore.Getter(ChatStore.STATE_CHAT_MSG_HISTORY)
-    private readonly historyMessage!: ChatStore.STATE_CHAT_MSG_HISTORY
+  private readonly historyMessage!: ChatStore.STATE_CHAT_MSG_HISTORY;
 
   @chatStore.Getter(ChatStore.STATE_CHAT_SENDING_MESSAGES)
-    private readonly sendingMessages!: ChatStore.STATE_CHAT_SENDING_MESSAGES
+  private readonly sendingMessages!: ChatStore.STATE_CHAT_SENDING_MESSAGES;
 
   @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
-    private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID
+  private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
 
   @chatStore.State(ChatStore.STATE_CURRENT_CHAT_INITING)
-    private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING
+  private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING;
 
   @chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID)
-    private readonly getLastPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID
+  private readonly getLastPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID;
 
   @chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID)
-    private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID
+  private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID;
 
   @chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA)
-    private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA
+  private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA;
 
   @chatStore.Mutation(ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM)
-    private readonly saveScrollToBottomFunc!: ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM
+  private readonly saveScrollToBottomFunc!: ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM;
 
   @chatStore.Mutation(ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM)
-    private readonly clearScrollToBottomFunc!: ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM
+  private readonly clearScrollToBottomFunc!: ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM;
 
   @Prop({ default: "circle" })
-    private shape!: string
+  private shape!: string;
 
   private get messages() {
     if (this.historyMessage) {
@@ -104,20 +99,20 @@ export default class MessageList extends Vue {
   }
 
   // 添加时间戳的最大间隔消息数
-    private readonly timeLimit = 48
+  private readonly timeLimit = 48;
 
-    private scroll2EndWhenMessageLoaded = false
+  private scroll2EndWhenMessageLoaded = false;
 
-    private preview = false
-    private imagePreview = {}
+  private preview = false;
+  private imagePreview = {};
 
-    private previewVideo = false
-    private videoPreview = {}
+  private previewVideo = false;
+  private videoPreview = {};
 
   @Ref("message-scrollbar")
   private scollbarElement!: Vue & {
     update: () => void;
-    }
+  };
 
   private get scollWrapper(): HTMLElement | null {
     return this.scollbarElement?.$el?.firstChild as HTMLElement;
@@ -168,9 +163,9 @@ export default class MessageList extends Vue {
     return dic;
   }
 
-    private loading = false
-    private loadingOld = false
-    private loadingNew = false
+  private loading = false;
+  private loadingOld = false;
+  private loadingNew = false;
 
   public created() {
     this.handleScrollWrapper();
@@ -234,7 +229,7 @@ export default class MessageList extends Vue {
     this.loadingNew = false;
   }
 
-    private handleScroll!: () => void
+  private handleScroll!: () => void;
   private handleScrollWrapper() {
     let oldScrollTop = 0;
     this.handleScroll = () => {
@@ -353,7 +348,7 @@ export default class MessageList extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .message-list {
   padding: 0 20px;
 }