root/xl-root
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-05-26 19:46:42 +08:00
parent b62c715dfd
commit c302c8ae50
12 changed files with 537 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/Chat/Information.vue Normal file
View File

@@ -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>

90
src/components/Chat/index.vue Normal file
View File

@@ -0,0 +1,90 @@
<script setup>
import XSelect from "../XSelect/index.vue";
import Information from "./Information.vue";
import dayjs from "dayjs";
const {task} = defineProps({
task: {
type: Object,
default: null
}
});
const visible = defineModel('visible');
</script>
<template>
<a-modal
class="Chat"
width="1200px"
title="沟通记录"
:footer="false"
title-align="start"
v-model:visible="visible">
<a-alert>
平台提示：所有沟通内容均由人工审核，请勿脱离平台交易，请勿发送违规内容，违者永久封禁
</a-alert>
<div class="flex">
<div class="p-[20px] bg-[#F2F3F5] flex-grow min-h-[800px] relative">
<Information :task="task" v-if="visible"></Information>
</div>
<div class="w-[280px] h-auto flex flex-col bg-[#F2F3F5] gap-[20px]" v-if="task">
<div class="bg-white p-[20px]">
<div class="mb-[20px] text-[16px]">进度管理</div>
<x-select placeholder="待回复" api=""></x-select>
<a-divider></a-divider>
<div class="mb-[20px] text-[16px]">进度管理</div>
<div class="grid grid-cols-2 gap-y-[12px]">
<div class="text-[#86909C]">创建时间</div>
<div class="#1D2129">{{ dayjs(task.createtime * 1000).format('MM-DD HH:mm') }}</div>
<div class="text-[#86909C]">任务编号</div>
<div class="#1D2129">{{ task.taskcode }}</div>
<div class="text-[#86909C]">子任务编号</div>
<div class="#1D2129">{{ task.uid }}</div>
<div class="text-[#86909C]">子任务状态</div>
<div class="#1D2129">
<a-tag v-if="task.status === 0" color="red">待上传素材</a-tag>
<a-tag v-if="task.status === 1" color="orangered">素材审核中</a-tag>
<a-tag v-if="task.status === 2" color="orangered">重新上传素材</a-tag>
<a-tag v-if="task.status === 3" color="gray">待领取</a-tag>
<a-tag v-if="task.status === 4" color="green">已领取</a-tag>
<a-tag v-if="task.status === 5" color="green">已结算</a-tag>
<a-tag v-if="task.status === 6" color="arcoblue">已终止</a-tag>
</div>
<div class="text-[#86909C]">子任务结算进度</div>
<div class="#1D2129">
<a-tag v-if="task.is_settlement === 0" color="orangered">{{ task.settlement_text }}</a-tag>
<a-tag v-if="task.is_settlement === 1" color="gray">{{ task.settlement_text }}</a-tag>
<a-tag v-if="task.is_settlement === 2" color="green">{{ task.settlement_text }}</a-tag>
<a-tag v-if="task.is_settlement === -1" color="arcoblue">{{ task.settlement_text }}</a-tag>
</div>
<div class="text-[#86909C]">结算金额(元)</div>
<div class="#1D2129">{{ (task.real_coin / 100).toFixed(2) }}</div>
<div class="text-[#86909C]">达人账号</div>
<div class="#1D2129">{{ task.account }}</div>
</div>
</div>
<div class="flex-grow bg-white p-[20px]">
<div class="mb-[20px] text-[16px]">达人回填信息</div>
/
</div>
</div>
</div>
</a-modal>
</template>
<style lang="scss">
.Chat {
.arco-modal-body {
padding: 0;
.arco-textarea-wrapper {
background-color: #fff;
border: none;
}
}
}
</style>
<style scoped lang="scss">
</style>