feiniao-farm-h5/src/views/old_mini/chat_frame/index.vue

<template>
    <div class="dialogue">
        <custom-header :name="nameVal" bgColor="#f2f3f5"></custom-header>
        <chat-window :text="desc" :userId="userIdVal" :img="imgVal" @update:name="nameVal = $event"></chat-window>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { onActivated, onDeactivated, ref } from "vue";
import chatWindow from "@/components/chatWindow";
import { useRoute, useRouter } from "vue-router";
import eventBus from "@/api/eventBus";

const route = useRoute();
const router = useRouter();
const desc = ref("");
const nameVal = ref("");
const userIdVal = ref(null);
const imgVal = ref("");
onActivated(() => {
    userIdVal.value = null;
    eventBus.off("header:goback", headerCallBack);
    setTimeout(() => {
        const { text, name, userId, img } = route.query;
        desc.value = text;
        nameVal.value = name;
        userIdVal.value = userId;
        imgVal.value = img;
        eventBus.on("header:goback", headerCallBack);
    }, 100);
});

function headerCallBack() {
    if (desc.value) {
        router.go("-2");
    } else {
        router.go("-1");
    }
}

onDeactivated(() => {
    eventBus.off("header:goback", headerCallBack);
    VE_API.bbs.readUpdate({ targetUserId: userIdVal.value }).then((res) => {
        if (res.success) {
            eventBus.emit("isUpdateTotal");
        }
    });
});
</script>

<style lang="scss" scoped>
.dialogue {
    width: 100%;
    height: calc(100vh - 40px);
    background: #f2f3f5;
    box-sizing: border-box;
    .chat-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        border: 1px solid #e6e6e6;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }
}
</style>