处理缺失的filter

components/image-preview.vue

@@ -31,10 +31,11 @@
 </template>
 
 <script lang="ts">
-import { Component, Model, Prop, Vue } from "vue-property-decorator";
+import { Component, Mixins, Model, Prop } from "vue-property-decorator";
 
+import { Filters } from '../mixin/filter';
 @Component({ components: {} })
-export default class ImagePreview extends Vue {
+export default class ImagePreview extends Mixins(Filters) {
   @Model("update")
   private value!: boolean;
 

components/message.vue

@@ -130,8 +130,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Inject, Prop, Ref, Vue } from "vue-property-decorator";
+import { Component, Inject, Mixins, Prop, Ref } from "vue-property-decorator";
 
+import { Filters } from '../mixin/filter';
 import * as dto from "../model";
 import { isAccessibleUrl } from "../service/tools";
 import { replaceText2Link } from "../utils";
@@ -156,7 +157,7 @@ import { chatStore, ChatStore } from "@/customer-service/store/model";
 @Component({
   components: { FileIcon, VoiceIcon, WhoReadList, VideoPlayerIcon },
 })
-export default class Message extends Vue {
+export default class Message extends Mixins(Filters) {
   @chatStore.State(ChatStore.STATE_CHAT_MY_ID)
   private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID;
 

components/video-preview.vue

@@ -39,15 +39,16 @@
 <script lang="ts">
 import {
   Component,
+  Mixins,
   Model,
   Prop,
   Ref,
-  Vue,
-  Watch,
+  Watch
 } from "vue-property-decorator";
 
+import { Filters } from '../mixin/filter';
 @Component({ components: {} })
-export default class VideoPreview extends Vue {
+export default class VideoPreview extends Mixins(Filters) {
   @Model("update")
   private value!: boolean;
 

components/who-read-list.vue

@@ -32,8 +32,8 @@ import * as dto from "../model";
 import { unique } from "../utils";
 
 import { ChatStore } from "@/customer-service/store/model";
-import xim from "@/customer-service/xim/xim";
 import chat from "@/customer-service/xim/index";
+import xim from "@/customer-service/xim/xim";
 
 const chatStoreNamespace = namespace("chatStore");
 @Component({ components: {} })

mixin/filter.ts

+import moment from "moment";
+import Vue from "vue";
+import Component from "vue-class-component";
+// Define a super class component
+@Component({
+    filters: {
+        downloadUrl(time: number) {
+            const format = {
+                sameDay: 'HH:mm',
+                nextDay: 'MM/DD',
+                nextWeek: 'MM/DD',
+                lastDay: '昨天HH:mm',
+                lastWeek: 'MM/DD',
+                sameElse: 'YYYY.MM.DD',
+            };
+            return moment(time).calendar(null, format);
+        }
+    },
+})
+export class Filters extends Vue {
+}

package-lock.json

@@ -86,6 +86,11 @@
             "resolved": "http://npm.job.qinqinxiaobao.com/has-symbols/-/has-symbols-1.0.2.tgz",
             "integrity": "sha1-Fl0wcMADCXUqEjakeTMeOsVvFCM="
         },
+        "moment": {
+            "version": "2.29.1",
+            "resolved": "http://npm.job.qinqinxiaobao.com/moment/-/moment-2.29.1.tgz",
+            "integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M="
+        },
         "ms": {
             "version": "2.0.0",
             "resolved": "http://npm.job.qinqinxiaobao.com/ms/-/ms-2.0.0.tgz",

package.json

@@ -2,6 +2,7 @@
     "dependencies": {
         "@types/sha1": "^1.1.2",
         "axios": "^0.19.2",
+        "moment": "^2.29.1",
         "qs": "^6.9.3",
         "sha1": "^1.1.1",
         "vuex-class": "^0.3.2",