update

components/chat-room.vue

@@ -13,10 +13,7 @@
                     >
                         {{ getCurrentInputingPeople }}正在输入
                     </div>
-                    <messages
-                        class="flex-fill"
-                        @open-pay-message="openPayMessage"
-                    />
+                    <messages class="flex-fill" @open-message="openMessage" />
                     <slot name="chat-right-panel"></slot>
                 </div>
                 <div
@@ -44,6 +41,7 @@
     import messages from "@/customer-service/components/message-list.vue";
     import { ChatStore, chatStore } from "@/customer-service/store/model";
     import Chat from "@/customer-service/xim";
+    import { CustomerServiceEvent } from "../event";
 
     @Component({ components: { MessageInput, messages } })
     export default class ChatRoom extends Vue {
@@ -133,8 +131,8 @@
                     this.chatBox.clientHeight - this.refTop.clientHeight + "px");
         }
 
-        private openPayMessage(id: number) {
-            this.$emit("open-pay-message", id);
+        private openMessage(o: any) {
+            CustomerServiceEvent.emit(this, o);
         }
 
         private onMessageSent() {

components/message-item/pay-message.vue

@@ -34,6 +34,7 @@
     import BaseMessage from "./index";
     import Chat from "@/customer-service/xim";
     import { ChatStore, chatStore } from "@/customer-service/store/model";
+    import { CustomerServiceEvent, MessageEvent } from "@/customer-service/event";
 
     @Component({ components: {} })
     export default class Index extends BaseMessage {
@@ -112,7 +113,11 @@
 
         private view() {
             this.isChatMember &&
-                this.$emit("open-pay-message", this.payData.paymentId);
+                CustomerServiceEvent.open(
+                    this,
+                    MessageEvent.PayMessage,
+                    +this.payData.paymentId
+                );
         }
     }
 </script>

components/message-item/position-message.vue

+<template>
+    <div class="position-message" @click="openPosition">
+        <div class="d-flex justify-content-between align-items-center">
+            <span class="d-flex align-items-center">
+                <span class="title">{{ title }}</span>
+                <span
+                    v-for="item in tags"
+                    :key="item.title"
+                    :style="{ 'background-color': item.color }"
+                    class="tag"
+                    >{{ item.title }}</span
+                >
+            </span>
+            <span class="salary">{{ salary }}</span>
+        </div>
+        <div class="summary">
+            <span v-for="item in summary" :key="item">{{ item }}</span>
+        </div>
+        <div class="msg-content" v-html="positionBody"></div>
+        <div class="msg-tail d-flex justify-content-between">
+            <span v-for="item in tail" :key="item" class="text-truncate">{{
+                item
+            }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { CustomerServiceEvent, MessageEvent } from "@/customer-service/event";
+    import { PositionMessage } from "@/customer-service/xim/models/chat";
+    import { Component } from "vue-property-decorator";
+    import BaseMessage from "./index";
+
+    @Component({ components: {} })
+    export default class Index extends BaseMessage {
+        private get positionData() {
+            return this.messageBody.msg as PositionMessage;
+        }
+
+        private get title() {
+            return this.positionData.title;
+        }
+
+        private get tags() {
+            return this.positionData.tags;
+        }
+
+        private get salary() {
+            return this.positionData.salary;
+        }
+
+        private get positionBody() {
+            return this.positionData.post_require;
+        }
+
+        private get summary() {
+            return [
+                this.positionData.address,
+                this.positionData.education_require,
+                this.positionData.recruit_count,
+            ];
+        }
+
+        private get tail() {
+            return [
+                this.positionData.company_name,
+                this.positionData.business_scope,
+            ];
+        }
+
+        private openPosition() {
+            CustomerServiceEvent.open(
+                this,
+                MessageEvent.PositionMessage,
+                this.positionData.post_id
+            );
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .position-message {
+        border: 1px solid #ccc;
+        border-radius: 10px;
+        padding: 10px;
+        max-width: 300px;
+        cursor: pointer;
+    }
+
+    .title {
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    .tag {
+        border-radius: 4px;
+        padding: 0 2px;
+        margin-left: 10px;
+        color: #fff;
+        font-size: 12px;
+    }
+
+    .salary {
+        color: #e87005;
+        margin-left: 50px;
+    }
+
+    .summary {
+        border-bottom: 1px solid #f0f0f0;
+        margin: 6px -10px 10px -10px;
+        font-size: 12px;
+        color: #999;
+        padding: 0 10px 8px 10px;
+
+        span + span {
+            margin-left: 20px;
+        }
+    }
+
+    .msg-content {
+        line-height: 1.4;
+    }
+
+    .msg-tail {
+        margin: 15px -10px 0 -10px;
+        padding: 10px 10px 0 10px;
+        border-top: 1px solid #f0f0f0;
+
+        span {
+            max-width: 200px;
+        }
+    }
+</style>
\ No newline at end of file

components/message-list.vue

@@ -24,7 +24,7 @@
                         :shape="shape"
                         @open="open"
                         @withdraw="refresh"
-                        @open-pay-message="openPayMessage"
+                        @open-message="openMessage"
                     />
                 </div>
             </template>
@@ -49,6 +49,7 @@
     import { ChatStore, chatStore } from "@/customer-service/store/model";
     import { dbController } from "../database";
     import { getLastMessageId } from "../store";
+    import { CustomerServiceEvent } from "../event";
 
     @Component({ components: { message, ImagePreview, VideoPreview } })
     export default class MessageList extends Vue {
@@ -415,8 +416,8 @@
             this.fetchNewMsg();
         }
 
-        private openPayMessage(id: number) {
-            this.$emit("open-pay-message", id);
+        private openMessage(o: any) {
+            CustomerServiceEvent.emit(this, o);
         }
     }
 </script>

components/message.vue

@@ -69,7 +69,7 @@
                         v-if="messageComponent"
                         v-model="data"
                         @open="openFile"
-                        @open-pay-message="openPayMessage"
+                        @open-message="openMessage"
                     />
                     <avatar
                         v-if="!isQuestionAnswerMessage && !isWithdrawMessage"
@@ -164,11 +164,13 @@
     import PurchasePlanMessage from "./message-item/purchase-plan-message.vue";
     import MyWelfareMessage from "./message-item/my-welfare-message.vue";
     import QuestionAnswerMessage from "./message-item/question-answer-message.vue";
+    import PositionMessage from "./message-item/position-message.vue";
     import PayMessage from "./message-item/pay-message.vue";
     import NotifyMessage from "./message-item/notify-message.vue";
     import { ChatRole } from "@/customer-service/model";
     import { getUserMapping } from "../utils/user-info";
     import Xim from "@/customer-service/xim";
+    import { CustomerServiceEvent } from "../event";
 
     const twoMinutes = 2 * 60 * 1000;
     const twoHours = 2 * 60 * 60 * 1000;
@@ -191,6 +193,7 @@
         [dto.MessageType.RefundV1, "pay-message"],
         [dto.MessageType.PayResult, "notify-message"],
         [dto.MessageType.Notify, "notify-message"],
+        [dto.MessageType.Position, "position-message"],
     ]);
 
     @Component({
@@ -209,6 +212,7 @@
             ActionMessage,
             PayMessage,
             NotifyMessage,
+            PositionMessage,
         },
     })
     export default class Message extends Vue {
@@ -535,8 +539,8 @@
             document.body.click();
         }
 
-        private openPayMessage(id: number) {
-            this.$emit("open-pay-message", id);
+        private openMessage(o: any) {
+            CustomerServiceEvent.emit(this, o);
         }
     }
 </script>

event/index.ts

+export const enum MessageEvent {
+    Default = "open-message",
+    PayMessage = "pay-message",
+    PositionMessage = "position-message",
+}
+
+export class CustomerServiceEvent {
+    public static open(vue: Vue, type: MessageEvent, model: any) {
+        return this.emit(vue, { type, model });
+    }
+
+    public static emit(vue: Vue, o: { type: MessageEvent; model: any }) {
+        return vue.$emit(MessageEvent.Default, o);
+    }
+}

model/index.ts

@@ -121,6 +121,7 @@ export const enum MessageType {
     RefundV1 = "grefund",
     Refund = "grefund2",
     Card = "card",
+    Position = "position",
 }
 
 export const enum MessageHandled {

xim/models/chat.ts

@@ -219,6 +219,19 @@ export interface PayMessageBody {
     totalMoney?: string;
 }
 
+export interface PositionMessage {
+    title: string;
+    tags: { title: string; color: string }[];
+    salary: string;
+    address: string;
+    education_require: string;
+    recruit_count: string;
+    post_require: string;
+    company_name: string;
+    business_scope: string;
+    post_id: number;
+}
+
 export interface CsUser {
     id: number;
     oid: string;