update

src/api/system/index.js

@@ -327,6 +327,20 @@ const system = {
             data: data
         });
     },
+    getExchangeLog: async (data) => {
+        return request({
+            method: MethodsENUM.POST,
+            url: "/task/getExchangeLog",
+            data: data
+        });
+    },
+    addExchangeLog: async (data) => {
+        return request({
+            method: MethodsENUM.POST,
+            url: "/task/addExchangeLog",
+            data: data
+        });
+    },
 }
 
 export default system;

src/components/XDropdownList.vue

@@ -15,6 +15,7 @@ const {option} = defineProps({
 const change = (id) => {
     modelValue.value = id;
     emits('change');
+    show.value = false;
 }
 </script>
 

src/pages/home/index.vue

@@ -105,7 +105,7 @@ onMounted(() => {
     <scroll-view
         @refresherpulling="initFetchData()"
         @scrolltolower="() => {
-            console.log('触发')
+            pagination.page++;
         }"
         class="h-[calc(100vh-200rpx)]"
         scroll-y>

src/pages/taskDetails/components/ReviewCommunication.vue

@@ -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>
 
+        <scroll-view
+            @scrolltolower="() => {
+                pagination.page++;
+            }"
+            class="max-h-[900rpx]"
+            scroll-y>
             <view class="chat-box">
-            <view class="!flex gap-[12rpx]">
+                <view v-for="v in vo.rows" class="!mb-[24rpx]">
-                <image class="!size-[80rpx]" mode="aspectFill" :src="avatar"></image>
+                    <view :class="['!flex gap-[12rpx]', v.right === 1 ? 'right-box' : '' ]">
-                <view class="flex-grow">
+                        <image class="!size-[80rpx] flex-shrink-0 rounded-[50%] overflow-hidden test" mode="aspectFill"
-                    <view class="time">07月21日 13:42</view>
+                               :src="v.people.avatar"></image>
-                    <view class="px-[24rpx] py-[16rpx] bg-[#fff] rounded-[8rpx]">
+                        <view class="flex-grow content !flex flex-col">
-                        123
+                            <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="['status', 'read']">
+                            <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
-                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]">
+            <reply-message-modal :data="data"></reply-message-modal>
-                <image :src="rback" class="!w-[22rpx]" mode="widthFix"></image>
-                发起申述
-            </x-button>
         </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;
     }
 }
 

src/pages/taskDetails/components/replyMessageModal.vue

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

src/utils/uils.js

@@ -143,22 +143,28 @@ export const uploadFile = ({count}) => {
         uni.chooseImage({
             count: count,
             success: ({tempFilePaths}) => {
-                const file = tempFilePaths[0];
+                const all = tempFilePaths.map(v => new Promise((res, rej) => {
                     uni.uploadFile({
                         url: BASEURL + '/upload/upload',
-                    filePath: file,
+                        filePath: v,
                         name: "file",
                         header: {
                             token: UserStore.token
                         },
                         success: ({data}) => {
-                        resolve(JSON.parse(data));
+                            res(JSON.parse(data).data);
                         },
                         fail: (err) => {
                             showToast(err.errMsg);
-                        reject(err);
+                            rej(err);
                         }
                     });
+                }));
+                Promise.all(all).then((res) => {
+                    resolve(res);
+                }).catch(err => {
+                    reject(err);
+                })
             },
             fail: (err) => {
                 showToast(err.errMsg);