update

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>
 
-        <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;
     }
 }