update

src/components/Chat/Information.vue

@@ -0,0 +1,125 @@
+<script setup>
+import UploadButton from "../upload/UploadButton.vue";
+import XImage from "../XImage/Index.vue";
+import {reactive} from "vue";
+import Api from "../../api";
+import {Message} from "@arco-design/web-vue";
+import useTableQuery from "../../hooks/useTableQuery.js";
+import dayjs from "dayjs";
+
+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) => {
+        Object.assign(vo, data);
+    }
+});
+
+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();
+}
+</script>
+
+<template>
+    <div class="size-full flex flex-col gap-[30px]">
+        <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>
+        </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;
+    }
+}
+
+.chat-left {
+
+}
+</style>