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'" :src="v.url" class="recordItemConImg"></image>
            </view>
            <view  v-for="v in item.imageList" :key="v.id">
              <view v-if="v.format == 'video'" style="width: 400rpx;height: 240rpx;">
                <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>
  </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: []
    }
  },
  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.list = []
      this.form.pageNum = 1; // 重置页码到第一页
      this.fetchData()
    },
    // 加载更多数据（分页）
    loadMore() {
      console.log('上拉加载');
      if (this.isLoading) return
      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
          } else {
            const page = this.form.pageNum - 1
            this.form.pageNum = page
            uni.showToast({
              content: '已经加载全部'
            })
          }
        }
        this.isLoading = false;
        this.isRefreshing = false
        uni.stopPullDownRefresh();
      })
    },

    handlePreviewImage(list,index){
      const images = list.filter(item=> item.format == 'image')
      const filePaths = images.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-left: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
  margin-bottom: 20rpx;
  padding: 20rpx;
  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>