xl-mobile/src/pages/taskDetails/components/ReviewCommunication.vue

<script setup>
import XNoticeBar from "../../../components/XNoticeBar.vue";
import XButton from "../../../components/XButton.vue";
import {reactive} from 'vue';
import Api from "../../../api/index.js";
import useTableQuery from "../../../hooks/useTableQuery.js";
import dayjs from "dayjs";
import ReplyMessageModal from "./replyMessageModal.vue";

const {data} = defineProps({
    data: {
        type: Object,
        default: {},
    }
});

const po = reactive({
    id: data.children.id,
});
const vo = reactive({});

const {loading, pagination, initFetchData, fetchData} = useTableQuery({
    api: Api.system.getExchangeLog,
    parameter: po,
    callback: (data) => {
        Object.assign(vo, data);
    }
});
</script>

<template>
    <!--审核沟通-->
    <view class="context">
        <x-notice-bar status="success" text="平台提示：所有沟通内容均由人工审核，请勿脱离平台"></x-notice-bar>

        <scroll-view
            @scrolltolower="() => {
                pagination.page++;
            }"
            class="max-h-[900rpx]"
            scroll-y>
            <view class="chat-box">
                <view v-for="v in vo.rows" class="!mb-[24rpx]">
                    <view :class="['!flex gap-[12rpx]', v.right === 1 ? 'right-box' : '' ]">
                        <image class="!size-[80rpx] flex-shrink-0 rounded-[50%] overflow-hidden test" mode="aspectFill"
                               :src="v.people.avatar"></image>
                        <view class="flex-grow content !flex flex-col">
                            <view class="time">{{ dayjs(v.createtime).format('MM月DD日 HH:mm') }}</view>
                            <view class="px-[24rpx] py-[16rpx] bg-[#fff] rounded-[8rpx]" v-if="v.pattern===1"
                                  v-html="v.content">
                            </view>
                            <view class="px-[24rpx] py-[16rpx] bg-[#fff] rounded-[8rpx] test-24r text-[#4E5969]" v-else
                                  v-html="v.content">
                            </view>
                            <view :class="['status', v.is_read === 1 ? 'read' : 'unread']">
                                {{ v.is_read === 1 ? '已读' : '未读' }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

        <view class="p-[24rpx] !pt-0 !flex gap-[22rpx]">
            <x-button class="!w-[220rpx]">
                发起申述
            </x-button>
            <reply-message-modal :data="data"></reply-message-modal>
        </view>
    </view>
</template>

<style scoped lang="scss">
.prompt-button {
    color: var(--primary-color);
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    background-color: #E8F3FF;
    padding: 15rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4rpx;
}

.prompt {
    padding: 18rpx 30rpx;
    background-color: #F2F3F5;
    color: rgb(134, 144, 156);
    font-size: 22rpx;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 18rpx;
}

.content {
    @apply items-start;
}

.right-box {
    @apply flex-row-reverse;
    .content {
        @apply items-end;
    }
}

.status {
    margin-top: 8rpx;
    color: rgb(29, 33, 41);
    font-size: 20rpx;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 8rpx;

    &::before {
        content: '';
        border-radius: 50%;
        display: block;
        width: 24rpx;
        height: 24rpx;

    }
}

.read {
    &::before {
        background-color: var(--primary-color);
    }
}

.unread {
    &::before {
        border: 4rpx solid rgb(229, 230, 235);
        background-color: #fff;
    }
}

.context {
    background-color: #F2F3F5;
    width: 100%;
}

.time {
    color: rgb(134, 144, 156);
    font-size: 20rpx;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    margin-bottom: 8rpx;
}

.chat-box {
    box-sizing: border-box;
    padding: 24rpx;
}
</style>