对接 投诉详情 投诉列表 选择处理人员 api

wuye-manager-uniapp/pageSubPack/complaint/Details.vue

@@ -9,21 +9,28 @@
       ></TabsComponents>
 
       <view class="detail_list flex flex-1 overflow-auto">
-        <scroll-view scroll-y="true">
-          <view class="item" v-for="(item, index) in list" :key="index" @tap="handleComplaint">
+        <scroll-view scroll-y="true" lower-threshold="160" @scrolltolower="scrolltolower">
+          <view
+            class="item"
+            v-for="(item, index) in list"
+            :key="index"
+            @tap="handleComplaint(item.id)"
+          >
             <view class="title flex items-center">
-              <text>{{ item.title }}</text>
-              <view class="status padding" v-if="item.status === 0"> <text>待处理</text> </view>
+              <text>{{ item.typeName }}</text>
+              <view class="status padding" v-if="item.status === '待处理'">
+                <text>待处理</text>
+              </view>
               <view class="status compluted" v-else>
                 <text>已完成</text>
               </view>
             </view>
             <view class="descrtion">
-              <text>{{ item.desction }}</text>
+              <text>{{ item.problemDes }}</text>
             </view>
             <view class="detailsMan">
               <text>投诉人：</text>
-              <text>{{ item.user }}</text>
+              <text>{{ item.complaintName }}</text>
             </view>
             <view class="detailsMan">
               <text>手机号：</text>
@@ -32,9 +39,9 @@
             <view class="detailsMan flex justify-between">
               <view class="">
                 <text>投诉时间：</text>
-                <text>{{ item.time }}</text>
+                <text>{{ item.createTime }}</text>
               </view>
-              <view class="actions" v-if="item.status === 0">
+              <view class="actions" v-if="item.status === '待处理'">
                 <text>处理</text>
               </view>
             </view>
@@ -45,18 +52,22 @@
   </view>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
 import TabsComponents from '@/components/tabs/tabs.vue'
-const activeStatus = ref(0)
+import { getComplainList } from '@/api/complain.js'
+
+const scrollTop = ref(0)
+const activeStatus = ref(-1)
 const statusTabs = [
   {
     name: '全部',
-    value: 0
+    value: -1
   },
   {
     name: '待处理',
-    value: 1
+    value: 0
   },
   {
     name: '已完成',
@@ -64,57 +75,74 @@ const statusTabs = [
   }
 ]
 // 切换状态（全部/待分配/待解决/已完成）筛选
-const switchStatus = value => {
+const switchStatus = (value: number) => {
   activeStatus.value = value
+  if (value === -1) {
+    querySearch.value.status = undefined
+  } else {
+    querySearch.value.status = value
+  }
+
+  querySearch.value.pageNum = 1
+  querySearch.value.pageSize = 10
+  hasMore.value = true
+  isLoading.value = false
+  scrollTop.value = 0
+  list.value = []
+  init()
 }
 //
-const list = [
-  {
-    title: '小区环境',
-    status: 0, // 0 待处理 1 已完成
-    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    user: '胡小小',
-    phone: '19113212388',
-    time: '2023-08-01 10:05:46'
-  },
-  {
-    title: '小区环境',
-    status: 1, // 0 待处理 1 已完成
-    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    user: '胡小小',
-    phone: '19113212388',
-    time: '2023-08-01 10:05:46'
-  },
-  {
-    title: '小区环境',
-    status: 1, // 0 待处理 1 已完成
-    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    user: '胡小小',
-    phone: '19113212388',
-    time: '2023-08-01 10:05:46'
-  },
-  {
-    title: '小区环境',
-    status: 0, // 0 待处理 1 已完成
-    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    user: '胡小小',
-    phone: '19113212388',
-    time: '2023-08-01 10:05:46'
-  },
-  {
-    title: '小区环境',
-    status: 1, // 0 待处理 1 已完成
-    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    user: '胡小小',
-    phone: '19113212388',
-    time: '2023-08-01 10:05:46'
-  }
-]
 
-function handleComplaint() {
-  uni.navigateTo({
-    url: '/pageSubPack/complaint/Details_handle'
+const total = ref(0) //
+const isLoading = ref(false) // 加载锁
+const hasMore = ref(true) // 是否还有更多数据
+const list = ref([])
+const querySearch = ref({
+  pageSize: 10,
+  pageNum: 1,
+  status: undefined // 0 待处理 1 已完成
+})
+function init() {
+  // 1. 如果正在加载或没有更多数据，直接返回
+  if (isLoading.value || !hasMore.value) return
+  // 2. 开启锁
+  isLoading.value = true
+  uni.showLoading({
+    title: '加载中',
+    mask: true
   })
+  getComplainList(querySearch.value)
+    .then(res => {
+      list.value = [...list.value, ...res.rows]
+      total.value = res.total
+      // 判断是否还有更多
+      hasMore.value = list.value.length < total.value
+    })
+    .finally(() => {
+      isLoading.value = false
+      uni.hideLoading()
+    })
+}
+
+onShow(() => {
+  hasMore.value = true
+  init()
+})
+
+// actions
+function handleComplaint(id: string) {
+  uni.navigateTo({
+    url: '/pageSubPack/complaint/Details_handle?id=' + id
+  })
+}
+
+function scrolltolower() {
+  // 必须加这两个判断！
+  if (isLoading.value || !hasMore.value) {
+    return
+  }
+  querySearch.value.pageNum += 1
+  init()
 }
 </script>
 
@@ -128,12 +156,11 @@ function handleComplaint() {
   padding: 20rpx 40rpx;
   .detail_list {
     .item {
-      height: 390rpx;
       background: #ffffff;
       border-radius: 16rpx;
       margin-bottom: 20rpx;
       box-sizing: border-box;
-      padding: 30rpx 36rpx 55rpx 54rpx;
+      padding: 30rpx 36rpx 30rpx 54rpx;
       .title {
         font-weight: 400;
         font-size: 32rpx;