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

<template>
  <view class="page_padding">
    <view class="detailsbox flex flex-col overflow-hidden">
      <!-- 状态筛选标签 -->
      <TabsComponents
        :showBottomLine="false"
        :activeValue="activeStatus"
        :tabslist="statusTabs"
        @update="switchStatus"
      ></TabsComponents>
      <view class="detail_list flex flex-1 overflow-auto">
        <scroll-view
          style="height: 100%; flex: 1"
          scroll-y="true"
          lower-threshold="160"
          v-if="list.length > 0"
          @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.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.problemDes }}</text>
            </view>
            <view class="detailsMan">
              <text>投诉人：</text>
              <text>{{ item.complaintName }}</text>
            </view>
            <view class="detailsMan">
              <text>手机号：</text>
              <text>{{ item.phone }}</text>
            </view>
            <view class="detailsMan flex justify-between">
              <view class="">
                <text>投诉时间：</text>
                <text>{{ item.createTime }}</text>
              </view>
              <view class="actions" v-if="item.status === '待处理'">
                <text>处理</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="nodata" v-else>
          <span>暂无数据</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import TabsComponents from '@/components/tabs/tabs.vue'
import { getComplainList } from '@/api/complain.js'

const scrollTop = ref(0)
const activeStatus = ref(-1)
const statusTabs = [
  {
    name: '全部',
    value: -1
  },
  {
    name: '待处理',
    value: 3
  },
  {
    name: '已完成',
    value: 2
  }
]
// 切换状态（全部/待分配/待解决/已完成）筛选
const switchStatus = value => {
  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 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
  getComplainList(querySearch.value)
    .then(res => {
      list.value = [...list.value, ...res.rows]
      total.value = res.total
      // 判断是否还有更多
      hasMore.value = list.value.length < total.value
    })
    .catch(() => {
      uni.showToast({
        icon: 'error',
        title: '网络异常'
      })
    })
    .finally(() => {
      isLoading.value = false
    })
}

onShow(() => {
  resetList()
})
function resetList() {
  list.value = []
  querySearch.value.pageNum = 1
  querySearch.value.pageSize = 10
  hasMore.value = true
  init()
}

// actions
function handleComplaint(id) {
  uni.navigateTo({
    url: '/pageSubPack/complaint/Details_handle?id=' + id
  })
}

function scrolltolower() {
  // 必须加这两个判断！
  if (isLoading.value || !hasMore.value) {
    return
  }
  querySearch.value.pageNum += 1
  init()
}
</script>

<style scoped lang="scss">
.page_padding {
  background: #f9f9f9;
}
.detailsbox {
  flex: 1;
  background: #f9f9f9;
  padding: 20rpx 40rpx;
  justify-content: flex-start;
  align-items: stretch;
  .detail_list {
    margin-top: 20rpx;
    .item {
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      padding: 30rpx 36rpx 30rpx 54rpx;
      .title {
        font-weight: 400;
        font-size: 32rpx;
        color: #222222;
        line-height: 40rpx;
        margin-bottom: 10rpx;

        .status {
          width: 82rpx;
          height: 30rpx;
          border-radius: 198rpx 198rpx 198rpx 198rpx;
          font-weight: 400;
          font-size: 20rpx;
          color: #ffffff;
          line-height: 30rpx;
          text-align: center;
          margin-left: 20rpx;
          &.padding {
            background: #e34d59;
          }
          &.compluted {
            background: #4d5dfa;
          }
        }
      }
      .descrtion {
        font-weight: 450;
        font-size: 28rpx;
        color: #666666;
        line-height: 40rpx;
        margin-bottom: 20rpx;
        letter-spacing: 0rpx;
      }
      .detailsMan {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 40rpx;
        margin-bottom: 20rpx;

        .actions {
          width: 127rpx;
          height: 44rpx;
          background: #4d5dfa;
          border-radius: 198rpx 198rpx 198rpx 198rpx;
          text-align: center;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
          line-height: 44rpx;
        }
      }
    }

    .nodata {
      text-align: center;
      width: 100%;
      flex: 1;
    }
  }
}
</style>