epmet-apartment-work-mp/pagesA/bsPage/bsRecord.vue

<!-- 报事记录 -->
<template>
  <scroll-view
    class="content"
    scroll-y="true"
    refresher-enabled
    :refresher-triggered="isRefreshing"
    @refresherrefresh="refreshData"
    @scrolltolower="loadMore"
  >
    <view class="conItem" v-for="(item, index) in repairList" :key="index">
      <view class="conItemTitle">
        <image :src="srcUrl(item.feedbackType)" class="titleImg"></image>
        <text class="titleName">{{ feedbackTypeText(item.feedbackType) }}</text>
      </view>
      <view class="conItemCon">
        <view class="repairInfo">
          <view class="infoRow">
            <text class="label">问题描述：</text>
            <text class="value">{{ item.faultDescribe }}</text>
          </view>
          <view class="infoRow">
            <text class="label">图片/视频：</text>
            <view
              class="image-preview-item"
              v-for="(u, t) in item.images"
              :key="t"
              @click="previewImage(item.images, t)"
            >
              <image
                :src="u.url"
                class="problemImage"
                mode="aspectFill"
              ></image>
            </view>
          </view>
          <view class="infoRow">
            <text class="label">报事人：</text>
            <text class="value">{{ item.graduateName }}</text>
          </view>
          <view class="infoRow">
            <text class="label">报事人电话：</text>
            <text class="value">{{ item.telephone }}</text>
          </view>
          <view class="infoRow">
            <text class="label">上报时间：</text>
            <text class="value">{{ item.createTime }}</text>
          </view>
        </view>
        <view class="actionButtons">
          <button class="btn process" @click="handleProcess(item)">处理</button>
          <!-- <button class="btn dispatch" @click="handleDispatch(item)">
            派单
          </button> -->
        </view>
      </view>
    </view>
    <view style="text-align: center" v-if="isLoading">加载中...</view>
    <view v-else-if="repairList.length <= 0" class="no-data"> 暂无数据~ </view>
  </scroll-view>
</template>

<script>
import { listReport } from "@/pages/api";
export default {
  data() {
    return {
      isRefreshing: false,
      feedbackTypeOptions: [
        { value: 1, label: "安全问题", url: "/static/img/维修列表里.png" },
        { value: 2, label: "卫生问题", url: "/static/img/列表里图标.png" },
        { value: 3, label: "服务问题", url: "/static/img/问题投诉列表里.png" },
        { value: 4, label: "噪音问题", url: "/static/img/列表里图标.png" },
        { value: 5, label: "体验问题", url: "/static/img/列表里图标.png" },
        { value: 6, label: "其他", url: "/static/img/问题投诉列表里.png" },
      ],
      noMore: false,
      isLoading: false,
      repairList: [],
      form: {
        pageNum: 1,
        pageSize: 10,
      },
      total: "",
    };
  },
  onLoad() {
    this.getList();
  },
  computed: {
    processStatusText() {
      return (state) => {
        switch (state) {
          case 0:
            return "待处理";
          case 1:
            return "处理中";
          case 2:
            return "已处理";
          case 3:
            return "不予处理";
          default:
            return "";
        }
      };
    },
    feedbackTypeText() {
      return (type) => {
        const feedbackTypeObj = this.feedbackTypeOptions.find(
          (item) => item.value === type
        );
        return feedbackTypeObj ? feedbackTypeObj.label : "";
      };
    },
    srcUrl() {
      return (type) => {
        const feedbackTypeObj = this.feedbackTypeOptions.find(
          (item) => item.value === type
        );
        return feedbackTypeObj ? feedbackTypeObj.url : "";
      };
    },
  },
  methods: {
    // 报事列表
    async getList() {
      const res = await listReport(this.form);
      if (res.code === 200) {
        this.repairList = res.rows;
        this.total = res.total;
        if (res.total <= this.form.pageSize * this.form.pageNum) {
          this.noMore = true;
        }
        this.isLoading = false;
        this.isRefreshing = false;
        if (this.form.pageNum == 1) {
          this.repairList = res.rows;
        } else {
          this.repairList = [...this.repairList, ...res.rows];
        }
      }
    },
    refreshData() {
      this.isRefreshing = true;
      this.noMore = false; // 新增
      this.repairList = [];
      this.form.pageNum = 1; // 重置页码到第一页
      this.getList();
    },
    // 加载更多数据（分页）
    loadMore() {
      if (this.isLoading || this.noMore) return; // 新增 noMore 判断
      this.isLoading = true;
      this.form.pageNum++;
      this.getList();
    },
    previewImage(item, index) {
      uni.previewImage({
        current: index,
        urls: item.map((item) => item.url),
        success: (res) => {
          console.log("预览成功");
        },
        fail: (err) => {
          console.log("预览失败", err);
        },
      });
    },
    handleProcess(item) {
      uni.navigateTo({
        url: `/pagesA/bsPage/bsHandle?id=${item.id}`,
      });
    },
    handleDispatch(item) {
      console.log("派单", item);
      // 派单逻辑
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: rgba(248, 248, 248, 1);
  padding: 20rpx;
  box-sizing: border-box;
}

.conItem {
  width: 100%;
  border-radius: 10rpx;
  background-color: rgba(255, 255, 255, 1);
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.conItemTitle {
  display: flex;
  width: 100%;
  margin-bottom: 20rpx;
  align-items: center;
}

.titleImg {
  width: 38rpx;
  height: 38rpx;
}

.titleName {
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  text-align: left;
  margin-left: 10rpx;
  font-weight: bold;
}

.conItemCon {
  width: 100%;
}

.repairInfo {
  width: 100%;
  background-color: rgba(249, 249, 249, 1);
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}

.infoRow {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
  line-height: 1.5;
  flex-wrap: wrap;
}

.label {
  color: #a9afba;
  font-size: 28rpx;
  min-width: 156rpx;
  flex-shrink: 0;
  text-align: right;
}

.value {
  color: rgba(0, 0, 0, 1);
  font-size: 26rpx;
  flex: 1;
}

.problemImage {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-top: 5rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.actionButtons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20rpx;
  margin-left: auto;
  gap: 20rpx;
  width: fit-content;
}

.btn {
  width: 130rpx;
  height: 52rpx;
  line-height: 46rpx;
  border-radius: 52rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(8, 179, 179, 1);
  font-size: 28rpx;
  text-align: center;
  font-family: AlibabaPuHui-regular;
  border: 2rpx solid rgba(8, 179, 179, 1);
}

.dispatch {
  border-color: #ff8c00;
  color: #ff8c00;
}
</style>