From 9394445d122ab4ec409b641231f4ee38a5b64e8c Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Tue, 14 Jun 2022 15:16:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=A2=E6=9C=8D=E8=BD=AC=E7=A7=BB?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/chat/chat.js |  66 +++++++------
 src/views/chat/index.vue       |   1 +
 src/views/chat/message.vue     | 170 ++++++++++++++++++---------------
 3 files changed, 133 insertions(+), 104 deletions(-)

diff --git a/src/store/modules/chat/chat.js b/src/store/modules/chat/chat.js
index c32a560..73a66a4 100644
--- a/src/store/modules/chat/chat.js
+++ b/src/store/modules/chat/chat.js
@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-06-07 15:41:05
  * @LastEditors: ch
- * @LastEditTime: 2022-06-13 17:16:27
+ * @LastEditTime: 2022-06-14 14:59:41
  * @Description: file content
  */
 import * as api from '@/api/chat';
@@ -48,21 +48,29 @@ const getters = {
             } else if (type === 5) {
                 payload = '[撤回消息]';
             } else if (type === 6 || type === 1) {
-                try {
-                    // payload = JSON.parse(payload.value);
-                    if ('text' in payload) {
-                        payload = payload.text;
-                    } else if ('linkJump' in payload) {
-                        payload = '[超链接]';
-                    } else if ('orderNo' in payload) {
-                        payload = '[订单信息]';
-                    } else if ('productImageUrl' in payload) {
-                        payload = '[商品信息]';
-                    } else {
-                        payload = '[未知数据]';
+                if (payload.customType === 'transferWaiterSession') {
+                    let str = `${payload.fromNickname}将会话转移给了---${payload.toNickname}`;
+                    if (payload.reason) {
+                        str += `，并留言：${payload.reason}`;
+                    }
+                    payload = str;
+                } else {
+                    try {
+                        // payload = JSON.parse(payload.value);
+                        if ('text' in payload) {
+                            payload = payload.text;
+                        } else if ('linkJump' in payload) {
+                            payload = '[超链接]';
+                        } else if ('orderNo' in payload) {
+                            payload = '[订单信息]';
+                        } else if ('productImageUrl' in payload) {
+                            payload = '[商品信息]';
+                        } else {
+                            payload = '[未知数据]';
+                        }
+                    } catch (e) {
+                        payload = '[解析异常]';
                     }
-                } catch (e) {
-                    payload = '[解析异常]';
                 }
             } else if (type === 7) {
                 payload = payload.text;
@@ -104,19 +112,23 @@ const getters = {
     },
     parseContent: () => {
         return (payload) => {
-            try {
-                // payload = JSON.parse(payload);
-                if ('linkJump' in payload) {
-                    payload.type = 'link';
-                } else if ('orderNo' in payload) {
-                    payload.type = 'order';
-                } else if ('productImageUrl' in payload) {
-                    payload.type = 'product';
-                } else {
-                    payload = '[未知消息]';
+            if (payload.customType === 'transferWaiterSession') {
+                payload.type = 'transferWaiterSession';
+            } else {
+                try {
+                    // payload = JSON.parse(payload);
+                    if ('linkJump' in payload) {
+                        payload.type = 'link';
+                    } else if ('orderNo' in payload) {
+                        payload.type = 'order';
+                    } else if ('productImageUrl' in payload) {
+                        payload.type = 'product';
+                    } else {
+                        payload = '[未知消息]';
+                    }
+                } catch (e) {
+                    payload = '[解析异常]';
                 }
-            } catch (e) {
-                payload = '[解析异常]';
             }
             return payload;
         };
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index e7f7e4d..eeda704 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -394,6 +394,7 @@
             display: flex;
             border: 1px solid #ebeef5;
             .aside {
+                width: 240px;
                 border-right: 1px solid #ebeef5;
                 .aside-header {
                     height: 60px;
diff --git a/src/views/chat/message.vue b/src/views/chat/message.vue
index d9a03eb..b60ec27 100644
--- a/src/views/chat/message.vue
+++ b/src/views/chat/message.vue
@@ -3,97 +3,113 @@
         class="message-item"
         :class="{
             [`--${messageType[props.message.type]}`]: true,
+            '--notify': messageType[props.message.type] === 'custom' && content.type === 'transferWaiterSession',
             '--self': props.message.fromId !== props.session.fromId,
         }"
     >
         <!--  -->
-        <div v-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="avatar">
-            <el-avatar :src="props.message.fromAvatar" />
-        </div>
-        <div class="message-body">
-            <div v-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="name">
-                {{ props.message.fromNickname }}
+        <template v-if="['notify', 'revoke'].includes(messageType[props.message.type])">
+            <div class="content shadow">
+                {{ store.getters['chat/parseText'](props.message) }}
             </div>
-            <template v-if="messageType[props.message.type] === 'custom'">
-                <a v-if="content.type === 'link'" class="content shadow" :href="content.linkJump" target="_blank">
-                    {{ content.content }}
-                </a>
-                <el-card v-if="content.type === 'product'" class="shadow">
-                    <template #header>
-                        <div class="flex">
-                            <div class="left">商品编号：{{ content.id }}</div>
-                            <el-button type="text" @click="$copy(content.id)">复制</el-button>
-                        </div>
-                    </template>
-                    <div class="flex product" @click="handleProductDetail(content.id)">
-                        <el-image :alt="content.name" height="64px" :src="content.productImageUrl" width="64px" />
-                        <div class="right">
-                            <div class="name">{{ content.name }}</div>
-                            <div class="price">￥{{ content.startingPrice }}</div>
-                        </div>
-                    </div>
-                    <div class="footer">
-                        <el-button @click="handleProduct(content.id)">商品规格属性</el-button>
-                    </div>
-                </el-card>
-                <el-card v-if="content.type === 'order'" class="shadow">
-                    <template #header>
-                        <div class="flex">
-                            <div class="status">{{ content.orderStatusDesc }}</div>
-                            <div class="service"></div>
+        </template>
+        <template v-else-if="messageType[props.message.type] === 'custom' && content.type === 'transferWaiterSession'">
+            <div class="message-body">
+                <div v-if="content.type === 'transferWaiterSession'" class="content shadow">
+                    {{ store.getters['chat/parseText'](props.message) }}
+                </div>
+            </div>
+        </template>
+
+        <template v-else>
+            <div class="avatar">
+                <el-avatar :src="props.message.fromAvatar" />
+            </div>
+            <div class="message-body">
+                <div class="name">
+                    {{ props.message.fromNickname }}
+                </div>
+                <template v-if="messageType[props.message.type] === 'custom'">
+                    <a v-if="content.type === 'link'" class="content shadow" :href="content.linkJump" target="_blank">
+                        {{ content.content }}
+                    </a>
+                    <el-card v-if="content.type === 'product'" class="shadow">
+                        <template #header>
+                            <div class="flex">
+                                <div class="left">商品编号：{{ content.id }}</div>
+                                <el-button type="text" @click="$copy(content.id)">复制</el-button>
+                            </div>
+                        </template>
+                        <div class="flex product" @click="handleProductDetail(content.id)">
+                            <el-image :alt="content.name" height="64px" :src="content.productImageUrl" width="64px" />
+                            <div class="right">
+                                <div class="name">{{ content.name }}</div>
+                                <div class="price">￥{{ content.startingPrice }}</div>
+                            </div>
                         </div>
-                        <div class="flex">
-                            <div class="no">订单编号：{{ content.orderNo }}</div>
-                            <el-button type="text" @click="$copy(content.orderNo)">复制</el-button>
+                        <div class="footer">
+                            <el-button @click="handleProduct(content.id)">商品规格属性</el-button>
                         </div>
-                    </template>
-                    <div class="flex">
-                        <el-image
-                            :alt="content.productName"
-                            height="64px"
-                            :src="content.productImageUrl"
-                            width="64px"
-                        />
-                        <div class="right">
+                    </el-card>
+                    <el-card v-if="content.type === 'order'" class="shadow">
+                        <template #header>
                             <div class="flex">
-                                <div class="name">{{ content.productName }}</div>
-                                <div class="price">￥{{ content.payAmount }}</div>
+                                <div class="status">{{ content.orderStatusDesc }}</div>
+                                <div class="service"></div>
                             </div>
                             <div class="flex">
-                                <div class="sku">{{ content.skuDescribe || '默认规格' }}</div>
-                                <div class="count">x{{ content.quantity || 1 }}</div>
+                                <div class="no">订单编号：{{ content.orderNo }}</div>
+                                <el-button type="text" @click="$copy(content.orderNo)">复制</el-button>
+                            </div>
+                        </template>
+                        <div class="flex">
+                            <el-image
+                                :alt="content.productName"
+                                height="64px"
+                                :src="content.productImageUrl"
+                                width="64px"
+                            />
+                            <div class="right">
+                                <div class="flex">
+                                    <div class="name">{{ content.productName }}</div>
+                                    <div class="price">￥{{ content.payAmount }}</div>
+                                </div>
+                                <div class="flex">
+                                    <div class="sku">{{ content.skuDescribe || '默认规格' }}</div>
+                                    <div class="count">x{{ content.quantity || 1 }}</div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="footer">
-                        <el-button @click="handleOrder(content.orderId)">查看详情</el-button>
-                    </div>
-                </el-card>
-            </template>
-            <div v-else-if="messageType[props.message.type] === 'image'" class="content shadow">
-                <el-image
-                    alt="[图片消息]"
-                    :src="store.getters['chat/parseImage'](props.message.payload)"
-                    style="max-width: 240px"
-                />
-            </div>
-            <div v-else-if="messageType[props.message.type] === 'video'" class="shadow">
-                <video controls width="240">
-                    <source :src="store.getters['chat/parseVideo'](props.message.payload)" type="video/mp4" />
-                    <object
-                        :data="store.getters['chat/parseVideo'](props.message.payload)"
-                        height="240"
-                        width="320"
-                    ></object>
-                </video>
+                        <div class="footer">
+                            <el-button @click="handleOrder(content.orderId)">查看详情</el-button>
+                        </div>
+                    </el-card>
+                </template>
+                <div v-else-if="messageType[props.message.type] === 'image'" class="content shadow">
+                    <el-image
+                        alt="[图片消息]"
+                        :src="store.getters['chat/parseImage'](props.message.payload)"
+                        style="max-width: 240px"
+                    />
+                </div>
+                <div v-else-if="messageType[props.message.type] === 'video'" class="shadow">
+                    <video controls width="240">
+                        <source :src="store.getters['chat/parseVideo'](props.message.payload)" type="video/mp4" />
+                        <object
+                            :data="store.getters['chat/parseVideo'](props.message.payload)"
+                            height="240"
+                            width="320"
+                        ></object>
+                    </video>
+                </div>
+                <div v-else class="content shadow">
+                    {{ store.getters['chat/parseText'](props.message) }}
+                </div>
             </div>
-            <div v-else class="content shadow">
-                {{ store.getters['chat/parseText'](props.message) }}
+            <div class="time">
+                {{ store.getters['chat/parseTime'](props.message.createTimeStamp) }}
             </div>
-        </div>
-        <div v-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="time">
-            {{ store.getters['chat/parseTime'](props.message.createTimeStamp) }}
-        </div>
+        </template>
     </div>
 </template>