root/xl-mobile
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-27 19:01:45 +08:00
parent 57d0caa0a9
commit 3c812c37e7
7 changed files with 186 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/pages/taskDetails/components/ReviewCommunication.vue
View File

@@ -1,59 +1,71 @@
<script setup>
import ysq from "../../../static/icons/ysq.png";
import avatar from "../../../static/images/Avatar.png";
import XNoticeBar from "../../../components/XNoticeBar.vue";
import XButton from "../../../components/XButton.vue";
import rback from "../../../static/icons/rout-back.png";
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"></x-notice-bar>
<x-notice-bar status="success" text="平台提示：所有沟通内容均由人工审核，请勿脱离平台"></x-notice-bar>
<view class="chat-box">
<view class="!flex gap-[12rpx]">
<image class="!size-[80rpx]" mode="aspectFill" :src="avatar"></image>
<view class="flex-grow">
<view class="time">07月21日 13:42</view>
<view class="px-[24rpx] py-[16rpx] bg-[#fff] rounded-[8rpx]">
123
</view>
<view :class="['status', 'read']">
未读
<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>
<view
class="bg-[#fff] !w-[460rpx] p-[24rpx] rounded-[8rpx] !mx-auto !mt-[24rpx] !flex flex-col gap-[16rpx]">
<view class="prompt">
<image class="!w-[26rpx]" :src="ysq" mode="widthFix"></image>
提示：点击下方按钮，快速回复
</view>
<view class="prompt-button">
我已重新回填
</view>
<view class="prompt-button">
拒绝修改并放弃任务
<view class="!mt-[16rpx] text-[#86909C] test-22r">
商家将根据约定扣钱或不结算
</view>
</view>
<view class="prompt-button">
发起申诉
</view>
</view>
</view>
</scroll-view>
<view class="p-[24rpx] !pt-0 !flex gap-[22rpx]">
<x-button class="!w-[220rpx]">
发起申述
</x-button>
<x-button class="flex-grow !flex gap-[16rpx]">
<image :src="rback" class="!w-[22rpx]" mode="widthFix"></image>
发起申述
</x-button>
<reply-message-modal :data="data"></reply-message-modal>
</view>
</view>
</template>
@@ -88,6 +100,17 @@ import rback from "../../../static/icons/rout-back.png";
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);
@@ -117,7 +140,8 @@ import rback from "../../../static/icons/rout-back.png";
.unread {
&::before {
background-color: var(--warning-color);
border: 4rpx solid rgb(229, 230, 235);
background-color: #fff;
}
}

84
src/pages/taskDetails/components/replyMessageModal.vue Normal file
View File

@@ -0,0 +1,84 @@
<script setup>
import {ref, reactive} from "vue";
import XModal from "../../../components/XModal.vue";
import rback from "../../../static/icons/rout-back.png";
import XButton from "../../../components/XButton.vue";
import {showToast, uploadFile} from "../../../utils/uils.js";
import Api from "../../../api/index.js";
const {data} = defineProps({
data: {
type: Object,
default: {},
}
});
const show = ref(false);
const form = reactive({
id: data.children.id,
content: null,
images: [],
pattern: 0,
});
const upload = async () => {
const res = await uploadFile({
count: 9,
});
form.images.push(...res);
}
const success = async () => {
const {msg} = await Api.system.addExchangeLog(form);
showToast(msg);
form.images.length = 0;
form.content = null;
form.pattern = 0;
show.value = false;
}
</script>
<template>
<x-button class="flex-grow !flex gap-[16rpx]" @click="show=true">
<image :src="rback" class="!w-[22rpx]" mode="widthFix"></image>
回复
</x-button>
<x-modal
v-model:show="show">
<view class="w-full px-[32rpx] py-[40rpx] !flex flex-col items-start">
<view @click="upload" class="bg-[#E8F3FF] text-[var(--primary-color)] px-[32rpx] py-[8rpx] rounded-[4rpx]">
<tui-icon name="plus" color="var(--primary-color)" :size="18"></tui-icon>
添加图片
</view>
<view class="!flex gap-[20rpx] flex-wrap !mt-[20rpx]">
<view class="!size-[100rpx] image-box relative" v-for="(v, index) in form.images">
<image :src="v" class="!size-full" mode="aspectFit"></image>
<view
@click="form.images.splice(index, 1)"
class="!size-[48rpx] bg-[#1D2129] rounded-[50%] absolute right-0 top-0 !flex justify-center items-center">
<tui-icon name="plus" color="#ffffff" :size="18" style="transform: rotate(45deg)"></tui-icon>
</view>
</view>
</view>
<view class="!mt-[20rpx] bg-[#F2F3F5] rounded-[4rpx] py-[16rpx] px-[30rpx]">
<textarea v-model="form.content" placeholder="请输入申诉原因"></textarea>
</view>
<view class="text-[#86909C] test-24r !mt-[20rpx]">提示：请确认内容无误后提交，提交虚假回复会封号</view>
<view class="w-full h-[1px] bg-[rgba(136,144,155,.3)] !mt-[40rpx] !mb-[12rpx]"></view>
<tui-button height="80rpx" @click="success">提交</tui-button>
</view>
</x-modal>
</template>
<style scoped lang="scss">
.image-box {
border: 1px solid rgb(229, 230, 235);
border-radius: 2px;
}
</style>