usky-web-mobile/src/pages/business/mhxf/fireReport/index.vue

<template>
  <view class="fireReport" style="background-color: #f7f7f7">
    <u-empty v-if="!dataRes" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
    <view class="reportContent" v-else>
      <view class="contentDom" v-for="(li, index) in dataList" :key="index">
        <view style="margin: auto 10px auto 0" @click="handleSelect()">
          <u-image src="@/static/images/fireReport/icon1.png" width="13px" height="13px"></u-image>
        </view>
        <view style="margin: 0 auto 0 0" @click="handleSelect()">
          <view>{{ li.title }}</view>
        </view>
        <view>
          <view style="color: #3c9cff; cursor: pointer" @click="handleDownload">下载报告</view>
        </view>
      </view>
      <u-loadmore :status="status" />
    </view>
  </view>
</template>

<script setup>
import { onReady, onLoad, onShow, onReachBottom, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance } from "vue";
import publicStore from "@/store/modules/public";

import {} from "@/api/business/mhxf/informationSelect";

const { proxy } = getCurrentInstance();

const publicStores = publicStore(); //全局公共Store

const dataRes = ref(true);
const dataList = ref([
  {
    value: 1,
    title: "2023年1月份单位消防报告",
  },
  {
    value: 2,
    title: "2023年2月份单位消防报告",
  },
  {
    value: 3,
    title: "2023年3月份单位消防报告",
  },
  {
    value: 4,
    title: "2023年4月份单位消防报告",
  },
  {
    value: 5,
    title: "2023年5月份单位消防报告",
  },
  {
    value: 6,
    title: "2023年6月份单位消防报告",
  },
  {
    value: 7,
    title: "2023年7月份单位消防报告",
  },
  {
    value: 8,
    title: "2023年8月份单位消防报告",
  },
  {
    value: 9,
    title: "2023年9月份单位消防报告",
  },
  {
    value: 10,
    title: "2023年10月份单位消防报告",
  },
  {
    value: 11,
    title: "2023年11月份单位消防报告",
  },
  {
    value: 11,
    title: "2023年11月份单位消防报告",
  },
  {
    value: 11,
    title: "2023年11月份单位消防报告",
  },
  {
    value: 11,
    title: "2023年11月份单位消防报告",
  },
  {
    value: 11,
    title: "2023年11月份单位消防报告",
  },
  {
    value: 11,
    title: "2023年11月份单位消防报告",
  },
]);
const status = ref("loadmore");
const list = ref(15);
const page = ref(0);

/**
 * @列表点击事件
 */
function handleSelect() {
  proxy.$tab.navigateTo("/pages/business/mhxf/fireReport/components/detailed");

  // uni.navigateBack({
  //   delta: 1,
  // });
}

function handleDownload() {
  proxy.$modal.loading("报告下载中，请耐心等待...");

  setTimeout(() => {
    proxy.$modal.closeLoading();
  }, 2000);
}

watchEffect(() => {});

onReachBottom(() => {
  if (page.value >= 3) return;
  status.value = "loading";
  page.value = ++page.value;
  setTimeout(() => {
    list.value += 10;
    if (page.value >= 3) status.value = "nomore";
    else status.value = "loading";
  }, 2000);
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    uni.navigateTo({
      url: "/pages/business/mhxf/xunJian/collect/components/collectRecord",
    });
  } else {
  }
});

onLoad((options) => {});

onReady(() => {});

onMounted(() => {});
</script>

<style lang="scss">
.fireReport {
  height: calc(100vh - 44px);
  background-color: #ffffff;
  .reportContent {
    .contentDom {
      display: flex;
      height: 45px;
      line-height: 45px;
      background: #fff;
      padding: 0 10px;
    }

    > uni-view {
      margin-bottom: 10px;
    }

    > uni-view:last-child {
      margin-bottom: 0px;
    }
  }
}
</style>

<style scoped>
uni-page-body,
uni-page-refresh {
  background-color: #f5f6f7;
}
</style>