チャットルーム.vue

<template>
    <div class="chat-room">
        <div class="title">
            <span></span>
            <span>RMG Casino</span>
            <span @click="closeChat" class="close">—</span>
        </div>
        <div class="chat-con">
            <!-- RMG Robot -->
            <div class="allChat" v-for="(item, index) in chatContent" :key="index">
                <div class="avatar" v-if="item.role == 'robot_default' || item.role == 'robot_notice'">
                    <div class="left">
                        <n-avatar round size="large"
                            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdBqD4FvDsSftbRCT_Ewl2ACqMbdTRaKoiHQ&usqp=CAU" />
                    </div>
                    <div class="right">
                        <strong class="name">RMG Robot</strong>
                        <div class="con">{
   
   { item.message }}</div>
                    </div>
                </div>
                <div class="faq_con" v-if="item.role == 'robot'">
                    <div class="faqList" v-for="cell in item.message_list" :key="cell.value">
                        <div class="left_icon">
                            <n-icon :component="CashOutline" size="40" :depth="1" />

                        </div>
                        <div class="right_msg" @click="toLiveDetail(cell)">{
   
   { cell.message }}</div>
                    </div>
                </div>
                <div class="guidel" v-if="item.role == 'robot_guidel'">
                    {
   
   { item.message }}
                </div>
                <div class="user" v-if="item.role == 'user'">
                    <div class="user-con">
                        {
   
   { item.message }}
                    </div>
                </div>
            </div>
        </div>
        <div class="contact">
            <n-button>Contact Us</n-button>
        </div>
        <div class="send-msg">
            <n-input v-model:value="msg" type="text" placeholder="Enter to send" @keydown.enter.exact.native="sendMsg()" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, inject, Ref } from 'vue'
import { NIcon } from "naive-ui";
import { CashOutline } from '@vicons/ionicons5'
import MessageTips from 'src/utils/MessageUtil'
import {useLiveSupport} from 'src/store/liveSupport'
const msg = ref<string>()//输入框输入的内容
const showModal = inject<Ref<boolean>>('showModal')
const resultData = ref()
const liveSupport = useLiveSupport()
const {changeShowCom} = liveSupport
const chatContent = ref<any[]>([
    {
        role: 'robot_default',
        message: "Hello! Welcome to RMG Casino. Here are some hot topics you may want to read:",
        status: 'default'
    }
])
// 关闭弹窗
const closeChat = () => {
    showModal!.value = false
}
// 发送消息
const sendMsg = () => {
    if (!!!msg.value) { MessageTips.message.warning('please input something!'); return }
    let params = {
        role: "user",
        message: msg.value,
    }
    chatContent.value = []
    chatContent.value.push(params)
    msg.value = ''
    // 模拟调用后端接口，假设resultData 为后端返回的数据
    resultData.value = {
        role: "robot",
        message_list: [
            {
                role: "robot",
                message: "I am trying to make a deposit,but the payment is not going through.what can I do?",
                value: '1'
            },
            {
                role: "robot",
                message: "I am trying to make a deposit,but the payment is not going through.what can I do?",
                value: '2'
            },
            {
                role: "robot",
                message: "I am trying to make a deposit,but the payment is not going through.what can I do?",
                value: '3'
            },
            {
                role: "robot",
                message: "I am trying to make a deposit,but the payment is not going through.what can I do?",
                value: '4'
            }
        ]
    }

    setTimeout(() => {
        if (resultData.value!.message_list.length <= 4) {
            // 首部添加
            chatContent.value.push({
                role: 'robot_notice',
                message: "Here are the articles that might help",
                status: "notice"
            })
            chatContent.value.push(resultData.value)
            // 尾部添加
            chatContent.value.push({
                role: 'robot_guidel',
                message: "If none of them help, please ask another question or contact us.",
                status: "guidel"
            })
        }
        console.log(chatContent.value);

    }, 500)

}
// 点击faqList
const toLiveDetail = (cell:any) => {
    changeShowCom('0')
}
</script>
<style scoped lang="less">
.chat-room {
    height: 100%;
    position: relative;

    .title {
        display: flex;
        justify-content: space-between;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;

        .close {
            cursor: pointer;
        }
    }

    .chat-con {
        padding: 25px 20px 10px 10px;
        overflow: auto;
        height: 483px;
        box-sizing: border-box;

        &::-webkit-scrollbar {
            width: 5px;
            height: 10px;
        }

        &::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.1);
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: rgba(0, 0, 0, 0.1);
        }

        .avatar {
            display: flex;

            .left {
                margin-right: 15px;
            }

            .con {
                background-color: #f2f2f2;
                line-height: 20px;
                border-radius: 4px;
                padding: 5px;
                margin-top: 8px;
            }
        }

        .faq_con {
            border: 1px solid #ccc;
            padding: 8px 10px 8px 3px;
            border-radius: 4px;
            margin: 15px 0px 0px 55px;

            .faqList {
                display: flex;
                margin-top: 10px;
                cursor: pointer;

                .left_icon {
                    margin-right: 15px;
                }

                .right_msg {
                    text-decoration: underline;
                    color: skyblue;
                }
            }
        }

        .guidel {
            margin: 15px 0px 0px 55px;
            background-color: #f2f2f2;
            line-height: 20px;
            border-radius: 4px;
            padding: 5px;
        }

        .user {
            display: flex;
            justify-content: flex-end;

            .user-con {
                background-color: #f2f2f2;
                line-height: 20px;
                border-radius: 4px;
                padding: 5px;
                margin-top: 15px;
            }
        }


    }

    .contact {
        position: absolute;
        bottom: 55px;
        right: 6px;
    }

    .send-msg {
        // position: absolute;
        // bottom: 10px;
        // left: 0px;
        width: 100%;
    }
}</style>