shop-admin/src/views/chat/message.vue

<template>
    <div
        class="message-item"
        :class="{
            [`--${messageType[props.message.type]}`]: true,
            '--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 }}
            </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>
                        </div>
                        <div class="flex">
                            <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 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-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="time">
            {{ store.getters['chat/parseTime'](props.message.createTimeStamp) }}
        </div>
    </div>
</template>

<script setup>
    const router = useRouter();
    const store = useStore();
    const props = defineProps({
        session: {
            type: Object,
            required: true,
        },
        message: {
            type: Object,
            required: true,
        },
    });
    const messageType = computed(() => store.state.chat.messageType);
    const content = computed(() => store.getters['chat/parseContent']({ ...props.message.payload }));
    const handleProduct = (id) => {
        router.push({
            name: 'UpdateProduct',
            params: {
                id,
                step: 2,
            },
        });
    };
    const handleProductDetail = (id) => {
        window.open(`${import.meta.env.VITE_BROWSER_URL}/goods/detail/${id}`, '_blank');
    };
    const handleOrder = (id) => {
        router.push({
            name: 'OrderDetail',
            params: {
                id,
            },
        });
    };
</script>

<style lang="less" scoped>
    .message-item {
        display: flex;
        & + .message-item {
            margin-top: @layout-space;
        }
        &:first-child {
            margin-top: @layout-space;
        }
        &:last-child {
            margin-bottom: @layout-space;
        }
        .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .product {
            cursor: pointer;
        }
        .avatar {
            margin: 0 @layout-space;
        }
        .name {
            font-size: 14px;
            margin-bottom: @layout-space-small;
        }
        .time {
            font-size: 12px;
            margin: auto @layout-space 0;
            color: #ccc;
        }
        .content {
            width: max-content;
            height: max-content;
            max-width: 300px;
            padding: @layout-space-small @layout-space;
            border-radius: @layout-border-radius;
            color: #000;
            background-color: #fff;
        }
        .el-card {
            max-width: 360px;
            :deep(.el-card__header) {
                padding: @layout-space;
            }
            :deep(.el-card__body) {
                padding: @layout-space;
            }
            .el-image {
                margin-right: @layout-space;
                flex-shrink: 0;
            }
            .service,
            .no {
                font-size: 14px;
            }
            .sku,
            .count {
                font-size: 12px;
                margin-top: @layout-space;
            }
            .price {
                flex-shrink: 0;
                font-size: 12px;
                color: var(--el-color-danger);
                margin-top: @layout-space;
            }
            .footer {
                margin-top: @layout-space;
                padding-top: @layout-space;
                border-top: 1px solid #eee;
                display: flex;
                justify-content: flex-end;
            }
        }
        .shadow {
            box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
        }
        &.--self {
            flex-direction: row-reverse;
            .message-body {
                text-align: right;
                .content {
                    color: #fff;
                    background-color: var(--el-color-primary);
                }
            }
        }
        &.--notify {
            .message-body {
                margin: auto;
                .content {
                    max-width: unset;
                    background-color: rgba(0, 0, 0, 0.05);
                    color: rgba(0, 0, 0, 0.3);
                    font-size: 14px;
                }
            }
        }
        &.--custom {
            .message-body {
                width: 300px;
            }
        }
    }
</style>