epmet-apartment-work-mp/pages/tabBar/xjPage/xjRecord.vue

<!-- 巡检记录 -->
<template>
  <scroll-view
    class="content"
    scroll-y
    refresher-enabled
    :refresher-triggered="isRefreshing"
    @refresherrefresh="refreshData"
    @scrolltolower="loadMore"
  >
    <view class="conItem" v-for="item in listData" :key="item.id">
      <view class="conItemTitle">
        <image src="/static/img/巡检记录列表里.png" class="titleImg"></image>
        <text class="titleName">{{ item.apartmentName }}</text>
      </view>
      <view class="conItemCon">
        <view class="recordItem">
          <view class="recordItemName">巡检问题</view>
          <view class="recordItemCon">{{ item.questionTypeName }}</view>
        </view>
        <view class="recordItem">
          <view class="recordItemName">标题内容</view>
          <view class="recordItemCon">{{ item.title }}</view>
        </view>
        <view class="recordItem">
          <view class="recordItemName">问题描述</view>
          <view class="recordItemCon">{{ item.content }}</view>
        </view>
        <view class="recordItem">
          <view class="recordItemName">图片/视频</view>
          <view class="recordItemCon" style="display: flex; flex-wrap: wrap">
            <view
              v-for="(v, index) in item.imageList"
              :key="v.id"
              @click="handlePreviewImage(item.imageList, index)"
            >
              <image
                v-if="v.format == 'image/png'"
                :src="v.url"
                class="recordItemConImg"
              ></image>
            </view>
            <view v-for="v in item.imageList" :key="v.id">
              <view
                v-if="v.format == 'video/mp4'"
                style="width: 420rpx; height: 240rpx; padding: 20rpx"
              >
                <video
                  id="myVideo"
                  style="width: 100%; height: 100%"
                  :src="v.url"
                  @error="videoErrorCallback"
                  controls
                ></video>
              </view>
            </view>
          </view>
        </view>
        <view class="recordItem">
          <view class="recordItemName">巡检日期</view>
          <view class="recordItemCon">{{ item.inspectionTime }}</view>
        </view>
      </view>
    </view>
    <view style="text-align: center" v-if="isLoading">加载中...</view>
    <view v-else-if="listData.length <= 0" class="no-data"> 暂无数据~ </view>
  </scroll-view>
</template>

<script>
import { queryDeptDropdownList } from "@/common/rec";
import { getdeptList, myInspection } from "@/common/api.js";
export default {
  data() {
    return {
      isLoading: false,
      isRefreshing: false,
      form: {
        pageNum: 1,
        pageSize: 10,
      },
      listData: [],
      noMore: false,
    };
  },
  onLoad() {
    this.refreshData();
  },
  methods: {
    getTree() {
      getdeptList().then(async (res) => {
        this.deptOptions = this.handleTree(
          res.data,
          "deptId",
          "parentId",
          "children",
          2
        );
        this.deptOptions = await this.getListByParentId(
          "1",
          this.deptOptions[0].children[0].deptId
        );
        // console.log(this.deptOptions);
      });
    },
    // 三级联动通用接口
    async getListByParentId(type, id) {
      return new Promise((resolve, reject) => {
        queryDeptDropdownList({ type, id }).then((res) => {
          resolve(res.data);
        });
      });
    },
    // 刷新数据
    refreshData() {
      console.log("下拉刷新");
      this.isRefreshing = true;
      this.noMore = false; // 新增
      this.listData = [];
      this.form.pageNum = 1; // 重置页码到第一页
      this.fetchData();
    },
    // 加载更多数据（分页）
    loadMore() {
      console.log("上拉加载");
      if (this.isLoading || this.noMore) return; // 新增 noMore 判断
      this.isLoading = true;
      this.form.pageNum++;
      this.fetchData();
    },
    // 获取数据的方法，模拟异步请求
    async fetchData() {
      myInspection(this.form).then((res) => {
        const tempList = res.rows;
        let page = this.form.pageNum;
        if (page == 1) {
          this.listData = tempList;
        } else {
          if (tempList.length > 0) {
            const list = [...this.listData, ...tempList];
            this.listData = list;
          }
        }
        // 判断是否还有更多
        if (tempList.length < this.form.pageSize) {
          this.noMore = true;
          if (page !== 1) {
            uni.showToast({
              content: "已经加载全部",
            });
          }
        }
        this.isLoading = false;
        this.isRefreshing = false;
        uni.stopPullDownRefresh();
      });
    },

    handlePreviewImage(list, index) {
      const filePaths = list
        .filter((item) => item.format == "image")
        .map((item) => item.url);
      uni.previewImage({
        urls: filePaths,
        current: index,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
  },
};
</script>

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

.conItem {
  width: calc(100% - 40rpx);
  border-radius: 10rpx;
  margin: 20rpx;
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

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

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

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

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

.recordItem {
  width: 100%;
  display: flex;
  margin-bottom: 10rpx;
}

.recordItemName {
  width: 22%;
  color: rgba(169, 175, 186, 1);
  font-size: 28rpx;
  text-align: right;
}

.recordItemCon {
  width: 75%;
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  text-align: left;
  margin-left: 3%;
}

.recordItemConImg {
  width: 145rpx;
  height: 145rpx;
  margin: 0 10rpx 10rpx 0;
}
</style>