126 lines
3.9 KiB
Vue
126 lines
3.9 KiB
Vue
|
<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>
|