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";
import QuickOperation from "./QuickOperation.vue";
import XImage from "../../../components/XImage.vue";

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

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

const {loading, pagination, initFetchData, fetchData} = useTableQuery({
    api: Api.system.getExchangeLog,
    uuid: true,
    parameter: po,
    callback: (data) => {
        console.log(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" 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">
                                <view v-html="v.content"></view>
                                <view v-if="v.image_arr.length > 0" class="!flex flex-wrap gap-2">
                                    <x-image v-for="v in v.image_arr" :src="v"
                                             style="width: 80rpx;height: 80rpx"></x-image>
                                </view>
                            </view>
                            <view class="px-[24rpx] py-[16rpx] bg-[#fff] rounded-[8rpx] test-24r text-[#4E5969]" v-else>
                                <view v-html="v.content"></view>
                                <view v-if="v.image_arr.length > 0">
                                    <x-image v-for="k in v.image_arr" :src="k" :list="v.image_arr"
                                             style="width: 70rpx;height: 70rpx"></x-image>
                                </view>
                            </view>
                            <view
                                :class="[v.status===0?'text_warn':'',v.status===1?'text_success':'',v.status===-1?'text_error':'', 'text_info']">
                                {{ v.status_text }}
                            </view>
                            <view :class="['status', v.is_read === 1 ? 'read' : 'unread']">
                                {{ v.is_read === 1 ? '已读' : '未读' }}
                            </view>
                        </view>
                    </view>

                    <view class="!flex justify-center !mt-[24rpx]" v-if="v.operate !== 0">
                        <QuickOperation :item="v" :operate="v.operate" :data="data"
                                        @success="fetchData"></QuickOperation>
                    </view>
                </view>

                <view class="w-full bg-white p-[24rpx] !mt-[24rpx] rounded-[8rpx]" v-if="vo.intervention?.id">
                    <view class="test-28r text-[#1D2129] text-center">达人发起了平台介入</view>
                    <view class="bg-[#F7F8FA] px-[24rpx] py-[15rpx] !mt-[20rpx]">
                        <view class="test-28r text-[#1D2129]">申诉原因</view>
                        <view class="bg-[#E5E6EB] w-2/3 h-[2rpx] !my-[8rpx]"></view>
                        <view class="text-[#4E5969] test-28r">
                            {{ vo.intervention.remark }}
                        </view>
                        <view class="!grid !grid-cols-5 gap-[20rpx]">
                            <view class="!w-full aspect-square border border-[#E5E6EB] p-[4rpx]"
                                  v-for="v in vo.intervention.image_arr">
                                <x-image class="!size-full" :src="v">
                                </x-image>
                            </view>
                        </view>
                    </view>
                    <view class="bg-[#F7F8FA] px-[24rpx] py-[15rpx] !mt-[20rpx]" v-if="vo.intervention.status === 1">
                        <view class="test-28r text-[#1D2129]">平台处理结果</view>
                        <view class="bg-[#E5E6EB] w-2/3 h-[2rpx] !my-[8rpx]"></view>
                        <view class="text-[#4E5969] test-28r">
                            {{ vo.intervention.intro }}
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>


        <view class="p-[24rpx] !pt-0 !flex gap-[22rpx]">
            <reply-message-modal :data="data" :intervention="true" @success="fetchData">
                <x-button class="!w-[220rpx]">
                    发起申述
                </x-button>
            </reply-message-modal>
            <reply-message-modal :data="data" @success="fetchData"></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;
}

.text_info {
    font-size: 20rpx;
    margin-top: 8rpx;
}

.text_success {
    color: rgba(0, 180, 42, 1);
}

.text_warn {
    color: rgba(255, 125, 0, 1);
}

.text_error {
    color: rgba(245, 63, 63, 1);
}
</style>