xl-root/src/components/Chat/Information.vue

<script setup>
import UploadButton from "../upload/UploadButton.vue";
import XImage from "../XImage/Index.vue";
import {reactive, useTemplateRef} from "vue";
import Api from "../../api";
import {Message} from "@arco-design/web-vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import dayjs from "dayjs";
import {throttle} from "lodash";

const ChatBoxRef = useTemplateRef('ChatBox');
const {task} = defineProps({
    task: {
        type: Object,
        default: {}
    }
});
const po = reactive({
    id: task.id,
});
const vo = reactive({
    rows: [],
    total: 0,
});
const form = reactive({
    content: null,
    images: [],
});

const {loading, pagination, initFetchData, fetchData} = useTableQuery({
    parameter: po,
    api: Api.merchant.getExchangeLog,
    callback: (data) => {
        if (data.rows.length === 0) {
        } else {
            vo.total = data.total;
            vo.rows.push(...data.rows);
        }
    }
});

const send = async () => {
    const {msg} = await Api.merchant.addExchangeLog({
        id: task.id,
        ...form,
    });
    Message.success(msg);
    form.content = null;
    form.images.length = 0;
    await fetchData();
}

const handleScroll = ({target}) => {
    const {scrollTop, clientHeight, scrollHeight} = target;
    if (scrollTop + clientHeight >= scrollHeight - 10 && !loading.value) {
        throttle(() => {
            pagination.current++;
        }, 500)();
    }
}
</script>

<template>
    <div
        @scroll="handleScroll"
        class="size-full flex flex-col gap-[30px] max-h-[600px] overflow-auto">
        <div :class="['flex gap-[18px]', v.right === 0 ? 'chat-right' : 'chat-left']" v-for="v in vo.rows">
            <a-image :src="v.people.avatar" class="rounded-[50%] overflow-hidden" width="64px"
                     height="64px"></a-image>
            <div class="content-box flex flex-col">
                <div class="text-[#86909C] text-[12px]">{{ dayjs(v.createtime).format('MM月DD日 HH:mm') }}</div>
                <div class="bg-white p-[16px] max-w-[330px]">
                    <div v-html="v.content"></div>
                    <div class="flex gap-[12px] mt-[12px]" v-if="v.image_arr.length > 0">
                        <x-image
                            class="flex-shrink-0"
                            v-for="(v, index) in v.image_arr"
                            :hide-delete="true"
                            :key="index"
                            width="50px"
                            height="50px"
                            :src="v">
                        </x-image>
                    </div>
                </div>
                <div class="msg-state text-[14px] text-[#1D2129] mt-[4px]">
                    已读
                </div>
            </div>
        </div>
    </div>

    <div
        class="bg-white rounded-[2px] w-[calc(100%-40px)] h-[144px] absolute left-0 bottom-[20px] mx-[20px] py-[8px]">
        <a-textarea
            v-model:model-value="form.content"
            class="w-full h-full"
            placeholder="提示：商家可主动发起一次自定义私信，若达人没有回复，则不能继续发送。仅当达人回复后，商家可发送3次私信。">
        </a-textarea>
        <a-button type="primary" class="absolute right-[12px] bottom-[12px] z-[2]" @click="send">
            <template #icon>
                <icon-send/>
            </template>
            发送
        </a-button>
        <a-button class="absolute right-[110px] bottom-[12px] z-[2]">
            <template #icon>
                <icon-robot/>
            </template>
            申请平台介入
        </a-button>

        <div class="flex gap-[12px] absolute bottom-[12px] left-[12px] rounded-[6px] z-[2]">
            <x-image
                class="flex-shrink-0"
                v-for="(v, index) in form.images"
                :key="index"
                width="32px"
                height="32px"
                :src="v">
            </x-image>
            <upload-button :api="Api.system.uploadFile2" @success="e => form.images.push(e)">
                <template v-slot:upload-button>
                    <div
                        class="size-[32px] bg-[#F2F3F5] flex justify-center items-center flex-col rounded-[8px] cursor-pointer">
                        <icon-image/>
                    </div>
                </template>
            </upload-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.chat-right {
    @apply flex-row-reverse;
    .content-box {
        @apply items-end;
    }
}

.msg-state {
    @apply flex items-center gap-[8px];
    &::before {
        content: '';
        @apply block size-[14px] rounded-[50%];
    }
}

.read {
    &::before {
        @apply bg-[rgb(var(--arcoblue-6))];
    }
}

.unRead {
    &::before {
        @apply bg-[rgb(var(--orange-6))];
    }
}

.chat-left {

}
</style>